:root {
  --ink: #352b38;
  --muted: #827681;
  --cream: #fffaf5;
  --paper: #fffdfb;
  --blush: #f8dfe0;
  --coral: #db777b;
  --lilac: #e9e0f2;
  --blue: #dceaf0;
  --yellow: #f8edc9;
  --line: #eee4df;
  --shadow: 0 18px 45px rgba(74, 49, 54, 0.08);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

.page-shell { max-width: 1240px; margin: 0 auto; padding: 0 44px 34px; }
.site-header { height: 86px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 15px; font-weight: 700; letter-spacing: -.03em; text-decoration: none; }
.brand-mark { display: grid; width: 27px; height: 27px; place-items: center; color: #fff; background: var(--coral); border-radius: 50% 50% 50% 10px; font-size: 15px; transform: rotate(-12deg); }
.header-note { color: var(--muted); font-size: 11px; letter-spacing: .11em; text-transform: uppercase; }
.header-note span { color: var(--coral); margin-left: 5px; }

.hero { min-height: 326px; display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: center; padding: 38px 56px 40px; overflow: hidden; background: #fae7e2; border-radius: 28px; position: relative; }
.hero-copy { max-width: 570px; position: relative; z-index: 1; }
.eyebrow { margin: 0 0 12px; color: var(--coral); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: 'Playfair Display', serif; font-weight: 700; }
h1 { margin-bottom: 17px; font-size: clamp(43px, 5vw, 67px); letter-spacing: -.055em; line-height: .98; }
h1 em { color: var(--coral); font-style: normal; }
.hero-description { max-width: 390px; margin-bottom: 0; color: #816d70; font-size: 15px; line-height: 1.65; }
.hero-art { height: 100%; min-height: 230px; position: relative; }
.sun { position: absolute; top: 20px; right: 32px; width: 193px; height: 193px; background: #fbd59e; border-radius: 50%; opacity: .88; }
.sun::after { content: ''; position: absolute; inset: 26px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%; }
.sparkle { position: absolute; color: #fff9d4; font-size: 25px; }
.sparkle-one { top: 11px; right: 240px; }
.sparkle-two { top: 188px; right: 4px; font-size: 17px; }
.art-flower { position: absolute; width: 75px; height: 75px; bottom: 7px; }
.art-flower i { position: absolute; display: block; width: 35px; height: 43px; background: #d98286; border-radius: 70% 10% 70% 10%; opacity: .95; }
.art-flower i:nth-child(1) { top: 0; left: 19px; transform: rotate(30deg); }
.art-flower i:nth-child(2) { top: 13px; left: 40px; transform: rotate(115deg); }
.art-flower i:nth-child(3) { top: 34px; left: 29px; transform: rotate(200deg); }
.art-flower i:nth-child(4) { top: 26px; left: 4px; transform: rotate(285deg); }
.art-flower b { position: absolute; z-index: 1; top: 26px; left: 28px; width: 19px; height: 19px; background: #f9cf77; border-radius: 50%; }
.flower-left { left: 6px; transform: rotate(-18deg) scale(.82); }
.flower-right { right: 48px; bottom: -3px; transform: rotate(14deg) scale(1.04); }
.flower-right i { background: #b6cbd2; }
.flower-right b { background: #f1b3a8; }

.stats-row { display: grid; grid-template-columns: repeat(3, 1fr) 1.15fr; gap: 13px; margin: 18px 0 46px; }
.stat-card { min-height: 91px; display: flex; flex-direction: column; justify-content: center; padding: 18px 23px; border-radius: 16px; }
.stat-card strong { margin-bottom: 3px; font-family: 'Playfair Display', serif; font-size: 31px; line-height: 1; }
.stat-card span { color: #796c6d; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.stat-pink { background: var(--blush); }.stat-yellow { background: var(--yellow); }.stat-blue { background: var(--blue); }
.little-message { display: flex; align-items: center; justify-content: center; gap: 12px; color: #9b7a7d; font-family: 'Playfair Display', serif; font-size: 15px; font-style: italic; line-height: 1.3; }
.message-heart { display: grid; width: 34px; height: 34px; place-items: center; color: var(--coral); background: #f6d4d0; border-radius: 50%; font-family: sans-serif; font-size: 18px; font-style: normal; }

.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 355px; gap: 56px; align-items: start; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 27px; }
.section-heading .eyebrow { margin-bottom: 7px; }
h2 { margin-bottom: 0; font-size: 34px; letter-spacing: -.04em; line-height: 1; }
.filters { display: flex; gap: 5px; padding: 4px; background: #f5eeea; border-radius: 9px; }
.filter-button { border: 0; padding: 8px 12px; color: var(--muted); background: transparent; border-radius: 6px; font-size: 11px; transition: .2s ease; }
.filter-button.active { color: var(--ink); background: #fff; box-shadow: 0 2px 6px rgba(74, 49, 54, .07); font-weight: 700; }
.wishlist-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.wish-card { overflow: hidden; background: var(--paper); border: 1px solid #f1e7e2; border-radius: 15px; box-shadow: 0 7px 20px rgba(73, 48, 53, .04); transition: transform .2s ease, box-shadow .2s ease; }
.wish-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card-image-wrap { height: 185px; overflow: hidden; background: #f5efeb; position: relative; }
.card-image { width: 100%; height: 100%; display: block; object-fit: cover; }
.card-image.placeholder { object-fit: contain; padding: 52px; opacity: .48; }
.owner-badge { position: absolute; top: 11px; left: 11px; padding: 6px 9px; color: #665357; background: rgba(255, 253, 251, .9); border-radius: 20px; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.card-delete { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border: 0; color: #8e7777; background: rgba(255, 253, 251, .84); border-radius: 50%; font-size: 16px; line-height: 1; opacity: 0; transition: opacity .2s; }
.wish-card:hover .card-delete, .card-delete:focus { opacity: 1; }
.card-content { padding: 15px 16px 16px; }
.card-content h3 { overflow: hidden; margin-bottom: 7px; font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-price { color: var(--coral); font-size: 13px; font-weight: 700; }
.card-link { color: var(--muted); font-size: 11px; text-decoration: none; }.card-link:hover { color: var(--coral); text-decoration: underline; }
.card-notes { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.empty-state { padding: 54px 20px; text-align: center; background: #fffdfb; border: 1px dashed #eadbd4; border-radius: 15px; }
.empty-icon { display: block; margin-bottom: 12px; color: #edb1a8; font-size: 28px; }.empty-state h3 { margin-bottom: 6px; font-size: 21px; }.empty-state p { margin: 0; color: var(--muted); font-size: 13px; }

.add-panel { padding: 27px 27px 25px; background: #e7e0f1; border-radius: 20px; box-shadow: var(--shadow); }
.panel-topline { display: flex; align-items: center; gap: 7px; margin-bottom: 17px; color: #a57896; font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }.tiny-flower { font-size: 17px; }
.add-panel h2 { margin-bottom: 11px; font-size: 31px; line-height: 1.05; }.panel-intro { margin-bottom: 23px; color: #7b7085; font-size: 12px; line-height: 1.55; }
label { display: block; margin: 16px 0 7px; color: #665971; font-size: 11px; font-weight: 700; letter-spacing: .03em; } label small { color: #9e90a7; font-size: 10px; font-weight: 400; }
input, select, textarea { width: 100%; border: 1px solid rgba(141, 119, 154, .16); outline: 0; color: var(--ink); background: rgba(255, 255, 255, .71); border-radius: 8px; transition: border .2s, box-shadow .2s; }
input, select { height: 39px; padding: 0 12px; font-size: 12px; } textarea { min-height: 62px; padding: 10px 12px; resize: vertical; font-size: 12px; }
input::placeholder, textarea::placeholder { color: #b1a7b3; } input:focus, select:focus, textarea:focus { border-color: #af8eb0; box-shadow: 0 0 0 3px rgba(174, 142, 176, .15); }
.input-with-action { display: flex; gap: 6px; }.input-with-action input { min-width: 0; }.inline-action { width: 40px; flex: none; border: 0; color: #fff; background: #a986a7; border-radius: 8px; font-size: 22px; line-height: 1; transition: background .2s; }.inline-action:hover { background: #8f6e90; }
.field-hint { min-height: 15px; margin: 6px 0 0; color: #96889d; font-size: 10px; }.field-hint.loading { color: #a36f89; }.field-hint.error { color: #b45d66; }
.preview-box { display: flex; align-items: center; gap: 9px; padding: 7px; margin-top: 10px; background: rgba(255,255,255,.54); border-radius: 8px; }.preview-box img { width: 38px; height: 38px; object-fit: cover; border-radius: 5px; }.preview-box div { min-width: 0; }.preview-box span { display: block; margin-bottom: 3px; color: #a17e9b; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }.preview-box strong { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.form-split { display: grid; grid-template-columns: 1.2fr .8fr; gap: 10px; }.form-split label { margin-top: 16px; }
.submit-button { width: 100%; min-height: 43px; margin-top: 21px; border: 0; color: #fff; background: var(--coral); border-radius: 8px; font-size: 12px; font-weight: 700; box-shadow: 0 7px 14px rgba(192, 102, 108, .18); transition: transform .2s, background .2s; }.submit-button span { margin-right: 5px; font-size: 19px; font-weight: 400; vertical-align: -2px; }.submit-button:hover { background: #c5686e; transform: translateY(-1px); }.submit-button:disabled { cursor: wait; opacity: .65; transform: none; }
.form-message { min-height: 16px; margin: 10px 0 0; color: #718f7e; font-size: 11px; text-align: center; }.form-message.error { color: #b45d66; }
.site-footer { display: flex; justify-content: space-between; margin-top: 80px; padding-top: 20px; border-top: 1px solid var(--line); color: #aa9999; font-size: 10px; letter-spacing: .04em; }.site-footer span:last-child { color: #e0a4a0; letter-spacing: 5px; }

@media (max-width: 900px) { .page-shell { padding: 0 25px 30px; }.hero { grid-template-columns: 1fr 220px; padding-left: 38px; }.sun { right: -10px; }.flower-right { right: 0; }.content-grid { grid-template-columns: 1fr 310px; gap: 28px; } }
@media (max-width: 700px) { .page-shell { padding: 0 16px 25px; }.site-header { height: 70px; }.header-note { display: none; }.hero { min-height: 390px; grid-template-columns: 1fr; padding: 35px 27px 0; }.hero-art { min-height: 130px; }.sun { top: -15px; right: 30px; width: 150px; height: 150px; }.sparkle-one { top: -15px; right: 202px; }.sparkle-two { top: 80px; right: 0; }.flower-left { bottom: -22px; left: 5px; }.flower-right { bottom: -24px; right: 52px; }.stats-row { grid-template-columns: repeat(2, 1fr); margin-bottom: 38px; }.little-message { display: none; }.content-grid { display: flex; flex-direction: column-reverse; gap: 38px; }.add-panel { width: 100%; }.section-heading { align-items: start; flex-direction: column; }.wishlist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }.card-image-wrap { height: 142px; }.card-content { padding: 12px; }.card-content h3 { font-size: 13px; }.card-link { font-size: 10px; }.site-footer { margin-top: 52px; } }
@media (max-width: 420px) { h1 { font-size: 44px; }.wishlist-grid { grid-template-columns: 1fr; }.card-image-wrap { height: 180px; }.filters { width: 100%; }.filter-button { flex: 1; } }

/* Header user badge & logout */
.header-right { display: flex; align-items: center; gap: 14px; }
.user-badge-wrap { display: flex; align-items: center; gap: 8px; background: rgba(219, 119, 123, 0.12); padding: 5px 12px; border-radius: 20px; border: 1px solid rgba(219, 119, 123, 0.25); }
.user-badge { color: var(--coral); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: 5px; }
.logout-button { background: none; border: 0; padding: 0; color: var(--muted); font-size: 11px; text-decoration: underline; cursor: pointer; transition: color 0.2s; }
.logout-button:hover { color: var(--coral); }

/* Login Modal & Overlay */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(53, 43, 56, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes floatHeart {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.06); }
}

.login-card {
  width: 100%;
  max-width: 440px;
  margin: auto;
  background: #fffdfb;
  border: 1px solid #f1e4dd;
  border-radius: 26px;
  box-shadow: 0 25px 60px rgba(53, 43, 56, 0.18);
  padding: 34px 30px 26px;
  text-align: center;
  position: relative;
}

.login-heart-badge {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  margin: 0 auto 16px;
  background: #fde8e8;
  color: var(--coral);
  border-radius: 50%;
  font-size: 24px;
  animation: floatHeart 3s ease-in-out infinite;
  box-shadow: 0 6px 16px rgba(219, 119, 123, 0.2);
}

.login-eyebrow {
  margin: 0 0 8px;
  color: var(--coral);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.login-title {
  margin: 0 0 8px;
  font-size: 27px;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.login-subtitle {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.couple-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 22px;
}

.couple-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px;
  background: #fff9f6;
  border: 2px solid #eee2db;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.couple-btn:hover {
  border-color: var(--coral);
  background: #fff4f2;
}

.couple-btn.active {
  border-color: var(--coral);
  background: #fae7e6;
  box-shadow: 0 4px 14px rgba(219, 119, 123, 0.18);
}

.couple-emoji {
  font-size: 26px;
}

.couple-btn strong {
  font-size: 14px;
  color: var(--ink);
}

.couple-btn small {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.login-form {
  text-align: left;
}

.login-question {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #635266;
}

.login-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.login-input-wrap input {
  padding-right: 36px;
  height: 44px;
  font-size: 13px;
  background: #fff;
}

.login-input-icon {
  position: absolute;
  right: 12px;
  font-size: 15px;
  pointer-events: none;
  opacity: 0.7;
}

.login-submit-button {
  width: 100%;
  min-height: 45px;
  margin-top: 16px;
  border: 0;
  color: #fff;
  background: var(--coral);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(192, 102, 108, 0.22);
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}

.login-submit-button:hover {
  background: #c5686e;
  transform: translateY(-1px);
}

.login-submit-button:disabled {
  opacity: 0.65;
  cursor: wait;
}

.login-message {
  min-height: 18px;
  margin: 10px 0 0;
  color: #b45d66;
  font-size: 11px;
  text-align: center;
  font-weight: 500;
}

.login-message.success {
  color: #55876d;
}

.login-footnote {
  margin: 18px 0 0;
  color: #b1a3ae;
  font-size: 10px;
}

.login-footnote code {
  background: rgba(0,0,0,0.05);
  padding: 2px 5px;
  border-radius: 4px;
}