/* Sorpra share page – Warm Taupe theme, Outfit-like system fonts. */
:root {
  --header: #2f2a27; --on-header: #f3eee9; --on-header-muted: #bdb3aa;
  --panel: #e9e4de; --card: #f6f3ef; --on-panel: #2a2522; --muted: #6e645c;
  --accent: #e0662f; --accent-soft: #f9dccb;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--header); color: var(--on-panel);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.header { color: var(--on-header); padding: 28px 24px 32px; max-width: 720px; margin: 0 auto; }
.brand { font-size: 22px; letter-spacing: -0.01em; color: var(--on-header-muted); }
.box { display: inline-block; width: 0.5em; height: 0.5em; margin: 0 0.04em;
  background: conic-gradient(var(--on-header-muted) 0 0); border-radius: 2px;
  box-shadow: inset 0 0 0 1.5px var(--header); vertical-align: 0; }
h1 { margin: 18px 0 4px; font-size: 30px; font-weight: 500; line-height: 1.2; }
.muted { margin: 0; color: var(--on-header-muted); }
.panel { background: var(--panel); border-radius: 32px 32px 0 0; min-height: 100vh;
  padding: 24px 16px 48px; }
.panel > * { max-width: 720px; margin-left: auto; margin-right: auto; }
.cta { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px;
  background: var(--card); border-radius: 20px; padding: 16px; }
.cta p { margin: 0; color: var(--muted); }
.button { display: block; text-align: center; text-decoration: none; font-weight: 500;
  background: var(--header); color: var(--on-header); border-radius: 999px; padding: 13px 18px; }
.message { background: var(--card); border-radius: 20px; padding: 24px; text-align: center; }
.wishes { list-style: none; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.wish { background: var(--card); border-radius: 20px; padding: 12px; display: flex; gap: 12px; }
.wish img, .wish .ph { width: 64px; height: 64px; border-radius: 14px; object-fit: cover;
  flex-shrink: 0; background: #e4dcd3; }
.wish .price { font-size: 18px; font-weight: 300; }
.wish .title { font-weight: 500; overflow-wrap: anywhere; }
.wish .meta { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.wish a { color: inherit; }
.star { color: var(--accent); }
.footnote { color: var(--muted); font-size: 13px; text-align: center; margin-top: 28px; }