@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500;6..96,600&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Manrope:wght@400;500;600&display=swap");

:root {
  color-scheme: light;
  --paper: #f3f0e8;
  --paper-soft: #ebe7dc;
  --cream: #fbf8f1;
  --ink: #263027;
  --muted: #716f66;
  --quiet: #a7a296;
  --moss: #66715c;
  --moss-deep: #394238;
  --sage: #c8d0bd;
  --blush: #d9b8ad;
  --rose: #a96f67;
  --butter: #e6d8ab;
  --line: rgba(38, 48, 39, 0.14);
  --line-strong: rgba(38, 48, 39, 0.28);
  --shadow: 0 18px 56px rgba(53, 57, 48, 0.08);
}

/* Company gifting program */
[data-view="dashboard"] > .view-header h1 {
  font-size: clamp(3.35rem, 5vw, 5.15rem);
  line-height: 0.9;
}

.program-grid {
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(280px, 0.9fr) minmax(360px, 1.25fr);
  gap: 14px;
  margin: 0 0 34px;
}

.program-panel {
  min-width: 0;
  min-height: 246px;
  padding: 22px;
  background: var(--paper-bright);
  border: 1px solid var(--ink);
  border-radius: 7px;
}

.coverage-panel {
  background: #e6eee8;
}

.spend-panel {
  background: #f3eee7;
}

.risk-panel {
  background: #f7f5f0;
}

.program-panel-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.program-panel-heading h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 740;
}

.program-panel-heading span {
  color: var(--muted);
  font-size: 0.64rem;
  white-space: nowrap;
}

.coverage-score {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

.coverage-score strong {
  font-size: clamp(2.8rem, 4vw, 4.1rem);
  font-weight: 720;
  line-height: 0.8;
}

.coverage-score p {
  max-width: 150px;
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.4;
}

.coverage-track {
  height: 7px;
  margin: 26px 0 18px;
  overflow: hidden;
  background: rgba(24, 33, 29, 0.12);
  border-radius: 2px;
}

.coverage-track span {
  display: block;
  width: 0;
  height: 100%;
  background: #315849;
  transition: width 280ms ease;
}

.coverage-breakdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
}

.coverage-breakdown div {
  padding-right: 8px;
  border-right: 1px solid rgba(24, 33, 29, 0.15);
}

.coverage-breakdown div + div {
  padding-left: 12px;
}

.coverage-breakdown div:last-child {
  border-right: 0;
}

.coverage-breakdown dt {
  color: var(--muted);
  font-size: 0.58rem;
}

.coverage-breakdown dd {
  margin: 5px 0 0;
  font-size: 1rem;
  font-weight: 720;
}

.team-spend-bars {
  display: grid;
  gap: 16px;
}

.team-spend-row {
  display: grid;
  grid-template-columns: minmax(72px, 0.65fr) minmax(80px, 1.35fr) auto;
  align-items: center;
  gap: 10px;
}

.team-spend-row > span,
.team-spend-row > strong {
  overflow: hidden;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-spend-row > strong {
  font-weight: 680;
}

.team-spend-row i {
  height: 8px;
  overflow: hidden;
  background: rgba(24, 33, 29, 0.1);
  border-radius: 2px;
}

.team-spend-row b {
  display: block;
  height: 100%;
  background: #b57567;
}

.risk-queue {
  display: grid;
}

.risk-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 45px;
  padding: 8px 0;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(24, 33, 29, 0.12);
  border-radius: 0;
}

.risk-row:hover {
  background: rgba(255, 255, 255, 0.54);
}

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

.risk-mark {
  width: 7px;
  height: 7px;
  background: #d49b55;
  border-radius: 50%;
}

.risk-row.urgent .risk-mark {
  background: #b65e52;
}

.risk-row > span:nth-child(2) {
  min-width: 0;
}

.risk-row strong,
.risk-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-row strong {
  font-size: 0.72rem;
}

.risk-row small,
.risk-row time {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.58rem;
}

.risk-row time {
  margin: 0;
  font-weight: 650;
  white-space: nowrap;
}

.program-empty {
  margin: 28px 0 0;
  color: var(--muted);
  font-size: 0.7rem;
}

.program-clear {
  display: grid;
  gap: 5px;
}

.program-clear strong {
  color: var(--ink);
  font-size: 0.78rem;
}

[data-view="dashboard"] .people-directory {
  padding: 0 0 34px;
  border-top: 0;
}

.directory-heading {
  align-items: center;
  margin-bottom: 16px;
}

.directory-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.directory-tools label {
  margin: 0;
}

.directory-tools input[type="search"],
.directory-tools select,
.import-people-button {
  min-height: 38px;
  padding: 0 12px;
  font-size: 0.66rem;
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: 5px;
}

.directory-tools input[type="search"] {
  width: min(30vw, 270px);
}

.import-people-button {
  display: inline-flex;
  align-items: center;
  font-weight: 680;
  cursor: pointer;
}

.import-people-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.people-table-head,
.person-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(100px, 0.72fr) minmax(150px, 1fr) minmax(70px, 0.46fr) minmax(92px, 0.55fr);
  align-items: center;
  gap: 16px;
}

.people-table-head {
  padding: 9px 14px;
  color: var(--muted);
  font-size: 0.57rem;
  border-block: 1px solid var(--line);
}

[data-view="dashboard"] .people-table {
  display: grid;
  gap: 0;
}

[data-view="dashboard"] .people-table::before {
  display: none;
}

.person-row {
  width: 100%;
  min-height: 67px;
  padding: 10px 14px;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.person-row:hover,
.person-row.selected {
  background: #eef2ed;
}

.person-identity {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 11px;
}

.person-identity i {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #315849;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.1rem;
  font-style: normal;
  background: #dfe9e3;
  border-radius: 50%;
}

.person-identity > span,
.person-occasion {
  min-width: 0;
}

.person-identity strong,
.person-identity small,
.person-occasion strong,
.person-occasion small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-identity strong,
.person-occasion strong,
.person-team,
.person-budget {
  font-size: 0.7rem;
}

.person-identity small,
.person-occasion small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.58rem;
}

.person-status {
  justify-self: start;
  padding: 5px 8px;
  font-size: 0.58rem;
  font-weight: 680;
  background: #e8e9e4;
  border-radius: 4px;
}

.person-status.status-ready,
.person-status.status-wrapped,
.person-status.status-ordered {
  color: #284b3e;
  background: #dce9df;
}

.person-status.status-shortlist {
  color: #694e24;
  background: #eee4ce;
}

.person-status.status-missing {
  color: #81483f;
  background: #f0ded8;
}

.directory-empty {
  margin: 18px 14px;
  color: var(--muted);
  font-size: 0.7rem;
}

@media (max-width: 1120px) {
  .program-grid {
    grid-template-columns: 1fr 1fr;
  }

  .risk-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  [data-view="dashboard"] > .view-header h1 {
    max-width: 76%;
    font-size: clamp(2.35rem, 11vw, 3.35rem);
  }

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

  .risk-panel {
    grid-column: 1;
  }

  .directory-heading,
  .directory-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .directory-tools {
    width: 100%;
  }

  .directory-tools input[type="search"],
  .directory-tools select,
  .import-people-button {
    width: 100%;
  }

  .people-table-head {
    display: none;
  }

  .person-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 16px;
    padding-block: 14px;
  }

  .person-identity {
    grid-column: 1 / -1;
  }

  .person-team::before {
    content: "Team · ";
    color: var(--muted);
  }

  .person-budget {
    text-align: right;
  }

  .person-occasion {
    grid-column: 1;
  }

  .person-status {
    grid-column: 2;
    justify-self: end;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  background: var(--paper);
}

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

button,
select {
  cursor: pointer;
}

button,
input,
select,
textarea {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}

input,
select,
textarea {
  width: 100%;
  padding: 12px 13px;
  color: var(--ink);
  background: rgba(251, 248, 241, 0.72);
  outline: none;
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--moss);
  box-shadow: 0 0 0 3px rgba(102, 113, 92, 0.12);
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 3px;
}

button {
  min-height: 42px;
  padding: 10px 15px;
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  border-color: var(--line-strong);
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

button:hover {
  color: var(--cream);
  background: var(--moss-deep);
  border-color: var(--moss-deep);
  transform: translateY(-1px);
}

.app-shell {
  display: grid;
  grid-template-columns: 254px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  height: 100vh;
  flex-direction: column;
  gap: 42px;
  padding: 30px 26px;
  color: var(--cream);
  background: var(--moss-deep);
}

.brand {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
}

.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--moss-deep);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 600;
  background: var(--cream);
  border-radius: 50%;
}

.brand strong,
.brand span {
  display: block;
}

.brand strong {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0;
}

.brand span {
  margin-top: 2px;
  color: rgba(251, 248, 241, 0.58);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

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

.nav-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  color: rgba(251, 248, 241, 0.58);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(251, 248, 241, 0.12);
}

.nav-list a::after {
  content: "·";
  font-family: serif;
  font-size: 1.2rem;
  opacity: 0;
}

.nav-list a:hover,
.nav-list a.active {
  color: var(--cream);
}

.nav-list a:hover::after,
.nav-list a.active::after {
  opacity: 1;
}

.mini-panel {
  margin-top: auto;
  padding: 20px;
  color: var(--ink);
  background: var(--sage);
  border-radius: 8px;
}

.mini-panel strong,
.mini-panel p {
  display: block;
  margin: 0;
}

.mini-panel strong {
  margin-top: 18px;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.05;
}

.mini-panel p {
  margin-top: 10px;
  color: rgba(38, 48, 39, 0.72);
  font-size: 0.72rem;
  line-height: 1.5;
}

.workspace {
  min-width: 0;
  max-width: 1680px;
  padding: 36px clamp(22px, 4vw, 68px) 68px;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 32px;
  margin-bottom: 38px;
  padding: 26px 0 38px;
  border-bottom: 1px solid var(--line);
}

.topbar > div {
  max-width: 910px;
}

.eyebrow {
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

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

h1 {
  max-width: 900px;
  margin: 12px 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(3.8rem, 7.2vw, 7.2rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.82;
}

.topbar-copy {
  max-width: 620px;
  margin: 28px 0 0;
  color: var(--muted);
  font-family: "DM Sans", sans-serif;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  font-style: normal;
  line-height: 1.55;
}

h2 {
  margin: 3px 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1;
}

.primary-action {
  color: var(--cream);
  background: var(--moss-deep);
  border-color: var(--moss-deep);
}

.primary-action:hover {
  color: var(--moss-deep);
  background: var(--sage);
  border-color: var(--sage);
}

.primary-action.wide {
  width: 100%;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.stat-card,
.panel {
  background: rgba(251, 248, 241, 0.76);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset, var(--shadow);
}

.stat-card {
  position: relative;
  min-height: 132px;
  padding: 20px;
  overflow: hidden;
}

.stat-card::after {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 26px;
  height: 1px;
  content: "";
  background: currentColor;
  opacity: 0.35;
}

.stat-card span {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.stat-card strong {
  display: block;
  margin-top: 28px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.75rem;
  font-weight: 500;
  line-height: 0.8;
}

.stat-card:nth-child(2) {
  background: var(--blush);
}

.stat-card:nth-child(3) {
  background: var(--butter);
}

.stat-card.accent {
  color: var(--ink);
  background: var(--sage);
}

.stat-card.accent span {
  color: var(--muted);
}

.visual-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.72fr) minmax(230px, 0.55fr);
  gap: 20px;
  margin-bottom: 20px;
}

.main-grid,
.studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
  gap: 20px;
  margin-bottom: 20px;
}

.bottom-grid {
  align-items: start;
}

.panel {
  min-width: 0;
  padding: 22px;
}

.calendar-panel {
  background: var(--cream);
}

.focus-panel {
  margin-top: 46px;
  background: #d7c9b9;
}

.data-panel {
  margin-bottom: 46px;
  background: #e4e5d8;
}

.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.panel-heading select,
.panel-heading button {
  width: auto;
  min-width: 126px;
}

.panel-index {
  color: var(--quiet);
  font-family: "Cormorant Garamond", serif;
  font-size: 1rem;
  font-style: italic;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-weekdays {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.54rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.calendar-day {
  position: relative;
  display: grid;
  min-height: 86px;
  padding: 9px;
  align-content: start;
  gap: 5px;
  text-align: left;
  background: transparent;
  border-color: var(--line);
  border-radius: 0;
  border-right-width: 0;
  border-bottom-width: 0;
}

.calendar-day:nth-child(7n) {
  border-right-width: 1px;
}

.calendar-day:hover,
.calendar-day.selected {
  color: var(--cream);
  background: var(--moss);
  transform: none;
}

.calendar-day.ghost {
  opacity: 0.18;
}

.calendar-day span {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.05rem;
  font-weight: 600;
}

.calendar-day small {
  max-width: 100%;
  overflow: hidden;
  color: currentColor;
  font-size: 0.6rem;
  line-height: 1.2;
  opacity: 0.72;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-day i {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: calc(var(--dots) * 5px);
  max-width: 22px;
  height: 3px;
  background: currentColor;
  opacity: 0.72;
}

.occasion-orbit {
  display: grid;
  min-height: 290px;
  place-items: center;
  gap: 18px;
}

.orbit-ring {
  position: relative;
  display: grid;
  width: min(220px, 68vw);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(38, 48, 39, 0.38);
  border-radius: 50%;
}

.orbit-ring::before,
.orbit-ring::after {
  position: absolute;
  inset: 24px;
  content: "";
  border: 1px solid rgba(38, 48, 39, 0.18);
  border-radius: 50%;
}

.orbit-ring::after {
  inset: 52px;
}

.orbit-dot {
  position: absolute;
  width: 11px;
  height: 11px;
  background: var(--moss-deep);
  border-radius: 50%;
}

.dot-a { top: 20%; left: 16%; }
.dot-b { right: 12%; bottom: 30%; background: var(--rose); }
.dot-c { bottom: 13%; left: 40%; background: var(--butter); }

.orbit-core {
  position: relative;
  z-index: 1;
  display: grid;
  width: 110px;
  height: 110px;
  place-items: center;
  color: var(--cream);
  background: var(--moss-deep);
  border-radius: 50%;
}

.orbit-core span {
  margin-top: 9px;
  font-family: "Cormorant Garamond", serif;
  font-size: 3.1rem;
  font-weight: 500;
  line-height: 0.7;
}

.orbit-core small {
  margin-top: -16px;
  font-size: 0.54rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.orbit-caption {
  max-width: 27ch;
  text-align: center;
}

.orbit-caption strong {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.25rem;
  font-weight: 600;
}

.orbit-caption p {
  margin: 8px 0 0;
  color: rgba(38, 48, 39, 0.7);
  font-size: 0.72rem;
  line-height: 1.5;
}

.status-bars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  min-height: 190px;
  gap: 10px;
  padding-top: 8px;
}

.status-bar {
  position: relative;
  display: grid;
  min-height: 180px;
  align-content: end;
  gap: 8px;
  border-bottom: 1px solid var(--ink);
}

.status-bar i {
  display: block;
  min-height: 18px;
  background: var(--moss);
}

.status-bar:nth-child(2) i { background: var(--blush); }
.status-bar:nth-child(3) i { background: var(--butter); }
.status-bar:nth-child(4) i { background: #aebca8; }
.status-bar:nth-child(5) i { background: #8d6b79; }

.status-bar span {
  color: var(--muted);
  font-size: 0.52rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.status-bar strong {
  position: absolute;
  top: 0;
  right: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: 2rem;
  font-weight: 500;
}

.budget-meter {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.budget-meter span,
.budget-meter strong {
  display: block;
}

.budget-meter > span {
  color: var(--muted);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.meter-track {
  height: 6px;
  margin: 13px 0 9px;
  background: rgba(38, 48, 39, 0.09);
}

.meter-track span {
  height: 100%;
  background: var(--moss);
  transition: width 220ms ease;
}

.budget-meter strong {
  font-size: 0.74rem;
  font-weight: 500;
}

.stacked-form,
.task-list,
.gift-list,
.timeline,
.event-list {
  display: grid;
  gap: 10px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.form-row,
.studio-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(95px, 0.55fr) minmax(120px, 0.55fr) minmax(105px, 0.45fr) auto;
  gap: 8px;
  margin-bottom: 12px;
}

.gift-form {
  grid-template-columns: minmax(0, 1fr) 80px minmax(120px, 0.75fr) auto;
}

.gift-finder {
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

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

.finder-head h3 {
  margin: 4px 0 0;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.25rem;
  font-weight: 600;
}

.finder-head select {
  width: min(190px, 48%);
}

.finder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.idea-card {
  position: relative;
  display: grid;
  min-height: 190px;
  align-content: space-between;
  gap: 10px;
  padding: 18px;
  overflow: hidden;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.idea-card:nth-child(2) { min-height: 225px; background: #ded3c6; }
.idea-card:nth-child(3) { min-height: 220px; background: #dce2d4; }
.idea-card:nth-child(4) { background: #eadbd5; }

.idea-card::after {
  position: absolute;
  right: -18px;
  top: -18px;
  width: 70px;
  height: 70px;
  content: "";
  border: 1px solid rgba(38, 48, 39, 0.18);
  border-radius: 50%;
}

.idea-card span {
  color: var(--muted);
  font-size: 0.54rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.idea-card strong {
  max-width: 11ch;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 0.98;
}

.idea-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.idea-card button {
  justify-self: start;
  min-height: 31px;
  padding: 5px 9px;
  font-size: 0.56rem;
}

.event-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 17px 0;
  background: transparent;
  border-bottom: 1px solid var(--line);
}

.event-card:first-child {
  border-top: 1px solid var(--line);
}

.event-card.selected {
  margin-inline: -10px;
  padding-inline: 10px;
  background: rgba(200, 208, 189, 0.42);
}

.event-card h3 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.28rem;
  font-weight: 600;
}

.event-card p,
.item-card p,
.timeline-item p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  color: var(--muted);
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.event-card button,
.item-card button,
.status-button {
  min-height: 32px;
  padding: 6px 9px;
  font-size: 0.56rem;
}

.invitation-panel {
  background: #d8c0b6;
}

.invite-preview {
  position: relative;
  min-height: 390px;
  padding: 34px;
  overflow: hidden;
  color: var(--cream);
  background: var(--moss-deep);
  border: 0;
  border-radius: 8px;
}

.invite-preview::after {
  position: absolute;
  right: 26px;
  bottom: 26px;
  width: 94px;
  height: 94px;
  content: "";
  border: 1px solid rgba(251, 248, 241, 0.24);
  border-radius: 50%;
}

.preview-kicker {
  display: inline-block;
  color: rgba(251, 248, 241, 0.62);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.invite-preview h3 {
  max-width: 9ch;
  margin: 34px 0 20px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(3.4rem, 6vw, 6.4rem);
  font-weight: 400;
  line-height: 0.78;
}

.invite-preview p {
  max-width: 52ch;
  color: rgba(251, 248, 241, 0.72);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.5;
}

.invite-preview span:last-child {
  display: block;
  margin-top: 32px;
  color: var(--cream);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.item-card,
.timeline-item {
  padding: 15px 0;
  background: transparent;
  border-bottom: 1px solid var(--line);
}

.item-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.item-card strong,
.timeline-item strong {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.1rem;
  font-weight: 600;
}

.item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.timeline {
  position: relative;
}

.timeline-item {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 12px;
}

.timeline-date {
  color: var(--rose);
  font-family: "Cormorant Garamond", serif;
  font-size: 0.92rem;
  font-style: italic;
  font-weight: 600;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 10;
  max-width: min(360px, calc(100% - 36px));
  padding: 13px 16px;
  color: var(--cream);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--moss-deep);
  border-radius: 8px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* Visual world */
.app-shell {
  grid-template-columns: 280px minmax(0, 1fr);
}

.sidebar {
  top: 14px;
  height: calc(100vh - 28px);
  margin: 14px;
  padding: 28px 24px;
  background: rgba(43, 51, 43, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(30, 34, 29, 0.18);
  backdrop-filter: blur(24px);
}

.brand-mark {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}

.workspace {
  padding-top: 22px;
  padding-left: clamp(10px, 2vw, 32px);
}

.topbar {
  position: relative;
  margin-bottom: 0;
  padding: 28px 0 0;
  border-bottom: 0;
}

.hero-copy {
  padding-left: clamp(8px, 2vw, 28px);
}

.topbar > .primary-action {
  margin-right: clamp(8px, 2vw, 28px);
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(57, 66, 56, 0.16);
}

.hero-scene {
  position: relative;
  display: grid;
  grid-column: 1 / -1;
  min-height: 540px;
  margin-top: 34px;
  overflow: hidden;
  align-items: end;
  background-image: url("./assets/invitations/after-dark-still.jpg");
  background-position: center 58%;
  background-size: cover;
  border-radius: 26px;
  box-shadow: 0 34px 80px rgba(57, 66, 56, 0.18);
  isolation: isolate;
}

.hero-scene::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: rgba(31, 37, 31, 0.22);
}

.hero-widget {
  position: absolute;
  right: clamp(24px, 7vw, 96px);
  bottom: clamp(46px, 8vw, 86px);
  z-index: 3;
  width: min(360px, calc(100% - 48px));
  padding: 20px;
  color: #fffaf0;
  background: rgba(39, 41, 36, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(18, 20, 18, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(24px) saturate(1.1);
}

.widget-head,
.widget-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.widget-head {
  margin-bottom: 28px;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.widget-head i {
  width: 9px;
  height: 9px;
  background: #f0b9c6;
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(240, 185, 198, 0.14);
}

.hero-widget > strong {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: 2.35rem;
  font-weight: 500;
  line-height: 0.95;
}

.hero-widget > p {
  margin: 8px 0 20px;
  color: rgba(255, 250, 240, 0.68);
  font-size: 0.74rem;
}

.widget-progress {
  height: 5px;
  margin-bottom: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}

.widget-progress span {
  display: block;
  width: 62%;
  height: 100%;
  background: #f0b9c6;
  border-radius: inherit;
}

.widget-foot {
  color: rgba(255, 250, 240, 0.64);
  font-size: 0.62rem;
}

.stats-grid {
  position: relative;
  z-index: 4;
  margin: -46px 26px 30px;
}

.stat-card,
.panel {
  border-radius: 18px;
  box-shadow: 0 20px 54px rgba(57, 66, 56, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.stat-card {
  min-height: 136px;
  border-color: rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(20px);
}

.stat-card:nth-child(1) { background: rgba(251, 248, 241, 0.9); }
.stat-card:nth-child(2) { background: rgba(217, 184, 173, 0.91); }
.stat-card:nth-child(3) { background: rgba(230, 216, 171, 0.91); }
.stat-card.accent { background: rgba(200, 208, 189, 0.93); }

.visual-grid,
.main-grid,
.studio-grid {
  gap: 24px;
}

.panel {
  padding: 26px;
  border-color: rgba(38, 48, 39, 0.1);
}

.panel-heading {
  position: relative;
}

.panel-heading::before {
  position: absolute;
  top: -26px;
  left: 18px;
  width: 72px;
  height: 15px;
  content: "";
  background: rgba(224, 201, 166, 0.58);
  transform: rotate(-1.5deg);
}

.calendar-panel {
  background: rgba(251, 248, 241, 0.95);
}

.focus-panel {
  background: rgba(215, 201, 185, 0.92);
}

.data-panel {
  background: rgba(228, 229, 216, 0.92);
}

.occasion-orbit {
  padding: 12px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 28px;
  backdrop-filter: blur(14px);
}

.calendar-day:first-child { border-top-left-radius: 12px; }
.calendar-day:nth-child(7) { border-top-right-radius: 12px; }

.event-card.selected {
  border-radius: 12px;
}

.idea-card {
  border-radius: 16px;
  box-shadow: 0 12px 26px rgba(57, 66, 56, 0.07);
}

.invitation-panel {
  border-radius: 24px;
}

.designer-shell {
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.template-choice {
  border-radius: 14px;
}

.template-mini {
  border-radius: 9px;
}

.invite-preview {
  border-radius: 20px;
}

.finder-head select,
.panel-heading select,
.panel-heading button,
.event-card button,
.item-card button {
  border-radius: 999px;
}

/* Invitation atelier */
.invitation-panel {
  grid-column: 1 / -1;
  padding: clamp(18px, 3vw, 32px);
  background: rgba(251, 248, 241, 0.88);
}

.people-panel {
  grid-column: 1 / -1;
}

.template-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(126px, 1fr);
  gap: 10px;
  margin-bottom: 24px;
  padding: 6px 2px 14px;
  overflow-x: auto;
}

.template-choice {
  display: grid;
  min-width: 118px;
  min-height: 154px;
  padding: 9px;
  align-content: space-between;
  gap: 10px;
  color: var(--muted);
  text-align: left;
  background: var(--paper);
  border-color: transparent;
  border-radius: 8px;
}

.template-choice:hover,
.template-choice.active {
  color: var(--ink);
  background: var(--cream);
  border-color: var(--moss);
  box-shadow: 0 12px 28px rgba(57, 66, 56, 0.1);
  transform: translateY(-2px);
}

.template-choice strong {
  font-family: "Cormorant Garamond", serif;
  font-size: 1rem;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.template-mini {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #eee8de;
  border: 1px solid var(--line);
  border-radius: 5px;
}

.template-mini i {
  position: absolute;
  display: block;
  background: currentColor;
  opacity: 0.55;
}

.mini-editorial { color: #6c514b; background: #e7cfc7; }
.mini-editorial i:nth-child(1) { top: 14%; left: 14%; width: 52%; height: 2px; }
.mini-editorial i:nth-child(2) { top: 26%; left: 14%; width: 70%; height: 20%; }
.mini-editorial i:nth-child(3) { bottom: 14%; right: 14%; width: 34%; height: 28%; }

.mini-botanical { color: #53634e; background: #dbe2d2; }
.mini-botanical i { border-radius: 50%; }
.mini-botanical i:nth-child(1) { top: 10%; right: 8%; width: 34%; height: 44%; transform: rotate(22deg); }
.mini-botanical i:nth-child(2) { bottom: 7%; left: 8%; width: 30%; height: 38%; transform: rotate(-18deg); }
.mini-botanical i:nth-child(3) { top: 42%; left: 22%; width: 58%; height: 2px; border-radius: 0; }

.mini-postcard { color: #5e6767; background: #d8e1df; }
.mini-postcard i:nth-child(1) { inset: 8% 8% 42%; }
.mini-postcard i:nth-child(2) { bottom: 28%; left: 10%; width: 54%; height: 2px; }
.mini-postcard i:nth-child(3) { bottom: 15%; left: 10%; width: 72%; height: 2px; }

.mini-collage { color: #8f695d; background: #e9ddd1; }
.mini-collage i:nth-child(1) { top: 10%; left: 8%; width: 52%; height: 42%; transform: rotate(-4deg); }
.mini-collage i:nth-child(2) { right: 7%; bottom: 14%; width: 48%; height: 48%; transform: rotate(5deg); }
.mini-collage i:nth-child(3) { bottom: 10%; left: 10%; width: 28%; height: 2px; }

.mini-soiree { color: #dfcda4; background: #293027; }
.mini-soiree i:nth-child(1) { top: 14%; left: 20%; width: 60%; height: 1px; }
.mini-soiree i:nth-child(2) { top: 38%; left: 15%; width: 70%; height: 22%; }
.mini-soiree i:nth-child(3) { bottom: 14%; left: 30%; width: 40%; height: 1px; }

.mini-ribbon { color: #7b4f53; background: #f0d8dc; }
.mini-ribbon i:nth-child(1) { top: 10%; left: 10%; width: 80%; height: 80%; border: 1px solid currentColor; background: transparent; }
.mini-ribbon i:nth-child(2) { top: 38%; left: 20%; width: 60%; height: 2px; }
.mini-ribbon i:nth-child(3) { bottom: 16%; left: 40%; width: 20%; height: 20%; border-radius: 50%; }

.mini-scrapbook { color: #6f5d51; background: #e9decf; }
.mini-scrapbook i:nth-child(1) { top: 12%; left: 8%; width: 58%; height: 42%; transform: rotate(-6deg); }
.mini-scrapbook i:nth-child(2) { right: 7%; bottom: 13%; width: 50%; height: 44%; transform: rotate(7deg); }
.mini-scrapbook i:nth-child(3) { top: 8%; left: 30%; width: 38%; height: 7%; background: #d6b987; transform: rotate(3deg); }

.mini-modern {
  color: #f3c5d2;
  background-color: #3b3a3d;
  background-image: url("./assets/invitations/party-flash.jpg");
  background-position: center;
  background-size: cover;
}
.mini-modern i:nth-child(1) { inset: 10%; border: 1px solid rgba(255,255,255,.45); border-radius: 18px; background: rgba(255,255,255,.12); }
.mini-modern i:nth-child(2) { top: 24%; left: 18%; width: 64%; height: 28%; border-radius: 14px; }
.mini-modern i:nth-child(3) { bottom: 16%; left: 28%; width: 44%; height: 4px; border-radius: 999px; }

.mini-modern i {
  display: none;
}

.designer-shell {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(430px, 1.28fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: start;
  padding: clamp(18px, 3vw, 36px);
  background: #e9e4d9;
  border-radius: 8px;
}

.designer-tools {
  display: grid;
  gap: 18px;
}

.ai-designer {
  display: grid;
  gap: 11px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.ai-designer label {
  color: var(--ink);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.22rem;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.ai-designer textarea {
  min-height: 112px;
  background: var(--cream);
}

.design-detail-panel {
  display: grid;
  gap: 13px;
  padding: 17px;
  background: rgba(251, 248, 241, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.design-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.alignment-field {
  padding: 0;
  border: 0;
}

.alignment-field legend {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.segmented-control {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 3px;
  background: rgba(38, 48, 39, 0.08);
  border-radius: 10px;
}

.segmented-control button {
  min-height: 34px;
  padding: 6px 8px;
  border: 0;
  border-radius: 7px;
}

.segmented-control button:hover,
.segmented-control button.active {
  color: var(--ink);
  background: var(--cream);
  box-shadow: 0 5px 14px rgba(57, 66, 56, 0.09);
  transform: none;
}

.palette-field {
  padding: 0;
  border: 0;
}

.palette-field legend {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.palette-row {
  display: flex;
  gap: 9px;
}

.palette-swatch {
  width: 34px;
  min-height: 34px;
  padding: 0;
  border: 3px solid transparent;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line-strong);
}

.palette-swatch:hover,
.palette-swatch.active {
  border-color: var(--cream);
  box-shadow: 0 0 0 2px var(--moss-deep);
  transform: none;
}

.swatch-rose { background: #b97970; }
.swatch-sage { background: #71806b; }
.swatch-butter { background: #e1c67e; }
.swatch-night { background: #202720; }

.photo-upload input {
  padding: 8px;
  background: var(--cream);
}

#removeInvitePhoto {
  display: none;
}

#removeInvitePhoto.visible {
  display: block;
}

.canvas-stage {
  min-width: 0;
}

.canvas-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.invite-preview {
  position: relative;
  display: grid;
  width: min(100%, 620px);
  min-height: 0;
  aspect-ratio: 4 / 5;
  margin-inline: auto;
  padding: clamp(30px, 5vw, 62px);
  overflow: hidden;
  align-content: center;
  color: var(--invite-ink, #3d342f);
  background: var(--invite-paper, #eed7d0);
  border: 10px solid rgba(255, 255, 255, 0.38);
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(57, 66, 56, 0.14);
}

.invite-preview::before {
  position: absolute;
  inset: 16px;
  content: "";
  border: 1px solid var(--invite-line, rgba(61, 52, 47, 0.3));
  border-radius: 4px;
  pointer-events: none;
}

.invite-preview::after {
  display: none;
}

.invite-copy {
  position: relative;
  z-index: 2;
}

.invite-preview .preview-kicker,
.invite-preview .invite-copy > span:last-child {
  color: inherit;
  opacity: 0.68;
}

.invite-preview h3 {
  max-width: 10ch;
  margin: 34px 0 22px;
  color: inherit;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(3.2rem, 6vw, 6.2rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 0.82;
}

.invite-preview p {
  max-width: 46ch;
  color: inherit;
  font-size: clamp(0.9rem, 1.3vw, 1.08rem);
  opacity: 0.75;
}

.invite-decoration {
  position: absolute;
  z-index: 1;
  display: block;
  border: 1px solid var(--invite-line, rgba(61, 52, 47, 0.3));
  border-radius: 50%;
}

.decoration-a {
  top: -50px;
  right: -30px;
  width: 180px;
  height: 180px;
}

.decoration-b {
  bottom: 40px;
  left: -40px;
  width: 110px;
  height: 160px;
  transform: rotate(28deg);
}

#invitePhoto {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 45%;
  object-fit: cover;
  border-radius: 5px;
}

.palette-rose {
  --invite-paper: #ead2ca;
  --invite-ink: #503b39;
  --invite-line: rgba(80, 59, 57, 0.34);
}

.palette-sage {
  --invite-paper: #d8dfd0;
  --invite-ink: #344135;
  --invite-line: rgba(52, 65, 53, 0.34);
}

.palette-butter {
  --invite-paper: #ead9a7;
  --invite-ink: #50472e;
  --invite-line: rgba(80, 71, 46, 0.34);
}

.palette-night {
  --invite-paper: #293129;
  --invite-ink: #f0e5c7;
  --invite-line: rgba(240, 229, 199, 0.3);
}

.template-botanical .invite-copy {
  text-align: center;
}

.template-botanical h3,
.template-botanical p {
  margin-inline: auto;
}

.template-botanical .decoration-a,
.template-botanical .decoration-b {
  width: 100px;
  height: 260px;
  border-radius: 50%;
  transform: rotate(32deg);
}

.template-botanical .decoration-a { top: -35px; right: 12px; }
.template-botanical .decoration-b { bottom: -40px; left: 8px; transform: rotate(-28deg); }

.template-postcard {
  align-content: end;
}

.template-postcard.has-photo #invitePhoto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  filter: saturate(0.78) contrast(0.92);
}

.template-postcard.has-photo::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  content: "";
  background: rgba(25, 32, 27, 0.38);
}

.template-postcard.has-photo .invite-copy {
  color: #fffaf0;
}

.template-collage {
  align-content: start;
}

.template-collage.has-photo {
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 28px;
}

.template-collage.has-photo #invitePhoto {
  height: 100%;
  min-height: 240px;
  transform: rotate(-2deg);
  box-shadow: 10px 12px 0 rgba(255, 255, 255, 0.42);
}

.template-collage h3 {
  font-style: italic;
}

.template-soirée {
  --invite-paper: #293129;
  --invite-ink: #f0e5c7;
  --invite-line: rgba(240, 229, 199, 0.3);
  text-align: center;
}

.template-soirée h3,
.template-soirée p {
  margin-inline: auto;
}

.template-soirée h3 {
  font-size: clamp(3rem, 5vw, 5.3rem);
  font-style: italic;
}

.template-ribbon {
  align-content: center;
  text-align: center;
}

.template-ribbon::before {
  inset: 24px;
  border: 3px double var(--invite-line);
}

.template-ribbon h3,
.template-ribbon p {
  margin-inline: auto;
}

.template-ribbon .decoration-a,
.template-ribbon .decoration-b {
  width: 130px;
  height: 70px;
  border-width: 2px;
  transform: rotate(24deg);
}

.template-ribbon .decoration-a { top: 24px; right: -24px; }
.template-ribbon .decoration-b { bottom: 24px; left: -24px; transform: rotate(-24deg); }

.template-scrapbook {
  align-content: start;
  background-color: var(--invite-paper);
}

.template-scrapbook.has-photo {
  grid-template-rows: minmax(220px, 1fr) auto;
  gap: 26px;
}

.template-scrapbook.has-photo #invitePhoto {
  height: 100%;
  transform: rotate(-3deg);
  border: 12px solid #fffaf0;
  box-shadow: 8px 11px 24px rgba(57, 66, 56, 0.16);
}

.template-scrapbook h3 {
  font-style: italic;
  transform: rotate(-1deg);
}

.template-modern {
  --invite-paper: #363638;
  --invite-ink: #fff7ed;
  --invite-line: rgba(255, 247, 237, 0.22);
  align-content: center;
  background-color: var(--invite-paper);
  background-image: url("./assets/invitations/chrome-cake.jpg");
  background-position: center;
  background-size: cover;
}

.template-modern::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  content: "";
  background: rgba(30, 28, 29, 0.5);
}

.template-modern::before {
  inset: 28px;
  border-color: rgba(255, 255, 255, 0.2);
  border-radius: 28px;
}

.template-modern .invite-copy {
  position: relative;
  z-index: 2;
  padding: 28px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 28px;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(20px);
}

.template-modern h3 {
  font-family: "DM Sans", sans-serif;
  font-size: clamp(2.3rem, 5vw, 4.6rem);
  font-weight: 300;
  line-height: 0.95;
}

.canvas-story {
  width: min(100%, 460px);
  aspect-ratio: 9 / 16;
}

.canvas-square {
  width: min(100%, 620px);
  aspect-ratio: 1;
}

.canvas-landscape {
  width: min(100%, 760px);
  aspect-ratio: 3 / 2;
  padding: clamp(26px, 4vw, 48px);
}

.canvas-landscape h3 {
  font-size: clamp(2.7rem, 5vw, 5.2rem);
}

.typeface-script h3 {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 400;
}

.typeface-fashion h3 {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 0.9;
  text-transform: uppercase;
}

.typeface-modern h3,
.typeface-modern p {
  font-family: "DM Sans", sans-serif;
  font-style: normal;
}

.align-center .invite-copy { text-align: center; }
.align-center h3,
.align-center p { margin-inline: auto; }
.align-right .invite-copy { text-align: right; }
.align-right h3,
.align-right p { margin-left: auto; }

.decoration-none .invite-decoration {
  display: none;
}

.decoration-botanical .decoration-a,
.decoration-botanical .decoration-b {
  width: 92px;
  height: 250px;
  border-width: 2px;
  border-radius: 70% 10% 70% 10%;
}

.decoration-botanical .decoration-a { transform: rotate(24deg); }
.decoration-botanical .decoration-b { transform: rotate(-32deg); }

.decoration-sparkle .invite-decoration {
  width: 46px;
  height: 46px;
  border-radius: 4px;
  transform: rotate(45deg);
}

.decoration-sparkle .decoration-a { top: 8%; right: 10%; }
.decoration-sparkle .decoration-b { bottom: 9%; left: 9%; width: 28px; height: 28px; }

.decoration-ribbon .invite-decoration {
  width: 150px;
  height: 76px;
  border-width: 2px;
}

.decoration-ribbon .decoration-a { top: 20px; right: -36px; transform: rotate(22deg); }
.decoration-ribbon .decoration-b { bottom: 20px; left: -36px; transform: rotate(-22deg); }

.photo-full.has-photo #invitePhoto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  filter: saturate(0.82) contrast(0.9);
}

.photo-full.has-photo::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  content: "";
  background: rgba(26, 30, 27, 0.38);
}

.photo-full.has-photo .invite-copy {
  color: #fffaf0;
}

.photo-soft.has-photo #invitePhoto {
  filter: saturate(0.7) contrast(0.86) blur(1px);
  opacity: 0.82;
}

.photo-cutout.has-photo #invitePhoto {
  border: 10px solid rgba(255, 255, 255, 0.76);
  transform: rotate(-3deg);
  box-shadow: 12px 14px 26px rgba(57, 66, 56, 0.18);
}

button,
.brand span,
.nav-list a,
.eyebrow,
.stat-card span,
.calendar-weekdays,
.orbit-core small,
.status-bar span,
.budget-meter > span,
label,
.idea-card span,
.badge,
.preview-kicker,
.invite-preview .invite-copy > span:last-child,
.timeline-date,
.widget-head,
.canvas-meta,
.palette-field legend,
.alignment-field legend {
  letter-spacing: 0;
  text-transform: none;
}

.eyebrow {
  font-size: 0.72rem;
  font-weight: 500;
}

label,
.palette-field legend,
.alignment-field legend {
  font-size: 0.68rem;
}

.nav-list a,
.brand span,
.stat-card span,
.widget-head,
.canvas-meta {
  font-size: 0.68rem;
}

.invitation-panel {
  border-radius: 24px;
}

.designer-shell {
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.template-choice {
  border-radius: 14px;
}

.template-mini {
  border-radius: 9px;
}

.invite-preview {
  border-radius: 20px;
}

@media (max-width: 980px) {
  .designer-shell {
    grid-template-columns: 1fr;
  }

  .designer-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .ai-designer {
    grid-column: 1 / -1;
  }

  .canvas-stage {
    grid-column: 1 / -1;
  }
}

/* Gift conversation */
.gift-assistant {
  margin: 38px 0 18px;
  overflow: hidden;
  color: #24342d;
  background: #f1ecf4;
  border: 1px solid rgba(42, 54, 47, 0.22);
  border-radius: 8px;
}

.gift-assistant-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 30px 24px;
  background: #d9e3dc;
  border-bottom: 1px solid rgba(42, 54, 47, 0.22);
}

.gift-assistant-heading h2 {
  margin: 0;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1;
}

.gift-assistant-heading p {
  max-width: 540px;
  margin: 9px 0 0;
  color: rgba(36, 52, 45, 0.7);
  font-size: 0.84rem;
}

.gift-assistant-heading > button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 12px;
  color: #24342d;
  background: transparent;
  border: 1px solid rgba(36, 52, 45, 0.35);
  border-radius: 4px;
}

.gift-chat {
  max-height: 650px;
  overflow-y: auto;
  padding: 30px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)),
    repeating-linear-gradient(0deg, transparent 0 33px, rgba(64, 69, 64, 0.045) 33px 34px);
}

.gift-message {
  max-width: 860px;
  margin-bottom: 28px;
}

.gift-message:last-child {
  margin-bottom: 0;
}

.gift-message > strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.75rem;
}

.gift-message > p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
}

.gift-message.user {
  max-width: 620px;
  margin-left: auto;
  padding: 16px 18px;
  background: #ead8e2;
  border: 1px solid rgba(66, 48, 59, 0.14);
  border-radius: 6px;
}

.gift-recommendations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 24px;
  border-top: 1px solid rgba(42, 54, 47, 0.22);
  border-left: 1px solid rgba(42, 54, 47, 0.22);
}

.gift-recommendation {
  min-width: 0;
  padding: 22px;
  border-right: 1px solid rgba(42, 54, 47, 0.22);
  border-bottom: 1px solid rgba(42, 54, 47, 0.22);
}

.gift-recommendation > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.gift-recommendation > div:first-child strong {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.4rem;
  line-height: 1.1;
}

.gift-recommendation > div:first-child span,
.gift-recommendation small {
  color: rgba(36, 52, 45, 0.65);
  font-size: 0.68rem;
}

.gift-recommendation p {
  margin: 14px 0 10px;
  font-size: 0.78rem;
  line-height: 1.55;
}

.gift-recommendation small {
  display: block;
  min-height: 42px;
  line-height: 1.5;
}

.gift-recommendation-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.gift-recommendation-actions a,
.gift-recommendation-actions button {
  padding: 7px 9px;
  color: #24342d;
  font-size: 0.68rem;
  text-decoration: none;
  background: transparent;
  border: 1px solid rgba(36, 52, 45, 0.32);
  border-radius: 3px;
}

.gift-recommendation-actions button {
  margin-left: auto;
  color: #f9f5ee;
  background: #2d4037;
  border-color: #2d4037;
}

.gift-chat-prompts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(42, 54, 47, 0.22);
}

.gift-chat-prompts button {
  min-height: 62px;
  padding: 12px 14px;
  color: #24342d;
  font-size: 0.72rem;
  text-align: left;
  background: rgba(255, 255, 255, 0.22);
  border: 0;
  border-right: 1px solid rgba(42, 54, 47, 0.22);
  border-radius: 0;
}

.gift-chat-prompts button:last-child {
  border-right: 0;
}

.gift-chat-prompts button:hover {
  background: rgba(255, 255, 255, 0.55);
}

.gift-chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0;
  padding: 14px;
  background: #2d4037;
}

.gift-chat-form textarea {
  min-height: 78px;
  resize: vertical;
  color: #26332d;
  background: #fbf8f2;
  border: 0;
  border-radius: 4px 0 0 4px;
}

.gift-chat-form .primary-action {
  min-width: 138px;
  color: #2d4037;
  background: #f1cbd8;
  border: 0;
  border-radius: 0 4px 4px 0;
}

.gift-chat-form .primary-action:disabled {
  cursor: wait;
  opacity: 0.7;
}

@media (max-width: 760px) {
  .gift-assistant-heading {
    padding: 22px 18px;
  }

  .gift-assistant-heading h2 {
    font-size: 1.85rem;
  }

  .gift-chat {
    max-height: 580px;
    padding: 22px 18px;
  }

  .gift-recommendations {
    grid-template-columns: 1fr;
  }

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

  .gift-chat-prompts button:nth-child(2) {
    border-right: 0;
  }

  .gift-chat-prompts button:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(42, 54, 47, 0.22);
  }

  .gift-chat-form {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .gift-chat-form textarea,
  .gift-chat-form .primary-action {
    width: 100%;
    border-radius: 4px;
  }
}

@media (max-width: 480px) {
  .gift-assistant-heading {
    display: block;
  }

  .gift-assistant-heading > button {
    margin-top: 16px;
  }

  .gift-chat-prompts {
    grid-template-columns: 1fr;
  }

  .gift-chat-prompts button,
  .gift-chat-prompts button:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid rgba(42, 54, 47, 0.22);
  }

  .gift-chat-prompts button:last-child {
    border-bottom: 0;
  }

  .gift-recommendation-actions {
    flex-wrap: wrap;
  }

  .gift-recommendation-actions button {
    flex-basis: 100%;
    margin-left: 0;
  }
}

/* Studio: poster-first, social, and alive. */
[data-view="studio"] .invitation-panel {
  overflow: hidden;
  background: #f6f2eb;
  border-color: #161616;
}

[data-view="studio"] .studio-mode-bar {
  padding: 14px 18px;
  background: #161616;
  border-bottom: 0;
}

[data-view="studio"] .studio-mode-bar .segmented-control {
  width: fit-content;
  background: #292929;
  border-color: #444;
}

[data-view="studio"] .studio-mode-bar .segmented-control button {
  color: rgba(255, 255, 255, 0.68);
}

[data-view="studio"] .studio-mode-bar .segmented-control button.active {
  color: #111;
  background: #f3ff53;
}

[data-view="studio"] .invitation-draft-bar {
  padding: 10px 18px 14px;
  background: #161616;
  border-bottom: 1px solid #333;
}

[data-view="studio"] .invitation-draft-bar button {
  color: rgba(255, 255, 255, 0.74);
  background: #242424;
  border-color: #444;
}

[data-view="studio"] .invitation-draft-bar button.active {
  color: #111;
  background: #ff5c8a;
  border-color: #ff5c8a;
}

[data-view="studio"] .template-rail {
  gap: 10px;
  margin-inline: 0;
  padding: 12px 18px 22px;
  background: #161616;
  border-bottom: 0;
  scrollbar-color: #ff5c8a #292929;
}

[data-view="studio"] .template-choice {
  min-width: 148px;
  padding: 0;
  overflow: hidden;
  color: #fff;
  text-align: left;
  background: #242424;
  border: 1px solid #3c3c3c;
  border-radius: 7px;
  box-shadow: none;
  transform: none;
}

[data-view="studio"] .template-choice:nth-child(even) {
  transform: none;
}

[data-view="studio"] .template-choice:hover {
  border-color: rgba(255, 255, 255, 0.78);
  transform: translateY(-3px);
}

[data-view="studio"] .template-choice.active {
  color: #111;
  background: #f3ff53;
  border-color: #f3ff53;
  box-shadow: 0 0 0 2px #161616, 0 0 0 4px #f3ff53;
  transform: translateY(-3px);
}

[data-view="studio"] .template-mini {
  height: 184px;
  margin: 0;
  background-color: #111;
  background-position: center;
  background-size: cover;
  border: 0;
  border-radius: 0;
  filter: saturate(1.06) contrast(1.04);
}

[data-view="studio"] .template-mini i,
[data-view="studio"] .template-mini::before,
[data-view="studio"] .template-mini::after {
  display: none;
}

[data-view="studio"] .template-choice strong {
  display: block;
  min-height: 46px;
  padding: 12px 11px;
  color: inherit;
  font-family: "Manrope", "Helvetica Neue", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
}

.mini-editorial,
.mini-soiree,
.mini-minimal,
.mini-ticket {
  background-image: url("./assets/invitations/party-flash.jpg") !important;
}

.mini-botanical,
.mini-ribbon,
.mini-wildflower,
.mini-bold,
.mini-orbit {
  background-image: url("./assets/invitations/chrome-cake.jpg") !important;
}

.mini-postcard,
.mini-scrapbook,
.mini-coastal,
.mini-split,
.mini-travelspread {
  background-image: url("./assets/invitations/rooftop-bluehour.jpg") !important;
}

.mini-collage,
.mini-modern,
.mini-folio,
.mini-archway {
  background-image: url("./assets/invitations/after-dark-still.jpg") !important;
}

[data-view="studio"] .designer-shell {
  gap: 0;
  padding-top: 0;
  background: #111;
}

[data-view="studio"] .designer-tools {
  border: 0;
  border-right: 1px solid #2d2d2d;
  border-radius: 0;
}

[data-view="studio"] .canvas-stage {
  padding: clamp(18px, 3vw, 38px);
  background-color: #0c0c0c;
  background-image: url("./assets/invitations/party-flash.jpg");
  background-position: center;
  background-size: cover;
  border: 0;
  border-radius: 0;
}

[data-view="studio"] .canvas-stage::before {
  background: rgba(8, 8, 8, 0.76);
  backdrop-filter: blur(16px) saturate(0.8);
}

[data-view="studio"] .invite-preview {
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.42);
}

[data-view="studio"] .image-library {
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: 7px;
}

[data-view="studio"] .image-library button {
  position: relative;
  aspect-ratio: 4 / 5;
  padding: 0;
  overflow: hidden;
  background: #111;
  border: 2px solid transparent;
  border-radius: 7px;
}

[data-view="studio"] .image-library img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 260ms ease;
}

[data-view="studio"] .image-library button:hover img {
  transform: scale(1.05);
}

[data-view="studio"] .image-library button.active {
  border-color: #ff3e78;
  box-shadow: 0 0 0 2px rgba(255, 62, 120, 0.18);
}

[data-view="studio"] .image-library button span {
  position: absolute;
  right: 5px;
  bottom: 5px;
  left: 5px;
  overflow: hidden;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 650;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px #000;
  white-space: nowrap;
}

@media (max-width: 700px) {
  [data-view="studio"] .template-choice {
    min-width: 132px;
  }

  [data-view="studio"] .template-mini {
    height: 158px;
  }

  [data-view="studio"] .designer-shell {
    grid-template-columns: 1fr;
  }

  [data-view="studio"] .designer-tools {
    border-right: 0;
    border-bottom: 1px solid #2d2d2d;
  }

  [data-view="studio"] .image-library {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Adami edition: warm editorial confidence around a practical planning product. */
:root {
  --paper: #f2eadf;
  --paper-bright: #fffaf2;
  --paper-soft: #e4d8ca;
  --ink: #271b18;
  --muted: #75655d;
  --quiet: #a6958b;
  --line: rgba(39, 27, 24, 0.18);
  --line-strong: rgba(39, 27, 24, 0.42);
  --editorial-pink: #ead0cf;
  --editorial-cream: #fffaf2;
  --editorial-green: #183f37;
  --editorial-blue: #c7d8ee;
  --editorial-wine: #7a2821;
  --editorial-gold: #d7ad3d;
  --shell-blue: #304cc9;
  --shell-coral: #c85f4e;
  --shell-lime: #d8d99d;
  --shell-lilac: #dbcbd8;
  --chapter-wine: #6d261f;
  --chapter-butter: #e2c67f;
  --chapter-sage: #bccbbd;
}

body::before {
  position: fixed;
  z-index: 100;
  inset: 0 auto 0 0;
  width: 7px;
  content: "";
  pointer-events: none;
  background: var(--shell-blue);
}

.sidebar {
  background: rgba(242, 234, 223, 0.95);
  border-color: rgba(39, 27, 24, 0.48);
}

.brand-mark {
  display: grid;
  place-items: center;
  background: var(--shell-blue);
  border-radius: 50%;
}

.brand-mark::after {
  color: var(--paper-bright);
  content: "O";
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1rem;
  font-style: italic;
}

.brand-mark :is(i, b) {
  display: none;
}

.brand strong {
  color: var(--chapter-wine);
  font-size: 1.7rem;
}

.nav-list {
  gap: 0;
  padding: 3px;
  background: var(--chapter-wine);
  border: 1px solid var(--chapter-wine);
  border-radius: 6px;
}

.nav-list a {
  color: rgba(255, 250, 242, 0.7);
  border-radius: 3px;
}

.nav-list a.active {
  color: var(--chapter-wine);
  background: var(--paper-bright);
}

.mini-panel select {
  background-color: transparent;
  border-color: rgba(39, 27, 24, 0.56);
}

.workspace {
  padding-top: clamp(28px, 3.2vw, 50px);
}

.product-view > .view-header,
[data-view="studio"] > .view-header {
  min-height: 110px;
  margin-bottom: 30px;
  padding-bottom: 22px;
  border-color: rgba(39, 27, 24, 0.56);
}

.view-header h1,
.product-view > .view-header h1,
[data-view="dashboard"] > .view-header h1,
[data-view="gifts"] .view-header h1,
[data-view="studio"] > .view-header h1 {
  color: var(--chapter-wine);
  font-size: clamp(3.8rem, 7vw, 6.8rem);
  font-weight: 780;
  line-height: 0.82;
}

.view-header .primary-action,
.view-header > button,
.view-header #newInvitation {
  color: var(--paper-bright);
  background: var(--chapter-wine);
  border-color: var(--chapter-wine);
}

.view-header .primary-action:hover,
.view-header > button:hover,
.view-header #newInvitation:hover {
  color: var(--ink);
  background: var(--chapter-butter);
  border-color: var(--ink);
}

/* Home reads as one planning story: image, date, then the operational detail. */
[data-view="dashboard"] .visual-grid {
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.5fr);
  gap: 0;
  margin-bottom: 34px;
  overflow: hidden;
  background: var(--paper-bright);
  border: 1px solid var(--ink);
  border-radius: 7px;
}

[data-view="dashboard"] .calendar-panel,
[data-view="dashboard"] .focus-panel {
  border: 0;
  border-radius: 0;
}

[data-view="dashboard"] .calendar-panel {
  padding: clamp(24px, 3.4vw, 48px);
  background: var(--paper-bright);
}

[data-view="dashboard"] .calendar-panel .panel-heading {
  border-color: rgba(39, 27, 24, 0.46);
}

[data-view="dashboard"] .calendar-panel .panel-heading h2,
[data-view="dashboard"] .focus-panel .panel-heading h2 {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(2.2rem, 3.4vw, 3.7rem);
  font-weight: 600;
}

[data-view="dashboard"] .calendar-feature {
  height: clamp(240px, 27vw, 430px);
  margin-top: 24px;
  border-radius: 6px 6px 0 0;
}

[data-view="dashboard"] .calendar-feature img {
  filter: saturate(0.72) contrast(1.08) sepia(0.1);
}

[data-view="dashboard"] .calendar-feature figcaption {
  padding: 20px 24px;
  background: rgba(24, 63, 55, 0.94);
}

[data-view="dashboard"] .calendar-feature strong {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.4rem;
  font-weight: 600;
}

[data-view="dashboard"] .calendar-day.has-event {
  background: #ead7d3;
}

[data-view="dashboard"] .focus-panel {
  position: relative;
  min-height: 100%;
  padding: clamp(26px, 3vw, 44px);
  color: var(--paper-bright);
  background: var(--chapter-wine);
  border-left: 1px solid var(--ink);
}

[data-view="dashboard"] .focus-panel::before {
  position: absolute;
  top: 0;
  right: 18px;
  color: rgba(255, 250, 242, 0.06);
  content: "O";
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(9rem, 18vw, 17rem);
  font-style: italic;
  line-height: 0.75;
  pointer-events: none;
}

[data-view="dashboard"] .focus-panel::after {
  border-color: rgba(255, 250, 242, 0.32);
  box-shadow: 0 0 0 18px rgba(255, 250, 242, 0.04), 0 0 0 36px rgba(255, 250, 242, 0.025);
}

[data-view="dashboard"] .focus-panel h2,
[data-view="dashboard"] .focus-panel .event-countdown strong,
[data-view="dashboard"] .focus-panel .orbit-caption strong {
  color: var(--paper-bright);
}

[data-view="dashboard"] .focus-panel .event-countdown strong {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(4.5rem, 8vw, 8rem);
  font-weight: 500;
}

[data-view="dashboard"] .focus-panel .event-countdown span,
[data-view="dashboard"] .focus-panel .orbit-caption p,
[data-view="dashboard"] .focus-panel .event-readiness span {
  color: rgba(255, 250, 242, 0.7);
}

[data-view="dashboard"] .stats-grid {
  margin-bottom: 42px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
}

[data-view="dashboard"] .stat-card,
[data-view="dashboard"] .stat-card:nth-child(n),
[data-view="dashboard"] .stat-card.accent {
  min-height: 122px;
  padding: 26px 22px;
  border-color: rgba(39, 27, 24, 0.24);
}

[data-view="dashboard"] .stat-card strong {
  color: var(--chapter-wine);
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(2.2rem, 3.2vw, 3.7rem);
  font-weight: 600;
}

[data-view="dashboard"] .stat-card span {
  color: var(--muted);
}

[data-view="dashboard"] .people-directory {
  padding: clamp(24px, 3vw, 42px);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
}

.people-strip-heading h2,
.directory-heading h2,
[data-view="gifts"] :is(.gift-discovery-heading, .journal-heading, .shortlist-heading) h2,
[data-view="gifts"] .gift-list-section > h2,
[data-view="reminders"] .reminder-layout .panel-heading h2 {
  color: var(--chapter-wine);
  font-family: "Bodoni Moda", Georgia, serif;
  font-weight: 600;
}

[data-view="dashboard"] .program-grid {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 7px;
}

[data-view="dashboard"] .program-panel {
  min-height: 270px;
  padding: 30px;
  border: 0;
  border-right: 1px solid var(--ink);
  border-radius: 0;
}

[data-view="dashboard"] .program-panel:last-child {
  border-right: 0;
}

[data-view="dashboard"] .coverage-panel { background: var(--chapter-butter); }
[data-view="dashboard"] .spend-panel { background: var(--chapter-sage); }
[data-view="dashboard"] .risk-panel { background: var(--editorial-pink); }

[data-view="dashboard"] .program-panel-heading h2 {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.55rem;
  font-weight: 600;
}

[data-view="dashboard"] .event-room-drawer > summary {
  background: var(--editorial-green);
}

[data-view="dashboard"] .event-room-drawer > summary::after {
  background: var(--chapter-butter);
}

/* The concierge gets the same confidence as the reference's image-led chapters. */
[data-view="gifts"] .gift-top-grid {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 7px;
}

[data-view="gifts"] .gift-top-grid .gift-assistant,
[data-view="gifts"] .gift-top-grid .recipient-profile-form,
[data-view="gifts"] .gift-top-grid .gift-readout {
  border: 0;
  border-radius: 0;
}

[data-view="gifts"] .gift-top-grid .gift-assistant {
  border-right: 1px solid var(--ink);
}

[data-view="gifts"] .gift-top-grid .gift-assistant-heading {
  min-height: 330px;
  padding: clamp(28px, 4vw, 54px);
  color: var(--paper-bright);
  background-color: #3b251f;
  background-image: url("./assets/invitations/flash-still-life.jpg");
  background-position: center;
  background-size: cover;
  background-blend-mode: multiply;
}

[data-view="gifts"] .gift-top-grid .gift-assistant-heading h2 {
  max-width: 10ch;
  color: var(--paper-bright);
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(3rem, 5.8vw, 6rem);
  font-weight: 600;
  line-height: 0.88;
}

[data-view="gifts"] .gift-top-grid .gift-assistant-heading p {
  max-width: 34ch;
  color: rgba(255, 250, 242, 0.78);
  font-size: 0.76rem;
}

[data-view="gifts"] .gift-top-grid .gift-assistant-heading button {
  color: var(--paper-bright);
  border-color: rgba(255, 250, 242, 0.62);
}

[data-view="gifts"] .gift-top-grid .gift-chat-prompts button:hover,
[data-view="gifts"] .gift-top-grid .gift-chat-composer button {
  color: var(--paper-bright);
  background: var(--chapter-wine);
  border-color: var(--chapter-wine);
}

[data-view="gifts"] .gift-top-grid .gift-chat-composer,
[data-view="gifts"] .gift-top-grid .gift-readout {
  background: var(--editorial-green);
}

[data-view="gifts"] .gift-discovery,
[data-view="gifts"] .gift-journal,
[data-view="gifts"] .gift-shortlist,
[data-view="gifts"] .gift-list-section {
  margin-top: 46px;
  padding-top: 34px;
}

/* Reminders remain sober and readable, with warmth instead of dashboard black. */
[data-view="reminders"] .reminder-overview {
  color: var(--paper-bright);
  background: var(--chapter-wine);
  border-color: var(--chapter-wine);
}

[data-view="reminders"] .reminder-overview strong {
  font-family: "Bodoni Moda", Georgia, serif;
  font-weight: 600;
}

[data-view="reminders"] .reminder-layout {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 7px;
}

[data-view="reminders"] .reminder-layout .people-panel,
[data-view="reminders"] .reminder-layout .reminder-panel {
  padding: clamp(24px, 3vw, 42px);
  border: 0;
  border-radius: 0;
}

[data-view="reminders"] .reminder-layout .people-panel {
  border-right: 1px solid var(--ink);
}

[data-view="reminders"] .reminder-layout .reminder-panel {
  background: var(--chapter-butter);
}

/* A creative tool can be more colorful, but it still belongs to this product. */
[data-view="studio"] .template-rail,
[data-view="studio"] .canvas-stage {
  background: #d9c8c3;
}

[data-view="studio"] .primary-action,
[data-view="studio"] #generateDraft,
[data-view="studio"] #studioGuestPreview {
  background: var(--chapter-wine);
  border-color: var(--chapter-wine);
}

@media (max-width: 980px) {
  [data-view="dashboard"] .visual-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
  }
}

@media (max-width: 700px) {
  body::before {
    inset: 0 0 auto;
    width: auto;
    height: 5px;
  }

  .brand strong {
    font-size: 1.4rem;
  }

  .product-view > .view-header,
  [data-view="studio"] > .view-header {
    min-height: 84px;
    margin-bottom: 22px;
  }

  .view-header h1,
  .product-view > .view-header h1,
  [data-view="dashboard"] > .view-header h1,
  [data-view="gifts"] .view-header h1,
  [data-view="studio"] > .view-header h1 {
    margin-right: auto;
    margin-left: 0;
    text-align: left;
    font-size: clamp(3rem, 15vw, 4.5rem);
  }

  [data-view="dashboard"] .visual-grid {
    grid-template-columns: 1fr;
  }

  [data-view="dashboard"] .focus-panel {
    min-height: 360px;
    border-top: 1px solid var(--ink);
    border-left: 0;
  }

  [data-view="dashboard"] .calendar-feature {
    height: 220px;
  }

  [data-view="dashboard"] .stats-grid {
    margin-bottom: 34px;
  }

  [data-view="dashboard"] .stat-card,
  [data-view="dashboard"] .stat-card:nth-child(n),
  [data-view="dashboard"] .stat-card.accent {
    min-height: 104px;
    border-color: rgba(39, 27, 24, 0.24);
  }

  [data-view="dashboard"] .stat-card:nth-child(2n) {
    border-right: 0;
  }

  [data-view="dashboard"] .program-grid {
    border-right: 0;
    border-radius: 7px 0 0 7px;
  }

  [data-view="dashboard"] .program-panel {
    border-right: 1px solid var(--ink);
  }

  [data-view="gifts"] .gift-top-grid {
    display: block;
  }

  [data-view="gifts"] .gift-top-grid .gift-assistant {
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }

  [data-view="gifts"] .gift-top-grid .gift-assistant-heading {
    min-height: 280px;
  }

  [data-view="gifts"] .gift-top-grid .gift-assistant-heading h2 {
    font-size: clamp(2.7rem, 12vw, 3.25rem);
  }

  [data-view="reminders"] .reminder-layout {
    display: block;
  }

  [data-view="reminders"] .reminder-layout .people-panel {
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }
}

/* The first poster directions are real digital invites, not framed stationery. */
.invite-preview:is(.template-editorial, .template-botanical, .template-postcard, .template-collage).has-photo {
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  min-height: 620px;
  padding: 0 !important;
  overflow: hidden;
  color: #fff;
  background: #111;
}

.invite-preview:is(.template-editorial, .template-botanical, .template-postcard, .template-collage).has-photo #invitePhoto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  clip-path: none;
  filter: saturate(1.05) contrast(1.03);
  border: 0;
  border-radius: 0;
}

.invite-preview:is(.template-editorial, .template-botanical, .template-postcard, .template-collage).has-photo::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  content: "";
  background: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 -260px 170px -110px rgba(0, 0, 0, 0.82);
}

.invite-preview:is(.template-editorial, .template-botanical, .template-postcard, .template-collage).has-photo .invite-copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-self: end;
  justify-content: flex-end;
  min-width: 0;
  min-height: 100%;
  padding: clamp(26px, 5vw, 54px);
  text-align: left;
}

.invite-preview:is(.template-editorial, .template-botanical, .template-postcard, .template-collage).has-photo .preview-kicker {
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 7px 10px;
  color: #111;
  font-family: "Manrope", "Helvetica Neue", sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  background: #f3ff53;
  border: 0;
  border-radius: 4px;
}

.invite-preview:is(.template-editorial, .template-botanical, .template-postcard, .template-collage).has-photo h3 {
  max-width: 92%;
  margin: 0 0 18px;
  color: #fff;
  font-family: "Manrope", "Helvetica Neue", sans-serif;
  font-size: clamp(3rem, 6.4vw, 6.15rem);
  font-weight: 700;
  line-height: 0.86;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: pretty;
}

.invite-preview:is(.template-editorial, .template-botanical, .template-postcard, .template-collage).has-photo p {
  display: none;
}

.invite-preview:is(.template-editorial, .template-botanical, .template-postcard, .template-collage).has-photo .invite-copy > span:last-child {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 9px 12px;
  color: #fff;
  font-family: "Manrope", "Helvetica Neue", sans-serif;
  font-size: 0.66rem;
  font-weight: 650;
  line-height: 1.3;
  background: rgba(7, 7, 7, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 5px;
  backdrop-filter: blur(10px);
}

.invite-preview.template-botanical.has-photo::after {
  background: rgba(5, 12, 55, 0.2);
  box-shadow: inset 0 -270px 180px -110px rgba(4, 8, 48, 0.92);
}

.invite-preview.template-botanical.has-photo .preview-kicker {
  background: #ff4fa0;
}

.invite-preview.template-botanical.has-photo h3 {
  color: #f3ff53;
}

.invite-preview.template-postcard.has-photo::after {
  background: rgba(7, 21, 52, 0.12);
  box-shadow: inset 0 -280px 190px -110px rgba(4, 12, 30, 0.9);
}

.invite-preview.template-postcard.has-photo .preview-kicker {
  color: #fff;
  background: #f23d3d;
}

.invite-preview.template-collage.has-photo::after {
  background: rgba(13, 8, 22, 0.14);
  box-shadow: inset 0 -290px 190px -100px rgba(13, 4, 20, 0.9);
}

.invite-preview.template-collage.has-photo h3 {
  max-width: 90%;
  font-family: "Bodoni Moda", Georgia, serif;
  font-weight: 500;
}

.invite-preview.template-collage.has-photo .preview-kicker {
  color: #fff;
  background: #2d42ff;
}

@media (max-width: 560px) {
  .invite-preview:is(.template-editorial, .template-botanical, .template-postcard, .template-collage).has-photo {
    min-height: 520px;
  }

  .invite-preview:is(.template-editorial, .template-botanical, .template-postcard, .template-collage).has-photo h3 {
    max-width: 100%;
    margin-bottom: 15px;
    font-size: clamp(2.9rem, 14vw, 3.55rem);
  }

  .invite-preview:is(.template-editorial, .template-botanical, .template-postcard, .template-collage).has-photo .invite-copy {
    padding: 24px 22px;
  }

  .invite-preview:is(.template-editorial, .template-botanical, .template-postcard, .template-collage).has-photo .invite-copy > span:last-child {
    font-size: 0.6rem;
  }
}

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    height: auto;
    align-items: center;
    gap: 24px;
    padding: 16px 22px;
    width: calc(100% - 24px);
    margin: 12px;
    border-radius: 18px;
  }

  .nav-list {
    grid-auto-flow: column;
    justify-content: end;
    overflow-x: auto;
  }

  .nav-list a {
    min-width: max-content;
    padding-inline: 14px;
    border-bottom: 0;
  }

  .nav-list a::after,
  .mini-panel {
    display: none;
  }
}

@media (max-width: 900px) {
  .workspace {
    padding: 22px 18px 52px;
  }

  .topbar,
  .panel-heading {
    align-items: stretch;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .topbar .primary-action,
  .panel-heading select,
  .panel-heading button {
    width: 100%;
  }

  .topbar > .primary-action {
    width: calc(100% - 16px);
    margin-inline: 8px;
  }

  .hero-scene {
    min-height: 510px;
  }

  .stats-grid {
    margin-inline: 14px;
  }

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

  .main-grid,
  .studio-grid,
  .visual-grid {
    grid-template-columns: 1fr;
  }

  .focus-panel,
  .data-panel {
    margin: 0;
  }

  .inline-form,
  .gift-form,
  .form-row,
.studio-controls {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .sidebar {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .brand {
    padding-inline: 4px;
  }

  .nav-list {
    display: flex;
    justify-content: start;
    gap: 14px;
    padding-bottom: 2px;
  }

  .nav-list a {
    padding: 7px 0;
    white-space: nowrap;
  }

  .workspace {
    padding-inline: 12px;
  }

  .topbar {
    padding-top: 14px;
  }

  .hero-copy {
    padding-inline: 6px;
  }

  .hero-scene {
    min-height: 610px;
    margin-top: 24px;
    background-position: 42% center;
    border-radius: 22px;
  }

  .hero-widget {
    right: 18px;
    bottom: 58px;
    width: calc(100% - 36px);
    border-radius: 20px;
  }

  .stats-grid {
    margin: -34px 8px 24px;
  }

  h1 {
    font-size: clamp(4rem, 20vw, 6rem);
  }

  .topbar-copy {
    font-size: 1.15rem;
  }

  .stats-grid {
    gap: 8px;
  }

  .stat-card {
    min-height: 112px;
    padding: 15px;
  }

  .stat-card strong {
    font-size: 2.2rem;
  }

  .panel {
    padding: 15px;
    border-radius: 16px;
  }

  .calendar-day {
    min-height: 55px;
    padding: 6px;
  }

  .calendar-day small {
    display: none;
  }

  .finder-head {
    display: grid;
  }

  .finder-head select,
  .finder-grid {
    width: 100%;
  }

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

  .idea-card,
  .idea-card:nth-child(2),
  .idea-card:nth-child(3),
  .idea-card:nth-child(4) {
    min-height: 175px;
  }

  .event-card,
  .item-card,
  .timeline-item {
    grid-template-columns: 1fr;
  }

  .item-actions {
    justify-content: flex-start;
  }

  .invite-preview {
    min-height: 440px;
    padding: 26px;
  }

  .designer-shell {
    padding: 14px;
  }

  .designer-tools {
    grid-template-columns: 1fr;
  }

  .template-rail {
    grid-template-columns: none;
    grid-auto-columns: 124px;
    scroll-snap-type: x proximity;
  }

  .template-choice {
    scroll-snap-align: start;
  }

  .design-control-grid {
    grid-template-columns: 1fr;
  }

  .invite-preview {
    width: 100%;
    min-height: 0;
    aspect-ratio: 4 / 5;
    border-width: 7px;
  }
}

/* Gift inspiration and personalization */
.inspiration-inbox {
  margin: 0 0 54px;
  padding: clamp(26px, 4vw, 46px);
  background: #eee9e3;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}

.inspiration-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}

.inspiration-heading h2 {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3.2rem);
  font-weight: 500;
}

.inspiration-heading span {
  color: var(--muted);
  font-size: 0.72rem;
}

.inspiration-form {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-strong);
}

.inspiration-form label {
  grid-column: span 5;
  font-size: 0.7rem;
}

.inspiration-form .inspiration-url-field,
.inspiration-form .inspiration-note-field {
  grid-column: span 7;
}

.inspiration-image-field input {
  padding: 7px;
  background: rgba(255, 255, 255, 0.46);
}

.inspiration-save-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.inspiration-save-row span {
  color: var(--muted);
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1rem;
}

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

.inspiration-empty {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  color: var(--muted);
}

.inspiration-item {
  display: grid;
  grid-template-rows: 128px auto auto;
  min-width: 0;
  overflow: hidden;
  background: rgba(250, 248, 243, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.inspiration-item > img,
.inspiration-mark {
  width: 100%;
  height: 128px;
}

.inspiration-item > img {
  object-fit: cover;
}

.inspiration-mark {
  display: grid;
  place-items: center;
  color: #59655d;
  background: #dfe5dc;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 3rem;
}

.inspiration-copy {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 16px;
}

.inspiration-copy span {
  color: var(--muted);
  font-size: 0.68rem;
}

.inspiration-copy strong {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.05;
}

.inspiration-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.45;
}

.inspiration-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px 12px;
}

.inspiration-actions a,
.inspiration-actions button {
  min-height: 32px;
  padding: 6px 9px;
  font-size: 0.64rem;
}

.inspiration-actions a {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
}

.inspiration-actions .icon-delete {
  width: 32px;
  margin-left: auto;
  padding: 0;
}

.gift-form {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.gift-form > label:nth-child(1) { grid-column: span 4; }
.gift-form > label:nth-child(2) { grid-column: span 2; }
.gift-form > label:nth-child(3) { grid-column: span 3; }
.gift-form > label:nth-child(4) { grid-column: span 5; }
.gift-form > label:nth-child(5) { grid-column: span 7; }
.gift-form > label:nth-child(6) { grid-column: span 4; }
.gift-form > label:nth-child(7) { grid-column: span 3; }
.gift-form > label:nth-child(8) { grid-column: span 2; }

.gift-form > button {
  grid-column: span 3;
}

.personalization-line {
  margin-top: 7px !important;
  color: #506058;
  font-size: 0.74rem;
}

.personalization-line b {
  font-weight: 700;
}

@media (max-width: 980px) {
  .inspiration-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gift-form > label:nth-child(n),
  .gift-form > button {
    grid-column: span 6;
  }
}

@media (max-width: 640px) {
  .inspiration-inbox {
    padding: 22px 16px;
  }

  .inspiration-form label,
  .inspiration-form .inspiration-url-field,
  .inspiration-form .inspiration-note-field {
    grid-column: 1 / -1;
  }

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

  .inspiration-list {
    grid-template-columns: 1fr;
  }

  .inspiration-item {
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  .inspiration-item > img,
  .inspiration-mark {
    grid-row: 1 / 3;
    width: 96px;
    height: 100%;
    min-height: 150px;
  }

  .inspiration-actions {
    grid-column: 2;
  }

  .gift-form > label:nth-child(n),
  .gift-form > button {
    grid-column: 1 / -1;
  }
}

/* People calendar and gift memory */
.people-strip {
  margin: 28px 0 68px;
  padding: 26px 0 30px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.people-strip-heading,
.person-history-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.people-strip-heading h2,
.person-history-heading h3 {
  margin: 0;
}

.people-strip-heading span,
.person-history-heading span {
  color: var(--muted);
  font-size: 0.7rem;
}

.people-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.person-chip {
  display: grid;
  grid-template-columns: 42px minmax(100px, 1fr);
  grid-template-rows: auto auto;
  flex: 0 0 210px;
  gap: 2px 11px;
  min-height: 72px;
  padding: 12px;
  text-align: left;
  background: #ebe8e1;
  border-color: var(--line);
  border-radius: 8px;
}

.person-chip > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #f7f3ec;
  background: #66796e;
  border-radius: 50%;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.35rem;
}

.person-chip strong {
  align-self: end;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.1rem;
  font-weight: 500;
}

.person-chip small {
  color: var(--muted);
  font-size: 0.62rem;
}

.person-chip.selected {
  background: #dfe7e1;
  border-color: #7a8c82;
}

.calendar-day[data-person-id] small {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.9;
}

.calendar-day[data-person-id]::after {
  position: absolute;
  right: 8px;
  top: 8px;
  content: "\2661";
  color: currentColor;
  font-size: 0.72rem;
  opacity: 0.72;
}

.person-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: auto;
  color: var(--ink);
  background: #f4f0e9;
  border: 1px solid rgba(35, 48, 40, 0.3);
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(25, 34, 29, 0.28);
}

.person-dialog::backdrop {
  background: rgba(30, 39, 34, 0.56);
  backdrop-filter: blur(6px);
}

.person-sheet {
  display: grid;
}

.person-sheet-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  padding: 30px;
  background: #dfe7e1;
  border-bottom: 1px solid var(--line-strong);
}

.person-sheet-header > div {
  display: flex;
  align-items: center;
  gap: 16px;
}

.person-sheet-header > div > span {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  color: #f7f3ec;
  background: #53685d;
  border-radius: 50%;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 2rem;
}

.person-sheet-header h2 {
  margin: 0;
  font-size: clamp(2.5rem, 7vw, 4.4rem);
  font-weight: 500;
  line-height: 0.92;
}

.person-sheet-header p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.person-sheet-header > button {
  width: 42px;
  min-height: 42px;
  padding: 0;
  font-size: 1.5rem;
}

.person-sheet-brief,
.person-history-section,
.past-gift-form,
.person-sheet-footer {
  padding: 26px 30px;
}

.person-sheet-brief,
.person-history-section,
.past-gift-form {
  border-bottom: 1px solid var(--line-strong);
}

.person-sheet h3 {
  margin: 0 0 13px;
  font-size: 1.65rem;
  font-weight: 500;
}

.person-sheet-brief > p {
  max-width: 54ch;
  margin: 0;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.3;
}

.person-signal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}

.person-signal-list span {
  padding: 7px 9px;
  color: #45564d;
  background: #e6e4dd;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.66rem;
}

.person-history {
  display: grid;
}

.person-history-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto 30px;
  align-items: center;
  gap: 14px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
}

.person-history-item time {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.15rem;
}

.person-history-item strong {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 500;
}

.person-history-item p,
.person-history-empty {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.7rem;
}

.gift-outcome {
  padding: 6px 8px;
  background: #e3e2dc;
  border-radius: 6px;
  font-size: 0.62rem;
}

.gift-outcome.loved { color: #345542; background: #d6e5da; }
.gift-outcome.liked { color: #52613f; background: #e2e7d4; }
.gift-outcome.miss { color: #734a45; background: #ecd9d4; }

.person-history-delete {
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 50%;
  font-size: 1.15rem;
  line-height: 1;
}

.person-history-delete:hover {
  color: #734a45;
  background: #ecd9d4;
}

.past-gift-form {
  display: grid;
  grid-template-columns: minmax(160px, 1.3fr) 90px minmax(130px, 0.8fr);
  gap: 10px;
  align-items: end;
}

.past-gift-form h3,
.past-gift-note {
  grid-column: 1 / -1;
}

.past-gift-form label {
  font-size: 0.68rem;
}

.past-gift-form button {
  grid-column: 1 / -1;
  justify-self: start;
}

.person-sheet-footer {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 620px) {
  .person-sheet-header,
  .person-sheet-brief,
  .person-history-section,
  .past-gift-form,
  .person-sheet-footer {
    padding: 22px 18px;
  }

  .person-sheet-header > div > span {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
  }

  .person-history-item {
    grid-template-columns: 46px minmax(0, 1fr) 30px;
  }

  .person-history-item .gift-outcome {
    grid-column: 2;
    justify-self: start;
  }

  .person-history-delete {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  .past-gift-form {
    grid-template-columns: 1fr;
  }

  .past-gift-form h3,
  .past-gift-note,
  .past-gift-form button {
    grid-column: 1;
  }

  .past-gift-form button,
  .person-sheet-footer button {
    width: 100%;
  }
}

/* Occasion visual system */
:root {
  --paper: #fbf7ef;
  --paper-soft: #edf0ea;
  --cream: #fffdf7;
  --ink: #17221c;
  --muted: #606b64;
  --quiet: #8a958e;
  --moss: #1c604e;
  --moss-deep: #153f35;
  --sage: #b9e777;
  --blush: #d9b5c2;
  --rose: #c94e70;
  --butter: #f0c58e;
  --sky: #b9d2ed;
  --line: rgba(23, 34, 28, 0.15);
  --line-strong: rgba(23, 34, 28, 0.32);
}

body {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  background: var(--paper);
}

h1,
h2,
h3,
.brand strong,
.stat-card strong,
.event-card h3,
.item-card strong,
.timeline-item strong,
.idea-card strong {
  font-family: "Bodoni Moda", Georgia, serif;
}

.app-shell {
  grid-template-columns: 238px minmax(0, 1fr);
}

.sidebar {
  top: 0;
  height: 100vh;
  margin: 0;
  padding: 34px 28px;
  color: var(--cream);
  background: var(--moss-deep);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.brand {
  grid-template-columns: 42px minmax(0, 1fr);
}

.brand-mark {
  width: 42px;
  height: 42px;
  color: var(--ink);
  font-family: "Bodoni Moda", Georgia, serif;
  font-style: normal;
  background: var(--sage);
  border-radius: 50% 50% 8px 50%;
  box-shadow: none;
}

.brand strong {
  font-size: 1.45rem;
}

.brand span {
  color: rgba(255, 253, 247, 0.62);
}

.nav-list a {
  position: relative;
  padding: 13px 0;
  color: rgba(255, 253, 247, 0.63);
  border-bottom-color: rgba(255, 253, 247, 0.13);
}

.nav-list a::before {
  position: absolute;
  top: 50%;
  left: -28px;
  width: 0;
  height: 3px;
  content: "";
  background: var(--sage);
  transform: translateY(-50%);
  transition: width 180ms ease;
}

.nav-list a.active::before,
.nav-list a:hover::before {
  width: 18px;
}

.nav-list a::after {
  display: none;
}

.mini-panel {
  color: var(--ink);
  background: var(--sky);
  border-radius: 8px;
}

.workspace {
  max-width: 1740px;
  padding: 38px clamp(30px, 4.8vw, 82px) 90px;
}

.view-header {
  min-height: 100px;
  margin-bottom: 34px;
  border-bottom: 2px solid var(--ink);
}

.view-header h1 {
  font-size: clamp(3.5rem, 5vw, 5.4rem);
  font-weight: 500;
  line-height: 0.88;
}

button {
  min-height: 40px;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  background: var(--cream);
  border-radius: 8px;
}

.primary-action {
  color: var(--cream);
  background: var(--rose);
  border-color: var(--rose);
}

.primary-action:hover {
  color: var(--ink);
  background: var(--sage);
  border-color: var(--sage);
}

.stats-grid {
  border: 0;
}

.stat-card,
.stat-card:nth-child(1),
.stat-card:nth-child(2),
.stat-card:nth-child(3),
.stat-card.accent {
  min-height: 132px;
  padding: 24px;
  border-right: 8px solid var(--paper);
}

.stat-card:nth-child(1) { background: var(--sage); }
.stat-card:nth-child(2) { background: var(--sky); }
.stat-card:nth-child(3) { background: var(--butter); }
.stat-card.accent { background: var(--blush); }

.stat-card strong {
  font-size: 3rem;
}

.panel {
  border-top-width: 2px;
  border-top-color: var(--ink);
}

.focus-panel {
  padding-inline: 18px;
  background: var(--sky);
  border-top: 0;
}

.data-panel {
  padding-inline: 18px;
  background: var(--butter);
  border-top: 0;
}

.focus-panel .panel-heading,
.data-panel .panel-heading {
  padding-top: 22px;
}

.orbit-core {
  background: var(--moss-deep);
}

.event-card.selected {
  background: rgba(185, 231, 119, 0.42);
}

.template-rail {
  grid-auto-columns: minmax(160px, 0.8fr);
  gap: 14px;
  padding: 2px 0 22px;
}

.template-choice {
  min-width: 150px;
  min-height: 220px;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}

.template-choice:hover,
.template-choice.active {
  color: var(--ink);
  background: var(--cream);
  border-color: var(--rose);
  box-shadow: 8px 8px 0 var(--rose);
  transform: translate(-3px, -3px);
}

.template-choice strong {
  min-height: 48px;
  padding: 11px 12px 12px;
  font-family: "Manrope", sans-serif;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.25;
}

.template-mini {
  aspect-ratio: 5 / 6;
  background-position: center;
  background-size: cover;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.template-mini i {
  display: none;
}

.template-mini::after {
  position: absolute;
  inset: 0;
  content: "";
  background: rgba(19, 28, 23, 0.12);
}

.mini-editorial { background-image: url("./assets/invitations/party-flash.jpg"); }
.mini-botanical { background-image: url("./assets/invitations/chrome-cake.jpg"); }
.mini-postcard { background-image: url("./assets/invitations/rooftop-bluehour.jpg"); }
.mini-collage { background-image: url("./assets/invitations/after-dark-still.jpg"); }
.mini-soiree { background-image: url("./assets/invitations/party-flash.jpg"); }
.mini-ribbon { background-image: url("./assets/invitations/chrome-cake.jpg"); }
.mini-scrapbook { background-image: url("./assets/invitations/rooftop-bluehour.jpg"); }
.mini-modern { background-image: url("./assets/invitations/after-dark-still.jpg"); }

.designer-shell {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 18px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.canvas-stage {
  position: relative;
  z-index: 0;
  display: grid;
  order: 1;
  min-height: 820px;
  padding: clamp(30px, 5vw, 70px);
  overflow: hidden;
  place-items: center;
  background-color: #6f6b72;
  background-image: url("./assets/invitations/party-flash.jpg");
  background-position: center;
  background-size: cover;
  border-radius: 8px;
}

.canvas-stage::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: rgba(23, 34, 28, 0.28);
}

.designer-tools {
  position: sticky;
  top: 24px;
  order: 2;
  max-height: 820px;
  padding: 24px;
  overflow-y: auto;
  background: var(--cream);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}

.ai-designer {
  padding-bottom: 24px;
}

.ai-designer label {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.85rem;
  font-style: normal;
  font-weight: 500;
}

.ai-designer textarea {
  min-height: 92px;
  background: var(--paper);
}

.design-detail-panel h3 {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.45rem;
}

.segmented-control {
  border-radius: 8px;
}

.palette-swatch {
  border-radius: 4px;
}

.invite-preview {
  width: min(100%, 520px);
  border: 8px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  box-shadow: 0 34px 90px rgba(8, 10, 9, 0.34);
}

.invite-preview h3 {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(3.1rem, 5vw, 5.5rem);
}

.typeface-fashion h3,
.typeface-modern h3,
.typeface-modern p,
.template-modern h3 {
  font-family: "Manrope", sans-serif;
}

.idea-card {
  min-height: 260px;
  color: var(--cream);
  background-position: center;
  background-size: cover;
  border: 0;
  border-radius: 8px;
}

.idea-card:nth-child(1) { background-image: url("./assets/invitations/rooftop-bluehour.jpg"); }
.idea-card:nth-child(2) { background-image: url("./assets/invitations/after-dark-still.jpg"); }
.idea-card:nth-child(3) { background-image: url("./assets/invitations/party-flash.jpg"); }
.idea-card:nth-child(4) { background-image: url("./assets/invitations/chrome-cake.jpg"); }

.idea-card::after {
  inset: 0;
  width: auto;
  height: auto;
  background: rgba(18, 24, 20, 0.47);
  border: 0;
  border-radius: 0;
}

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

.idea-card span,
.idea-card p {
  color: rgba(255, 253, 247, 0.8);
}

.idea-card strong {
  font-size: 1.8rem;
}

.idea-card button {
  color: var(--ink);
  background: var(--sage);
  border-color: var(--sage);
}

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    width: calc(100% - 24px);
    height: auto;
    margin: 12px;
    padding: 18px 22px;
    align-items: center;
    border-radius: 8px;
  }

  .nav-list {
    grid-auto-flow: column;
    justify-content: end;
    overflow-x: auto;
  }

  .nav-list a {
    min-width: max-content;
    padding-inline: 14px;
    border-bottom: 0;
  }

  .nav-list a::before,
  .mini-panel {
    display: none;
  }
}

@media (max-width: 980px) {
  .designer-shell {
    grid-template-columns: 1fr;
  }

  .canvas-stage {
    min-height: 680px;
  }

  .designer-tools {
    position: static;
    max-height: none;
  }
}

@media (max-width: 600px) {
  .sidebar {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .nav-list {
    display: flex;
    justify-content: start;
    gap: 14px;
  }

  .workspace {
    padding-inline: 14px;
  }

  .view-header h1 {
    font-size: clamp(3.1rem, 14vw, 4.2rem);
  }

  .stat-card,
  .stat-card:nth-child(1),
  .stat-card:nth-child(2),
  .stat-card:nth-child(3),
  .stat-card.accent {
    border-right: 4px solid var(--paper);
    border-bottom: 4px solid var(--paper);
  }

  .template-rail {
    grid-auto-columns: 142px;
  }

  .template-choice {
    min-width: 136px;
    min-height: 196px;
  }

  .canvas-stage {
    min-height: 560px;
    padding: 20px;
  }

  .designer-tools {
    padding: 18px;
  }
}

/* Product views */
.product-view[hidden] {
  display: none;
}

.product-view.active {
  display: block;
}

.view-header {
  display: flex;
  min-height: 112px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 42px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-strong);
}

.view-header h1 {
  margin: 0;
  font-size: clamp(3.7rem, 5.4vw, 5.8rem);
  line-height: 0.82;
}

.view-actions {
  display: flex;
  gap: 10px;
}

.view-header > button,
.view-actions button {
  min-width: 132px;
}

[data-view="dashboard"] .stats-grid {
  margin-top: 0;
}

.form-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.form-actions .primary-action {
  width: 100%;
}

#deleteEvent:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.mini-panel {
  display: grid;
  gap: 10px;
}

.mini-panel label {
  color: rgba(38, 48, 39, 0.68);
  font-size: 0.68rem;
  font-weight: 600;
}

.mini-panel select {
  padding: 10px;
  background: rgba(251, 248, 241, 0.72);
}

.mini-panel strong {
  margin-top: 12px;
}

[data-view="studio"] .studio-grid,
[data-view="gifts"] .gift-panel {
  margin-bottom: 0;
}

[data-view="studio"] .invitation-panel,
[data-view="gifts"] .gift-panel {
  padding-top: 0;
  border-top: 0;
}

.reminder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: clamp(36px, 5vw, 72px);
}

.finder-head h2 {
  margin: 0;
  font-size: clamp(2rem, 2.7vw, 3rem);
  font-weight: 500;
}

@media (max-width: 900px) {
  .view-header {
    min-height: 0;
    flex-direction: column;
    margin-bottom: 32px;
  }

  .view-header h1 {
    font-size: clamp(3.3rem, 13vw, 4.8rem);
  }

  .view-header > button,
  .view-actions,
  .view-actions button {
    width: 100%;
  }

  .reminder-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

@media (max-width: 600px) {
  .view-actions,
  .form-actions {
    grid-template-columns: 1fr;
  }

  .view-actions {
    display: grid;
  }

  .mini-panel {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    padding: 12px;
  }

  .mini-panel strong,
  .mini-panel p {
    display: none;
  }

  .mini-panel label {
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Editorial workspace */
.workspace {
  padding: 34px clamp(24px, 4vw, 72px) 84px;
}

.topbar {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  padding: 12px 0 0;
}

.hero-copy {
  padding: 0;
}

h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(3.6rem, 6.4vw, 6.8rem);
  line-height: 0.88;
}

h2 {
  margin: 0;
  font-size: clamp(2rem, 2.7vw, 3rem);
  font-weight: 500;
  line-height: 0.95;
}

h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.55rem;
  font-weight: 600;
}

.topbar > .primary-action {
  align-self: start;
  margin: 8px 0 0;
  border-radius: 8px;
  box-shadow: none;
}

.hero-scene {
  min-height: 0;
  aspect-ratio: 16 / 7;
  margin-top: 42px;
  background-position: center 54%;
  border-radius: 32px 32px 104px 32px;
  box-shadow: 0 28px 72px rgba(57, 66, 56, 0.14);
}

.hero-scene::before {
  display: none;
}

.stats-grid {
  position: static;
  z-index: auto;
  gap: 0;
  margin: 38px 0 70px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.stat-card,
.stat-card:nth-child(1),
.stat-card:nth-child(2),
.stat-card:nth-child(3),
.stat-card.accent {
  min-height: 118px;
  padding: 23px 26px 20px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.stat-card:last-child {
  border-right: 0;
}

.stat-card::after {
  display: none;
}

.stat-card strong {
  margin: 0 0 13px;
  font-size: 3.1rem;
}

.stat-card span,
.stat-card.accent span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 500;
}

.visual-grid,
.main-grid,
.studio-grid {
  gap: clamp(28px, 4vw, 60px);
  margin-bottom: 70px;
}

.panel,
.stat-card,
.invitation-panel {
  border-radius: 0;
  box-shadow: none;
}

.panel {
  padding: 34px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line-strong);
}

.panel-heading {
  margin-bottom: 28px;
  padding: 0;
  align-items: center;
  border: 0;
}

.panel-heading::before {
  display: none;
}

.panel-heading select,
.panel-heading button,
.finder-head select {
  border-radius: 8px;
}

.calendar-panel,
.focus-panel,
.data-panel {
  margin: 0;
  background: transparent;
}

.visual-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.72fr) minmax(220px, 0.58fr);
}

.focus-panel,
.data-panel {
  padding-inline: clamp(0px, 1vw, 14px);
}

.occasion-orbit {
  min-height: 330px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  backdrop-filter: none;
}

.main-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
}

.invitation-panel {
  padding: 42px 0 0;
  background: transparent;
}

.template-rail {
  gap: 14px;
  margin: 0 0 34px;
  padding: 2px 2px 18px;
}

.template-choice {
  min-height: 168px;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: none;
}

.template-choice:hover,
.template-choice.active {
  background: var(--cream);
  border-color: var(--moss-deep);
  box-shadow: none;
}

.designer-shell {
  gap: clamp(30px, 5vw, 72px);
  padding: clamp(28px, 4vw, 56px);
  background: #dfddd2;
  border: 0;
  border-radius: 28px 28px 88px 28px;
  box-shadow: none;
}

.designer-tools {
  gap: 24px;
}

.ai-designer {
  gap: 14px;
  padding-bottom: 28px;
}

.ai-designer label {
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  font-style: normal;
  font-weight: 500;
  line-height: 0.95;
}

.ai-designer textarea {
  min-height: 126px;
}

.design-detail-panel {
  gap: 16px;
  padding: 26px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}

.design-detail-panel h3 {
  margin: 0 0 4px;
  font-size: 1.55rem;
  line-height: 1;
}

.canvas-stage {
  align-self: start;
}

.invite-preview {
  border-radius: 8px;
}

.invite-preview .preview-kicker {
  display: none;
}

.invite-preview h3 {
  margin-top: 0;
}

.gift-finder {
  margin: 0 0 32px;
  padding: 26px 0 0;
  border-top: 1px solid var(--line);
}

.finder-head h3 {
  margin: 0;
  font-size: 1.55rem;
}

.idea-card {
  border-radius: 8px;
  box-shadow: none;
}

.mini-panel strong {
  margin-top: 0;
}

@media (max-width: 900px) {
  .workspace {
    padding: 24px 18px 58px;
  }

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

  .topbar > .primary-action {
    width: 100%;
    margin: 0;
  }

  .hero-scene {
    aspect-ratio: 4 / 3;
    min-height: 0;
  }

  .stats-grid {
    margin: 26px 0 56px;
  }

  .visual-grid,
  .main-grid,
  .studio-grid {
    grid-template-columns: 1fr;
    gap: 44px;
    margin-bottom: 56px;
  }

  .designer-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  h1 {
    font-size: clamp(3.25rem, 16vw, 4.8rem);
  }

  .hero-scene {
    aspect-ratio: 4 / 5;
    min-height: 0;
    margin-top: 26px;
    background-position: 44% center;
    border-radius: 24px 24px 64px 24px;
  }

  .stats-grid {
    gap: 0;
    margin: 22px 0 50px;
  }

  .stat-card,
  .stat-card:nth-child(1),
  .stat-card:nth-child(2),
  .stat-card:nth-child(3),
  .stat-card.accent {
    min-height: 100px;
    padding: 18px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .stat-card:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .stat-card:nth-child(odd) {
    border-right: 1px solid var(--line);
  }

  .stat-card strong {
    margin-bottom: 9px;
    font-size: 2.3rem;
  }

  .panel {
    padding: 28px 0 0;
    border-radius: 0;
  }

  .panel-heading {
    align-items: stretch;
  }

  .designer-shell {
    padding: 22px 16px 34px;
    border-radius: 20px 20px 52px 20px;
  }

  .ai-designer label {
    font-size: 2rem;
  }
}

/* Final art direction */
h3 {
  font-family: "Bodoni Moda", Georgia, serif;
}

.workspace {
  max-width: 1740px;
  padding: 38px clamp(30px, 4.8vw, 82px) 90px;
}

.stats-grid {
  margin: 0 0 70px;
  border: 0;
}

.stat-card,
.stat-card:nth-child(1),
.stat-card:nth-child(2),
.stat-card:nth-child(3),
.stat-card.accent {
  min-height: 132px;
  padding: 24px;
  border: 0;
  border-right: 8px solid var(--paper);
}

.stat-card:nth-child(1) { background: var(--sage); }
.stat-card:nth-child(2) { background: var(--sky); }
.stat-card:nth-child(3) { background: var(--butter); }
.stat-card.accent { background: var(--blush); }

.focus-panel,
.data-panel {
  padding-inline: 18px;
  border-top: 0;
}

.focus-panel { background: var(--sky); }
.data-panel { background: var(--butter); }

.focus-panel .panel-heading,
.data-panel .panel-heading {
  padding-top: 22px;
}

.template-rail {
  grid-auto-columns: minmax(160px, 0.8fr);
  gap: 14px;
  padding: 2px 0 22px;
}

.template-choice {
  min-width: 150px;
  min-height: 220px;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line-strong);
}

.template-choice:hover,
.template-choice.active {
  color: var(--ink);
  background: var(--cream);
  border-color: var(--rose);
  box-shadow: 8px 8px 0 var(--rose);
  transform: translate(-3px, -3px);
}

.template-choice strong {
  min-height: 48px;
  padding: 11px 12px 12px;
  font-family: "Manrope", sans-serif;
  font-size: 0.75rem;
  font-style: normal;
}

.designer-shell {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 18px;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.designer-tools {
  position: sticky;
  top: 24px;
  order: 2;
  max-height: 820px;
  padding: 24px;
  overflow-y: auto;
  background: var(--cream);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}

.canvas-stage {
  order: 1;
  align-self: stretch;
}

.ai-designer label {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.85rem;
  line-height: 1;
}

.ai-designer textarea {
  min-height: 92px;
}

.design-detail-panel h3 {
  font-family: "Bodoni Moda", Georgia, serif;
}

@media (max-width: 980px) {
  .designer-shell {
    grid-template-columns: 1fr;
  }

  .designer-tools {
    position: static;
    max-height: none;
  }
}

@media (max-width: 900px) {
  .workspace {
    padding: 24px 18px 58px;
  }
}

@media (max-width: 600px) {
  .stat-card,
  .stat-card:nth-child(1),
  .stat-card:nth-child(2),
  .stat-card:nth-child(3),
  .stat-card.accent {
    border-right: 4px solid var(--paper);
    border-bottom: 4px solid var(--paper);
  }

  .template-rail {
    grid-auto-columns: 142px;
  }

  .template-choice {
    min-width: 136px;
    min-height: 196px;
  }

  .designer-shell {
    padding: 0;
    border-radius: 0;
  }

  .canvas-stage {
    min-height: 560px;
    padding: 20px;
  }

  .designer-tools {
    padding: 18px;
  }
}

/* Invitation art direction, kept last so every layout shares the same visual contract. */
.decoration-halo .invite-decoration {
  display: none;
}

.invite-preview.has-photo:not(.photo-full) {
  grid-template-rows: minmax(210px, 1.05fr) auto;
  gap: clamp(22px, 3vw, 36px);
  align-content: stretch;
}

.invite-preview.has-photo:not(.photo-full) #invitePhoto {
  width: 100%;
  height: 100%;
  min-height: 210px;
  object-fit: cover;
  border-radius: 2px;
  filter: saturate(0.86) contrast(0.94);
}

.template-editorial.has-photo {
  padding: clamp(28px, 4vw, 48px);
}

.template-editorial.has-photo #invitePhoto {
  border: 1px solid var(--invite-line);
}

.template-editorial.has-photo h3,
.template-editorial.has-photo p {
  max-width: none;
}

.template-editorial.has-photo h3 {
  margin: 14px 0 16px;
  font-size: clamp(2.7rem, 5vw, 5rem);
}

.template-botanical.has-photo #invitePhoto {
  clip-path: ellipse(48% 49% at 50% 50%);
}

.template-botanical.has-photo {
  padding-inline: clamp(28px, 5vw, 68px);
}

.template-soirée.has-photo,
.template-modern.has-photo,
.template-postcard.has-photo,
.photo-full.has-photo {
  display: grid;
  grid-template-rows: 1fr;
  align-content: end;
}

.template-soirée.has-photo #invitePhoto,
.template-modern.has-photo #invitePhoto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
}

.template-soirée.has-photo::after,
.template-modern.has-photo::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  content: "";
  background: rgba(18, 25, 21, 0.46);
}

.template-soirée.has-photo .invite-copy,
.template-modern.has-photo .invite-copy {
  z-index: 2;
  align-self: end;
  color: #fffaf0;
}

.template-ribbon.has-photo #invitePhoto {
  border-radius: 50% 50% 4px 4px;
}

.template-scrapbook.has-photo #invitePhoto {
  border-radius: 0;
}

@media (max-width: 600px) {
  .nav-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    overflow: visible;
  }

  .nav-list a {
    min-width: 0;
    padding: 8px 2px;
    overflow: hidden;
    font-size: 0.67rem;
    text-align: center;
    text-overflow: ellipsis;
  }

  .invite-preview.has-photo:not(.photo-full) {
    grid-template-rows: minmax(142px, 0.82fr) auto;
    gap: 14px;
    padding: 18px;
    border-width: 6px;
  }

  .invite-preview.has-photo:not(.photo-full) #invitePhoto {
    min-height: 142px;
  }

  .invite-preview.has-photo:not(.photo-full)::before {
    inset: 9px;
  }

  .invite-preview.has-photo:not(.photo-full) h3 {
    margin: 8px 0 10px;
    font-size: 2.45rem;
    line-height: 0.82;
  }

  .invite-preview.has-photo:not(.photo-full) p {
    font-size: 0.67rem;
    line-height: 1.35;
  }

  .invite-preview.has-photo:not(.photo-full) .preview-kicker,
  .invite-preview.has-photo:not(.photo-full) .invite-copy > span:last-child {
    font-size: 0.56rem;
  }
}

/* Working product refinements */
:root {
  --paper: #f7f4ef;
  --paper-soft: #f0ede7;
  --cream: #fcfaf6;
  --ink: #27332e;
  --muted: #6d756f;
  --quiet: #969c97;
  --moss: #617a70;
  --moss-deep: #34483f;
  --sage: #dce6dc;
  --sky: #dfe8ed;
  --butter: #efe5d0;
  --blush: #eadde1;
  --rose: #a67a87;
  --line: rgba(39, 51, 46, 0.11);
  --line-strong: rgba(39, 51, 46, 0.22);
}

button {
  letter-spacing: 0;
  text-transform: none;
}

.primary-action {
  color: var(--cream);
  background: var(--moss-deep);
  border-color: var(--moss-deep);
}

.brand-mark {
  background: var(--sage);
}

.nav-list a::before {
  background: #c8d6ca;
}

.stat-card:nth-child(1) { background: #e3e9df; }
.stat-card:nth-child(2) { background: #e2e9ec; }
.stat-card:nth-child(3) { background: #eee7d9; }
.stat-card.accent { background: #e9e0e3; }
.focus-panel { background: #e6ece8; }
.data-panel { background: #eee8dc; }
.mini-panel { background: #e2e9ec; }

.template-choice:hover,
.template-choice.active {
  border-color: var(--rose);
  box-shadow: 7px 7px 0 #dfcdd2;
}

.swatch-rose { background: #c9a7ae; }
.swatch-sage { background: #aebdac; }
.swatch-butter { background: #d9cba7; }
.swatch-night { background: #46524c; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.canvas-stage {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
  align-content: start;
  place-items: start center;
}

.canvas-toolbar {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 14px;
  padding: 10px;
  color: var(--ink);
  background: rgba(252, 250, 246, 0.93);
  border: 1px solid rgba(39, 51, 46, 0.18);
  border-radius: 8px;
  box-shadow: 0 12px 34px rgba(29, 38, 34, 0.13);
  backdrop-filter: blur(14px);
}

.canvas-toolbar > strong {
  min-width: 135px;
  font-family: "Manrope", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
}

.canvas-toolbar-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: start;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.canvas-toolbar button,
.canvas-upload {
  display: grid;
  width: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  place-items: center;
  color: var(--ink);
  font-size: 0.68rem;
  background: var(--cream);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
}

.canvas-toolbar button:nth-last-child(3),
.canvas-toolbar button:nth-last-child(1) {
  width: auto;
  padding-inline: 7px;
}

.canvas-toolbar button.active {
  color: var(--cream);
  background: var(--moss-deep);
  border-color: var(--moss-deep);
}

.canvas-upload {
  position: relative;
  cursor: pointer;
}

.canvas-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.draw-color {
  width: 30px;
  height: 30px;
  padding: 3px;
  border-radius: 6px;
}

#drawLayer {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.invite-preview.drawing-active #drawLayer {
  pointer-events: auto;
  cursor: crosshair;
}

.invite-preview [data-layer] {
  transform-origin: center;
}

.invite-preview [contenteditable] {
  cursor: text;
  outline: 0;
}

.invite-preview [data-layer].is-selected {
  outline: 2px solid rgba(166, 122, 135, 0.9);
  outline-offset: 5px;
}

.invite-extras {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.invite-extras img {
  position: absolute;
  width: 29%;
  max-height: 34%;
  object-fit: cover;
  pointer-events: auto;
  border: 6px solid rgba(252, 250, 246, 0.92);
  border-radius: 2px;
  box-shadow: 0 12px 26px rgba(28, 36, 32, 0.2);
  cursor: pointer;
}

.recipient-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: 16px;
  margin-bottom: 54px;
}

.recipient-profile-form,
.gift-readout {
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}

.recipient-profile-form {
  background: #f1eee8;
}

.recipient-profile-form h2,
.gift-readout h2 {
  margin-bottom: 26px;
}

.recipient-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.recipient-fields label {
  font-size: 0.72rem;
}

.gift-readout {
  display: grid;
  align-content: start;
  background: #e6ece8;
}

.profile-strength {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 4px 12px;
  margin-bottom: 34px;
}

.profile-strength strong {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 3.5rem;
  font-weight: 500;
  line-height: 0.9;
}

.profile-strength span {
  color: var(--muted);
  font-size: 0.74rem;
}

.profile-strength i,
.gift-fit i {
  grid-column: 1 / -1;
  height: 5px;
  margin-top: 12px;
  overflow: hidden;
  background: rgba(39, 51, 46, 0.12);
  border-radius: 5px;
}

.profile-strength b,
.gift-fit b {
  display: block;
  width: var(--score, 0%);
  height: 100%;
  background: var(--moss);
}

.best-gift-read {
  padding-top: 22px;
  border-top: 1px solid var(--line-strong);
}

.best-gift-read > span,
.gift-entry-copy > span,
.gift-fit span,
.idea-card small {
  color: var(--muted);
  font-size: 0.68rem;
}

.best-gift-read strong {
  display: block;
  margin: 8px 0;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.7rem;
}

.gift-finder {
  padding-top: 0;
}

.idea-card {
  min-height: 248px;
}

.idea-card::after {
  background: rgba(35, 43, 39, 0.56);
}

.idea-card small {
  position: relative;
  z-index: 1;
  color: rgba(252, 250, 246, 0.78);
}

.gift-form {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) 86px minmax(120px, 0.7fr) minmax(180px, 1fr) minmax(140px, 0.8fr) auto;
  gap: 9px;
  align-items: end;
  margin: 36px 0 22px;
  padding: 24px 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.gift-form label {
  font-size: 0.68rem;
}

.gift-entry {
  grid-template-columns: minmax(0, 1fr) 130px auto;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.gift-entry-copy strong {
  display: block;
  margin: 5px 0;
  font-size: 1.45rem;
}

.gift-entry-copy p {
  margin: 0;
}

.gift-fit {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 8px;
}

.gift-fit > strong {
  font-size: 1.9rem;
}

.gift-fit b {
  width: var(--score);
}

.gift-status-actions button.active {
  color: var(--cream);
  background: var(--moss-deep);
  border-color: var(--moss-deep);
}

@media (max-width: 1100px) {
  .gift-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gift-form button {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .recipient-workbench,
  .recipient-fields {
    grid-template-columns: 1fr;
  }

  .canvas-toolbar {
    display: grid;
  }

  .canvas-toolbar-actions {
    justify-content: start;
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 0;
  }

  .canvas-toolbar-actions > * {
    flex: 0 0 auto;
  }

  .gift-entry {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .gift-form {
    grid-template-columns: 1fr;
  }

  .canvas-stage {
    padding: 14px;
  }

  .invite-extras img {
    border-width: 3px;
  }
}

/* Product hardening */
.sidebar-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.sidebar-tools button,
.import-data-button {
  display: grid;
  min-height: 34px;
  padding: 7px 8px;
  place-items: center;
  color: rgba(38, 48, 39, 0.78);
  font-size: 0.65rem;
  font-weight: 600;
  background: rgba(251, 248, 241, 0.66);
  border: 1px solid rgba(38, 48, 39, 0.18);
  border-radius: 6px;
  cursor: pointer;
}

.sidebar-tools button:hover,
.import-data-button:hover,
.sidebar-tools button.active {
  color: var(--cream);
  background: var(--moss-deep);
}

.import-data-button {
  position: relative;
}

.import-data-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.calendar-panel .panel-heading,
.finder-head,
.finder-controls,
.calendar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendar-panel .panel-heading,
.finder-head {
  justify-content: space-between;
}

.calendar-actions button {
  min-width: 34px;
  min-height: 34px;
  padding: 6px 9px;
}

.finder-controls {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.finder-controls input {
  width: min(260px, 36vw);
}

.finder-controls a {
  display: grid;
  min-height: 42px;
  padding: 9px 14px;
  place-items: center;
  color: var(--cream);
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--moss-deep);
  border-radius: 6px;
}

.inline-form label {
  display: grid;
  gap: 5px;
}

.inline-form label > span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
}

.gift-entry {
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.45fr) auto;
}

.gift-fit {
  grid-template-columns: 1fr;
}

.gift-fit > strong {
  font-size: 1rem;
}

.gift-fit span {
  line-height: 1.4;
}

.best-gift-read small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.68rem;
}

.invite-preview img[data-layer] {
  cursor: grab;
  touch-action: none;
}

.invite-preview img[data-layer]:active {
  cursor: grabbing;
}

.conditional-field[hidden] {
  display: none;
}

.vibe-assistant {
  display: grid;
  gap: 12px;
  margin-block: 4px;
  padding-block: 16px;
  border-block: 1px solid var(--line);
}

.vibe-assistant h3 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.25rem;
  font-weight: 600;
}

.vibe-assistant p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.vibe-assistant-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.vibe-suggestions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.vibe-suggestions:empty {
  display: none;
}

.vibe-suggestion {
  display: grid;
  min-height: 92px;
  padding: 13px;
  text-align: left;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.vibe-suggestion:hover,
.vibe-suggestion.selected {
  color: var(--ink);
  background: #e7ddd4;
  border-color: rgba(38, 48, 39, 0.32);
}

.vibe-suggestion strong {
  font-family: "Cormorant Garamond", serif;
  font-size: 1rem;
  font-weight: 600;
}

.vibe-suggestion span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1.4;
}

.gift-status-actions {
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .vibe-assistant-input,
  .vibe-suggestions {
    grid-template-columns: 1fr;
  }

  .vibe-assistant-input button {
    width: 100%;
  }

  .status-bars {
    gap: 6px;
  }

  .status-bar span {
    font-size: 0.44rem;
  }
}

#undoDesign:disabled,
#redoDesign:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.confirm-dialog {
  width: min(430px, calc(100vw - 32px));
  padding: 28px;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: 0 30px 90px rgba(28, 36, 32, 0.28);
}

.confirm-dialog::backdrop {
  background: rgba(38, 48, 39, 0.42);
  backdrop-filter: blur(5px);
}

.confirm-dialog p {
  margin: 0 0 24px;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.65rem;
  line-height: 1.15;
}

.confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 980px) {
  .sidebar-tools {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .canvas-toolbar {
    position: sticky;
    top: 8px;
  }
}

@media (max-width: 760px) {
  .finder-head {
    align-items: stretch;
    flex-direction: column;
  }

  .finder-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .finder-controls input {
    grid-column: 1 / -1;
    width: 100%;
  }

  .gift-entry {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .sidebar-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .calendar-actions {
    width: 100%;
  }

  .calendar-actions button:nth-child(2) {
    flex: 1;
  }

  .canvas-stage {
    min-height: 0;
  }

  .canvas-toolbar-actions {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
  }

  .canvas-toolbar-actions > * {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Product quality pass */
.template-rail {
  grid-auto-columns: 126px;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  scrollbar-width: thin;
}

.template-choice {
  min-width: 122px;
  min-height: 154px;
}

.template-choice .template-mini {
  height: 106px;
  aspect-ratio: auto;
}

.template-choice strong {
  min-height: 44px;
  padding: 10px;
  font-size: 0.7rem;
}

.template-choice:hover,
.template-choice.active {
  border-color: var(--moss-deep);
  box-shadow: inset 0 -3px 0 var(--rose);
  transform: none;
}

.canvas-stage {
  gap: 10px;
}

.canvas-toolbar {
  position: sticky;
  top: 8px;
  display: flex;
  grid-template-columns: none;
  gap: 10px;
  padding: 8px 10px;
  box-shadow: 0 8px 24px rgba(29, 38, 34, 0.09);
}

.canvas-toolbar > strong {
  width: 104px;
  min-width: 104px;
}

.canvas-toolbar-actions {
  flex: 1;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}

.status-bars {
  grid-template-columns: 1fr;
  align-content: start;
  min-height: 250px;
  gap: 12px;
}

.status-bar {
  grid-template-columns: minmax(62px, 1fr) 24px minmax(70px, 1.4fr);
  min-height: 0;
  align-items: center;
  gap: 9px;
  border-bottom: 0;
}

.status-bar span {
  font-size: 0.58rem;
}

.status-bar strong {
  position: static;
  font-size: 1.2rem;
  text-align: right;
}

.status-bar i {
  width: 100%;
  height: 7px !important;
  min-height: 7px;
}

.reminder-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: -10px 0 42px;
  border-block: 1px solid var(--line-strong);
}

.reminder-overview > div {
  display: flex;
  min-height: 96px;
  padding: 18px 22px;
  align-items: end;
  gap: 10px;
  border-right: 1px solid var(--line-strong);
}

.reminder-overview > div:last-child {
  border-right: 0;
}

.reminder-overview strong {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 0.9;
}

.reminder-overview span {
  padding-bottom: 3px;
  color: var(--muted);
  font-size: 0.72rem;
}

.reminder-layout {
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: clamp(30px, 4vw, 58px);
  align-items: start;
}

.people-panel {
  grid-column: auto;
}

.reminder-panel {
  padding: 34px 24px 24px;
  background: #e8ece8;
  border-top: 0;
}

.inline-form {
  grid-template-columns: minmax(0, 1.2fr) minmax(95px, 0.55fr) minmax(120px, 0.55fr) minmax(105px, 0.45fr) auto auto;
}

.quick-task-row {
  display: grid;
  gap: 8px;
  margin: 4px 0 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.quick-task-row[hidden] {
  display: none;
}

.quick-task-row > span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
}

.task-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.task-suggestions button {
  min-height: 34px;
  padding: 7px 10px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
}

.task-suggestions button:hover {
  color: var(--cream);
  background: var(--moss-deep);
}

.task-entry {
  position: relative;
  padding: 17px 0 17px 13px;
  border-bottom: 1px solid var(--line);
}

.task-entry::before {
  position: absolute;
  inset: 17px auto 17px 0;
  width: 3px;
  content: "";
  background: #b9c6ba;
}

.task-entry.high-priority::before,
.task-entry.overdue::before {
  background: var(--rose);
}

.task-entry.done {
  opacity: 0.58;
}

.task-entry.done strong {
  text-decoration: line-through;
}

.task-state {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
}

.task-entry.overdue .task-state {
  color: #914c5d;
}

.icon-delete {
  width: 32px;
  min-width: 32px;
  padding: 0 !important;
  font-size: 1rem;
}

.gift-form {
  grid-template-columns: minmax(150px, 1.1fr) 80px minmax(115px, 0.65fr) minmax(170px, 1fr) minmax(130px, 0.75fr) auto auto;
}

.gift-entry {
  grid-template-columns: minmax(0, 1fr) minmax(140px, 0.45fr) minmax(150px, auto);
}

.gift-entry-actions {
  display: grid;
  grid-template-columns: minmax(104px, 1fr) auto auto;
  align-items: end;
  gap: 6px;
}

.gift-entry-actions label {
  gap: 4px;
  font-size: 0.58rem;
}

.gift-entry-actions select,
.gift-entry-actions button {
  min-height: 38px;
}

@media (max-width: 1180px) {
  .gift-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .reminder-panel {
    padding-inline: 22px;
  }
}

@media (max-width: 760px) {
  .canvas-toolbar {
    display: grid;
    gap: 7px;
  }

  .canvas-toolbar > strong {
    width: auto;
    min-width: 0;
  }

  .canvas-toolbar-actions {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .canvas-toolbar-actions > * {
    width: 30px !important;
    min-width: 30px !important;
  }

  .gift-entry {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .sidebar {
    width: calc(100% - 16px);
    margin: 8px;
    padding: 12px 14px;
    gap: 8px;
  }

  .brand {
    grid-template-columns: 34px minmax(0, 1fr);
  }

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

  .brand strong {
    font-size: 1.15rem;
  }

  .brand div > span {
    display: none;
  }

  .nav-list a {
    padding-block: 6px;
    font-size: 0.63rem;
  }

  .mini-panel {
    padding: 8px 10px;
  }

  .sidebar-tools {
    margin-top: 0;
  }

  .sidebar-tools button,
  .import-data-button {
    min-height: 30px;
  }

  .workspace {
    padding-top: 20px;
  }

  .view-header {
    margin-bottom: 24px;
  }

  .view-header h1 {
    font-size: 3.1rem;
  }

  .template-rail {
    grid-auto-columns: 112px;
    margin-bottom: 14px;
  }

  .template-choice {
    min-width: 108px;
    min-height: 140px;
  }

  .template-choice .template-mini {
    height: 94px;
  }

  .canvas-stage {
    padding: 10px;
  }

  .reminder-overview {
    margin-top: 0;
    margin-bottom: 30px;
  }

  .reminder-overview > div {
    display: grid;
    min-height: 82px;
    padding: 14px 10px;
    align-content: end;
    gap: 4px;
  }

  .reminder-overview strong {
    font-size: 2rem;
  }

  .reminder-overview span {
    font-size: 0.62rem;
  }

  .inline-form,
  .gift-form {
    grid-template-columns: 1fr;
  }

  .gift-entry-actions {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .status-bar span {
    font-size: 0.55rem;
  }
}

/* Expanded invitation studio */
.control-section {
  overflow: hidden;
  background: rgba(247, 244, 239, 0.72);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}

.control-section summary {
  position: relative;
  padding: 14px 42px 14px 15px;
  color: var(--ink);
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.18rem;
  cursor: pointer;
  list-style: none;
}

.control-section summary::-webkit-details-marker {
  display: none;
}

.control-section summary::after {
  position: absolute;
  top: 50%;
  right: 15px;
  content: "+";
  font-family: "Manrope", sans-serif;
  font-size: 1rem;
  transform: translateY(-50%);
}

.control-section[open] summary::after {
  content: "−";
}

.control-section[open] summary {
  border-bottom: 1px solid var(--line);
}

.control-section-body {
  display: grid;
  gap: 14px;
  padding: 15px;
}

.control-section .ai-designer {
  padding-bottom: 15px;
}

.control-section .ai-designer label {
  font-size: 1rem;
}

.palette-row {
  display: grid;
  grid-template-columns: repeat(6, 34px);
  gap: 10px;
}

.palette-swatch {
  position: relative;
  width: 34px;
  height: 34px;
  min-height: 34px;
  border-radius: 50%;
}

.palette-swatch::after {
  position: absolute;
  inset: 7px;
  content: "";
  background: rgba(255, 255, 255, 0.34);
  border: 1px solid rgba(25, 31, 28, 0.12);
  border-radius: 50%;
}

.swatch-porcelain { background: #f5f1e9; }
.swatch-poppy { background: #dc6556; }
.swatch-lilac { background: #b4a0ce; }
.swatch-ocean { background: #7ea8b7; }
.swatch-olive { background: #7e8b5b; }
.swatch-cherry { background: #9c3748; }
.swatch-ink { background: #202321; }
.swatch-cobalt { background: #275bb8; }

.custom-color-row {
  display: grid;
  grid-template-columns: 72px 72px minmax(0, 1fr);
  align-items: end;
  gap: 8px;
}

.custom-color-row input[type="color"] {
  width: 100%;
  min-height: 38px;
  padding: 3px;
}

.custom-color-row button {
  min-height: 38px;
}

.template-mini {
  background-position: center;
  background-size: cover;
}

.template-mini i {
  display: none;
}

.mini-editorial,
.mini-collage,
.mini-ribbon,
.mini-minimal {
  background-image: url("./assets/invitations/after-dark-still.jpg");
}

.mini-botanical,
.mini-scrapbook,
.mini-wildflower {
  background-image: url("./assets/invitations/chrome-cake.jpg");
}

.mini-postcard,
.mini-coastal {
  background-image: url("./assets/invitations/rooftop-bluehour.jpg");
}

.mini-soiree,
.mini-modern,
.mini-bold {
  background-image: url("./assets/invitations/party-flash.jpg");
}

.palette-porcelain {
  --invite-paper: #f5f1e9;
  --invite-ink: #292d29;
  --invite-line: rgba(41, 45, 41, 0.28);
}

.palette-poppy {
  --invite-paper: #f0b7a9;
  --invite-ink: #7b201f;
  --invite-line: rgba(123, 32, 31, 0.31);
}

.palette-lilac {
  --invite-paper: #ddd4e7;
  --invite-ink: #443a5c;
  --invite-line: rgba(68, 58, 92, 0.3);
}

.palette-ocean {
  --invite-paper: #cddde2;
  --invite-ink: #173b4a;
  --invite-line: rgba(23, 59, 74, 0.3);
}

.palette-olive {
  --invite-paper: #bec4a4;
  --invite-ink: #303b24;
  --invite-line: rgba(48, 59, 36, 0.32);
}

.palette-cherry {
  --invite-paper: #ead8d0;
  --invite-ink: #7a2130;
  --invite-line: rgba(122, 33, 48, 0.32);
}

.palette-ink {
  --invite-paper: #f4f2ed;
  --invite-ink: #181a18;
  --invite-line: rgba(24, 26, 24, 0.3);
}

.palette-cobalt {
  --invite-paper: #c6d4ee;
  --invite-ink: #163f94;
  --invite-line: rgba(22, 63, 148, 0.32);
}

.canvas-post {
  width: min(100%, 560px);
  aspect-ratio: 3 / 4;
}

.canvas-wide {
  width: min(100%, 820px);
  aspect-ratio: 16 / 9;
  padding: clamp(24px, 4vw, 48px);
}

.canvas-wide h3 {
  font-size: clamp(2.5rem, 5vw, 5rem);
}

.typeface-didone h3 {
  font-family: "Bodoni Moda", Georgia, serif;
  font-weight: 500;
  line-height: 0.86;
}

.typeface-soft h3,
.typeface-soft p {
  font-family: "Cormorant Garamond", Georgia, serif;
}

.typeface-soft p {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
}

.typeface-humanist h3,
.typeface-humanist p {
  font-family: "Manrope", sans-serif;
}

.typeface-humanist h3 {
  font-weight: 500;
  line-height: 0.95;
}

.typeface-mono h3,
.typeface-mono p,
.typeface-mono .preview-kicker,
.typeface-mono .invite-copy > span:last-child {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.typeface-mono h3 {
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  line-height: 1;
}

.tracking-open h3 {
  letter-spacing: 0.06em;
}

.tracking-tight h3 {
  letter-spacing: 0;
}

.density-airy .invite-copy {
  display: grid;
  gap: 18px;
}

.density-airy h3 {
  margin-block: 28px;
}

.density-compact .invite-copy {
  display: grid;
  gap: 7px;
}

.density-compact h3 {
  margin-block: 12px;
}

.position-top #invitePhoto { object-position: center top; }
.position-bottom #invitePhoto { object-position: center bottom; }
.position-left #invitePhoto { object-position: left center; }
.position-right #invitePhoto { object-position: right center; }

.decoration-double::before {
  inset: 18px;
  border: 3px double var(--invite-line);
}

.decoration-double .invite-decoration,
.decoration-arch .invite-decoration {
  display: none;
}

.decoration-arch::before {
  inset: 18px 24px;
  border-width: 2px;
  border-radius: 48% 48% 3px 3px;
}

.decoration-confetti .invite-decoration {
  width: 7px;
  height: 7px;
  background: var(--invite-ink);
  border: 0;
  border-radius: 1px;
  box-shadow: 28px 16px 0 rgba(232, 125, 105, 0.86), 62px -10px 0 rgba(237, 198, 94, 0.9), 98px 25px 0 rgba(96, 140, 160, 0.84), 134px -4px 0 rgba(96, 117, 77, 0.85), 170px 22px 0 rgba(143, 95, 151, 0.82);
}

.decoration-confetti .decoration-a {
  top: 28px;
  right: 190px;
  transform: rotate(18deg);
}

.decoration-confetti .decoration-b {
  bottom: 36px;
  left: 36px;
  transform: rotate(-14deg);
}

.decoration-stamp .decoration-a,
.decoration-stamp .decoration-b {
  width: 58px;
  height: 58px;
  border: 2px dashed var(--invite-line);
}

.decoration-stamp .decoration-a { top: 28px; right: 28px; }
.decoration-stamp .decoration-b { bottom: 28px; left: 28px; }

.photo-mono.has-photo #invitePhoto {
  filter: grayscale(1) contrast(0.92);
}

.photo-warm.has-photo #invitePhoto {
  filter: sepia(0.2) saturate(0.86) contrast(0.94);
}

.photo-circle.has-photo #invitePhoto {
  width: min(90%, 440px);
  aspect-ratio: 1;
  margin-inline: auto;
  object-fit: cover;
  border-radius: 50%;
}

.photo-edge.has-photo #invitePhoto {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.template-coastal.has-photo {
  grid-template-rows: minmax(0, 1.25fr) auto;
  gap: 26px;
  padding: clamp(24px, 4vw, 44px);
}

.template-coastal.has-photo #invitePhoto {
  min-height: 250px;
}

.template-coastal h3 {
  max-width: 12ch;
  font-style: italic;
}

.template-wildflower.has-photo {
  grid-template-rows: minmax(230px, 1.1fr) auto;
  gap: 24px;
}

.template-wildflower.has-photo #invitePhoto {
  min-height: 230px;
  clip-path: polygon(0 5%, 98% 0, 100% 94%, 3% 100%);
}

.template-wildflower .preview-kicker {
  font-style: italic;
}

.template-minimal.has-photo {
  grid-template-rows: 32% auto;
  gap: clamp(32px, 6vw, 64px);
  align-content: start;
}

.template-minimal.has-photo #invitePhoto {
  min-height: 0;
  border-radius: 0;
  filter: grayscale(1) contrast(0.86);
}

.template-minimal h3 {
  max-width: 13ch;
  margin-block: 18px;
}

.template-bold.has-photo {
  display: grid;
  grid-template-rows: 1fr;
  align-content: end;
  padding: clamp(24px, 4vw, 46px);
}

.template-bold.has-photo #invitePhoto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
}

.template-bold.has-photo::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  content: "";
  background: rgba(20, 26, 23, 0.28);
}

.template-bold .invite-copy {
  z-index: 2;
  width: min(86%, 470px);
  padding: 24px;
  color: var(--invite-ink);
  background: var(--invite-paper);
  border: 2px solid var(--invite-ink);
}

.template-bold h3 {
  max-width: none;
  font-size: clamp(2.8rem, 6vw, 5.7rem);
}

@media (max-width: 600px) {
  .designer-tools {
    padding: 12px;
  }

  .control-section summary {
    font-size: 1.05rem;
  }

  .control-section-body {
    padding: 12px;
  }

  .design-control-grid {
    grid-template-columns: 1fr;
  }

  .palette-row {
    grid-template-columns: repeat(6, 30px);
    gap: 8px;
  }

  .palette-swatch {
    width: 30px;
    height: 30px;
    min-height: 30px;
  }

  .custom-color-row {
    grid-template-columns: 58px 58px minmax(0, 1fr);
  }

  .canvas-wide,
  .canvas-landscape {
    min-width: 520px;
  }

  .template-bold .invite-copy {
    padding: 15px;
  }
}

/* Direct manipulation and 3D invitation studio */
.studio-mode-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 18px;
  background: #eef0e9;
  border-bottom: 1px solid var(--line-strong);
}

.studio-mode-bar .segmented-control {
  flex: 0 0 auto;
}

.studio-mode-bar p {
  max-width: 580px;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: right;
}

.image-library-field,
.alignment-field {
  min-width: 0;
}

.image-library {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}

.image-library button {
  position: relative;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #e8e6df;
  border: 2px solid transparent;
  border-radius: 6px;
}

.image-library button.active {
  border-color: var(--moss-deep);
  box-shadow: 0 0 0 2px #f7f4ef;
}

.image-library img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.layer-inspector {
  display: grid;
  grid-template-columns: repeat(5, minmax(88px, 1fr));
  width: 100%;
  gap: 8px;
  padding: 12px;
  background: #f3eee9;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}

.layer-inspector label,
.range-control {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 5px 8px;
  min-width: 0;
  color: var(--muted);
  font-family: "Manrope", sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
}

.layer-inspector output,
.range-control output {
  color: var(--ink);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.layer-inspector input[type="range"],
.range-control input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 18px;
  margin: 0;
  padding: 0;
  accent-color: var(--moss-deep);
}

.three-scene-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.three-scene-gallery button {
  display: grid;
  grid-template-columns: 42px 1fr;
  min-height: 54px;
  align-items: center;
  gap: 8px;
  padding: 6px;
  text-align: left;
  background: #ebe9e2;
  border: 1px solid transparent;
  border-radius: 8px;
}

.three-scene-gallery button.active {
  background: #dfe7df;
  border-color: var(--moss-deep);
}

.three-scene-gallery strong {
  font-size: 0.74rem;
}

.scene-orbit {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
  overflow: hidden;
  background: #f7f2ed;
  border-radius: 6px;
}

.scene-orbit::before,
.scene-orbit::after {
  position: absolute;
  content: "";
  background: #c899ab;
}

.scene-cake::before { inset: 19px 7px 7px; border-radius: 10px 10px 4px 4px; }
.scene-cake::after { width: 20px; height: 10px; top: 10px; left: 11px; border-radius: 8px 8px 2px 2px; background: #e2c982; }
.scene-gifts::before { width: 21px; height: 20px; left: 6px; bottom: 6px; border-radius: 2px; }
.scene-gifts::after { width: 17px; height: 17px; right: 5px; top: 7px; border-radius: 2px; background: #9aafa1; }
.scene-garden::before { width: 30px; height: 5px; left: 6px; bottom: 8px; border-radius: 50%; background: #bba99c; }
.scene-garden::after { width: 20px; height: 24px; left: 11px; top: 5px; border-radius: 50% 50% 45% 45%; background: #9db09d; }
.scene-charms::before { width: 21px; height: 21px; left: 5px; top: 5px; border-radius: 50%; background: #c899ab; }
.scene-charms::after { width: 17px; height: 17px; right: 5px; bottom: 5px; border-radius: 4px; background: #d8c077; transform: rotate(25deg); }

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

.toggle-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.toggle-row input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  accent-color: var(--moss-deep);
}

.invitation-panel.three-mode .template-rail {
  display: none;
}

.invitation-panel.three-mode .canvas-stage {
  overflow: hidden;
  padding: 0;
  background: #eadedb;
}

.canvas-toolbar[hidden],
.layer-inspector[hidden],
.invite-preview[hidden] {
  display: none !important;
}

.three-invitation {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 680px;
  overflow: hidden;
  color: #292927;
  background: #eadedb;
}

.three-invitation[hidden] {
  display: none;
}

.three-invitation canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}

.three-invitation canvas:active {
  cursor: grabbing;
}

.three-copy {
  position: absolute;
  top: clamp(28px, 6vw, 62px);
  left: clamp(24px, 6vw, 64px);
  z-index: 2;
  width: min(72%, 510px);
  pointer-events: none;
}

.three-copy span {
  display: block;
  margin-bottom: 10px;
  font-family: "Manrope", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
}

.three-copy h3 {
  max-width: 12ch;
  margin: 0;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 4.6rem;
  font-weight: 500;
  line-height: 0.88;
}

.three-copy p {
  max-width: 39ch;
  margin: 16px 0 0;
  font-size: clamp(0.82rem, 1.5vw, 1rem);
  line-height: 1.45;
}

.three-interaction-note {
  position: absolute;
  right: 22px;
  bottom: 18px;
  z-index: 2;
  margin: 0;
  color: rgba(41, 41, 39, 0.72);
  font-size: 0.7rem;
  pointer-events: none;
}

/* Keep the expanded gift form intact after the general responsive rules above. */
.gift-form {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.gift-form > label:nth-child(1) { grid-column: span 4; }
.gift-form > label:nth-child(2) { grid-column: span 2; }
.gift-form > label:nth-child(3) { grid-column: span 3; }
.gift-form > label:nth-child(4) { grid-column: span 5; }
.gift-form > label:nth-child(5) { grid-column: span 7; }
.gift-form > label:nth-child(6) { grid-column: span 4; }
.gift-form > label:nth-child(7) { grid-column: span 3; }
.gift-form > label:nth-child(8) { grid-column: span 2; }
.gift-form > button { grid-column: span 3; }

@media (max-width: 980px) {
  .gift-form > label:nth-child(n),
  .gift-form > button {
    grid-column: span 6;
  }
}

@media (max-width: 640px) {
  .gift-form > label:nth-child(n),
  .gift-form > button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .studio-mode-bar {
    align-items: flex-start;
  }

  .studio-mode-bar p {
    text-align: left;
  }

  .layer-inspector {
    grid-template-columns: repeat(3, minmax(90px, 1fr));
  }

  .three-invitation {
    min-height: 620px;
  }

  .three-copy h3 {
    font-size: 3.9rem;
  }
}

@media (max-width: 600px) {
  .studio-mode-bar {
    display: grid;
    gap: 9px;
    padding: 12px;
  }

  .studio-mode-bar .segmented-control {
    width: 100%;
  }

  .studio-mode-bar .segmented-control button {
    flex: 1;
  }

  .layer-inspector {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px;
  }

  .three-invitation {
    min-height: 570px;
  }

  .three-copy {
    top: 24px;
    left: 20px;
    width: calc(100% - 40px);
  }

  .three-copy h3 {
    max-width: 10ch;
    font-size: 3.4rem;
  }

  .three-copy p {
    max-width: 31ch;
    font-size: 0.75rem;
  }

  .three-interaction-note {
    right: 14px;
    bottom: 12px;
  }
}

/* Gift intelligence */
.profile-title-row,
.shortlist-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.profile-title-row span,
.shortlist-heading span {
  color: var(--muted);
  font-size: 0.72rem;
}

.recipient-profile-form h2 {
  margin-bottom: 0;
}

.recipient-fields {
  margin-top: 26px;
}

.taste-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 4px 0 20px;
}

.taste-controls label {
  display: grid;
  gap: 9px;
  padding: 14px;
  background: rgba(252, 250, 246, 0.58);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.taste-controls label > span {
  font-size: 0.7rem;
  font-weight: 700;
}

.taste-controls input[type="range"] {
  width: 100%;
  min-height: 18px;
  padding: 0;
  accent-color: #65796e;
}

.taste-controls output {
  min-height: 2.2em;
  color: var(--muted);
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 0.9rem;
  line-height: 1.1;
}

.taste-brief {
  padding: 18px 0 22px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.taste-brief p {
  margin: 0 0 17px;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.15rem;
  line-height: 1.25;
}

.taste-brief-bars {
  display: grid;
  gap: 9px;
}

.taste-brief-bars i {
  display: grid;
  grid-template-columns: 68px 1fr;
  align-items: center;
  gap: 9px;
  height: auto;
  margin: 0;
  overflow: visible;
  background: transparent;
}

.taste-brief-bars span {
  color: var(--muted);
  font-size: 0.64rem;
  font-style: normal;
}

.taste-brief-bars i::after {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 4px;
  content: "";
  background: rgba(39, 51, 46, 0.12);
  border-radius: 4px;
}

.taste-brief-bars b {
  grid-column: 2;
  grid-row: 1;
  z-index: 1;
  width: var(--taste);
  height: 4px;
  background: #65796e;
  border-radius: 4px;
}

.best-gift-read {
  margin-top: 22px;
  padding-top: 0;
  border-top: 0;
}

.inspiration-save-row > div {
  display: flex;
  gap: 8px;
}

.gift-form {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.gift-form > label:nth-child(1) { grid-column: span 4; }
.gift-form > label:nth-child(2) { grid-column: span 2; }
.gift-form > label:nth-child(3) { grid-column: span 3; }
.gift-form > label:nth-child(4) { grid-column: span 5; }
.gift-form > label:nth-child(5) { grid-column: span 7; }
.gift-form > label:nth-child(6) { grid-column: span 4; }
.gift-form > label:nth-child(7) { grid-column: span 3; }
.gift-form > label:nth-child(8) { grid-column: span 2; }
.gift-form > label:nth-child(9) { grid-column: span 3; }
.gift-form > button { grid-column: span 3; }

.gift-shortlist {
  margin: 44px 0 28px;
  padding: 34px 0 38px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.shortlist-heading {
  margin-bottom: 22px;
}

.shortlist-heading h2 {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3.2rem);
  font-weight: 500;
}

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

.comparison-empty {
  grid-column: 1 / -1;
  color: var(--muted);
}

.comparison-card {
  display: grid;
  align-content: start;
  gap: 18px;
  min-width: 0;
  padding: 20px;
  background: #ebe7df;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.comparison-card:nth-child(2) {
  background: #e4ebe6;
}

.comparison-card:nth-child(3) {
  background: #e8e4ea;
}

.comparison-title {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.comparison-title > div {
  min-width: 0;
}

.comparison-title span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 0.64rem;
}

.comparison-title strong {
  display: block;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.05;
}

.comparison-title > b {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 0.9;
}

.comparison-metrics {
  display: grid;
  gap: 8px;
}

.comparison-metrics > div {
  display: grid;
  grid-template-columns: 68px 1fr 24px;
  align-items: center;
  gap: 7px;
}

.comparison-metrics span,
.comparison-metrics em {
  color: var(--muted);
  font-size: 0.62rem;
  font-style: normal;
}

.comparison-metrics i,
.gift-metric-strip i {
  height: 4px;
  overflow: hidden;
  background: rgba(39, 51, 46, 0.12);
  border-radius: 4px;
}

.comparison-metrics i b,
.gift-metric-strip i b {
  display: block;
  width: var(--metric);
  height: 100%;
  background: #65796e;
}

.comparison-card > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
}

.comparison-card > button {
  justify-self: start;
}

.gift-entry {
  grid-template-columns: minmax(220px, 1.25fr) 140px minmax(210px, 0.8fr) auto;
  align-items: center;
}

.gift-fit {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
}

.gift-fit > strong {
  grid-row: 1 / 3;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 0.85;
}

.gift-fit > em {
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 700;
}

.gift-fit > span {
  grid-column: 1 / -1;
  margin-top: 7px;
}

.gift-metric-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.gift-metric-strip > span {
  display: grid;
  gap: 5px;
}

.gift-metric-strip small {
  color: var(--muted);
  font-size: 0.62rem;
}

.gift-entry-actions {
  display: grid;
  grid-template-columns: repeat(2, auto);
  align-items: end;
  gap: 6px;
}

.gift-entry-actions label {
  grid-column: 1 / -1;
  font-size: 0.62rem;
}

.gift-entry-actions select {
  min-width: 118px;
}

.gift-entry-actions .icon-delete {
  width: 34px;
}

@media (max-width: 1180px) {
  .gift-entry {
    grid-template-columns: minmax(0, 1fr) 120px minmax(190px, 0.8fr);
  }

  .gift-entry-actions {
    grid-column: 1 / -1;
    grid-template-columns: minmax(130px, 1fr) repeat(3, auto);
  }

  .gift-entry-actions label {
    grid-column: auto;
  }
}

@media (max-width: 900px) {
  .gift-comparison {
    grid-template-columns: 1fr;
  }

  .comparison-card {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.7fr);
  }

  .comparison-card > p,
  .comparison-card > button {
    grid-column: 1 / -1;
  }

  .gift-form > label:nth-child(n),
  .gift-form > button {
    grid-column: span 6;
  }
}

@media (max-width: 720px) {
  .profile-title-row,
  .shortlist-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .taste-controls {
    grid-template-columns: 1fr;
  }

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

  .gift-entry {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .gift-entry-actions {
    grid-column: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gift-entry-actions label {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .inspiration-save-row > div {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
  }

  .gift-form > label:nth-child(n),
  .gift-form > button {
    grid-column: 1 / -1;
  }
}

/* Editorial occasion map */
.app-shell {
  grid-template-columns: 284px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  isolation: isolate;
  height: 100vh;
  margin: 0;
  gap: 0;
  padding: 32px 27px 24px;
  color: #203f43;
  background: #f6f1e7;
  border: 0;
  border-right: 1px solid rgba(32, 63, 67, 0.2);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.sidebar::before {
  position: absolute;
  z-index: -1;
  top: 134px;
  bottom: 276px;
  left: 46px;
  content: "";
  border-left: 1px solid rgba(32, 63, 67, 0.19);
}

.brand {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 14px;
  min-height: 76px;
  padding: 0 0 25px;
  border-bottom: 1px solid rgba(32, 63, 67, 0.2);
}

.brand-mark {
  position: relative;
  display: block;
  width: 62px;
  height: 62px;
  color: #203f43;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.brand-mark i,
.brand-mark b {
  position: absolute;
  display: block;
  border-radius: 50%;
}

.brand-mark i {
  border: 1px solid currentColor;
}

.brand-mark i:nth-child(1) {
  inset: 4px 13px 10px 7px;
  transform: rotate(18deg);
}

.brand-mark i:nth-child(2) {
  inset: 13px 4px 7px 15px;
  border-color: #d37b65;
  transform: rotate(-24deg);
}

.brand-mark i:nth-child(3) {
  inset: 20px 18px 17px 18px;
  border-color: #98a3d7;
}

.brand-mark b {
  top: 25px;
  left: 27px;
  width: 8px;
  height: 8px;
  background: #203f43;
}

.brand strong,
.brand span {
  display: block;
}

.brand strong {
  color: #203f43;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.78rem;
  font-weight: 500;
  line-height: 1;
}

.brand span {
  margin-top: 7px;
  color: #7b6861;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.nav-list {
  display: grid;
  gap: 0;
  margin: 34px 0 0;
}

.nav-list a {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  justify-content: start;
  min-height: 48px;
  padding: 14px 6px 14px 25px;
  color: #6e7875;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border: 0;
}

.nav-list a span {
  color: #a17f76;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 0.67rem;
  font-style: italic;
  font-weight: 500;
}

.nav-list a::before {
  top: 50%;
  left: 15px;
  width: 9px;
  height: 9px;
  content: "";
  background: #f6f1e7;
  border: 1px solid #203f43;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.nav-list a::after {
  position: absolute;
  right: 0;
  bottom: 7px;
  left: 64px;
  display: block;
  height: 1px;
  content: "";
  background: rgba(32, 63, 67, 0.14);
  opacity: 1;
}

.nav-list a:hover,
.nav-list a.active {
  color: #203f43;
  background: transparent;
}

.nav-list a:hover::before,
.nav-list a.active::before {
  width: 9px;
  background: #d37b65;
  border-color: #d37b65;
  box-shadow: 0 0 0 6px rgba(211, 123, 101, 0.14), 0 0 0 12px rgba(152, 163, 215, 0.08);
  transform: translate(-50%, -50%) scale(1.08);
}

.mini-panel {
  display: grid;
  gap: 0;
  margin-top: auto;
  padding: 21px 0 18px;
  color: #203f43;
  background: transparent;
  border-top: 1px solid rgba(32, 63, 67, 0.2);
  border-bottom: 1px solid rgba(32, 63, 67, 0.2);
  border-radius: 0;
}

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

.context-heading label {
  color: #7b6861;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 0.72rem;
  font-style: italic;
  font-weight: 500;
}

.context-heading span {
  width: 58px;
  border-top: 1px solid #d37b65;
}

.mini-panel select {
  width: 100%;
  margin-top: 7px;
  padding: 8px 24px 9px 0;
  color: #203f43;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.12rem;
  font-weight: 500;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid rgba(32, 63, 67, 0.32);
  border-radius: 0;
}

.next-action-copy {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 13px;
  padding: 17px 0 0;
}

.action-node {
  position: relative;
  width: 9px;
  height: 9px;
  margin: 9px 0 0 7px;
  background: #98a3d7;
  border-radius: 50%;
}

.action-node::before,
.action-node::after {
  position: absolute;
  content: "";
  border: 1px solid rgba(152, 163, 215, 0.5);
  border-radius: 50%;
}

.action-node::before { inset: -5px; }
.action-node::after { inset: -10px; border-color: rgba(211, 123, 101, 0.25); }

.next-action-copy small {
  display: block;
  color: #a17f76;
  font-size: 0.58rem;
  font-weight: 700;
}

.mini-panel .next-action-copy strong {
  margin: 3px 0 0;
  color: #203f43;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.05;
}

.mini-panel .next-action-copy p {
  margin-top: 7px;
  color: #6e7875;
  font-size: 0.64rem;
  line-height: 1.45;
}

.sidebar-tools {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 14px 0 0;
}

.sidebar-tools button,
.import-data-button {
  min-width: 0;
  min-height: 30px;
  padding: 6px 3px;
  color: #6e7875;
  font-size: 0.56rem;
  font-weight: 600;
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(32, 63, 67, 0.16);
  border-radius: 0;
}

.sidebar-tools > :last-child {
  border-right: 0;
}

.sidebar-tools button:hover,
.import-data-button:hover,
.sidebar-tools button.active {
  color: #203f43;
  background: #e5dfef;
  transform: none;
}

@media (max-width: 980px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    position: relative;
    display: grid;
    grid-template-columns: minmax(210px, 0.72fr) minmax(0, 1.28fr);
    height: auto;
    min-height: 0;
    gap: 18px 28px;
    padding: 20px 24px;
    border-right: 0;
    border-bottom: 1px solid rgba(32, 63, 67, 0.2);
  }

  .sidebar::before {
    display: none;
  }

  .brand {
    grid-template-columns: 50px minmax(0, 1fr);
    min-height: 54px;
    padding: 0;
    border: 0;
  }

  .brand-mark {
    width: 48px;
    height: 48px;
    transform: scale(0.78);
    transform-origin: top left;
  }

  .brand strong {
    font-size: 1.55rem;
  }

  .nav-list {
    grid-auto-flow: column;
    align-self: center;
    justify-content: stretch;
    gap: 0;
    margin: 0;
    overflow: visible;
  }

  .nav-list a {
    display: grid;
    grid-template-columns: 1fr;
    min-width: 0;
    min-height: 48px;
    padding: 7px 12px;
    text-align: center;
  }

  .nav-list a span {
    font-size: 0.58rem;
  }

  .nav-list a::before {
    display: none;
  }

  .nav-list a::after {
    right: 10px;
    bottom: 2px;
    left: 10px;
  }

  .nav-list a.active::after {
    height: 2px;
    background: #d37b65;
  }

  .mini-panel {
    grid-template-columns: minmax(210px, 0.72fr) minmax(0, 1.28fr);
    grid-column: 1 / -1;
    align-items: center;
    gap: 0 28px;
    margin: 0;
    padding: 14px 0;
  }

  .context-heading,
  .mini-panel select {
    grid-column: 1;
  }

  .next-action-copy {
    grid-row: 1 / 3;
    grid-column: 2;
    padding: 0;
  }

  .sidebar-tools {
    grid-column: 1 / -1;
    margin: -4px 0 0;
  }
}

@media (max-width: 640px) {
  .sidebar {
    grid-template-columns: 1fr;
    gap: 13px;
    padding: 16px 18px 14px;
  }

  .brand {
    grid-template-columns: 44px minmax(0, 1fr);
    min-height: 46px;
  }

  .brand-mark {
    transform: scale(0.67);
  }

  .brand strong {
    font-size: 1.42rem;
  }

  .brand span {
    margin-top: 4px;
  }

  .nav-list {
    grid-auto-flow: column;
    width: 100%;
  }

  .nav-list a {
    padding: 5px 3px 8px;
    font-size: 0.62rem;
  }

  .nav-list a span {
    display: none;
  }

  .mini-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 11px 0 10px;
  }

  .context-heading,
  .mini-panel select,
  .next-action-copy {
    grid-row: auto;
    grid-column: 1;
  }

  .mini-panel select {
    margin-top: 3px;
    padding-block: 5px 7px;
    font-size: 1rem;
  }

  .next-action-copy {
    grid-template-columns: 22px minmax(0, 1fr);
    padding-top: 10px;
  }

  .action-node {
    margin-left: 4px;
  }

  .mini-panel .next-action-copy strong,
  .mini-panel .next-action-copy p {
    display: block;
  }

  .mini-panel .next-action-copy strong {
    font-size: 1.02rem;
  }

  .mini-panel .next-action-copy p {
    margin-top: 4px;
    font-size: 0.59rem;
  }

  .sidebar-tools {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
  }
}

/* Clear product hierarchy */
body {
  color: #202824;
  background: #f5f4ef;
}

.workspace {
  max-width: 1600px;
  padding-top: 32px;
}

.brand {
  align-items: center;
}

.brand strong {
  font-size: 1.72rem;
  font-weight: 600;
}

.nav-list a {
  grid-template-columns: minmax(0, 1fr);
  padding-left: 28px;
}

.view-header {
  min-height: 0;
  align-items: flex-end;
  margin-bottom: 32px;
  padding: 4px 0 20px;
  border-bottom: 1px solid #202824;
}

.view-header h1,
.product-view > .view-header h1 {
  max-width: none;
  margin: 0;
  color: #202824;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(4rem, 6vw, 6.4rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 0.86;
}

.panel-heading::before,
.people-strip-heading::before,
.inspiration-heading::before,
.shortlist-heading::before {
  display: none;
}

.panel-heading h2,
.people-strip-heading h2,
.profile-title-row h2,
.inspiration-heading h2,
.finder-head h2,
.shortlist-heading h2,
.gift-readout h2,
.reminder-layout .panel-heading h2 {
  margin: 0;
  color: #202824;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.3rem, 1.7vw, 1.7rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.15;
}

.panel-heading,
.people-strip-heading,
.inspiration-heading,
.finder-head,
.shortlist-heading,
.profile-title-row {
  align-items: baseline;
}

.people-strip-heading span,
.profile-title-row span,
.inspiration-heading span,
.shortlist-heading span,
.quick-task-row > span,
.panel-heading label,
.panel-heading select {
  color: #717772;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

#vibeAssistantTitle,
.person-sheet h3,
.past-gift-form h3 {
  margin: 0;
  color: #202824;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
}

.ai-designer label {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
}

.control-section summary,
.designer-tools legend,
.designer-tools label,
.stacked-form label,
.gift-form label,
.recipient-profile-form label,
.inline-form label {
  letter-spacing: 0;
  text-transform: none;
}

.studio-mode-bar {
  justify-content: flex-start;
  padding: 12px 0 18px;
  background: transparent;
  border-bottom: 0;
}

.studio-mode-bar p {
  display: none;
}

.stats-grid {
  gap: 10px;
  margin-bottom: 42px;
  border: 0;
}

.stat-card,
.stat-card:nth-child(1),
.stat-card:nth-child(2),
.stat-card:nth-child(3),
.stat-card.accent {
  min-height: 112px;
  padding: 21px;
  border: 1px solid rgba(32, 40, 36, 0.12);
  border-radius: 8px;
}

.stat-card strong {
  font-size: 2.55rem;
  font-weight: 600;
  line-height: 1;
}

.stat-card span {
  color: #606862;
  font-size: 0.7rem;
}

.visual-grid {
  gap: 12px;
}

.calendar-panel,
.focus-panel,
.data-panel {
  border: 1px solid rgba(32, 40, 36, 0.14);
  border-radius: 8px;
}

.focus-panel,
.data-panel {
  padding-inline: 22px;
}

.panel {
  border-top-width: 1px;
}

.recipient-profile-form,
.gift-readout,
.inspiration-inbox {
  border-color: rgba(32, 40, 36, 0.14);
  box-shadow: none;
}

.reminder-overview {
  margin-top: 0;
}

.reminder-overview strong {
  font-size: 2.25rem;
  font-weight: 600;
}

.person-sheet-header h2 {
  margin: 0;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 0.95;
}

.preview-kicker {
  font-size: min(2.5cqw, 0.72rem);
}

button,
.import-data-button {
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 980px) {
  .nav-list a {
    padding-inline: 12px;
  }

  .view-header h1,
  .product-view > .view-header h1 {
    font-size: clamp(3.7rem, 11vw, 5.2rem);
  }
}

@media (max-width: 640px) {
  .workspace {
    padding-top: 24px;
  }

  .nav-list a {
    padding-inline: 3px;
  }

  .view-header {
    margin-bottom: 25px;
    padding-bottom: 15px;
  }

  .view-header h1,
  .product-view > .view-header h1 {
    font-size: clamp(3.15rem, 15vw, 4.1rem);
  }

  .panel-heading h2,
  .people-strip-heading h2,
  .profile-title-row h2,
  .inspiration-heading h2,
  .finder-head h2,
  .shortlist-heading h2,
  .gift-readout h2,
  .reminder-layout .panel-heading h2 {
    font-size: 1.25rem;
  }

  .people-strip-heading,
  .profile-title-row,
  .inspiration-heading,
  .finder-head,
  .shortlist-heading {
    align-items: flex-start;
  }
}

/* Designed workspace: editorial calendar + connected planning board */
.app-shell {
  display: block;
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: grid;
  grid-template-columns: 220px minmax(420px, 1fr) auto;
  grid-template-rows: 62px 56px;
  width: 100%;
  height: auto;
  min-height: 0;
  gap: 0 24px;
  padding: 0 30px;
  color: #f8f4eb;
  background: #1d2421;
  border: 0;
  border-bottom: 1px solid #0d110f;
}

.sidebar::before {
  display: none;
}

.brand {
  grid-template-columns: 48px minmax(0, 1fr);
  align-self: center;
  min-height: 0;
  padding: 0;
  border: 0;
}

.brand-mark {
  width: 44px;
  height: 44px;
  color: #f8f4eb;
}

.brand-mark i:nth-child(1) { inset: 4px 10px 7px 5px; }
.brand-mark i:nth-child(2) { inset: 9px 3px 4px 11px; border-color: #f2a286; }
.brand-mark i:nth-child(3) { inset: 15px 13px 12px 13px; border-color: #c9c7f4; }
.brand-mark b { top: 18px; left: 20px; width: 7px; height: 7px; background: #f8f4eb; }

.brand strong {
  color: #f8f4eb;
  font-size: 1.62rem;
}

.nav-list {
  display: flex;
  grid-column: 2;
  grid-row: 1;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
}

.nav-list a {
  display: block;
  min-height: 0;
  padding: 9px 14px;
  color: rgba(248, 244, 235, 0.62);
  font-size: 0.68rem;
  text-align: center;
  border: 0;
  border-radius: 8px;
}

.nav-list a::before,
.nav-list a::after {
  display: none;
}

.nav-list a:hover,
.nav-list a.active {
  color: #1d2421;
  background: #f8f4eb;
}

.sidebar-tools {
  grid-row: 1;
  grid-column: 3;
  align-self: center;
  min-width: 258px;
  margin: 0;
}

.sidebar-tools button,
.import-data-button {
  min-height: 32px;
  color: rgba(248, 244, 235, 0.66);
  border-right-color: rgba(248, 244, 235, 0.18);
}

.sidebar-tools button:hover,
.import-data-button:hover,
.sidebar-tools button.active {
  color: #1d2421;
  background: #dce7dd;
}

.mini-panel {
  display: grid;
  grid-template-columns: 130px minmax(260px, 0.85fr) minmax(360px, 1.15fr);
  grid-column: 1 / -1;
  grid-row: 2;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 8px 0 10px;
  color: #f8f4eb;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(248, 244, 235, 0.15);
}

.context-heading {
  grid-column: 1;
}

.context-heading label {
  color: rgba(248, 244, 235, 0.55);
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.58rem;
  font-style: normal;
}

.context-heading span {
  display: none;
}

.mini-panel select {
  grid-column: 2;
  width: 100%;
  margin: 0;
  padding: 7px 28px 8px 0;
  color: #f8f4eb;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  background-color: transparent;
  border-color: rgba(248, 244, 235, 0.3);
}

.mini-panel select option {
  color: #1d2421;
}

.next-action-copy {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-column: 3;
  padding: 0;
}

.action-node {
  margin-top: 7px;
  background: #f2a286;
}

.mini-panel .next-action-copy small {
  display: inline;
  margin-right: 8px;
  color: #f2a286;
}

.mini-panel .next-action-copy strong {
  display: inline;
  margin: 0;
  color: #f8f4eb;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
}

.mini-panel .next-action-copy p {
  margin: 2px 0 0;
  color: rgba(248, 244, 235, 0.52);
  font-size: 0.58rem;
}

.workspace {
  width: min(100%, 1540px);
  max-width: none;
  margin: 0 auto;
  padding: 42px clamp(22px, 4vw, 64px) 90px;
}

.view-header {
  position: relative;
  margin-bottom: 26px;
  padding: 0 0 22px;
}

.view-header::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  width: 22%;
  height: 4px;
  content: "";
  background: #f2a286;
}

.view-header h1,
.product-view > .view-header h1 {
  font-size: clamp(4.6rem, 7vw, 7.6rem);
}

.view-header .primary-action {
  min-width: 142px;
  color: #f8f4eb;
  background: #1d2421;
  border-color: #1d2421;
}

.view-header .primary-action:hover {
  color: #1d2421;
  background: #dce7dd;
}

[data-view="dashboard"] .stats-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 26px;
}

[data-view="dashboard"] .stats-grid::before {
  position: absolute;
  z-index: -1;
  top: 36px;
  right: 4%;
  left: 4%;
  content: "";
  border-top: 1px solid rgba(29, 36, 33, 0.28);
}

[data-view="dashboard"] .stat-card,
[data-view="dashboard"] .stat-card:nth-child(1),
[data-view="dashboard"] .stat-card:nth-child(2),
[data-view="dashboard"] .stat-card:nth-child(3),
[data-view="dashboard"] .stat-card.accent {
  position: relative;
  min-height: 116px;
  padding: 18px 20px;
  background: #f9f7f1;
  border: 1px solid #1d2421;
  border-radius: 8px;
  backdrop-filter: none;
}

[data-view="dashboard"] .stat-card:nth-child(2) { background: #eadff1; }
[data-view="dashboard"] .stat-card:nth-child(3) { background: #f4dfb4; }
[data-view="dashboard"] .stat-card.accent { background: #dce7dd; }

[data-view="dashboard"] .stat-card::before {
  position: absolute;
  top: 30px;
  right: 18px;
  width: 10px;
  height: 10px;
  content: "";
  background: #f2a286;
  border: 3px solid #f9f7f1;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #1d2421;
}

[data-view="dashboard"] .stat-card:nth-child(2)::before { border-color: #eadff1; background: #8f91d8; }
[data-view="dashboard"] .stat-card:nth-child(3)::before { border-color: #f4dfb4; background: #1d2421; }
[data-view="dashboard"] .stat-card.accent::before { border-color: #dce7dd; background: #f2a286; }

[data-view="dashboard"] .stat-card::after {
  display: none;
}

[data-view="dashboard"] .stat-card strong {
  margin-top: 14px;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 2.7rem;
}

[data-view="dashboard"] .stat-card span {
  color: #59625d;
  font-size: 0.66rem;
  letter-spacing: 0;
  text-transform: none;
}

[data-view="dashboard"] .visual-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.65fr);
  grid-template-rows: auto auto;
  gap: 14px;
  margin-bottom: 34px;
}

[data-view="dashboard"] .calendar-panel {
  grid-row: 1 / 3;
  grid-column: 1;
  padding: 22px;
  background: #fbfaf6;
  border: 1px solid #1d2421;
}

.calendar-feature {
  position: relative;
  height: 164px;
  margin: 0 0 22px;
  overflow: hidden;
  background: #1d2421;
  border-radius: 6px;
}

.calendar-feature img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.72) contrast(0.92);
}

.calendar-feature figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  color: #f8f4eb;
  background: rgba(29, 36, 33, 0.76);
}

.calendar-feature strong {
  overflow: hidden;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-feature span {
  flex: 0 0 auto;
  color: rgba(248, 244, 235, 0.7);
  font-size: 0.62rem;
}

[data-view="dashboard"] .calendar-day {
  min-height: 68px;
  padding: 8px;
  border-color: rgba(29, 36, 33, 0.16);
}

[data-view="dashboard"] .calendar-day:hover,
[data-view="dashboard"] .calendar-day.selected {
  color: #1d2421;
  background: #dce7dd;
}

[data-view="dashboard"] .focus-panel,
[data-view="dashboard"] .data-panel {
  margin: 0;
  padding: 20px;
  border: 1px solid #1d2421;
}

[data-view="dashboard"] .focus-panel {
  grid-column: 2;
  grid-row: 1;
  background: #e9e1f0;
}

[data-view="dashboard"] .data-panel {
  grid-column: 2;
  grid-row: 2;
  background: #f4dfb4;
}

[data-view="dashboard"] .occasion-orbit {
  min-height: 250px;
  padding: 4px 0 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  backdrop-filter: none;
}

[data-view="dashboard"] .orbit-ring {
  width: min(172px, 60vw);
}

[data-view="dashboard"] .orbit-core {
  width: 88px;
  height: 88px;
  background: #1d2421;
}

[data-view="dashboard"] .orbit-core span {
  font-size: 2.55rem;
}

[data-view="dashboard"] .orbit-caption strong {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.86rem;
}

[data-view="dashboard"] .status-bars {
  min-height: 126px;
  gap: 7px;
}

[data-view="dashboard"] .status-bar {
  min-height: 122px;
}

[data-view="dashboard"] .status-bar strong {
  font-size: 1.35rem;
}

[data-view="dashboard"] .status-bar span {
  font-size: 0.45rem;
  letter-spacing: 0;
}

[data-view="dashboard"] .people-strip {
  position: relative;
  margin: 0 0 34px;
  padding: 22px 0;
  border-block: 1px solid #1d2421;
}

[data-view="dashboard"] .people-list {
  position: relative;
  gap: 10px;
}

[data-view="dashboard"] .people-list::before {
  position: absolute;
  top: 26px;
  right: 0;
  left: 0;
  content: "";
  border-top: 1px solid rgba(29, 36, 33, 0.2);
}

[data-view="dashboard"] .person-chip {
  z-index: 1;
  min-width: 168px;
  background: #f5f4ef;
  border: 1px solid rgba(29, 36, 33, 0.2);
}

[data-view="dashboard"] .dashboard-planner {
  grid-template-columns: minmax(0, 1.22fr) minmax(340px, 0.78fr);
  gap: 18px;
}

[data-view="dashboard"] .planner-panel,
[data-view="dashboard"] .form-panel {
  padding: 24px;
  border: 1px solid #1d2421;
}

[data-view="dashboard"] .planner-panel {
  background: #fbfaf6;
}

[data-view="dashboard"] .form-panel {
  background: #e2ebef;
}

[data-view="dashboard"] .event-list {
  position: relative;
  padding-left: 24px;
}

[data-view="dashboard"] .event-list::before {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 7px;
  content: "";
  border-left: 1px solid rgba(29, 36, 33, 0.3);
}

[data-view="dashboard"] .event-card {
  position: relative;
  padding: 18px 0;
}

[data-view="dashboard"] .event-card::before {
  position: absolute;
  top: 24px;
  left: -22px;
  width: 9px;
  height: 9px;
  content: "";
  background: #f5f4ef;
  border: 1px solid #1d2421;
  border-radius: 50%;
}

[data-view="dashboard"] .event-card.selected {
  margin-inline: 0;
  padding-inline: 14px;
  background: #dce7dd;
  border-radius: 6px;
}

[data-view="dashboard"] .event-card.selected::before {
  left: -36px;
  background: #f2a286;
  box-shadow: 0 0 0 5px rgba(242, 162, 134, 0.18);
}

[data-view="dashboard"] .badge {
  min-height: 0;
  padding: 0 8px 0 0;
  font-size: 0.56rem;
  letter-spacing: 0;
  text-transform: none;
  border: 0;
  border-right: 1px solid rgba(29, 36, 33, 0.22);
  border-radius: 0;
}

[data-view="dashboard"] .badge:last-child {
  border-right: 0;
}

@media (max-width: 1120px) {
  .sidebar {
    grid-template-columns: 190px minmax(0, 1fr) auto;
    padding-inline: 22px;
  }

  .sidebar-tools {
    min-width: 230px;
  }

  .mini-panel {
    grid-template-columns: 112px minmax(220px, 0.8fr) minmax(300px, 1.2fr);
  }

  [data-view="dashboard"] .visual-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(270px, 0.65fr);
  }
}

@media (max-width: 900px) {
  .sidebar {
    position: relative;
    grid-template-columns: 180px minmax(0, 1fr);
    grid-template-rows: 58px auto auto;
    gap: 0 16px;
  }

  .nav-list {
    grid-row: 1;
    grid-column: 2;
  }

  .sidebar-tools {
    grid-row: 3;
    grid-column: 1 / -1;
    margin: 4px 0 10px;
  }

  .mini-panel {
    grid-row: 2;
    grid-template-columns: 110px minmax(200px, 0.8fr) minmax(240px, 1.2fr);
  }

  [data-view="dashboard"] .visual-grid {
    grid-template-columns: 1fr 1fr;
  }

  [data-view="dashboard"] .calendar-panel {
    grid-row: 1;
    grid-column: 1 / -1;
  }

  [data-view="dashboard"] .focus-panel {
    grid-row: 2;
    grid-column: 1;
  }

  [data-view="dashboard"] .data-panel {
    grid-row: 2;
    grid-column: 2;
  }
}

@media (max-width: 640px) {
  .sidebar {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 8px;
    padding: 12px 16px;
  }

  .brand,
  .nav-list,
  .mini-panel,
  .sidebar-tools {
    grid-row: auto;
    grid-column: 1;
  }

  .brand {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .nav-list a {
    padding: 8px 5px;
    font-size: 0.6rem;
  }

  .mini-panel {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 9px 0;
  }

  .context-heading,
  .mini-panel select,
  .next-action-copy {
    grid-column: 1;
  }

  .next-action-copy {
    padding-top: 6px;
  }

  .mini-panel .next-action-copy p {
    display: none;
  }

  .workspace {
    padding: 28px 14px 64px;
  }

  .view-header h1,
  .product-view > .view-header h1 {
    font-size: clamp(3.35rem, 16vw, 4.25rem);
  }

  [data-view="dashboard"] .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  [data-view="dashboard"] .stats-grid::before {
    display: none;
  }

  [data-view="dashboard"] .stat-card,
  [data-view="dashboard"] .stat-card:nth-child(1),
  [data-view="dashboard"] .stat-card:nth-child(2),
  [data-view="dashboard"] .stat-card:nth-child(3),
  [data-view="dashboard"] .stat-card.accent {
    min-height: 102px;
    border: 1px solid #1d2421;
  }

  [data-view="dashboard"] .visual-grid {
    grid-template-columns: 1fr;
  }

  [data-view="dashboard"] .calendar-panel,
  [data-view="dashboard"] .focus-panel,
  [data-view="dashboard"] .data-panel {
    grid-row: auto;
    grid-column: 1;
  }

  .calendar-feature {
    height: 132px;
  }

  .calendar-feature figcaption {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
  }

  .calendar-feature strong {
    max-width: 100%;
    font-size: 1rem;
  }

  .calendar-feature span {
    white-space: normal;
  }

  [data-view="dashboard"] .calendar-day {
    min-height: 52px;
    padding: 5px;
  }

  [data-view="dashboard"] .dashboard-planner {
    grid-template-columns: 1fr;
  }
}

/* Gift journal */
.gift-journal {
  margin: 0 0 44px;
  padding: 28px;
  overflow: hidden;
  color: #1d2421;
  background: #fbfaf6;
  border: 1px solid #1d2421;
  border-radius: 8px;
}

.journal-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(29, 36, 33, 0.24);
}

.journal-heading h2 {
  margin: 0;
  font-family: "Manrope", "Helvetica Neue", sans-serif;
  font-size: clamp(2rem, 4vw, 3.35rem);
  font-weight: 750;
  line-height: 0.94;
}

.journal-heading label {
  display: grid;
  width: min(260px, 42%);
  gap: 6px;
  color: #525a55;
  font-size: 0.72rem;
  font-weight: 650;
}

.journal-heading select {
  width: 100%;
  padding: 10px 34px 10px 12px;
  color: #1d2421;
  background-color: #eef0e4;
  border: 1px solid #1d2421;
  border-radius: 6px;
  font-weight: 700;
}

.journal-layout {
  display: grid;
  grid-template-columns: minmax(170px, 0.32fr) minmax(0, 1fr);
  min-height: 310px;
}

.journal-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  border-right: 1px solid rgba(29, 36, 33, 0.24);
}

.journal-summary div {
  display: flex;
  min-height: 118px;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border-right: 1px solid rgba(29, 36, 33, 0.15);
  border-bottom: 1px solid rgba(29, 36, 33, 0.15);
}

.journal-summary div:nth-child(2n) {
  border-right: 0;
}

.journal-summary div:nth-child(1) { background: #dce9e3; }
.journal-summary div:nth-child(2) { background: #eadfee; }
.journal-summary div:nth-child(3) { background: #f4e1cf; }
.journal-summary div:nth-child(4) { background: #dce7ee; }

.journal-summary strong {
  font-family: "Manrope", "Helvetica Neue", sans-serif;
  font-size: clamp(1.35rem, 2.5vw, 2.1rem);
  line-height: 1;
}

.journal-summary span {
  max-width: 10ch;
  color: #4d5651;
  font-size: 0.7rem;
  line-height: 1.25;
}

.journal-timeline {
  position: relative;
  padding: 28px 26px 30px 42px;
}

.journal-timeline::before {
  position: absolute;
  top: 31px;
  bottom: 34px;
  left: 24px;
  width: 1px;
  content: "";
  background: #1d2421;
  opacity: 0.22;
}

.journal-entry {
  position: relative;
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr) auto 30px;
  align-items: start;
  gap: 16px;
  padding: 0 0 25px;
}

.journal-entry:last-child {
  padding-bottom: 0;
}

.journal-entry::before {
  position: absolute;
  top: 4px;
  left: -23px;
  width: 9px;
  height: 9px;
  content: "";
  background: #fbfaf6;
  border: 2px solid #1d2421;
  border-radius: 50%;
}

.journal-entry.outcome-loved::before { background: #dd97a7; }
.journal-entry.outcome-liked::before { background: #a8c8bc; }
.journal-entry.outcome-miss::before { background: #e6b27d; }

.journal-entry time {
  color: #56615b;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.35;
}

.journal-entry-copy {
  min-width: 0;
}

.journal-entry-copy > div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px 10px;
}

.journal-entry-copy strong {
  font-family: "Manrope", "Helvetica Neue", sans-serif;
  font-size: 1rem;
  line-height: 1.2;
}

.journal-entry-copy span,
.journal-entry-copy p {
  color: #606862;
  font-size: 0.76rem;
  line-height: 1.45;
}

.journal-entry-copy p {
  margin: 7px 0 0;
}

.journal-outcome {
  padding: 5px 8px;
  white-space: nowrap;
  color: #26312c;
  background: #eef0e4;
  border-radius: 4px;
  font-size: 0.66rem;
  font-weight: 700;
}

.journal-entry .icon-delete {
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  color: #68706b;
  background: transparent;
  border: 0;
  font-size: 1.25rem;
}

.journal-empty {
  display: grid;
  max-width: 430px;
  min-height: 190px;
  align-content: center;
  gap: 8px;
}

.journal-empty strong {
  font-size: 1.05rem;
}

.journal-empty p {
  margin: 0;
  color: #68706b;
  font-size: 0.82rem;
  line-height: 1.55;
}

.journal-form {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr 1.2fr 0.65fr 1fr;
  align-items: end;
  gap: 14px;
  padding: 24px;
  background: #222a26;
}

.journal-form h3 {
  grid-column: 1 / -1;
  margin: 0 0 3px;
  color: #fffdf6;
  font-family: "Manrope", "Helvetica Neue", sans-serif;
  font-size: 1.18rem;
  font-weight: 720;
}

.journal-form label {
  display: grid;
  gap: 6px;
  color: #d9ded8;
  font-size: 0.67rem;
  font-weight: 650;
}

.journal-form input,
.journal-form select,
.journal-form textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 11px;
  color: #1d2421;
  background: #fffdf6;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px;
}

.journal-form textarea {
  min-height: 76px;
  resize: vertical;
}

.journal-form .journal-note {
  grid-column: 1 / 5;
}

.journal-form .primary-action {
  min-height: 44px;
  color: #1d2421;
  background: #e4b6c1;
  border-color: #e4b6c1;
  border-radius: 5px;
}

@media (max-width: 980px) {
  .journal-layout {
    grid-template-columns: 1fr;
  }

  .journal-summary {
    grid-template-columns: repeat(4, 1fr);
    border-right: 0;
  }

  .journal-summary div,
  .journal-summary div:nth-child(2n) {
    min-height: 102px;
    border-right: 1px solid rgba(29, 36, 33, 0.15);
  }

  .journal-summary div:last-child {
    border-right: 0;
  }

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

  .journal-form .journal-note {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .gift-journal {
    margin-inline: -2px;
    padding: 18px;
  }

  .journal-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
  }

  .journal-heading h2 {
    font-size: 2.5rem;
  }

  .journal-heading label {
    width: 100%;
  }

  .journal-summary {
    grid-template-columns: 1fr 1fr;
  }

  .journal-summary div:nth-child(2) {
    border-right: 0;
  }

  .journal-summary div:nth-child(3) {
    border-right: 1px solid rgba(29, 36, 33, 0.15);
  }

  .journal-timeline {
    padding: 24px 2px 28px 25px;
  }

  .journal-timeline::before {
    left: 7px;
  }

  .journal-entry {
    grid-template-columns: 1fr 28px;
    gap: 7px 10px;
    padding-bottom: 25px;
  }

  .journal-entry::before {
    left: -22px;
  }

  .journal-entry time {
    grid-column: 1;
  }

  .journal-entry-copy {
    grid-column: 1;
  }

  .journal-outcome {
    grid-column: 1;
    width: fit-content;
  }

  .journal-entry .icon-delete {
    grid-row: 1;
    grid-column: 2;
  }

  .journal-form {
    grid-template-columns: 1fr;
    margin-inline: -18px;
    padding: 20px 18px;
  }

  .journal-form .journal-note,
  .journal-form h3 {
    grid-column: 1;
  }
}

/* Product refinement: quieter hierarchy, human evidence, less dashboard theatre */
:root {
  --paper: #f6f4ef;
  --paper-bright: #fffdf8;
  --ink: #18211d;
  --muted: #626b66;
  --line: rgba(24, 33, 29, 0.16);
  --sage-wash: #dfe9e1;
  --lilac-wash: #e9e2ed;
  --sky-wash: #dee9ee;
  --apricot-wash: #f3dfce;
  --coral: #e58f78;
}

html {
  background: var(--paper);
}

body {
  color: var(--ink);
  background: var(--paper);
}

.workspace {
  width: min(100%, 1480px);
  padding: 38px clamp(20px, 4.2vw, 68px) 96px;
}

.view-header {
  min-height: 86px;
  align-items: center;
  margin-bottom: 30px;
  padding: 0;
  border: 0;
}

.view-header::after {
  display: none;
}

.view-header h1,
.product-view > .view-header h1 {
  max-width: 100%;
  color: var(--ink);
  font-family: "Manrope", "Helvetica Neue", sans-serif;
  font-size: clamp(3.2rem, 5.2vw, 5.5rem);
  font-weight: 760;
  line-height: 0.96;
}

.view-actions {
  gap: 8px;
}

.view-actions button,
.view-header .primary-action {
  min-width: 126px;
  min-height: 42px;
  border-radius: 6px;
}

.sidebar {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.brand-mark {
  transform: rotate(-7deg);
}

.brand strong {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.82rem;
  font-style: italic;
  font-weight: 500;
}

.nav-list a {
  position: relative;
  color: rgba(248, 244, 235, 0.68);
  background: transparent;
  border-radius: 4px;
}

.nav-list a.active {
  color: #18211d;
  background: #fffdf8;
}

.nav-list a.active::after {
  position: absolute;
  right: 10px;
  bottom: 4px;
  left: 10px;
  display: block;
  height: 2px;
  content: "";
  background: var(--coral);
}

.mini-panel {
  padding-block: 7px 9px;
}

.panel-heading h2,
.people-strip-heading h2,
.profile-title-row h2,
.inspiration-heading h2,
.finder-head h2,
.shortlist-heading h2,
.gift-readout h2,
.reminder-layout .panel-heading h2 {
  font-size: clamp(1.45rem, 1.8vw, 2rem);
  font-weight: 720;
}

.people-strip-heading > span,
.profile-title-row > span,
.inspiration-heading > span,
.shortlist-heading > span {
  display: none;
}

/* Dashboard becomes a calendar and people workspace, not a KPI wall. */
[data-view="dashboard"] .stats-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0 0 26px;
  overflow: hidden;
  background: var(--paper-bright);
  border-block: 1px solid var(--ink);
}

[data-view="dashboard"] .stats-grid::before {
  display: none;
}

[data-view="dashboard"] .stat-card,
[data-view="dashboard"] .stat-card:nth-child(1),
[data-view="dashboard"] .stat-card:nth-child(2),
[data-view="dashboard"] .stat-card:nth-child(3),
[data-view="dashboard"] .stat-card.accent {
  min-height: 88px;
  padding: 16px 20px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
}

[data-view="dashboard"] .stat-card:last-child {
  border-right: 0;
}

[data-view="dashboard"] .stat-card::before,
[data-view="dashboard"] .stat-card::after {
  display: none;
}

[data-view="dashboard"] .stat-card strong {
  margin: 0;
  font-family: "Manrope", "Helvetica Neue", sans-serif;
  font-size: clamp(1.7rem, 2.5vw, 2.5rem);
  font-weight: 720;
}

[data-view="dashboard"] .stat-card span {
  margin-top: 8px;
  font-size: 0.68rem;
}

[data-view="dashboard"] .visual-grid {
  grid-template-columns: minmax(0, 1.7fr) minmax(270px, 0.55fr);
  align-items: start;
  gap: 16px;
}

[data-view="dashboard"] .calendar-panel,
[data-view="dashboard"] .focus-panel,
[data-view="dashboard"] .data-panel {
  border-color: var(--ink);
  border-radius: 7px;
  box-shadow: none;
}

[data-view="dashboard"] .calendar-panel {
  padding: 24px;
}

.calendar-feature {
  height: 190px;
  border-radius: 5px;
}

.calendar-feature img {
  filter: saturate(0.8) contrast(0.95);
}

.calendar-feature figcaption {
  background: rgba(24, 33, 29, 0.84);
}

.calendar-feature strong {
  font-family: "Manrope", "Helvetica Neue", sans-serif;
  font-size: 1.12rem;
}

[data-view="dashboard"] .calendar-day {
  min-height: 72px;
  padding: 8px;
}

[data-view="dashboard"] .focus-panel {
  padding: 23px;
  background: var(--lilac-wash);
}

[data-view="dashboard"] .occasion-orbit {
  display: grid;
  min-height: 0;
  gap: 18px;
  padding: 16px 0 4px;
}

.event-countdown {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.event-countdown strong {
  font-family: "Manrope", "Helvetica Neue", sans-serif;
  font-size: clamp(3.4rem, 5vw, 5rem);
  font-weight: 760;
  line-height: 0.8;
}

.event-countdown span {
  padding-bottom: 3px;
  color: var(--muted);
  font-size: 0.72rem;
}

[data-view="dashboard"] .orbit-caption {
  margin: 0;
  text-align: left;
}

[data-view="dashboard"] .orbit-caption strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1rem;
}

[data-view="dashboard"] .orbit-caption p {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
}

.event-readiness {
  display: grid;
  gap: 8px;
}

.event-readiness i {
  height: 4px;
  overflow: hidden;
  background: rgba(24, 33, 29, 0.13);
}

.event-readiness b {
  display: block;
  height: 100%;
  background: var(--ink);
}

.event-readiness span {
  color: var(--muted);
  font-size: 0.68rem;
}

[data-view="dashboard"] .data-panel {
  padding: 23px;
  background: var(--apricot-wash);
}

[data-view="dashboard"] .status-bars {
  min-height: 104px;
  gap: 6px;
}

[data-view="dashboard"] .status-bar {
  min-height: 102px;
}

[data-view="dashboard"] .people-strip {
  padding-block: 26px;
}

[data-view="dashboard"] .people-list::before {
  top: 29px;
}

[data-view="dashboard"] .person-chip {
  min-width: 210px;
  padding: 12px;
  background: var(--paper-bright);
  border-color: var(--line);
  border-radius: 6px;
}

[data-view="dashboard"] .person-chip > span {
  width: 40px;
  height: 40px;
  background: var(--sage-wash);
}

[data-view="dashboard"] .dashboard-planner {
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.82fr);
  gap: 16px;
}

[data-view="dashboard"] .planner-panel,
[data-view="dashboard"] .form-panel {
  padding: 26px;
  border-radius: 7px;
}

[data-view="dashboard"] .form-panel {
  position: relative;
  background: var(--sky-wash);
}

[data-view="dashboard"] .form-panel::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  content: "";
  background: var(--coral);
}

.vibe-assistant {
  padding: 17px 0;
  background: transparent;
  border: 0;
  border-block: 1px solid var(--line);
  border-radius: 0;
}

/* Gifts are organized around memory and observation, never a synthetic score. */
[data-view="gifts"] .gift-panel {
  padding-top: 0;
}

.recipient-workbench {
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.55fr);
  gap: 14px;
  margin-bottom: 28px;
}

.recipient-profile-form,
.gift-readout {
  padding: 28px;
  border-color: var(--line);
  border-radius: 7px;
}

.recipient-profile-form {
  background: #f0ede7;
}

.gift-readout {
  align-content: start;
  background: var(--sage-wash);
}

.gift-readout h2 {
  margin-bottom: 24px;
}

.taste-brief > p {
  margin: 0 0 20px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.25;
}

.taste-words {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.taste-words span {
  padding: 6px 8px;
  color: #39443e;
  background: rgba(255, 253, 248, 0.62);
  border: 1px solid rgba(24, 33, 29, 0.12);
  border-radius: 4px;
  font-size: 0.66rem;
}

.best-gift-read {
  margin-top: 24px;
}

.best-gift-read > span {
  display: block;
  margin-bottom: 8px;
}

.best-gift-read > strong {
  display: block;
  font-family: "Manrope", "Helvetica Neue", sans-serif;
  font-size: 1.1rem;
}

.gift-readout-empty {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.gift-journal {
  margin-bottom: 28px;
  border-color: var(--ink);
  border-radius: 7px;
}

.journal-heading h2 {
  font-size: clamp(2.3rem, 4vw, 4rem);
}

.inspiration-inbox {
  margin-bottom: 36px;
  padding: 28px;
  background: #f0ede7;
  border: 0;
  border-left: 5px solid var(--coral);
  border-radius: 0 7px 7px 0;
}

.inspiration-heading {
  padding-bottom: 18px;
}

.gift-finder {
  padding-block: 26px 32px;
  border-block: 1px solid var(--ink);
}

.finder-head {
  margin-bottom: 20px;
}

.idea-card {
  min-height: 250px;
  border-radius: 7px;
}

.gift-form {
  margin: 28px 0 40px;
  padding: 24px;
  background: var(--sky-wash);
  border: 0;
  border-left: 5px solid var(--ink);
}

.gift-shortlist {
  padding-block: 0 28px;
}

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

.comparison-card {
  min-height: 0;
  padding: 18px;
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.comparison-title > b,
.comparison-metrics {
  display: none;
}

.comparison-card > p {
  margin: 14px 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.comparison-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 16px;
}

.comparison-facts span {
  padding: 4px 7px;
  background: var(--sage-wash);
  border-radius: 3px;
  font-size: 0.62rem;
}

.gift-entry {
  grid-template-columns: minmax(0, 1.35fr) minmax(190px, 0.5fr) auto;
  gap: 24px;
  padding-block: 22px;
  border-bottom: 1px solid var(--line);
}

.gift-fit {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: 0;
}

.gift-fit strong,
.gift-fit i,
.gift-metric-strip {
  display: none;
}

.gift-fit em {
  color: var(--ink);
  font-family: "Manrope", "Helvetica Neue", sans-serif;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 720;
}

.gift-fit span {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.45;
}

/* Studio keeps the canvas dominant and moves controls into supporting roles. */
[data-view="studio"] .view-header {
  margin-bottom: 20px;
}

.studio-mode-bar {
  padding-top: 0;
}

.template-rail {
  gap: 10px;
  padding-bottom: 18px;
}

.template-choice {
  min-width: 154px;
  padding: 0 0 12px;
  overflow: hidden;
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.template-choice.active {
  border-color: var(--ink);
  box-shadow: inset 0 -4px 0 var(--coral);
}

.template-mini {
  height: 122px;
  margin: 0 0 12px;
  border: 0;
  border-radius: 0;
}

.template-choice strong {
  padding-inline: 12px;
  font-size: 0.76rem;
}

.designer-shell {
  grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.58fr);
  gap: 16px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.canvas-stage {
  border-radius: 7px;
}

.canvas-toolbar,
.layer-inspector {
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(24, 33, 29, 0.12);
}

.designer-tools {
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.control-section {
  border-radius: 5px;
}

/* Reminders read like a working list and dated letter. */
.reminder-overview {
  background: var(--paper-bright);
  border-block-color: var(--ink);
}

.reminder-layout {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 28px;
}

.reminder-layout .people-panel {
  padding-left: 0;
}

.reminder-layout .reminder-panel {
  padding: 26px;
  background: var(--sage-wash);
  border: 0;
  border-radius: 7px;
}

.task-entry {
  padding-block: 22px;
}

@media (max-width: 980px) {
  .view-header h1,
  .product-view > .view-header h1 {
    font-size: clamp(3rem, 9vw, 4.8rem);
  }

  [data-view="dashboard"] .visual-grid,
  [data-view="dashboard"] .dashboard-planner,
  .recipient-workbench,
  .designer-shell,
  .reminder-layout {
    grid-template-columns: 1fr;
  }

  [data-view="dashboard"] .calendar-panel,
  [data-view="dashboard"] .focus-panel,
  [data-view="dashboard"] .data-panel {
    grid-row: auto;
    grid-column: 1;
  }

  [data-view="dashboard"] .focus-panel,
  [data-view="dashboard"] .data-panel {
    min-height: 0;
  }

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

  .gift-entry {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.5fr);
  }

  .gift-entry-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .workspace {
    padding: 26px 14px 70px;
  }

  .view-header {
    min-height: 64px;
    align-items: flex-end;
    gap: 16px;
  }

  .view-header h1,
  .product-view > .view-header h1 {
    font-size: clamp(2.65rem, 13vw, 3.65rem);
  }

  .view-header .primary-action,
  .view-actions button {
    min-width: 0;
    padding-inline: 12px;
  }

  [data-view="dashboard"] .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  [data-view="dashboard"] .stat-card:nth-child(2) {
    border-right: 0;
  }

  [data-view="dashboard"] .stat-card:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  [data-view="dashboard"] .calendar-panel,
  [data-view="dashboard"] .planner-panel,
  [data-view="dashboard"] .form-panel {
    padding: 18px;
  }

  .calendar-feature {
    height: 144px;
  }

  [data-view="dashboard"] .calendar-day {
    min-height: 55px;
  }

  .recipient-profile-form,
  .gift-readout,
  .inspiration-inbox {
    padding: 20px;
  }

  .recipient-fields,
  .gift-comparison,
  .gift-entry {
    grid-template-columns: 1fr;
  }

  .gift-entry-actions {
    grid-column: 1;
  }

  .finder-head,
  .finder-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .template-choice {
    min-width: 132px;
  }

  .template-mini {
    height: 100px;
  }
}

/* Progressive disclosure for editors */
details > summary {
  list-style: none;
  cursor: pointer;
}

details > summary::-webkit-details-marker {
  display: none;
}

#eventFormPanel > summary,
#recipientProfilePanel > summary {
  position: relative;
  padding-right: 74px;
}

#eventFormPanel > summary::after,
#recipientProfilePanel > summary::after {
  position: absolute;
  top: 50%;
  right: 0;
  content: "Edit";
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 650;
  transform: translateY(-50%);
}

#eventFormPanel[open] > summary::after,
#recipientProfilePanel[open] > summary::after {
  content: "Close";
}

#eventFormPanel > summary > span,
#recipientProfilePanel > summary > span {
  display: none;
}

#eventFormPanel[open] > summary {
  margin-bottom: 22px;
}

.recipient-profile-fields {
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

@media (min-width: 981px) {
  [data-view="dashboard"] .focus-panel {
    height: 238px;
    align-self: start;
  }

  [data-view="dashboard"] .data-panel {
    height: 350px;
    align-self: start;
  }
}

@media (max-width: 640px) {
  #eventFormPanel,
  #recipientProfilePanel {
    min-height: 0;
  }

  #eventFormPanel:not([open]),
  #recipientProfilePanel:not([open]) {
    padding-block: 18px;
  }

  #eventFormPanel:not([open])::before {
    display: block;
  }

  #eventFormPanel > summary,
  #recipientProfilePanel > summary {
    margin: 0;
  }

  #recipientProfilePanel:not([open]) + .gift-readout {
    min-height: 0;
  }
}

/* The calendar already carries progress; keep the dashboard focused. */
[data-view="dashboard"] .data-panel {
  display: none;
}

[data-view="dashboard"] .visual-grid {
  grid-template-columns: minmax(0, 1fr) minmax(270px, 0.34fr);
  grid-template-rows: auto;
}

[data-view="dashboard"] .calendar-panel,
[data-view="dashboard"] .focus-panel {
  grid-row: 1;
}

@media (max-width: 980px) {
  [data-view="dashboard"] .visual-grid {
    grid-template-columns: 1fr;
  }

  [data-view="dashboard"] .calendar-panel,
  [data-view="dashboard"] .focus-panel {
    grid-row: auto;
    grid-column: 1;
  }
}

/* Gifts: one focused workspace, then the record beneath it. */
[data-view="gifts"] .view-header {
  min-height: 120px;
  margin-bottom: 20px;
}

[data-view="gifts"] .view-header h1 {
  font-size: clamp(4.6rem, 7vw, 7.4rem);
  line-height: 0.8;
}

[data-view="gifts"] .gift-panel {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.gift-top-grid {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 1;
  grid-template-columns: minmax(0, 1.55fr) minmax(285px, 0.45fr);
  gap: 18px;
  align-items: start;
}

.gift-top-grid .gift-assistant {
  margin: 0;
  overflow: hidden;
  background: #f6f1f6;
  border-color: rgba(33, 44, 39, 0.28);
  border-radius: 8px;
}

.gift-top-grid .gift-assistant-heading {
  position: relative;
  min-height: 210px;
  overflow: hidden;
  padding: 34px;
  background: #dbe5df;
}

.gift-top-grid .gift-assistant-heading::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40%;
  content: "";
  background-image: url("./assets/invitations/after-dark-still.jpg");
  background-position: center;
  background-size: cover;
  border-left: 1px solid rgba(33, 44, 39, 0.2);
}

.gift-top-grid .gift-assistant-heading > div,
.gift-top-grid .gift-assistant-heading > button {
  position: relative;
  z-index: 1;
}

.gift-top-grid .gift-assistant-heading > div {
  width: 55%;
}

.gift-top-grid .gift-assistant-heading h2 {
  font-size: clamp(2.6rem, 4.2vw, 4.5rem);
  line-height: 0.92;
}

.gift-top-grid .gift-assistant-heading p {
  max-width: 430px;
  margin-top: 16px;
  font-size: 0.82rem;
  line-height: 1.5;
}

.gift-top-grid .gift-assistant-heading > button {
  align-self: flex-end;
  color: var(--cream);
  background: var(--ink);
  border-color: var(--ink);
}

.gift-top-grid .gift-chat {
  min-height: 205px;
  max-height: 480px;
  padding: 26px 30px;
}

.gift-top-grid .gift-message > p {
  max-width: 720px;
}

.gift-top-grid .gift-chat-prompts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gift-top-grid .gift-chat-prompts button {
  min-height: 54px;
}

.gift-top-grid .gift-chat-prompts button:nth-child(2) {
  border-right: 0;
}

.gift-top-grid .gift-chat-prompts button:nth-child(-n + 2) {
  border-bottom: 1px solid rgba(42, 54, 47, 0.22);
}

.gift-top-grid .recipient-workbench {
  position: sticky;
  top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.gift-top-grid .recipient-profile-form,
.gift-top-grid .gift-readout {
  padding: 22px;
  border-radius: 7px;
}

.gift-top-grid .recipient-profile-form {
  background: #f2eee8;
}

.gift-top-grid .profile-title-row {
  min-height: 36px;
  padding: 0 54px 0 0;
}

.gift-top-grid .profile-title-row h2 {
  font-size: 1.45rem;
}

.gift-top-grid .recipient-profile-form[open] .profile-title-row {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.gift-top-grid .recipient-fields {
  grid-template-columns: 1fr;
  gap: 10px;
}

.gift-top-grid .gift-readout {
  min-height: 230px;
  background: #dce7e1;
}

.gift-top-grid .gift-readout h2 {
  margin: 0 0 16px;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.8rem;
}

.gift-top-grid .gift-readout > p {
  font-size: 0.77rem;
  line-height: 1.55;
}

.gift-top-grid .best-gift-read {
  margin-top: 22px;
  padding-top: 16px;
}

.gift-top-grid .best-gift-read strong {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.35rem;
}

[data-view="gifts"] .gift-shortlist {
  grid-column: 1 / -1;
  grid-row: 3;
  padding: 30px 0 24px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}

[data-view="gifts"] .shortlist-heading {
  align-items: baseline;
  margin-bottom: 18px;
}

[data-view="gifts"] .shortlist-heading h2 {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(2.4rem, 4vw, 4rem);
  font-weight: 500;
  line-height: 1;
}

[data-view="gifts"] .gift-comparison {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

[data-view="gifts"] .gift-comparison:has(.comparison-empty) {
  border: 0;
}

[data-view="gifts"] .comparison-empty {
  margin: 0;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.2rem;
  font-style: italic;
}

[data-view="gifts"] .comparison-card {
  min-height: 220px;
  padding: 24px;
  background: var(--paper-bright);
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

[data-view="gifts"] .comparison-card:nth-child(2) {
  background: #eef0e8;
}

[data-view="gifts"] .comparison-card:nth-child(3) {
  background: #eee4ef;
}

[data-view="gifts"] .comparison-card:only-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(300px, 1.35fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 8px 28px;
  min-height: 150px;
}

[data-view="gifts"] .comparison-card:only-child .comparison-title {
  grid-column: 1;
  grid-row: 1;
}

[data-view="gifts"] .comparison-card:only-child > p {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
}

[data-view="gifts"] .comparison-card:only-child .comparison-facts {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
}

[data-view="gifts"] .comparison-card:only-child > button {
  grid-column: 3;
  grid-row: 1 / span 2;
}

[data-view="gifts"] .comparison-title strong {
  margin-top: 6px;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.6rem;
  font-weight: 600;
}

[data-view="gifts"] .gift-list-section {
  grid-column: 1 / -1;
  grid-row: 4;
  margin-bottom: 18px;
}

[data-view="gifts"] .gift-list-section > h2 {
  margin: 0;
  padding: 4px 0 18px;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(2.2rem, 3.6vw, 3.7rem);
  font-weight: 600;
  line-height: 1;
  border-bottom: 1px solid var(--ink);
}

[data-view="gifts"] .gift-entry {
  min-height: 150px;
  padding: 26px 4px;
}

[data-view="gifts"] .gift-entry-copy strong {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.75rem;
  font-weight: 600;
}

[data-view="gifts"] .gift-journal {
  grid-column: 1 / 9;
  grid-row: 5 / span 2;
  margin: 0;
  padding: 30px;
  background: #e8e0ea;
  border: 0;
  border-radius: 8px;
}

[data-view="gifts"] .journal-heading {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(38, 45, 41, 0.24);
}

[data-view="gifts"] .journal-heading h2 {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(2.6rem, 4vw, 4.5rem);
  font-weight: 600;
  line-height: 0.9;
}

[data-view="gifts"] .journal-layout {
  grid-template-columns: 0.7fr 1.3fr;
  min-height: 270px;
}

[data-view="gifts"] .journal-summary {
  background: transparent;
}

[data-view="gifts"] .journal-summary > div {
  min-height: 90px;
  padding: 18px;
  background: rgba(255, 253, 248, 0.34);
}

[data-view="gifts"] .journal-timeline {
  padding: 24px;
}

.journal-entry-drawer {
  margin-top: 18px;
  border-top: 1px solid rgba(38, 45, 41, 0.28);
}

.journal-entry-drawer > summary,
.manual-gift-drawer > summary,
.inspiration-inbox > summary {
  position: relative;
  min-height: 62px;
  padding: 20px 46px 20px 0;
  font-family: "Manrope", "Helvetica Neue", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
}

.journal-entry-drawer > summary::after,
.manual-gift-drawer > summary::after,
.inspiration-inbox > summary::after {
  position: absolute;
  top: 50%;
  right: 4px;
  content: "+";
  font-family: "Manrope", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  transform: translateY(-50%);
}

.journal-entry-drawer[open] > summary::after,
.manual-gift-drawer[open] > summary::after,
.inspiration-inbox[open] > summary::after {
  content: "−";
}

.journal-entry-drawer .journal-form {
  margin-top: 0;
  padding: 22px;
  background: var(--ink);
  border-radius: 6px;
}

.journal-entry-drawer .journal-form h3 {
  display: none;
}

[data-view="gifts"] .manual-gift-drawer {
  grid-column: 9 / -1;
  grid-row: 5;
  align-self: start;
  padding: 0 22px;
  color: var(--cream);
  background: var(--ink);
  border-radius: 7px;
}

[data-view="gifts"] .manual-gift-drawer > summary {
  color: var(--cream);
}

[data-view="gifts"] .manual-gift-drawer .gift-form {
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0 0 24px;
  background: transparent;
  border: 0;
}

[data-view="gifts"] .manual-gift-drawer .gift-form > label,
[data-view="gifts"] .manual-gift-drawer .gift-form > button {
  grid-column: 1;
}

[data-view="gifts"] .manual-gift-drawer .gift-form label {
  color: rgba(251, 248, 241, 0.8);
}

[data-view="gifts"] .inspiration-inbox {
  grid-column: 9 / -1;
  grid-row: 6;
  align-self: start;
  margin: 0;
  padding: 0 22px 18px;
  background: #dce7ee;
  border: 0;
  border-radius: 7px;
}

[data-view="gifts"] .inspiration-inbox > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-right: 46px;
}

[data-view="gifts"] .inspiration-inbox > summary h2 {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.75rem;
  font-weight: 600;
}

[data-view="gifts"] .inspiration-form {
  grid-template-columns: 1fr;
  padding-top: 18px;
  border-top: 1px solid rgba(38, 45, 41, 0.24);
}

[data-view="gifts"] .inspiration-form > label,
[data-view="gifts"] .inspiration-save-row {
  grid-column: 1;
}

[data-view="gifts"] .inspiration-save-row {
  display: grid;
  gap: 10px;
}

@media (max-width: 1050px) {
  .gift-top-grid {
    grid-template-columns: 1fr;
  }

  .gift-top-grid .recipient-workbench {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  [data-view="gifts"] .gift-journal {
    grid-column: 1 / -1;
    grid-row: 5;
  }

  [data-view="gifts"] .manual-gift-drawer {
    grid-column: 1 / 7;
    grid-row: 6;
  }

  [data-view="gifts"] .inspiration-inbox {
    grid-column: 7 / -1;
    grid-row: 6;
  }
}

@media (max-width: 700px) {
  [data-view="gifts"] .view-header {
    min-height: 86px;
    margin-bottom: 18px;
  }

  [data-view="gifts"] .view-header h1 {
    font-size: clamp(3.4rem, 18vw, 5rem);
  }

  [data-view="gifts"] .gift-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .gift-top-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .gift-top-grid .gift-assistant-heading {
    min-height: 230px;
    padding: 22px;
  }

  .gift-top-grid .gift-assistant-heading::after {
    top: auto;
    left: 0;
    width: 100%;
    height: 92px;
    border-top: 1px solid rgba(33, 44, 39, 0.2);
    border-left: 0;
    background-position: center 58%;
  }

  .gift-top-grid .gift-assistant-heading > div {
    width: 100%;
  }

  .gift-top-grid .gift-assistant-heading h2 {
    font-size: 2.65rem;
  }

  .gift-top-grid .gift-assistant-heading p {
    display: none;
  }

  .gift-top-grid .gift-assistant-heading > button {
    position: absolute;
    right: 14px;
    bottom: 18px;
  }

  .gift-top-grid .gift-chat {
    min-height: 170px;
    padding: 22px 18px;
  }

  .gift-top-grid .gift-chat-prompts {
    grid-template-columns: 1fr 1fr;
  }

  .gift-top-grid .recipient-workbench {
    display: flex;
  }

  [data-view="gifts"] .gift-shortlist,
  [data-view="gifts"] .gift-list-section,
  [data-view="gifts"] .gift-journal,
  [data-view="gifts"] .manual-gift-drawer,
  [data-view="gifts"] .inspiration-inbox {
    grid-column: auto;
    grid-row: auto;
  }

  [data-view="gifts"] .gift-shortlist {
    order: 2;
  }

  [data-view="gifts"] .gift-list-section {
    order: 3;
  }

  [data-view="gifts"] .gift-journal {
    order: 4;
    padding: 22px 18px;
  }

  [data-view="gifts"] .manual-gift-drawer {
    order: 5;
  }

  [data-view="gifts"] .inspiration-inbox {
    order: 6;
  }

  [data-view="gifts"] .gift-comparison {
    grid-template-columns: 1fr;
  }

  [data-view="gifts"] .comparison-card {
    min-height: 0;
  }

  [data-view="gifts"] .comparison-card:only-child {
    display: block;
    min-height: 0;
  }

  [data-view="gifts"] .comparison-card:only-child > p,
  [data-view="gifts"] .comparison-card:only-child .comparison-facts {
    margin: 14px 0;
  }

  [data-view="gifts"] .journal-heading {
    display: block;
  }

  [data-view="gifts"] .journal-heading label {
    display: block;
    margin-top: 16px;
  }

  [data-view="gifts"] .journal-layout {
    grid-template-columns: 1fr;
  }

  [data-view="gifts"] .journal-summary {
    grid-template-columns: 1fr 1fr;
  }

  .gift-top-grid .gift-recommendations {
    grid-template-columns: 1fr;
  }
}

/* Final enterprise interaction states */
.person-row,
.person-row:hover,
.person-row.selected {
  color: var(--ink) !important;
}

.person-company-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.person-company-form h3 {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  font-size: 1rem;
}

.person-company-form label {
  margin: 0;
  font-size: 0.62rem;
}

.person-company-form input {
  min-height: 39px;
  margin-top: 6px;
  padding: 8px 10px;
}

.person-company-form button {
  align-self: end;
  min-height: 39px;
  color: var(--paper-bright);
  font-size: 0.68rem;
  font-weight: 680;
  background: var(--ink);
  border-color: var(--ink);
}

@media (max-width: 560px) {
  .person-company-form {
    grid-template-columns: 1fr;
  }

  .person-company-form h3 {
    grid-column: 1;
  }
}

/* Home: calendar, relationships, then analysis */
.product-view.active[data-view="dashboard"] {
  display: flex;
  flex-direction: column;
}

[data-view="dashboard"] > .view-header { order: 0; }
[data-view="dashboard"] > .visual-grid { order: 1; }
[data-view="dashboard"] > .stats-grid { order: 2; }
[data-view="dashboard"] > .people-directory { order: 3; }
[data-view="dashboard"] > .program-grid { order: 4; }
[data-view="dashboard"] > .dashboard-planner { order: 5; }

[data-view="dashboard"] > .view-header h1 {
  font-size: clamp(3.4rem, 5vw, 5.2rem);
}

[data-view="dashboard"] > .visual-grid {
  margin-bottom: 28px;
}

[data-view="dashboard"] > .stats-grid {
  margin-bottom: 34px;
}

[data-view="dashboard"] .people-directory {
  margin-bottom: 34px;
}

[data-view="dashboard"] .program-panel {
  min-height: 210px;
}

.people-table-head,
.person-row {
  grid-template-columns: minmax(210px, 1.25fr) minmax(150px, 0.9fr) minmax(170px, 1fr) minmax(220px, 1.3fr) minmax(88px, 0.5fr);
}

.person-gift-memory,
.person-preferences {
  min-width: 0;
}

.person-gift-memory strong,
.person-gift-memory small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-gift-memory strong {
  font-size: 0.7rem;
}

.person-gift-memory small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.58rem;
}

.person-preferences {
  display: -webkit-box;
  overflow: hidden;
  color: #4b534f;
  font-size: 0.65rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.person-important-dates {
  display: grid;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.person-important-dates h3 {
  margin: 0 0 10px;
  font-size: 1rem;
}

#personImportantDateList {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

#personImportantDateList > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  font-size: 0.62rem;
  background: #edf0ea;
  border: 1px solid var(--line);
  border-radius: 4px;
}

#personImportantDateList p {
  margin: 0;
  color: var(--muted);
  font-size: 0.65rem;
}

#personImportantDateList button {
  width: 18px;
  height: 18px;
  padding: 0;
  line-height: 1;
  background: transparent;
  border: 0;
}

#personImportantDateForm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px auto;
  gap: 8px;
}

#personImportantDateForm input,
#personImportantDateForm button {
  min-height: 38px;
  padding: 8px 10px;
  font-size: 0.64rem;
}

/* Invitation board */
.invitation-draft-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 14px 0 10px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.invitation-draft-bar > span {
  flex: 0 0 auto;
  margin-right: 3px;
  color: var(--muted);
  font-size: 0.62rem;
}

.invitation-draft-bar button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 6px 10px;
  color: var(--muted);
  font-size: 0.62rem;
  background: transparent;
  border-color: var(--line);
  border-radius: 4px;
}

.invitation-draft-bar button.active {
  color: var(--ink);
  background: #eef2ed;
  border-color: var(--ink);
}

[data-view="studio"] .template-rail {
  gap: 10px;
  padding: 12px 2px 18px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

[data-view="studio"] .template-choice {
  min-width: 142px;
  scroll-snap-align: start;
}

.mini-split { color: #57625b; background: #d9e2dc; }
.mini-split i:nth-child(1) { inset: 7% 51% 7% 7%; }
.mini-split i:nth-child(2) { top: 18%; right: 8%; width: 34%; height: 4px; }
.mini-split i:nth-child(3) { right: 8%; bottom: 20%; width: 34%; height: 38%; }

.mini-ticket { color: #856453; background: #eee0cf; }
.mini-ticket::after { position:absolute; inset:9%; content:""; border:1px dashed currentColor; }
.mini-ticket i:nth-child(1) { top: 24%; left: 18%; width: 64%; height: 4px; }
.mini-ticket i:nth-child(2) { top: 43%; left: 28%; width: 44%; height: 24%; border-radius: 50%; }
.mini-ticket i:nth-child(3) { bottom: 14%; left: 24%; width: 52%; height: 2px; }

.mini-folio { color: #4f5552; background: #d8d8d2; }
.mini-folio i:nth-child(1) { inset: 7% 7% 46%; }
.mini-folio i:nth-child(2) { bottom: 10%; left: 8%; width: 40%; height: 30%; }
.mini-folio i:nth-child(3) { right: 8%; bottom: 10%; width: 38%; height: 30%; }

.mini-orbit { color: #77627e; background: #e7deea; }
.mini-orbit i { border: 1px solid currentColor; border-radius: 50%; background: transparent; }
.mini-orbit i:nth-child(1) { top: 13%; left: 19%; width: 62%; height: 62%; }
.mini-orbit i:nth-child(2) { top: 30%; left: 36%; width: 28%; height: 28%; background: currentColor; }
.mini-orbit i:nth-child(3) { right: 13%; bottom: 12%; width: 18%; height: 18%; }

.template-split.has-photo #invitePhoto {
  inset: 0 50% 0 0;
  width: 50%;
  height: 100%;
  object-fit: cover;
}

.template-split.has-photo .invite-copy {
  width: 48%;
  margin-left: 52%;
  padding: 8%;
  text-align: left;
}

.template-ticket {
  border: 2px dashed color-mix(in srgb, var(--invite-ink) 64%, transparent);
}

.template-ticket::before {
  position: absolute;
  inset: 3%;
  content: "";
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--invite-ink) 35%, transparent);
}

.template-ticket .invite-copy {
  width: 78%;
  text-align: center;
}

.template-ticket h3 {
  padding-block: 8%;
  border-block: 1px solid currentColor;
}

.template-folio.has-photo #invitePhoto {
  inset: 6% 6% 46%;
  width: 88%;
  height: 48%;
  object-fit: cover;
}

.template-folio.has-photo .invite-copy {
  justify-content: flex-end;
  width: 88%;
  height: 44%;
  margin-top: 50%;
  text-align: left;
}

.template-orbit::before,
.template-orbit::after {
  position: absolute;
  content: "";
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--invite-ink) 30%, transparent);
  border-radius: 50%;
}

.template-orbit::before { inset: 9% 13%; }
.template-orbit::after { inset: 18% 21%; }
.template-orbit .invite-copy { z-index: 1; width: 58%; text-align: center; }

/* Gift discovery */
[data-view="gifts"] .gift-discovery {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  padding: 26px 0 32px;
  border-block: 1px solid var(--ink);
}

.gift-discovery-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.gift-discovery-heading h2 {
  margin: 0;
  font-size: clamp(1.7rem, 2.4vw, 2.4rem);
}

.marketplace-search {
  display: grid;
  grid-template-columns: minmax(210px, 320px) auto;
  gap: 7px;
}

.marketplace-search input,
.marketplace-search button {
  min-height: 40px;
  padding: 8px 11px;
  font-size: 0.66rem;
}

.gift-feed-filters {
  display: flex;
  gap: 7px;
  margin: 18px 0 14px;
  overflow-x: auto;
  scrollbar-width: none;
}

.gift-feed-filters button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 11px;
  color: var(--muted);
  font-size: 0.63rem;
  background: transparent;
  border-color: var(--line);
  border-radius: 4px;
}

.gift-feed-filters button.active {
  color: #f8f4eb;
  background: var(--ink);
  border-color: var(--ink);
}

.gift-idea-feed {
  display: flex;
  gap: 12px;
  padding-bottom: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-color: rgba(24, 33, 29, 0.25) transparent;
}

.gift-feed-card {
  display: grid;
  flex: 0 0 248px;
  min-height: 336px;
  overflow: hidden;
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: 7px;
  scroll-snap-align: start;
}

.gift-feed-card img {
  display: block;
  width: 100%;
  height: 132px;
  object-fit: cover;
  filter: saturate(0.72) contrast(0.95);
}

.gift-feed-card-copy {
  display: flex;
  flex-direction: column;
  padding: 15px;
}

.gift-feed-card-copy > span {
  color: var(--muted);
  font-size: 0.56rem;
  text-transform: capitalize;
}

.gift-feed-card-copy > strong {
  margin-top: 8px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.15rem;
  line-height: 1.05;
}

.gift-feed-card-copy > p {
  display: -webkit-box;
  margin: 10px 0 16px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.gift-feed-card-copy > div {
  display: flex;
  gap: 7px;
  margin-top: auto;
}

.gift-feed-card-copy button,
.gift-feed-card-copy a {
  min-height: 32px;
  padding: 7px 9px;
  color: var(--ink);
  font-size: 0.6rem;
  font-weight: 680;
  text-decoration: none;
  background: #eef2ed;
  border: 1px solid var(--line);
  border-radius: 4px;
}

@media (max-width: 760px) {
  .people-table-head { display: none; }

  .person-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .person-identity,
  .person-preferences {
    grid-column: 1 / -1;
  }

  .person-gift-memory { grid-column: 1; }
  .person-status { grid-column: 2; }

  #personImportantDateForm,
  .marketplace-search {
    grid-template-columns: 1fr;
  }

  .gift-discovery-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .gift-feed-card {
    flex-basis: min(78vw, 280px);
  }
}

/* 2026 editorial system: literary, tactile, and operational. */
:root {
  --paper: #efd1d4;
  --paper-bright: #fbf7f0;
  --paper-soft: #eadde0;
  --ink: #25211f;
  --muted: #756c68;
  --quiet: #a99c96;
  --line: rgba(37, 33, 31, 0.18);
  --line-strong: rgba(37, 33, 31, 0.42);
  --sage-wash: #d9e2dc;
  --lilac-wash: #ded7e5;
  --sky-wash: #d9e4eb;
  --apricot-wash: #ead6c8;
  --coral: #c85d77;
  --editorial-pink: #efd1d4;
  --editorial-cream: #fbf7f0;
  --editorial-green: #22332c;
  --editorial-blue: #c7d9e3;
  --editorial-wine: #4b2d35;
  --editorial-gold: #b28b50;
}

html,
body {
  background: var(--editorial-pink);
}

body {
  color: var(--ink);
}

::selection {
  color: var(--editorial-cream);
  background: var(--editorial-wine);
}

.sidebar {
  grid-template-columns: 260px minmax(420px, 1fr) auto;
  grid-template-rows: 70px 52px;
  padding-inline: clamp(22px, 3vw, 48px);
  color: var(--ink);
  background: var(--editorial-pink);
  border-bottom: 1px solid var(--ink);
  box-shadow: none;
}

.brand {
  grid-template-columns: 42px minmax(0, 1fr);
}

.brand-mark {
  width: 40px;
  height: 40px;
  color: var(--ink);
  transform: rotate(-9deg);
}

.brand-mark i:nth-child(1) { inset: 3px 9px 7px 4px; }
.brand-mark i:nth-child(2) { inset: 8px 2px 4px 10px; border-color: var(--editorial-wine); }
.brand-mark i:nth-child(3) { inset: 14px 12px 11px 12px; border-color: var(--editorial-gold); }
.brand-mark b { top: 17px; left: 18px; width: 6px; height: 6px; background: var(--ink); }

.brand strong {
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2rem;
  font-style: italic;
  font-weight: 500;
}

.nav-list {
  gap: 20px;
}

.nav-list a {
  position: relative;
  padding: 9px 2px 8px;
  color: rgba(37, 33, 31, 0.64);
  font-size: 0.69rem;
  background: transparent;
  border-radius: 0;
}

.nav-list a:hover,
.nav-list a.active {
  color: var(--ink);
  background: transparent;
}

.nav-list a.active::after {
  right: 0;
  bottom: 2px;
  left: 0;
  height: 1px;
  background: var(--ink);
}

.mini-panel {
  grid-template-columns: 130px minmax(250px, 0.85fr) minmax(360px, 1.15fr);
  padding-block: 7px 8px;
  color: var(--ink);
  border-top: 1px solid rgba(37, 33, 31, 0.26);
}

.context-heading label,
.mini-panel .next-action-copy p {
  color: rgba(37, 33, 31, 0.58);
}

.mini-panel select {
  color: var(--ink);
  border-color: rgba(37, 33, 31, 0.34);
}

.mini-panel .next-action-copy small {
  color: var(--editorial-wine);
}

.mini-panel .next-action-copy strong {
  color: var(--ink);
}

.action-node {
  background: var(--editorial-wine);
}

.workspace {
  width: min(100%, 1540px);
  padding: 40px clamp(24px, 4.4vw, 72px) 108px;
}

.view-header {
  min-height: 116px;
  align-items: flex-end;
  margin-bottom: 30px;
  padding: 12px 0 24px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.view-header h1,
.product-view > .view-header h1,
[data-view="dashboard"] > .view-header h1,
[data-view="gifts"] .view-header h1 {
  color: var(--ink);
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(4.4rem, 7vw, 7.2rem);
  font-weight: 500;
  line-height: 0.84;
}

.view-header .primary-action,
.view-actions button,
.view-header > button {
  min-width: 136px;
  min-height: 42px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 3px;
}

.view-header .primary-action,
.view-header > .primary-action,
#downloadCard {
  color: var(--editorial-cream);
  background: var(--editorial-green);
}

.view-header .primary-action:hover,
.view-header > .primary-action:hover,
#downloadCard:hover {
  color: var(--editorial-green);
  background: var(--editorial-cream);
}

.panel,
.program-panel,
.recipient-profile-form,
.gift-readout,
.gift-feed-card,
.comparison-card,
.invite-preview,
.designer-tools {
  box-shadow: none;
}

/* Home: an editorial diary with the calendar as its lead story. */
[data-view="dashboard"] .visual-grid {
  grid-template-columns: minmax(0, 1.62fr) minmax(280px, 0.52fr);
  gap: 18px;
}

[data-view="dashboard"] .calendar-panel {
  padding: 28px;
  background: var(--editorial-cream);
  border: 1px solid var(--ink);
  border-radius: 6px;
}

[data-view="dashboard"] .calendar-panel .panel-heading {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-strong);
}

[data-view="dashboard"] .calendar-panel .panel-heading h2,
[data-view="dashboard"] .focus-panel .panel-heading h2 {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(2rem, 3vw, 3.25rem);
  font-weight: 500;
}

.calendar-actions button {
  border-radius: 50%;
}

.calendar-actions #calendarToday {
  border-radius: 3px;
}

.calendar-feature {
  height: clamp(190px, 22vw, 290px);
  margin-top: 20px;
  border-radius: 3px;
}

.calendar-feature img {
  filter: saturate(0.64) contrast(0.92) sepia(0.08);
}

.calendar-feature figcaption {
  padding: 18px 20px;
  background: rgba(34, 51, 44, 0.9);
}

.calendar-feature strong {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 500;
}

[data-view="dashboard"] .calendar-day {
  min-height: 68px;
  background: rgba(255, 255, 255, 0.22);
}

[data-view="dashboard"] .calendar-day.has-event {
  background: var(--sage-wash);
}

[data-view="dashboard"] .focus-panel {
  position: relative;
  overflow: hidden;
  padding: 26px;
  color: var(--editorial-cream);
  background: var(--editorial-wine);
  border: 1px solid var(--ink);
  border-radius: 6px;
}

[data-view="dashboard"] .focus-panel::after {
  position: absolute;
  right: -44px;
  bottom: -44px;
  width: 130px;
  height: 130px;
  content: "";
  border: 1px solid rgba(251, 247, 240, 0.36);
  border-radius: 50%;
  box-shadow: 0 0 0 24px rgba(251, 247, 240, 0.05), 0 0 0 48px rgba(251, 247, 240, 0.04);
}

[data-view="dashboard"] .focus-panel h2,
[data-view="dashboard"] .focus-panel .event-countdown strong,
[data-view="dashboard"] .focus-panel .orbit-caption strong {
  color: var(--editorial-cream);
}

[data-view="dashboard"] .focus-panel .event-countdown strong {
  font-family: "Bodoni Moda", Georgia, serif;
  font-weight: 500;
}

[data-view="dashboard"] .focus-panel .event-countdown span,
[data-view="dashboard"] .focus-panel .orbit-caption p,
[data-view="dashboard"] .focus-panel .event-readiness span {
  color: rgba(251, 247, 240, 0.7);
}

[data-view="dashboard"] .focus-panel .event-readiness i {
  background: rgba(251, 247, 240, 0.22);
}

[data-view="dashboard"] .focus-panel .event-readiness b {
  background: var(--editorial-pink);
}

[data-view="dashboard"] .stats-grid {
  margin: 30px 0 34px;
  background: transparent;
  border-color: var(--ink);
}

[data-view="dashboard"] .stat-card,
[data-view="dashboard"] .stat-card:nth-child(1),
[data-view="dashboard"] .stat-card:nth-child(2),
[data-view="dashboard"] .stat-card:nth-child(3),
[data-view="dashboard"] .stat-card.accent {
  min-height: 102px;
  padding: 18px 22px;
  background: transparent;
}

[data-view="dashboard"] .stat-card strong {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 2.65rem;
  font-weight: 500;
}

.people-directory {
  padding: 28px;
  background: rgba(251, 247, 240, 0.38);
  border: 1px solid var(--ink);
  border-radius: 6px;
}

.people-strip-heading h2 {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(2.2rem, 3.8vw, 4rem);
  font-weight: 500;
}

.people-table-head {
  border-color: var(--line-strong);
}

.person-row {
  min-height: 84px;
  background: transparent;
  border-color: var(--line);
}

.person-row:hover {
  background: rgba(251, 247, 240, 0.7);
}

.person-identity i {
  color: var(--editorial-cream);
  background: var(--editorial-green);
}

.program-grid {
  gap: 18px;
}

.program-panel {
  min-height: 260px;
  padding: 26px;
  border: 1px solid var(--ink);
  border-radius: 6px;
}

.coverage-panel { background: var(--sage-wash); }
.spend-panel { background: var(--editorial-cream); }
.risk-panel { background: var(--editorial-blue); }

.program-panel-heading h2,
.planner-panel .panel-heading h2,
.form-panel .panel-heading h2 {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.75rem;
  font-weight: 500;
}

[data-view="dashboard"] .planner-panel,
[data-view="dashboard"] .form-panel {
  background: rgba(251, 247, 240, 0.64);
  border: 1px solid var(--ink);
  border-radius: 6px;
}

[data-view="dashboard"] .form-panel {
  background: var(--editorial-blue);
}

[data-view="dashboard"] .form-panel::before {
  width: 0;
}

/* Invitations: a tactile contact sheet around a dark cutting mat. */
[data-view="studio"] .invitation-panel {
  padding: 24px;
  background: rgba(251, 247, 240, 0.46);
  border: 1px solid var(--ink);
  border-radius: 6px;
}

.studio-mode-bar {
  align-items: center;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--ink);
}

.segmented-control {
  background: var(--editorial-pink);
  border: 1px solid var(--ink);
  border-radius: 4px;
}

.segmented-control button {
  border-radius: 2px;
}

.segmented-control button.active {
  color: var(--editorial-cream);
  background: var(--editorial-green);
}

.invitation-draft-bar {
  padding-block: 16px;
  border-bottom: 1px solid var(--line-strong);
}

.invitation-draft-bar button {
  border-radius: 2px;
}

.template-rail {
  gap: 12px;
  margin-inline: -24px;
  padding: 20px 24px 24px;
  background: var(--editorial-pink);
  border-bottom: 1px solid var(--ink);
}

.template-choice {
  min-width: 176px;
  padding-bottom: 14px;
  background: var(--editorial-cream);
  border: 1px solid rgba(37, 33, 31, 0.32);
  border-radius: 3px;
  transform: rotate(-0.4deg);
}

.template-choice:nth-child(even) {
  transform: rotate(0.5deg);
}

.template-choice.active {
  border-color: var(--ink);
  box-shadow: 5px 6px 0 var(--editorial-wine);
  transform: translateY(-3px) rotate(0);
}

.template-mini {
  height: 142px;
}

.template-choice strong {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1rem;
  font-weight: 500;
}

.designer-shell {
  gap: 18px;
  padding-top: 22px;
}

.canvas-stage {
  padding: 20px;
  background-color: var(--editorial-green);
  background-image: url("./assets/invitations/party-flash.jpg");
  background-position: center;
  background-size: cover;
  border: 1px solid var(--ink);
  border-radius: 6px;
}

.canvas-stage::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: rgba(34, 51, 44, 0.78);
}

.canvas-stage > * {
  position: relative;
  z-index: 1;
}

.designer-tools {
  background: var(--editorial-cream);
  border: 1px solid var(--ink);
  border-radius: 6px;
}

.control-section {
  border-color: var(--line-strong);
  border-radius: 2px;
}

.canvas-toolbar,
.layer-inspector {
  border: 1px solid var(--ink);
  border-radius: 3px;
  box-shadow: 5px 6px 0 rgba(75, 45, 53, 0.35);
}

.invite-preview {
  border: 1px solid rgba(37, 33, 31, 0.46);
  box-shadow: 12px 18px 0 rgba(37, 33, 31, 0.2);
}

/* Gifts: a magazine recommendation desk with an actual memory archive. */
[data-view="gifts"] .gift-top-grid .gift-assistant {
  background: var(--editorial-cream);
  border: 1px solid var(--ink);
  border-radius: 6px;
}

.gift-top-grid .gift-assistant-heading {
  min-height: 250px;
  padding: 38px;
  background: var(--editorial-blue);
}

.gift-top-grid .gift-assistant-heading::after {
  width: 46%;
  filter: saturate(0.58) contrast(0.9) sepia(0.08);
}

.gift-top-grid .gift-assistant-heading > div {
  width: 49%;
}

.gift-top-grid .gift-assistant-heading h2 {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(3.3rem, 5vw, 5.4rem);
  font-weight: 500;
  line-height: 0.86;
}

.gift-top-grid .gift-assistant-heading p {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1rem;
  font-style: italic;
}

.gift-top-grid .gift-chat {
  background-color: var(--editorial-cream);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 38px, rgba(37, 33, 31, 0.08) 39px);
}

.gift-top-grid .recipient-profile-form {
  background: var(--editorial-cream);
  border: 1px solid var(--ink);
}

.gift-top-grid .gift-readout {
  color: var(--editorial-cream);
  background: var(--editorial-green);
  border: 1px solid var(--ink);
}

.gift-top-grid .gift-readout h2,
.gift-top-grid .gift-readout strong {
  color: var(--editorial-cream);
}

.gift-top-grid .gift-readout p,
.gift-top-grid .gift-readout span {
  color: rgba(251, 247, 240, 0.72);
}

[data-view="gifts"] .gift-discovery {
  padding: 32px 0 38px;
  border-color: var(--ink);
}

.gift-discovery-heading h2,
[data-view="gifts"] .shortlist-heading h2,
[data-view="gifts"] .gift-list-section > h2 {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(2.7rem, 4.8vw, 5rem);
  font-weight: 500;
  line-height: 0.88;
}

.gift-feed-filters button {
  background: rgba(251, 247, 240, 0.36);
  border-color: rgba(37, 33, 31, 0.34);
  border-radius: 2px;
}

.gift-feed-filters button.active {
  color: var(--editorial-cream);
  background: var(--editorial-wine);
  border-color: var(--editorial-wine);
}

.gift-idea-feed {
  gap: 16px;
}

.gift-feed-card {
  flex-basis: 272px;
  min-height: 392px;
  background: var(--editorial-cream);
  border: 1px solid var(--ink);
  border-radius: 4px;
}

.gift-feed-card:nth-child(3n + 2) {
  background: var(--editorial-blue);
}

.gift-feed-card:nth-child(3n) {
  background: var(--sage-wash);
}

.gift-feed-card img {
  height: 176px;
  filter: saturate(0.58) contrast(0.9) sepia(0.08);
}

.gift-feed-card-copy {
  padding: 18px;
}

.gift-feed-card-copy > strong {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.4rem;
  font-weight: 500;
}

.gift-feed-card-copy button,
.gift-feed-card-copy a {
  background: rgba(251, 247, 240, 0.62);
  border-color: rgba(37, 33, 31, 0.28);
  border-radius: 2px;
}

[data-view="gifts"] .gift-journal {
  background: var(--editorial-pink);
  border: 1px solid var(--ink);
  border-radius: 6px;
}

[data-view="gifts"] .journal-heading h2 {
  font-family: "Bodoni Moda", Georgia, serif;
  font-weight: 500;
}

[data-view="gifts"] .manual-gift-drawer {
  color: var(--editorial-cream);
  background: var(--editorial-wine);
  border: 1px solid var(--ink);
}

[data-view="gifts"] .inspiration-inbox {
  background: var(--editorial-blue);
  border: 1px solid var(--ink);
}

[data-view="gifts"] .comparison-card {
  background: var(--editorial-cream);
  border-color: var(--ink);
  border-radius: 3px;
}

/* Reminders: a composed planner page, not a utility form dump. */
.reminder-overview {
  margin-bottom: 34px;
  background: transparent;
  border-color: var(--ink);
}

.reminder-overview > div {
  min-height: 126px;
  padding: 22px 26px;
  border-color: var(--line-strong);
}

.reminder-overview strong {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(3.3rem, 5vw, 5.5rem);
  font-weight: 500;
}

.reminder-layout {
  grid-template-columns: minmax(0, 1.38fr) minmax(310px, 0.62fr);
  gap: 18px;
}

.reminder-layout .people-panel {
  padding: 30px;
  background: var(--editorial-cream);
  border: 1px solid var(--ink);
  border-radius: 6px;
}

.reminder-layout .reminder-panel {
  padding: 30px;
  color: var(--editorial-cream);
  background: var(--editorial-green);
  border: 1px solid var(--ink);
  border-radius: 6px;
}

.reminder-layout .panel-heading h2 {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(2.4rem, 4vw, 4.1rem);
  font-weight: 500;
}

.reminder-layout .reminder-panel .panel-heading h2,
.reminder-layout .reminder-panel .timeline strong {
  color: var(--editorial-cream);
}

.reminder-layout .reminder-panel .timeline p,
.reminder-layout .reminder-panel .timeline span,
.reminder-layout .reminder-panel .timeline time {
  color: rgba(251, 247, 240, 0.7);
}

.inline-form {
  padding-block: 22px;
  border-block: 1px solid var(--line-strong);
}

.task-entry {
  background: transparent;
  border-color: var(--line);
}

dialog {
  border: 1px solid var(--ink);
  border-radius: 6px;
}

@media (max-width: 980px) {
  .sidebar {
    grid-template-columns: minmax(190px, 0.72fr) minmax(0, 1.28fr);
    grid-template-rows: auto auto;
    padding: 16px 24px;
  }

  .mini-panel {
    grid-template-columns: minmax(190px, 0.72fr) minmax(0, 1.28fr);
  }

  .view-header h1,
  .product-view > .view-header h1,
  [data-view="dashboard"] > .view-header h1,
  [data-view="gifts"] .view-header h1 {
    font-size: clamp(4rem, 10vw, 6rem);
  }

  [data-view="dashboard"] .visual-grid,
  .reminder-layout {
    grid-template-columns: 1fr;
  }

  [data-view="dashboard"] .focus-panel {
    min-height: 280px;
  }
}

@media (max-width: 700px) {
  .sidebar {
    padding: 14px 16px 12px;
  }

  .brand strong {
    font-size: 1.7rem;
  }

  .nav-list {
    gap: 0;
  }

  .nav-list a {
    padding-inline: 5px;
    overflow: visible;
    font-size: 0.58rem;
    text-overflow: clip;
    white-space: nowrap;
  }

  .workspace {
    padding: 26px 14px 72px;
  }

  .view-header {
    min-height: 0;
    align-items: stretch;
    padding: 13px 0 18px;
  }

  .view-header h1,
  .product-view > .view-header h1,
  [data-view="dashboard"] > .view-header h1,
  [data-view="gifts"] .view-header h1 {
    font-size: clamp(3.7rem, 17vw, 5rem);
  }

  .view-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .view-actions button,
  .view-header > button {
    width: 100%;
  }

  [data-view="dashboard"] .calendar-panel,
  .people-directory,
  .program-panel,
  [data-view="dashboard"] .planner-panel,
  [data-view="dashboard"] .form-panel,
  [data-view="studio"] .invitation-panel,
  .reminder-layout .people-panel,
  .reminder-layout .reminder-panel {
    padding: 20px 18px;
  }

  .calendar-feature {
    height: 180px;
  }

  .calendar-actions button {
    flex: 0 0 38px;
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
  }

  .calendar-actions #calendarToday {
    flex-basis: auto;
    width: auto;
    min-width: 58px;
    padding-inline: 10px;
  }

  [data-view="dashboard"] .calendar-day {
    min-height: 58px;
  }

  [data-view="dashboard"] .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  [data-view="dashboard"] .stat-card:nth-child(2) {
    border-right: 0;
  }

  [data-view="dashboard"] .stat-card:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .template-rail {
    margin-inline: -18px;
    padding-inline: 18px;
  }

  .template-choice {
    min-width: 150px;
  }

  .canvas-stage {
    padding: 10px;
  }

  .gift-top-grid .gift-assistant-heading {
    padding: 24px;
  }

  .gift-top-grid .gift-assistant-heading h2 {
    font-size: 3rem;
  }

  .gift-feed-card {
    flex-basis: min(82vw, 296px);
  }

  .reminder-overview > div {
    min-height: 104px;
    padding: 18px 12px;
  }

  .reminder-overview strong {
    font-size: 3rem;
  }
}

/* Invitation layouts: classical travel card and editorial journey spread. */
.swatch-terracotta {
  background: #a94732;
}

.palette-terracotta {
  --invite-paper: #a94732;
  --invite-ink: #f7ecdc;
  --invite-line: rgba(247, 236, 220, 0.42);
}

.mini-archway,
.mini-travelspread {
  position: relative;
  overflow: hidden;
}

.mini-archway {
  color: #f8eddc;
  background: #a94732;
}

.mini-archway::before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 37%;
  content: "";
  background: #f8eddc;
}

.mini-archway i,
.mini-travelspread i {
  position: absolute;
  display: block;
}

.mini-archway i:nth-child(1) {
  top: 20%;
  left: 25%;
  width: 50%;
  height: 48%;
  background: #f8eddc;
  border: 1px solid rgba(101, 39, 28, 0.55);
  border-radius: 50% 50% 2px 2px;
}

.mini-archway i:nth-child(2) {
  top: 10%;
  left: 15%;
  width: 70%;
  height: 4px;
  background: currentColor;
}

.mini-archway i:nth-child(3) {
  right: 23%;
  bottom: 14%;
  left: 23%;
  height: 2px;
  background: #a94732;
}

.mini-travelspread {
  color: #6f2630;
  background-color: #f9f4eb;
  background-image: url("./assets/invitations/rooftop-bluehour.jpg");
  background-position: center top;
  background-size: 100% 63%;
  background-repeat: no-repeat;
}

.mini-travelspread::before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 37%;
  content: "";
  background: #f9f4eb;
}

.mini-travelspread::after {
  position: absolute;
  top: 8%;
  right: -4%;
  content: "~  ~";
  color: #fff;
  font-family: Georgia, serif;
  font-size: 1.8rem;
  font-style: italic;
}

.mini-travelspread i:nth-child(1) {
  top: 12%;
  left: 8%;
  width: 42%;
  height: 6px;
  background: #fff;
  box-shadow: 0 10px 0 #fff, 0 20px 0 rgba(255, 255, 255, 0.7);
}

.mini-travelspread i:nth-child(2) {
  bottom: 8%;
  left: 8%;
  width: 28%;
  height: 23%;
  border-block: 2px solid currentColor;
}

.mini-travelspread i:nth-child(3) {
  right: 8%;
  bottom: 8%;
  width: 48%;
  height: 23%;
  background: color-mix(in srgb, #b9d1dc 70%, #fff);
}

.template-archway {
  display: block;
  padding: 0;
  background: var(--invite-paper);
}

.template-archway::before {
  position: absolute;
  inset: 60% 0 0;
  z-index: 0;
  display: block;
  content: "";
  background: color-mix(in srgb, var(--invite-paper) 10%, #fff 90%);
  border: 0;
  border-radius: 0;
}

.template-archway::after {
  position: absolute;
  top: 22%;
  left: 22%;
  z-index: 1;
  display: block;
  width: 56%;
  height: 44%;
  content: "";
  border: 1px solid color-mix(in srgb, var(--invite-ink) 72%, transparent);
  border-radius: 50% 50% 2px 2px;
  pointer-events: none;
}

.template-archway .invite-decoration {
  z-index: 1;
  display: block;
  border-color: color-mix(in srgb, var(--invite-ink) 58%, transparent);
  border-radius: 0;
}

.template-archway .decoration-a {
  top: 18%;
  right: 6%;
  width: 11%;
  height: 34%;
  border-width: 0 0 1px 1px;
  transform: none;
}

.template-archway .decoration-b {
  top: 18%;
  bottom: auto;
  left: 6%;
  width: 11%;
  height: 34%;
  border-width: 0 1px 1px 0;
  transform: none;
}

.template-archway.has-photo #invitePhoto {
  position: absolute;
  top: 24%;
  left: 25%;
  z-index: 1;
  width: 50%;
  height: 40%;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--invite-ink) 68%, transparent);
  border-radius: 50% 50% 2px 2px;
  filter: sepia(0.26) saturate(0.72) contrast(0.93);
}

.template-archway .invite-copy {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: auto;
  height: auto;
  padding: 0;
  text-align: center;
}

.template-archway .preview-kicker {
  position: absolute;
  top: 4.5%;
  right: 8%;
  left: 8%;
  color: var(--invite-ink);
  font-family: "Manrope", sans-serif;
  font-size: min(1.8cqw, 0.7rem);
  font-weight: 600;
  text-transform: uppercase;
}

.template-archway h3 {
  position: absolute;
  top: 7%;
  right: 5%;
  left: 5%;
  max-width: none;
  margin: 0;
  color: var(--invite-ink);
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: min(10cqw, 4.7rem);
  font-weight: 400;
  line-height: 0.9;
  text-align: center;
}

.template-archway #previewBody {
  position: absolute;
  right: 14%;
  bottom: 10%;
  left: 14%;
  max-width: none;
  margin: 0;
  color: color-mix(in srgb, var(--invite-paper) 72%, #1d1714);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: min(3.2cqw, 1rem);
  font-style: italic;
  line-height: 1.2;
  text-align: center;
  opacity: 1;
}

.template-archway #previewFooter {
  position: absolute;
  right: 8%;
  bottom: 3.5%;
  left: 8%;
  color: color-mix(in srgb, var(--invite-paper) 76%, #1d1714);
  font-family: "Manrope", sans-serif;
  font-size: min(1.7cqw, 0.66rem);
  text-transform: uppercase;
}

.template-travelspread {
  display: block;
  padding: 0;
  background: color-mix(in srgb, var(--invite-paper) 12%, #fff 88%);
}

.template-travelspread::before {
  position: absolute;
  inset: 60% 0 0;
  z-index: 1;
  display: block;
  content: "";
  background: color-mix(in srgb, var(--invite-paper) 9%, #fff 91%);
  border: 0;
  border-radius: 0;
}

.template-travelspread::after {
  position: absolute;
  top: 4%;
  right: -2%;
  z-index: 3;
  display: block;
  content: "~   ~   ~";
  color: rgba(255, 255, 255, 0.92);
  font-family: Georgia, serif;
  font-size: min(11cqw, 5.8rem);
  font-style: italic;
  line-height: 1;
  pointer-events: none;
  transform: rotate(-5deg);
}

.template-travelspread .invite-decoration {
  z-index: 3;
  display: block;
  border: 0;
  border-radius: 0;
}

.template-travelspread .decoration-a {
  top: 48%;
  right: 5%;
  width: 21%;
  height: 8%;
  border-top: 2px solid rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  transform: rotate(-7deg);
}

.template-travelspread .decoration-b {
  bottom: 4.5%;
  left: 48%;
  width: 1px;
  height: 31%;
  background: color-mix(in srgb, var(--invite-ink) 38%, transparent);
  transform: none;
}

.template-travelspread.has-photo #invitePhoto {
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  width: 100%;
  height: 60%;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  filter: saturate(0.76) contrast(0.94);
}

.template-travelspread .invite-copy {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: auto;
  height: auto;
  padding: 0;
  text-align: left;
}

.template-travelspread .preview-kicker {
  position: absolute;
  top: 4%;
  right: 5%;
  color: #fffaf2;
  font-family: "Manrope", sans-serif;
  font-size: min(1.7cqw, 0.65rem);
  font-weight: 700;
  text-transform: uppercase;
  opacity: 1;
}

.template-travelspread h3 {
  position: absolute;
  top: 8%;
  left: 5%;
  width: 58%;
  max-width: none;
  margin: 0;
  color: #fffaf2;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: min(8.5cqw, 4.35rem);
  font-weight: 500;
  line-height: 0.84;
  text-shadow: 0 1px 10px rgba(23, 25, 24, 0.28);
}

.template-travelspread #previewBody {
  position: absolute;
  right: 6%;
  bottom: 8%;
  left: 6%;
  max-width: none;
  height: 25%;
  margin: 0;
  overflow: hidden;
  color: var(--invite-ink);
  font-family: Georgia, serif;
  font-size: min(2.1cqw, 0.78rem);
  line-height: 1.36;
  column-count: 2;
  column-gap: 9%;
  opacity: 0.86;
}

.template-travelspread #previewFooter {
  position: absolute;
  right: 6%;
  bottom: 3%;
  color: var(--invite-ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: min(2.1cqw, 0.76rem);
  font-style: italic;
  opacity: 0.84;
}

.template-travelspread .invite-extras img {
  z-index: 5;
  border: 5px solid #fffaf2;
  box-shadow: 5px 7px 0 rgba(27, 30, 28, 0.18);
}

@media (max-width: 700px) {
  .template-archway h3,
  .template-travelspread h3 {
    font-size: 8.5cqw;
  }

  .template-archway #previewBody {
    font-size: 3.25cqw;
  }

  .template-travelspread #previewBody {
    font-size: 2.25cqw;
  }
}

/* Anthora-inspired interaction system: quiet, tactile, and visibly intentional. */
:root {
  --control-paper: #fffaf4;
  --control-mist: #e7eff0;
  --control-line: #b8cdd2;
  --control-line-strong: #78969d;
  --control-ink: #243a38;
  --control-wine: #744852;
  --control-shadow: 0 7px 18px rgba(36, 58, 56, 0.1);
}

button,
.import-data-button,
input,
select,
textarea {
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

button {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
}

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

button:active:not(:disabled) {
  transform: translateY(0);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid rgba(80, 119, 129, 0.56);
  outline-offset: 3px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.primary-action,
.view-actions button,
.view-header > button,
.form-actions button,
.gift-form > button,
.journal-form > button,
.recipient-profile-form > button,
.inline-form > button,
.past-gift-form > button,
.person-sheet-footer button,
.marketplace-search button,
#generateDraft,
#giftChatSubmit,
#giftSubmit,
#taskSubmit,
#suggestVibes,
#resetCustomColors,
#resetThreeView,
#pasteInspiration,
#clearGiftChat,
#personImportantDateForm button,
.person-company-form button {
  min-height: 42px;
  padding: 10px 17px;
  color: var(--control-ink);
  background: rgba(255, 250, 244, 0.78);
  border: 1px solid var(--control-line);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.48);
}

.primary-action,
.view-header > .primary-action,
#downloadCard,
#giftChatSubmit,
#generateDraft,
.recipient-profile-form > .primary-action,
.journal-form > .primary-action,
.person-sheet-footer .primary-action {
  color: #fffaf1;
  background: var(--control-ink);
  border-color: var(--control-ink);
  box-shadow: var(--control-shadow);
}

.primary-action:hover:not(:disabled),
.view-header > .primary-action:hover:not(:disabled),
#downloadCard:hover:not(:disabled),
#giftChatSubmit:hover:not(:disabled),
#generateDraft:hover:not(:disabled) {
  color: var(--control-ink);
  background: var(--control-mist);
  border-color: var(--control-line-strong);
}

.view-actions button:not(.primary-action):hover,
.form-actions button:not(.primary-action):hover,
.marketplace-search button:hover,
#suggestVibes:hover,
#resetCustomColors:hover,
#resetThreeView:hover,
#pasteInspiration:hover {
  background: var(--control-mist);
  border-color: var(--control-line-strong);
  box-shadow: 0 5px 14px rgba(36, 58, 56, 0.08);
}

#clearGiftChat {
  color: var(--control-ink);
  background: rgba(255, 250, 244, 0.88);
  border-color: rgba(255, 250, 244, 0.76);
  box-shadow: 0 6px 18px rgba(28, 39, 36, 0.16);
}

#clearGiftChat:hover {
  background: var(--control-mist);
  border-color: var(--control-line-strong);
}

#newEventFocus,
#newInvitation,
#logGiftAction {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 39px;
}

#newEventFocus::before,
#newInvitation::before,
#logGiftAction::before {
  position: absolute;
  top: 50%;
  left: 15px;
  width: 15px;
  height: 15px;
  content: "+";
  font-family: "Manrope", sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 13px;
  text-align: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  transform: translateY(-50%);
}

#deleteEvent,
#deleteLayer {
  color: var(--control-wine);
  border-color: rgba(116, 72, 82, 0.38);
  background: rgba(255, 248, 246, 0.66);
}

#deleteEvent:hover,
#deleteLayer:hover {
  color: #fff8f2;
  background: var(--control-wine);
  border-color: var(--control-wine);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea {
  min-height: 42px;
  color: var(--control-ink);
  background: rgba(255, 252, 247, 0.84);
  border: 1px solid rgba(120, 150, 157, 0.42);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

textarea {
  padding: 12px 13px;
  line-height: 1.48;
  resize: vertical;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):hover,
select:hover,
textarea:hover {
  border-color: var(--control-line-strong);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):focus,
select:focus,
textarea:focus {
  background: #fffdf9;
  border-color: var(--control-line-strong);
  box-shadow: 0 0 0 3px rgba(184, 205, 210, 0.28);
}

input::placeholder,
textarea::placeholder {
  color: rgba(36, 58, 56, 0.42);
}

input[type="file"]::file-selector-button {
  min-height: 36px;
  margin-right: 10px;
  padding: 7px 12px;
  color: var(--control-ink);
  font-family: "Manrope", sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  background: var(--control-mist);
  border: 1px solid var(--control-line);
  border-radius: 7px;
  cursor: pointer;
}

label,
legend {
  color: rgba(36, 58, 56, 0.74);
}

.segmented-control {
  gap: 3px;
  padding: 3px;
  background: rgba(231, 239, 240, 0.82);
  border: 1px solid var(--control-line);
  border-radius: 8px;
}

.segmented-control button {
  min-height: 34px;
  padding: 7px 13px;
  color: rgba(36, 58, 56, 0.68);
  background: transparent;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
}

.segmented-control button:hover:not(.active) {
  color: var(--control-ink);
  background: rgba(255, 255, 255, 0.58);
}

.segmented-control button.active {
  color: var(--control-ink);
  background: #fffaf4;
  border: 0;
  box-shadow: 0 3px 9px rgba(36, 58, 56, 0.12);
}

.calendar-actions button {
  color: var(--control-ink);
  background: var(--control-paper);
  border: 1px solid var(--control-line);
  box-shadow: 0 3px 10px rgba(36, 58, 56, 0.08);
}

.calendar-actions button:hover {
  background: var(--control-mist);
  border-color: var(--control-line-strong);
}

.calendar-actions #calendarToday {
  min-width: 68px;
  border-radius: 8px;
}

.invitation-draft-bar button,
.gift-feed-filters button,
.task-suggestions button,
.gift-chat-prompts button {
  min-height: 34px;
  padding: 7px 12px;
  color: rgba(36, 58, 56, 0.72);
  background: rgba(255, 250, 244, 0.7);
  border: 1px solid var(--control-line);
  border-radius: 999px;
}

.invitation-draft-bar button:hover,
.gift-feed-filters button:hover,
.task-suggestions button:hover,
.gift-chat-prompts button:hover {
  color: var(--control-ink);
  background: var(--control-mist);
  border-color: var(--control-line-strong);
}

.invitation-draft-bar button.active,
.gift-feed-filters button.active {
  color: #fffaf1;
  background: var(--control-ink);
  border-color: var(--control-ink);
  box-shadow: 0 4px 11px rgba(36, 58, 56, 0.12);
}

.palette-swatch {
  border: 3px solid rgba(255, 250, 244, 0.92);
  box-shadow: 0 0 0 1px rgba(36, 58, 56, 0.2), 0 3px 8px rgba(36, 58, 56, 0.08);
}

.palette-swatch:hover {
  box-shadow: 0 0 0 2px var(--control-line-strong), 0 5px 10px rgba(36, 58, 56, 0.12);
}

.palette-swatch.active {
  box-shadow: 0 0 0 2px var(--control-ink), 0 5px 12px rgba(36, 58, 56, 0.16);
}

.image-library button,
.three-scene-gallery button {
  overflow: hidden;
  border-color: var(--control-line);
  border-radius: 8px;
}

.image-library button:hover,
.image-library button.active,
.three-scene-gallery button:hover,
.three-scene-gallery button.active {
  border-color: var(--control-line-strong);
  box-shadow: var(--control-shadow);
}

.control-section {
  background: rgba(255, 252, 247, 0.72);
  border-color: rgba(120, 150, 157, 0.36);
  border-radius: 8px;
}

.control-section summary {
  color: var(--control-ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.22rem;
  font-style: italic;
  font-weight: 500;
}

.control-section[open] summary {
  background: rgba(231, 239, 240, 0.42);
  border-color: rgba(120, 150, 157, 0.3);
}

.canvas-toolbar,
.layer-inspector {
  background: rgba(255, 252, 247, 0.94);
  border-color: var(--control-line);
  border-radius: 8px;
  box-shadow: 0 9px 24px rgba(20, 43, 43, 0.14);
}

.canvas-toolbar button {
  min-height: 34px;
  padding: 6px 10px;
  color: var(--control-ink);
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid var(--control-line);
  border-radius: 6px;
}

.canvas-toolbar button:hover:not(:disabled),
.canvas-toolbar button.active {
  background: var(--control-mist);
  border-color: var(--control-line-strong);
}

.canvas-toolbar [data-layer-action],
#undoDesign,
#redoDesign,
#deleteLayer {
  width: 34px;
  min-width: 34px;
  padding: 0;
}

input[type="range"] {
  accent-color: var(--control-ink);
}

.template-choice {
  border-color: rgba(120, 150, 157, 0.45);
}

.template-choice:hover {
  border-color: var(--control-line-strong);
  box-shadow: 0 7px 16px rgba(36, 58, 56, 0.1);
}

.template-choice.active {
  border-color: var(--control-ink);
  box-shadow: 5px 6px 0 rgba(120, 150, 157, 0.68);
}

dialog {
  background: var(--control-paper);
  border-color: var(--control-line-strong);
  border-radius: 8px;
  box-shadow: 0 28px 80px rgba(36, 58, 56, 0.22);
}

@media (max-width: 700px) {
  .view-actions {
    display: flex;
    flex-wrap: wrap;
  }

  .view-actions button {
    flex: 1 1 132px;
    width: auto;
  }

  .view-header > button {
    align-self: flex-start;
    width: auto;
    min-width: 184px;
  }
}

@media (max-width: 430px) {
  .view-header > button,
  .view-actions button {
    width: 100%;
  }
}

/* Event room: the occasion becomes a shareable gathering, not another planner row. */
[data-view="dashboard"] > .event-room { order: 2; }
[data-view="dashboard"] > .stats-grid { order: 3; }
[data-view="dashboard"] > .people-directory { order: 4; }
[data-view="dashboard"] > .program-grid { order: 5; }
[data-view="dashboard"] > .dashboard-planner { order: 6; }

.event-room {
  margin: 0 0 38px;
  padding: clamp(24px, 3.5vw, 46px);
  color: #f8f1e6;
  background: #24433e;
  border-radius: 8px;
}

.event-room-heading,
.event-room-layout,
.host-updates {
  position: relative;
}

.event-room-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(248, 241, 230, 0.34);
}

.event-room-heading h2 {
  max-width: 760px;
  margin: 0 0 7px;
  color: inherit;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(2.5rem, 4.8vw, 5.4rem);
  font-weight: 500;
  line-height: 0.92;
}

.event-room-heading p,
.host-updates > div > p {
  margin: 0;
  color: rgba(248, 241, 230, 0.72);
  font-size: 0.77rem;
}

.event-room-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.event-room-actions button,
.host-updates form button {
  min-height: 42px;
  padding: 10px 16px;
  color: #f8f1e6;
  background: transparent;
  border: 1px solid rgba(248, 241, 230, 0.66);
  border-radius: 5px;
}

.event-room-actions .primary-action {
  color: #24433e;
  background: #f8f1e6;
  border-color: #f8f1e6;
}

.event-room-actions button:hover,
.host-updates form button:hover {
  color: #24433e;
  background: #dce8df;
  border-color: #dce8df;
}

.event-room-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(420px, 1.18fr);
  gap: clamp(28px, 4vw, 58px);
  align-items: stretch;
}

.event-poster {
  position: relative;
  min-height: 500px;
  padding: 0;
  overflow: hidden;
  text-align: left;
  background: #172825;
  border: 1px solid rgba(248, 241, 230, 0.45);
  border-radius: 7px;
  box-shadow: 12px 14px 0 rgba(227, 180, 188, 0.28);
}

.event-poster::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(17, 30, 28, 0.02) 28%, rgba(17, 30, 28, 0.86) 100%);
}

.event-poster > img {
  width: 100%;
  height: 100%;
  min-height: 500px;
  object-fit: cover;
  transition: transform 500ms ease;
}

.event-poster:hover > img {
  transform: scale(1.025);
}

.event-poster > span,
.event-poster > div {
  position: absolute;
  z-index: 1;
}

.event-poster > span {
  top: 18px;
  left: 18px;
  padding: 8px 11px;
  color: #203a36;
  font-size: 0.7rem;
  font-weight: 700;
  background: #f8f1e6;
  border-radius: 4px;
}

.event-poster > div {
  right: 24px;
  bottom: 24px;
  left: 24px;
}

.event-poster strong {
  display: block;
  margin-bottom: 10px;
  color: #fffaf1;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(2.2rem, 3.8vw, 4.5rem);
  font-weight: 500;
  line-height: 0.92;
}

.event-poster p {
  margin: 0;
  color: rgba(255, 250, 241, 0.8);
  font-size: 0.74rem;
}

.guest-workspace {
  min-width: 0;
}

.rsvp-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 26px;
  border-block: 1px solid rgba(248, 241, 230, 0.28);
}

.rsvp-overview > div {
  display: grid;
  gap: 3px;
  padding: 17px 14px 17px 0;
}

.rsvp-overview strong {
  color: #f8f1e6;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 2.1rem;
  font-weight: 500;
  line-height: 1;
}

.rsvp-overview span,
.guest-list-heading > span {
  color: rgba(248, 241, 230, 0.65);
  font-size: 0.64rem;
}

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

.guest-list-heading h3,
.host-updates h3 {
  margin: 0;
  color: #f8f1e6;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.8rem;
  font-style: italic;
  font-weight: 500;
}

.guest-add-form {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(140px, 1fr) 112px 42px;
  gap: 6px;
  margin-bottom: 12px;
}

.guest-add-form input,
.guest-add-form select,
.host-updates form input {
  color: #f8f1e6;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(248, 241, 230, 0.32);
}

.guest-add-form input::placeholder,
.host-updates form input::placeholder {
  color: rgba(248, 241, 230, 0.46);
}

.guest-add-form input:focus,
.guest-add-form select:focus,
.host-updates form input:focus {
  color: #203a36;
  background: #fffaf1;
}

.guest-add-form button {
  width: 42px;
  min-width: 42px;
  padding: 0;
  color: #203a36;
  font-size: 1.3rem;
  background: #e3b4bc;
  border: 0;
  border-radius: 6px;
}

.guest-list {
  max-height: 300px;
  overflow: auto;
  scrollbar-color: rgba(248, 241, 230, 0.35) transparent;
}

.guest-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 105px 30px;
  gap: 10px;
  align-items: center;
  min-height: 64px;
  border-bottom: 1px solid rgba(248, 241, 230, 0.18);
}

.guest-avatar {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #203a36;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.05rem;
  background: #dce8df;
  border-radius: 50%;
}

.guest-row strong {
  display: block;
  color: #fffaf1;
  font-size: 0.75rem;
}

.guest-row p {
  margin: 2px 0 0;
  overflow: hidden;
  color: rgba(248, 241, 230, 0.55);
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guest-row select {
  min-height: 34px;
  padding: 5px 8px;
  color: #f8f1e6;
  font-size: 0.64rem;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(248, 241, 230, 0.26);
}

.guest-row > button,
.event-update-list article > button {
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  color: rgba(248, 241, 230, 0.62);
  font-size: 1rem;
  background: transparent;
  border: 0;
}

.host-updates {
  display: grid;
  grid-template-columns: minmax(150px, 0.32fr) minmax(360px, 0.68fr);
  gap: 18px 36px;
  align-items: end;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(248, 241, 230, 0.3);
}

.host-updates form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.event-update-list {
  grid-column: 1 / -1;
}

.event-update-list article {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 28px;
  gap: 14px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid rgba(248, 241, 230, 0.16);
}

.event-update-list span {
  color: #e3b4bc;
  font-size: 0.64rem;
  font-weight: 700;
}

.event-update-list p,
.event-room-empty {
  margin: 0;
  color: rgba(248, 241, 230, 0.74);
  font-size: 0.72rem;
  line-height: 1.45;
}

.event-room-empty {
  padding: 18px 0;
}

.guest-preview-dialog {
  width: min(100% - 28px, 790px);
  max-width: 790px;
  max-height: calc(100dvh - 28px);
  padding: 0;
  overflow: auto;
  color: #25211f;
  background: #f8f1e6;
  border: 0;
  border-radius: 8px;
}

.guest-preview-dialog::backdrop {
  background: rgba(22, 35, 32, 0.72);
  backdrop-filter: blur(12px);
}

.guest-invitation {
  position: relative;
}

.guest-preview-close {
  position: fixed;
  z-index: 5;
  top: max(24px, env(safe-area-inset-top));
  right: max(24px, env(safe-area-inset-right));
  display: grid;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  place-items: center;
  color: #24433e;
  font-size: 1.65rem;
  background: #fffaf1;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(24, 35, 31, 0.2);
}

.guest-cover {
  position: relative;
  height: min(66dvh, 640px);
  min-height: 480px;
  margin: 0;
  overflow: hidden;
}

.guest-cover::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(17, 29, 26, 0.03) 24%, rgba(17, 29, 26, 0.88) 100%);
}

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

.guest-cover figcaption {
  position: absolute;
  z-index: 1;
  right: clamp(24px, 6vw, 60px);
  bottom: clamp(28px, 6vw, 62px);
  left: clamp(24px, 6vw, 60px);
  color: #fffaf1;
}

.guest-cover figcaption > span {
  display: inline-block;
  margin-bottom: 13px;
  padding-bottom: 5px;
  font-size: 0.7rem;
  font-weight: 650;
  border-bottom: 1px solid rgba(255, 250, 241, 0.7);
}

.guest-cover h2 {
  max-width: 640px;
  margin: 0 0 12px;
  color: inherit;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(3.1rem, 9vw, 6.8rem);
  font-weight: 500;
  line-height: 0.86;
}

.guest-cover p {
  margin: 0;
  color: rgba(255, 250, 241, 0.78);
  font-size: 0.78rem;
}

.guest-invite-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid rgba(37, 33, 31, 0.22);
}

.guest-invite-details > div {
  display: grid;
  gap: 7px;
  padding: 25px clamp(22px, 5vw, 44px);
}

.guest-invite-details > div + div {
  border-left: 1px solid rgba(37, 33, 31, 0.22);
}

.guest-invite-details span {
  color: rgba(37, 33, 31, 0.54);
  font-size: 0.63rem;
}

.guest-invite-details strong {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.34rem;
  font-weight: 600;
  line-height: 1.16;
}

.guest-rsvp-panel,
.guest-preview-updates {
  padding: clamp(28px, 5vw, 48px);
}

.guest-rsvp-panel {
  background: #e8d9de;
}

.guest-rsvp-panel h3,
.guest-preview-updates h3 {
  margin: 0 0 20px;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 500;
}

.guest-rsvp-panel form {
  display: grid;
  gap: 13px;
}

.guest-rsvp-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.guest-rsvp-options label {
  position: relative;
}

.guest-rsvp-options input {
  position: absolute;
  opacity: 0;
}

.guest-rsvp-options span {
  display: grid;
  min-height: 44px;
  padding: 8px;
  place-items: center;
  color: #24433e;
  font-size: 0.72rem;
  background: rgba(255, 250, 241, 0.55);
  border: 1px solid rgba(36, 67, 62, 0.32);
  border-radius: 6px;
  cursor: pointer;
}

.guest-rsvp-options input:checked + span {
  color: #fffaf1;
  background: #24433e;
  border-color: #24433e;
}

.guest-rsvp-panel label > span:not(.guest-rsvp-options span) {
  display: block;
  margin-bottom: 7px;
  color: #24433e;
  font-size: 0.7rem;
}

.guest-rsvp-panel .primary-action {
  min-height: 46px;
  color: #fffaf1;
  background: #24433e;
  border-color: #24433e;
  border-radius: 6px;
}

.guest-preview-updates > div article {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 16px;
  padding: 15px 0;
  border-top: 1px solid rgba(37, 33, 31, 0.2);
}

.guest-preview-updates span {
  color: #8d4657;
  font-size: 0.65rem;
  font-weight: 700;
}

.guest-preview-updates p {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.12rem;
  line-height: 1.35;
}

@media (max-width: 980px) {
  .event-room-layout {
    grid-template-columns: minmax(260px, 0.72fr) minmax(360px, 1fr);
    gap: 28px;
  }

  .guest-add-form {
    grid-template-columns: 1fr 1fr 42px;
  }

  .guest-add-form select {
    grid-column: 1 / 3;
  }

  .guest-add-form button {
    grid-column: 3;
    grid-row: 1 / 3;
    height: 100%;
  }
}

@media (max-width: 760px) {
  .event-room {
    margin-inline: -14px;
    padding: 24px 14px 30px;
    border-radius: 0;
  }

  .event-room-heading,
  .event-room-layout,
  .host-updates {
    display: grid;
    grid-template-columns: 1fr;
  }

  .event-room-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .event-room-actions button {
    min-width: 0;
    padding-inline: 9px;
  }

  .event-poster,
  .event-poster > img {
    min-height: 460px;
  }

  .guest-add-form {
    grid-template-columns: 1fr 42px;
  }

  .guest-add-form input,
  .guest-add-form select {
    grid-column: 1;
  }

  .guest-add-form button {
    grid-column: 2;
    grid-row: 1 / 4;
  }

  .host-updates form {
    grid-template-columns: 1fr;
  }

  .event-update-list {
    grid-column: 1;
  }

  .guest-preview-dialog {
    width: 100%;
    max-width: none;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  .guest-cover {
    height: 62dvh;
    min-height: 440px;
  }
}

@media (max-width: 480px) {
  .rsvp-overview > div {
    padding-right: 4px;
  }

  .rsvp-overview strong {
    font-size: 1.65rem;
  }

  .guest-row {
    grid-template-columns: 36px minmax(0, 1fr) 30px;
  }

  .guest-row select {
    grid-column: 2;
    width: 100%;
  }

  .guest-row > button {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  .guest-invite-details,
  .guest-rsvp-options {
    grid-template-columns: 1fr;
  }

  .guest-invite-details > div + div {
    border-top: 1px solid rgba(37, 33, 31, 0.22);
    border-left: 0;
  }

  .guest-cover h2 {
    font-size: clamp(3rem, 17vw, 4.8rem);
  }
}

/* Invitation flow: one decision at a time, with the full editor available on demand. */
.studio-progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: -24px -24px 20px;
  background: #f8f4ed;
  border-bottom: 1px solid #171717;
}

.studio-progress button {
  position: relative;
  min-height: 58px;
  padding: 12px 18px;
  color: rgba(23, 23, 23, 0.52);
  font-size: 0.78rem;
  font-weight: 650;
  background: #f8f4ed !important;
  border: 0;
  border-right: 1px solid rgba(23, 23, 23, 0.18);
  border-radius: 0;
  transition: none;
}

.studio-progress button:last-child {
  border-right: 0;
}

.studio-progress button::after {
  position: absolute;
  right: 18px;
  bottom: 0;
  left: 18px;
  height: 3px;
  content: "";
  background: transparent;
}

.studio-progress button:hover {
  color: #171717;
  background: #f3f4dc !important;
}

.studio-progress button.active {
  color: rgba(23, 23, 23, 0.52);
  background: #f8f4ed !important;
}

.studio-progress button.active::after {
  background: transparent;
}

#invitationPanel[data-studio-stage="look"] .studio-progress [data-studio-stage="look"],
#invitationPanel[data-studio-stage="details"] .studio-progress [data-studio-stage="details"],
#invitationPanel[data-studio-stage="share"] .studio-progress [data-studio-stage="share"] {
  color: #171717;
  background: #f3ff53 !important;
}

#invitationPanel[data-studio-stage="look"] .studio-progress [data-studio-stage="look"]::after,
#invitationPanel[data-studio-stage="details"] .studio-progress [data-studio-stage="details"]::after,
#invitationPanel[data-studio-stage="share"] .studio-progress [data-studio-stage="share"]::after {
  background: #171717;
}

#invitationPanel [data-studio-panel] {
  display: none;
}

#invitationPanel[data-studio-stage="look"] [data-studio-panel="look"],
#invitationPanel[data-studio-stage="details"] [data-studio-panel="details"],
#invitationPanel[data-studio-stage="share"] [data-studio-panel="share"] {
  display: block;
}

#invitationPanel[data-studio-stage="details"] .studio-mode-bar,
#invitationPanel[data-studio-stage="details"] .invitation-draft-bar,
#invitationPanel[data-studio-stage="details"] .template-rail,
#invitationPanel[data-studio-stage="share"] .studio-mode-bar,
#invitationPanel[data-studio-stage="share"] .invitation-draft-bar,
#invitationPanel[data-studio-stage="share"] .template-rail {
  display: none;
}

#invitationPanel[data-studio-stage="look"] .invitation-draft-bar:not(:has([data-invitation-draft])) {
  display: none;
}

[data-view="studio"] .studio-mode-bar {
  justify-content: flex-end;
  padding: 0 0 12px;
  background: #161616;
}

[data-view="studio"] .studio-mode-bar .segmented-control {
  width: 220px;
}

.studio-look-brief,
.studio-share-panel {
  padding: 4px 2px;
}

.studio-look-brief h2,
.studio-share-panel h2 {
  margin: 0 0 8px;
  color: #1b2522;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
}

.studio-look-brief > p,
.studio-share-panel > p {
  margin: 0 0 22px;
  color: rgba(27, 37, 34, 0.62);
  font-size: 0.72rem;
  line-height: 1.5;
}

.studio-look-brief .ai-designer {
  padding-bottom: 0;
  border-bottom: 0;
}

.studio-look-brief .ai-designer label {
  font-family: "Manrope", sans-serif;
  font-size: 0.7rem;
  font-style: normal;
}

.studio-look-brief .ai-designer textarea {
  min-height: 90px;
}

.studio-event-fields {
  display: grid;
  gap: 12px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(36, 58, 56, 0.22);
}

.studio-event-fields > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.studio-event-fields label {
  display: grid;
  gap: 6px;
}

.share-event-summary {
  display: grid;
  gap: 7px;
  margin: 20px 0;
  padding: 18px 0;
  border-block: 1px solid rgba(36, 58, 56, 0.28);
}

.share-event-summary strong {
  color: #1b2522;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.45rem;
  font-weight: 600;
}

.share-event-summary span {
  color: rgba(27, 37, 34, 0.62);
  font-size: 0.68rem;
  line-height: 1.5;
}

.studio-share-panel > button {
  min-height: 46px;
  margin-bottom: 8px;
}

.studio-share-panel .text-action {
  min-height: 36px;
  color: rgba(27, 37, 34, 0.7);
  background: transparent;
  border: 0;
}

.preview-heading {
  position: absolute !important;
  z-index: 8 !important;
  top: 18px;
  right: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.68rem;
  pointer-events: none;
}

.preview-heading button {
  min-height: 36px;
  padding: 7px 12px;
  color: #171717;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  pointer-events: auto;
}

#invitationPanel:not(.advanced-editing) .canvas-toolbar,
#invitationPanel:not(.advanced-editing) .layer-inspector {
  display: none !important;
}

#invitationPanel.advanced-editing:not(.three-mode) .canvas-toolbar {
  display: flex !important;
}

#invitationPanel.advanced-editing:not(.three-mode) .layer-inspector {
  display: grid !important;
}

#invitationPanel.three-mode .preview-heading button {
  display: none;
}

@media (max-width: 700px) {
  .studio-progress {
    margin: -24px -24px 18px;
  }

  .studio-progress button {
    min-height: 52px;
  }

  [data-view="studio"] .studio-mode-bar {
    justify-content: stretch;
  }

  [data-view="studio"] .studio-mode-bar .segmented-control {
    width: 100%;
  }

  [data-view="studio"] .designer-shell {
    display: flex;
    flex-direction: column;
  }

  [data-view="studio"] .canvas-stage {
    order: 1;
    min-height: 650px;
  }

  [data-view="studio"] .designer-tools {
    position: static;
    order: 2;
    max-height: none;
  }

  .preview-heading {
    top: 12px;
    right: 12px;
    left: 12px;
  }
}

/* Pinterest-inspired invitation studio: tactile paper, sharp color, real imagery. */
:root {
  --paper: #f1ede3;
  --paper-bright: #fffdf7;
  --paper-soft: #e5edf1;
  --ink: #211e1b;
  --muted: #6d6861;
  --quiet: #9d9589;
  --line: rgba(33, 30, 27, 0.18);
  --line-strong: rgba(33, 30, 27, 0.42);
  --editorial-pink: #f1ede3;
  --editorial-cream: #fffdf7;
  --editorial-green: #193f3a;
  --editorial-blue: #dbe8ef;
  --editorial-wine: #b43b3f;
  --editorial-gold: #e8c84f;
  --studio-cobalt: #2148c7;
  --studio-cherry: #b43b3f;
  --studio-butter: #efd759;
}

html,
body,
.sidebar {
  background: var(--paper);
}

[data-view="studio"] > .view-header {
  min-height: 104px;
  margin-bottom: 18px;
  padding-bottom: 18px;
}

[data-view="studio"] > .view-header h1 {
  font-size: clamp(4rem, 6.3vw, 6.5rem);
  letter-spacing: 0;
}

[data-view="studio"] > .view-header #newInvitation {
  color: #fffdf7;
  background: var(--studio-cobalt);
  border-color: var(--studio-cobalt);
}

[data-view="studio"] .invitation-panel {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

[data-view="studio"] .studio-progress {
  display: flex;
  gap: 26px;
  width: 100%;
  margin: 0 0 16px;
  padding: 0 0 12px;
  background: transparent;
  border-bottom: 1px solid var(--ink);
}

[data-view="studio"] .studio-progress button,
#invitationPanel[data-studio-stage="look"] .studio-progress [data-studio-stage="look"],
#invitationPanel[data-studio-stage="details"] .studio-progress [data-studio-stage="details"],
#invitationPanel[data-studio-stage="share"] .studio-progress [data-studio-stage="share"] {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 4px 0;
  color: rgba(33, 30, 27, 0.52);
  font-family: "Manrope", sans-serif;
  font-size: 0.72rem;
  font-weight: 650;
  background: transparent !important;
  border: 0;
}

[data-view="studio"] .studio-progress button::before {
  display: inline-grid;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  place-items: center;
  color: var(--ink);
  content: "";
  border: 1px solid currentColor;
  border-radius: 50%;
  vertical-align: -4px;
}

[data-view="studio"] .studio-progress button:nth-child(1)::before { content: "1"; }
[data-view="studio"] .studio-progress button:nth-child(2)::before { content: "2"; }
[data-view="studio"] .studio-progress button:nth-child(3)::before { content: "3"; }

#invitationPanel[data-studio-stage="look"] .studio-progress [data-studio-stage="look"],
#invitationPanel[data-studio-stage="details"] .studio-progress [data-studio-stage="details"],
#invitationPanel[data-studio-stage="share"] .studio-progress [data-studio-stage="share"] {
  color: var(--ink);
}

#invitationPanel[data-studio-stage="look"] .studio-progress [data-studio-stage="look"]::before,
#invitationPanel[data-studio-stage="details"] .studio-progress [data-studio-stage="details"]::before,
#invitationPanel[data-studio-stage="share"] .studio-progress [data-studio-stage="share"]::before {
  color: #fffdf7;
  background: var(--studio-cherry);
  border-color: var(--studio-cherry);
}

[data-view="studio"] .studio-progress button::after,
#invitationPanel[data-studio-stage="look"] .studio-progress [data-studio-stage="look"]::after,
#invitationPanel[data-studio-stage="details"] .studio-progress [data-studio-stage="details"]::after,
#invitationPanel[data-studio-stage="share"] .studio-progress [data-studio-stage="share"]::after {
  display: none;
}

[data-view="studio"] .studio-mode-bar {
  justify-content: space-between;
  padding: 0 0 14px;
  background: transparent;
  border: 0;
}

[data-view="studio"] .studio-mode-bar .segmented-control {
  width: 216px;
  padding: 3px;
  background: var(--paper-bright);
  border-color: var(--ink);
  border-radius: 6px;
}

[data-view="studio"] .studio-mode-bar .segmented-control button {
  min-height: 34px;
  color: var(--ink);
  background: transparent;
}

[data-view="studio"] .studio-mode-bar .segmented-control button.active {
  color: #fff;
  background: var(--studio-cobalt);
}

[data-view="studio"] .invitation-draft-bar {
  margin: 0;
  padding: 0 0 14px;
  border: 0;
}

[data-view="studio"] .template-rail {
  gap: 15px;
  margin: 0 0 20px;
  padding: 20px 18px 24px;
  background: #dbe8ef;
  border-block: 1px solid var(--ink);
}

[data-view="studio"] .template-choice {
  min-width: 154px;
  padding: 8px 8px 12px;
  color: var(--ink);
  background: var(--paper-bright);
  border: 1px solid rgba(33, 30, 27, 0.48);
  border-radius: 2px;
  box-shadow: 2px 3px 0 rgba(33, 30, 27, 0.12);
  transform: rotate(-0.8deg);
}

[data-view="studio"] .template-choice:nth-child(3n + 2) { transform: rotate(0.7deg); }
[data-view="studio"] .template-choice:nth-child(3n) { transform: rotate(-0.2deg); }

[data-view="studio"] .template-choice::before {
  position: absolute;
  z-index: 2;
  top: -7px;
  left: 50%;
  width: 42px;
  height: 13px;
  content: "";
  background: rgba(239, 215, 89, 0.82);
  border: 1px solid rgba(33, 30, 27, 0.12);
  transform: translateX(-50%) rotate(-2deg);
}

[data-view="studio"] .template-choice.active {
  background: var(--paper-bright) !important;
  border-color: var(--ink);
  box-shadow: 5px 6px 0 var(--studio-cherry);
  transform: translateY(-4px) rotate(0);
}

[data-view="studio"] .template-choice.active::before {
  background: var(--studio-butter);
}

[data-view="studio"] .template-mini {
  height: 178px;
  background-position: center;
  background-size: cover;
  border: 0;
  border-radius: 0;
  filter: saturate(0.95) contrast(0.98);
}

[data-view="studio"] .template-mini i,
[data-view="studio"] .template-mini::after {
  display: none;
}

[data-view="studio"] :is(.mini-editorial, .mini-soiree, .mini-minimal, .mini-orbit) {
  background-image: url("./assets/invitations/flash-still-life.jpg") !important;
}

[data-view="studio"] :is(.mini-botanical, .mini-ribbon, .mini-wildflower, .mini-folio, .mini-travelspread) {
  background-image: url("./assets/invitations/italian-table.jpg") !important;
}

[data-view="studio"] :is(.mini-postcard, .mini-scrapbook, .mini-bold, .mini-ticket) {
  background-image: url("./assets/invitations/riso-cake.jpg") !important;
}

[data-view="studio"] :is(.mini-collage, .mini-modern, .mini-coastal, .mini-split, .mini-archway) {
  background-image: url("./assets/invitations/blue-hour-coast.jpg") !important;
}

[data-view="studio"] .template-choice strong {
  display: block;
  margin-top: 10px;
  overflow: hidden;
  font-family: "Manrope", sans-serif;
  font-size: 0.66rem;
  font-weight: 680;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-view="studio"] .designer-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 18px;
  padding: 0;
  background: transparent;
}

[data-view="studio"] .canvas-stage {
  order: 1;
  min-width: 0;
  min-height: 760px;
  padding: 60px clamp(22px, 5vw, 70px) 34px;
  background: #dbe8ef;
  border: 1px solid var(--ink);
  border-radius: 5px;
}

[data-view="studio"] .canvas-stage::before {
  display: none;
}

[data-view="studio"] .canvas-stage::after {
  position: absolute;
  top: 22px;
  left: 24px;
  width: 72px;
  height: 8px;
  content: "";
  background: var(--studio-cherry);
  transform: rotate(-2deg);
}

[data-view="studio"] .designer-tools {
  position: sticky;
  top: 16px;
  order: 2;
  max-height: calc(100vh - 32px);
  padding: 22px;
  overflow-y: auto;
  background: var(--paper-bright);
  border: 1px solid var(--ink);
  border-radius: 5px;
}

[data-view="studio"] .studio-look-brief,
[data-view="studio"] .studio-share-panel {
  padding: 0;
}

[data-view="studio"] .studio-look-brief h2,
[data-view="studio"] .studio-share-panel h2 {
  max-width: 10ch;
  margin-bottom: 12px;
  color: var(--ink);
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 2.65rem;
  font-weight: 500;
  line-height: 0.93;
}

[data-view="studio"] .studio-look-brief > p,
[data-view="studio"] .studio-share-panel > p {
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 0.68rem;
}

[data-view="studio"] .ai-designer,
[data-view="studio"] .control-section {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ink);
  border-radius: 0;
}

[data-view="studio"] .ai-designer {
  padding-top: 16px;
}

[data-view="studio"] .control-section summary {
  min-height: 48px;
  padding: 13px 0;
  color: var(--ink);
  font-family: "Manrope", sans-serif;
  font-size: 0.7rem;
  font-weight: 720;
}

[data-view="studio"] .control-section-body {
  padding: 0 0 18px;
}

[data-view="studio"] :is(input, textarea, select) {
  color: var(--ink);
  background: #fffdf7;
  border-color: rgba(33, 30, 27, 0.38);
  border-radius: 3px;
}

[data-view="studio"] :is(input, textarea, select):focus {
  border-color: var(--studio-cobalt);
  box-shadow: 0 0 0 2px rgba(33, 72, 199, 0.14);
}

[data-view="studio"] .primary-action,
[data-view="studio"] #generateDraft,
[data-view="studio"] #studioGuestPreview {
  color: #fff;
  background: var(--studio-cobalt);
  border-color: var(--studio-cobalt);
  border-radius: 4px;
}

[data-view="studio"] .image-library {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

[data-view="studio"] .image-library button {
  aspect-ratio: 4 / 5;
  background: #fff;
  border: 1px solid var(--ink);
  border-radius: 2px;
}

[data-view="studio"] .image-library button.active {
  border-color: var(--studio-cobalt);
  box-shadow: 3px 3px 0 var(--studio-cobalt);
}

[data-view="studio"] .image-library button span {
  right: 4px;
  bottom: 4px;
  left: 4px;
  padding: 5px 6px;
  color: var(--ink);
  text-shadow: none;
  background: rgba(255, 253, 247, 0.88);
}

[data-view="studio"] .preview-heading {
  top: 16px;
  right: 18px;
  left: 120px;
  color: var(--ink);
}

[data-view="studio"] .preview-heading > span {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.9rem;
  font-style: italic;
}

[data-view="studio"] .preview-heading button {
  color: var(--ink);
  background: var(--paper-bright);
  border-color: var(--ink);
  border-radius: 4px;
}

[data-view="studio"] .invite-preview {
  border: 1px solid rgba(33, 30, 27, 0.45);
  border-radius: 1px;
  box-shadow: 12px 16px 0 rgba(33, 30, 27, 0.14);
  transform: rotate(0.25deg);
}

[data-view="studio"] .invite-preview:is(.template-editorial, .template-botanical, .template-postcard, .template-collage).has-photo::after {
  background: transparent;
  box-shadow: none;
}

[data-view="studio"] .invite-preview:is(.template-editorial, .template-botanical, .template-postcard, .template-collage).has-photo .invite-copy {
  z-index: 3;
  justify-content: flex-end;
  padding: 8%;
}

[data-view="studio"] .invite-preview:is(.template-editorial, .template-collage).has-photo .invite-copy {
  color: #fffdf7;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.52);
}

[data-view="studio"] .invite-preview.template-editorial.has-photo h3 {
  max-width: 8ch;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(4rem, 7vw, 6rem);
  font-weight: 500;
  line-height: 0.82;
}

[data-view="studio"] .invite-preview.template-editorial.has-photo .preview-kicker {
  width: max-content;
  color: #fffdf7;
  background: var(--studio-cherry);
}

[data-view="studio"] .invite-preview.template-botanical.has-photo .invite-copy {
  justify-content: flex-start;
  width: 78%;
  color: #fffdf7;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.34);
}

[data-view="studio"] .invite-preview.template-botanical.has-photo h3 {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(3.8rem, 6.6vw, 5.6rem);
  font-style: italic;
  font-weight: 500;
  line-height: 0.88;
}

[data-view="studio"] .invite-preview.template-postcard.has-photo .invite-copy {
  justify-content: flex-start;
  color: #173da8;
  text-shadow: none;
}

[data-view="studio"] .invite-preview.template-postcard.has-photo h3 {
  max-width: 7ch;
  font-family: "Manrope", sans-serif;
  font-size: clamp(3.7rem, 7vw, 5.8rem);
  font-weight: 800;
  line-height: 0.86;
}

[data-view="studio"] .invite-preview.template-postcard.has-photo .preview-kicker {
  color: #fffdf7;
  background: var(--studio-cherry);
}

[data-view="studio"] .invite-preview.template-collage.has-photo h3 {
  max-width: 7ch;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(4.1rem, 7vw, 6.2rem);
  font-style: italic;
  font-weight: 500;
  line-height: 0.84;
}

[data-view="studio"] .invite-preview.template-collage.has-photo .preview-kicker {
  width: max-content;
  color: var(--ink);
  background: var(--studio-butter);
}

[data-view="studio"] .palette-row {
  gap: 9px;
}

[data-view="studio"] .palette-swatch {
  border-radius: 50%;
}

@media (max-width: 900px) {
  [data-view="studio"] .designer-shell {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  [data-view="studio"] .canvas-stage {
    min-height: 680px;
    padding-inline: 24px;
  }
}

@media (max-width: 700px) {
  [data-view="studio"] > .view-header {
    min-height: 82px;
  }

  [data-view="studio"] > .view-header h1 {
    font-size: clamp(3.3rem, 17vw, 4.9rem);
  }

  [data-view="studio"] .studio-progress {
    gap: 18px;
    margin: 0 0 14px;
    overflow-x: auto;
  }

  [data-view="studio"] .studio-progress button {
    min-width: auto;
  }

  [data-view="studio"] .template-rail {
    margin-inline: calc(50% - 50vw);
    padding-inline: 24px;
  }

  [data-view="studio"] .template-choice {
    min-width: 146px;
  }

  [data-view="studio"] .template-mini {
    height: 170px;
  }

  [data-view="studio"] .designer-shell {
    display: flex;
    flex-direction: column;
  }

  [data-view="studio"] .canvas-stage {
    order: 1;
    min-height: 610px;
    padding: 58px 18px 26px;
  }

  [data-view="studio"] .designer-tools {
    position: static;
    order: 2;
    max-height: none;
  }

  [data-view="studio"] .preview-heading {
    left: 94px;
  }
}

/* Product shell: a clear, image-led workspace inspired by the restraint of Editions. */
:root {
  --paper: #f4f3ed;
  --paper-bright: #fffef9;
  --paper-soft: #e8ede6;
  --ink: #1b1d1a;
  --muted: #686b65;
  --quiet: #a3a69f;
  --line: rgba(27, 29, 26, 0.16);
  --line-strong: rgba(27, 29, 26, 0.38);
  --editorial-pink: #f4f3ed;
  --editorial-cream: #fffef9;
  --editorial-green: #173f37;
  --editorial-blue: #d9e6ff;
  --editorial-wine: #c2473e;
  --editorial-gold: #e9cf52;
  --shell-blue: #294bd6;
  --shell-coral: #e06455;
  --shell-lime: #dff66b;
  --shell-lilac: #ddd7ff;
}

html,
body {
  background: var(--paper);
}

body {
  color: var(--ink);
  font-family: "Manrope", sans-serif;
}

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

.sidebar {
  position: sticky;
  z-index: 40;
  top: 0;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto minmax(190px, 1fr);
  grid-template-rows: 72px;
  align-items: center;
  width: 100%;
  padding: 0 clamp(18px, 3.2vw, 48px);
  color: var(--ink);
  background: rgba(244, 243, 237, 0.94);
  border: 0;
  border-bottom: 1px solid var(--ink);
  box-shadow: none;
  backdrop-filter: blur(18px);
}

.sidebar::before,
.sidebar::after {
  display: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.brand-mark {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  transform: none;
}

.brand-mark i:nth-child(1) {
  inset: 1px;
  border: 1px solid var(--ink);
  border-radius: 50%;
}

.brand-mark i:nth-child(2) {
  inset: 8px;
  border: 1px solid var(--shell-coral);
  border-radius: 50%;
}

.brand-mark i:nth-child(3) {
  inset: 13px;
  border: 1px solid var(--shell-blue);
  border-radius: 50%;
}

.brand-mark b {
  top: 15px;
  left: 15px;
  width: 5px;
  height: 5px;
  background: var(--editorial-gold);
  border-radius: 50%;
}

.brand strong {
  color: var(--ink);
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.55rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
}

.nav-list {
  display: flex;
  grid-column: 2;
  grid-row: 1;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--ink);
  border-radius: 8px;
}

.nav-list a {
  min-height: 34px;
  padding: 8px 14px;
  color: rgba(255, 254, 249, 0.68);
  font-size: 0.66rem;
  font-weight: 650;
  background: transparent;
  border: 0;
  border-radius: 5px;
}

.nav-list a::after {
  display: none;
}

.nav-list a:hover {
  color: #fffef9;
  background: rgba(255, 255, 255, 0.1);
}

.nav-list a.active {
  color: var(--ink);
  background: var(--paper-bright);
}

.mini-panel {
  display: block;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  width: min(100%, 230px);
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
}

.mini-panel .context-heading,
.mini-panel .next-action-copy {
  display: none;
}

.mini-panel select {
  width: 100%;
  min-height: 40px;
  padding: 8px 34px 8px 13px;
  color: var(--ink);
  font-size: 0.66rem;
  font-weight: 650;
  background-color: var(--paper-bright);
  border: 1px solid var(--ink);
  border-radius: 6px;
}

.workspace {
  width: min(100%, 1540px);
  margin: 0 auto;
  padding: 34px clamp(22px, 4.2vw, 68px) 110px;
}

.product-view > .view-header,
[data-view="studio"] > .view-header {
  min-height: 94px;
  align-items: flex-end;
  margin: 0 0 24px;
  padding: 10px 0 20px;
  border-top: 0;
  border-bottom: 1px solid var(--ink);
}

.view-header::before,
.view-header::after {
  display: none;
}

.view-header h1,
.product-view > .view-header h1,
[data-view="dashboard"] > .view-header h1,
[data-view="gifts"] .view-header h1,
[data-view="studio"] > .view-header h1 {
  margin: 0;
  color: var(--ink);
  font-family: "Manrope", sans-serif;
  font-size: clamp(3.2rem, 5.4vw, 5.1rem);
  font-weight: 760;
  line-height: 0.88;
  letter-spacing: 0;
}

.view-header .primary-action,
.view-header > button,
.view-header #newInvitation {
  min-width: 136px;
  min-height: 42px;
  padding: 9px 15px;
  color: #fffef9;
  font-size: 0.66rem;
  font-weight: 720;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 6px;
  box-shadow: none;
}

.view-header .primary-action:hover,
.view-header > button:hover,
.view-header #newInvitation:hover {
  color: var(--ink);
  background: var(--shell-lime);
  border-color: var(--ink);
  transform: none;
}

/* Home: the calendar is the product, analytics support it. */
[data-view="dashboard"] {
  gap: 0;
}

[data-view="dashboard"] > .view-header { order: 0; }
[data-view="dashboard"] > .visual-grid { order: 1; }
[data-view="dashboard"] > .stats-grid { order: 2; }
[data-view="dashboard"] > .people-directory { order: 3; }
[data-view="dashboard"] > .program-grid { order: 4; }
[data-view="dashboard"] > .event-room-drawer { order: 5; }
[data-view="dashboard"] > .planner-panel { order: 6; }
[data-view="dashboard"] > .form-panel { order: 7; }

[data-view="dashboard"] .visual-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.45fr);
  gap: 14px;
  margin-bottom: 16px;
}

[data-view="dashboard"] .calendar-panel {
  padding: clamp(20px, 2.5vw, 34px);
  background: var(--paper-bright);
  border: 1px solid var(--ink);
  border-radius: 7px;
}

[data-view="dashboard"] .calendar-panel .panel-heading {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink);
}

[data-view="dashboard"] .calendar-panel .panel-heading h2,
[data-view="dashboard"] .focus-panel .panel-heading h2 {
  color: var(--ink);
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.8rem, 2.7vw, 2.7rem);
  font-weight: 740;
  letter-spacing: 0;
}

[data-view="dashboard"] .calendar-actions button {
  width: 36px;
  height: 36px;
  min-height: 36px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 50%;
}

[data-view="dashboard"] .calendar-actions #calendarToday {
  width: auto;
  padding-inline: 14px;
  border-radius: 6px;
}

[data-view="dashboard"] .calendar-feature {
  height: clamp(180px, 20vw, 300px);
  margin-top: 18px;
  border: 0;
  border-radius: 5px;
}

[data-view="dashboard"] .calendar-feature img {
  filter: saturate(0.9) contrast(1.02);
}

[data-view="dashboard"] .calendar-feature figcaption {
  padding: 18px 20px;
  color: #fffef9;
  background: rgba(23, 63, 55, 0.92);
}

[data-view="dashboard"] .calendar-feature strong {
  color: inherit;
  font-family: "Manrope", sans-serif;
  font-size: 1.1rem;
  font-weight: 720;
}

[data-view="dashboard"] .calendar-day {
  min-height: 62px;
  background: transparent;
  border-color: var(--line);
}

[data-view="dashboard"] .calendar-day.has-event {
  background: var(--shell-lilac);
}

[data-view="dashboard"] .focus-panel {
  min-height: 100%;
  padding: 24px;
  color: var(--ink);
  background: var(--shell-coral);
  border: 1px solid var(--ink);
  border-radius: 7px;
}

[data-view="dashboard"] .focus-panel::after {
  right: 18px;
  bottom: 18px;
  width: 84px;
  height: 84px;
  border-color: rgba(27, 29, 26, 0.38);
  box-shadow: 0 0 0 18px rgba(27, 29, 26, 0.06), 0 0 0 36px rgba(27, 29, 26, 0.04);
}

[data-view="dashboard"] .focus-panel h2,
[data-view="dashboard"] .focus-panel .event-countdown strong,
[data-view="dashboard"] .focus-panel .orbit-caption strong {
  color: var(--ink);
}

[data-view="dashboard"] .focus-panel .event-countdown span,
[data-view="dashboard"] .focus-panel .orbit-caption p,
[data-view="dashboard"] .focus-panel .event-readiness span {
  color: rgba(27, 29, 26, 0.68);
}

[data-view="dashboard"] .data-panel {
  display: none;
}

[data-view="dashboard"] .stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 0 34px;
  color: #fffef9;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 7px;
}

[data-view="dashboard"] .stats-grid::before {
  display: none;
}

[data-view="dashboard"] .stat-card,
[data-view="dashboard"] .stat-card:nth-child(n),
[data-view="dashboard"] .stat-card.accent {
  min-height: 108px;
  padding: 20px 22px;
  color: inherit;
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(255, 254, 249, 0.22);
}

[data-view="dashboard"] .stat-card:last-child {
  border-right: 0;
}

[data-view="dashboard"] .stat-card strong {
  color: inherit;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.7rem, 2.4vw, 2.5rem);
  font-weight: 740;
}

[data-view="dashboard"] .stat-card span {
  color: rgba(255, 254, 249, 0.64);
}

[data-view="dashboard"] .people-directory {
  margin: 0 0 34px;
  padding: 26px;
  background: var(--paper-bright);
  border: 1px solid var(--ink);
  border-radius: 7px;
}

.people-strip-heading h2,
.directory-heading h2 {
  color: var(--ink);
  font-family: "Manrope", sans-serif;
  font-size: clamp(2rem, 3.2vw, 3.2rem);
  font-weight: 740;
  letter-spacing: 0;
}

[data-view="dashboard"] .program-grid {
  gap: 14px;
  margin-bottom: 34px;
}

[data-view="dashboard"] .program-panel {
  min-height: 230px;
  padding: 24px;
  border: 1px solid var(--ink);
  border-radius: 7px;
}

[data-view="dashboard"] .coverage-panel { background: var(--shell-lime); }
[data-view="dashboard"] .spend-panel { background: var(--shell-lilac); }
[data-view="dashboard"] .risk-panel { background: #d9e6ff; }

[data-view="dashboard"] .program-panel-heading h2 {
  font-family: "Manrope", sans-serif;
  font-size: 1.25rem;
  font-weight: 740;
}

[data-view="dashboard"] .event-room-drawer {
  margin: 0 0 34px;
  border: 1px solid var(--ink);
  border-radius: 7px;
}

[data-view="dashboard"] .event-room-drawer > summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 76px;
  padding: 18px 22px;
  color: #fffef9;
  list-style: none;
  cursor: pointer;
  background: var(--editorial-green);
  border-radius: 6px;
}

[data-view="dashboard"] .event-room-drawer > summary::-webkit-details-marker {
  display: none;
}

[data-view="dashboard"] .event-room-drawer > summary span {
  font-size: 1.15rem;
  font-weight: 740;
}

[data-view="dashboard"] .event-room-drawer > summary strong {
  margin-left: auto;
  color: rgba(255, 254, 249, 0.7);
  font-size: 0.66rem;
  font-weight: 550;
}

[data-view="dashboard"] .event-room-drawer > summary::after {
  display: grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  place-items: center;
  color: var(--ink);
  content: "+";
  background: var(--shell-lime);
  border-radius: 50%;
}

[data-view="dashboard"] .event-room-drawer[open] > summary::after {
  content: "−";
}

[data-view="dashboard"] .event-room-drawer[open] > summary {
  border-radius: 6px 6px 0 0;
}

[data-view="dashboard"] .event-room-drawer .event-room {
  margin: 0;
  border: 0;
  border-radius: 0 0 6px 6px;
}

/* Gift concierge: one prompt, one profile, then the archive. */
[data-view="gifts"] .gift-panel {
  padding: 0;
  background: transparent;
  border: 0;
}

[data-view="gifts"] .gift-top-grid {
  gap: 14px;
}

[data-view="gifts"] .gift-top-grid .gift-assistant {
  overflow: hidden;
  background: var(--paper-bright);
  border: 1px solid var(--ink);
  border-radius: 7px;
}

[data-view="gifts"] .gift-top-grid .gift-assistant-heading {
  min-height: 250px;
  padding: 34px;
  background: #d9e6ff;
}

[data-view="gifts"] .gift-top-grid .gift-assistant-heading h2 {
  max-width: 9ch;
  color: var(--ink);
  font-family: "Manrope", sans-serif;
  font-size: clamp(2.5rem, 4vw, 3.8rem);
  font-weight: 760;
  line-height: 0.92;
  letter-spacing: 0;
}

[data-view="gifts"] .gift-top-grid .gift-assistant-heading p {
  color: rgba(27, 29, 26, 0.7);
  font-family: "Manrope", sans-serif;
  font-size: 0.74rem;
  font-style: normal;
}

[data-view="gifts"] .gift-top-grid .gift-chat {
  min-height: 200px;
  background: var(--paper-bright);
  background-image: none;
}

[data-view="gifts"] .gift-top-grid .gift-chat-prompts button {
  min-height: 44px;
  background: transparent;
  border-color: var(--line-strong);
  border-radius: 6px;
}

[data-view="gifts"] .gift-top-grid .gift-chat-prompts button:hover {
  color: #fffef9;
  background: var(--shell-blue);
  border-color: var(--shell-blue);
}

[data-view="gifts"] .gift-top-grid .gift-chat-composer {
  background: var(--ink);
}

[data-view="gifts"] .gift-top-grid .gift-chat-composer button {
  color: #fffef9;
  background: var(--shell-blue);
}

[data-view="gifts"] .gift-top-grid .recipient-profile-form,
[data-view="gifts"] .gift-top-grid .gift-readout {
  border: 1px solid var(--ink);
  border-radius: 7px;
}

[data-view="gifts"] .gift-top-grid .gift-readout {
  color: #fffef9;
  background: var(--ink);
}

[data-view="gifts"] .gift-discovery,
[data-view="gifts"] .gift-journal,
[data-view="gifts"] .gift-shortlist,
[data-view="gifts"] .gift-list-section {
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--ink);
}

[data-view="gifts"] :is(.gift-discovery-heading, .journal-heading, .shortlist-heading) h2,
[data-view="gifts"] .gift-list-section > h2 {
  color: var(--ink);
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.9rem, 3vw, 3rem);
  font-weight: 740;
  letter-spacing: 0;
}

/* Reminders: operational, compact and immediately scannable. */
[data-view="reminders"] .reminder-overview {
  margin: 0 0 20px;
  color: #fffef9;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 7px;
}

[data-view="reminders"] .reminder-overview > div {
  min-height: 108px;
  border-color: rgba(255, 254, 249, 0.22);
}

[data-view="reminders"] .reminder-overview strong {
  color: inherit;
  font-family: "Manrope", sans-serif;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 740;
}

[data-view="reminders"] .reminder-overview span {
  color: rgba(255, 254, 249, 0.62);
}

[data-view="reminders"] .reminder-layout {
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.55fr);
  gap: 14px;
}

[data-view="reminders"] .reminder-layout .people-panel,
[data-view="reminders"] .reminder-layout .reminder-panel {
  padding: 26px;
  border: 1px solid var(--ink);
  border-radius: 7px;
}

[data-view="reminders"] .reminder-layout .people-panel {
  background: var(--paper-bright);
}

[data-view="reminders"] .reminder-layout .reminder-panel {
  color: var(--ink);
  background: var(--shell-lime);
}

[data-view="reminders"] .reminder-layout .panel-heading h2 {
  color: inherit;
  font-family: "Manrope", sans-serif;
  font-size: clamp(2rem, 3.2vw, 3.2rem);
  font-weight: 740;
  letter-spacing: 0;
}

[data-view="reminders"] .reminder-layout .reminder-panel .timeline strong,
[data-view="reminders"] .reminder-layout .reminder-panel .timeline p,
[data-view="reminders"] .reminder-layout .reminder-panel .timeline span,
[data-view="reminders"] .reminder-layout .reminder-panel .timeline time {
  color: var(--ink);
}

/* Keep the studio part of the same product without flattening its art direction. */
[data-view="studio"] .studio-progress {
  margin-top: 0;
}

[data-view="studio"] .template-rail {
  background: #d9e6ff;
}

[data-view="studio"] .canvas-stage {
  background: #d9e6ff;
}

[data-view="studio"] .primary-action,
[data-view="studio"] #generateDraft,
[data-view="studio"] #studioGuestPreview {
  background: var(--shell-blue);
  border-color: var(--shell-blue);
}

@media (max-width: 980px) {
  .sidebar {
    grid-template-columns: minmax(180px, 1fr) auto minmax(170px, 1fr);
    padding-inline: 18px;
  }

  .nav-list a {
    padding-inline: 10px;
  }

  .mini-panel {
    width: 180px;
  }

  [data-view="dashboard"] .visual-grid,
  [data-view="reminders"] .reminder-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
  }
}

@media (max-width: 700px) {
  .sidebar {
    position: sticky;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(145px, 0.8fr);
    grid-template-rows: 54px 46px;
    min-height: 100px;
    padding: 0 14px;
  }

  .brand {
    grid-column: 1;
    grid-row: 1;
  }

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

  .brand strong {
    font-size: 1.3rem;
  }

  .mini-panel {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
  }

  .mini-panel select {
    min-height: 36px;
    font-size: 0.6rem;
  }

  .nav-list {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: stretch;
    width: 100%;
    padding: 3px;
  }

  .nav-list a {
    flex: 1;
    min-width: 0;
    min-height: 34px;
    padding: 8px 4px;
    text-align: center;
  }

  .workspace {
    padding: 24px 14px 88px;
  }

  .product-view > .view-header,
  [data-view="studio"] > .view-header {
    min-height: 78px;
    margin-bottom: 18px;
    padding: 6px 0 15px;
  }

  .view-header h1,
  .product-view > .view-header h1,
  [data-view="dashboard"] > .view-header h1,
  [data-view="gifts"] .view-header h1,
  [data-view="studio"] > .view-header h1 {
    font-size: clamp(2.6rem, 13vw, 4rem);
  }

  .view-header > button,
  .view-header .primary-action,
  .view-header #newInvitation {
    min-width: 112px;
  }

  [data-view="dashboard"] .visual-grid,
  [data-view="reminders"] .reminder-layout {
    grid-template-columns: 1fr;
  }

  [data-view="dashboard"] .calendar-panel,
  [data-view="dashboard"] .focus-panel,
  [data-view="dashboard"] .people-directory,
  [data-view="reminders"] .reminder-layout .people-panel,
  [data-view="reminders"] .reminder-layout .reminder-panel {
    padding: 18px;
  }

  [data-view="dashboard"] .calendar-feature {
    height: 180px;
  }

  [data-view="dashboard"] .calendar-day {
    min-height: 52px;
  }

  [data-view="dashboard"] .program-grid {
    display: flex;
    gap: 10px;
    margin-right: -14px;
    padding-right: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  [data-view="dashboard"] .program-grid::-webkit-scrollbar {
    display: none;
  }

  [data-view="dashboard"] .program-panel {
    flex: 0 0 min(84vw, 330px);
    scroll-snap-align: start;
  }

  [data-view="dashboard"] .stats-grid,
  [data-view="reminders"] .reminder-overview {
    grid-template-columns: repeat(2, 1fr);
  }

  [data-view="dashboard"] .stat-card,
  [data-view="dashboard"] .stat-card:nth-child(n),
  [data-view="dashboard"] .stat-card.accent,
  [data-view="reminders"] .reminder-overview > div {
    min-height: 92px;
    border-right: 1px solid rgba(255, 254, 249, 0.2);
    border-bottom: 1px solid rgba(255, 254, 249, 0.2);
  }

  [data-view="dashboard"] .stat-card:nth-child(2n),
  [data-view="reminders"] .reminder-overview > div:nth-child(2n) {
    border-right: 0;
  }

  [data-view="gifts"] .gift-top-grid .gift-assistant-heading {
    min-height: 220px;
    padding: 24px;
  }

  [data-view="gifts"] .gift-top-grid .gift-assistant-heading h2 {
    font-size: clamp(2.35rem, 12vw, 3.3rem);
  }

  [data-view="dashboard"] .event-room-drawer > summary {
    align-items: flex-start;
    flex-direction: column;
    padding-right: 64px;
  }

  [data-view="dashboard"] .event-room-drawer > summary strong {
    margin-left: 0;
  }

  [data-view="dashboard"] .event-room-drawer > summary::after {
    position: absolute;
    top: 18px;
    right: 18px;
  }
}

/* Final visual edition: Pasticceria-inspired warmth, hierarchy and image scale. */
[data-view="dashboard"] .focus-panel .panel-heading h2 {
  color: var(--paper-bright);
}

:root {
  --paper: #f2eadf;
  --paper-bright: #fffaf2;
  --paper-soft: #e4d8ca;
  --ink: #271b18;
  --muted: #75655d;
  --quiet: #a6958b;
  --line: rgba(39, 27, 24, 0.18);
  --line-strong: rgba(39, 27, 24, 0.42);
  --editorial-pink: #ead0cf;
  --editorial-cream: #fffaf2;
  --editorial-green: #183f37;
  --editorial-blue: #c7d8ee;
  --editorial-wine: #7a2821;
  --editorial-gold: #d7ad3d;
  --shell-blue: #304cc9;
  --shell-coral: #c85f4e;
  --shell-lime: #d8d99d;
  --shell-lilac: #dbcbd8;
  --chapter-wine: #6d261f;
  --chapter-butter: #e2c67f;
  --chapter-sage: #bccbbd;
}

body::before {
  position: fixed;
  z-index: 100;
  inset: 0 auto 0 0;
  width: 7px;
  content: "";
  pointer-events: none;
  background: var(--shell-blue);
}

.sidebar {
  background: rgba(242, 234, 223, 0.95);
  border-color: rgba(39, 27, 24, 0.48);
}

.brand-mark {
  display: grid;
  place-items: center;
  background: var(--shell-blue);
  border-radius: 50%;
}

.brand-mark::after {
  color: var(--paper-bright);
  content: "O";
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1rem;
  font-style: italic;
}

.brand-mark :is(i, b) { display: none; }

.brand strong {
  color: var(--chapter-wine);
  font-size: 1.7rem;
}

.nav-list {
  gap: 0;
  padding: 3px;
  background: var(--chapter-wine);
  border: 1px solid var(--chapter-wine);
  border-radius: 6px;
}

.nav-list a {
  color: rgba(255, 250, 242, 0.7);
  border-radius: 3px;
}

.nav-list a.active {
  color: var(--chapter-wine);
  background: var(--paper-bright);
}

.mini-panel select {
  background-color: transparent;
  border-color: rgba(39, 27, 24, 0.56);
}

.workspace { padding-top: clamp(28px, 3.2vw, 50px); }

.product-view > .view-header,
[data-view="studio"] > .view-header {
  min-height: 110px;
  margin-bottom: 30px;
  padding-bottom: 22px;
  border-color: rgba(39, 27, 24, 0.56);
}

.view-header h1,
.product-view > .view-header h1,
[data-view="dashboard"] > .view-header h1,
[data-view="gifts"] .view-header h1,
[data-view="studio"] > .view-header h1 {
  color: var(--chapter-wine);
  font-size: clamp(3.8rem, 7vw, 6.8rem);
  font-weight: 780;
  line-height: 0.82;
}

.view-header .primary-action,
.view-header > button,
.view-header #newInvitation {
  color: var(--paper-bright);
  background: var(--chapter-wine);
  border-color: var(--chapter-wine);
}

.view-header .primary-action:hover,
.view-header > button:hover,
.view-header #newInvitation:hover {
  color: var(--ink);
  background: var(--chapter-butter);
  border-color: var(--ink);
}

[data-view="dashboard"] .visual-grid {
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.5fr);
  gap: 0;
  margin-bottom: 34px;
  overflow: hidden;
  background: var(--paper-bright);
  border: 1px solid var(--ink);
  border-radius: 7px;
}

[data-view="dashboard"] .calendar-panel,
[data-view="dashboard"] .focus-panel {
  border: 0;
  border-radius: 0;
}

[data-view="dashboard"] .calendar-panel {
  padding: clamp(24px, 3.4vw, 48px);
  background: var(--paper-bright);
}

[data-view="dashboard"] .calendar-panel .panel-heading {
  border-color: rgba(39, 27, 24, 0.46);
}

[data-view="dashboard"] .calendar-panel .panel-heading h2,
[data-view="dashboard"] .focus-panel .panel-heading h2 {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(2.2rem, 3.4vw, 3.7rem);
  font-weight: 600;
}

[data-view="dashboard"] .calendar-feature {
  height: clamp(240px, 27vw, 430px);
  margin-top: 24px;
  border-radius: 6px 6px 0 0;
}

[data-view="dashboard"] .calendar-feature img {
  filter: saturate(0.72) contrast(1.08) sepia(0.1);
}

[data-view="dashboard"] .calendar-feature figcaption {
  padding: 20px 24px;
  background: rgba(24, 63, 55, 0.94);
}

[data-view="dashboard"] .calendar-feature strong {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.4rem;
  font-weight: 600;
}

[data-view="dashboard"] .calendar-day.has-event { background: #ead7d3; }

[data-view="dashboard"] .focus-panel {
  position: relative;
  min-height: 100%;
  padding: clamp(26px, 3vw, 44px);
  color: var(--paper-bright);
  background: var(--chapter-wine);
  border-left: 1px solid var(--ink);
}

[data-view="dashboard"] .focus-panel::before {
  position: absolute;
  top: 0;
  right: 18px;
  color: rgba(255, 250, 242, 0.06);
  content: "O";
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(9rem, 18vw, 17rem);
  font-style: italic;
  line-height: 0.75;
  pointer-events: none;
}

[data-view="dashboard"] .focus-panel::after {
  border-color: rgba(255, 250, 242, 0.32);
  box-shadow: 0 0 0 18px rgba(255, 250, 242, 0.04), 0 0 0 36px rgba(255, 250, 242, 0.025);
}

[data-view="dashboard"] .focus-panel h2,
[data-view="dashboard"] .focus-panel .event-countdown strong,
[data-view="dashboard"] .focus-panel .orbit-caption strong { color: var(--paper-bright); }

[data-view="dashboard"] .focus-panel .event-countdown strong {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(4.5rem, 8vw, 8rem);
  font-weight: 500;
}

[data-view="dashboard"] .focus-panel .event-countdown span,
[data-view="dashboard"] .focus-panel .orbit-caption p,
[data-view="dashboard"] .focus-panel .event-readiness span { color: rgba(255, 250, 242, 0.7); }

[data-view="dashboard"] .stats-grid {
  margin-bottom: 42px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
}

[data-view="dashboard"] .stat-card,
[data-view="dashboard"] .stat-card:nth-child(n),
[data-view="dashboard"] .stat-card.accent {
  min-height: 122px;
  padding: 26px 22px;
  color: var(--ink);
  border-color: rgba(39, 27, 24, 0.24);
}

[data-view="dashboard"] .stat-card strong {
  color: var(--chapter-wine);
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(2.2rem, 3.2vw, 3.7rem);
  font-weight: 600;
}

[data-view="dashboard"] .stat-card span { color: var(--muted); }

[data-view="dashboard"] .people-directory {
  padding: clamp(24px, 3vw, 42px);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
}

.people-strip-heading h2,
.directory-heading h2,
[data-view="gifts"] :is(.gift-discovery-heading, .journal-heading, .shortlist-heading) h2,
[data-view="gifts"] .gift-list-section > h2,
[data-view="reminders"] .reminder-layout .panel-heading h2 {
  color: var(--chapter-wine);
  font-family: "Bodoni Moda", Georgia, serif;
  font-weight: 600;
}

[data-view="dashboard"] .program-grid {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 7px;
}

[data-view="dashboard"] .program-panel {
  min-height: 270px;
  padding: 30px;
  border: 0;
  border-right: 1px solid var(--ink);
  border-radius: 0;
}

[data-view="dashboard"] .program-panel:last-child { border-right: 0; }
[data-view="dashboard"] .coverage-panel { background: var(--chapter-butter); }
[data-view="dashboard"] .spend-panel { background: var(--chapter-sage); }
[data-view="dashboard"] .risk-panel { background: var(--editorial-pink); }

[data-view="dashboard"] .program-panel-heading h2 {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.55rem;
  font-weight: 600;
}

[data-view="dashboard"] .event-room-drawer > summary { background: var(--editorial-green); }
[data-view="dashboard"] .event-room-drawer > summary::after { background: var(--chapter-butter); }

[data-view="gifts"] .gift-top-grid {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 7px;
}

[data-view="gifts"] .gift-top-grid .gift-assistant,
[data-view="gifts"] .gift-top-grid .recipient-profile-form,
[data-view="gifts"] .gift-top-grid .gift-readout {
  border: 0;
  border-radius: 0;
}

[data-view="gifts"] .gift-top-grid .gift-assistant { border-right: 1px solid var(--ink); }

[data-view="gifts"] .gift-top-grid .gift-assistant-heading {
  min-height: 330px;
  padding: clamp(28px, 4vw, 54px);
  color: var(--paper-bright);
  background-color: #3b251f;
  background-image: url("./assets/invitations/flash-still-life.jpg");
  background-position: center;
  background-size: cover;
  background-blend-mode: multiply;
}

[data-view="gifts"] .gift-top-grid .gift-assistant-heading h2 {
  max-width: 10ch;
  color: var(--paper-bright);
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(3rem, 5.8vw, 6rem);
  font-weight: 600;
  line-height: 0.88;
}

[data-view="gifts"] .gift-top-grid .gift-assistant-heading p {
  max-width: 34ch;
  color: rgba(255, 250, 242, 0.78);
  font-size: 0.76rem;
}

[data-view="gifts"] .gift-top-grid .gift-assistant-heading button {
  color: var(--paper-bright);
  border-color: rgba(255, 250, 242, 0.62);
}

[data-view="gifts"] .gift-top-grid .gift-chat-prompts button:hover,
[data-view="gifts"] .gift-top-grid .gift-chat-composer button {
  color: var(--paper-bright);
  background: var(--chapter-wine);
  border-color: var(--chapter-wine);
}

[data-view="gifts"] .gift-top-grid .gift-chat-composer,
[data-view="gifts"] .gift-top-grid .gift-readout { background: var(--editorial-green); }

[data-view="gifts"] .gift-discovery,
[data-view="gifts"] .gift-journal,
[data-view="gifts"] .gift-shortlist,
[data-view="gifts"] .gift-list-section {
  margin-top: 46px;
  padding-top: 34px;
}

[data-view="reminders"] .reminder-overview {
  color: var(--paper-bright);
  background: var(--chapter-wine);
  border-color: var(--chapter-wine);
}

[data-view="reminders"] .reminder-overview strong {
  font-family: "Bodoni Moda", Georgia, serif;
  font-weight: 600;
}

[data-view="reminders"] .reminder-layout {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 7px;
}

[data-view="reminders"] .reminder-layout .people-panel,
[data-view="reminders"] .reminder-layout .reminder-panel {
  padding: clamp(24px, 3vw, 42px);
  border: 0;
  border-radius: 0;
}

[data-view="reminders"] .reminder-layout .people-panel { border-right: 1px solid var(--ink); }
[data-view="reminders"] .reminder-layout .reminder-panel { background: var(--chapter-butter); }

[data-view="studio"] .template-rail,
[data-view="studio"] .canvas-stage { background: #d9c8c3; }

[data-view="studio"] .primary-action,
[data-view="studio"] #generateDraft,
[data-view="studio"] #studioGuestPreview {
  background: var(--chapter-wine);
  border-color: var(--chapter-wine);
}

@media (max-width: 980px) {
  [data-view="dashboard"] .visual-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
  }
}

@media (max-width: 700px) {
  body::before {
    inset: 0 0 auto;
    width: auto;
    height: 5px;
  }

  .brand strong { font-size: 1.4rem; }

  .product-view > .view-header,
  [data-view="studio"] > .view-header {
    min-height: 84px;
    margin-bottom: 22px;
  }

  .view-header h1,
  .product-view > .view-header h1,
  [data-view="dashboard"] > .view-header h1,
  [data-view="gifts"] .view-header h1,
  [data-view="studio"] > .view-header h1 {
    font-size: clamp(3rem, 15vw, 4.5rem);
  }

  [data-view="dashboard"] .visual-grid { grid-template-columns: 1fr; }

  [data-view="dashboard"] .focus-panel {
    min-height: 360px;
    border-top: 1px solid var(--ink);
    border-left: 0;
  }

  [data-view="dashboard"] .calendar-feature { height: 220px; }
  [data-view="dashboard"] .stats-grid { margin-bottom: 34px; }

  [data-view="dashboard"] .stat-card,
  [data-view="dashboard"] .stat-card:nth-child(n),
  [data-view="dashboard"] .stat-card.accent {
    min-height: 104px;
    border-color: rgba(39, 27, 24, 0.24);
  }

  [data-view="dashboard"] .program-grid {
    border-right: 0;
    border-radius: 7px 0 0 7px;
  }

  [data-view="dashboard"] .program-panel { border-right: 1px solid var(--ink); }

  [data-view="gifts"] .gift-top-grid { display: block; }

  [data-view="gifts"] .gift-top-grid .gift-assistant {
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }

  [data-view="gifts"] .gift-top-grid .gift-assistant-heading { min-height: 280px; }

  [data-view="gifts"] .gift-top-grid .gift-assistant-heading h2 {
    font-size: clamp(2.7rem, 12vw, 3.25rem);
  }

  .view-header h1,
  .product-view > .view-header h1,
  [data-view="dashboard"] > .view-header h1,
  [data-view="gifts"] .view-header h1,
  [data-view="studio"] > .view-header h1 {
    margin-right: auto;
    margin-left: 0;
    text-align: left;
  }

  [data-view="reminders"] .reminder-layout { display: block; }

  [data-view="reminders"] .reminder-layout .people-panel {
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }
}