/* Made of Moments — shared app styles. Brand-matched to index.html:
   Playfair Display + Inter, gold accent on a deep festive gradient. */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
:root{
  --c-pale:#FFF0BE; --c-mid:#F2CB6E; --c-deep:#D89A36; --c-soft:#FFD98A; --c-glint:#FFF6D8;
  --c-glow:rgba(216,154,54,.45);
  --c-grad:linear-gradient(180deg, var(--c-pale) 0%, var(--c-mid) 46%, var(--c-deep) 100%);
  --ink:rgba(255,255,255,.92); --ink-soft:rgba(255,255,255,.72); --ink-dim:rgba(255,255,255,.5);
  --line:rgba(255,255,255,.12); --field:rgba(255,255,255,.05);
  --ok:#7BE0A6; --bad:#FF8FA3;
}
html,body{ height:100%; }
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100svh; min-height:100vh;
  background:radial-gradient(120% 90% at 50% 0%, #2a1c3c 0%, #1a1430 42%, #0c0a12 100%) fixed;
}
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(60% 40% at 50% -5%, var(--c-glow), transparent 70%); opacity:.32;
}
a{ color:var(--c-soft); }
.serif{ font-family:'Playfair Display',Georgia,serif; }

/* ---- layout ---- */
.shell{ position:relative; z-index:1; width:100%; max-width:920px; margin:0 auto; padding:clamp(28px,6vh,64px) 20px 64px; }
.narrow{ max-width:480px; }
.brandbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:30px; flex-wrap:wrap; }
.brand{ display:inline-flex; align-items:baseline; gap:0; text-decoration:none; white-space:nowrap; flex-shrink:0; }
.brand b{ font-family:'Playfair Display',Georgia,serif; font-weight:800; font-size:22px; color:#fff; white-space:nowrap; }
.brand .accent{ font-family:'Playfair Display',Georgia,serif; font-weight:800; font-size:22px;
  background:var(--c-grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.brand-right{ display:inline-flex; align-items:center; gap:10px; min-width:0; }
.brand-right .muted{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:46vw; }
.eyebrow{ display:inline-flex; align-items:center; gap:11px; font-size:11px; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase; color:var(--c-soft); }

/* ---- cards ---- */
.card{ background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:18px;
  padding:clamp(22px,4vw,34px); backdrop-filter:blur(3px); }
.card + .card{ margin-top:18px; }
h1.title{ font-family:'Playfair Display',Georgia,serif; font-weight:800; line-height:1.05;
  font-size:clamp(30px,6vw,46px); letter-spacing:-.01em; }
h2.sect{ font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:21px; color:var(--c-soft); margin-bottom:4px; }
.lead{ color:var(--ink-soft); font-size:15.5px; line-height:1.6; margin-top:10px; }
.muted{ color:var(--ink-dim); font-size:13.5px; line-height:1.55; }

/* ---- forms ---- */
.field{ margin-top:16px; }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:7px; letter-spacing:.01em; }
.field .hint{ font-weight:400; color:var(--ink-dim); }
input[type=text],input[type=email],input[type=password],input[type=url],textarea,select{
  width:100%; font:inherit; font-size:15px; color:var(--ink);
  background:var(--field); border:1px solid var(--line); border-radius:11px; padding:12px 14px;
  transition:border-color .15s, box-shadow .15s;
}
textarea{ min-height:120px; resize:vertical; line-height:1.55; }
input:focus,textarea:focus,select:focus{ outline:none; border-color:var(--c-soft); box-shadow:0 0 0 3px var(--c-glow); }
input::placeholder,textarea::placeholder{ color:rgba(255,255,255,.32); }

/* ---- buttons ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font:inherit; font-weight:600; font-size:15px; letter-spacing:.01em; border-radius:999px;
  padding:12px 26px; border:1px solid transparent; text-decoration:none; transition:transform .15s, filter .15s, box-shadow .15s, background .15s; }
.btn:disabled{ opacity:.55; cursor:default; }
.btn-primary{ color:#1f1605; background:var(--c-grad); border-color:rgba(255,247,214,.7);
  box-shadow:0 8px 24px var(--c-glow), inset 0 1px 0 rgba(255,255,255,.45); }
.btn-primary:not(:disabled):hover{ transform:translateY(-1px); filter:brightness(1.05); }
.btn-ghost{ color:var(--ink); background:rgba(255,255,255,.06); border-color:var(--line); }
.btn-ghost:hover{ background:rgba(255,255,255,.1); }
.btn-block{ width:100%; }
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* ---- tabs / segmented ---- */
.seg{ display:flex; background:var(--field); border:1px solid var(--line); border-radius:12px; padding:4px; gap:4px; margin-bottom:6px; }
.seg button{ flex:1; cursor:pointer; font:inherit; font-weight:600; font-size:14px; color:var(--ink-soft);
  background:transparent; border:0; border-radius:9px; padding:9px 10px; transition:background .15s,color .15s; }
.seg button[aria-selected=true]{ background:var(--c-grad); color:#1f1605; }

/* ---- feedback ---- */
.note{ font-size:13.5px; line-height:1.5; border-radius:11px; padding:11px 13px; margin-top:14px; display:none; }
.note.show{ display:block; }
.note.err{ background:rgba(255,143,163,.12); border:1px solid rgba(255,143,163,.4); color:#FFC2CE; }
.note.ok{ background:rgba(123,224,166,.1); border:1px solid rgba(123,224,166,.35); color:#BFF3D6; }
.spinner{ width:15px; height:15px; border:2px solid rgba(31,22,5,.35); border-top-color:#1f1605; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---- pills / status ---- */
.pill{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; padding:4px 11px; border-radius:999px; border:1px solid var(--line); color:var(--ink-soft); background:rgba(255,255,255,.04); }
.pill.draft{ color:#cdb8ff; border-color:rgba(155,93,229,.4); }
.pill.paid{ color:var(--c-soft); border-color:rgba(216,154,54,.45); }
.pill.building{ color:#9fd3ff; border-color:rgba(80,160,255,.4); }
.pill.live{ color:var(--ok); border-color:rgba(123,224,166,.45); }
.pill.archived{ color:var(--ink-dim); }

footer.foot{ position:relative; z-index:1; text-align:center; color:var(--ink-dim); font-size:12px; padding:8px 20px 40px; }
.divider{ height:1px; background:var(--line); margin:22px 0; border:0; }
.row{ display:flex; gap:14px; flex-wrap:wrap; }
.grow{ flex:1 1 220px; }