/* Hallmark · app utility · tone: calm wishlist tool · anchor: teal · macrostructure: dashboard cards + focused edit form · pre-emit critique: P4 H4 E4 S4 R5 V4 · slop: pass */
@import url("../tokens.css");
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Inter:wght@400;500;600;700;800&display=swap");

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow-x: clip; }
body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  letter-spacing: 0;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.icon { width: 1em; height: 1em; display: inline-block; flex: 0 0 auto; }

.shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: var(--rule-thin) solid var(--color-rule);
  background: color-mix(in oklch, var(--color-paper) 88%, transparent);
  backdrop-filter: blur(18px);
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 72px; }
.brand { display: flex; align-items: center; gap: var(--space-sm); font-weight: 800; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--color-accent); color: var(--color-paper-strong); }
.nav { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; justify-content: flex-end; }
.avatar { width: 42px; height: 42px; border-radius: 999px; display: inline-grid; place-items: center; object-fit: cover; background: var(--color-accent-soft); color: var(--color-accent-strong); font-weight: 900; border: var(--rule-thin) solid var(--color-rule); flex: 0 0 auto; }
.avatar-sm { width: 30px; height: 30px; font-size: var(--text-sm); }
.avatar-lg { width: 86px; height: 86px; font-size: var(--text-2xl); }
.profile-chip { min-height: 42px; padding: 0 var(--space-sm); display: inline-flex; align-items: center; gap: var(--space-xs); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper-strong); font-weight: 800; }
.owner-line { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-muted); margin-bottom: var(--space-sm); }
.profile-preview { display: flex; align-items: center; gap: var(--space-md); }
.profile-list-row { padding: var(--space-sm); border: var(--rule-thin) solid color-mix(in oklch, var(--color-accent) 24%, var(--color-rule)); border-radius: var(--radius-md); background: color-mix(in oklch, var(--color-accent-soft) 24%, var(--color-paper-strong)); }
.collaboration-strip { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-lg); }
.collaboration-strip h2 { margin: 0 0 var(--space-xs); font-size: var(--text-lg); }
.collaborator-pill { display: inline-flex; align-items: center; gap: var(--space-xs); border: var(--rule-thin) solid var(--color-rule); border-radius: 999px; padding: var(--space-2xs) var(--space-sm) var(--space-2xs) var(--space-2xs); background: var(--color-paper-strong); font-weight: 800; font-size: var(--text-sm); }
.collaborator-row { padding: var(--space-xs) 0; border-bottom: var(--rule-thin) solid var(--color-rule); }

.hero { padding: var(--space-3xl) 0 var(--space-xl); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr); gap: var(--space-2xl); align-items: end; }
.hero h1, .page-title h1 { font-family: var(--font-display); font-size: var(--text-display); line-height: 0.98; letter-spacing: 0; margin: 0 0 var(--space-md); overflow-wrap: anywhere; min-width: 0; }
.hero p, .page-title p { color: var(--color-muted); font-size: var(--text-lg); line-height: 1.55; margin: 0; max-width: 62ch; }
.hero-panel { border: var(--rule-thin) solid var(--color-rule); background: var(--color-paper-strong); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: 0 18px 55px color-mix(in oklch, var(--color-ink) 10%, transparent); }
.hero-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--space-md); padding: var(--space-md) 0; border-bottom: var(--rule-thin) solid var(--color-rule); align-items: center; }
.hero-row:last-child { border-bottom: 0; }
.thumb { width: 64px; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); background: var(--color-paper-soft); }
.muted { color: var(--color-muted); }
.small { font-size: var(--text-sm); }
.tiny { font-size: var(--text-xs); }

.landing { overflow: clip; }
.landing-hero {
  padding: var(--space-3xl) 0 var(--space-2xl);
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: var(--space-2xl);
  align-items: center;
}
.landing-copy h1,
.landing-band h2,
.demo-steps h2,
.landing-cta h2 {
  font-family: var(--font-display);
  letter-spacing: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}
.landing-copy h1 {
  margin: 0 0 var(--space-md);
  max-width: 10ch;
  font-size: var(--text-display);
  line-height: .98;
}
.landing-copy > p:not(.landing-kicker) {
  margin: 0;
  max-width: 58ch;
  color: var(--color-muted);
  font-size: var(--text-lg);
  line-height: 1.58;
}
.landing-kicker {
  margin: 0 0 var(--space-md);
  color: var(--color-accent-strong);
  font-weight: 900;
}
.landing-actions,
.landing-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.landing-proof {
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 850;
}
.landing-proof span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}
.landing-proof span::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: var(--color-accent);
}
.landing-showcase {
  position: relative;
  min-height: 520px;
}
.desktop-preview,
.mobile-preview,
.landing-band,
.demo-list-card {
  border: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 58px color-mix(in oklch, var(--color-ink) 10%, transparent);
}
.desktop-preview {
  padding: var(--space-lg);
  width: min(100%, 680px);
}
.preview-head,
.mobile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: var(--rule-thin) solid var(--color-rule);
}
.preview-head span,
.mobile-card span,
.preview-wish span {
  display: block;
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-2xs);
}
.preview-grid {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.preview-wish {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-sm);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper);
}
.preview-wish img,
.mobile-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--color-paper-soft);
}
.preview-wish strong,
.mobile-card strong {
  line-height: 1.18;
  overflow-wrap: anywhere;
}
.preview-wish.is-reserved img {
  opacity: .58;
  filter: saturate(.75);
}
.mobile-preview {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(260px, 42%);
  padding: var(--space-md);
  background: color-mix(in oklch, var(--color-paper-strong) 94%, var(--color-accent-soft));
}
.mobile-card {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.landing-band {
  padding: var(--space-xl);
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: var(--space-xl);
  align-items: start;
  margin-bottom: var(--space-2xl);
}
.landing-band h2,
.demo-steps h2,
.landing-cta h2 {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-2xl);
  line-height: 1.08;
}
.landing-band p,
.feature-row p,
.demo-steps span,
.landing-cta p {
  line-height: 1.55;
}
.feature-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}
.feature-row article {
  min-width: 0;
  padding: var(--space-md);
  border-left: 3px solid var(--color-accent);
  background: var(--color-paper);
}
.feature-row h3 {
  margin: var(--space-sm) 0 var(--space-xs);
  font-size: var(--text-lg);
  line-height: 1.16;
}
.feature-row p {
  margin: 0;
  color: var(--color-muted);
}
.feature-icon {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}
.split-demo {
  padding: var(--space-xl) 0 var(--space-3xl);
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: var(--space-2xl);
  align-items: center;
}
.demo-list-card {
  margin-top: var(--space-md);
  padding: var(--space-xl);
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--color-accent-soft) 46%, var(--color-paper-strong)), var(--color-paper-strong));
}
.demo-list-card h3 {
  margin: var(--space-md) 0 var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1;
}
.demo-list-card p {
  margin: 0 0 var(--space-lg);
  color: var(--color-muted);
}
.demo-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}
.demo-items span {
  min-width: 0;
  padding: var(--space-sm);
  border: var(--rule-thin) solid color-mix(in oklch, var(--color-accent) 24%, var(--color-rule));
  border-radius: var(--radius-md);
  background: var(--color-paper-strong);
  font-weight: 850;
  overflow-wrap: anywhere;
}
.demo-items .is-done {
  color: var(--color-muted);
  background: var(--color-paper-soft);
}
.demo-steps ol {
  display: grid;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.demo-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
}
.demo-steps li::before {
  content: counter(step);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 900;
}
.demo-steps strong,
.demo-steps span {
  display: block;
  grid-column: 2;
}
.demo-steps span {
  color: var(--color-muted);
  margin-top: var(--space-2xs);
}
.landing-cta {
  padding: var(--space-3xl) 0;
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--color-accent-soft) 72%, var(--color-paper)), var(--color-paper-soft));
  border-top: var(--rule-thin) solid var(--color-rule);
}
.landing-cta .shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-lg);
  align-items: center;
}
.landing-cta p {
  margin: 0;
  color: var(--color-muted);
  max-width: 34ch;
}
.landing-cta .btn {
  justify-self: start;
}

.btn {
  border: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper-strong);
  color: var(--color-ink);
  border-radius: var(--radius-md);
  min-height: 42px;
  padding: 0 var(--space-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-weight: 750;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); background: var(--color-paper-soft); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn-primary:hover { background: var(--color-accent-strong); border-color: var(--color-accent-strong); }
.btn-danger { color: var(--color-danger); }
.btn-ghost { background: transparent; }
.btn-full { width: 100%; }

.grid { display: grid; gap: var(--space-lg); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard { padding: var(--space-xl) 0 var(--space-3xl); }
.panel, .card {
  border: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper-strong);
  border-radius: var(--radius-lg);
}
.panel { padding: var(--space-lg); }
.card { overflow: clip; }
.card-body { padding: var(--space-lg); }
.list-card {
  background: linear-gradient(180deg, color-mix(in oklch, var(--color-accent-soft) 28%, var(--color-paper-strong)), var(--color-paper-strong) 46%);
  border-color: color-mix(in oklch, var(--color-accent) 28%, var(--color-rule));
}
.list-card.is-archived,
.profile-list-row.is-archived {
  opacity: .62;
  filter: grayscale(.85) saturate(.35);
  border-style: dashed;
  background: color-mix(in oklch, var(--color-paper-soft) 72%, var(--color-paper-strong));
}
.list-card.is-archived .list-card-cover,
.profile-list-row.is-archived {
  filter: grayscale(1) saturate(.25);
}
.archived-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
}
.archived-list-row .profile-list-row span:first-child {
  display: grid;
  gap: var(--space-2xs);
}
.list-card-cover {
  display: block;
  position: relative;
  height: 150px;
  overflow: clip;
  background: var(--color-accent-soft);
}
.list-card-cover .list-cover { height: 100%; min-height: 150px; }
.list-card-cover::after {
  content: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in oklch, var(--color-accent) 18%, transparent), color-mix(in oklch, var(--color-paper-strong) 16%, transparent));
  mix-blend-mode: multiply;
  pointer-events: none;
}
.list-card h2 { margin: 0 0 var(--space-xs); font-size: var(--text-xl); line-height: 1.15; overflow-wrap: anywhere; }
.card-actions { margin-top: auto; }
.section-title h2 { margin: 0; font-size: var(--text-xl); }
.followed-section { margin-top: var(--space-2xl); }
.friend-row { padding: var(--space-sm) 0; border-top: var(--rule-thin) solid var(--color-rule); }
.friend-link { color: inherit; text-decoration: none; }
.friend-link:hover strong { text-decoration: underline; }
.public-profile-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; }
.cover { width: 100%; aspect-ratio: 16 / 8.5; object-fit: cover; background: var(--color-paper-soft); }
.wishlist-head { background: linear-gradient(180deg, var(--color-paper-strong), color-mix(in oklch, var(--color-paper-strong) 82%, var(--color-accent-soft))); }
.list-cover {
  position: relative;
  height: clamp(150px, 18vw, 230px);
  overflow: clip;
  background:
    radial-gradient(circle at 14% 12%, color-mix(in oklch, var(--color-accent) 42%, transparent), transparent 30%),
    linear-gradient(135deg, color-mix(in oklch, var(--color-accent-soft) 72%, var(--color-paper-soft)), var(--color-paper-soft));
  isolation: isolate;
}
.list-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--color-accent) 14%, transparent) 0%, color-mix(in oklch, var(--color-paper-strong) 78%, transparent) 100%),
    linear-gradient(90deg, color-mix(in oklch, var(--color-accent-soft) 68%, transparent), transparent 44%, color-mix(in oklch, var(--color-accent) 18%, transparent));
  pointer-events: none;
}
.list-cover-img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.86) contrast(.95) brightness(1.02); }
.generated-cover {
  position: absolute;
  inset: 0;
  filter: saturate(.78) contrast(.9) brightness(1.03);
}
.generated-cover-grid {
  position: absolute;
  inset: -18px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 12px;
  opacity: .82;
  transform: rotate(-1.2deg) scale(1.04);
}
.generated-cover-tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: clip;
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--color-accent-soft) 36%, var(--color-paper-soft));
  box-shadow: 0 18px 45px color-mix(in oklch, var(--color-ink) 12%, transparent);
}
.generated-cover-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in oklch, var(--color-accent) 28%, transparent), color-mix(in oklch, var(--color-accent-soft) 34%, transparent));
  mix-blend-mode: color;
  opacity: .72;
}
.generated-cover-tile img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.12); }
.generated-cover-tile:nth-child(1) { grid-column: 1 / 5; grid-row: 1 / 5; }
.generated-cover-tile:nth-child(2) { grid-column: 5 / 8; grid-row: 1 / 3; }
.generated-cover-tile:nth-child(3) { grid-column: 8 / 11; grid-row: 1 / 4; }
.generated-cover-tile:nth-child(4) { grid-column: 5 / 8; grid-row: 3 / 5; }
.generated-cover-tile:nth-child(5) { grid-column: 11 / 13; grid-row: 1 / 3; }
.generated-cover-tile:nth-child(6) { grid-column: 8 / 11; grid-row: 4 / 5; }
.generated-cover-tile:nth-child(7) { grid-column: 11 / 13; grid-row: 3 / 5; }
.generated-cover-tile:nth-child(n+8) { display: none; }
.generated-cover-sheen {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 18% 22%, color-mix(in oklch, var(--color-paper-strong) 66%, transparent), transparent 31%),
    radial-gradient(circle at 82% 28%, color-mix(in oklch, var(--color-accent) 34%, transparent), transparent 28%),
    linear-gradient(115deg, color-mix(in oklch, var(--color-accent) 28%, transparent), color-mix(in oklch, var(--color-paper-strong) 62%, transparent));
  backdrop-filter: blur(1.5px);
  mix-blend-mode: soft-light;
}
.generated-cover-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: color-mix(in oklch, var(--color-accent) 28%, transparent);
  font-family: var(--font-display);
  font-size: 8rem;
  font-weight: 700;
}
.wish-count-badge {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 34px;
  padding: 0 var(--space-sm);
  border: var(--rule-thin) solid color-mix(in oklch, var(--color-accent) 28%, var(--color-rule));
  border-radius: 999px;
  background: color-mix(in oklch, var(--color-paper-strong) 88%, transparent);
  color: var(--color-accent-strong);
  box-shadow: 0 12px 32px color-mix(in oklch, var(--color-ink) 18%, transparent);
  backdrop-filter: blur(14px);
  font-size: var(--text-sm);
  font-weight: 900;
}
.list-meta > span { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.meta-icon {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-size: var(--text-xs);
  font-weight: 900;
}
.stack { display: grid; gap: var(--space-md); }
.row { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }

.form-grid { display: grid; gap: var(--space-md); }
.field { display: grid; gap: var(--space-xs); }
.field label { font-weight: 750; font-size: var(--text-sm); }
.field input, .field textarea, .field select {
  width: 100%;
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper-strong);
  color: var(--color-ink);
  min-height: 44px;
  padding: var(--space-sm) var(--space-md);
}
.field textarea { min-height: 94px; resize: vertical; }
.inline-field { display: flex; align-items: center; gap: var(--space-sm); }
.inline-field label { margin: 0; }
.inline-field select { min-width: 140px; }
.price-row { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: var(--space-xs); }
.price-row select { min-width: 0; }
.check { display: flex; gap: var(--space-sm); align-items: flex-start; color: var(--color-muted); }
.check input { margin-top: .25rem; width: 18px; height: 18px; accent-color: var(--color-accent); }
details.settings { border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); padding: var(--space-md); }
details.settings summary { cursor: pointer; font-weight: 800; }
.settings-panel { display: grid; gap: var(--space-sm); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); padding: var(--space-md); background: var(--color-paper-soft); }
.cover-preview { padding: 0; overflow: clip; }
.cover-preview figcaption { padding: var(--space-sm) var(--space-md); }
.danger-zone { border-color: color-mix(in oklch, var(--color-danger) 35%, var(--color-rule)); }

.wish-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.wish-list[data-sort="custom"][data-owner="1"][data-reorder="1"] {
  padding: var(--space-sm);
  margin: calc(var(--space-sm) * -1);
  border: var(--rule-thin) dashed color-mix(in oklch, var(--color-accent) 48%, var(--color-rule));
  border-radius: var(--radius-lg);
  background: color-mix(in oklch, var(--color-accent-soft) 18%, transparent);
}
.wish-card {
  position: relative;
  display: grid;
  gap: var(--space-md);
  align-content: start;
  border: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper-strong);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: clip;
  min-width: 0;
}
.wish-card[data-priority="1"] { border-color: var(--color-gold); background: color-mix(in oklch, var(--color-gold-soft) 45%, var(--color-paper-strong)); }
.wish-card.is-dragging {
  opacity: .72;
  transform: rotate(.4deg) scale(.985);
  box-shadow: 0 20px 54px color-mix(in oklch, var(--color-ink) 18%, transparent);
}
.wish-card.is-dragging-active { opacity: .34; }
.wish-card.is-drop-near {
  outline: 2px solid color-mix(in oklch, var(--color-accent) 58%, transparent);
  outline-offset: 4px;
}
.add-wish-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  min-height: 100%;
  aspect-ratio: 1 / 1;
  place-items: center;
  align-content: center;
  padding: var(--space-lg);
  border-style: dashed;
  border-color: color-mix(in oklch, var(--color-accent) 46%, var(--color-rule));
  background: color-mix(in oklch, var(--color-accent-soft) 34%, var(--color-paper-strong));
  color: var(--color-accent-strong);
  cursor: pointer;
  font-weight: 900;
  text-align: center;
}
.add-wish-card:hover { background: color-mix(in oklch, var(--color-accent-soft) 52%, var(--color-paper-strong)); }
.add-wish-plus {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-size: 1.8rem;
  line-height: 1;
}
.add-wish-plus .icon { width: 30px; height: 30px; }
.wish-card-content { min-width: 0; padding: 0 var(--space-md); }
.wish-card > .row:last-child { padding: 0 var(--space-md) var(--space-md); }
.wish-image-link,
.detail-image-shell {
  position: relative;
  display: block;
  min-width: 0;
}
.wish-img,
.detail-image {
  position: relative;
  display: block;
  overflow: clip;
  background: var(--color-paper-soft);
  isolation: isolate;
}
.wish-img { width: 100%; aspect-ratio: 1 / 1; border-radius: 0; }
.wish-img img,
.detail-image img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.wish-card.is-reserved .wish-img img,
.wish-card.is-purchased .wish-img img,
.detail-image-shell.is-reserved .detail-image img,
.detail-image-shell.is-purchased .detail-image img {
  opacity: .52;
  filter: saturate(.7) contrast(.95);
}
.wish-status-overlay {
  position: absolute;
  z-index: 3;
  left: var(--space-sm);
  top: var(--space-sm);
  border: var(--rule-thin) solid color-mix(in oklch, var(--color-paper-strong) 72%, transparent);
  box-shadow: 0 8px 24px color-mix(in oklch, var(--color-ink) 16%, transparent);
}
.wish-card-actions {
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
}
.wish-action-menu {
  position: relative;
  margin-left: auto;
}
.wish-action-menu summary {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper-strong);
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}
.wish-action-menu summary::-webkit-details-marker { display: none; }
.wish-action-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--space-xs));
  z-index: 5;
  display: grid;
  gap: var(--space-xs);
  min-width: 176px;
  padding: var(--space-xs);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper-strong);
  box-shadow: 0 18px 46px color-mix(in oklch, var(--color-ink) 16%, transparent);
}
.wish-action-popover .btn {
  width: 100%;
  justify-content: flex-start;
}
.image-fit-fit img { object-fit: contain; }
.image-fit-soft::before {
  content: "";
  position: absolute;
  inset: -16px;
  z-index: 0;
  background-image: var(--wish-image);
  background-size: cover;
  background-position: center;
  filter: blur(18px) saturate(.9) brightness(1.02);
  opacity: .48;
  transform: scale(1.08);
}
.image-fit-soft img { object-fit: contain; }
.wish-title { margin: 0 0 var(--space-xs); font-size: var(--text-lg); line-height: 1.18; overflow-wrap: anywhere; }
.wish-options { display: grid; gap: var(--space-xs); margin: var(--space-sm) 0 0; }
.wish-options div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); border-top: var(--rule-thin) solid var(--color-rule); padding-top: var(--space-xs); }
.wish-options dt { margin: 0; color: var(--color-muted); font-size: var(--text-xs); font-weight: 800; }
.wish-options dd { margin: 0; color: var(--color-ink); font-size: var(--text-sm); font-weight: 800; text-align: right; overflow-wrap: anywhere; }
.detail-options { max-width: 520px; }
.detail-options div { justify-content: flex-start; border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); background: var(--color-paper-strong); }
.wish-note { border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-lg); padding: var(--space-md); background: var(--color-paper-soft); }
.wish-note p { margin: var(--space-xs) 0 0; color: var(--color-muted); line-height: 1.5; }
.drag-handle {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 4;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--color-paper-strong) 90%, transparent);
  color: var(--color-muted);
  cursor: grab;
  font-weight: 800;
  box-shadow: 0 8px 24px color-mix(in oklch, var(--color-ink) 12%, transparent);
}
.drag-handle .icon { width: 22px; height: 22px; }
.drag-handle:active { cursor: grabbing; }
.drag-help { color: var(--color-muted); font-size: var(--text-sm); font-weight: 750; }
.sort-bar { margin: var(--space-xl) 0 var(--space-md); }
.sort-control { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-muted); font-weight: 800; }
.sort-control select { border: 0; border-bottom: var(--rule-thin) solid var(--color-rule); background: transparent; color: var(--color-ink); font-weight: 900; padding: var(--space-xs) var(--space-sm); cursor: pointer; }
.order-toggle.is-active { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.back-link { display: inline-flex; width: fit-content; align-items: center; min-height: 40px; padding: 0 var(--space-md); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper-strong); font-weight: 800; }
.favicon { width: 18px; height: 18px; border-radius: var(--radius-xs); background: var(--color-paper-soft); display: inline-block; }
.badge { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 28px; padding: 0 var(--space-sm); border-radius: 999px; background: var(--color-paper-soft); color: var(--color-muted); font-size: var(--text-xs); font-weight: 800; }
.badge-accent { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.badge-rose { background: var(--color-rose-soft); color: var(--color-rose); }
.badge-gold { background: var(--color-gold-soft); color: color-mix(in oklch, var(--color-gold) 45%, var(--color-ink)); }
.scheme-rose { --color-accent: var(--color-rose); --color-accent-strong: color-mix(in oklch, var(--color-rose) 72%, var(--color-ink)); --color-accent-soft: var(--color-rose-soft); }
.scheme-gold { --color-accent: var(--color-gold); --color-accent-strong: color-mix(in oklch, var(--color-gold) 62%, var(--color-ink)); --color-accent-soft: var(--color-gold-soft); }
.scheme-blue { --color-accent: var(--color-blue); --color-accent-strong: color-mix(in oklch, var(--color-blue) 72%, var(--color-ink)); --color-accent-soft: var(--color-blue-soft); }

.modal { border: 0; border-radius: var(--radius-lg); padding: 0; width: min(720px, calc(100% - 24px)); background: var(--color-paper-strong); color: var(--color-ink); box-shadow: 0 30px 90px color-mix(in oklch, var(--color-ink) 28%, transparent); }
.modal::backdrop { background: color-mix(in oklch, var(--color-ink) 46%, transparent); }
.modal-head, .modal-body { padding: var(--space-lg); }
.modal-head { border-bottom: var(--rule-thin) solid var(--color-rule); display: flex; justify-content: space-between; gap: var(--space-md); align-items: center; }
.import-summary { border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper-soft); padding: var(--space-md); }
.import-summary h2 { margin: 0 0 var(--space-xs); font-size: var(--text-lg); }
.import-summary p { margin: 0; }
.import-summary ul { margin: var(--space-sm) 0 0; padding-left: 1.1rem; }
.import-progress {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  border: var(--rule-thin) solid color-mix(in oklch, var(--color-accent) 32%, var(--color-rule));
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--color-accent-soft) 42%, var(--color-paper-strong));
  padding: var(--space-md);
}
.import-progress p { margin: var(--space-2xs) 0 0; }
.import-spinner {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 4px solid color-mix(in oklch, var(--color-accent) 18%, var(--color-paper-strong));
  border-top-color: var(--color-accent);
  border-radius: 999px;
  animation: import-spin .85s linear infinite;
}
@keyframes import-spin {
  to { transform: rotate(360deg); }
}

.tabs { display: flex; gap: var(--space-xs); background: var(--color-paper-soft); border-radius: var(--radius-md); padding: var(--space-2xs); }
.tab { border: 0; background: transparent; border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-sm); cursor: pointer; font-weight: 800; color: var(--color-muted); }
.tab[aria-selected="true"] { background: var(--color-paper-strong); color: var(--color-ink); }
.hidden { display: none !important; }
.image-preview {
  position: relative;
  margin: 0;
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-lg);
  overflow: clip;
  background: var(--color-paper-soft);
  isolation: isolate;
}
.image-preview img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  background: transparent;
}
.image-preview.image-fit-fit img,
.image-preview.image-fit-soft img { object-fit: contain; }
.image-preview figcaption { position: relative; z-index: 2; padding: var(--space-sm) var(--space-md); color: var(--color-muted); font-size: var(--text-sm); background: var(--color-paper-strong); border-top: var(--rule-thin) solid var(--color-rule); }
.image-fit-toggle {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 3;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: var(--rule-thin) solid color-mix(in oklch, var(--color-rule) 75%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--color-paper-strong) 88%, transparent);
  color: var(--color-ink);
  box-shadow: 0 10px 24px color-mix(in oklch, var(--color-ink) 18%, transparent);
  backdrop-filter: blur(12px);
  cursor: pointer;
  font-weight: 900;
}
.image-fit-toggle:hover { background: var(--color-paper-strong); }
.image-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); }
.image-choice { border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); padding: var(--space-2xs); background: var(--color-paper-strong); cursor: pointer; min-height: 86px; }
.image-choice img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); }
.image-choice[aria-pressed="true"] { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-soft); }

.detail { padding: var(--space-xl) 0 var(--space-3xl); display: grid; grid-template-columns: minmax(0, .95fr) minmax(320px, 1.05fr); gap: var(--space-2xl); align-items: start; }
.detail-image { width: 100%; aspect-ratio: 1; border-radius: var(--radius-lg); border: var(--rule-thin) solid var(--color-rule); }
.site-footer {
  border-top: var(--rule-thin) solid color-mix(in oklch, var(--color-accent-strong) 84%, var(--color-ink));
  background: var(--color-accent-strong);
  color: var(--color-accent-ink);
  padding: var(--space-2xl) 0 var(--space-xl);
}
.site-footer .brand-mark {
  background: var(--color-accent-ink);
  color: var(--color-accent-strong);
}
.site-footer .btn {
  border-color: color-mix(in oklch, var(--color-accent-ink) 34%, transparent);
  background: transparent;
  color: var(--color-accent-ink);
}
.site-footer .btn:hover {
  background: color-mix(in oklch, var(--color-accent-ink) 10%, transparent);
}
.site-footer .btn-primary {
  border-color: var(--color-accent-ink);
  background: var(--color-accent-ink);
  color: var(--color-accent-strong);
}
.site-footer .btn-primary:hover {
  border-color: var(--color-paper-soft);
  background: var(--color-paper-soft);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, .85fr) minmax(280px, 1fr);
  gap: var(--space-2xl);
  align-items: start;
}
.footer-brand,
.footer-search {
  min-width: 0;
}
.footer-brand p,
.footer-search p {
  margin: var(--space-md) 0 0;
  color: color-mix(in oklch, var(--color-accent-ink) 78%, transparent);
  line-height: 1.6;
  max-width: 52ch;
}
.footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}
.footer-links h2,
.footer-search h2 {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-sm);
  line-height: 1.2;
}
.footer-links a {
  display: block;
  width: fit-content;
  min-height: 32px;
  color: color-mix(in oklch, var(--color-accent-ink) 82%, transparent);
  font-weight: 750;
}
.footer-links a:hover {
  color: var(--color-accent-ink);
}
.footer-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-sm);
  align-items: end;
  margin-top: var(--space-md);
}
.footer-search-form .field input {
  border-color: color-mix(in oklch, var(--color-accent-ink) 24%, transparent);
  background: var(--color-accent-ink);
  color: var(--color-ink);
}
.footer-search-form .field input::placeholder {
  color: var(--color-muted);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: var(--rule-thin) solid color-mix(in oklch, var(--color-accent-ink) 22%, transparent);
  color: color-mix(in oklch, var(--color-accent-ink) 74%, transparent);
  font-size: var(--text-sm);
}
.profile-search { border-top: var(--rule-thin) solid var(--color-rule); padding: var(--space-xl) 0; }
.print-only { display: none; }

@media (max-width: 820px) {
  .topbar-inner { align-items: flex-start; padding: var(--space-sm) 0; flex-direction: column; }
  .nav { justify-content: flex-start; }
  .hero, .detail, .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-top: var(--space-xl); }
  .landing-hero,
  .landing-band,
  .split-demo,
  .landing-cta .shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .landing-hero { padding-top: var(--space-xl); }
  .landing-copy h1 { max-width: 12ch; }
  .landing-showcase { min-height: auto; display: grid; gap: var(--space-md); }
  .desktop-preview { width: 100%; }
  .mobile-preview { position: static; width: 100%; }
  .mobile-card { grid-template-columns: 96px minmax(0, 1fr); align-items: center; }
  .mobile-card .btn { grid-column: 1 / -1; }
  .feature-row { grid-template-columns: minmax(0, 1fr); }
  .footer-grid,
  .footer-links {
    grid-template-columns: minmax(0, 1fr);
  }
  .list-cover { height: 150px; }
  .generated-cover-grid { gap: 8px; inset: -14px; }
  .wish-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .image-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn { min-height: 40px; padding-inline: var(--space-sm); }
}
@media (max-width: 420px) {
  .shell { width: min(100% - 20px, 1180px); }
  .hero h1, .page-title h1, .landing-copy h1 { font-size: var(--text-display-s); }
  .preview-head,
  .mobile-top,
  .landing-proof {
    align-items: flex-start;
  }
  .preview-wish {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .preview-wish .btn,
  .preview-wish .badge {
    grid-column: 1 / -1;
    width: 100%;
  }
  .landing-band,
  .demo-list-card {
    padding: var(--space-lg);
  }
  .footer-search-form { grid-template-columns: minmax(0, 1fr); }
  .footer-search-form .btn { width: 100%; }
  .demo-items { grid-template-columns: minmax(0, 1fr); }
  .tabs { flex-wrap: wrap; }
  .wish-list { grid-template-columns: minmax(0, 1fr); }
  .image-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print {
  .topbar, .no-print, .modal, .profile-search, .site-footer { display: none !important; }
  body { background: var(--color-paper-strong); color: var(--color-ink); }
  .shell { width: 100%; }
  .print-only { display: block; }
  .wish-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .wish-card { break-inside: avoid; grid-template-columns: 90px minmax(0, 1fr) 112px; align-items: center; border-color: var(--color-rule); padding: var(--space-md); overflow: visible; }
  .wish-card-content { padding: 0; }
  .wish-img { width: 90px; aspect-ratio: 1; border-radius: var(--radius-md); }
  .wish-options { margin-top: var(--space-xs); }
  .wish-options div { padding-top: var(--space-2xs); }
  .wish-card > .row:last-child { justify-content: flex-end; padding: 0; }
  .qr { width: 104px; height: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}