/* VibeTimer landing / share page. Functional only -- proper marketing
   design comes later (PLAN.md §5). Echoes the app's velvet palette. */
:root {
  --bg: #130a1b;
  --bg-top: #2e1a3d;
  --surface: #241531;
  --line: rgba(180, 155, 200, 0.16);
  --text: #f4eef7;
  --muted: #b49bc8;
  --dim: #8c769e;
  --blue: #4c86ff;
  --red: #ff3b47;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  background: radial-gradient(120% 60% at 50% 0%, var(--bg-top) 0%, #1a1025 55%, var(--bg) 100%);
  color: var(--text);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.card {
  width: 100%;
  max-width: 460px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px 28px;
}
.mark {
  width: 56px; height: 56px; border-radius: 16px;
  border: 1.5px solid rgba(76, 134, 255, 0.5);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.mark span { width: 20px; height: 20px; border-radius: 999px; background: var(--red); }
h1 { font-size: 26px; letter-spacing: -0.02em; margin: 0 0 8px; }
.tagline { color: var(--muted); margin: 0 0 20px; }
p { color: var(--muted); }
.preview {
  background: rgba(76, 134, 255, 0.08);
  border: 1px solid rgba(76, 134, 255, 0.28);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 18px 0;
}
.preview .name { color: var(--text); font-weight: 600; font-size: 17px; }
.preview .meta { color: var(--dim); font-size: 13px; margin-top: 4px; }
.btn {
  display: block; text-align: center; text-decoration: none;
  padding: 14px 16px; border-radius: 13px; font-weight: 600;
  margin-top: 10px;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-secondary { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.btn.disabled { opacity: 0.5; pointer-events: none; }
.stores { display: flex; gap: 10px; margin-top: 14px; }
.stores .btn { flex: 1; margin-top: 0; }
.note { color: var(--dim); font-size: 13px; margin-top: 14px; }
.expired .mark { border-color: rgba(255, 59, 71, 0.5); }
.expired .mark span { background: var(--dim); }