:root {
  --ink: #33262b;
  --muted: #786b70;
  --rose: #704252;
  --rose-dark: #58313f;
  --blush: #f6ecec;
  --cream: #fffaf5;
  --gold: #bc8758;
  --line: #eadedf;
  --white: #fff;
  --shadow: 0 24px 70px rgba(72, 45, 54, .11);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--cream);
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 92% 2%, rgba(231, 207, 211, .7), transparent 30rem),
    var(--cream);
}
a { color: var(--rose); }

.nav {
  width: min(100% - 32px, 1080px);
  height: 84px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.brand {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(26px, 7vw, 34px);
  letter-spacing: .01em;
  line-height: 1;
  text-decoration: none;
}
.cloud { margin: 9px 0 0 3px; color: var(--gold); font-size: 13px; }

main { width: min(100% - 28px, 1080px); margin: 0 auto; padding: 22px 0 72px; }
h1, h2, p { overflow-wrap: anywhere; }
h1 {
  margin: 10px 0 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 9vw, 64px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.02;
}
.eyebrow {
  margin: 0;
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.lead { max-width: 620px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.muted { color: var(--muted); font-size: 14px; }

.hero { max-width: 680px; margin: 4vh auto 0; }
.cta { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin: 30px 0; }
.button, button {
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  padding: 13px 22px;
  background: var(--rose);
  color: var(--white);
  font: inherit;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.button:hover, button:hover { background: var(--rose-dark); transform: translateY(-1px); }
.button:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(188, 135, 88, .32);
  outline-offset: 3px;
}
.text-link { font-weight: 700; }
.ghost { min-height: 40px; padding: 8px 12px; background: transparent; color: var(--rose); }

.memory-card, .card, .dashboard {
  width: 100%;
  border: 1px solid rgba(112, 66, 82, .13);
  border-radius: 26px;
  background: rgba(255, 255, 255, .9);
  box-shadow: var(--shadow);
}
.memory-card { margin-top: 40px; padding: 24px; }
.memory-card span, .memory-card p { color: var(--muted); font-size: 13px; }
.memory-card strong { display: block; margin: 10px 0; font: 500 25px/1.2 Georgia, serif; }
.line { height: 1px; margin: 20px 0; background: var(--line); }
.dashboard { max-width: 820px; margin: 2vh auto; padding: clamp(22px, 5vw, 44px); overflow: hidden; }
.dashboard h1 { max-width: 100%; font-size: clamp(38px, 8vw, 58px); }
.dashboard-head, .section-head { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; }

.form-card { max-width: 500px; margin: 4vh auto; padding: clamp(24px, 6vw, 40px); }
.form-card h1 { font-size: clamp(38px, 9vw, 48px); }
.form-card form, .composer form, .empty form { display: grid; gap: 19px; margin-top: 22px; }
label { display: grid; gap: 8px; color: #514249; font-size: 13px; font-weight: 750; }
input, textarea {
  display: block;
  width: 100%;
  min-width: 0;
  border: 1px solid #d9cacc;
  border-radius: 13px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.45;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
select {
  display: block;
  width: 100%;
  min-height: 50px;
  border: 1px solid #d9cacc;
  border-radius: 13px;
  padding: 12px 42px 12px 14px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
input { min-height: 50px; padding: 12px 14px; }
textarea { min-height: 104px; padding: 13px 14px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #a4979c; opacity: 1; }
input:hover, textarea:hover { border-color: #c5adb2; }
input:focus, textarea:focus {
  outline: 0;
  border-color: var(--rose);
  box-shadow: 0 0 0 4px rgba(112, 66, 82, .1);
}
.form-card form button, .composer form button, .empty form button { width: fit-content; min-width: 150px; }

.notice { max-width: 500px; margin: 0 auto 16px; padding: 14px 17px; border-radius: 13px; background: #fff0db; color: #684b2c; }
.back { display: inline-flex; margin-bottom: 28px; font-size: 14px; font-weight: 750; text-decoration: none; }
.empty { padding: 24px; border: 1px solid rgba(112, 66, 82, .08); border-radius: 18px; background: var(--blush); }
.empty h2 { margin: 0 0 8px; font: 500 25px/1.2 Georgia, serif; }
.empty p { margin: 0; color: var(--muted); line-height: 1.6; }

.primary-create { margin-top: 12px; padding: clamp(24px, 6vw, 34px); border-radius: 22px; background: linear-gradient(135deg, var(--rose), #966879); color: white; }
.primary-create p { max-width: 560px; margin: 0 0 24px; font: 500 clamp(22px, 5vw, 29px)/1.3 Georgia, serif; }
.primary-create .button { display: inline-flex; align-items: center; background: white; color: var(--rose); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.hero-actions > a:not(.button) { color: white; font-weight: 750; }
.relationship-mini { display: flex; gap: 10px; align-items: baseline; margin-top: 20px; color: var(--muted); }
.relationship-mini strong { color: var(--rose); font: 500 30px/1 Georgia, serif; }
.plan { display: flex; gap: 16px; justify-content: space-between; margin-top: 22px; padding: 20px 2px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; font-weight: 700; }
.account-actions { display:flex; align-items:center; gap:10px; }
.account-actions > a { font-size:13px; font-weight:800; text-decoration:none; }
.account-actions form { margin:0; }
.account-page { max-width:980px; }
.account-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:22px; margin-bottom:30px; padding-bottom:28px; border-bottom:1px solid var(--line); }
.account-heading h1 { margin-bottom:10px; }
.account-heading .lead { margin-bottom:0; }
.account-plan { flex:0 0 auto; padding:9px 13px; border-radius:999px; background:var(--blush); color:var(--rose); font-size:10px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.account-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); gap:22px; align-items:start; }
.account-column { display:grid; gap:22px; }
.account-card { padding:clamp(20px,4vw,28px); border:1px solid var(--line); border-radius:22px; background:white; }
.account-card > form,.password-box form { display:grid; gap:18px; margin-top:22px; }
.account-card label small { color:var(--muted); font-weight:500; }
.password-box { margin-top:18px; }
.password-box summary { color:var(--rose); font-size:13px; font-weight:850; cursor:pointer; }
.plan-summary { position:sticky; top:20px; }
.plan-name { display:block; margin:22px 0 14px; color:var(--rose); font:500 38px/1.1 Georgia,serif; }
.plan-summary ul { display:grid; gap:10px; padding:0; list-style:none; }
.plan-summary li::before { content:"✓"; margin-right:9px; color:var(--gold); font-weight:900; }
.storage { margin:24px 0; padding-top:20px; border-top:1px solid var(--line); }
.storage > div:first-child { display:flex; justify-content:space-between; gap:12px; font-size:11px; }
.storage-track { height:9px; margin:11px 0 7px; overflow:hidden; border-radius:999px; background:#eee4e5; }
.storage-track span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--rose),var(--gold)); }
.storage small { color:var(--muted); }

.pages .section-head { margin-bottom: 24px; }
.template-link { display: inline-flex; margin-top: 8px; font-size: 14px; font-weight: 750; white-space: nowrap; }
.chosen-template { display: flex; gap: 13px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.chosen-template > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: var(--blush); color: var(--rose); font-size: 22px; }
.chosen-template div { display: grid; flex: 1; gap: 2px; }
.chosen-template small { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.chosen-template strong { font-size: 15px; }
.chosen-template a { font-size: 12px; font-weight: 800; }
.pages h1, .editor h1, .timeline h1 { margin-top: 7px; }
.composer {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fbf5f4;
  overflow: hidden;
}
.composer summary {
  position: relative;
  padding: 20px 58px 20px 22px;
  color: var(--rose-dark);
  font-size: 15px;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}
.composer summary::-webkit-details-marker { display: none; }
.composer summary::after { content: "+"; position: absolute; right: 22px; top: 50%; translate: 0 -50%; font-size: 25px; font-weight: 400; }
.composer[open] summary { border-bottom: 1px solid var(--line); }
.composer[open] summary::after { content: "−"; }
.composer form { margin: 0; padding: clamp(20px, 5vw, 30px); background: rgba(255, 255, 255, .55); }

.page-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 26px; }
.page-card {
  display: grid;
  min-width: 0;
  min-height: 190px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: white;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.page-card:hover { transform: translateY(-2px); border-color: #d6c1c5; box-shadow: 0 14px 34px rgba(74, 45, 55, .09); }
.page-card span { color: var(--gold); font-size: 10px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.page-card-top,.page-card-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.page-card-top small { color:var(--muted); font-size:11px; }
.page-card-footer em { color:var(--muted); font-size:11px; font-style:normal; font-weight:700; }
.page-card h2 { margin: 10px 0 7px; font: 500 27px/1.18 Georgia, serif; }
.page-card p { margin: 0 0 20px; color: var(--muted); line-height: 1.55; }
.page-card strong { align-self: end; color: var(--rose); font-size: 13px; }

.templates { max-width: 960px; }
.template-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 32px; }
.template-card { display: grid; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: white; color: var(--ink); text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; }
.template-card:hover { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(74,45,55,.11); }
.template-preview { min-height: 210px; padding: 28px; display: grid; align-content: center; justify-items: center; text-align: center; color: white; }
.template-preview span { margin-bottom: 14px; font-size: 30px; }
.template-preview strong { font: 500 29px/1.15 Georgia, serif; }
.template-preview small { margin-top: 24px; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; opacity: .75; }
.template-romantica .template-preview { background: linear-gradient(145deg,#713f51,#b47b87); }
.template-aniversario .template-preview { background: linear-gradient(145deg,#d17b4c,#e5b55e); }
.template-amizade .template-preview { background: linear-gradient(145deg,#397b83,#78b5aa); }
.template-gratidao .template-preview { background: linear-gradient(145deg,#5f536e,#a38cad); }
.template-copy { padding: 21px; }
.template-copy > span { color: var(--gold); font-size: 10px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.template-copy h2 { margin: 8px 0; font: 500 27px/1.2 Georgia, serif; }
.template-copy p { margin: 0 0 18px; color: var(--muted); line-height: 1.55; }
.template-copy > strong { color: var(--rose); font-size: 13px; }

.editor-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin: 26px 0; }
.editor-actions span { color: var(--muted); font-size: 13px; }
.publish-form { margin: 22px 0 0; }
.share-box { display: grid; gap: 10px; margin-top: 20px; padding: 18px; border: 1px solid #d8c4c8; border-radius: 17px; background: #fff; }
.share-box > span { color: var(--gold); font-size: 10px; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.share-box > div { display: flex; gap: 10px; }
.share-box input { flex: 1; font-size: 13px; }
.share-box .button { display: inline-flex; align-items: center; }
.share-box small { color: var(--muted); }
.share-actions { display:grid !important; grid-template-columns:1fr 1fr; }
.share-actions .button,.share-actions button { display:flex; min-height:44px; align-items:center; justify-content:center; }
.copy-button { border:1px solid var(--rose); background:var(--rose); }
.ready-panel { padding:22px; border:1px solid var(--line); border-radius:22px; background:white; }
.ready-panel ul { display:grid; gap:11px; margin:18px 0 0; padding:0; list-style:none; }
.ready-panel li { position:relative; padding-left:28px; color:var(--muted); font-size:13px; }
.ready-panel li::before { content:""; position:absolute; left:0; top:0; display:grid; width:18px; height:18px; place-items:center; border:1px solid #d9cacc; border-radius:50%; }
.ready-panel li.done { color:var(--ink); font-weight:700; }
.ready-panel li.done::before { content:"✓"; border-color:#698778; background:#698778; color:white; font-size:11px; }
.insights-panel { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.insights-panel > div { display:grid; gap:5px; padding:14px; border-radius:14px; background:#f8f0f1; }
.insights-panel span { color:var(--muted); font-size:9px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.insights-panel strong { color:var(--rose); font:500 21px/1.2 Georgia,serif; }
.insights-panel > div:last-child strong { font:750 12px/1.35 system-ui,sans-serif; }
.unpublish-form { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.unpublish-form .danger-button { width:100%; }
.plans-page { max-width:980px; margin:2vh auto; }
.plans-heading { max-width:760px; margin:20px auto 42px; text-align:center; }
.plans-heading .lead { margin-left:auto; margin-right:auto; }
.pricing-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; align-items:stretch; }
.pricing-card { display:flex; flex-direction:column; padding:clamp(24px,5vw,38px); border:1px solid var(--line); border-radius:26px; background:white; box-shadow:var(--shadow); }
.pricing-card.featured { background:linear-gradient(145deg,var(--rose-dark),#8e5c6e); color:white; }
.pricing-kicker { color:var(--gold); font-size:10px; font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
.pricing-card h2 { margin:10px 0 6px; font:500 40px/1.1 Georgia,serif; }
.price { margin:0 0 24px; font:500 27px/1.2 Georgia,serif; }
.price small { color:var(--muted); font:600 12px system-ui,sans-serif; }
.pricing-card ul { display:grid; gap:13px; margin:0 0 28px; padding:0; list-style:none; }
.pricing-card li { position:relative; padding-left:25px; line-height:1.45; }
.pricing-card li::before { content:"✓"; position:absolute; left:0; color:var(--gold); font-weight:900; }
.pricing-card .button,.coming-soon { margin-top:auto; }
.coming-soon { display:block; padding:14px; border:1px solid rgba(255,255,255,.3); border-radius:999px; font-size:12px; font-weight:800; text-align:center; }
.pricing-note { margin:24px 0 0; color:var(--muted); font-size:12px; text-align:center; }
.editor-studio { max-width: 1080px; padding: clamp(22px,4vw,42px); }
.editor-topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:30px; }
.editor-topbar .back { margin:0; }
.status-pill { padding:8px 12px; border-radius:999px; background:#f4e8eb; color:var(--rose); font-size:10px; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }
.editor-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding-bottom:30px; border-bottom:1px solid var(--line); }
.editor-heading h1 { margin:7px 0 10px; font-size:clamp(38px,6vw,56px); }
.editor-heading .lead { margin:0; }
.moment-count { display:grid; justify-items:center; flex:0 0 auto; min-width:94px; padding:14px; border:1px solid var(--line); border-radius:18px; background:#fffaf8; }
.moment-count strong { color:var(--rose); font:500 31px/1 Georgia,serif; }
.moment-count span { margin-top:5px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.studio-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); gap:28px; margin-top:30px; align-items:start; }
.studio-controls { display:grid; gap:18px; }
.settings-form,.content-panel,.studio-preview { border:1px solid var(--line); border-radius:22px; background:white; }
.settings-form { display:grid; gap:20px; padding:clamp(20px,4vw,28px); }
.settings-form label small { color:var(--muted); font-weight:500; line-height:1.45; }
.settings-form button { width:fit-content; }
.form-divider { position:relative; margin:5px 0; text-align:center; }
.form-divider::before { content:""; position:absolute; inset:50% 0 auto; height:1px; background:var(--line); }
.form-divider span { position:relative; padding:0 10px; background:white; color:var(--gold); font-size:9px; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }
.panel-title { display:flex; gap:13px; align-items:flex-start; padding-bottom:18px; border-bottom:1px solid var(--line); }
.panel-title > span { display:grid; flex:0 0 34px; height:34px; place-items:center; border-radius:10px; background:var(--blush); color:var(--rose); font-size:11px; font-weight:900; }
.panel-title h2 { margin:0 0 4px; font:500 23px/1.2 Georgia,serif; }
.panel-title p { margin:0; color:var(--muted); font-size:13px; line-height:1.45; }
.content-panel { padding:22px; }
.secondary-button { display:flex; justify-content:center; margin-top:18px; background:#f5e9eb; color:var(--rose); }
.secondary-button:hover { background:#ead7db; }
.studio-preview { padding:16px; box-shadow:0 18px 50px rgba(67,39,49,.09); }
.preview-label { display:flex; justify-content:space-between; gap:12px; padding:3px 3px 14px; }
.preview-label span { font-size:12px; font-weight:850; }
.preview-label small { color:var(--muted); }
.cover-preview { position:relative; display:grid; min-height:480px; align-content:center; justify-items:center; padding:48px 28px; overflow:hidden; border-radius:17px; color:white; text-align:center; }
.cover-preview::before,.cover-preview::after { content:""; position:absolute; width:190px; height:190px; border:1px solid rgba(255,255,255,.18); border-radius:50%; }
.cover-preview::before { top:-90px; right:-70px; }
.cover-preview::after { bottom:-110px; left:-80px; }
.cover-romantica { background:linear-gradient(155deg,#67394a,#aa7580); }
.cover-aniversario { background:linear-gradient(155deg,#c76638,#e6ad51); }
.cover-amizade { background:linear-gradient(155deg,#34737b,#72ad9f); }
.cover-gratidao { background:linear-gradient(155deg,#594c67,#9d86a8); }
.cover-preview.has-cover { background-image:linear-gradient(155deg,rgba(45,25,33,.74),rgba(92,51,64,.5)),var(--preview-cover); background-size:cover; background-position:center; }
.preview-brand { position:absolute; top:23px; font-size:9px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; opacity:.7; }
.cover-preview > p:first-of-type { margin:0; font-size:9px; font-weight:850; letter-spacing:.18em; text-transform:uppercase; }
.preview-symbol { margin:20px 0 12px; font-size:24px; }
.cover-preview h2 { max-width:330px; margin:0; font:500 clamp(32px,4vw,46px)/1.06 Georgia,serif; }
.preview-message { max-width:300px; margin:22px 0 0; font:500 17px/1.5 Georgia,serif; opacity:.92; }
.preview-action { margin-top:32px; padding:10px 15px; border:1px solid rgba(255,255,255,.4); border-radius:999px; font-size:10px; font-weight:800; }
.publish-panel { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:15px; padding:14px 4px 2px; }
.publish-panel strong { font-size:13px; }
.publish-panel p { margin:4px 0 0; color:var(--muted); font-size:11px; }
.publish-panel button { min-height:42px; padding:10px 15px; font-size:12px; }
.moments { display: grid; gap: 14px; margin-top: 26px; }
.moment { position: relative; padding: 4px 8px 22px 23px; border-left: 2px solid #dec0c6; }
.moment::before { content: ""; position: absolute; top: 8px; left: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--rose); }
.moment time { color: var(--gold); font-size: 11px; font-weight: 850; }
.moment h2 { margin: 7px 0; font: 500 25px/1.2 Georgia, serif; }
.moment p { margin: 0 0 10px; color: var(--muted); line-height: 1.65; }
.media-badge { display: inline-block; padding: 5px 9px; border-radius: 999px; background: var(--blush); color: var(--rose); font-size: 11px; font-weight: 800; }
.timeline-manager { max-width:900px; }
.timeline-heading { margin-bottom:28px; }
.timeline-heading .lead { margin-bottom:0; }
.add-moment summary { display:flex; align-items:center; gap:13px; }
.add-moment summary::after { display:none; }
.add-moment summary > span { display:grid; width:36px; height:36px; place-items:center; border-radius:11px; background:var(--rose); color:white; font-size:18px; }
.add-moment summary > div { display:grid; gap:2px; }
.add-moment summary strong { font-size:14px; }
.add-moment summary small { color:var(--muted); font-size:11px; font-weight:500; }
.add-moment label small { color:var(--muted); font-weight:500; }
.timeline-manager .moments { gap:22px; }
.moment-card { overflow:hidden; border:1px solid var(--line); border-radius:22px; background:white; box-shadow:0 14px 38px rgba(72,45,54,.07); }
.moment-media { display:block; width:100%; max-height:500px; aspect-ratio:16/9; background:#eee4e5; object-fit:cover; }
.moment-card-body { padding:clamp(20px,4vw,28px); }
.moment-order { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.moment-order > span { color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.moment-order > div { display:flex; gap:7px; }
.moment-order form { margin:0; }
.order-button { display:grid; width:36px; min-height:36px; padding:0; place-items:center; border:1px solid #ddcfd1; border-radius:10px; background:white; color:var(--rose); font-size:17px; }
.order-button:hover { background:var(--blush); }
.order-button:disabled { opacity:.32; cursor:not-allowed; transform:none; }
.moment-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.moment-meta time { color:var(--gold); font-size:10px; font-weight:850; letter-spacing:.14em; }
.no-date { color:#a49599; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.optional { justify-self:start; margin-left:5px; color:var(--gold); font-size:9px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.moment-card h2 { margin:9px 0; font:500 clamp(26px,5vw,34px)/1.18 Georgia,serif; }
.moment-card-body > p { margin:0; color:var(--muted); line-height:1.65; white-space:pre-line; }
.moment-edit { margin-top:22px; border-top:1px solid var(--line); }
.moment-edit summary { padding:17px 0 0; color:var(--rose); font-size:12px; font-weight:850; cursor:pointer; list-style:none; }
.moment-edit summary::-webkit-details-marker { display:none; }
.moment-edit summary::after { content:"＋"; float:right; }
.moment-edit[open] summary::after { content:"−"; }
.moment-edit > form { display:grid; gap:17px; padding-top:20px; }
.moment-delete { margin-top:14px; padding-top:14px !important; border-top:1px dashed var(--line); }
.moment-delete button { width:fit-content; }
.danger-button { min-height:42px; padding:10px 15px; background:transparent; color:#a13d45; border:1px solid #e5c5c8; }
.danger-button:hover { background:#fff0f1; color:#842e35; }

.gift { --gift-accent:#704252; --gift-accent-2:#b47b87; --gift-soft:#f5e7ea; --gift-paper:#fffaf8; background:var(--gift-soft); }
.gift-romantica { --gift-accent:#713f51; --gift-accent-2:#b77e8b; --gift-soft:#f7e9eb; --gift-paper:#fffafb; }
.gift-aniversario { --gift-accent:#bd5d35; --gift-accent-2:#e5ae4d; --gift-soft:#fff0dc; --gift-paper:#fffaf0; }
.gift-amizade { --gift-accent:#34747c; --gift-accent-2:#73ae9f; --gift-soft:#e6f3f0; --gift-paper:#f8fffc; }
.gift-gratidao { --gift-accent:#5d506a; --gift-accent-2:#a28aaa; --gift-soft:#f0eaf3; --gift-paper:#fdfaff; }
.gift-main { width:100%; max-width:none; margin:0; padding:0; }
.gift-hero { position:relative; isolation:isolate; min-height:100svh; padding:80px 22px 54px; display:grid; align-content:center; justify-items:center; overflow:hidden; text-align:center; color:white; background:linear-gradient(145deg,var(--gift-accent),var(--gift-accent-2)); }
.gift-hero.has-cover { background-image:linear-gradient(145deg,color-mix(in srgb,var(--gift-accent),transparent 18%),color-mix(in srgb,var(--gift-accent-2),transparent 42%)),var(--gift-cover); background-size:cover; background-position:center; }
.gift-hero::after { content:""; position:absolute; inset:0; z-index:-2; opacity:.25; background-image:radial-gradient(circle at 20% 20%,white 0 1px,transparent 1.5px); background-size:28px 28px; mask-image:linear-gradient(to bottom,black,transparent 75%); }
.gift-orbit { position:absolute; z-index:-1; border:1px solid rgba(255,255,255,.18); border-radius:50%; }
.orbit-one { width:min(78vw,760px); aspect-ratio:1; top:-45%; right:-20%; }
.orbit-two { width:min(60vw,580px); aspect-ratio:1; bottom:-38%; left:-18%; }
.gift-mark { position:absolute; top:28px; color:rgba(255,255,255,.74); font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.gift-hero > p:first-of-type { margin:0; font-size:10px; font-weight:850; letter-spacing:.22em; text-transform:uppercase; }
.gift-hero h1 { max-width:850px; margin:18px 0 0; color:white; font-size:clamp(46px,11vw,94px); text-wrap:balance; }
.gift-divider { display:grid; width:44px; height:44px; margin:24px 0 0; place-items:center; border:1px solid rgba(255,255,255,.35); border-radius:50%; font-size:17px; }
.gift-message { max-width:650px; margin:26px 0 0; font:500 clamp(19px,4vw,28px)/1.5 Georgia,serif; text-wrap:balance; }
.gift-open { display:flex; gap:12px; align-items:center; margin-top:40px; padding:13px 19px; border:1px solid rgba(255,255,255,.42); border-radius:999px; color:white; font-size:12px; font-weight:800; text-decoration:none; backdrop-filter:blur(5px); }
.gift-open span { font-size:16px; }
.gift-story { padding:80px 0 96px; background:var(--gift-paper); }
.gift-story > header { width:min(100% - 34px,760px); margin:0 auto 48px; text-align:center; }
.gift-story > header > span { display:grid; width:42px; height:42px; margin:0 auto 18px; place-items:center; border-radius:50%; background:var(--gift-soft); color:var(--gift-accent); }
.gift-story > header p { margin:0; color:var(--gift-accent); font-size:10px; font-weight:850; letter-spacing:.2em; text-transform:uppercase; }
.gift-story > header h2 { margin:10px 0 0; color:var(--gift-accent); font:500 clamp(30px,6vw,48px)/1.12 Georgia,serif; }
.gift-moments { display:grid; width:min(100% - 34px,820px); margin:0 auto; gap:34px; }
.gift-moment { overflow:hidden; border:1px solid color-mix(in srgb,var(--gift-accent),transparent 82%); border-radius:24px; background:white; box-shadow:0 20px 55px color-mix(in srgb,var(--gift-accent),transparent 90%); }
.gift-media { display:block; width:100%; max-height:620px; aspect-ratio:4/3; border:0; background:#eadfe1; object-fit:cover; }
.gift-moment-copy { padding:clamp(22px,5vw,38px); }
.gift-moment time { color:var(--gift-accent); font-size:10px; font-weight:850; letter-spacing:.16em; }
.gift-moment h2 { margin:9px 0 12px; color:var(--gift-accent); font:500 clamp(28px,6vw,42px)/1.15 Georgia,serif; }
.gift-moment p,.gift-note { margin:0; color:#62575b; font-size:16px; line-height:1.75; }
.gift-note { padding:50px; border:1px dashed color-mix(in srgb,var(--gift-accent),transparent 65%); border-radius:22px; text-align:center; }
.gift footer { display:grid; justify-items:center; gap:8px; padding:38px 22px; background:var(--gift-accent); color:white; text-align:center; }
.gift footer strong { font:500 24px Georgia,serif; }
.gift footer span { font-size:10px; letter-spacing:.12em; text-transform:uppercase; opacity:.72; }
.gift-closing { display:grid; justify-items:center; padding:clamp(70px,10vw,120px) 24px; background:var(--gift-soft); color:var(--gift-accent); text-align:center; }
.gift-closing > span { display:grid; width:44px; height:44px; margin-bottom:24px; place-items:center; border:1px solid color-mix(in srgb,var(--gift-accent),transparent 65%); border-radius:50%; }
.gift-closing p { max-width:680px; margin:0; font:500 clamp(24px,5vw,38px)/1.5 Georgia,serif; }
.gift-closing strong { margin-top:28px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.gift-aniversario .gift-hero::before { content:"✦  •  ✧  •  ✦"; position:absolute; top:16%; left:5%; rotate:-12deg; color:rgba(255,255,255,.38); font-size:clamp(18px,4vw,34px); letter-spacing:.5em; }
.gift-aniversario .gift-moment:nth-child(even) { border-color:#e5ae4d; }
.gift-amizade .gift-moment { border-radius:7px; box-shadow:7px 9px 0 color-mix(in srgb,var(--gift-accent),transparent 82%); rotate:-.5deg; }
.gift-amizade .gift-moment:nth-child(even) { rotate:.6deg; }
.gift-amizade .gift-media { aspect-ratio:3/2; padding:9px 9px 0; background:white; }
.gift-gratidao .gift-moments { max-width:720px; }
.gift-gratidao .gift-moment { border-width:0 0 1px; border-radius:0; box-shadow:none; background:transparent; }
.gift-gratidao .gift-media { border-radius:2px; filter:saturate(.82); }
.gift-romantica .gift-media { aspect-ratio:4/5; }

@media (min-width: 680px) {
  main { padding-top: 42px; }
  .page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .memory-card { padding: 30px; }
}

@media (max-width: 520px) {
  .nav { height: 72px; }
  main { width: min(100% - 20px, 1080px); padding-top: 12px; }
  .dashboard, .card { border-radius: 20px; }
  .dashboard { padding: 22px 18px 26px; }
  .dashboard h1 { font-size: 42px; line-height: 1.06; }
  .dashboard-head { align-items: center; }
  .dashboard-head h1 { margin-bottom: 8px; }
  .pages .section-head { display: block; }
  .composer summary { padding: 18px 52px 18px 18px; }
  .composer form { padding: 20px 16px; }
  .form-card form button, .composer form button, .empty form button, .primary-create .button { width: 100%; }
  .editor-actions { align-items: stretch; flex-direction: column; }
  .editor-actions .button { width: 100%; }
  .share-box > div { align-items:stretch; flex-direction:column; }
  .share-box .button { justify-content:center; }
  .plan { align-items: flex-start; flex-direction: column; }
  .pricing-grid { grid-template-columns:1fr; }
  .plans-heading { text-align:left; }
  .share-actions { grid-template-columns:1fr; }
  .insights-panel { grid-template-columns:1fr; }
  .account-heading { align-items:flex-start; flex-direction:column; }
  .account-grid { grid-template-columns:1fr; }
  .account-actions { align-items:flex-end; flex-direction:column; }
  .plan-summary { position:static; }
  .editor-heading { align-items:flex-start; flex-direction:column; }
  .moment-count { grid-auto-flow:column; justify-items:start; align-items:baseline; gap:7px; min-width:0; }
  .studio-grid { grid-template-columns:1fr; }
  .settings-form button { width:100%; }
  .cover-preview { min-height:430px; }
  .publish-panel { align-items:stretch; flex-direction:column; }
  .publish-panel button { width:100%; }
  .gift-story { padding:64px 0 72px; }
  .gift-story > header { margin-bottom:34px; }
  .gift-moments { gap:24px; }
  .gift-moment { border-radius:18px; }
  .gift-moment-copy { padding:22px 20px 26px; }
  .moment-update button,.moment-delete button { width:100%; }
}

@media (max-width: 860px) and (min-width: 521px) {
  .studio-grid { grid-template-columns:1fr; }
  .studio-preview { max-width:620px; width:100%; margin:0 auto; }
}