:root {
  --ink: #173c31;
  --ink-2: #234c40;
  --forest: #214d40;
  --forest-dark: #12382d;
  --sage: #b8c7b3;
  --sage-pale: #e7ece2;
  --cream: #f7f4ed;
  --paper: #fffdf8;
  --sand: #e8dfd0;
  --blush: #eac9bd;
  --terracotta: #bb765e;
  --line: #dedbd2;
  --muted: #6f786f;
  --blue: #3577a9;
  --shadow: 0 18px 55px rgba(22, 52, 43, 0.09);
  --sidebar: 254px;
}

[hidden] {
  display: none !important;
}

.hairflow-auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(330px, .9fr) minmax(520px, 1.1fr);
  background: var(--cream);
  color: var(--ink);
}

.auth-brand-panel {
  position: relative;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(34px, 5vw, 76px);
  background:
    radial-gradient(circle at 86% 15%, rgba(232, 198, 177, .18), transparent 25%),
    radial-gradient(circle at 18% 78%, rgba(184, 199, 179, .17), transparent 31%),
    linear-gradient(145deg, #12382d 0%, #173c31 55%, #214d40 100%);
  color: #f8f1e6;
}

.auth-brand-panel::before,
.auth-brand-panel::after {
  position: absolute;
  border: 1px solid rgba(248, 241, 230, .12);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.auth-brand-panel::before {
  width: 440px;
  height: 440px;
  right: -230px;
  bottom: -90px;
}

.auth-brand-panel::after {
  width: 260px;
  height: 260px;
  right: -118px;
  bottom: 0;
}

.auth-brand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 14px;
  color: inherit;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.14rem;
  letter-spacing: .17em;
  text-decoration: none;
}

.hairflow-logo-mark {
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid rgba(248, 241, 230, .5);
  border-radius: 50%;
  color: #e4c0a4;
  letter-spacing: 0;
}

.auth-brand-mark {
  width: 46px;
  height: 46px;
  --logo-tool-scale: .8;
}

.auth-brand-copy {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: auto 0 34px;
}

.auth-brand-copy .eyebrow {
  color: rgba(248, 241, 230, .68);
}

.auth-brand-copy h2 {
  max-width: 520px;
  margin: 15px 0 20px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.55rem, 5.4vw, 5.4rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.045em;
}

.auth-brand-copy > p:last-child {
  max-width: 500px;
  margin: 0;
  color: rgba(248, 241, 230, .72);
  font-size: clamp(.95rem, 1.4vw, 1.12rem);
  line-height: 1.75;
}

.auth-benefits {
  position: relative;
  z-index: 1;
  display: grid;
  max-width: 560px;
  gap: 12px;
  padding: 23px 0;
  border-top: 1px solid rgba(248, 241, 230, .15);
  border-bottom: 1px solid rgba(248, 241, 230, .15);
}

.auth-benefits span {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(248, 241, 230, .83);
  font-size: .88rem;
}

.auth-benefits i {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: rgba(248, 241, 230, .1);
  color: #e4c0a4;
  font-size: .72rem;
  font-style: normal;
}

.auth-brand-foot {
  position: relative;
  z-index: 1;
  margin: 24px 0 0;
  color: rgba(248, 241, 230, .5);
  font-size: .72rem;
  letter-spacing: .04em;
}

.auth-form-panel {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: clamp(28px, 5vw, 74px);
  background:
    linear-gradient(rgba(23, 60, 49, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 60, 49, .025) 1px, transparent 1px),
    var(--cream);
  background-size: 42px 42px;
}

.auth-card {
  width: min(100%, 570px);
  padding: clamp(30px, 4vw, 52px);
  border: 1px solid rgba(23, 60, 49, .13);
  border-radius: 28px;
  background: rgba(255, 253, 248, .96);
  box-shadow: 0 30px 85px rgba(18, 56, 45, .11);
  animation: auth-card-arrive .6s cubic-bezier(.2, .72, .2, 1) both;
}

.auth-mobile-brand {
  display: none;
  margin: 0 0 28px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  letter-spacing: .17em;
}

.auth-heading-copy {
  margin-bottom: 27px;
}

.auth-kicker {
  color: #8b6c58;
  font-size: .7rem;
  font-weight: 780;
  letter-spacing: .16em;
}

.auth-heading-copy h1 {
  margin: 10px 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.15rem, 4vw, 3.25rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.035em;
}

.auth-heading-copy p {
  margin: 0;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.6;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-bottom: 25px;
  padding: 5px;
  border-radius: 15px;
  background: #ebe9e2;
}

.auth-tabs button {
  min-height: 46px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: .84rem;
  font-weight: 750;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.auth-tabs button.is-active {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 3px 12px rgba(23, 60, 49, .08);
}

.auth-message {
  margin: 0 0 18px;
  padding: 13px 15px;
  border: 1px solid #e0bdac;
  border-radius: 12px;
  background: #fff6f1;
  color: #804f3d;
  font-size: .78rem;
  line-height: 1.55;
}

.auth-message.is-success {
  border-color: #b9d1bf;
  background: #eef7ef;
  color: #285c3b;
}

.auth-resend-confirmation {
  width: 100%;
  min-height: 46px;
  margin: -4px 0 14px;
  padding: 10px 16px;
  border: 1px solid #b8c6bb;
  border-radius: 10px;
  background: #fffdf8;
  color: #174b3b;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.auth-resend-confirmation:hover {
  border-color: #174b3b;
  background: #f0f5ef;
  transform: translateY(-1px);
}

.auth-resend-confirmation:disabled {
  cursor: wait;
  opacity: .65;
  transform: none;
}

.auth-resend-confirmation[hidden] {
  display: none;
}

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

.auth-password-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.auth-password-heading label {
  color: var(--ink);
  font-size: .76rem;
  font-weight: 750;
}

.auth-forgot-link,
.auth-inline-back {
  width: fit-content;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: #3b6758;
  cursor: pointer;
  font: inherit;
  font-size: .72rem;
  font-weight: 750;
}

.auth-forgot-link:hover,
.auth-inline-back:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-inline-back {
  justify-self: center;
  margin-top: 5px;
}

.auth-form > label:not(.auth-consent),
.auth-field-grid label {
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-size: .76rem;
  font-weight: 750;
}

.auth-form input:not([type="checkbox"]) {
  width: 100%;
  min-height: 51px;
  padding: 0 15px;
  border: 1px solid #d9d6cc;
  border-radius: 12px;
  outline: none;
  background: #fffefa;
  color: var(--ink);
  font: inherit;
  font-size: .88rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.auth-form input:not([type="checkbox"]):focus {
  border-color: #6f9588;
  box-shadow: 0 0 0 4px rgba(111, 149, 136, .13);
}

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

.auth-input-wrap > span {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 15px;
  color: #8a938d;
  transform: translateY(-50%);
  pointer-events: none;
}

.auth-input-wrap input {
  padding-left: 42px !important;
}

.auth-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.auth-field-wide {
  grid-column: 1 / -1;
}

.auth-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 2px;
  color: var(--muted);
  font-size: .73rem;
  line-height: 1.45;
}

.auth-consent input {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  margin: 1px 0 0;
  accent-color: var(--ink);
}

.auth-remember-device {
  align-items: center;
  margin-top: 3px;
  padding: 11px 12px;
  border: 1px solid #e2dfd6;
  border-radius: 11px;
  background: #fbfaf5;
  cursor: pointer;
}

.auth-remember-device span {
  display: grid;
  gap: 2px;
}

.auth-remember-device strong {
  color: var(--ink);
  font-size: .76rem;
}

.auth-remember-device small {
  color: #7b857f;
  font-size: .67rem;
  line-height: 1.4;
}

.auth-submit {
  display: flex;
  min-height: 53px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
  border: 0;
  border-radius: 12px;
  background: var(--ink);
  color: #fffdf8;
  cursor: pointer;
  font: inherit;
  font-size: .87rem;
  font-weight: 760;
  box-shadow: 0 12px 28px rgba(23, 60, 49, .18);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.auth-submit:hover {
  background: #214d40;
  box-shadow: 0 15px 32px rgba(23, 60, 49, .22);
  transform: translateY(-1px);
}

.auth-submit:disabled,
.account-signout:disabled {
  cursor: wait;
  opacity: .7;
  transform: none;
}

.auth-submit:focus-visible,
.auth-tabs button:focus-visible,
.auth-forgot-link:focus-visible,
.auth-inline-back:focus-visible,
.auth-back-link:focus-visible {
  outline: 3px solid rgba(111, 149, 136, .35);
  outline-offset: 3px;
}

.auth-helper {
  margin: 0;
  color: #8a938d;
  font-size: .68rem;
  text-align: center;
}

.auth-security-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 23px;
  padding: 15px;
  border: 1px solid #dde5dc;
  border-radius: 13px;
  background: #f2f6ef;
}

.auth-security-note > span {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: #dfe9dc;
  font-size: .78rem;
}

.auth-security-note p {
  margin: 0;
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.5;
}

.auth-security-note strong {
  color: var(--ink);
  font-size: .74rem;
}

.auth-back-link {
  display: block;
  width: fit-content;
  margin: 22px auto 0;
  color: var(--muted);
  font-size: .72rem;
  text-decoration: none;
}

.auth-back-link:hover {
  color: var(--ink);
}

.account-signout {
  align-self: center;
  justify-self: end;
  text-decoration: none;
}

@keyframes auth-card-arrive {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 960px) {
  .hairflow-auth {
    grid-template-columns: 1fr;
  }

  .auth-brand-panel {
    display: none;
  }

  .auth-form-panel {
    min-height: 100vh;
    padding: 24px;
  }

  .auth-mobile-brand {
    display: block;
  }
}

@media (max-width: 560px) {
  .auth-form-panel {
    align-items: start;
    padding: 0;
    background: var(--paper);
  }

  .auth-card {
    min-height: 100vh;
    padding: 32px 22px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

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

  .auth-field-wide {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-card {
    animation: none;
  }
}

.hairflow-page-loader {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: none;
  place-items: center;
  overflow: hidden;
  background: #173c31;
  color: #f8f1e6;
  opacity: 1;
  transition: opacity .46s ease, visibility .46s ease;
}

.show-hairflow-loader .hairflow-page-loader {
  display: grid;
}

.hairflow-page-loader.is-leaving {
  visibility: hidden;
  opacity: 0;
}

.loader-lockup {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 30px 34px;
}

.loader-lockup strong {
  overflow: hidden;
  color: #fff9ee;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 4vw, 2.35rem);
  font-weight: 500;
  letter-spacing: .16em;
  clip-path: inset(0 100% 0 0);
  animation: hairflow-name-reveal .9s .42s cubic-bezier(.2,.72,.2,1) forwards;
}

.loader-scissors {
  position: relative;
  z-index: 2;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(248,241,230,.48);
  border-radius: 50%;
  color: #e4c0a4;
  --logo-tool-scale: .92;
}

.scissor-tool {
  position: relative;
  display: block;
  width: 32px;
  height: 24px;
  color: currentColor;
}

.scissor-half {
  position: absolute;
  inset: 0;
  transform-origin: 12px 12px;
}

.scissor-half-upper {
  transform: rotate(-18deg);
}

.scissor-half-lower {
  transform: rotate(18deg);
}

.scissor-ring,
.scissor-arm,
.scissor-blade,
.scissor-pivot {
  position: absolute;
  display: block;
}

.scissor-ring {
  left: 0;
  width: 9px;
  height: 9px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.scissor-arm {
  top: 10px;
  left: 8px;
  width: 6px;
  height: 3px;
  border-radius: 3px;
  background: currentColor;
}

.scissor-half-upper .scissor-ring {
  top: 12px;
  left: -2px;
}

.scissor-half-lower .scissor-ring {
  top: 2px;
  left: -2px;
}

.scissor-blade {
  top: 10px;
  left: 12px;
  width: 19px;
  height: 3px;
  border-radius: 3px 100% 100% 3px;
  background: currentColor;
}

.scissor-blade::after {
  position: absolute;
  top: 1px;
  right: 1px;
  left: 3px;
  height: 1px;
  border-radius: 1px;
  background: rgba(255, 255, 255, .42);
  content: "";
}

.scissor-pivot {
  z-index: 3;
  top: 9px;
  left: 9px;
  width: 6px;
  height: 6px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: #173c31;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
}

.loader-scissor-tool .scissor-half-upper {
  animation: hairflow-loader-upper-blade .66s cubic-bezier(.55,.02,.28,1) 2;
}

.loader-scissor-tool .scissor-half-lower {
  animation: hairflow-loader-lower-blade .66s cubic-bezier(.55,.02,.28,1) 2;
}

@keyframes hairflow-loader-upper-blade {
  0%, 100% { transform: rotate(-18deg); }
  47%, 58% { transform: rotate(0); }
}

@keyframes hairflow-loader-lower-blade {
  0%, 100% { transform: rotate(18deg); }
  47%, 58% { transform: rotate(0); }
}

@keyframes hairflow-name-reveal {
  to { clip-path: inset(0 0 0 0); }
}

* {
  box-sizing: border-box;
}

html {
  font-size: 17px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--cream);
  color: var(--ink);
  font-family: Inter, Avenir, "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

button,
label,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
.feature-copy h2,
.featured-trend h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -0.04em;
}

h1 {
  margin-bottom: 8px;
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  line-height: 1;
}

h2 {
  margin-bottom: 8px;
  font-size: 1.42rem;
  letter-spacing: -0.025em;
}

h3 {
  margin-bottom: 8px;
  font-size: 1.08rem;
}

p {
  line-height: 1.6;
}

.app-shell {
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  z-index: 30;
  inset: 0 auto 0 0;
  display: flex;
  width: var(--sidebar);
  flex-direction: column;
  overflow-y: auto;
  padding: 28px 18px 18px;
  background: var(--ink);
  color: #f8f2e8;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 12px 42px;
  color: inherit;
  font-family: Georgia, serif;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-decoration: none;
}

.brand:hover .brand-scissor-tool .scissor-half-upper,
.brand:focus-visible .brand-scissor-tool .scissor-half-upper,
.auth-brand:hover .brand-scissor-tool .scissor-half-upper,
.auth-brand:focus-visible .brand-scissor-tool .scissor-half-upper {
  animation: hairflow-logo-upper-blade .58s cubic-bezier(.55,.02,.28,1);
}

.brand:hover .brand-scissor-tool .scissor-half-lower,
.brand:focus-visible .brand-scissor-tool .scissor-half-lower,
.auth-brand:hover .brand-scissor-tool .scissor-half-lower,
.auth-brand:focus-visible .brand-scissor-tool .scissor-half-lower {
  animation: hairflow-logo-lower-blade .58s cubic-bezier(.55,.02,.28,1);
}

@keyframes hairflow-logo-upper-blade {
  0%, 100% { transform: rotate(-18deg); }
  48%, 60% { transform: rotate(0); }
}

@keyframes hairflow-logo-lower-blade {
  0%, 100% { transform: rotate(18deg); }
  48%, 60% { transform: rotate(0); }
}

.brand-mark {
  width: 38px;
  height: 38px;
  --logo-tool-scale: .72;
}

.brand-scissors {
  position: relative;
  z-index: 2;
  display: block;
  transform: translate(-3px, 2px) rotate(-25deg) scale(var(--logo-tool-scale, .72));
}

.brand-strand {
  position: absolute;
  right: 5px;
  bottom: 4px;
  width: 17px;
  height: 25px;
  transform: rotate(18deg);
  border-right: 2px solid #d7b7a1;
  border-radius: 50%;
}

.brand-strand::after {
  position: absolute;
  right: -5px;
  bottom: 2px;
  width: 12px;
  height: 18px;
  transform: rotate(18deg);
  border-right: 1px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  content: "";
}

.main-nav {
  display: grid;
  gap: 4px;
}

.nav-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 13px;
  padding: 11px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.9rem;
  text-align: left;
  transition: 160ms ease;
}

.nav-item:hover,
.nav-item:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  outline: none;
}

.nav-item.is-active {
  background: rgba(237, 226, 205, 0.13);
  color: #fff;
  box-shadow: inset 2px 0 #dcbfa3;
}

.nav-create-group {
  display: grid;
  gap: 3px;
}

.nav-create-chevron {
  margin-left: auto;
  transition: transform 180ms ease;
}

.nav-create-group.is-open .nav-create-chevron {
  transform: rotate(180deg);
}

.nav-submenu {
  display: none;
  gap: 2px;
  padding: 1px 0 5px 36px;
}

.nav-create-group.is-open .nav-submenu {
  display: grid;
}

.nav-submenu button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, .58);
  font-size: .72rem;
  text-align: left;
}

.nav-submenu button:hover,
.nav-submenu button:focus-visible,
.nav-submenu button.is-active {
  background: rgba(255, 255, 255, .07);
  color: #fff;
  outline: none;
}

.nav-submenu em {
  display: grid;
  min-width: 19px;
  height: 19px;
  margin-left: auto;
  padding: 0 5px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  font-size: .58rem;
  font-style: normal;
  font-weight: 800;
}

.nav-icon {
  display: grid;
  width: 22px;
  place-items: center;
  font-size: 1.1rem;
}

.nav-badge {
  display: grid;
  width: 22px;
  height: 22px;
  margin-left: auto;
  place-items: center;
  border-radius: 50%;
  background: var(--terracotta);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
}

.nav-section-label {
  margin: 34px 12px 10px;
  color: rgba(255, 255, 255, 0.36);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.15em;
}

.sidebar-card {
  margin-top: auto;
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.055);
}

.sidebar-card .sparkle {
  margin-bottom: 10px;
  color: #d7b994;
}

.sidebar-card strong {
  font-family: Georgia, serif;
  font-size: 0.92rem;
}

.sidebar-card p {
  margin: 7px 0 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.74rem;
  line-height: 1.5;
}

.sidebar-card-dismiss {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: rgba(255, 255, 255, .72);
  cursor: pointer;
  font-size: .66rem;
}

.sidebar-card-dismiss input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #d7b994;
}

.salon-profile {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 13px 8px 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: white;
  text-align: left;
}

.sidebar-signout {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.86);
  font: inherit;
  font-size: 0.66rem;
  font-weight: 750;
  white-space: nowrap;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.sidebar-signout:hover {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.sidebar-signout:focus-visible {
  outline: 3px solid rgba(215, 185, 148, 0.42);
  outline-offset: 3px;
}

.sidebar-signout:disabled {
  cursor: wait;
  opacity: .58;
}

.salon-profile strong,
.salon-profile small {
  display: block;
}

.salon-profile strong {
  font-size: 0.77rem;
}

.salon-profile small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.66rem;
}

.avatar {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: #e3c3af;
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: 0.8rem;
  font-weight: 700;
}

.main-content {
  min-height: 100vh;
  margin-left: var(--sidebar);
}

.topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  height: 68px;
  align-items: center;
  justify-content: space-between;
  padding: 0 34px;
  border-bottom: 1px solid var(--line);
  background: rgba(247, 244, 237, 0.92);
  backdrop-filter: blur(14px);
}

.breadcrumb {
  display: flex;
  gap: 9px;
  align-items: center;
  color: var(--muted);
  font-size: 0.78rem;
}

.breadcrumb strong {
  color: var(--ink);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.platform-status {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-right: 14px;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.7rem;
}

.pilot-status-lock {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #e6eee7;
  font-size: .65rem;
}

.status-dots {
  display: flex;
}

.status-dots i {
  display: grid;
  width: 23px;
  height: 23px;
  margin-left: -5px;
  place-items: center;
  border: 2px solid var(--cream);
  border-radius: 50%;
  color: #fff;
  font-size: 0.56rem;
  font-style: normal;
  font-weight: 800;
}

.status-dots i:first-child {
  margin-left: 0;
}

.instagram-dot,
.instagram-bg,
.facebook-dot,
.facebook-bg,
.linkedin-dot,
.linkedin-bg {
  overflow: hidden;
  flex: 0 0 auto;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  color: transparent !important;
  font-size: 0 !important;
  text-indent: -999px;
}

.instagram-dot,
.instagram-bg {
  background-image: url("/brands/instagram.png") !important;
}

.facebook-dot,
.facebook-bg {
  background-image: url("/brands/facebook.png") !important;
}

.linkedin-dot,
.linkedin-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath fill='%230a66c2' d='M25.9 0H2.1C.9 0 0 .9 0 2v24c0 1.1.9 2 2.1 2H26c1.1 0 2.1-.9 2.1-2V2C28 1 27.1 0 25.9 0ZM8.3 23.9H4.2V10.5h4.2v13.4ZM6.2 8.7a2.4 2.4 0 1 1 0-4.8 2.4 2.4 0 0 1 0 4.8Zm17.7 15.2h-4.1v-6.5c0-1.5 0-3.5-2.2-3.5s-2.5 1.7-2.5 3.4v6.6H11V10.5h4v1.8h.1c.6-1 1.9-2.2 3.9-2.2 4.2 0 5 2.8 5 6.4v7.4Z'/%3E%3C/svg%3E") !important;
}

.hairflow-bg {
  background: #1f5a49;
}

.icon-button,
.avatar-small,
.mobile-menu {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
}

.avatar-small {
  border: 0;
  background: #e3c3af;
  font-size: 0.67rem;
}

.topbar-settings-gear {
  display: grid;
  place-items: center;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1;
  transition: transform 180ms ease;
}

.avatar-small:hover .topbar-settings-gear,
.avatar-small:focus-visible .topbar-settings-gear {
  transform: rotate(35deg);
}

.notification-dot {
  position: absolute;
  top: 6px;
  right: 5px;
  width: 6px;
  height: 6px;
  border: 1px solid white;
  border-radius: 50%;
  background: var(--terracotta);
}

.notification-menu {
  position: relative;
}

.notification-button {
  font-size: .78rem;
}

.notification-bell {
  filter: grayscale(1);
  line-height: 1;
}

.notification-panel {
  position: absolute;
  z-index: 80;
  top: calc(100% + 12px);
  right: 0;
  width: 310px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 20px 55px rgba(18, 42, 34, .2);
}

.notification-panel[hidden] {
  display: none;
}

.notification-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 16px 11px;
  border-bottom: 1px solid var(--line);
}

.notification-panel-heading strong {
  font-size: .72rem;
}

.notification-panel-heading span {
  padding: 4px 7px;
  border-radius: 12px;
  background: #edf2ea;
  color: var(--forest);
  font-size: .48rem;
  font-weight: 800;
}

.notification-panel > button {
  display: grid;
  width: 100%;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid #ece9e1;
  background: white;
  color: var(--ink);
  text-align: left;
}

.notification-panel > button:hover {
  background: #f4f5ef;
}

.notification-panel > button i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--sage-pale);
  color: var(--forest);
  font-size: .62rem;
  font-style: normal;
}

.notification-panel > button strong,
.notification-panel > button small {
  display: block;
}

.notification-panel > button strong {
  font-size: .59rem;
}

.notification-panel > button small {
  margin-top: 3px;
  color: var(--muted);
  font-size: .5rem;
}

.notification-panel > p {
  margin: 0;
  padding: 11px 16px;
  color: var(--muted);
  font-size: .48rem;
  line-height: 1.45;
}

.notification-empty {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 11px;
  padding: 18px 16px;
  color: var(--ink);
}

.notification-empty i {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--sage-pale);
  color: var(--forest);
  font-size: .66rem;
  font-style: normal;
  font-weight: 800;
}

.notification-empty strong,
.notification-empty small {
  display: block;
}

.notification-empty strong {
  font-size: .62rem;
}

.notification-empty small {
  margin-top: 3px;
  color: var(--muted);
  font-size: .5rem;
  line-height: 1.45;
}

.mobile-menu {
  display: none;
}

.view {
  display: none;
}

.view.is-active {
  display: block;
  animation: view-in 260ms ease;
}

@keyframes view-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.page-wrap {
  width: min(1380px, 100%);
  margin: 0 auto;
  padding: 52px clamp(28px, 4vw, 68px) 80px;
}

.narrow-wrap {
  width: min(1120px, 100%);
}

.welcome-row,
.standard-header,
.create-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 34px;
}

.eyebrow {
  margin-bottom: 9px;
  color: #798178;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.15em;
}

.lead {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.primary-button,
.cream-button,
.outline-button,
.quiet-button,
.text-button,
.mini-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 750;
  transition: 160ms ease;
}

.primary-button {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--forest);
  background: var(--forest);
  color: #fff;
  box-shadow: 0 9px 22px rgba(30, 71, 59, 0.16);
}

.primary-button:hover {
  transform: translateY(-1px);
  background: var(--forest-dark);
}

.primary-button.large {
  min-height: 50px;
  padding: 0 22px;
}

.primary-button.wide,
.outline-button.wide {
  width: 100%;
}

.cream-button {
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  background: #f8f0e2;
  color: var(--ink);
}

.cream-button:hover {
  background: #fff;
}

.outline-button,
.quiet-button {
  min-height: 41px;
  padding: 0 17px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.outline-button:hover,
.quiet-button:hover {
  border-color: var(--sage);
  background: #f4f5ef;
}

.outline-button:disabled {
  cursor: not-allowed;
  border-color: #deded7;
  background: #f4f3ed;
  color: #949a93;
  transform: none;
}

.go-live-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 15px;
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid #cbdaca;
  border-radius: 13px;
  background: linear-gradient(105deg, #edf4eb, #f8f5ec);
}

.go-live-banner-icon,
.pilot-account-lock {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: var(--forest);
  font-size: .92rem;
}

.go-live-banner .eyebrow { margin-bottom: 3px; }
.go-live-banner strong { display: block; font-family: Georgia, serif; font-size: 1rem; }
.go-live-banner small { display: block; margin-top: 4px; color: var(--muted); font-size: .61rem; line-height: 1.45; }

.go-live-account {
  max-width: 220px;
  overflow: hidden;
  padding: 7px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,.72);
  color: #52675d;
  font-size: .55rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quiet-button {
  color: var(--muted);
}

.text-button,
.mini-action {
  padding: 6px 0;
  border: 0;
  background: transparent;
}

.text-button:hover {
  color: var(--terracotta);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(190px, 0.55fr) minmax(190px, 0.55fr);
  gap: 16px;
}

.feature-card,
.stat-card,
.panel,
.form-card,
.settings-card,
.connection-card,
.featured-trend,
.inspiration-card,
.library-card,
.generation-banner,
.post-preview-card,
.text-editor-card {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.pilot-publish-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid #d5dfd2;
  border-radius: 12px;
  background: #eff4ec;
}

.pilot-publish-notice > span {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--forest);
  font-size: .7rem;
}

.pilot-publish-notice p { margin: 0; color: var(--muted); font-size: .61rem; line-height: 1.5; }
.pilot-publish-notice strong { display: block; color: var(--ink); }

.publish-summary {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.feature-card {
  position: relative;
  display: grid;
  min-height: 252px;
  grid-template-columns: 1.05fr 0.95fr;
  overflow: hidden;
  border: 0;
  background: var(--forest);
  color: white;
}

.feature-card::after {
  position: absolute;
  right: -80px;
  bottom: -190px;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  content: "";
}

.feature-copy {
  z-index: 2;
  padding: 38px 12px 32px 38px;
}

.feature-kicker {
  display: block;
  margin-bottom: 16px;
  color: #c7d5c2;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.feature-copy h2 {
  max-width: 420px;
  margin-bottom: 11px;
  font-size: clamp(1.7rem, 2.5vw, 2.55rem);
  line-height: 1.05;
}

.feature-copy p {
  max-width: 400px;
  margin-bottom: 25px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.79rem;
}

.feature-art {
  position: relative;
  z-index: 3;
  min-height: 240px;
}

.phone-card {
  position: absolute;
  right: 48px;
  bottom: -46px;
  width: 158px;
  padding: 10px;
  transform: rotate(4deg);
  border: 5px solid #eadcc8;
  border-radius: 25px;
  background: #faf6ed;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
}

.phone-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 20px;
  color: var(--ink);
  font-size: 0.45rem;
}

.phone-top span {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--blush);
}

.hair-art,
.copper-hair {
  background:
    radial-gradient(circle at 36% 16%, rgba(255,255,255,.35), transparent 13%),
    repeating-linear-gradient(102deg, rgba(255,255,255,.08) 0 2px, transparent 2px 11px),
    linear-gradient(135deg, #4b241d, #a34f32 38%, #d58a5d 60%, #6f2e21);
}

.hair-art {
  position: relative;
  height: 154px;
  overflow: hidden;
  border-radius: 9px;
}

.hair-art::before,
.hair-art::after {
  position: absolute;
  width: 120px;
  height: 210px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 50%;
  content: "";
}

.hair-art::before { left: -28px; top: -40px; transform: rotate(-22deg); }
.hair-art::after { right: -34px; top: -18px; transform: rotate(22deg); }

.phone-lines {
  display: grid;
  gap: 5px;
  padding: 10px 2px 6px;
}

.phone-lines span {
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: #d8d2c7;
}

.phone-lines span:nth-child(2) { width: 82%; }
.phone-lines span:nth-child(3) { width: 56%; }

.floating-chip {
  position: absolute;
  z-index: 4;
  padding: 9px 12px;
  border-radius: 20px;
  background: rgba(250, 247, 239, 0.96);
  color: var(--ink);
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  font-size: 0.62rem;
  font-weight: 750;
}

.chip-one { top: 42px; right: 12px; }
.chip-two { top: 135px; left: 4px; }

.stat-card {
  display: flex;
  min-height: 252px;
  flex-direction: column;
  padding: 24px;
}

.card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mini-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
}

.mini-icon.sage { background: var(--sage-pale); }
.mini-icon.blush { background: #f4e4df; }

.positive-pill {
  padding: 5px 8px;
  border-radius: 12px;
  background: #e7f1e9;
  color: #438056;
  font-size: 0.62rem;
  font-weight: 800;
}

.data-pending-pill {
  padding: 5px 8px;
  border-radius: 12px;
  background: #f0f1ec;
  color: #7c837c;
  font-size: .55rem;
  font-weight: 760;
}

.stat-number {
  margin-top: 25px;
  font-family: Georgia, serif;
  font-size: 2.15rem;
  font-weight: 500;
}

.stat-label {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.72rem;
}

.mini-bars {
  display: flex;
  height: 55px;
  align-items: end;
  gap: 6px;
  margin: auto 0 12px;
}

.mini-bars i {
  flex: 1;
  min-width: 4px;
  border-radius: 2px 2px 0 0;
  background: var(--sage);
}

.mini-bars i:nth-last-child(-n+2) {
  background: var(--forest);
}

.stat-card small {
  color: #959a91;
  font-size: 0.62rem;
}

.stat-empty-copy {
  width: 100%;
  margin-top: auto;
  padding: 13px 0 0;
  border-top: 1px solid #e6e7e1;
}

.stat-empty-copy strong {
  display: block;
  color: var(--ink);
  font-size: .63rem;
}

.stat-empty-copy p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .55rem;
  line-height: 1.45;
}

.channel-split {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: auto 0 14px;
}

.channel-split span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.6rem;
}

.channel-split i,
.channel-icons i,
.platform-tabs i {
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 0.52rem;
  font-style: normal;
  font-weight: 800;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(270px, 0.55fr);
  gap: 16px;
  margin-top: 16px;
}

.panel {
  display: block;
  align-items: stretch;
  padding: 25px;
}

.panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.post-list {
  position: relative;
  display: grid;
}

.post-row {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(160px, 1fr) 90px auto 28px;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid #ece8df;
}

.dashboard-post-menu {
  position: relative;
  z-index: 14;
  justify-self: end;
}

.dashboard-post-menu.is-open {
  z-index: 30;
}

.dashboard-post-menu .library-card-menu-toggle {
  width: 29px;
  height: 29px;
  box-shadow: none;
}

.dashboard-post-menu .library-card-menu-popover {
  top: 34px;
  z-index: 2;
}

.dashboard-post-empty {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 19px 0 6px;
  border-top: 1px solid #ece8df;
}

.dashboard-post-empty[hidden] {
  display: none;
}

.dashboard-post-empty > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #edf2e9;
  color: var(--forest);
}

.dashboard-post-empty strong,
.dashboard-post-empty p {
  display: block;
}

.dashboard-post-empty strong {
  color: var(--forest);
  font-size: .68rem;
}

.dashboard-post-empty p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: .56rem;
  line-height: 1.4;
}

.post-thumb {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: end center;
  overflow: hidden;
  border-radius: 8px;
  background-position: center;
  background-size: cover;
}

.post-thumb span {
  padding: 2px 5px;
  background: rgba(255,255,255,.72);
  font-family: Georgia, serif;
  font-size: 0.48rem;
}

.blonde-hair {
  background:
    radial-gradient(circle at 36% 16%, rgba(255,255,255,.55), transparent 16%),
    repeating-linear-gradient(98deg, rgba(255,255,255,.18) 0 2px, transparent 2px 10px),
    linear-gradient(135deg, #725b3d, #c8a879 45%, #ead3aa 70%, #8a724e);
}

.bob-hair {
  background:
    repeating-linear-gradient(106deg, rgba(255,255,255,.08) 0 2px, transparent 2px 12px),
    linear-gradient(120deg, #17130f, #554338 48%, #181411);
}

.post-copy strong,
.post-copy span,
.post-metric strong,
.post-metric span {
  display: block;
}

.post-copy strong {
  overflow: hidden;
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-copy span,
.post-metric span {
  margin-top: 5px;
  color: #96978f;
  font-size: 0.61rem;
}

.post-metric {
  text-align: right;
}

.post-metric strong {
  font-family: Georgia, serif;
  font-size: 0.94rem;
}

.published-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 12px;
  background: #e8f0e8;
  color: #3e7050;
  font-size: 0.58rem;
  font-weight: 800;
}

.more-button {
  border: 0;
  background: transparent;
  color: #999a93;
}

.idea-panel {
  padding: 16px;
}

.idea-image {
  position: relative;
  display: grid;
  height: 125px;
  margin-bottom: 18px;
  place-items: center;
  overflow: hidden;
  border-radius: 11px;
  background:
    radial-gradient(circle at 72% 20%, #f2d2bd 0 7%, transparent 7.5%),
    linear-gradient(135deg, #b7c7b1, #e2d6c4);
}

.idea-image::before,
.idea-image::after {
  position: absolute;
  border: 1px solid rgba(23,60,49,.15);
  border-radius: 50%;
  content: "";
}

.idea-image::before { width: 160px; height: 160px; left: -55px; }
.idea-image::after { width: 110px; height: 110px; right: -25px; bottom: -60px; }

.trend-tag {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  padding: 6px 8px;
  border-radius: 12px;
  background: var(--ink);
  color: white;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.reel-frame {
  z-index: 2;
  display: grid;
  width: 62px;
  height: 84px;
  place-content: center;
  transform: rotate(6deg);
  border: 3px solid white;
  border-radius: 10px;
  color: var(--ink);
  text-align: center;
  box-shadow: 0 8px 20px rgba(28,58,48,.13);
}

.reel-frame span {
  font-family: Georgia, serif;
  font-size: 1.45rem;
}

.reel-frame small {
  font-size: .54rem;
}

.idea-panel h3 {
  font-family: Georgia, serif;
  font-size: 1.2rem;
}

.idea-panel > p:not(.eyebrow) {
  color: var(--muted);
  font-size: .72rem;
}

.create-wrap {
  width: min(1260px, 100%);
}

.create-header {
  align-items: flex-start;
}

.create-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.template-quick-edit {
  display: grid;
  grid-template-columns: minmax(230px, .9fr) minmax(320px, 1.35fr) auto;
  align-items: end;
  gap: 18px;
  margin: -8px 0 26px;
  padding: 20px;
  border: 1px solid #bcd2c3;
  border-radius: 18px;
  background: linear-gradient(135deg, #eef6ed, #f8f7ef);
  box-shadow: 0 14px 30px rgba(23, 60, 49, .07);
}

.template-quick-edit[hidden] {
  display: none !important;
}

.template-quick-heading {
  display: grid;
  gap: 4px;
}

.template-quick-heading > span {
  color: #50816d;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .14em;
}

.template-quick-heading strong {
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: 1.3rem;
}

.template-quick-heading small {
  max-width: 420px;
  color: var(--muted);
  line-height: 1.45;
}

.template-quick-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.template-quick-fields label {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: .68rem;
  font-weight: 800;
}

.template-quick-fields input,
.template-quick-fields select {
  width: 100%;
  min-height: 43px;
  padding: 9px 11px;
  border: 1px solid #cad2c8;
  border-radius: 10px;
  background: #fffdfa;
  font-size: .76rem;
  font-weight: 500;
}

.template-quick-actions {
  display: grid;
  justify-items: stretch;
  gap: 8px;
}

.template-quick-actions .primary-button {
  white-space: nowrap;
}

.template-quick-actions .text-button {
  justify-content: center;
  font-size: .68rem;
}

.template-wrap {
  width: min(1260px, 100%);
}

.template-intro {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: -6px 0 26px;
  padding: 20px 22px;
  border: 1px solid #c9d7c8;
  border-radius: 16px;
  background: #edf5eb;
}

.template-intro-icon {
  display: grid;
  flex: 0 0 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
}

.template-intro strong {
  display: block;
  margin: 1px 0 4px;
  color: var(--ink);
  font-size: .9rem;
}

.template-intro p {
  max-width: 820px;
  margin: 0;
  color: var(--muted);
  font-size: .76rem;
}

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

.template-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fffdf8;
  box-shadow: 0 10px 24px rgba(29, 55, 44, .05);
}

.template-card-visual {
  position: relative;
  display: grid;
  min-height: 185px;
  align-content: center;
  justify-items: center;
  overflow: hidden;
  padding: 38px 30px;
  background: linear-gradient(145deg, var(--template-primary, #173c31), var(--template-accent, #cba98f));
  color: var(--template-text, #f8f1e6);
  text-align: center;
}

.template-card-visual::after {
  position: absolute;
  inset: 12px;
  border: 1px solid currentColor;
  border-radius: 13px;
  content: "";
  opacity: .24;
}

.template-card-visual > * {
  position: relative;
  z-index: 1;
}

.template-card-visual span {
  margin-bottom: 8px;
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .16em;
}

.template-card-visual strong {
  max-width: 260px;
  font-family: Georgia, serif;
  font-size: 1.65rem;
  line-height: 1.03;
}

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

.template-card-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.template-card-title-row h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
}

.template-type-pill {
  padding: 5px 8px;
  border-radius: 999px;
  background: #edf3e9;
  color: #3d6b58;
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.template-card-meta {
  margin: 8px 0 15px;
  color: var(--muted);
  font-size: .7rem;
}

.template-card-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.template-card-actions .primary-button,
.template-card-actions .outline-button {
  min-height: 43px;
  padding: 10px 13px;
  font-size: .72rem;
}

.template-delete-button {
  width: 43px;
  padding: 0 !important;
  color: #9a4c42;
}

.template-empty {
  display: grid;
  min-height: 310px;
  margin-top: 18px;
  padding: 46px 24px;
  place-items: center;
  align-content: center;
  border: 1px dashed #bdc8bd;
  border-radius: 18px;
  background: rgba(255, 253, 248, .72);
  text-align: center;
}

.template-empty[hidden] {
  display: none !important;
}

.template-empty > span {
  display: grid;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  place-items: center;
  border-radius: 50%;
  background: #edf3e9;
  color: var(--ink);
  font-size: 1.2rem;
}

.template-empty p {
  margin: 7px 0 18px;
  color: var(--muted);
  font-size: .76rem;
}

.template-modal-icon {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 15px;
  place-items: center;
  border-radius: 50%;
  background: #e8f1e6;
  color: var(--ink);
  font-size: 1.2rem;
}

.template-name-field {
  display: grid;
  gap: 7px;
  margin: 18px 0 12px;
  color: var(--ink);
  font-size: .73rem;
  font-weight: 800;
}

.template-name-field input {
  min-height: 49px;
  padding: 12px 14px;
  border: 1px solid #cbd0c7;
  border-radius: 11px;
  background: #fffdfa;
}

.template-save-summary {
  margin-bottom: 18px;
  padding: 13px 15px;
  border-radius: 11px;
  background: #f2f4ee;
  color: var(--muted);
  font-size: .69rem;
  line-height: 1.55;
}

.stepper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.stepper li {
  position: relative;
  padding: 0 22px 20px 0;
  border-bottom: 2px solid #d9d7ce;
  color: #969a91;
}

.stepper-action {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.stepper-action:not(:disabled) {
  cursor: pointer;
}

.stepper-action:not(:disabled):hover strong {
  color: var(--forest);
}

.stepper-action:focus-visible {
  border-radius: 8px;
  outline: 3px solid rgba(40, 79, 66, .16);
  outline-offset: 5px;
}

.stepper li::after {
  position: absolute;
  right: -1px;
  bottom: -2px;
  left: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--forest);
  content: "";
  transition: 300ms ease;
}

.stepper li.is-active,
.stepper li.is-complete,
.stepper li.is-available {
  color: var(--ink);
}

.stepper li.is-active::after,
.stepper li.is-complete::after {
  transform: scaleX(1);
}

.stepper-action > span {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #c9c9c0;
  border-radius: 50%;
  font-family: Georgia, serif;
  font-size: .83rem;
}

.stepper li.is-active .stepper-action > span,
.stepper li.is-complete .stepper-action > span {
  border-color: var(--forest);
  background: var(--forest);
  color: white;
}

.stepper li.is-available:not(.is-active, .is-complete) .stepper-action > span {
  border-color: var(--forest);
  background: white;
  color: var(--forest);
}

.stepper strong,
.stepper small {
  display: block;
}

.stepper strong { font-size: .72rem; }
.stepper small { margin-top: 3px; font-size: .59rem; font-weight: 400; }

.create-step {
  display: none;
}

.create-step.is-active {
  display: block;
  animation: view-in 260ms ease;
}

.form-grid,
.publish-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.form-card {
  padding: 28px;
}

.post-type-card {
  margin-bottom: 18px;
}

.post-type-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.post-type-heading .section-number {
  margin-bottom: 10px;
}

.post-type-heading .section-heading {
  margin-bottom: 20px;
}

.required-pill {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 20px;
  background: var(--sage-pale);
  color: var(--forest);
  font-size: .48rem;
  font-weight: 850;
  letter-spacing: .1em;
}

.post-type-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 9px;
}

.post-type-grid button {
  display: flex;
  min-height: 116px;
  flex-direction: column;
  align-items: flex-start;
  padding: 13px;
  border: 1px solid #d7d6ce;
  border-radius: 11px;
  background: #fbfaf6;
  color: var(--ink);
  text-align: left;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.post-type-grid button:hover {
  transform: translateY(-2px);
  border-color: #aebcaf;
}

.post-type-grid button:focus-visible {
  outline: 3px solid rgba(40, 79, 66, .18);
  outline-offset: 2px;
}

.post-type-grid button.is-selected {
  border-color: var(--forest);
  background: #edf2e9;
  box-shadow: inset 0 0 0 1px rgba(23, 60, 49, .06), 0 7px 18px rgba(23, 60, 49, .08);
}

.post-type-icon {
  display: grid;
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  place-items: center;
  border-radius: 9px;
  background: #ecebe4;
  color: #718079;
  font-family: Georgia, serif;
  font-size: .9rem;
  font-weight: 700;
}

.post-type-grid button.is-selected .post-type-icon {
  background: var(--forest);
  color: white;
}

.post-type-grid strong,
.post-type-grid small {
  display: block;
}

.post-type-grid strong {
  font-size: .69rem;
}

.post-type-grid small {
  margin-top: 4px;
  color: var(--muted);
  font-size: .52rem;
  font-weight: 500;
  line-height: 1.35;
}

.section-number {
  margin-bottom: 22px;
  color: #9b9c94;
  font-family: Georgia, serif;
  font-size: .75rem;
  letter-spacing: .08em;
}

.section-heading {
  margin-bottom: 23px;
}

.section-heading p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: .72rem;
}

.image-mode-toggle {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #f0eee7;
}

.image-mode-toggle button {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 7px;
  min-height: 58px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #798078;
  text-align: left;
}

.image-mode-toggle button > span {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 7px;
  background: rgba(255, 255, 255, .55);
  font-size: .9rem;
}

.image-mode-toggle strong,
.image-mode-toggle small {
  display: block;
}

.image-mode-toggle strong {
  font-size: .66rem;
}

.image-mode-toggle small {
  margin-top: 3px;
  font-size: .54rem;
  font-weight: 500;
}

.image-mode-toggle button.is-active {
  border-color: #d2d8cf;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 3px 12px rgba(23, 60, 49, .07);
}

.image-mode-toggle button.is-active > span {
  background: var(--sage-pale);
}

.image-mode-panel {
  display: none;
}

.image-mode-panel.is-active {
  display: block;
  animation: view-in 180ms ease;
}

.form-grid > .treatment-card {
  order: -1;
}

.carousel-mode-panel {
  padding-top: 3px;
}

.carousel-workshop-heading,
.carousel-control-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.carousel-workshop-heading {
  margin-bottom: 14px;
}

.carousel-workshop-heading > div > span,
.carousel-control-heading small {
  color: #788b7c;
  font-size: .46rem;
  font-weight: 850;
  letter-spacing: .12em;
}

.carousel-workshop-heading strong,
.carousel-workshop-heading small {
  display: block;
}

.carousel-workshop-heading strong {
  margin: 3px 0 5px;
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: 1rem;
}

.carousel-workshop-heading small {
  max-width: 340px;
  color: var(--muted);
  font-size: .56rem;
  line-height: 1.45;
}

.carousel-count-pill {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 18px;
  background: var(--sage-pale);
  color: var(--forest);
  font-size: .5rem;
  font-weight: 850;
}

.carousel-builder {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: start;
  gap: 13px;
}

.carousel-preview-column {
  display: grid;
  gap: 10px;
}

.carousel-live-slide {
  --carousel-text: #f8f1e6;
  --carousel-accent: #cba98f;
  --carousel-primary: #173c31;
  --carousel-font: Arial, Helvetica, sans-serif;
  position: sticky;
  top: 86px;
  display: flex;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 5;
  flex-direction: column;
  padding: 28px;
  border-radius: 13px;
  background-color: var(--forest);
  background-position: center;
  background-size: cover;
  color: var(--carousel-text);
  box-shadow: 0 16px 35px rgba(19, 47, 39, .18);
}

.carousel-live-slide::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 38, 32, .14), rgba(17, 38, 32, .7));
  content: "";
}

.carousel-live-slide.has-exact-render::before {
  display: none;
}

.carousel-live-slide.has-exact-render > .carousel-live-brand,
.carousel-live-slide.has-exact-render > .carousel-live-copy,
.carousel-live-slide.has-exact-render > .carousel-live-mark,
.carousel-live-slide.has-exact-render > .carousel-live-number {
  visibility: hidden;
}

.carousel-live-brand,
.carousel-live-copy,
.carousel-live-number {
  position: relative;
  z-index: 1;
}

.carousel-live-brand {
  position: absolute;
  z-index: 2;
  top: 10%;
  left: 6%;
  display: flex;
  max-width: 78%;
  align-items: center;
  font-size: .5rem;
  font-family: var(--carousel-font);
  font-weight: 900;
  letter-spacing: .16em;
}

.carousel-brand-logo {
  display: block;
  width: auto;
  max-width: calc(145px * var(--carousel-logo-scale, 1));
  height: auto;
  max-height: calc(42px * var(--carousel-logo-scale, 1));
  object-fit: contain;
}

.carousel-live-copy {
  position: relative;
  display: grid;
  gap: 10px;
  margin: auto 0;
  left: var(--carousel-text-offset-x, 0%);
  top: var(--carousel-text-offset-y, 0%);
  font-family: var(--carousel-font);
  transition: left 120ms ease, top 120ms ease;
}

.carousel-live-copy > span {
  width: fit-content;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--carousel-accent) 72%, white);
  border-radius: 16px;
  font-size: .47rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.carousel-live-copy strong {
  max-width: 94%;
  font-family: var(--carousel-font);
  font-size: var(--carousel-headline-size, clamp(2rem, 4.5vw, 3.25rem));
  font-weight: 950;
  letter-spacing: -.06em;
  line-height: .86;
  text-wrap: balance;
}

.carousel-live-copy small {
  max-width: 82%;
  color: color-mix(in srgb, var(--carousel-text) 84%, transparent);
  font-size: var(--carousel-subline-size, .63rem);
  font-weight: 650;
  line-height: 1.45;
}

.carousel-live-slide.style-editorial .carousel-live-copy {
  justify-items: center;
  text-align: center;
}

.carousel-live-slide.style-editorial .carousel-live-copy strong {
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.045em;
}

.carousel-live-slide.style-minimal .carousel-live-copy {
  margin: auto 0 0;
  padding: 17px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 9px;
  background: color-mix(in srgb, var(--carousel-primary) 78%, transparent);
  backdrop-filter: blur(9px);
}

.carousel-live-slide.style-minimal .carousel-live-copy strong {
  font-size: var(--carousel-minimal-size, clamp(1.7rem, 3.8vw, 2.55rem));
  letter-spacing: -.035em;
  line-height: .94;
}

.carousel-live-slide.kicker-style-dark .carousel-live-copy > span {
  border-color: color-mix(in srgb, var(--carousel-primary) 85%, black);
  background: color-mix(in srgb, var(--carousel-primary) 90%, black);
  color: var(--carousel-text);
}

.carousel-live-slide.kicker-style-light .carousel-live-copy > span {
  border-color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.92);
  color: var(--carousel-primary);
}

.carousel-live-slide.kicker-style-accent .carousel-live-copy > span {
  border-color: var(--carousel-accent);
  background: var(--carousel-accent);
  color: var(--carousel-primary);
}

.carousel-live-slide.logo-position-top-center .carousel-live-brand {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.carousel-live-slide.logo-position-top-right .carousel-live-brand {
  right: 6%;
  left: auto;
}

.carousel-live-slide.logo-position-bottom-left .carousel-live-brand,
.carousel-live-slide.logo-position-bottom-right .carousel-live-brand {
  top: auto;
  bottom: 12%;
}

.carousel-live-slide.logo-position-bottom-right .carousel-live-brand {
  right: 6%;
  left: auto;
}

.carousel-live-mark {
  position: absolute;
  z-index: 2;
  right: 6%;
  bottom: 12%;
  display: grid;
  place-items: center;
  color: var(--carousel-accent);
}

.carousel-live-slide.logo-position-bottom-right .carousel-live-mark {
  right: auto;
  left: 6%;
}

.carousel-live-slide.decoration-circle .carousel-live-mark {
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--carousel-accent) 72%, white);
  border-radius: 50%;
}

.carousel-live-slide.decoration-rounded .carousel-live-mark {
  width: 48px;
  height: 40px;
  border: 1px solid var(--carousel-accent);
  border-radius: 9px;
}

.carousel-live-slide.decoration-free .carousel-live-mark,
.carousel-live-slide.decoration-diamond .carousel-live-mark,
.carousel-live-slide.decoration-burst .carousel-live-mark {
  width: auto;
  height: auto;
  border: 0;
  font-size: 1.45rem;
}

.carousel-live-slide.decoration-burst .carousel-live-mark {
  font-size: 1.75rem;
}

.carousel-live-slide.decoration-ribbon .carousel-live-mark {
  width: 92px;
  height: 30px;
  clip-path: polygon(0 0, 86% 0, 100% 50%, 86% 100%, 0 100%);
  background: var(--carousel-accent);
  color: var(--carousel-primary);
  font-size: .5rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.carousel-live-slide.decoration-corners .carousel-live-mark {
  width: 70px;
  height: 50px;
  border-top: 2px solid var(--carousel-accent);
  border-left: 2px solid var(--carousel-accent);
  color: transparent;
}

.carousel-live-slide.decoration-corners .carousel-live-mark::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 35px;
  height: 25px;
  border-right: 2px solid var(--carousel-accent);
  border-bottom: 2px solid var(--carousel-accent);
  content: "";
}

.carousel-live-slide.decoration-dots .carousel-live-mark {
  width: auto;
  height: auto;
  border: 0;
  font-size: 1rem;
  letter-spacing: .18em;
}

.carousel-live-slide.decoration-none .carousel-live-mark,
.carousel-live-slide.hide-carousel-brand .carousel-live-brand,
.carousel-live-slide.hide-carousel-kicker .carousel-live-copy > span,
.carousel-live-slide.hide-carousel-subline .carousel-live-copy > small,
.carousel-live-slide.hide-carousel-number .carousel-live-number {
  display: none;
}

.carousel-live-number {
  align-self: flex-end;
  padding: 6px 9px;
  border-radius: 16px;
  background: rgba(10, 27, 22, .54);
  font-size: .48rem;
  font-weight: 850;
  backdrop-filter: blur(7px);
}

.carousel-slide-strip {
  display: grid;
  grid-auto-columns: 62px;
  grid-auto-flow: column;
  gap: 7px;
  overflow-x: auto;
  padding: 3px 2px 7px;
}

.carousel-slide-thumb {
  position: relative;
  display: grid;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  place-items: end start;
  padding: 6px;
  border: 2px solid transparent;
  border-radius: 8px;
  background-color: var(--forest);
  background-position: center;
  background-size: cover;
  color: white;
  font-size: .46rem;
  font-weight: 900;
}

.carousel-slide-thumb::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, rgba(10,25,21,.65));
  content: "";
}

.carousel-slide-thumb span {
  position: relative;
}

.carousel-slide-thumb.is-selected {
  border-color: var(--forest);
  box-shadow: 0 0 0 2px rgba(23,60,49,.13);
}

.carousel-add-button,
.carousel-generate-background {
  min-height: 38px;
  border: 1px dashed #aeb9ad;
  border-radius: 8px;
  background: #f6f7f2;
  color: var(--forest);
  font-size: .54rem;
  font-weight: 850;
}

.carousel-add-button span {
  margin-right: 5px;
  font-size: .78rem;
}

.carousel-controls {
  display: grid;
  gap: 11px;
  padding: 14px;
  border: 1px solid #dcded7;
  border-radius: 12px;
  background: #f7f6f1;
}

.carousel-control-heading {
  align-items: center;
  padding-bottom: 9px;
  border-bottom: 1px solid #dfe2dc;
}

.carousel-control-heading span,
.carousel-control-heading strong {
  display: block;
}

.carousel-control-heading strong {
  margin-top: 2px;
  color: var(--ink);
  font-size: .72rem;
}

.carousel-control-heading > div {
  display: flex;
  gap: 5px;
}

.carousel-control-heading button {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid #d4d8d0;
  border-radius: 7px;
  background: white;
  color: var(--forest);
  font-weight: 850;
}

.carousel-control-heading button:last-child {
  color: #9a5348;
}

.carousel-kind-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.carousel-kind-options button {
  min-height: 35px;
  border: 1px solid #d5d8d0;
  border-radius: 7px;
  background: white;
  color: #6d756e;
  font-size: .51rem;
  font-weight: 800;
}

.carousel-kind-options button.is-selected {
  border-color: var(--forest);
  background: #edf2ea;
  color: var(--ink);
}

.carousel-upload {
  display: none;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  min-height: 64px;
  padding: 10px;
  border: 1px dashed #b8c0b6;
  border-radius: 9px;
  background: white;
  cursor: pointer;
}

.carousel-upload.is-visible {
  display: grid;
}

.carousel-upload input {
  display: none;
}

.carousel-upload > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: var(--sage-pale);
}

.carousel-upload p,
.carousel-upload strong,
.carousel-upload small {
  display: block;
  margin: 0;
}

.carousel-upload strong {
  font-size: .54rem;
}

.carousel-upload small {
  margin-top: 3px;
  color: var(--muted);
  font-size: .43rem;
}

.carousel-upload em {
  color: var(--forest);
  font-size: .48rem;
  font-style: normal;
  font-weight: 850;
}

.carousel-background-control.is-hidden {
  display: none;
}

.carousel-background-options {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}

.carousel-background-options button {
  display: grid;
  gap: 4px;
  padding: 5px;
  border: 1px solid #d5d8d0;
  border-radius: 7px;
  background: white;
  color: var(--muted);
  font-size: .43rem;
}

.carousel-background-options button.is-selected {
  border-color: var(--forest);
  background: #edf2ea;
  color: var(--ink);
}

.carousel-background-options i {
  display: block;
  width: 100%;
  height: 29px;
  border-radius: 5px;
  background: linear-gradient(135deg, #173c31, #597166);
}

.carousel-background-options [data-carousel-background="color"] i {
  background: linear-gradient(135deg, #eee8df, #b9a79c);
}

.carousel-background-options [data-carousel-background="brand"] i {
  background: linear-gradient(135deg, var(--forest), var(--terracotta));
}

.carousel-background-options [data-carousel-background="cream"] i {
  background: linear-gradient(135deg, #f7f0e3, #d9c8ad);
}

.carousel-background-options [data-carousel-background="rose"] i {
  background: linear-gradient(135deg, #70473f, #d2a794);
}

.carousel-generate-background {
  width: 100%;
  margin-top: 2px;
}

.carousel-help {
  margin: 0;
  padding: 9px 10px;
  border-radius: 8px;
  background: #eef2ea;
  color: #66746a;
  font-size: .47rem;
  line-height: 1.45;
}

.carousel-advanced-settings {
  overflow: hidden;
  border: 1px solid #dce0d8;
  border-radius: 10px;
  background: #fbfbf7;
}

.carousel-advanced-settings > summary {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.carousel-advanced-settings > summary::-webkit-details-marker {
  display: none;
}

.carousel-advanced-settings > summary span,
.carousel-advanced-settings > summary strong,
.carousel-advanced-settings > summary small {
  display: block;
}

.carousel-advanced-settings > summary strong {
  font-size: .59rem;
}

.carousel-advanced-settings > summary small {
  margin-top: 3px;
  color: var(--muted);
  font-size: .44rem;
}

.carousel-advanced-settings > summary i {
  font-size: .75rem;
  font-style: normal;
  transition: transform 160ms ease;
}

.carousel-advanced-settings[open] > summary i {
  transform: rotate(180deg);
}

.carousel-advanced-body {
  display: grid;
  gap: 11px;
  padding: 12px;
  border-top: 1px solid #e1e4dd;
}

.stock-mode-panel {
  padding-top: 3px;
}

.stock-library-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.stock-library-heading strong,
.stock-library-heading small {
  display: block;
}

.stock-library-heading strong {
  margin: 3px 0 4px;
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: 1rem;
}

.stock-library-heading small {
  max-width: 310px;
  color: var(--muted);
  font-size: .58rem;
  line-height: 1.45;
}

.stock-library-kicker,
.stock-selected-label {
  color: #788b7c;
  font-size: .48rem;
  font-weight: 850;
  letter-spacing: .12em;
}

.stock-provider-pill {
  flex: 0 0 auto;
  padding: 6px 8px;
  border: 1px solid #d5ddd3;
  border-radius: 16px;
  background: #f1f5ef;
  color: #53705d;
  font-size: .5rem;
  font-weight: 750;
}

.stock-search {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fbfaf6;
  color: #7d857d;
}

.stock-search input {
  width: 100%;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: .63rem;
  outline: 0;
}

.stock-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 12px;
}

.stock-filter-chips button {
  padding: 7px 9px;
  border: 1px solid #d8dbd3;
  border-radius: 18px;
  background: transparent;
  color: #737c74;
  font-size: .54rem;
  font-weight: 750;
}

.stock-filter-chips button.is-active {
  border-color: var(--forest);
  background: var(--forest);
  color: white;
}

.stock-image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.stock-library-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  margin-top: 10px;
  color: var(--muted);
  font-size: .53rem;
}

.stock-library-footer .outline-button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 8px 12px;
}

.stock-photo-item {
  min-width: 0;
}

.stock-photo-button {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  background: #e7e8e1;
}

.stock-photo-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 180ms ease;
}

.stock-photo-button:hover img {
  transform: scale(1.035);
}

.stock-photo-button.is-selected {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(23, 60, 49, .12);
}

.stock-photo-check,
.stock-photo-recommended {
  position: absolute;
  z-index: 2;
  color: white;
  font-weight: 800;
}

.stock-photo-check {
  top: 7px;
  right: 7px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: var(--forest);
  font-size: .65rem;
  opacity: 0;
}

.stock-photo-button.is-selected .stock-photo-check {
  opacity: 1;
}

.stock-photo-recommended {
  bottom: 7px;
  left: 7px;
  padding: 4px 6px;
  border-radius: 12px;
  background: rgba(23, 60, 49, .84);
  font-size: .42rem;
  letter-spacing: .04em;
}

.stock-photo-meta {
  display: grid;
  gap: 2px;
  padding: 6px 2px 2px;
}

.stock-photo-meta strong {
  overflow: hidden;
  color: var(--ink);
  font-size: .55rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-photo-meta a {
  overflow: hidden;
  color: #7d867e;
  font-size: .46rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-empty {
  grid-column: 1 / -1;
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-size: .61rem;
  text-align: center;
}

.stock-selection-summary {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 12px;
  margin-top: 14px;
  padding: 11px;
  border: 1px solid #d9dfd6;
  border-radius: 12px;
  background: #f3f6f0;
}

.stock-selection-summary[hidden] {
  display: none;
}

.stock-brand-card {
  position: relative;
  display: flex;
  min-height: 190px;
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  border-radius: 9px;
  background-color: #31584b;
  background-position: center;
  background-size: cover;
  color: white;
}

.stock-card-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 34, 29, .14), rgba(14, 34, 29, .72));
}

.stock-card-brand,
.stock-card-copy {
  position: relative;
  z-index: 1;
}

.stock-card-brand {
  font-size: .41rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.stock-card-copy {
  display: grid;
  gap: 3px;
}

.stock-card-copy span {
  font-size: .45rem;
  font-weight: 850;
  letter-spacing: .12em;
}

.stock-card-copy strong {
  max-width: 92%;
  font-family: Georgia, serif;
  font-size: 1.08rem;
  line-height: 1.06;
}

.stock-card-copy small {
  font-size: .48rem;
  line-height: 1.35;
}

.stock-brand-card.is-overlay-hidden .stock-card-shade,
.stock-brand-card.is-overlay-hidden .stock-card-brand,
.stock-brand-card.is-overlay-hidden .stock-card-copy {
  display: none;
}

.stock-selection-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding: 5px 3px;
}

.stock-selection-copy > strong {
  margin: 6px 0 4px;
  font-family: Georgia, serif;
  font-size: .86rem;
}

.stock-selection-copy > a {
  color: #60766a;
  font-size: .52rem;
  text-decoration: underline;
}

.stock-overlay-choice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px;
  margin: auto 0 7px;
  padding-top: 12px;
  color: var(--ink);
  font-size: .56rem;
  font-weight: 700;
  line-height: 1.35;
}

.stock-selection-copy > small {
  color: var(--muted);
  font-size: .48rem;
  line-height: 1.4;
}

.stock-result-notice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  margin-top: 11px;
  padding: 11px;
  border-radius: 9px;
  background: #f7efe6;
  color: #795d4e;
}

.stock-result-notice[hidden] {
  display: none;
}

.stock-result-notice > span {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 50%;
  background: #b97a5c;
  color: white;
  font-family: Georgia, serif;
  font-size: .62rem;
}

.stock-result-notice p,
.stock-license-note {
  margin: 0;
  font-size: .52rem;
  line-height: 1.5;
}

.stock-license-note {
  margin-top: 10px;
  color: #7c847d;
}

.graphic-mode-panel {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fbfaf6;
}

.universal-design-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 13px;
  min-height: 72px;
  padding: 2px;
  border-radius: 12px;
  cursor: pointer;
  list-style: none;
}

.universal-design-summary::-webkit-details-marker {
  display: none;
}

.universal-design-summary:focus-visible {
  outline: 3px solid rgba(40, 79, 66, .17);
  outline-offset: 5px;
}

.universal-design-summary-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: var(--sage-pale);
  color: var(--forest);
  font-family: Georgia, serif;
  font-size: .9rem;
  font-weight: 700;
}

.universal-design-summary-copy,
.universal-design-summary-copy strong,
.universal-design-summary-copy span {
  display: block;
}

.universal-design-summary-copy strong {
  margin: 3px 0 4px;
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: .92rem;
}

.universal-design-summary-copy > span {
  color: var(--muted);
  font-size: .56rem;
  line-height: 1.45;
}

.universal-design-chevron {
  color: #6e7f76;
  font-size: 1rem;
  font-style: normal;
  transition: transform 180ms ease;
}

.universal-design-panel[open] .universal-design-chevron {
  transform: rotate(180deg);
}

.universal-design-content {
  padding-top: 18px;
  border-top: 1px solid #e3e1d9;
}

.universal-design-panel .graphic-background-control {
  display: none;
}

.universal-design-panel.is-ai-background .graphic-background-control {
  display: block;
}

.graphic-workshop-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.graphic-workshop-heading strong,
.graphic-workshop-heading small {
  display: block;
}

.graphic-workshop-heading strong {
  margin: 3px 0 5px;
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: 1rem;
}

.graphic-workshop-heading small {
  max-width: 330px;
  color: var(--muted);
  font-size: .58rem;
  line-height: 1.45;
}

.graphic-workshop-kicker {
  color: #788b7c;
  font-size: .48rem;
  font-weight: 850;
  letter-spacing: .12em;
}

.graphic-ai-pill {
  flex: 0 0 auto;
  padding: 7px 9px;
  border-radius: 16px;
  background: linear-gradient(135deg, #1c4d40, #b86751);
  color: white;
  font-size: .5rem;
  font-weight: 800;
}

.graphic-builder {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 13px;
  align-items: start;
}

.graphic-live-card,
.graphic-social-design {
  --graphic-text: #f8f1e6;
  --graphic-accent: #cba98f;
  --graphic-primary: #173c31;
  --graphic-font: Arial, Helvetica, sans-serif;
  position: relative;
  overflow: hidden;
  background-color: #173c31;
  background-position: center;
  background-size: cover;
  color: var(--graphic-text);
}

.graphic-live-video {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.graphic-exact-render {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: fill;
  pointer-events: none;
}

.graphic-live-card.has-exact-render::before,
.graphic-social-design.has-exact-render::before {
  display: none;
}

.graphic-live-card.has-exact-render .graphic-live-brand,
.graphic-live-card.has-exact-render .graphic-live-copy,
.graphic-live-card.has-exact-render .graphic-live-mark,
.graphic-social-design.has-exact-render .graphic-social-brand,
.graphic-social-design.has-exact-render .graphic-social-copy,
.graphic-social-design.has-exact-render > i {
  display: none;
}

.graphic-exact-render[hidden],
.final-review-media > [hidden] {
  display: none !important;
}

.graphic-live-card::before,
.graphic-social-design::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--graphic-primary) 12%, transparent), color-mix(in srgb, var(--graphic-primary) 58%, transparent)),
    radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--graphic-accent) 14%, transparent), transparent 32%);
  content: "";
}

.graphic-live-card::before {
  z-index: 1;
}

.graphic-live-card.hide-brand-overlay::before,
.graphic-social-design.hide-brand-overlay::before {
  display: none;
}

.hide-design-text .graphic-live-copy,
.hide-design-text .graphic-social-copy,
.hide-design-graphics .graphic-live-brand,
.hide-design-graphics .graphic-social-brand,
.hide-design-graphics .graphic-live-mark,
.hide-design-graphics.graphic-social-design > i {
  display: none;
}

.graphic-live-card.palette-coral,
.graphic-social-design.palette-coral {
  --graphic-text: #fff5ec;
  --graphic-accent: #b97361;
}

.graphic-live-card.palette-lime,
.graphic-social-design.palette-lime {
  --graphic-text: #f4f5e8;
  --graphic-accent: #a7b49b;
}

.graphic-live-card {
  position: sticky;
  top: 86px;
  display: flex;
  width: 100%;
  min-height: 0;
  aspect-ratio: 4 / 5;
  flex-direction: column;
  justify-content: flex-start;
  padding: 22px;
  border-radius: 13px;
  box-shadow: 0 16px 35px rgba(19, 47, 39, .18);
}

.graphic-live-brand,
.graphic-live-copy,
.graphic-live-mark {
  position: relative;
  z-index: 2;
}

.graphic-live-brand {
  display: flex;
  min-height: 32px;
  align-items: center;
  font-size: calc(.48rem * var(--graphic-logo-scale, 1));
  font-family: var(--graphic-font);
  font-weight: 850;
  letter-spacing: .16em;
}

.graphic-brand-logo {
  display: block;
  width: auto;
  max-width: calc(145px * var(--graphic-logo-scale, 1));
  height: auto;
  max-height: calc(42px * var(--graphic-logo-scale, 1));
  object-fit: contain;
}

.graphic-live-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 88%;
  left: var(--graphic-text-offset-x, 0%);
  top: var(--graphic-text-offset-y, 0%);
  transition: left 120ms ease, top 120ms ease;
}

.graphic-live-copy > span {
  margin-bottom: 9px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--graphic-accent) 68%, white);
  border-radius: 14px;
  color: var(--graphic-accent);
  font-size: .49rem;
  font-weight: 900;
  letter-spacing: .14em;
}

.kicker-style-dark .graphic-live-copy > span,
.kicker-style-dark .graphic-social-copy > span {
  border-color: color-mix(in srgb, var(--graphic-primary) 85%, black);
  background: color-mix(in srgb, var(--graphic-primary) 90%, black);
  color: var(--graphic-text);
}

.kicker-style-light .graphic-live-copy > span,
.kicker-style-light .graphic-social-copy > span {
  border-color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.92);
  color: var(--graphic-primary);
}

.kicker-style-accent .graphic-live-copy > span,
.kicker-style-accent .graphic-social-copy > span {
  border-color: var(--graphic-accent);
  background: var(--graphic-accent);
  color: var(--graphic-primary);
}

.graphic-live-copy strong {
  max-width: 100%;
  font-family: var(--graphic-font);
  font-size: var(--graphic-live-headline-size, clamp(2.35rem, 5vw, 3.55rem));
  font-weight: 950;
  letter-spacing: -.065em;
  line-height: .83;
  text-wrap: balance;
}

.graphic-live-copy small {
  max-width: 84%;
  margin-top: 13px;
  color: color-mix(in srgb, var(--graphic-text) 82%, transparent);
  font-size: var(--graphic-live-subline-size, .62rem);
  font-weight: 650;
  line-height: 1.45;
}

.graphic-live-mark {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: grid;
  place-items: center;
  color: var(--graphic-accent);
  transition: width 160ms ease, height 160ms ease, transform 160ms ease;
}

.graphic-live-card:not(.is-story-format) .graphic-live-mark,
.graphic-social-design:not(.is-story-format) > i {
  right: 6%;
  bottom: 12%;
}

.graphic-live-card .graphic-live-brand,
.graphic-social-design .graphic-social-brand {
  position: absolute;
  z-index: 2;
  top: 10%;
  right: auto;
  bottom: auto;
  left: 6%;
  width: max-content;
  max-width: 78%;
  transform: none;
}

.graphic-live-card.is-story-format .graphic-live-brand,
.graphic-social-design.is-story-format .graphic-social-brand {
  top: 15%;
}

.graphic-live-card.is-story-format .graphic-live-mark,
.graphic-social-design.is-story-format > i {
  right: 6%;
  bottom: 21%;
}

.graphic-live-card.logo-position-top-center .graphic-live-brand,
.graphic-social-design.logo-position-top-center .graphic-social-brand {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.graphic-live-card.logo-position-top-right .graphic-live-brand,
.graphic-social-design.logo-position-top-right .graphic-social-brand {
  right: 6%;
  left: auto;
}

.graphic-live-card.logo-position-bottom-left .graphic-live-brand,
.graphic-social-design.logo-position-bottom-left .graphic-social-brand,
.graphic-live-card.logo-position-bottom-right .graphic-live-brand,
.graphic-social-design.logo-position-bottom-right .graphic-social-brand {
  top: auto;
  bottom: 12%;
}

.graphic-live-card.is-story-format.logo-position-bottom-left .graphic-live-brand,
.graphic-social-design.is-story-format.logo-position-bottom-left .graphic-social-brand,
.graphic-live-card.is-story-format.logo-position-bottom-right .graphic-live-brand,
.graphic-social-design.is-story-format.logo-position-bottom-right .graphic-social-brand {
  bottom: 21%;
}

.graphic-live-card.logo-position-bottom-right .graphic-live-brand,
.graphic-social-design.logo-position-bottom-right .graphic-social-brand {
  right: 6%;
  left: auto;
}

.graphic-live-card.logo-position-bottom-right .graphic-live-mark,
.graphic-social-design.logo-position-bottom-right > i {
  right: auto;
  left: 6%;
}

.decoration-circle .graphic-live-mark,
.decoration-circle.graphic-social-design > i {
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--graphic-accent) 72%, white);
  border-radius: 50%;
}

.decoration-rounded .graphic-live-mark,
.decoration-rounded.graphic-social-design > i {
  width: 48px;
  height: 40px;
  border: 1px solid var(--graphic-accent);
  border-radius: 9px;
}

.decoration-free .graphic-live-mark,
.decoration-free.graphic-social-design > i,
.decoration-diamond .graphic-live-mark,
.decoration-diamond.graphic-social-design > i,
.decoration-burst .graphic-live-mark,
.decoration-burst.graphic-social-design > i {
  width: auto;
  height: auto;
  border: 0;
  font-size: 1.45rem;
}

.decoration-burst .graphic-live-mark,
.decoration-burst.graphic-social-design > i {
  font-size: 1.75rem;
}

.decoration-ribbon .graphic-live-mark,
.decoration-ribbon.graphic-social-design > i {
  width: 92px;
  height: 30px;
  clip-path: polygon(0 0, 86% 0, 100% 50%, 86% 100%, 0 100%);
  background: var(--graphic-accent);
  color: var(--graphic-primary);
  font-size: .5rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.decoration-corners .graphic-live-mark,
.decoration-corners.graphic-social-design > i {
  width: 70px;
  height: 50px;
  border-top: 2px solid var(--graphic-accent);
  border-left: 2px solid var(--graphic-accent);
  color: transparent;
}

.decoration-corners .graphic-live-mark::after,
.decoration-corners.graphic-social-design > i::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 35px;
  height: 25px;
  border-right: 2px solid var(--graphic-accent);
  border-bottom: 2px solid var(--graphic-accent);
  content: "";
}

.decoration-dots .graphic-live-mark,
.decoration-dots.graphic-social-design > i {
  width: auto;
  height: auto;
  border: 0;
  font-size: 1rem;
  letter-spacing: .18em;
}

.graphic-live-card.style-editorial .graphic-live-copy {
  align-items: center;
  text-align: center;
}

.graphic-live-card.style-editorial .graphic-live-copy strong {
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: .9;
}

.graphic-live-card.style-editorial .graphic-live-copy small {
  max-width: 90%;
}

.graphic-live-card.style-minimal {
  justify-content: flex-start;
}

.graphic-live-card.style-minimal .graphic-live-copy {
  margin-top: auto;
  padding: 17px;
  border: 1px solid rgba(255,255,255,.28);
  background: color-mix(in srgb, var(--graphic-primary) 78%, transparent);
  backdrop-filter: blur(9px);
}

.graphic-live-card.style-minimal .graphic-live-copy strong {
  font-size: var(--graphic-live-minimal-size, clamp(1.8rem, 4vw, 2.65rem));
  letter-spacing: -.035em;
  line-height: .94;
}

.graphic-live-card.style-nordic .graphic-live-copy,
.graphic-social-design.style-nordic > .graphic-social-copy {
  gap: 14px;
  max-width: 82%;
}

.graphic-live-card.style-nordic .graphic-live-copy strong,
.graphic-social-design.style-nordic .graphic-social-copy strong {
  font-weight: 720;
  letter-spacing: -.035em;
  line-height: .94;
}

.graphic-live-card.style-luxury .graphic-live-copy,
.graphic-social-design.style-luxury > .graphic-social-copy {
  align-items: center;
  text-align: center;
}

.graphic-live-card.style-luxury .graphic-live-copy strong,
.graphic-social-design.style-luxury .graphic-social-copy strong {
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: .9;
  text-transform: none;
}

.graphic-live-card.style-barber .graphic-live-copy,
.graphic-social-design.style-barber > .graphic-social-copy {
  max-width: 78%;
  padding-left: 15px;
  border-left: 4px solid var(--graphic-accent);
}

.graphic-live-card.style-barber .graphic-live-copy strong,
.graphic-social-design.style-barber .graphic-social-copy strong {
  letter-spacing: .015em;
  line-height: .86;
  text-transform: uppercase;
}

.graphic-live-card.style-retro .graphic-live-copy,
.graphic-social-design.style-retro > .graphic-social-copy {
  align-items: center;
  text-align: center;
}

.graphic-live-card.style-retro .graphic-live-copy strong,
.graphic-social-design.style-retro .graphic-social-copy strong {
  letter-spacing: .015em;
  line-height: .88;
  text-shadow: 3px 3px 0 color-mix(in srgb, var(--graphic-accent) 58%, transparent);
}

.graphic-live-card.style-organic .graphic-live-copy,
.graphic-social-design.style-organic > .graphic-social-copy {
  padding: 17px;
  border-radius: 24px 8px 24px 8px;
  background: color-mix(in srgb, var(--graphic-primary) 68%, transparent);
  backdrop-filter: blur(8px);
}

.graphic-live-card.style-organic .graphic-live-copy strong,
.graphic-social-design.style-organic .graphic-social-copy strong {
  font-weight: 680;
  letter-spacing: -.035em;
  line-height: .95;
  text-transform: none;
}

.graphic-live-card.style-poster .graphic-live-copy,
.graphic-social-design.style-poster > .graphic-social-copy {
  max-width: 94%;
}

.graphic-live-card.style-poster .graphic-live-copy strong,
.graphic-social-design.style-poster .graphic-social-copy strong {
  font-weight: 1000;
  letter-spacing: -.075em;
  line-height: .78;
  text-transform: uppercase;
}

.graphic-live-card.text-position-top .graphic-live-copy {
  margin: 15% 0 auto;
}

.graphic-live-card.text-position-center .graphic-live-copy {
  margin: auto 0;
}

.graphic-live-card.text-position-bottom .graphic-live-copy {
  margin: auto 0 0;
}

.hide-graphic-brand .graphic-live-brand,
.hide-graphic-brand .graphic-social-brand,
.hide-graphic-kicker .graphic-live-copy > span,
.hide-graphic-kicker .graphic-social-copy > span,
.hide-graphic-subline .graphic-live-copy > small,
.hide-graphic-subline .graphic-social-copy > small,
.hide-graphic-mark .graphic-live-mark,
.hide-graphic-mark.graphic-social-design > i {
  display: none;
}

.graphic-controls {
  display: grid;
  gap: 11px;
  padding: 14px;
  border: 1px solid #dcded7;
  border-radius: 12px;
  background: #f7f6f1;
}

.graphic-control-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.graphic-field,
.graphic-control-group {
  display: grid;
  gap: 6px;
}

.graphic-field > span,
.graphic-control-group > span {
  color: #647068;
  font-size: .55rem;
  font-weight: 800;
}

.graphic-field input,
.graphic-control-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid #d4d8d0;
  border-radius: 8px;
  background: white;
  color: var(--ink);
  font-size: .62rem;
  outline: 0;
}

.graphic-field input:focus,
.graphic-control-group select:focus {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(33,77,64,.08);
}

.graphic-font-size-control {
  padding: 10px;
  border: 1px solid #d5d9d1;
  border-radius: 9px;
  background: white;
}

.graphic-control-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.graphic-control-heading > span {
  color: #647068;
  font-size: .55rem;
  font-weight: 800;
}

.graphic-control-heading output {
  min-width: 42px;
  padding: 4px 7px;
  border-radius: 12px;
  background: #edf2ea;
  color: var(--ink);
  font-size: .52rem;
  font-weight: 850;
  text-align: center;
}

.graphic-font-size-row {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  gap: 8px;
}

.graphic-font-size-row button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #d3d8d0;
  border-radius: 8px;
  background: #f8f8f4;
  color: var(--forest);
  font-size: .85rem;
  font-weight: 850;
}

.graphic-font-size-row button:hover {
  border-color: var(--forest);
  background: #edf2ea;
}

.graphic-font-size-row input {
  width: 100%;
  accent-color: var(--forest);
}

.graphic-font-size-control > small {
  color: var(--muted);
  font-size: .45rem;
  line-height: 1.4;
}

.graphic-background-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.graphic-background-options button {
  position: relative;
  min-height: 78px;
  overflow: hidden;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #233e35;
}

.graphic-background-options button.is-selected {
  border-color: var(--forest);
  box-shadow: 0 0 0 2px rgba(23,60,49,.12);
}

.graphic-background-options img {
  width: 100%;
  height: 78px;
  object-fit: cover;
}

.graphic-background-options button > span {
  position: absolute;
  z-index: 1;
  inset: auto 5px 5px;
  padding: 4px 5px;
  border-radius: 5px;
  background: rgba(15, 37, 31, .82);
  color: white;
  font-size: .44rem;
  font-weight: 800;
}

.graphic-background-options button > i {
  display: block;
  width: 100%;
  height: 78px;
}

.graphic-background-options .background-cream > i { background: radial-gradient(circle at 78% 18%, rgba(203,169,143,.42), transparent 34%), linear-gradient(145deg, #f5efe3, #dfe6dc); }
.graphic-background-options .background-sand > i { background: radial-gradient(circle at 18% 20%, rgba(255,255,255,.58), transparent 28%), radial-gradient(circle at 80% 75%, rgba(137,92,69,.28), transparent 34%), linear-gradient(145deg, #d9bba4, #8f6a58); }
.graphic-background-options .background-barber > i { background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 12px, transparent 12px 38px), linear-gradient(145deg, #0f2420, #263d38); }
.graphic-background-options .background-editorial > i { background: linear-gradient(90deg, transparent 0 68%, rgba(255,255,255,.25) 68% 69%, transparent 69%), linear-gradient(145deg, #9c5e55, #e2c6b4); }
.graphic-background-options .background-midnight > i { background: radial-gradient(circle at 75% 30%, rgba(255,255,255,.16), transparent 22%), linear-gradient(150deg, #080d0c, #303936); }

.graphic-style-options,
.graphic-format-options,
.graphic-position-options,
.graphic-overlay-platform-options,
.graphic-kicker-style-options {
  display: grid;
  gap: 5px;
}

.graphic-style-options,
.graphic-position-options {
  grid-template-columns: repeat(3, 1fr);
}

.graphic-format-options,
.graphic-overlay-platform-options {
  grid-template-columns: 1fr 1fr;
}

.graphic-style-options button,
.graphic-format-options button,
.graphic-position-options button,
.graphic-overlay-platform-options button,
.graphic-kicker-style-options button {
  min-height: 34px;
  padding: 6px;
  border: 1px solid #d5d8d0;
  border-radius: 7px;
  background: white;
  color: #6d756e;
  font-size: .49rem;
  font-weight: 750;
}

.graphic-style-options button.is-selected,
.graphic-format-options button.is-selected,
.graphic-position-options button.is-selected,
.graphic-overlay-platform-options button.is-selected,
.graphic-kicker-style-options button.is-selected {
  border-color: var(--forest);
  background: #edf2ea;
  color: var(--ink);
}

.graphic-kicker-style-options {
  grid-template-columns: repeat(4, 1fr);
}

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

.graphic-decoration-options button {
  display: grid;
  min-width: 0;
  gap: 3px;
  place-items: center;
  padding: 7px 3px;
  border: 1px solid #d5d8d0;
  border-radius: 7px;
  background: white;
  color: #6d756e;
}

.graphic-decoration-options button.is-selected {
  border-color: var(--forest);
  background: #edf2ea;
  color: var(--ink);
}

.graphic-decoration-options i {
  font-size: .8rem;
  font-style: normal;
}

.graphic-decoration-options small,
.graphic-control-help {
  color: var(--muted);
  font-size: .42rem;
  line-height: 1.35;
}

.graphic-decoration-customize {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 3px;
}

.graphic-logo-control {
  padding: 11px;
  border: 1px solid #dce0d8;
  border-radius: 9px;
  background: #fbfbf7;
}

.graphic-logo-size-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
}

.graphic-logo-size-row > span {
  color: var(--muted);
  font-size: .43rem;
}

.graphic-logo-size-row input {
  width: 100%;
  accent-color: var(--forest);
}

.graphic-logo-position-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.graphic-logo-position-options button {
  display: grid;
  min-width: 0;
  gap: 2px;
  place-items: center;
  padding: 6px 3px;
  border: 1px solid #d5d8d0;
  border-radius: 7px;
  background: white;
  color: #6d756e;
}

.graphic-logo-position-options button.is-selected {
  border-color: var(--forest);
  background: #edf2ea;
  color: var(--ink);
}

.graphic-logo-position-options i {
  font-size: .7rem;
  font-style: normal;
}

.graphic-logo-position-options small {
  overflow: hidden;
  max-width: 100%;
  color: inherit;
  font-size: .39rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.graphic-overlay-platform-options button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.graphic-overlay-platform-options i {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  color: white;
  font-size: .44rem;
  font-style: normal;
}

.graphic-position-options button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.graphic-position-options b {
  font-size: .72rem;
  line-height: 1;
}

.graphic-precision-card {
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid #d5d9d1;
  border-radius: 10px;
  background: white;
}

.graphic-precision-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.graphic-precision-heading > span strong,
.graphic-precision-heading > span small {
  display: block;
}

.graphic-precision-heading > span strong {
  color: var(--ink);
  font-size: .56rem;
}

.graphic-precision-heading > span small {
  margin-top: 2px;
  color: var(--muted);
  font-size: .45rem;
}

.graphic-target-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border-radius: 8px;
  background: #ecefe9;
}

.graphic-target-options button {
  min-width: 65px;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #6d756e;
  font-size: .47rem;
  font-weight: 800;
}

.graphic-target-options button.is-selected {
  background: white;
  color: var(--ink);
  box-shadow: 0 1px 5px rgba(20, 48, 39, .12);
}

.graphic-nudge-layout {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 12px;
  align-items: center;
}

.graphic-nudge-pad {
  display: grid;
  grid-template-columns: repeat(3, 34px);
  grid-template-rows: repeat(3, 34px);
  gap: 4px;
  justify-content: center;
}

.graphic-nudge-pad button {
  display: grid;
  place-items: center;
  border: 1px solid #d3d8d0;
  border-radius: 8px;
  background: #f8f8f4;
  color: var(--forest);
  font-size: .78rem;
  font-weight: 900;
}

.graphic-nudge-pad button:hover {
  border-color: var(--forest);
  background: #edf2ea;
}

.graphic-nudge-pad [data-graphic-nudge="up"] { grid-column: 2; grid-row: 1; }
.graphic-nudge-pad [data-graphic-nudge="left"] { grid-column: 1; grid-row: 2; }
.graphic-nudge-pad .nudge-reset { grid-column: 2; grid-row: 2; color: #8a938b; }
.graphic-nudge-pad [data-graphic-nudge="right"] { grid-column: 3; grid-row: 2; }
.graphic-nudge-pad [data-graphic-nudge="down"] { grid-column: 2; grid-row: 3; }

.graphic-position-readout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.graphic-position-readout > span {
  padding: 8px;
  border-radius: 8px;
  background: #f3f4ef;
  color: var(--muted);
  font-size: .43rem;
}

.graphic-position-readout strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: .62rem;
}

.graphic-position-readout small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: .45rem;
  line-height: 1.35;
}

.graphic-element-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.graphic-layer-options {
  display: grid;
  gap: 6px;
}

.graphic-layer-options label,
.graphic-element-options label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 7px;
  padding: 8px;
  border: 1px solid #d7dbd3;
  border-radius: 8px;
  background: white;
  cursor: pointer;
}

.graphic-layer-options label.is-locked {
  opacity: .72;
}

.graphic-layer-options input,
.graphic-element-options input {
  width: 15px;
  height: 15px;
  accent-color: var(--forest);
}

.graphic-layer-options strong,
.graphic-layer-options small,
.graphic-element-options strong,
.graphic-element-options small {
  display: block;
}

.graphic-layer-options strong,
.graphic-element-options strong {
  color: var(--ink);
  font-size: .49rem;
}

.graphic-layer-options small,
.graphic-element-options small {
  margin-top: 1px;
  color: var(--muted);
  font-size: .41rem;
}

.instagram-overlay-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid #d5d8d0;
  border-radius: 9px;
  background: white;
  cursor: pointer;
}

.instagram-overlay-toggle input {
  width: 17px;
  height: 17px;
  accent-color: var(--forest);
}

.instagram-overlay-toggle strong,
.instagram-overlay-toggle small {
  display: block;
}

.instagram-overlay-toggle strong {
  color: var(--ink);
  font-size: .56rem;
}

.instagram-overlay-toggle small {
  margin-top: 2px;
  color: var(--muted);
  font-size: .47rem;
  line-height: 1.35;
}

.graphic-format-fact {
  padding: 9px 10px;
  border-radius: 8px;
  background: #eef2ea;
  color: #5f6d64;
}

.graphic-format-fact strong,
.graphic-format-fact span {
  display: block;
}

.graphic-format-fact strong {
  color: var(--ink);
  font-size: .53rem;
}

.graphic-format-fact span {
  margin-top: 2px;
  font-size: .46rem;
  line-height: 1.4;
}

.graphic-palette-options {
  display: flex;
  gap: 8px;
}

.graphic-color-control {
  display: flex;
  align-items: center;
  gap: 12px;
}

.graphic-color-picker {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 5px 9px 5px 5px;
  border: 1px solid #d5d8d0;
  border-radius: 8px;
  background: white;
  color: #667069;
  font-size: .52rem;
  font-weight: 750;
}

.graphic-color-picker input {
  width: 29px;
  height: 27px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
}

.palette-dot {
  width: 29px;
  height: 29px;
  border: 3px solid white;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #d2d5cd;
}

.palette-dot.is-selected {
  box-shadow: 0 0 0 2px var(--forest);
}

.brand-text-dot { background: #f8f1e6; }
.light-text-dot { background: #fffaf2; }
.dark-text-dot { background: #173c31; }

.graphic-live-card.is-story-format {
  width: min(100%, 325px);
  min-height: 0;
  aspect-ratio: 9 / 16;
  justify-self: center;
}

.platform-safe-overlay {
  position: absolute !important;
  z-index: 12 !important;
  inset: 0;
  display: none;
  pointer-events: none;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.show-platform-overlay.overlay-instagram .instagram-platform-overlay,
.show-platform-overlay.overlay-facebook .facebook-platform-overlay,
.show-platform-overlay.overlay-linkedin .linkedin-platform-overlay {
  display: block;
}

.instagram-feed-grid-zone {
  position: absolute;
  inset: 10% 0;
  border: 1.5px dashed rgba(255,255,255,.85);
  box-shadow: inset 0 0 0 999px rgba(10,23,19,.05);
}

.instagram-feed-grid-zone span,
.platform-story-safe-zone span,
.facebook-feed-note span {
  position: absolute;
  top: 8px;
  left: 50%;
  padding: 4px 7px;
  border-radius: 12px;
  background: rgba(10,20,17,.72);
  color: white;
  font-size: .43rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
}

.platform-story-progress,
.platform-story-safe-zone,
.platform-story-top,
.platform-story-bottom {
  display: none;
}

.facebook-feed-note {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: start center;
  padding-top: 12px;
  border: 1.5px dashed rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 999px rgba(10,23,19,.025);
}

.linkedin-feed-safe-zone {
  position: absolute;
  inset: 8% 7%;
  border: 1.5px dashed rgba(255,255,255,.82);
  border-radius: 5px;
  box-shadow: inset 0 0 0 999px rgba(10,23,19,.025);
}

.linkedin-feed-safe-zone span {
  position: absolute;
  top: 8px;
  left: 50%;
  padding: 4px 7px;
  border-radius: 12px;
  background: rgba(10,20,17,.72);
  color: white;
  font-size: .43rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
}

.is-story-format .instagram-feed-grid-zone,
.is-story-format .facebook-feed-note {
  display: none;
}

.is-story-format .platform-story-safe-zone {
  position: absolute;
  inset: 14% 5.5% 20%;
  display: block;
  border: 1.5px dashed rgba(255,255,255,.88);
  border-radius: 5px;
}

.is-story-format .platform-story-progress {
  position: absolute;
  z-index: 2;
  top: 2.2%;
  right: 3.5%;
  left: 3.5%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}

.is-story-format .platform-story-progress span {
  height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 1px 2px rgba(0,0,0,.22);
}

.is-story-format .platform-story-progress span:last-child {
  background: rgba(255,255,255,.42);
}

.is-story-format .platform-story-top,
.is-story-format .platform-story-bottom {
  position: absolute;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 5.5%;
  background: linear-gradient(180deg, rgba(5,10,9,.52), rgba(5,10,9,.13));
  text-shadow: 0 1px 4px rgba(0,0,0,.65);
}

.is-story-format .platform-story-top {
  top: 0;
  height: 11.5%;
  padding-top: 2.5%;
  font-size: .46rem;
}

.platform-story-identity {
  min-width: 0;
}

.is-story-format .platform-story-identity strong,
.is-story-format .platform-story-identity small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.is-story-format .platform-story-identity strong {
  overflow: hidden;
  font: 750 .46rem/1.15 Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.is-story-format .platform-story-identity small {
  margin-top: 2px;
  color: rgba(255,255,255,.82);
  font-size: .36rem;
}

.platform-story-controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.platform-story-controls i {
  color: white;
  font-size: .55rem;
  font-style: normal;
  letter-spacing: .05em;
}

.platform-story-avatar {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border: 1.5px solid white;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--graphic-accent), var(--graphic-primary));
}

.facebook-story-avatar {
  box-shadow: 0 0 0 2px #1877f2;
}

.is-story-format .platform-story-bottom {
  bottom: 0;
  height: 17%;
  justify-content: flex-end;
  background: linear-gradient(0deg, rgba(5,10,9,.58), rgba(5,10,9,.08));
  font-size: .67rem;
}

.is-story-format .platform-story-bottom > span {
  min-width: 0;
  flex: 1;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 18px;
  font-size: .44rem;
}

.is-story-format .platform-story-bottom i {
  position: static;
  display: block;
  width: auto;
  height: auto;
  border: 0;
  color: white;
  font-style: normal;
}

.is-story-format .facebook-story-bottom {
  gap: 10px;
}

.is-story-format .facebook-story-bottom > span {
  background: rgba(20,20,20,.24);
}

.graphic-actions {
  display: grid;
  gap: 6px;
}

.graphic-generate-button,
.graphic-auto-button {
  min-height: 38px;
  border-radius: 8px;
  font-size: .55rem;
  font-weight: 800;
}

.graphic-generate-button {
  border: 0;
  background: var(--forest);
  color: white;
}

.graphic-generate-button:hover {
  background: #214f41;
}

.graphic-auto-button {
  border: 1px solid #d4d8d0;
  background: white;
  color: var(--forest);
}

.graphic-safe-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  margin-top: 12px;
  padding: 11px;
  border-radius: 9px;
  background: #edf5ed;
  color: #55705b;
}

.graphic-safe-note > span {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 50%;
  background: #4f7959;
  color: white;
  font-size: .55rem;
}

.graphic-safe-note p {
  margin: 0;
  font-size: .52rem;
  line-height: 1.5;
}

.upload-zone {
  position: relative;
  display: block;
  min-height: 335px;
  overflow: hidden;
  border: 1px dashed #b8beb5;
  border-radius: 12px;
  background: #f6f5ef;
  cursor: pointer;
}

.upload-zone:hover {
  border-color: var(--forest);
  background: #f1f3ec;
}

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

.upload-preview {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-position: center;
  background-size: cover;
}

.upload-preview.has-image {
  align-items: flex-end;
  justify-content: flex-end;
  padding: 14px;
}

.upload-preview.has-image > *:not(.upload-action):not(.before-after-label) {
  display: none;
}

.before-after-upload {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.compact-upload {
  min-height: 335px;
}

.compact-upload .camera-circle {
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  font-size: 1.15rem;
}

.compact-upload .upload-preview {
  padding: 16px;
  text-align: center;
}

.compact-upload .upload-preview strong {
  font-size: .7rem;
}

.compact-upload .upload-preview small {
  font-size: .56rem;
}

.before-after-label {
  position: absolute;
  z-index: 2;
  top: 11px;
  left: 11px;
  padding: 5px 7px;
  border-radius: 12px;
  background: rgba(23, 60, 49, .88);
  color: white;
  font-size: .5rem;
  font-weight: 850;
  letter-spacing: .1em;
}

.match-photo-tip {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: .59rem;
}

.match-photo-tip span {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: var(--sage-pale);
  color: var(--forest);
}

.camera-circle {
  display: grid;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  place-items: center;
  border-radius: 50%;
  background: var(--sage-pale);
  font-size: 1.45rem;
}

.upload-preview strong {
  font-size: .85rem;
}

.upload-preview small {
  margin: 7px 0 15px;
  color: #91958e;
  font-size: .64rem;
}

.upload-action {
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
  font-size: .68rem;
  font-weight: 750;
}

.image-tip {
  display: flex;
  gap: 11px;
  margin-top: 16px;
  padding: 14px;
  border-radius: 9px;
  background: #eef2ea;
}

.image-tip[hidden],
.consent-box[hidden] {
  display: none;
}

.image-tip > span {
  color: #71896f;
}

.image-tip p {
  margin: 0;
  color: #687269;
  font-size: .65rem;
  line-height: 1.55;
}

.image-tip strong {
  color: var(--ink);
}

.treatment-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}

.result-detail-workspace {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.result-detail-workspace > .type-field {
  max-width: 310px;
}

.treatment-detail-section {
  padding: 15px;
  border: 1px solid #d6ded5;
  border-radius: 14px;
  background: #f2f5ef;
}

.treatment-detail-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.treatment-detail-heading span {
  color: var(--ink);
  font-size: .7rem;
  font-weight: 850;
}

.treatment-detail-heading small {
  color: var(--muted);
  font-size: .52rem;
}

.treatment-detail-group + .treatment-detail-group {
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid #d8dfd7;
}

.treatment-detail-group > strong {
  display: block;
  margin-bottom: 8px;
  color: #47645b;
  font-size: .54rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.treatment-detail-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.treatment-detail-options button {
  padding: 8px 11px;
  border: 1px solid #ccd6cd;
  border-radius: 999px;
  background: #fffdf8;
  color: var(--ink);
  font-size: .55rem;
  font-weight: 720;
}

.treatment-detail-options button:hover,
.treatment-detail-options button.is-selected {
  border-color: #1f5a49;
  background: #1f5a49;
  color: white;
}

@media (prefers-reduced-motion: reduce) {
  .loader-scissor-tool .scissor-half,
  .loader-lockup strong,
  .brand:hover .brand-scissor-tool .scissor-half,
  .brand:focus-visible .brand-scissor-tool .scissor-half {
    animation: none;
  }
  .loader-lockup strong { clip-path: none; }
}

.treatment-chips button,
.filter-chip {
  padding: 9px 13px;
  border: 1px solid #d6d5cc;
  border-radius: 20px;
  background: transparent;
  font-size: .68rem;
  font-weight: 650;
}

.treatment-chips button:hover,
.treatment-chips button.is-selected,
.filter-chip.is-active {
  border-color: var(--forest);
  background: var(--forest);
  color: white;
}

.type-content-panel {
  display: none;
}

.type-content-panel.is-active {
  display: block;
  animation: view-in 180ms ease;
}

.type-choice-label {
  margin: 0 0 10px;
  color: #747b74;
  font-size: .58rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.type-field-grid {
  display: grid;
  gap: 12px;
  margin: -6px 0 24px;
  padding: 16px;
  border: 1px solid #e2e2d9;
  border-radius: 11px;
  background: #f7f7f2;
}

.offer-fields {
  grid-template-columns: 2fr 1fr;
}

.cancellation-fields {
  grid-template-columns: 1fr 1fr 1.35fr;
}

.campaign-fields {
  grid-template-columns: 1.5fr 1fr 1fr;
}

.news-fields {
  grid-template-columns: 1fr;
}

.type-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.type-field > span {
  color: var(--ink);
  font-size: .63rem;
  font-weight: 750;
}

.type-field small {
  color: #999d98;
  font-size: .53rem;
  font-weight: 500;
}

.type-field input,
.type-field select {
  width: 100%;
  min-width: 0;
  height: 41px;
  padding: 0 11px;
  border: 1px solid #d4d4cb;
  border-radius: 8px;
  background: #fffefb;
  color: var(--ink);
  font: inherit;
  font-size: .66rem;
  outline: none;
  transition: 160ms ease;
}

.type-field input:focus,
.type-field select:focus {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(33,77,64,.08);
}

.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.field-label-row .field-label {
  margin-bottom: 0;
}

.ai-detail-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border: 1px solid #c9d4c8;
  border-radius: 16px;
  background: #edf3e9;
  color: var(--forest);
  font-size: .54rem;
  font-weight: 800;
}

.ai-detail-button:disabled {
  cursor: wait;
  opacity: .72;
}

.field-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: .69rem;
  font-weight: 750;
}

.field-label span {
  color: #9b9d97;
  font-size: .6rem;
  font-weight: 500;
}

textarea,
.settings-fields input {
  width: 100%;
  border: 1px solid #d4d4cb;
  border-radius: 9px;
  background: #fbfaf6;
  outline: none;
  transition: 160ms ease;
}

textarea {
  padding: 13px;
  resize: vertical;
  font-size: .72rem;
  line-height: 1.6;
}

textarea:focus,
.settings-fields input:focus {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(33,77,64,.08);
}

.field-count {
  margin-top: -20px;
  padding: 0 10px 8px;
  color: #989990;
  font-size: .58rem;
  text-align: right;
}

.consent-box {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 13px;
  margin-top: 24px;
  padding: 17px;
  border: 1px solid #d5dfd3;
  border-radius: 10px;
  background: #f0f4ed;
  transition: border-color 180ms ease, background 180ms ease;
}

.consent-box[data-analysis-state="person"],
.consent-box[data-analysis-state="uncertain"] {
  border-color: #dfc39d;
  background: #fbf3e8;
}

.consent-box[data-analysis-state="clear"],
.consent-box[data-analysis-state="stock"],
.consent-box[data-analysis-state="graphic"] {
  border-color: #bfd6c1;
  background: #edf5ed;
}

.consent-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: var(--forest);
  color: white;
  font-size: .7rem;
}

.consent-box[data-analysis-state="person"] .consent-icon,
.consent-box[data-analysis-state="uncertain"] .consent-icon {
  background: #a86c35;
}

.consent-box[data-analysis-state="clear"] .consent-icon,
.consent-box[data-analysis-state="stock"] .consent-icon,
.consent-box[data-analysis-state="graphic"] .consent-icon {
  background: #4f7959;
}

.consent-box strong {
  font-size: .76rem;
}

.consent-box p {
  margin: 4px 0 11px;
  color: var(--muted);
  font-size: .63rem;
  line-height: 1.45;
}

.consent-analysis-status {
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin: 0 0 12px;
  padding: 7px 9px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .7);
  color: #66756b;
  font-size: .57rem;
  font-weight: 750;
}

.consent-analysis-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #98a098;
}

.consent-box[data-analysis-state="scanning"] .consent-analysis-status i {
  background: var(--terracotta);
  animation: consent-pulse 900ms ease infinite alternate;
}

.consent-box[data-analysis-state="person"] .consent-analysis-status i,
.consent-box[data-analysis-state="uncertain"] .consent-analysis-status i {
  background: #b7763c;
}

.consent-box[data-analysis-state="clear"] .consent-analysis-status i,
.consent-box[data-analysis-state="stock"] .consent-analysis-status i,
.consent-box[data-analysis-state="graphic"] .consent-analysis-status i {
  background: #4f7959;
}

.consent-guidance {
  margin-top: 0 !important;
  color: var(--ink) !important;
  font-weight: 650;
}

@keyframes consent-pulse {
  to { transform: scale(1.45); opacity: .5; }
}

.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: .64rem;
  cursor: pointer;
}

.check-row input {
  width: 16px;
  height: 16px;
  accent-color: var(--forest);
}

.step-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 20px;
}

.step-actions.split {
  justify-content: space-between;
}

.validation-message {
  color: #b45b44;
  font-size: .69rem;
}

.generation-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  padding: 18px 22px;
  border-color: #cad7c8;
  background: #edf2e9;
}

.generation-banner > div {
  display: flex;
  align-items: center;
  gap: 14px;
}

.generation-banner .sparkle {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: var(--forest);
  color: white;
}

.generation-banner strong {
  font-family: Georgia, serif;
}

.generation-banner p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: .65rem;
}

.preview-layout {
  display: grid;
  grid-template-columns: minmax(300px, .8fr) minmax(420px, 1.2fr);
  gap: 18px;
}

.post-preview-card,
.text-editor-card {
  padding: 24px;
}

.post-preview-card {
  position: sticky;
  top: 86px;
  align-self: start;
}

.preview-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
  font-size: .67rem;
}

.preview-title span { color: var(--muted); }

.social-preview {
  max-width: 430px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #e3e0d8;
  border-radius: 12px;
  background: white;
}

.social-profile-line {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 12px;
  font-size: .66rem;
}

.social-profile-line .avatar {
  width: 32px;
  height: 32px;
  font-size: .58rem;
}

.social-profile-line strong,
.social-profile-line small {
  display: block;
}

.social-profile-line small {
  margin-top: 2px;
  color: #999;
  font-size: .53rem;
}

.preview-photo {
  position: relative;
  display: grid;
  aspect-ratio: 4 / 5;
  place-items: end center;
  padding: 12px;
  background:
    radial-gradient(circle at 38% 12%, rgba(255,255,255,.38), transparent 13%),
    repeating-linear-gradient(99deg, rgba(255,255,255,.09) 0 3px, transparent 3px 13px),
    linear-gradient(135deg, #4b241d, #a34f32 38%, #d58a5d 60%, #6f2e21);
  background-position: center;
  background-size: cover;
}

.preview-photo.is-story-preview {
  width: 100%;
  aspect-ratio: 9 / 16;
  justify-self: center;
  border-radius: 0;
}

.social-preview.is-story-mode {
  max-width: 280px;
  border-color: #1d1d1d;
  border-radius: 20px;
  background: #111;
  box-shadow: 0 18px 38px rgba(12, 30, 24, .2);
}

.social-preview.is-story-mode .social-profile-line,
.social-preview.is-story-mode .preview-actions,
.social-preview.is-story-mode .preview-caption {
  display: none;
}

.before-after-social {
  position: absolute;
  inset: 0;
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: white;
}

.preview-photo.is-before-after {
  background: white;
}

.preview-photo.is-before-after .before-after-social {
  display: grid;
}

.before-after-social > div {
  display: grid;
  place-items: end start;
  padding: 9px;
  background:
    repeating-linear-gradient(99deg, rgba(255,255,255,.08) 0 3px, transparent 3px 13px),
    linear-gradient(135deg, #5c4b42, #ab765b);
  background-position: center;
  background-size: cover;
}

.before-after-social > div:first-child {
  filter: saturate(.78) brightness(.92);
}

.before-after-social span {
  padding: 5px 7px;
  border-radius: 12px;
  background: rgba(23, 60, 49, .86);
  color: white;
  font-size: .48rem;
  font-weight: 850;
  letter-spacing: .1em;
}

.preview-photo.is-before-after .preview-watermark {
  position: relative;
  z-index: 3;
}

.preview-watermark {
  padding: 5px 8px;
  background: rgba(255,255,255,.72);
  font-family: Georgia, serif;
  font-size: .45rem;
  letter-spacing: .12em;
}

.stock-social-overlay {
  position: absolute;
  z-index: 4;
  inset: auto 15px 15px;
  display: none;
  gap: 3px;
  padding: 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(16, 42, 34, .92), rgba(16, 42, 34, .72));
  color: white;
  box-shadow: 0 7px 22px rgba(13, 31, 26, .22);
}

.preview-photo.is-stock .stock-social-overlay {
  display: grid;
}

.preview-photo.is-stock .preview-watermark {
  display: none;
}

.stock-social-overlay span {
  font-size: .45rem;
  font-weight: 850;
  letter-spacing: .13em;
}

.stock-social-overlay strong {
  max-width: 90%;
  font-family: Georgia, serif;
  font-size: 1.15rem;
  line-height: 1.08;
}

.stock-social-overlay small {
  font-size: .5rem;
}

.graphic-social-design {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
}

.graphic-social-design.is-video-source {
  background-color: transparent;
}

.preview-photo.is-graphic .graphic-social-design {
  display: flex;
}

.preview-photo.is-graphic .preview-watermark {
  display: none;
}

.preview-photo.is-carousel::after {
  position: absolute;
  z-index: 7;
  top: 10px;
  right: 10px;
  padding: 5px 8px;
  border-radius: 14px;
  background: rgba(10, 25, 21, .66);
  color: white;
  content: "▤  " attr(data-carousel-count);
  font-size: .47rem;
  font-weight: 850;
  backdrop-filter: blur(6px);
}

.preview-photo.is-carousel .preview-watermark {
  display: none;
}

.graphic-social-design > * {
  position: relative;
  z-index: 1;
}

.graphic-social-brand {
  display: flex;
  min-height: 28px;
  align-items: center;
  font-size: calc(.43rem * var(--graphic-logo-scale, 1));
  font-family: var(--graphic-font);
  font-weight: 850;
  letter-spacing: .16em;
}

.graphic-social-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 88%;
  left: var(--graphic-text-offset-x, 0%);
  top: var(--graphic-text-offset-y, 0%);
  transition: left 120ms ease, top 120ms ease;
}

.graphic-social-copy > span {
  margin-bottom: 7px;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--graphic-accent) 68%, white);
  border-radius: 14px;
  color: var(--graphic-accent);
  font-size: .42rem;
  font-weight: 900;
  letter-spacing: .14em;
}

.graphic-social-copy strong {
  max-width: 100%;
  color: var(--graphic-text);
  font-family: var(--graphic-font);
  font-size: var(--graphic-social-headline-size, 2.15rem);
  font-weight: 950;
  letter-spacing: -.065em;
  line-height: .84;
  text-wrap: balance;
}

.graphic-social-copy small {
  max-width: 82%;
  margin-top: 10px;
  color: color-mix(in srgb, var(--graphic-text) 82%, transparent);
  font-size: var(--graphic-social-subline-size, .52rem);
  font-weight: 650;
  line-height: 1.45;
}

.graphic-social-design > i {
  position: absolute;
  right: 17px;
  bottom: 17px;
  display: grid;
  place-items: center;
  color: var(--graphic-accent);
  font-style: normal;
}

.graphic-social-design.style-editorial > .graphic-social-copy {
  align-items: center;
  text-align: center;
}

.graphic-social-design.style-editorial .graphic-social-copy strong {
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: .9;
}

.graphic-social-design.style-minimal > .graphic-social-copy {
  padding: 13px;
  border: 1px solid rgba(255,255,255,.28);
  background: color-mix(in srgb, var(--graphic-primary) 78%, transparent);
}

.graphic-social-design.style-minimal .graphic-social-copy strong {
  font-size: var(--graphic-social-minimal-size, 1.7rem);
  letter-spacing: -.035em;
  line-height: .95;
}

.graphic-social-design.is-story-format {
  padding: 25px 22px;
}

.graphic-social-design.is-story-format .graphic-social-copy strong {
  font-size: var(--graphic-social-story-size, 2.45rem);
}

.graphic-social-design.text-position-top > .graphic-social-copy {
  margin: 16% 0 auto;
}

.graphic-social-design.text-position-center > .graphic-social-copy {
  margin: auto 0;
}

.graphic-social-design.text-position-bottom > .graphic-social-copy {
  margin: auto 0 0;
}

.preview-actions {
  display: flex;
  gap: 12px;
  padding: 12px 13px 7px;
  font-size: 1.08rem;
}

.preview-actions .save-icon {
  margin-left: auto;
}

.preview-caption {
  max-height: 84px;
  overflow: hidden;
  padding: 0 13px 15px;
  font-size: .61rem;
  line-height: 1.55;
}

.platform-tabs {
  display: flex;
  gap: 5px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e3e0d8;
}

.platform-tabs button {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: .65rem;
  font-weight: 700;
}

.platform-tabs button.is-active {
  background: #eef1ea;
  color: var(--ink);
}

.editor-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 24px 0 14px;
}

.tone-pill {
  padding: 7px 9px;
  border-radius: 15px;
  background: #f0e9df;
  color: #7b6956;
  font-size: .56rem;
  white-space: nowrap;
}

.caption-ai-assistant {
  margin-bottom: 15px;
  padding: 14px;
  border: 1px solid #cddbcf;
  border-radius: 12px;
  background:
    radial-gradient(circle at 92% 16%, rgba(202, 169, 143, .18), transparent 30%),
    #f3f7f1;
}

.caption-ai-heading {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.caption-ai-icon {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--forest);
  color: white;
  font-size: .72rem;
}

.caption-ai-heading small,
.caption-ai-heading strong,
.caption-ai-heading p {
  display: block;
}

.caption-ai-heading small {
  color: #64806f;
  font-size: .47rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.caption-ai-heading strong {
  margin-top: 3px;
  color: var(--forest);
  font-family: Georgia, serif;
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.25;
}

.caption-ai-heading p {
  margin: 4px 0 0;
  color: #6f7e74;
  font-size: .55rem;
  line-height: 1.45;
}

.caption-ai-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.caption-angle-options {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.caption-angle-options button,
.caption-generate-button {
  border: 1px solid #cbd6cc;
  border-radius: 18px;
  font-size: .52rem;
  font-weight: 800;
}

.caption-angle-options button {
  padding: 7px 9px;
  background: rgba(255, 255, 255, .75);
  color: #557064;
}

.caption-angle-options button.is-selected {
  border-color: var(--forest);
  background: var(--forest);
  color: white;
}

.caption-generate-button {
  padding: 8px 11px;
  background: #fffdf8;
  color: var(--forest);
  white-space: nowrap;
}

.caption-generate-button:disabled {
  cursor: wait;
  opacity: .65;
}

.caption-ai-status {
  min-height: .7rem;
  margin: 7px 0 -3px 41px;
  color: #527060;
  font-size: .51rem;
  font-weight: 700;
}

#platform-text {
  min-height: 250px;
}

.editor-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  color: #8d918b;
  font-size: .59rem;
}

.editor-footer .mini-action:first-of-type {
  margin-left: auto;
}

.mini-action {
  color: var(--forest);
  font-size: .58rem;
}

.caption-options {
  display: flex;
  gap: 22px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e8e5dc;
}

.publish-grid .form-card {
  min-height: 370px;
}

.publish-channels,
.timing-options {
  display: grid;
  gap: 9px;
}

.channel-choice {
  overflow: hidden;
  border: 1px solid #dcdbd3;
  border-radius: 10px;
  background: #fffefb;
  transition: 160ms ease;
}

.channel-choice:has([data-publish-channel]:checked) {
  border-color: #a8bda8;
  background: #f0f4ed;
}

.channel-choice.is-disabled {
  opacity: .62;
}

.channel-choice.is-unavailable {
  background: #f6f5f0;
}

.channel-choice.is-unavailable .channel-main {
  cursor: not-allowed;
}

.channel-placement-options button:disabled {
  cursor: not-allowed;
  opacity: .52;
}

.channel-main {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 15px 10px;
  cursor: pointer;
}

.channel-main input {
  width: 16px;
  height: 16px;
  accent-color: var(--forest);
}

.channel-main > i {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 50%;
  color: white;
  font-size: .67rem;
  font-style: normal;
  font-weight: 800;
}

.channel-main strong,
.channel-main small {
  display: block;
}

.channel-main strong { font-size: .7rem; }
.channel-main small { margin-top: 3px; color: var(--muted); font-size: .57rem; }
.channel-main em { color: #4d765b; font-size: .57rem; font-style: normal; }

.channel-placement-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 0 15px 13px 55px;
}

.channel-placement-options.single-placement {
  grid-template-columns: 1fr;
}

.channel-placement-options button {
  min-height: 31px;
  border: 1px solid #d2d7cf;
  border-radius: 7px;
  background: rgba(255,255,255,.72);
  color: #788079;
  font-size: .53rem;
  font-weight: 800;
}

.channel-placement-options button.is-selected {
  border-color: var(--forest);
  background: var(--forest);
  color: white;
}

.story-delivery-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 13px;
  padding: 10px 12px;
  border: 1px solid #d9ded4;
  border-radius: 8px;
  background: #f7f8f3;
  color: #6f7971;
  font-size: .55rem;
  line-height: 1.45;
}

.story-delivery-note span {
  color: var(--forest);
  font-size: .85rem;
}

.radio-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 18px;
  border: 1px solid #dcdbd3;
  border-radius: 10px;
  cursor: pointer;
}

.radio-card input {
  position: absolute;
  opacity: 0;
}

.radio-card.is-selected {
  border-color: var(--forest);
  background: #f0f4ed;
}

.radio-mark {
  width: 17px;
  height: 17px;
  border: 1px solid #a7aaa2;
  border-radius: 50%;
}

.radio-card.is-selected .radio-mark {
  border: 5px solid var(--forest);
}

.radio-card strong,
.radio-card small {
  display: block;
}

.radio-card strong { font-size: .72rem; }
.radio-card small { margin-top: 4px; color: var(--muted); font-size: .59rem; }

.schedule-fields {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.schedule-fields.is-visible {
  display: grid;
}

.schedule-fields label {
  color: var(--muted);
  font-size: .61rem;
}

.schedule-fields input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
}

.publish-summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding: 17px;
}

.summary-thumb {
  display: grid;
  width: 66px;
  height: 58px;
  place-items: end center;
  border-radius: 8px;
  background:
    radial-gradient(circle at 38% 12%, rgba(255,255,255,.38), transparent 13%),
    repeating-linear-gradient(99deg, rgba(255,255,255,.09) 0 3px, transparent 3px 13px),
    linear-gradient(135deg, #4b241d, #a34f32 38%, #d58a5d 60%, #6f2e21);
  background-position: center;
  background-size: cover;
}

.summary-thumb span {
  padding: 2px 5px;
  background: rgba(255,255,255,.7);
  font-size: .5rem;
}

.publish-summary .eyebrow { margin-bottom: 3px; }
.publish-summary h3 { margin-bottom: 3px; }
.publish-summary > div > span { color: var(--muted); font-size: .62rem; }

.summary-consent {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

.summary-consent > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #e4eee4;
  color: #4b7958;
}

.summary-consent small { color: var(--muted); font-size: .55rem; line-height: 1.5; }
.summary-consent strong { color: var(--ink); }

.publish-button {
  min-width: 205px;
}

.standard-header {
  align-items: center;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
}

.library-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.library-status-filters {
  flex-wrap: wrap;
  margin-bottom: 0;
}

.archive-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.archive-filter-chip span {
  display: grid;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  place-items: center;
  border-radius: 10px;
  background: rgba(23, 60, 49, .1);
  color: var(--forest);
  font-size: .47rem;
  font-weight: 850;
}

.archive-filter-chip.is-active span {
  background: rgba(255, 255, 255, .18);
  color: inherit;
}

.library-view-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.library-sort {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px 5px 11px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
  color: var(--muted);
  font-size: .56rem;
}

.library-sort select {
  padding: 4px 23px 4px 4px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: .59rem;
  font-weight: 750;
  outline: 0;
}

.search-box {
  display: flex;
  width: 220px;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
}

.search-box input {
  width: 100%;
  border: 0;
  background: transparent;
  outline: 0;
  font-size: .67rem;
}

.library-management-note {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: -6px 0 20px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #edf2e9;
}

.library-management-note > span {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #b8c8b7;
  border-radius: 50%;
  color: var(--forest);
  font-size: .67rem;
}

.library-management-note p {
  margin: 0;
  color: #5e7167;
  font-size: .54rem;
  line-height: 1.5;
}

.library-management-note strong {
  display: block;
  color: var(--forest);
}

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

.library-card {
  position: relative;
  overflow: visible;
}

.library-card[hidden] {
  display: none;
}

.library-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
  background-position: center;
  background-size: cover;
}

.library-image.is-carousel {
  cursor: grab;
  touch-action: pan-y;
  transition: background-image 160ms ease;
}

.library-image.is-carousel:active {
  cursor: grabbing;
}

.library-carousel-pill {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 6px 9px;
  border-radius: 16px;
  background: rgba(20, 50, 41, .86);
  color: white;
  font-size: .48rem;
  font-weight: 850;
  backdrop-filter: blur(8px);
}

.library-carousel-button {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  background: rgba(20, 50, 41, .72);
  color: white;
  font-family: Arial, sans-serif;
  font-size: 1.2rem;
  transform: translateY(-50%);
  backdrop-filter: blur(8px);
}

.library-carousel-button[data-library-carousel-step="-1"] {
  left: 10px;
}

.library-carousel-button[data-library-carousel-step="1"] {
  right: 10px;
}

.library-carousel-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  z-index: 3;
  display: flex;
  gap: 4px;
  transform: translateX(-50%);
}

.library-carousel-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

.library-carousel-dots i.is-active {
  width: 13px;
  border-radius: 6px;
  background: white;
}

.library-image .published-pill {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  background: rgba(244,250,245,.92);
}

.published-pill.is-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #285f3d;
  font-weight: 850;
  text-transform: uppercase;
}

.published-pill.is-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #39a35f;
  box-shadow: 0 0 0 4px rgba(57,163,95,.14);
}

.published-pill.is-scheduled {
  background: rgba(238,242,250,.94);
  color: #456483;
}

.published-pill.is-draft {
  background: rgba(247,244,235,.95);
  color: #81755f;
}

.published-pill.is-archived {
  background: rgba(244, 242, 237, .95);
  color: #685f53;
  font-weight: 850;
}

.library-card.is-archived {
  border-color: #d3cec3;
  box-shadow: none;
}

.library-card.is-archived .library-image {
  filter: saturate(.48) contrast(.93);
}

.library-card.is-archived .library-body {
  background: #f8f6f1;
}

.trend-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 9px;
  border-radius: 16px;
  background: rgba(23,60,49,.88);
  color: white;
  font-size: .48rem;
  font-weight: 850;
  backdrop-filter: blur(6px);
}

.scheduled-library-image {
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), transparent),
    radial-gradient(circle at 72% 28%, #d7c1ac 0 18%, transparent 18.5%),
    linear-gradient(145deg, #8fa58e, #425f54);
}

.draft-library-image {
  background:
    linear-gradient(90deg, transparent 49%, rgba(255,255,255,.45) 49% 51%, transparent 51%),
    linear-gradient(145deg, #ded8c9, #b9c4b3);
}

.library-body {
  position: relative;
  padding: 18px;
  border-radius: 0 0 14px 14px;
  background: var(--paper);
}

.channel-icons {
  display: flex;
  gap: 4px;
  margin-bottom: 13px;
  padding-right: 38px;
}

.library-card-menu {
  position: absolute;
  z-index: 12;
  top: 11px;
  right: 11px;
}

.library-card-menu-toggle {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid #d8d8d0;
  border-radius: 50%;
  background: rgba(255, 254, 251, .97);
  color: var(--forest);
  box-shadow: 0 4px 15px rgba(23, 60, 49, .08);
  font-family: Arial, sans-serif;
  font-size: .65rem;
  letter-spacing: .06em;
}

.library-card-menu-toggle:hover,
.library-card-menu-toggle:focus-visible,
.library-card-menu.is-open .library-card-menu-toggle {
  border-color: #9caf9f;
  background: #eef3ed;
  outline: none;
}

.library-card-menu-popover {
  position: absolute;
  top: 37px;
  right: 0;
  display: grid;
  width: 224px;
  padding: 7px;
  border: 1px solid #d6d6ce;
  border-radius: 11px;
  background: #fffefb;
  box-shadow: 0 19px 48px rgba(15, 43, 34, .2);
}

.library-card-menu-popover[hidden] {
  display: none;
}

.library-card-menu-popover button {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--forest);
  text-align: left;
}

.library-card-menu-popover button:hover,
.library-card-menu-popover button:focus-visible {
  background: #eef3ed;
  outline: none;
}

.library-card-menu-popover button + button {
  margin-top: 4px;
  border-top: 1px solid #ece8df;
  border-radius: 0 0 8px 8px;
}

.library-card-menu-popover button > span:first-child {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  background: #e8eee7;
  font-size: .65rem;
}

.library-card-menu-popover strong,
.library-card-menu-popover small {
  display: block;
}

.library-card-menu-popover strong {
  font-size: .58rem;
}

.library-card-menu-popover small {
  margin-top: 2px;
  color: var(--muted);
  font-size: .48rem;
  line-height: 1.35;
}

.library-card-menu-popover .is-danger {
  color: #984a40;
}

.library-card-menu-popover .is-danger:hover,
.library-card-menu-popover .is-danger:focus-visible {
  background: #fbefec;
}

.library-card-menu-popover .is-danger > span:first-child {
  background: #f7dfda;
  font-size: .9rem;
}

.library-body p {
  color: var(--muted);
  font-size: .68rem;
}

.library-performance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 13px 0 0;
  padding: 9px 10px;
  border-radius: 8px;
  background: #f0f4ed;
  color: #617268;
  font-size: .56rem;
}

.library-performance strong {
  color: #3d7450;
}

.library-body > div:last-child {
  display: flex;
  justify-content: space-between;
  padding-top: 13px;
  border-top: 1px solid #ece9e1;
  color: #8d918a;
  font-size: .59rem;
}

.library-body > div:last-child strong {
  color: var(--ink);
}

.library-empty {
  margin-top: 18px;
  padding: 45px 20px;
  border: 1px dashed #d5d7cf;
  border-radius: 13px;
  background: #faf9f5;
  color: var(--muted);
  text-align: center;
}

.library-empty[hidden] {
  display: none;
}

.library-empty > span {
  display: grid;
  width: 42px;
  height: 42px;
  margin: 0 auto 10px;
  place-items: center;
  border-radius: 50%;
  background: var(--sage-pale);
  color: var(--forest);
  font-size: 1.1rem;
}

.library-empty strong {
  display: block;
  color: var(--ink);
}

.library-empty p {
  margin: 6px 0 0;
  font-size: .62rem;
}

.library-empty .primary-button {
  margin-top: 18px;
}

.trend-pulse {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: .63rem;
}

.trend-pulse span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5b9c69;
  box-shadow: 0 0 0 5px rgba(91,156,105,.11);
}

.featured-trend {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  min-height: 390px;
  overflow: hidden;
}

.trend-visual {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255,255,255,.18), transparent 45%),
    linear-gradient(135deg, #c3cfba, #d9bfad);
}

.trend-visual::before,
.trend-visual::after {
  position: absolute;
  border: 1px solid rgba(23,60,49,.17);
  border-radius: 50%;
  content: "";
}

.trend-visual::before { width: 380px; height: 380px; left: -110px; top: -120px; }
.trend-visual::after { width: 280px; height: 280px; right: -80px; bottom: -130px; }

.trend-orbit {
  position: relative;
  z-index: 2;
  display: grid;
  width: 180px;
  height: 180px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 50%;
  color: white;
  font-size: 3.5rem;
}

.trend-orbit::before {
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(23,60,49,.2);
  border-radius: 50%;
  content: "";
}

.trend-orbit i {
  position: absolute;
  right: 0;
  bottom: 18px;
  font-family: Georgia, serif;
  color: var(--ink);
  font-size: .75rem;
}

.trend-content {
  padding: clamp(35px, 5vw, 68px);
}

.trend-content h2 {
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.05;
}

.trend-content > p:not(.eyebrow) {
  color: var(--muted);
  font-size: .78rem;
}

.trend-why {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 12px;
  margin: 22px 0;
  padding: 14px;
  border-radius: 9px;
  background: #eff2ea;
  font-size: .66rem;
}

.trend-why span {
  font-weight: 800;
}

.trend-why p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.inspiration-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 38px 0 15px;
}

.inspiration-toolbar h2 {
  margin: 0;
}

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

.inspiration-card {
  overflow: hidden;
}

.card-visual {
  position: relative;
  display: grid;
  min-height: 165px;
  place-items: center;
  overflow: hidden;
  color: var(--ink);
  text-align: center;
}

.card-visual > span {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: .53rem;
  font-weight: 850;
  letter-spacing: .12em;
}

.card-visual strong {
  z-index: 2;
  font-family: Georgia, serif;
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1;
}

.color-story {
  background: radial-gradient(circle at 50% 160%, #70453b 0 44%, transparent 44.5%), #d9b6a7;
}

.reel-story {
  background:
    linear-gradient(90deg, transparent 48%, rgba(255,255,255,.7) 48% 52%, transparent 52%),
    #c1cfb9;
}

.reel-story strong {
  display: grid;
  width: 78px;
  height: 110px;
  place-content: center;
  transform: rotate(5deg);
  border: 3px solid white;
  border-radius: 10px;
}

.reel-story small { font-family: Inter, sans-serif; font-size: .6rem; }

.tip-story {
  background:
    radial-gradient(circle at 10% 15%, rgba(255,255,255,.35), transparent 20%),
    #dfd2bd;
}

.tip-story::after {
  position: absolute;
  width: 230px;
  height: 230px;
  border: 1px solid rgba(23,60,49,.16);
  border-radius: 50%;
  content: "";
}

.team-story {
  background:
    radial-gradient(circle at 50% 42%, #f4e8dd 0 18%, transparent 18.5%),
    radial-gradient(ellipse at 50% 115%, #44675c 0 48%, transparent 48.5%),
    #c7b39f;
}

.team-story strong {
  color: white;
  text-shadow: 0 2px 12px rgba(23,60,49,.32);
}

.care-story {
  background:
    linear-gradient(120deg, transparent 0 38%, rgba(255,255,255,.46) 38% 42%, transparent 42%),
    radial-gradient(circle at 75% 75%, #a6b89f 0 25%, transparent 25.5%),
    #e4d9c5;
}

.care-story::after {
  position: absolute;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(23,60,49,.22);
  transform: rotate(12deg);
  content: "";
}

.inspiration-body {
  padding: 19px;
}

.inspiration-body p:not(.eyebrow) {
  min-height: 48px;
  color: var(--muted);
  font-size: .68rem;
}

.source-line {
  display: flex;
  justify-content: space-between;
  margin: 16px 0;
  padding-top: 12px;
  border-top: 1px solid #ece8df;
  color: #92958e;
  font-size: .56rem;
}

.source-note,
.demo-note {
  margin: 22px 0 0;
  color: #8d918a;
  font-size: .62rem;
  text-align: center;
}

.pilot-account-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(280px, .9fr);
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  padding: 20px 22px;
  border: 1px solid #cbdaca;
  border-radius: 14px;
  background: #eef4eb;
}

.pilot-account-card h2 { margin: 2px 0 5px; font-family: Georgia, serif; }
.pilot-account-card p:not(.eyebrow) { color: var(--muted); font-size: .61rem; line-height: 1.5; }

.pilot-account-card dl {
  display: grid;
  gap: 7px;
  margin: 0;
}

.pilot-account-card dl > div {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.72);
}

.pilot-account-card dt { color: var(--muted); font-size: .51rem; }
.pilot-account-card dd { overflow: hidden; margin: 0; color: var(--ink); font-size: .55rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }

.security-seal {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  border: 1px solid #cbd6c8;
  border-radius: 10px;
  background: #edf2e9;
}

.security-seal > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--forest);
  color: white;
}

.security-seal strong,
.security-seal small {
  display: block;
}

.security-seal strong { font-size: .68rem; }
.security-seal small { margin-top: 3px; color: var(--muted); font-size: .54rem; }

.connection-list {
  display: grid;
  gap: 12px;
}

.meta-connection-overview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid #cbdaca;
  border-radius: 14px;
  background: #eef4eb;
}

.meta-connection-overview.is-connected {
  border-color: #a9c8ad;
  background: #e8f3e8;
}

.meta-connection-overview.is-error {
  border-color: #dfc4bb;
  background: #f8ece8;
}

.meta-overview-icon {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #0866ff, #7b3ff2);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 850;
}

.meta-overview-copy h2 {
  margin: 2px 0 5px;
  font-family: Georgia, serif;
  font-size: 1.28rem;
}

.meta-overview-copy > p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: .64rem;
  line-height: 1.55;
}

.meta-overview-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.meta-page-picker {
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
}

.meta-page-picker h2 {
  margin: 3px 0 7px;
  font-family: Georgia, serif;
  font-size: 1.28rem;
}

.meta-page-picker > div > p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: .64rem;
}

.meta-page-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 17px;
}

.meta-page-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fbfaf6;
  color: var(--ink);
  text-align: left;
}

.meta-page-option::before {
  width: 15px;
  height: 15px;
  border: 1px solid #9ba89c;
  border-radius: 50%;
  content: "";
  box-shadow: inset 0 0 0 4px #fbfaf6;
}

.meta-page-option.is-selected {
  border-color: var(--forest);
  background: #eef4eb;
  box-shadow: 0 0 0 1px var(--forest);
}

.meta-page-option.is-selected::before {
  background: var(--forest);
}

.meta-page-option strong,
.meta-page-option small {
  display: block;
}

.meta-page-option strong { font-size: .66rem; }
.meta-page-option small { margin-top: 3px; color: var(--muted); font-size: .54rem; }

.meta-page-picker-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.connection-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 22px;
}

.connection-logo {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 12px;
  color: white;
  font-size: 1.05rem;
  font-style: normal;
  font-weight: 800;
}

.connection-card h3 {
  margin-bottom: 4px;
}

.connection-card p {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: .67rem;
}

.account-line {
  color: #819080;
  font-size: .58rem;
  font-weight: 700;
}

.connection-action {
  display: flex;
  align-items: center;
  gap: 13px;
}

.connected-state {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #4d765b;
  font-size: .61rem;
  font-weight: 700;
}

.connected-state i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5c9b69;
}

.connected-state.is-off {
  color: #979b94;
}

.connected-state.is-off i {
  background: #b7b9b5;
}

.connected-state.is-pending {
  color: #8a6843;
}

.connected-state.is-pending i {
  background: #d59a54;
}

.beta-access-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  border: 1px solid #cbdaca;
  border-radius: 11px;
  background: #eef4eb;
}

.beta-access-badge > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
  font-weight: 850;
}

.beta-access-badge strong,
.beta-access-badge small { display: block; }
.beta-access-badge strong { font-size: .64rem; }
.beta-access-badge small { margin-top: 2px; color: var(--muted); font-size: .52rem; }

.security-explainer {
  display: grid;
  grid-template-columns: auto .8fr 1.2fr;
  gap: 24px;
  align-items: center;
  margin-top: 22px;
  padding: 28px;
  border-radius: 14px;
  background: var(--forest);
  color: white;
}

.big-lock {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  font-size: 1.4rem;
}

.security-explainer .eyebrow { color: #b5c6b4; }
.security-explainer h2 { margin: 0; font-family: Georgia, serif; }
.security-explainer ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: .63rem; }
.security-explainer li { display: flex; gap: 7px; align-items: center; color: rgba(255,255,255,.74); }
.security-explainer li span { color: #bfd3bd; }

.settings-card {
  overflow: hidden;
}

.settings-section {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 35px;
  padding: 30px;
  border-bottom: 1px solid #e4e1d9;
}

.settings-help {
  margin-top: 9px;
  color: var(--muted);
  font-size: .58rem;
  line-height: 1.55;
}

.staff-settings {
  display: grid;
  gap: 12px;
}

.staff-member-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.staff-member-list > p {
  margin: 0;
  color: var(--muted);
  font-size: .58rem;
}

.staff-member-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px;
  border: 1px solid #d8dbd3;
  border-radius: 18px;
  background: #fffefb;
}

.staff-member-chip > i {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: var(--sage-pale);
  color: var(--forest);
  font-size: .5rem;
  font-style: normal;
  font-weight: 850;
}

.staff-member-chip strong {
  font-size: .57rem;
}

.staff-member-chip button {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #f0eee7;
  color: #7f837d;
}

.staff-add-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.staff-add-row input {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid #d4d4cb;
  border-radius: 8px;
  background: #fbfaf6;
  color: var(--ink);
  outline: none;
}

.staff-add-row input:focus {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(33,77,64,.08);
}

.staff-settings > small {
  color: var(--muted);
  font-size: .5rem;
}

.brand-identity-builder {
  display: grid;
  gap: 14px;
}

.brand-preview-card {
  --brand-primary: #173c31;
  --brand-accent: #cba98f;
  --brand-text: #f8f1e6;
  --brand-font: Arial, Helvetica, sans-serif;
  position: relative;
  min-height: 190px;
  overflow: hidden;
  padding: 22px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 88% 82%, color-mix(in srgb, var(--brand-accent) 28%, transparent), transparent 32%),
    var(--brand-primary);
  color: var(--brand-text);
  font-family: var(--brand-font);
}

.brand-preview-card::after {
  position: absolute;
  right: -58px;
  bottom: -72px;
  width: 190px;
  height: 190px;
  border: 1px solid color-mix(in srgb, var(--brand-accent) 50%, transparent);
  border-radius: 50%;
  content: "";
}

.brand-preview-label {
  font-size: .46rem;
  font-weight: 850;
  letter-spacing: .15em;
  opacity: .72;
}

.brand-preview-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 18px;
}

.brand-preview-logo,
.brand-preview-lockup img {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--brand-accent) 65%, transparent);
  border-radius: 50%;
  object-fit: contain;
  font-size: .75rem;
  font-weight: 850;
}

.brand-preview-lockup img {
  padding: 5px;
  border-radius: 9px;
}

.brand-preview-lockup strong,
.brand-preview-lockup small {
  display: block;
}

.brand-preview-lockup strong {
  font-size: 1.15rem;
}

.brand-preview-lockup small {
  margin-top: 3px;
  font-size: .54rem;
  opacity: .7;
}

.brand-preview-card p {
  max-width: 72%;
  font-size: .62rem;
  line-height: 1.45;
  opacity: .8;
}

.brand-preview-accent {
  position: absolute;
  right: 21px;
  top: 22px;
  width: 44px;
  height: 6px;
  border-radius: 10px;
  background: var(--brand-accent);
}

.brand-control-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.brand-color-field,
.brand-select-field {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: .58rem;
  font-weight: 750;
}

.brand-color-field > span {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 5px 9px 5px 5px;
  border: 1px solid #d4d4cb;
  border-radius: 8px;
  background: #fbfaf6;
}

.brand-color-field input {
  width: 31px;
  height: 29px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
}

.brand-color-field em {
  color: var(--ink);
  font-size: .57rem;
  font-style: normal;
}

.brand-select-field select {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid #d4d4cb;
  border-radius: 8px;
  background: #fbfaf6;
  color: var(--ink);
}

.brand-look-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.brand-look-options button {
  display: flex;
  min-height: 92px;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid #d9d8d0;
  border-radius: 9px;
  background: #fffefb;
  color: var(--ink);
  text-align: left;
}

.brand-look-options button.is-selected {
  border-color: var(--forest);
  background: #edf2e9;
  box-shadow: inset 0 0 0 1px rgba(23,60,49,.06);
}

.brand-look-options span {
  margin-bottom: 8px;
  color: var(--terracotta);
}

.brand-look-options strong {
  font-size: .61rem;
}

.brand-look-options small {
  margin-top: 4px;
  color: var(--muted);
  font-size: .5rem;
  line-height: 1.35;
}

.brand-logo-upload {
  display: flex;
  min-height: 45px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px dashed #c9cec5;
  border-radius: 9px;
  background: #faf9f4;
  color: var(--ink);
  cursor: pointer;
  font-size: .6rem;
}

.brand-logo-upload span,
.brand-logo-upload small {
  display: block;
}

.brand-logo-upload small {
  margin-top: 3px;
  color: var(--muted);
  font-size: .48rem;
  font-weight: 500;
}

.brand-logo-upload strong {
  color: var(--forest);
  font-size: .54rem;
}

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

.brand-profile-note {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #667369;
  font-size: .55rem;
}

.brand-profile-note span {
  color: var(--terracotta);
}

.settings-fields,
.tone-choices {
  display: grid;
  gap: 12px;
}

.settings-fields.two-col {
  grid-template-columns: 1fr 1fr;
}

.settings-fields .full {
  grid-column: 1 / -1;
}

.voice-dna-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

.voice-dna-fields .full {
  grid-column: 1 / -1;
}

.voice-dna-fields label {
  color: var(--muted);
  font-size: .62rem;
  font-weight: 700;
}

.voice-dna-fields textarea,
.voice-dna-fields select {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 11px;
  border: 1px solid #d4d4cb;
  border-radius: 9px;
  background: #fbfaf6;
  color: var(--ink);
  font: inherit;
  line-height: 1.5;
  outline: none;
}

.voice-dna-fields textarea:focus,
.voice-dna-fields select:focus {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(33,77,64,.08);
}

.settings-fields label:not(.switch-row) {
  color: var(--muted);
  font-size: .62rem;
  font-weight: 700;
}

.settings-fields input:not([type="checkbox"]) {
  display: block;
  margin-top: 7px;
  padding: 11px;
}

.tone-choices {
  grid-template-columns: repeat(3, 1fr);
}

.tone-choice {
  position: relative;
  display: flex;
  min-height: 130px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
}

.tone-choice input {
  position: absolute;
  opacity: 0;
}

.tone-choice.is-selected {
  border-color: var(--forest);
  background: #f0f4ed;
}

.tone-choice > span {
  margin-bottom: 8px;
  font-size: 1.2rem;
}

.tone-choice strong { font-size: .68rem; }
.tone-choice small { margin-top: 4px; color: var(--muted); font-size: .56rem; line-height: 1.4; }

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid #ece9e1;
}

.switch-row strong,
.switch-row small {
  display: block;
}

.switch-row strong { font-size: .7rem; }
.switch-row small { margin-top: 4px; color: var(--muted); font-size: .57rem; }
.switch-row input { width: 34px; height: 18px; accent-color: var(--forest); }

.save-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 20px 30px;
}

#settings-saved {
  color: #4e795b;
  font-size: .65rem;
}

.toast {
  position: fixed;
  z-index: 100;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  transform: translateY(30px);
  border-radius: 10px;
  background: var(--ink);
  color: white;
  box-shadow: var(--shadow);
  font-size: .7rem;
  opacity: 0;
  pointer-events: none;
  transition: 220ms ease;
}

.toast.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.toast-icon {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: #dce9db;
  color: var(--forest);
}

.toast.is-warning {
  border: 1px solid #dfc46b;
  background: #f6e9b8;
  color: #493d19;
}

.toast.is-warning .toast-icon {
  background: #d6ad32;
  color: #fffdf4;
  font-weight: 800;
}

.text-generation-loader {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 150px;
  margin-bottom: 22px;
  padding: 28px;
  border: 1px solid #ccdbd0;
  border-radius: 18px;
  background: linear-gradient(115deg, #f4f8f2, #fffdf8 48%, #eef4ed);
  color: var(--forest);
}

.text-generation-loader[hidden] {
  display: none !important;
}

.text-generation-loader > span {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--forest);
  color: white;
  animation: text-generation-pulse 1.2s ease-in-out infinite;
}

.text-generation-loader strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--serif);
  font-size: 1.2rem;
}

.text-generation-loader p {
  margin: 0;
  color: var(--muted);
}

.create-step.is-generating-texts .preview-layout {
  display: none;
}

@keyframes text-generation-pulse {
  50% { transform: scale(.9); opacity: .68; }
}

.modal-backdrop {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  padding: 20px;
  place-items: center;
  background: rgba(11, 35, 28, 0.66);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: 220ms ease;
}

.modal-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.publish-modal {
  position: relative;
  width: min(470px, 100%);
  padding: 34px;
  transform: translateY(12px);
  border-radius: 17px;
  background: var(--paper);
  text-align: center;
  transition: 220ms ease;
}

.consent-warning-modal {
  position: relative;
  width: min(520px, 100%);
  padding: 36px;
  transform: translateY(12px);
  border-radius: 17px;
  background: var(--paper);
  text-align: left;
  transition: 220ms ease;
}

.modal-backdrop.is-visible .consent-warning-modal {
  transform: translateY(0);
}

.warning-modal-icon {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  place-items: center;
  border-radius: 50%;
  background: #f2dfca;
  color: #9c5e2d;
  font-family: Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
}

.consent-warning-modal h2 {
  max-width: 430px;
  margin-bottom: 10px;
  font-size: clamp(1.45rem, 4vw, 2rem);
  line-height: 1.15;
}

.consent-warning-modal > p:not(.eyebrow) {
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.6;
}

.warning-confirmation {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  margin: 20px 0;
  padding: 14px;
  border-radius: 10px;
  background: #f6efe5;
}

.warning-confirmation > span {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 1px solid #c8a77f;
  border-radius: 50%;
  color: #986233;
  font-family: Georgia, serif;
  font-size: .65rem;
}

.warning-confirmation p {
  margin: 0;
  color: #6e655c;
  font-size: .62rem;
  line-height: 1.55;
}

.warning-confirmation strong {
  color: var(--ink);
}

.warning-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

.delete-post-modal {
  border: 1px solid #e7cbc4;
}

.delete-modal-icon {
  background: #f8e2dd;
  color: #a64c40;
  font-family: Arial, sans-serif;
  font-size: 1.25rem;
}

.delete-confirmation {
  background: #fbf0ed;
}

.delete-confirmation > span {
  border-color: #d7a69d;
  color: #91483e;
}

.danger-button {
  padding: 11px 17px;
  border: 1px solid #9f493f;
  border-radius: 8px;
  background: #a94f44;
  color: white;
  font-size: .61rem;
  font-weight: 800;
}

.danger-button:hover,
.danger-button:focus-visible {
  background: #913e35;
  outline: none;
}

.danger-button:disabled {
  cursor: wait;
  opacity: .62;
}

.final-review-modal {
  position: relative;
  width: min(920px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 30px;
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 28px 80px rgba(4, 24, 18, .3);
  transform: translateY(12px);
  transition: 220ms ease;
}

.modal-backdrop.is-visible .final-review-modal {
  transform: translateY(0);
}

.final-review-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-right: 30px;
}

.final-review-heading h2 {
  margin: 3px 0 7px;
  font-size: clamp(1.45rem, 3vw, 2.15rem);
}

.final-review-heading > div > p:last-child {
  max-width: 580px;
  margin: 0;
  color: var(--muted);
  font-size: .66rem;
  line-height: 1.55;
}

.final-review-ready {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 18px;
  background: #eaf3e9;
  color: #497057;
  font-size: .52rem;
  font-weight: 800;
}

.final-review-ready i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4f7959;
}

.final-review-layout {
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: 30px;
  align-items: center;
  margin: 25px 0;
  padding: 22px;
  border-radius: 16px;
  background: #ecece7;
}

.final-review-phone {
  position: relative;
  box-sizing: border-box;
  width: min(300px, 100%);
  aspect-ratio: 70.6 / 146.6;
  margin: 0 auto;
  padding: 9px;
  border: 3px solid #363a38;
  border-radius: 48px;
  background: linear-gradient(145deg, #777b78, #171a19 22%, #050606 78%, #666a67);
  box-shadow:
    0 24px 48px rgba(17, 32, 27, .3),
    inset 0 0 0 1px rgba(255,255,255,.16);
}

.final-review-speaker {
  position: absolute;
  z-index: 20;
  top: 17px;
  left: 50%;
  width: 78px;
  height: 23px;
  border: 1px solid #1b1d1c;
  border-radius: 16px;
  background:
    radial-gradient(circle at 72% 50%, #202624 0 3px, #090a0a 4px),
    #050606;
  box-shadow: 0 1px 2px rgba(255,255,255,.08);
  transform: translateX(-50%);
}

.iphone-button {
  position: absolute;
  z-index: 0;
  width: 4px;
  border-radius: 3px 0 0 3px;
  background: #3c403e;
}

.iphone-silent { top: 87px; left: -6px; height: 25px; }
.iphone-volume-up { top: 132px; left: -6px; height: 46px; }
.iphone-volume-down { top: 188px; left: -6px; height: 46px; }
.iphone-power { top: 148px; right: -6px; height: 73px; border-radius: 0 3px 3px 0; }

.final-review-screen {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 37px;
  background: white;
  color: #181b1a;
}

.final-review-status {
  position: relative;
  z-index: 9;
  display: flex;
  height: 35px;
  align-items: center;
  justify-content: space-between;
  padding: 5px 15px 0;
  font-size: .43rem;
  font-weight: 850;
}

.final-review-app-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px;
  height: 45px;
  padding: 6px 9px;
}

.final-review-avatar {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  background: var(--sand);
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: .42rem;
  font-weight: 800;
}

.final-review-app-head strong,
.final-review-app-head small {
  display: block;
}

.final-review-app-head strong {
  font-size: .46rem;
}

.final-review-app-head small {
  margin-top: 2px;
  color: #8c918e;
  font-size: .38rem;
}

.final-review-app-head b {
  font-size: .52rem;
  letter-spacing: .08em;
}

.final-review-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #d7ddd8;
}

.final-review-media > img,
.final-review-media > video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.final-review-media > video,
.final-review-before-after {
  display: none;
}

.final-review-media > .exact-video-overlay {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.final-review-media > .exact-video-overlay[hidden] {
  display: none;
}

.final-review-carousel-count {
  position: absolute;
  z-index: 5;
  top: 10px;
  right: 10px;
  padding: 5px 8px;
  border-radius: 14px;
  background: rgba(10, 25, 21, .66);
  color: white;
  font-size: .44rem;
  font-weight: 850;
  backdrop-filter: blur(6px);
}

.final-review-media.is-video > img {
  display: none;
}

.final-review-media.is-video > video {
  display: block;
}

.final-review-media.is-video > .exact-video-overlay {
  display: block;
}

.final-review-media.is-video > .exact-video-overlay[hidden] {
  display: none;
}

.final-review-media.is-before-after > img {
  display: none;
}

.final-review-media.is-before-after .final-review-before-after {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.final-review-before-after > div {
  display: grid;
  place-items: end start;
  padding: 8px;
  background-position: center;
  background-size: cover;
}

.final-review-before-after span {
  padding: 3px 5px;
  border-radius: 4px;
  background: rgba(17,34,28,.74);
  color: white;
  font-size: .38rem;
  font-weight: 850;
}

.final-review-feed-actions {
  display: flex;
  gap: 10px;
  padding: 8px 10px 4px;
  font-size: .78rem;
}

.final-review-feed-actions span:last-child {
  margin-left: auto;
}

.final-review-facebook-reactions {
  display: none;
}

.final-review-caption {
  max-height: 48px;
  overflow: hidden;
  margin: 0;
  padding: 2px 10px 10px;
  font-size: .42rem;
  line-height: 1.45;
}

.final-review-screen.is-facebook-review:not(.is-story-review) {
  display: flex;
  flex-direction: column;
  background: #f0f2f5;
  color: #1c1e21;
}

.final-review-screen.is-facebook-review:not(.is-story-review) .final-review-status {
  order: 0;
  flex: 0 0 auto;
  background: white;
}

.final-review-screen.is-facebook-review:not(.is-story-review) .final-review-app-head {
  order: 1;
  flex: 0 0 auto;
  background: white;
}

.final-review-screen.is-facebook-review:not(.is-story-review) .final-review-avatar {
  border: 2px solid white;
  background: #1877f2;
  box-shadow: 0 0 0 2px #1877f2;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.final-review-screen.is-facebook-review:not(.is-story-review) .final-review-caption {
  order: 2;
  max-height: 55px;
  padding: 5px 10px 9px;
  background: white;
  font-size: .43rem;
}

.final-review-screen.is-facebook-review:not(.is-story-review) .final-review-caption strong {
  display: none;
}

.final-review-screen.is-facebook-review:not(.is-story-review) .final-review-media {
  order: 3;
  flex: 0 0 auto;
}

.final-review-screen.is-facebook-review:not(.is-story-review) .final-review-facebook-reactions {
  order: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid #e0e2e5;
  background: white;
  color: #65676b;
  font-size: .37rem;
}

.final-review-screen.is-facebook-review:not(.is-story-review) .final-review-facebook-reactions b {
  font-weight: 600;
}

.final-review-screen.is-facebook-review:not(.is-story-review) .final-review-feed-actions {
  order: 5;
  justify-content: space-around;
  gap: 2px;
  padding: 5px 4px 9px;
  background: white;
  color: #65676b;
  font-size: .38rem;
  font-weight: 750;
}

.final-review-screen.is-facebook-review:not(.is-story-review) .final-review-feed-actions span {
  margin: 0;
  padding: 4px 3px;
  text-align: center;
}

.final-review-feed-crop,
.final-review-story-safe,
.final-review-story-top,
.final-review-story-bottom {
  display: none;
}

.final-review-screen.is-instagram-review:not(.is-story-review) .final-review-feed-crop {
  position: absolute;
  z-index: 8;
  inset: 10% 0;
  display: block;
  border: 1px dashed rgba(255,255,255,.9);
  box-shadow: 0 0 0 999px rgba(6,18,14,.08);
  pointer-events: none;
}

.final-review-feed-crop span,
.final-review-story-safe span {
  position: absolute;
  top: 6px;
  left: 50%;
  padding: 3px 5px;
  border-radius: 10px;
  background: rgba(8,18,15,.72);
  color: white;
  font-size: .35rem;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
}

.final-review-screen.is-story-review {
  min-height: 0;
  aspect-ratio: auto;
  background: #090a0a;
  color: white;
}

.final-review-screen.is-story-review .final-review-status {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  color: white;
  text-shadow: 0 1px 3px rgba(0,0,0,.65);
}

.final-review-screen.is-story-review .final-review-app-head,
.final-review-screen.is-story-review .final-review-feed-actions,
.final-review-screen.is-story-review .final-review-facebook-reactions,
.final-review-screen.is-story-review .final-review-caption {
  display: none;
}

.final-review-screen.is-story-review .final-review-media {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  transform: translateY(-50%);
}

.final-review-screen.is-story-review .final-review-story-safe {
  position: absolute;
  z-index: 8;
  inset: 14% 5.5% 20%;
  display: block;
  border: 1px dashed rgba(255,255,255,.92);
  pointer-events: none;
}

.final-review-screen.is-story-review .final-review-story-top,
.final-review-screen.is-story-review .final-review-story-bottom {
  position: absolute;
  z-index: 9;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 6%;
  pointer-events: none;
}

.final-review-screen.is-story-review .final-review-story-top {
  top: 30px;
  height: 9.5%;
  background: linear-gradient(180deg, rgba(5,10,8,.36), transparent);
  font-size: .42rem;
}

.final-review-story-top .story-progress {
  position: absolute;
  top: 0;
  right: 5%;
  left: 5%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}

.final-review-story-top .story-progress i {
  height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}

.final-review-story-top .story-progress i:last-child {
  background: rgba(255,255,255,.42);
}

.final-review-story-avatar {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border: 1.5px solid white;
  border-radius: 50%;
  background: var(--sand);
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: .35rem;
  font-weight: 850;
}

.is-facebook-review .final-review-story-avatar {
  border-color: white;
  background: #1877f2;
  box-shadow: 0 0 0 2px #1877f2;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.final-review-story-identity {
  min-width: 0;
}

.final-review-story-identity strong,
.final-review-story-identity small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.final-review-story-identity strong {
  font-size: .39rem;
}

.final-review-story-identity small {
  margin-top: 1px;
  color: rgba(255,255,255,.82);
  font-size: .31rem;
}

.final-review-story-controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.final-review-story-controls i {
  color: white;
  font-size: .45rem;
  font-style: normal;
  letter-spacing: .06em;
}

.final-review-screen.is-story-review .final-review-story-bottom {
  bottom: 0;
  height: 17%;
  justify-content: flex-end;
  background: linear-gradient(0deg, rgba(5,10,8,.45), transparent);
}

.final-review-story-bottom > span {
  min-width: 0;
  flex: 1;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 16px;
  font-size: .39rem;
}

.final-review-story-bottom i {
  font-style: normal;
}

.final-review-screen.is-facebook-review.is-story-review .final-review-story-bottom > span {
  background: rgba(20,20,20,.24);
}

.final-review-home-indicator {
  position: absolute;
  z-index: 18;
  bottom: 7px;
  left: 50%;
  width: 92px;
  height: 4px;
  border-radius: 4px;
  background: currentColor;
  opacity: .82;
  transform: translateX(-50%);
}

.final-review-panel {
  display: grid;
  gap: 18px;
}

.final-review-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.final-review-tabs button {
  padding: 7px 9px;
  border: 1px solid #d1d5ce;
  border-radius: 17px;
  background: white;
  color: #687169;
  font-size: .5rem;
  font-weight: 800;
}

.final-review-tabs button.is-active {
  border-color: var(--forest);
  background: var(--forest);
  color: white;
}

.final-review-checks {
  display: grid;
  gap: 8px;
}

.final-review-checks > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  padding: 11px;
  border: 1px solid #dfe3dc;
  border-radius: 10px;
  background: white;
}

.final-review-checks > div > span {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 50%;
  background: #e6f0e5;
  color: #4d7558;
  font-size: .55rem;
  font-weight: 900;
}

.final-review-checks p,
.final-review-note p {
  margin: 0;
}

.final-review-checks strong,
.final-review-checks small {
  display: block;
}

.final-review-checks strong {
  color: var(--ink);
  font-size: .58rem;
}

.final-review-checks small {
  margin-top: 2px;
  color: var(--muted);
  font-size: .48rem;
  line-height: 1.4;
}

.final-review-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  padding: 11px;
  border-radius: 9px;
  background: #f6efe5;
  color: #77695d;
}

.final-review-note > span {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid #c8a77f;
  border-radius: 50%;
  font-size: .48rem;
}

.final-review-note p {
  font-size: .49rem;
  line-height: 1.45;
}

.final-review-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

.modal-backdrop.is-visible .publish-modal {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: 13px;
  right: 14px;
  border: 0;
  background: transparent;
  color: #999;
  font-size: 1.4rem;
}

.publish-animation {
  position: relative;
  display: grid;
  width: 92px;
  height: 92px;
  margin: 5px auto 24px;
  place-items: center;
}

.publish-ring {
  position: absolute;
  border: 1px solid #b5c9b4;
  border-radius: 50%;
}

.ring-one {
  inset: 0;
  animation: spin 4s linear infinite;
}

.ring-one::after,
.ring-two::after {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--terracotta);
  content: "";
}

.ring-one::after { top: 8px; right: 13px; }
.ring-two { inset: 13px; border-color: #dcc9b5; animation: spin 3s linear reverse infinite; }
.ring-two::after { bottom: 1px; left: 24px; background: var(--forest); }

.publish-center {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: var(--forest);
  color: white;
}

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

.publish-modal > p:not(.eyebrow) {
  color: var(--muted);
  font-size: .7rem;
}

.publish-progress {
  height: 5px;
  margin: 22px 0;
  overflow: hidden;
  border-radius: 5px;
  background: #e5e4dc;
}

.publish-progress span {
  display: block;
  width: 3%;
  height: 100%;
  border-radius: inherit;
  background: var(--forest);
  transition: 500ms ease;
}

.publish-status-list {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.publish-status-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f2f1eb;
  font-size: .65rem;
  text-align: left;
}

.publish-status-item span:last-child {
  margin-left: auto;
  color: var(--muted);
}

.publish-status-item.is-done span:last-child {
  color: #4c7858;
  font-weight: 750;
}

.publish-status-item.is-failed {
  background: #f9ece8;
}

.publish-status-item.is-failed span:last-child {
  max-width: 66%;
  color: #9a493d;
  font-weight: 720;
  line-height: 1.35;
  text-align: right;
}

.hidden {
  display: none !important;
}

.video-upload-zone {
  display: grid;
  min-height: 188px;
  place-items: center;
}

.video-upload-copy {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

.video-upload-copy small {
  color: var(--muted);
  font-size: .61rem;
}

.video-upload-copy .upload-action {
  margin-top: 4px;
}

.video-file-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.video-file-card {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}

.video-file-card video {
  width: 68px;
  height: 52px;
  border-radius: 7px;
  background: var(--ink);
  object-fit: cover;
}

.video-file-card span,
.video-file-card strong,
.video-file-card small {
  display: block;
  min-width: 0;
}

.video-file-card strong {
  overflow: hidden;
  font-size: .66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-file-card small {
  margin-top: 3px;
  color: var(--muted);
  font-size: .56rem;
}

.video-file-card button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: #eceae3;
  color: #7a7e77;
}

.video-social-preview {
  position: absolute;
  inset: 0;
  display: none;
  background: var(--ink);
}

.video-social-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-social-preview > span {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 9px;
  border-radius: 20px;
  background: rgba(16, 38, 32, .8);
  color: white;
  font-size: .55rem;
  font-weight: 750;
}

.preview-photo.is-video .video-social-preview {
  display: block;
}

.preview-photo.is-video .preview-watermark {
  z-index: 3;
}

.summary-thumb.is-video,
.video-library-image {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #355f52, #122f27) !important;
}

.summary-thumb.is-video::after,
.video-library-image::after {
  content: "▷";
  color: white;
  font-size: 2.2rem;
}

.consent-record {
  display: block;
  margin-top: 10px;
  color: #7f877f;
  font-size: .56rem;
  line-height: 1.5;
}

.consent-record.is-recorded {
  color: #4f765b;
  font-weight: 650;
}

.library-card[data-post-insights],
.post-row[data-post-insights] {
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.library-card[data-post-insights]:hover,
.library-card[data-post-insights]:focus-visible {
  transform: translateY(-3px);
  outline: none;
  box-shadow: 0 18px 45px rgba(23, 60, 49, .14);
}

.post-row[data-post-insights]:hover,
.post-row[data-post-insights]:focus-visible {
  outline: none;
  background: #f3f4ed;
}

.calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .65fr);
  gap: 18px;
}

.calendar-card,
.calendar-insights,
.pricing-card,
.current-plan-banner,
.detail-modal {
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.calendar-card,
.calendar-insights {
  border-radius: 15px;
}

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

.calendar-toolbar h2 {
  margin: 0;
  text-transform: capitalize;
}

.calendar-arrow {
  position: static;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-weekdays {
  padding: 12px 9px 7px;
  color: #8b908a;
  font-size: .54rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

.calendar-grid {
  padding: 0 9px 9px;
}

.calendar-day {
  min-width: 0;
  min-height: 112px;
  padding: 8px;
  overflow: hidden;
  border: 1px solid #ebe8df;
  background: #fffefb;
  text-align: left;
}

.calendar-day:nth-child(-n+7) {
  border-top-width: 1px;
}

.calendar-day:hover,
.calendar-day:focus-visible,
.calendar-day.is-selected {
  position: relative;
  z-index: 2;
  border-color: #8fa99a;
  outline: none;
  background: #f1f4ee;
}

.calendar-day.is-outside {
  background: #f5f3ed;
  color: #afb2ad;
}

.day-number {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
  font-size: .62rem;
  font-weight: 750;
}

.day-number small {
  padding: 3px 5px;
  border-radius: 10px;
  background: var(--forest);
  color: white;
  font-size: .43rem;
}

.day-events {
  display: grid;
  gap: 4px;
}

.calendar-event {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px;
  padding: 5px 6px;
  overflow: hidden;
  border-radius: 6px;
  background: #edf1e9;
  color: var(--ink);
  font-size: .49rem;
  font-weight: 700;
  line-height: 1.25;
}

.calendar-event > i,
.event-dot {
  width: 6px;
  height: 6px;
  margin-top: 1px;
  border-radius: 50%;
  background: #548063;
}

.calendar-event small {
  grid-column: 2;
  color: #788178;
  font-size: .43rem;
  font-weight: 500;
}

.calendar-event.scheduled {
  background: #f3e9dd;
}

.calendar-event.scheduled > i,
.event-dot.scheduled {
  background: var(--terracotta);
}

.calendar-event.draft {
  background: #eceae6;
}

.calendar-event.draft > i,
.event-dot.draft {
  background: #9a9c98;
}

.calendar-insights {
  align-self: start;
  padding: 24px;
}

.live-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.live-heading h2 {
  margin: 0;
}

.live-dot {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: #5d9f68;
  box-shadow: 0 0 0 6px rgba(93, 159, 104, .12);
}

.insight-intro {
  color: var(--muted);
  font-size: .65rem;
}

.best-time-list {
  display: grid;
  gap: 8px;
  margin: 20px 0;
}

.best-time-list article {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid #e7e5de;
  border-radius: 10px;
  background: #fbfaf6;
}

.best-time-list i {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 8px;
}

.best-time-list strong,
.best-time-list small {
  display: block;
}

.best-time-list strong {
  font-family: Georgia, serif;
  font-size: 1.1rem;
}

.best-time-list small {
  margin-top: 2px;
  color: var(--muted);
  font-size: .5rem;
}

.best-time-list em {
  color: #4f765b;
  font-size: .58rem;
  font-style: normal;
  font-weight: 800;
}

.calendar-estimate-empty {
  padding: 22px 18px;
  border: 1px dashed #d8ddd4;
  border-radius: 12px;
  background: #fbfaf6;
  text-align: center;
}

.calendar-estimate-empty > span {
  display: grid;
  width: 38px;
  height: 38px;
  margin: 0 auto 10px;
  place-items: center;
  border-radius: 50%;
  background: var(--sage-pale);
  color: var(--forest);
}

.calendar-estimate-empty strong {
  color: var(--ink);
  font-family: inherit;
  font-size: .66rem;
}

.calendar-estimate-empty p {
  margin: 6px auto 0;
  color: var(--muted);
  font-size: .55rem;
  line-height: 1.5;
}

.estimate-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 13px;
  border-radius: 9px;
  background: #eef2eb;
}

.estimate-note > span {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 1px solid #9db2a1;
  border-radius: 50%;
  font-size: .59rem;
  font-weight: 800;
}

.estimate-note p,
.estimate-note strong {
  display: block;
  margin: 0;
}

.estimate-note p {
  color: var(--muted);
  font-size: .56rem;
  line-height: 1.55;
}

.estimate-note strong {
  margin-bottom: 2px;
  color: var(--ink);
}

.selected-day-panel {
  margin-top: 20px;
  padding-top: 19px;
  border-top: 1px solid var(--line);
}

.selected-day-panel h3 {
  text-transform: capitalize;
}

.selected-day-panel > p:not(.eyebrow) {
  min-height: 43px;
  color: var(--muted);
  font-size: .62rem;
}

.calendar-legend {
  display: flex;
  gap: 18px;
  margin-top: 13px;
  color: var(--muted);
  font-size: .56rem;
}

.calendar-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.event-dot.published {
  background: #548063;
}

.subscription-header {
  align-items: flex-end;
}

.billing-toggle {
  display: flex;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #eceae4;
}

.billing-toggle button {
  padding: 9px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: .59rem;
  font-weight: 750;
}

.billing-toggle button.is-active {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 3px 9px rgba(23, 60, 49, .08);
}

.current-plan-banner {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 17px 20px;
  border-radius: 13px;
}

.current-plan-banner > span {
  color: var(--muted);
  font-size: .58rem;
  text-transform: uppercase;
}

.current-plan-banner > strong {
  padding: 5px 9px;
  border-radius: 20px;
  background: var(--sage-pale);
  font-size: .7rem;
}

.current-plan-banner p {
  margin: 0;
  color: var(--muted);
  font-size: .63rem;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 17px;
  align-items: stretch;
}

.pricing-card {
  position: relative;
  display: flex;
  min-height: 480px;
  flex-direction: column;
  padding: 27px;
  border-radius: 15px;
}

.pricing-card h2 {
  font-family: Georgia, serif;
  font-size: 2rem;
  font-weight: 500;
}

.pricing-card > p:not(.eyebrow) {
  color: var(--muted);
  font-size: .66rem;
}

.pricing-card .price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 8px 0 15px;
}

.price strong {
  font-family: Georgia, serif;
  font-size: 2rem;
  font-weight: 500;
}

.price span {
  color: var(--muted);
  font-size: .52rem;
}

.pricing-card ul {
  display: grid;
  gap: 11px;
  margin: 15px 0 25px;
  padding: 0;
  list-style: none;
}

.pricing-card li {
  position: relative;
  padding-left: 20px;
  font-size: .63rem;
  line-height: 1.5;
}

.pricing-card li::before {
  position: absolute;
  left: 0;
  color: #5d8466;
  content: "✓";
  font-weight: 800;
}

.pricing-card li.not-included {
  color: var(--muted);
  opacity: .72;
}

.pricing-card li.not-included::before {
  color: #a79f93;
  content: "—";
}

.plan-feature-lock {
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid #e5d4c5;
  border-radius: 12px;
  background: #fbf3e9;
}

.plan-feature-lock strong {
  display: block;
  font-size: .72rem;
}

.plan-feature-lock p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .65rem;
  line-height: 1.45;
}

.plan-voice-setting.is-plan-locked .tone-choices,
.plan-voice-setting.is-plan-locked .voice-dna-fields {
  opacity: .48;
}

.pricing-card > button {
  margin-top: auto;
}

.featured-price {
  transform: translateY(-6px);
  border: 2px solid var(--forest);
  box-shadow: 0 22px 65px rgba(23, 60, 49, .15);
}

.recommended-plan {
  position: absolute;
  top: -12px;
  right: 20px;
  padding: 6px 10px;
  border-radius: 20px;
  background: var(--forest);
  color: white;
  font-size: .5rem;
  font-weight: 850;
  letter-spacing: .08em;
}

.pricing-note {
  margin-top: 18px;
  color: var(--muted);
  font-size: .58rem;
  text-align: center;
}

.detail-modal {
  position: relative;
  width: min(760px, 100%);
  max-height: calc(100vh - 40px);
  padding: 31px;
  overflow-y: auto;
  transform: translateY(12px);
  border-radius: 17px;
  transition: 220ms ease;
}

.modal-backdrop.is-visible .detail-modal {
  transform: translateY(0);
}

.modal-subtitle,
.detail-lead {
  color: var(--muted);
  font-size: .7rem;
}

.insights-modal {
  width: min(1080px, 100%);
}

.post-content-inspector {
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr);
  gap: 20px;
  align-items: stretch;
  margin-top: 22px;
}

.published-post-preview,
.ai-copy-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fffefb;
}

.published-post-preview {
  display: flex;
  flex-direction: column;
  padding: 16px 18px 14px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.95), transparent 42%),
    #e8ebe6;
}

.insight-phone-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.insight-phone-heading small,
.insight-phone-heading strong {
  display: block;
}

.insight-phone-heading small {
  color: #7a8980;
  font-size: .45rem;
  font-weight: 900;
  letter-spacing: .11em;
}

.insight-phone-heading strong {
  margin-top: 3px;
  color: var(--forest);
  font-size: .67rem;
}

.insight-phone-heading em {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 15px;
  background: rgba(236, 247, 235, .92);
  color: #3f6d4d;
  font-size: .48rem;
  font-style: normal;
  font-weight: 850;
}

.insight-phone-heading em i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #36a45e;
  box-shadow: 0 0 0 3px rgba(54,164,94,.14);
}

.insight-phone-heading em.is-scheduled {
  background: #edf2f8;
  color: #496780;
}

.insight-phone-heading em.is-scheduled i {
  background: #6b89a4;
  box-shadow: 0 0 0 3px rgba(107,137,164,.14);
}

.insight-phone-heading em.is-draft {
  background: #f2eee5;
  color: #7d715f;
}

.insight-phone-heading em.is-draft i {
  background: #aa987e;
  box-shadow: none;
}

.insight-channel-phone {
  width: min(278px, 100%);
}

.insight-phone-media {
  background-position: center;
  background-size: cover;
  touch-action: pan-y;
}

.insight-phone-media.is-carousel {
  cursor: grab;
}

.insight-phone-media.is-carousel:active {
  cursor: grabbing;
}

.insight-phone-media > video {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.insight-phone-media.is-video > video {
  display: block;
}

.insight-phone-media.is-before-after .final-review-before-after {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.insight-phone-note {
  max-width: 310px;
  margin: 12px auto 0;
  color: #68766e;
  font-size: .52rem;
  line-height: 1.5;
  text-align: center;
}

.insight-phone-caption {
  max-height: 72px;
  white-space: pre-line;
}

.final-review-screen.is-published-preview .final-review-feed-crop,
.final-review-screen.is-published-preview .final-review-story-safe {
  display: none;
}

.final-review-screen.is-linkedin-review:not(.is-story-review) {
  display: flex;
  flex-direction: column;
  background: #f3f2ef;
  color: #191919;
}

.final-review-screen.is-linkedin-review:not(.is-story-review) .final-review-status,
.final-review-screen.is-linkedin-review:not(.is-story-review) .final-review-app-head {
  flex: 0 0 auto;
  background: white;
}

.final-review-screen.is-linkedin-review:not(.is-story-review) .final-review-status {
  order: 0;
}

.final-review-screen.is-linkedin-review:not(.is-story-review) .final-review-app-head {
  order: 1;
}

.final-review-screen.is-linkedin-review:not(.is-story-review) .final-review-avatar {
  border-radius: 5px;
  background: #0a66c2;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.final-review-screen.is-linkedin-review:not(.is-story-review) .final-review-caption {
  order: 2;
  max-height: 70px;
  padding: 7px 10px 9px;
  background: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: .41rem;
  line-height: 1.45;
}

.final-review-screen.is-linkedin-review:not(.is-story-review) .final-review-caption strong {
  display: none;
}

.final-review-screen.is-linkedin-review:not(.is-story-review) .final-review-media {
  order: 3;
  flex: 0 0 auto;
}

.final-review-screen.is-linkedin-review:not(.is-story-review) .final-review-facebook-reactions {
  order: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid #e1e1df;
  background: white;
  color: #666;
  font-size: .36rem;
}

.final-review-screen.is-linkedin-review:not(.is-story-review) .final-review-feed-actions {
  order: 5;
  justify-content: space-around;
  gap: 2px;
  padding: 6px 4px 9px;
  background: white;
  color: #5f5f5f;
  font-family: Arial, Helvetica, sans-serif;
  font-size: .36rem;
  font-weight: 700;
}

.final-review-screen.is-linkedin-review:not(.is-story-review) .final-review-feed-actions span {
  margin: 0;
}

.insight-media {
  position: relative;
  display: grid;
  min-height: 275px;
  place-items: end start;
  padding: 14px;
  background: linear-gradient(145deg, #c9b19d, #775242);
  background-position: center;
  background-size: cover;
}

.insight-media.is-carousel {
  cursor: grab;
  touch-action: pan-y;
}

.insight-media.is-carousel:active {
  cursor: grabbing;
}

.insight-media-brand {
  position: relative;
  z-index: 3;
  padding: 6px 9px;
  border-radius: 20px;
  background: rgba(20, 50, 41, .78);
  color: white;
  font-size: .47rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.insight-carousel-button {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  background: rgba(20, 50, 41, .72);
  color: white;
  font-family: Arial, sans-serif;
  font-size: 1.45rem;
  transform: translateY(-50%);
  backdrop-filter: blur(9px);
}

.insight-carousel-button[hidden],
.insight-carousel-count[hidden],
.insight-carousel-dots[hidden] {
  display: none !important;
}

.insight-phone-media .insight-carousel-button {
  width: 31px;
  height: 31px;
  border-color: rgba(255,255,255,.82);
  font-size: 1.12rem;
}

.insight-carousel-previous {
  left: 12px;
}

.insight-carousel-next {
  right: 12px;
}

.insight-carousel-count {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  padding: 6px 9px;
  border-radius: 16px;
  background: rgba(20, 50, 41, .78);
  color: white;
  font-size: .5rem;
  font-weight: 850;
  backdrop-filter: blur(8px);
}

.insight-phone-media .insight-carousel-count {
  top: 9px;
  right: 9px;
  left: auto;
  padding: 5px 7px;
  font-size: .4rem;
}

.insight-carousel-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  z-index: 4;
  display: flex;
  gap: 5px;
  transform: translateX(-50%);
}

.insight-carousel-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .56);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
}

.insight-carousel-dots button.is-active {
  width: 18px;
  border-radius: 7px;
  background: white;
}

.ai-copy-panel {
  padding: 20px;
}

.ai-copy-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ai-copy-heading h3 {
  margin-top: 7px;
  font-family: Georgia, serif;
  font-size: 1.35rem;
  font-weight: 500;
}

.ai-written-badge {
  color: #5d7c66;
  font-size: .48rem;
  font-weight: 850;
  letter-spacing: .08em;
}

.copy-post-button {
  flex: 0 0 auto;
  padding: 8px 11px;
  font-size: .56rem;
}

.insight-platform-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin: 14px 0 10px;
  padding: 4px;
  border-radius: 9px;
  background: #eeece6;
}

.insight-platform-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #768078;
  font-size: .56rem;
  font-weight: 750;
}

.insight-platform-tabs button i {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 6px;
  font-size: .48rem;
}

.insight-platform-tabs button.is-active {
  border-color: #d7ddd3;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 3px 10px rgba(23, 60, 49, .07);
}

.insight-platform-tabs button.is-unpublished:not(.is-active) {
  opacity: .6;
}

.insight-placement-tabs {
  display: flex;
  gap: 6px;
  min-height: 33px;
  margin: 0 0 10px;
}

.insight-placement-tabs:empty {
  display: none;
}

.insight-placement-tabs button {
  padding: 7px 10px;
  border: 1px solid #d8ddd5;
  border-radius: 17px;
  background: #fbfbf7;
  color: #6f7c73;
  font-size: .51rem;
  font-weight: 800;
}

.insight-placement-tabs button.is-active {
  border-color: var(--forest);
  background: var(--forest);
  color: white;
}

.platform-publication-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 32px;
  font-size: .52rem;
}

.platform-publication-status > span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
}

.platform-publication-status > span i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.platform-is-published {
  color: #4f765b;
}

.platform-is-published i {
  background: #5c9167;
}

.platform-is-scheduled {
  color: #4e6e8d;
}

.platform-is-scheduled i {
  background: #668cb1;
}

.platform-is-draft {
  color: #8a6d4d;
}

.platform-is-draft i {
  background: #c08a53;
}

.platform-publication-status small {
  color: var(--muted);
  font-size: .48rem;
  text-align: right;
}

.full-ai-copy {
  min-height: 210px;
  max-height: 310px;
  margin-top: 10px;
  padding: 16px;
  overflow-y: auto;
  border: 1px solid #e3e1d9;
  border-radius: 10px;
  background: #f8f6f0;
  color: #34473e;
  font-family: Georgia, serif;
  font-size: .72rem;
  line-height: 1.65;
  white-space: pre-wrap;
}

.insight-section-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 25px 0 0;
  color: #888f87;
  font-size: .49rem;
  font-weight: 850;
  letter-spacing: .09em;
}

.insight-section-divider::after {
  height: 1px;
  flex: 1;
  background: var(--line);
  content: "";
}

.insight-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin: 20px 0;
}

.insight-kpis article {
  padding: 15px;
  border-radius: 10px;
  background: #f2f3ed;
}

.insight-kpis span,
.insight-kpis strong,
.insight-kpis small {
  display: block;
}

.insight-kpis span {
  color: var(--muted);
  font-size: .54rem;
}

.insight-kpis strong {
  margin: 5px 0;
  font-family: Georgia, serif;
  font-size: 1.65rem;
  font-weight: 500;
}

.insight-kpis small {
  color: #55765f;
  font-size: .49rem;
}

.insight-chart {
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 11px;
}

.chart-heading {
  display: flex;
  justify-content: space-between;
  font-size: .62rem;
}

.chart-heading span {
  color: var(--muted);
}

.performance-bars {
  display: grid;
  height: 150px;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: 10px;
  margin-top: 15px;
}

.performance-bars > span {
  position: relative;
  display: block;
  height: 100%;
  padding-bottom: 18px;
  text-align: center;
}

.performance-day {
  --bar-height: 4%;
  cursor: default;
  outline: none;
}

.performance-day[data-height="4"] { --bar-height: 4%; }
.performance-day[data-height="18"] { --bar-height: 18%; }
.performance-day[data-height="22"] { --bar-height: 22%; }
.performance-day[data-height="32"] { --bar-height: 32%; }
.performance-day[data-height="34"] { --bar-height: 34%; }
.performance-day[data-height="39"] { --bar-height: 39%; }
.performance-day[data-height="43"] { --bar-height: 43%; }
.performance-day[data-height="44"] { --bar-height: 44%; }
.performance-day[data-height="48"] { --bar-height: 48%; }
.performance-day[data-height="54"] { --bar-height: 54%; }
.performance-day[data-height="56"] { --bar-height: 56%; }
.performance-day[data-height="58"] { --bar-height: 58%; }
.performance-day[data-height="61"] { --bar-height: 61%; }
.performance-day[data-height="63"] { --bar-height: 63%; }
.performance-day[data-height="68"] { --bar-height: 68%; }
.performance-day[data-height="71"] { --bar-height: 71%; }
.performance-day[data-height="74"] { --bar-height: 74%; }
.performance-day[data-height="76"] { --bar-height: 76%; }
.performance-day[data-height="82"] { --bar-height: 82%; }
.performance-day[data-height="88"] { --bar-height: 88%; }
.performance-day[data-height="92"] { --bar-height: 92%; }
.performance-day[data-height="94"] { --bar-height: 94%; }

.bar-tooltip {
  position: absolute;
  z-index: 8;
  bottom: calc(24px + var(--bar-height));
  left: 50%;
  width: max-content;
  min-width: 112px;
  padding: 9px 11px;
  transform: translate(-50%, 7px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 9px;
  background: var(--ink);
  color: white;
  box-shadow: 0 10px 28px rgba(13, 39, 31, .22);
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transition: opacity 140ms ease, transform 140ms ease;
}

.bar-tooltip::after {
  position: absolute;
  bottom: -5px;
  left: calc(50% - 5px);
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background: var(--ink);
  content: "";
}

.bar-tooltip small,
.bar-tooltip strong,
.bar-tooltip em {
  position: relative;
  z-index: 1;
  display: block;
}

.bar-tooltip small {
  color: rgba(255,255,255,.62);
  font-size: .43rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bar-tooltip strong {
  margin: 2px 0 1px;
  font-family: Georgia, serif;
  font-size: 1.1rem;
  font-weight: 500;
}

.bar-tooltip em {
  color: rgba(255,255,255,.72);
  font-size: .46rem;
  font-style: normal;
}

.performance-day:hover,
.performance-day:focus-visible {
  z-index: 10;
}

.performance-day:hover .bar-tooltip,
.performance-day:focus-visible .bar-tooltip {
  transform: translate(-50%, 0);
  opacity: 1;
}

.performance-day:hover > i,
.performance-day:focus-visible > i {
  background: linear-gradient(#b67b63, #8e523f);
  box-shadow: 0 0 0 3px rgba(187,118,94,.13);
}

.performance-bars i {
  position: absolute;
  right: 0;
  bottom: 18px;
  left: 0;
  display: block;
  height: var(--bar-height);
  min-height: 4px;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(#87a68d, #284f42);
}

.performance-bars > span > small:last-child {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  color: var(--muted);
  font-size: .45rem;
}

.platform-breakdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 13px 0;
}

.platform-breakdown article {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.platform-breakdown i {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 7px;
  font-size: .55rem;
}

.platform-breakdown strong,
.platform-breakdown span,
.platform-breakdown small {
  grid-column: 2;
  font-size: .52rem;
}

.platform-breakdown strong {
  grid-row: 1;
}

.platform-breakdown span,
.platform-breakdown small {
  color: var(--muted);
}

.estimate-note.compact {
  margin-top: 10px;
}

.detail-region {
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 9px;
  border-radius: 20px;
  background: var(--sage-pale);
  color: var(--forest);
  font-size: .51rem;
  font-weight: 850;
  letter-spacing: .08em;
}

.detail-region.is-us {
  background: #e9edf5;
  color: #35587a;
}

.inspiration-detail-modal h2 {
  font-family: Georgia, serif;
  font-size: 2.2rem;
  font-weight: 500;
  letter-spacing: -.035em;
}

.inspiration-detail-modal {
  width: min(850px, 100%);
}

.inspiration-description-box {
  margin: 20px 0 14px;
  padding: 20px 22px;
  border: 1px solid #d8ded3;
  border-radius: 12px;
  background: #f7f8f3;
}

.inspiration-description-box > span,
.inspiration-advice-grid span {
  color: #667f70;
  font-size: .49rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.inspiration-description-box p {
  margin: 8px 0 0;
  color: #29463c;
  font-family: Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.55;
}

.campaign-nav-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  color: #cfe3d3;
  font-size: .48rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.campaign-nav-live i,
.campaigns-sync-pill i,
.campaign-detail-brand span i,
.campaign-card-image em i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6fc08a;
  box-shadow: 0 0 0 3px rgba(111, 192, 138, .14);
}

.campaigns-wrap {
  max-width: 1240px;
}

.campaigns-partner-bar {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 34px;
  padding: 15px 20px;
  border: 1px solid #ddd7cc;
  border-radius: 13px;
  background: #fffefb;
}

.campaigns-partner-brand {
  display: flex;
  align-items: center;
  gap: 18px;
}

.campaigns-partner-label {
  padding-right: 18px;
  border-right: 1px solid #ddd7cc;
  color: var(--muted);
  font-size: .49rem;
  font-weight: 900;
  letter-spacing: .16em;
}

.campaigns-partner-brand img,
.campaign-detail-brand img {
  display: block;
  width: 155px;
  height: auto;
  object-fit: contain;
}

.campaigns-sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 30px;
  background: #edf5ee;
  color: #2e6245;
  font-size: .52rem;
  font-weight: 800;
}

.campaigns-header {
  margin-bottom: 24px;
}

.campaigns-refresh {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.campaigns-refresh.is-loading span {
  animation: spin 900ms linear infinite;
}

.campaigns-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid #d9dfd5;
  border-radius: 11px;
  background: #f5f7f2;
}

.campaigns-status.has-success {
  border-color: #cfe0d0;
  background: #eef6ef;
}

.campaigns-status.has-warning {
  border-color: #e5d1bb;
  background: #fbf4ea;
}

.campaigns-status-icon {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
  font-size: .64rem;
  font-weight: 900;
}

.campaigns-status strong,
.campaigns-status small {
  display: block;
}

.campaigns-status strong {
  margin-bottom: 3px;
  color: var(--forest);
  font-size: .63rem;
}

.campaigns-status small {
  color: var(--muted);
  font-size: .53rem;
  line-height: 1.45;
}

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

.campaign-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #dcd8ce;
  border-radius: 15px;
  background: #fffefb;
  box-shadow: 0 9px 32px rgba(30, 55, 45, .045);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.campaign-card:hover {
  transform: translateY(-3px);
  border-color: #b9cabb;
  box-shadow: 0 18px 42px rgba(30, 55, 45, .1);
}

.campaign-card-open {
  display: block;
  width: 100%;
  flex: 1;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.campaign-card-open:focus-visible {
  outline: 3px solid rgba(54, 126, 196, .35);
  outline-offset: -3px;
}

.campaign-card-image {
  position: relative;
  display: grid;
  aspect-ratio: 16 / 9.7;
  overflow: hidden;
  place-items: center;
  background:
    radial-gradient(circle at 22% 30%, rgba(255,255,255,.8), transparent 30%),
    linear-gradient(145deg, #dce8dd, #d5bfa9);
}

.campaign-card-image img {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 280ms ease;
}

.campaign-card:hover .campaign-card-image img {
  transform: scale(1.025);
}

.campaign-card-image-fallback {
  color: rgba(23, 60, 49, .65);
  font-family: Georgia, serif;
  font-size: 2.3rem;
}

.campaign-card-image em {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 20px;
  background: rgba(255, 254, 251, .94);
  color: var(--forest);
  box-shadow: 0 5px 18px rgba(15, 43, 34, .12);
  font-size: .48rem;
  font-style: normal;
  font-weight: 850;
}

.campaign-card-copy {
  padding: 21px 21px 19px;
}

.campaign-card-source {
  display: block;
  margin-bottom: 8px;
  color: #698071;
  font-size: .47rem;
  font-weight: 900;
  letter-spacing: .13em;
}

.campaign-card-copy h2 {
  margin: 0 0 9px;
  color: var(--forest);
  font-family: Georgia, serif;
  font-size: 1.26rem;
  font-weight: 500;
  letter-spacing: -.025em;
}

.campaign-card-copy p {
  min-height: 58px;
  margin: 0 0 17px;
  color: var(--muted);
  font-size: .61rem;
  line-height: 1.58;
}

.campaign-card-copy > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid #ebe7df;
  font-size: .51rem;
}

.campaign-card-copy > div span {
  color: var(--muted);
}

.campaign-card-copy > div strong {
  color: var(--forest);
}

.campaign-card-external {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid #e8e4dc;
  background: #f7f5f0;
  color: #37584b;
  font-size: .52rem;
  font-weight: 800;
  text-decoration: none;
}

.campaign-card-external:hover {
  background: #eef3ed;
}

.campaign-card-skeleton {
  min-height: 370px;
  padding: 18px;
}

.campaign-card-skeleton div,
.campaign-card-skeleton span {
  display: block;
  border-radius: 7px;
  background: linear-gradient(100deg, #ece9e1 30%, #f7f5ef 50%, #ece9e1 70%);
  background-size: 300% 100%;
  animation: campaign-loading 1.4s ease infinite;
}

.campaign-card-skeleton div {
  height: 190px;
  margin: -18px -18px 24px;
  border-radius: 0;
}

.campaign-card-skeleton span {
  height: 12px;
  margin-bottom: 13px;
}

.campaign-card-skeleton span:nth-child(2) { width: 38%; }
.campaign-card-skeleton span:nth-child(3) { width: 74%; height: 22px; }
.campaign-card-skeleton span:nth-child(4) { width: 92%; height: 42px; }

@keyframes campaign-loading {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

.campaigns-empty {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 15px;
  padding: 22px;
  border: 1px solid #ddd7cc;
  border-radius: 13px;
  background: #fffefb;
}

.campaigns-empty[hidden] {
  display: none;
}

.campaigns-empty > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: #eee5d9;
  color: var(--forest);
}

.campaigns-empty strong,
.campaigns-empty p {
  display: block;
}

.campaigns-empty strong {
  color: var(--forest);
  font-size: .68rem;
}

.campaigns-empty p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .56rem;
}

.campaigns-empty a {
  text-decoration: none;
}

.campaigns-source-note {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  margin-top: 22px;
  padding: 17px 18px;
  border-radius: 12px;
  background: #eaf0e8;
}

.campaigns-source-note > span,
.campaign-detail-note > span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid #9fb2a0;
  border-radius: 50%;
  color: var(--forest);
  font-family: Georgia, serif;
  font-size: .61rem;
  font-weight: 700;
}

.campaigns-source-note p {
  margin: 0;
  color: #557064;
  font-size: .54rem;
  line-height: 1.5;
}

.campaigns-source-note p strong {
  display: block;
  margin-bottom: 2px;
  color: var(--forest);
}

.campaigns-source-note a {
  color: var(--forest);
  font-size: .53rem;
  font-weight: 850;
}

.campaign-detail-modal {
  width: min(720px, 100%);
  background: var(--paper);
}

.campaign-detail-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: -6px 38px 20px 0;
}

.campaign-detail-brand span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #477158;
  font-size: .49rem;
  font-weight: 850;
}

.campaign-detail-hero {
  position: relative;
  display: grid;
  aspect-ratio: 16 / 7.5;
  overflow: hidden;
  margin-bottom: 24px;
  place-items: center;
  border-radius: 13px;
  background:
    radial-gradient(circle at 28% 26%, rgba(255,255,255,.86), transparent 28%),
    linear-gradient(135deg, #dfe9de, #d8c1ac);
}

.campaign-detail-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.campaign-detail-placeholder {
  color: rgba(23, 60, 49, .58);
  font-size: 3rem;
}

.campaign-detail-modal h2 {
  margin-bottom: 14px;
  color: var(--forest);
  font-family: Georgia, serif;
  font-size: clamp(1.8rem, 4vw, 2.65rem);
  font-weight: 500;
  letter-spacing: -.035em;
}

.campaign-detail-copy {
  padding: 18px 20px;
  border: 1px solid #d9ded5;
  border-radius: 11px;
  background: #f7f8f4;
}

.campaign-detail-copy p {
  margin: 0;
  color: #3e5b50;
  font-size: .68rem;
  line-height: 1.68;
}

.campaign-detail-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}

.campaign-detail-meta > span {
  padding: 13px 15px;
  border-radius: 9px;
  background: #f0ece4;
}

.campaign-detail-meta small,
.campaign-detail-meta strong {
  display: block;
}

.campaign-detail-meta small {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: .48rem;
}

.campaign-detail-meta strong {
  color: var(--forest);
  font-size: .63rem;
}

.campaign-detail-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: 9px;
  background: #eaf0e8;
}

.campaign-detail-note p {
  margin: 0;
  color: #557064;
  font-size: .52rem;
}

.campaign-detail-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

.campaign-detail-actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.inspiration-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.inspiration-facts > span {
  padding: 12px 14px;
  border-radius: 9px;
  background: #eef2ea;
}

.inspiration-facts small,
.inspiration-facts strong {
  display: block;
}

.inspiration-facts small {
  color: var(--muted);
  font-size: .45rem;
  font-weight: 850;
  letter-spacing: .09em;
}

.inspiration-facts strong {
  margin-top: 4px;
  font-size: .63rem;
}

.detail-section {
  margin: 22px 0;
  padding: 18px;
  border-radius: 11px;
  background: #f1f3ed;
}

.detail-section > strong {
  font-size: .69rem;
}

.detail-section ol,
.detail-section ul {
  display: grid;
  gap: 9px;
  margin-bottom: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: .64rem;
  line-height: 1.55;
}

.inspiration-why-section {
  margin-bottom: 10px;
  background: #edf3e9;
}

.inspiration-advice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-bottom: 18px;
}

.inspiration-advice-grid > div {
  padding: 16px;
  border: 1px solid #e0ddd4;
  border-radius: 10px;
  background: white;
}

.inspiration-advice-grid > div:last-child {
  background: #faf4ed;
}

.inspiration-advice-grid p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: .61rem;
  line-height: 1.55;
}

.caption-starter {
  padding: 17px;
  border-left: 3px solid var(--terracotta);
  background: #f7efe8;
}

.caption-starter span {
  color: #8b6759;
  font-size: .5rem;
  font-weight: 850;
  letter-spacing: .09em;
}

.caption-starter p {
  margin: 6px 0 0;
  font-family: Georgia, serif;
  font-size: 1.12rem;
  line-height: 1.4;
}

.detail-source {
  margin: 15px 0 20px;
  padding: 18px;
  border: 1px solid #dde1d8;
  border-radius: 11px;
  background: #fbfbf7;
}

.detail-source > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.detail-source > div:first-child strong {
  font-size: .68rem;
}

.detail-source > div:first-child small {
  color: var(--muted);
  font-size: .49rem;
}

.inspiration-source-list {
  display: grid;
  gap: 7px;
}

.inspiration-source-list a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 10px;
  padding: 11px 12px;
  border: 1px solid #e1e3dc;
  border-radius: 8px;
  background: white;
  color: var(--ink);
  text-decoration: none;
}

.inspiration-source-list a:hover {
  border-color: #b9c7b9;
  background: #f3f6f0;
}

.inspiration-source-list a strong {
  font-size: .58rem;
}

.inspiration-source-list a span {
  grid-row: span 2;
  color: var(--forest);
  font-size: .85rem;
}

.inspiration-source-list a small {
  color: var(--muted);
  font-size: .49rem;
  line-height: 1.45;
}

.mobile-nav {
  display: none;
}

@media (max-width: 1180px) {
  :root { --sidebar: 220px; }
  .template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .template-quick-edit { grid-template-columns: 1fr 1.5fr; }
  .template-quick-actions { grid-column: 1 / -1; grid-template-columns: auto auto; justify-content: flex-end; }
  .campaigns-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr 1fr; }
  .feature-card { grid-column: 1 / -1; }
  .content-grid { grid-template-columns: 1fr; }
  .idea-panel { display: grid; grid-template-columns: 220px 1fr; gap: 20px; }
  .idea-panel .idea-image { grid-row: span 4; height: 100%; margin: 0; }
  .idea-panel .wide { width: fit-content; }
  .calendar-layout { grid-template-columns: 1fr; }
  .calendar-insights { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .calendar-insights .best-time-list { grid-row: span 3; }
}

@media (max-width: 900px) {
  :root { --sidebar: 0px; }
  .sidebar {
    width: 250px;
    transform: translateX(-105%);
    transition: 220ms ease;
  }
  .sidebar.is-open { transform: translateX(0); box-shadow: 20px 0 55px rgba(0,0,0,.22); }
  .main-content { margin-left: 0; }
  .mobile-menu { display: grid; }
  .breadcrumb { display: none; }
  .topbar { padding: 0 20px; }
  .page-wrap { padding: 38px 24px 100px; }
  .form-grid, .publish-grid, .preview-layout, .featured-trend { grid-template-columns: 1fr; }
  .post-preview-card { position: relative; top: auto; }
  .post-type-grid { grid-template-columns: repeat(3, 1fr); }
  .image-mode-toggle { grid-template-columns: repeat(3, 1fr); }
  .featured-trend .trend-visual { min-height: 290px; }
  .library-grid, .idea-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .pricing-card:last-child { grid-column: 1 / -1; min-height: 410px; }
  .featured-price { transform: none; }
  .calendar-insights { display: block; }
  .post-content-inspector { grid-template-columns: 1fr; }
  .meta-connection-overview { grid-template-columns: auto 1fr; }
  .meta-overview-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .security-explainer { grid-template-columns: auto 1fr; }
  .security-explainer ul { grid-column: 1 / -1; }
  .go-live-banner { grid-template-columns: auto 1fr auto; }
  .go-live-account { grid-column: 2; justify-self: start; }
  .pilot-account-card { grid-template-columns: auto 1fr; }
  .pilot-account-card dl { grid-column: 1 / -1; }
  .settings-section { grid-template-columns: 1fr; gap: 14px; }
  .library-toolbar { align-items: stretch; flex-direction: column; }
  .library-view-controls { width: 100%; margin-left: 0; }
  .library-view-controls .search-box { flex: 1; width: auto; }
  .mobile-nav {
    position: fixed;
    z-index: 25;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 8px max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    border-top: 1px solid var(--line);
    background: rgba(255,253,248,.96);
    backdrop-filter: blur(12px);
  }
  .mobile-nav button {
    display: flex;
    min-height: 49px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #858b84;
    font-size: .54rem;
  }
  .mobile-nav button span { font-size: 1rem; }
  .mobile-nav button.is-active { background: #eef2ea; color: var(--ink); }
}

@media (min-width: 651px) and (max-width: 900px) {
  .graphic-live-card,
  .carousel-live-slide {
    position: sticky;
    top: 76px;
  }
}

@media (max-width: 650px) {
  .create-header-actions,
  .template-page-header .primary-button { width: 100%; }
  .create-header-actions > button { flex: 1 1 150px; }
  .template-quick-edit { grid-template-columns: 1fr; align-items: stretch; padding: 16px; }
  .template-quick-fields { grid-template-columns: 1fr; }
  .template-grid { grid-template-columns: 1fr; }
  .template-intro { padding: 16px; }
  .topbar { height: 60px; }
  .staff-add-row { grid-template-columns: 1fr; }
  .staff-add-row .outline-button { width: 100%; }
  .library-view-controls { align-items: stretch; flex-direction: column; }
  .library-sort { justify-content: space-between; }
  .library-view-controls .search-box { width: 100%; }
  .inspiration-facts, .inspiration-advice-grid { grid-template-columns: 1fr; }
  .detail-source > div:first-child { align-items: flex-start; flex-direction: column; }
  .platform-status > span:last-child { display: none; }
  .go-live-banner { grid-template-columns: auto 1fr; }
  .go-live-banner .outline-button { grid-column: 1 / -1; width: 100%; }
  .pilot-account-card { grid-template-columns: 1fr; }
  .pilot-account-lock { width: 38px; height: 38px; }
  .welcome-row, .standard-header, .create-header { align-items: flex-start; flex-direction: column; }
  .welcome-row .large, .standard-header .primary-button { width: 100%; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .feature-card { grid-template-columns: 1fr; min-height: 420px; }
  .post-type-grid { grid-template-columns: repeat(2, 1fr); }
  .post-type-grid button { min-height: 108px; }
  .offer-fields, .cancellation-fields, .campaign-fields { grid-template-columns: 1fr; }
  .image-mode-toggle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .universal-design-summary { grid-template-columns: auto minmax(0, 1fr) auto; }
  .universal-design-summary .graphic-ai-pill { display: none; }
  .universal-design-summary-copy > span { font-size: .54rem; }
  .stock-image-grid { grid-template-columns: repeat(2, 1fr); }
  .stock-selection-summary { grid-template-columns: 1fr; }
  .stock-brand-card { min-height: 235px; }
  .stock-selection-copy { min-height: 145px; }
  .stock-library-heading { align-items: flex-start; flex-direction: column; }
  .graphic-workshop-heading { align-items: flex-start; flex-direction: column; }
  .graphic-builder { grid-template-columns: 1fr; }
  .graphic-live-card,
  .carousel-live-slide { position: relative; top: auto; min-height: 0; }
  .carousel-builder { grid-template-columns: 1fr; }
  .carousel-workshop-heading { align-items: flex-start; flex-direction: column; }
  .insight-channel-phone { width: min(265px, 100%); }
  .published-post-preview { padding: 14px 10px; }
  .graphic-decoration-customize { grid-template-columns: 1fr; }
  .before-after-upload { grid-template-columns: 1fr 1fr; }
  .compact-upload { min-height: 240px; }
  .feature-copy { padding: 31px 28px 0; }
  .feature-art { min-height: 210px; }
  .phone-card { right: 50%; bottom: -70px; transform: translateX(50%) rotate(4deg); }
  .chip-one { right: 15%; top: 25px; }
  .chip-two { left: 12%; top: 120px; }
  .stat-card { min-height: 210px; }
  .idea-panel { display: block; }
  .idea-panel .idea-image { height: 160px; margin-bottom: 18px; }
  .post-row { grid-template-columns: 48px 1fr auto; }
  .post-metric, .post-row .published-pill { display: none; }
  .dashboard-post-empty { grid-template-columns: 34px 1fr; }
  .dashboard-post-empty .text-button { grid-column: 2; justify-self: start; }
  .stepper li { padding-right: 5px; }
  .stepper-action > div { display: none; }
  .stepper-action { justify-content: center; }
  .step-actions.split { gap: 8px; }
  .step-actions.split > * { flex: 1; }
  .generation-banner { align-items: flex-start; flex-direction: column; }
  .consent-warning-modal { padding: 30px 22px 22px; }
  .warning-modal-actions { flex-direction: column-reverse; }
  .warning-modal-actions button { width: 100%; }
  .final-review-modal { padding: 26px 18px 18px; }
  .final-review-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .final-review-layout { grid-template-columns: 1fr; padding: 16px; }
  .final-review-phone { width: min(270px, 100%); }
  .final-review-actions { flex-direction: column-reverse; }
  .final-review-actions button { width: 100%; }
  .caption-options { align-items: flex-start; flex-direction: column; gap: 10px; }
  .caption-ai-actions { align-items: stretch; flex-direction: column; }
  .caption-generate-button { width: 100%; }
  .channel-main { grid-template-columns: auto auto 1fr; }
  .channel-main em { display: none; }
  .channel-placement-options { padding-left: 55px; }
  .publish-summary { grid-template-columns: auto 1fr; }
  .summary-consent { grid-column: 1 / -1; padding: 12px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .filter-row { flex-wrap: wrap; }
  .search-box { width: 100%; margin: 6px 0 0; }
  .library-grid, .idea-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card:last-child { grid-column: auto; }
  .pricing-card { min-height: auto; }
  .campaigns-partner-bar { align-items: flex-start; flex-direction: column; }
  .campaigns-partner-brand { width: 100%; justify-content: space-between; }
  .campaigns-partner-label { padding-right: 10px; }
  .campaigns-grid { grid-template-columns: 1fr; }
  .campaign-card-copy p { min-height: 0; }
  .campaigns-empty { grid-template-columns: auto 1fr; }
  .campaigns-empty a { grid-column: 1 / -1; text-align: center; }
  .campaigns-source-note { grid-template-columns: auto 1fr; }
  .campaigns-source-note a { grid-column: 2; }
  .campaign-detail-brand { align-items: flex-start; flex-direction: column; }
  .campaign-detail-hero { aspect-ratio: 4 / 3; }
  .campaign-detail-meta { grid-template-columns: 1fr; }
  .campaign-detail-actions { flex-direction: column-reverse; }
  .campaign-detail-actions > * { justify-content: center; width: 100%; }
  .current-plan-banner { grid-template-columns: auto auto; }
  .current-plan-banner p, .current-plan-banner button { grid-column: 1 / -1; }
  .subscription-header { align-items: flex-start; }
  .billing-toggle { width: 100%; }
  .billing-toggle button { flex: 1; }
  .calendar-card { overflow-x: auto; }
  .calendar-toolbar, .calendar-weekdays, .calendar-grid { min-width: 720px; }
  .calendar-day { min-height: 100px; }
  .insight-kpis, .platform-breakdown { grid-template-columns: 1fr; }
  .detail-modal { padding: 26px 19px; }
  .ai-copy-heading { align-items: stretch; flex-direction: column; }
  .copy-post-button { width: 100%; }
  .insight-platform-tabs button { flex-direction: column; gap: 3px; padding: 5px 2px; }
  .platform-publication-status { align-items: flex-start; flex-direction: column; }
  .platform-publication-status small { text-align: left; }
  .inspiration-toolbar { align-items: flex-start; flex-direction: column; gap: 12px; }
  .inspiration-toolbar > div { display: flex; overflow-x: auto; width: 100%; padding-bottom: 5px; }
  .trend-content { padding: 30px 24px; }
  .meta-connection-overview { grid-template-columns: 1fr; }
  .meta-overview-icon { width: 44px; height: 44px; }
  .meta-overview-actions { grid-column: auto; justify-content: stretch; }
  .meta-overview-actions button { width: 100%; }
  .meta-page-options { grid-template-columns: 1fr; }
  .meta-page-picker-actions button { width: 100%; }
  .connection-card { grid-template-columns: auto 1fr; }
  .connection-action { grid-column: 1 / -1; justify-content: flex-end; }
  .security-explainer { grid-template-columns: 1fr; }
  .security-explainer ul { grid-template-columns: 1fr; }
  .settings-fields.two-col, .tone-choices, .brand-control-grid, .brand-look-options, .voice-dna-fields { grid-template-columns: 1fr; }
  .settings-fields .full, .voice-dna-fields .full { grid-column: auto; }
  .graphic-control-split { grid-template-columns: 1fr; }
  .toast { right: 12px; bottom: 76px; left: 12px; }
  .publish-modal { padding: 30px 20px 22px; }
}

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