/* font assets */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* Design variables */
:root {
  /* --- Brand Colors --- */
  --color-brand-50:  #FFF1F2;
  --color-brand-100: #FFE4E6;
  --color-brand-500: #F43F5E;
  --color-brand-600: #E11D48; /* Primary Brand Color */
  --color-brand-700: #BE123C;
  --color-brand-900: #881337;

  /* --- Neutral Colors --- */
  --color-bg-cream:  #FDF2F0; /* Global Background */
  --color-bg-white:  #FFFFFF;
  --color-text-main: #1F2937;
  --color-text-muted:#4B5563;
  --color-border:    #E5E7EB;

  /* --- Typography --- */
  --font-serif: 'Playfair Display', serif;
  --font-sans:  'Inter', sans-serif;
  
  --text-size-h1: 3rem;   /* 48px */
  --text-size-h2: 2rem;   /* 32px */
  --text-size-h3: 1.25rem;/* 20px */
  --text-size-p:  1rem;   /* 16px */

  /* --- Spacing Scale --- */
  --space-1:  0.25rem; /* 4px */
  --space-2:  0.5rem;  /* 8px */
  --space-3:  0.75rem; /* 12px */
  --space-4:  1rem;    /* 16px (Base) */
  --space-6:  1.5rem;  /* 24px */
  --space-8:  2rem;    /* 32px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */

  /* --- UI Properties --- */
  --radius-sm:   0.375rem; /* 6px */
  --radius-md:   0.5rem;   /* 8px */
  --radius-lg:   1rem;     /* 16px (Cards) */
  --radius-full: 9999px; /* Pills, Circular */

  --shadow-sm:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05);

  /* --- Extended Colors --- */
  --color-white: #FFFFFF;
  --color-rose-25: #FFF7F7;
  --color-rose-30: #FFF5F3;
  --color-rose-40: #FFFAF9;
  --color-rose-50: #FFF5F5;
  --color-rose-60: #FFFAF7;
  --color-night-900: #0B0D11;
  --color-night-800: #1A1C22;
  --color-burgundy-900: #7E0C2A;
  --color-brand-400: #B43B4E;

  /* --- Opacity Colors --- */
  --overlay-brand-500-12: rgba(244, 63, 94, 0.12);
  --overlay-brand-500-15: rgba(244, 63, 94, 0.15);
  --overlay-brand-500-18: rgba(244, 63, 94, 0.18);
  --overlay-brand-500-22: rgba(244, 63, 94, 0.22);
  --overlay-brand-500-25: rgba(244, 63, 94, 0.25);
  --overlay-brand-500-40: rgba(244, 63, 94, 0.4);
  --overlay-brand-700-10: rgba(190, 18, 60, 0.1);
  --overlay-brand-700-12: rgba(190, 18, 60, 0.12);
  --overlay-brand-700-20: rgba(190, 18, 60, 0.2);
  --overlay-brand-700-25: rgba(190, 18, 60, 0.25);
  --overlay-brand-700-28: rgba(190, 18, 60, 0.28);
  --overlay-brand-700-40: rgba(190, 18, 60, 0.4);
  --overlay-burgundy-12: rgba(136, 19, 55, 0.12);
  --overlay-burgundy-10: rgba(136, 19, 55, 0.1);
  --overlay-burgundy-08: rgba(136, 19, 55, 0.08);
  --overlay-black-04: rgba(0, 0, 0, 0.04);
  --overlay-white-85: rgba(255, 255, 255, 0.85);
  --overlay-white-65: rgba(255, 255, 255, 0.65);
  --overlay-white-20: rgba(255, 255, 255, 0.2);
  --overlay-white-12: rgba(255, 255, 255, 0.12);

  /* --- Additional Typography --- */
  --text-size-2xs: 0.7rem;
  --text-size-xs: 0.75rem;
  --text-size-sm: 0.95rem;
  --text-size-login-min: 2rem;
  --text-size-login-fluid: calc(2.5vw + var(--space-5));
  --text-size-login-max: 2.75rem;
  --text-size-hero-min: 2.2rem;
  --text-size-hero-fluid: 3.5vw;
  --text-size-hero-max: 3.2rem;

  /* --- Additional Spacing --- */
  --space-1-2: 0.3rem;
  --space-1-6: 0.4rem;
  --space-2-2: 0.55rem;
  --space-2-4: 0.6rem;
  --space-2-8: 0.7rem;
  --space-3-2: 0.8rem;
  --space-3-4: 0.85rem;
  --space-3-6: 0.9rem;
  --space-3-8: 0.95rem;
  --space-5: 1.25rem;
  --space-5-6: 1.4rem;
  --space-7-2: 1.8rem;

  /* --- Letter Spacing --- */
  --letter-spacing-tight: 0.2px;
  --letter-spacing-xs: 0.05em;
  --letter-spacing-sm: 0.06em;
  --letter-spacing-md: 0.08em;

  /* --- Size Tokens --- */
  --border-1: 1px;
  --size-icon-md: 24px;
  --size-logo-width: 33%;
  --size-logo: 128px;
  --size-auth-blob: 320px;
  --size-auth-card-max: 520px;
  --size-auth-card-fluid: 92vw;
  --size-screen-min: 100vh;
  --size-full: 100%;
  --size-half: 50%;
  --size-arrow-center: 55%;
  --size-gradient-stop-65: 65%;
  --size-hero-min-height: 520px;
  --size-hero-max: 900px;
  --size-hero-text-max: 620px;
  --size-form-max: 920px;
  --size-content-max: 1120px;
  --size-footer-max: 720px;
  --size-skip-link-offset: -999px;
  --size-skip-link-top: var(--space-4);
  --size-ring: 4px;
  --size-underline-offset: 3px;
  --size-arrow-offset-lg: 12px;
  --size-arrow-offset-sm: 6px;
  --size-arrow-size: 6px;
  --size-auth-radius-offset: 4px;
  --size-lift-sm: -1px;
  --size-lift-md: -2px;
  --auth-blob-inset: -40% -20% auto auto;

  /* --- Radii --- */
  --radius-md-lg: 1.125rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 1.75rem;

  /* --- Motion --- */
  --duration-fast: 0.15s;
  --duration-medium: 0.2s;
  --easing-standard: ease;

  /* --- Shadows --- */
  --shadow-auth-card: 0 20px 60px var(--overlay-burgundy-12);
  --shadow-primary-btn: 0 10px 22px var(--overlay-brand-500-25);
  --shadow-primary-btn-hover: 0 14px 30px var(--overlay-brand-700-28);
  --shadow-generate-form: 0 10px 30px var(--overlay-burgundy-12);
  --shadow-generate-btn: 0 12px 24px var(--overlay-brand-700-20);
  --shadow-generate-btn-hover: 0 16px 30px var(--overlay-brand-700-25);
  --shadow-feature-card: 0 22px 40px var(--overlay-burgundy-10);
  --shadow-idea-primary: 0 12px 22px var(--overlay-brand-700-20);
  --shadow-inspiration-card: 0 12px 24px var(--overlay-burgundy-08);

  /* --- Backgrounds --- */
  --bg-auth-page: radial-gradient(1200px 600px at 10% -10%, var(--overlay-brand-500-18), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, var(--overlay-brand-700-12), transparent 55%),
    linear-gradient(180deg, var(--color-rose-25) 0%, var(--color-bg-cream) 60%, var(--color-bg-white) 100%);
  --bg-rose-page: radial-gradient(1000px 500px at 15% 0%, var(--overlay-brand-500-12), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, var(--overlay-brand-700-10), transparent 55%),
    var(--color-rose-30);
  --bg-night-sky: linear-gradient(135deg, var(--color-night-900), var(--color-night-800));
  --bg-browse-page: var(--bg-rose-page);
  --bg-plans-page: var(--bg-rose-page);
  --bg-home-page: var(--bg-rose-page);
  --bg-generate-page: var(--bg-rose-page);
  --image-hero: url('hero-image.jpg');
  --bg-home-hero: linear-gradient(180deg, var(--overlay-white-85), var(--overlay-white-65)), var(--image-hero);

  /* --- Browse Page --- */
  --shadow-browse-card: var(--shadow-inspiration-card);
  --shadow-filter-active: var(--shadow-primary-btn);
  --color-filter-text: var(--color-brand-700);
  --color-filter-bg: var(--color-bg-white);
  --color-filter-border: var(--overlay-black-04);

  /* --- Plans Page --- */
  --shadow-plan-card: var(--shadow-feature-card);
  --shadow-plan-button: var(--shadow-primary-btn);
  --color-plan-tab: var(--color-text-muted);
  --color-plan-tab-active: var(--color-brand-600);
  --color-plan-pill: var(--overlay-brand-500-12);

  /* --- Home Page --- */
  --shadow-home-card: var(--shadow-inspiration-card);
  --shadow-home-cta: var(--shadow-primary-btn);
  --color-home-surface: var(--color-bg-white);
}

/* Global styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-bg-cream);
  color: var(--color-text-main);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg {
  display: block;
  max-width: var(--size-full);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--color-brand-900);
  font-weight: 700;
  line-height: 1.2;
}

h1 { font-size: var(--text-size-h1); }
h2 { font-size: var(--text-size-h2); }
h3 { font-size: var(--text-size-h3); }

p {
  color: var(--color-text-muted);
  font-size: var(--text-size-p);
  margin-bottom: var(--space-4);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.skip-link {
  position: absolute;
  left: var(--size-skip-link-offset);
  top: var(--size-skip-link-top);
  background: var(--color-bg-white);
  color: var(--color-brand-700);
  padding: var(--space-2-4) var(--space-4);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-card);
  z-index: 1000;
}

.skip-link:focus {
  left: var(--space-4);
}

.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.hidden { display: none; }

/* navbar styles */
.navbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "logo  links  auth";
  align-items: center;
  padding: var(--space-4) var(--space-8);
  border-bottom: var(--border-1) solid var(--color-border);
  box-shadow: var(--shadow-sm);
  background: var(--overlay-white-85);
  backdrop-filter: blur(8px);
  position: fixed;
  width: var(--size-full);
  top: 0;
  left: 0;
  z-index: 100;
}

.logo  {
  grid-area: logo;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  justify-self: start;
  flex-shrink: 0;
}

.lucide-sparkles-icon{
  width: var(--size-icon-md); 
  height: var(--size-icon-md);
  color: var(--color-brand-500);
  flex-shrink: 0;
}

.logo-name {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-text-main);
  font-size: var(--text-size-h3);
  white-space: nowrap;
}

.nav-links {
  grid-area: links;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  justify-self: center;
}

.nav-link {
  font-weight: 500;
  color: var(--color-brand-900);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--easing-standard);
}
.nav-link:hover,
.nav-link.active { color: var(--color-brand-500); }

.nav-auth-group {
  grid-area: auth;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  justify-self: end;
}

.nav-auth {
  font-weight: 500;
  color: var(--color-brand-900);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--easing-standard);
}

.nav-auth:hover { color: var(--color-brand-500); }

.nav-signup {
  padding: var(--space-2) var(--space-5);
  background: var(--color-brand-500);
  color: var(--color-white);
  border-radius: var(--radius-full);
  font-weight: 600;
  white-space: nowrap;
  transition:
    background var(--duration-medium) var(--easing-standard),
    transform  var(--duration-medium) var(--easing-standard);
}

.nav-signup:hover {
  background: var(--color-brand-700);
  color: var(--color-white);
  transform: translateY(var(--size-lift-sm));
}

/* Checkbox + hamburger hidden on desktop */
.nav-check, #nav-check  { display: none !important; }
.nav-toggle { display: none; }

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3-6) var(--space-7-2);
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-brand-500), var(--color-brand-700));
  color: var(--color-white);
  font-weight: 600;
  font-size: var(--text-size-p);
  box-shadow: var(--shadow-home-cta);
  border: none;
  transition:
    transform    var(--duration-medium) var(--easing-standard),
    box-shadow   var(--duration-medium) var(--easing-standard),
    filter       var(--duration-medium) var(--easing-standard);
}
.cta-button:hover {
  transform:  translateY(var(--size-lift-md));
  box-shadow: var(--shadow-primary-btn-hover);
  filter: saturate(1.1) brightness(1.03);
  color: var(--color-white);
}
.cta-button:active { transform: translateY(0); }


/* Login Page */
.auth-page {
  min-height: var(--size-screen-min);
  background: var(--bg-auth-page);
}

.auth-page #main-content {
  padding: var(--space-12) var(--space-4) var(--space-16);
  display: grid;
  place-items: center;
}

.auth-page .auth-card {
  width: min(var(--size-auth-card-max), var(--size-auth-card-fluid));
  background: var(--color-bg-white);
  border: var(--border-1) solid var(--color-border);
  border-radius: calc(var(--radius-lg) + var(--size-auth-radius-offset));
  box-shadow: var(--shadow-auth-card), var(--shadow-card);
  padding: var(--space-12) var(--space-8);
  position: relative;
  overflow: hidden;
}

.auth-page .auth-card-login::before {
  content: "";
  position: absolute;
  inset: var(--auth-blob-inset);
  width: var(--size-auth-blob);
  height: var(--size-auth-blob);
  background: radial-gradient(circle, var(--overlay-brand-500-22), transparent var(--size-gradient-stop-65));
  pointer-events: none;
}

.auth-page #login-title {
  margin-bottom: var(--space-2);
  font-size: clamp(var(--text-size-login-min), var(--text-size-login-fluid), var(--text-size-login-max));
}

.auth-page #main-content p {
  margin-bottom: var(--space-6);
}

.auth-page #main-content form {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-6) 0 var(--space-8);
}

.auth-page #main-content label {
  font-weight: 600;
  color: var(--color-text-main);
  font-size: var(--text-size-sm);
}

.auth-page #main-content input {
  width: var(--size-full);
  padding: var(--space-3-4) var(--space-4);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-size-p);
  background: var(--color-rose-40);
  transition: border-color var(--duration-medium) var(--easing-standard),
    box-shadow var(--duration-medium) var(--easing-standard),
    transform var(--duration-fast) var(--easing-standard);
}

.auth-page #main-content input:focus {
  outline: none;
  border-color: var(--color-brand-500);
  box-shadow: 0 0 0 var(--size-ring) var(--overlay-brand-500-15);
  transform: translateY(var(--size-lift-sm));
}

.auth-page #main-content button[type="submit"] {
  padding: var(--space-3-6) var(--space-5);
  background: linear-gradient(135deg, var(--color-brand-500), var(--color-brand-700));
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--text-size-p);
  letter-spacing: var(--letter-spacing-tight);
  box-shadow: var(--shadow-primary-btn);
  transition: transform var(--duration-medium) var(--easing-standard),
    box-shadow var(--duration-medium) var(--easing-standard),
    filter var(--duration-medium) var(--easing-standard);
}

.auth-page #main-content button[type="submit"]:hover {
  transform: translateY(var(--size-lift-md));
  box-shadow: var(--shadow-primary-btn-hover);
  filter: saturate(1.05);
}

.auth-page #main-content button[type="submit"]:active {
  transform: translateY(0);
}

.auth-page #main-content a {
  color: var(--color-brand-700);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: var(--size-underline-offset);
}

.auth-page #main-content a:hover {
  color: var(--color-brand-600);
}

@media (max-width: 640px) {
  .auth-page #main-content {
    padding: var(--space-8) var(--space-4) var(--space-12);
  }

  .auth-page .auth-card {
    padding: var(--space-8) var(--space-6);
  }
}

/* Shared page layout */
.page-shell {
  min-height: var(--size-screen-min);
  color: var(--color-text-main);
}

.home-page {
  background: var(--bg-home-page);
}

.generate-page {
  background: var(--bg-generate-page);
}

.browse-page {
  background: var(--bg-browse-page);
}

.plans-page {
  background: var(--bg-plans-page);
}

.page-header {
  padding-top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-header > p {
  text-align: center;
  margin: 0 auto var(--space-8);
  max-width: var(--size-hero-text-max);
}

.page-title {
  text-align: center;
  max-width: var(--size-hero-max);
  margin: var(--space-8) auto var(--space-2);
  font-size: clamp(var(--text-size-hero-min), var(--text-size-hero-fluid), var(--text-size-hero-max));
}

.page-main {
  max-width: var(--size-content-max);
  margin: 0 auto;
  padding: 0 var(--space-4) var(--space-16);
}

.generate-page .page-title {
  margin: 0 auto var(--space-4);
}

.browse-page .page-title {
  margin: var(--space-8) auto;
}

.browse-page .page-header {
  text-align: center;
}

.plans-page .page-header {
  text-align: center;
}

.plans-page .page-header > p {
  padding: 0 var(--space-4);
}

.generate-page .page-main {
  margin: var(--space-4) auto;
}

/* Generate Page */
.generate-page .page-header form {
  max-width: var(--size-form-max);
  width: min(var(--size-form-max), calc(var(--size-full) - (var(--space-4) * 2)));
  margin: 0 auto;
  margin-bottom: var(--space-12);
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  border: var(--border-1) solid var(--color-border);
  box-shadow: var(--shadow-generate-form);
}

.generate-page .page-header fieldset {
  border: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: var(--space-3);
  align-items: center;
}

.generate-page .page-header form label {
  display: grid;
  gap: var(--space-1-6);
  padding: var(--space-1-6) var(--space-3-2) var(--space-2-4);
  border-radius: var(--radius-lg);
  background: var(--color-rose-25);
  border: var(--border-1) solid var(--overlay-brand-500-12);
}

.generate-page .page-header form label span {
  font-size: var(--text-size-2xs);
  letter-spacing: var(--letter-spacing-md);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}

.generate-page .page-header select {
  width: var(--size-full);
  border: none;
  background: transparent;
  font-weight: 600;
  color: var(--color-text-main);
  font-size: var(--text-size-sm);
  appearance: none;
  padding-right: var(--space-6);
  background-image: linear-gradient(45deg, transparent var(--size-half), var(--color-brand-400) var(--size-half)),
    linear-gradient(135deg, var(--color-brand-400) var(--size-half), transparent var(--size-half));
  background-position: calc(var(--size-full) - var(--size-arrow-offset-lg)) var(--size-arrow-center),
    calc(var(--size-full) - var(--size-arrow-offset-sm)) var(--size-arrow-center);
  background-size: var(--size-arrow-size) var(--size-arrow-size),
    var(--size-arrow-size) var(--size-arrow-size);
  background-repeat: no-repeat;
}

.generate-page .page-header select:focus {
  outline: none;
}

.generate-page .page-header select option {
  background: var(--color-bg-white);
  color: var(--color-text-main);
  font-weight: 500;
}

.generate-page .page-header button[type="submit"] {
  padding: var(--space-3-8) var(--space-7-2);
  border-radius: var(--radius-full);
  border: none;
  background: linear-gradient(135deg, var(--color-brand-500), var(--color-brand-700));
  color: var(--color-white);
  font-weight: 600;
  box-shadow: var(--shadow-generate-btn);
  transition: transform var(--duration-medium) var(--easing-standard),
    box-shadow var(--duration-medium) var(--easing-standard);
}

.generate-page .page-header button[type="submit"]:hover {
  transform: translateY(var(--size-lift-md));
  box-shadow: var(--shadow-generate-btn-hover);
}

.generate-page .featured-idea-title {
  margin-bottom: var(--space-12);
}

.generate-page .featured-idea-title article {
  background: var(--color-bg-white);
  border-radius: var(--radius-2xl);
  border: var(--border-1) solid var(--overlay-black-04);
  box-shadow: var(--shadow-feature-card);
  padding: var(--space-8);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.3fr);
  gap: var(--space-8);
  align-items: center;
}

.generate-page .page-main figure {
  margin: 0;
  background: var(--bg-night-sky);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.generate-page .page-main figure img {
  width: var(--size-full);
  height: var(--size-full);
  object-fit: cover;
  display: block;
}

.generate-page img[src=""] {
  opacity: 0;
}

.featured-idea-title article > section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "tags tags"
    "title title"
    "essentials tip"
    "actions actions";
  gap: var(--space-6);
  min-width: 0;
}

.idea-tags {
  grid-area: tags;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
}

.idea-tags span {
  background: var(--overlay-brand-500-12);
  color: var(--color-brand-700);
  padding: var(--space-1-2) var(--space-2-8);
  border-radius: var(--radius-full);
  font-size: var(--text-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-sm);
  font-weight: 600;
}

.featured-idea-title .idea-summary {
  grid-area: title;
  min-width: 0;
}

.featured-idea-title .idea-summary h2 {
  margin-bottom: var(--space-3);
}

.essentials {
  grid-area: essentials;
  background: var(--color-rose-50);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: var(--border-1) solid var(--overlay-brand-500-12);
}

.essentials h3 {
  font-size: var(--text-size-p);
  margin-bottom: var(--space-3);
}

.essentials p {
  margin-bottom: var(--space-2);
  font-size: var(--text-size-sm);
}

.romantics {
  grid-area: tip;
  background: var(--color-rose-60);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: var(--border-1) solid var(--overlay-brand-700-12);
}

.romantics h3 {
  font-size: var(--text-size-p);
  margin-bottom: var(--space-3);
}

.idea-actions {
  grid-area: actions;
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.idea-actions button {
  padding: var(--space-3) var(--space-5-6);
  border-radius: var(--radius-full);
  font-weight: 600;
  border: var(--border-1) solid transparent;
  background: var(--color-bg-white);
  transition: transform var(--duration-medium) var(--easing-standard),
    box-shadow var(--duration-medium) var(--easing-standard);
}

.idea-actions button:first-child {
  background: var(--color-brand-600);
  color: var(--color-white);
  box-shadow: var(--shadow-idea-primary);
}

.idea-actions button:last-child {
  border-color: var(--overlay-brand-700-40);
  color: var(--color-brand-700);
}

.inspiration-preview header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.inspiration-preview header a {
  color: var(--color-brand-700);
  font-weight: 600;
}

.inspiration-ideas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}

.inspiration-ideas article {
  background: var(--color-bg-white);
  border-radius: var(--radius-md-lg);
  padding: var(--space-4);
  border: var(--border-1) solid var(--overlay-black-04);
  box-shadow: var(--shadow-inspiration-card);
  display: grid;
  gap: var(--space-3);
}

.inspiration-ideas figure {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.inspiration-ideas article p {
  margin: 0;
  display: flex;
  gap: var(--space-2);
  font-size: var(--text-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-xs);
}

.inspiration-ideas article p span {
  color: var(--color-brand-700);
  font-weight: 600;
}

.inspiration-ideas article a {
  margin-top: var(--space-2);
  text-align: center;
  padding: var(--space-2-2) var(--space-4);
  border-radius: var(--radius-full);
  border: var(--border-1) solid var(--overlay-brand-500-40);
  color: var(--color-brand-700);
  font-weight: 600;
}

/* Shared card primitives */
.card {
  background: var(--color-bg-white);
  border-radius: var(--radius-2xl);
  border: var(--border-1) solid var(--overlay-black-04);
  padding: var(--space-4);
  display: grid;
  gap: var(--space-3);
}

.card-media {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-rose-30);
  aspect-ratio: 4 / 3;
}

.card-media img {
  width: var(--size-full);
  height: var(--size-full);
  object-fit: cover;
  display: block;
}

.tag-list {
  margin: 0;
  display: flex;
  gap: var(--space-2);
  font-size: var(--text-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-xs);
}

.tag-list > span {
  padding: var(--space-1-2) var(--space-2-8);
  border-radius: var(--radius-full);
  background: var(--overlay-brand-500-12);
  color: var(--color-brand-700);
  font-weight: 600;
}

/* Browse Page */
.browse-page .browse-title em {
  color: var(--color-brand-600);
  font-style: italic;
}

.browse-page .browse-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-4) auto;
}

.browse-page .browse-filters button {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: var(--border-1) solid var(--color-filter-border);
  background: var(--color-filter-bg);
  color: var(--color-filter-text);
  font-size: var(--text-size-sm);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-medium) var(--easing-standard),
    box-shadow var(--duration-medium) var(--easing-standard);
}

.browse-page .browse-filters button:first-child {
  background: var(--color-brand-600);
  color: var(--color-white);
  border-color: transparent;
  box-shadow: var(--shadow-filter-active);
}

.browse-page .browse-filters button:hover {
  transform: translateY(var(--size-lift-sm));
}

.browse-page .browse-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-3);
}

.browse-page .browse-grid-title {
  grid-column: 1 / -1;
  text-align: left;
  margin-bottom: var(--space-2);
}

.browse-page .browse-card {
  box-shadow: var(--shadow-browse-card);
}

.browse-page .browse-media {
  display: block;
}

.browse-page .browse-tags {
  justify-content: space-between;
}

.browse-page .browse-tags span:last-child {
  background: transparent;
  color: var(--color-text-muted);
}

.browse-page .browse-card h3 {
  margin-bottom: 0;
}

.browse-page .browse-card p:last-child {
  margin-bottom: 0;
}

/* Plans Page */
.plans-page .plans-controls {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

.plans-page .plans-tabs {
  display: flex;
  justify-content: flex-start;
  gap: var(--space-6);
  border-bottom: var(--border-1) solid var(--color-border);
  padding-bottom: var(--space-2);
}

.plans-page .plans-tabs button {
  background: transparent;
  border: none;
  color: var(--color-plan-tab);
  font-weight: 600;
  padding: var(--space-2) 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.plans-page .plans-tabs .plans-tab-active {
  color: var(--color-plan-tab-active);
  position: relative;
}

.plans-page .plans-tabs .plans-tab-active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(var(--space-2) * -1);
  width: var(--size-full);
  height: var(--border-1);
  background: var(--color-brand-600);
}

.plans-page .plans-search {
  margin-left: auto;
}

.plans-page .plans-search input {
  border: var(--border-1) solid var(--color-border);
  background: var(--color-bg-white);
  border-radius: var(--radius-md);
  padding: var(--space-3-2) var(--space-5);
  min-width: var(--size-auth-card-max);
  font-size: var(--text-size-sm);
}

.plans-page .plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.plans-page .plan-card {
  position: relative;
  box-shadow: var(--shadow-plan-card);
}

.plans-page .plan-card p {
  margin-bottom: 0; 
  font-size: var(--text-size-sm); 
}

.plans-page .plan-remove {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  border: none;
  background: var(--color-bg-white);
  border-radius: var(--radius-full);
  width: var(--space-8);
  height: var(--space-8);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-card);
}

.plans-page .plan-title {
  font-size: var(--text-size-h3);
  margin-bottom: 0;
  line-height: 1.3
}

.plans-page .plan-tags {
  margin: 0 0 var(--space-1) 0;
  flex-wrap: wrap;
  align-items: flex-start;
}

.plans-page .plan-tags > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px; 
  font-weight: 700;
  font-size: 10px; 
  letter-spacing: 0.5px;
  line-height: 1.2;
  height: fit-content; 
}

.plans-page .plan-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.plans-page .plan-link {
  padding: var(--space-2-4) var(--space-5-6);
  border-radius: var(--radius-full);
  background: var(--color-brand-600);
  color: var(--color-white);
  font-weight: 600;
  box-shadow: var(--shadow-plan-button);
}

.plans-page .plan-done {
  padding: var(--space-2-4) var(--space-5-6);
  border-radius: var(--radius-full);
  border: var(--border-1) solid var(--overlay-brand-500-12);
  background: var(--color-rose-25);
  color: var(--color-brand-700);
  font-weight: 600;
}

.home-hero {
  text-align: center;
  background-image: var(--bg-home-hero);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  padding-top: 80px;
}

.hero-content {
  max-width: var(--size-hero-max);
  margin: 0 auto;
  padding: var(--space-12) var(--space-4);
  display: grid;
  gap: var(--space-4);
  justify-items: center;
}

.hero-pill {
  padding: var(--space-1-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-rose-25);
  color: var(--color-brand-700);
  font-size: var(--text-size-xs);
  letter-spacing: var(--letter-spacing-md);
  text-transform: uppercase;
  font-weight: 600;
  box-shadow: var(--shadow-card);
}

.home-hero-title {
  font-size: clamp(var(--text-size-hero-min), var(--text-size-hero-fluid), var(--text-size-hero-max));
  margin: 0;
}

.home-hero-title em {
  color: var(--color-brand-600);
  font-style: italic;
  display: block;
}

.home-hero-subtitle {
  max-width: var(--size-hero-text-max);
  margin: 0;
  color: var(--color-text-muted);
}

.home-hero-cta { margin-top: var(--space-2); }

.home-main {
  max-width: var(--size-content-max);
  margin: 0 auto;
  margin-top: var(--space-16);
  padding: var(--space-8) var(--space-4) var(--space-8);
  display: grid;
  gap: var(--space-12);
}

.home-section {
  display: grid;
  gap: var(--space-6);
}

.section-title, .section-lead {
  margin-bottom: 0;
}

.how-it-works {
  text-align: center;
  background: var(--color-home-surface);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  border: var(--border-1) solid var(--overlay-black-04);
  box-shadow: var(--shadow-home-card);
  margin-top: calc(var(--space-12) * -1);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.feature-card {
  background: var(--color-rose-25);
  border-radius: var(--radius-2xl);
  border: var(--border-1) solid var(--overlay-black-04);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  display: grid;
  align-content: start;
  gap: var(--space-3);
  text-align: left;
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-rose-50);
  color: var(--color-brand-600);
}

.feature-title, .feature-text {
  margin-bottom: 0;
}

.romantic-experience {
  background: transparent;
  border: none;
  box-shadow: none;
}

.experience-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.experience-heading {
  display: grid;
  gap: var(--space-2);
  text-align: left;
}

.experience-controls {
  display: flex;
  gap: var(--space-2);
}

.experience-button {
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  border: var(--border-1) solid var(--overlay-black-04);
  background: var(--color-home-surface);
  color: var(--color-brand-700);
  font-weight: 600;
  box-shadow: var(--shadow-card);transition: transform var(--duration-fast) var(--easing-standard);
}
.experience-button:hover { transform: scale(1.08); }

.experience-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}

.experience-card {
  background: var(--color-home-surface);
  box-shadow: var(--shadow-home-card);
}

.experience-media {
  margin: 0;
}

.experience-media img {
  transition: transform 0.4s var(--easing-standard);
}

.experience-card:hover .experience-media img { transform: scale(1.04); }

.experience-tags {
  justify-content: space-between;
}

.experience-tags span:last-child {
  background: transparent;
  color: var(--color-text-muted);
}

.experience-title, .experience-text {
  margin-bottom: 0;
}

.memories-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

.memories-media {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--color-rose-30);
  max-height: 80vh;
}

.memories-media img {
  width: var(--size-full);
  height: var(--size-full);
  object-fit: cover;
}

.memories-content {
  display: grid;
  gap: var(--space-4);
}

.memories-list {
  display: grid;
  gap: var(--space-2);
  padding-left: 0;
  color: var(--color-text-main);
  list-style: none;
}

.memories-list li {
  position: relative;
  padding-left: var(--space-5);
}

.memories-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-2);
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-brand-600);
}

.memories-button {
  justify-self: start;
  padding: var(--space-3-6) var(--space-7-2);
  border-radius: var(--radius-full);
  border: none;
  background: var(--color-brand-600);
  color: var(--color-white);
  font-weight: 600;
  box-shadow: var(--shadow-home-cta);
}

.subscribe {
  background: var(--color-burgundy-900);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  border: var(--border-1) solid var(--overlay-white-12);
  box-shadow: var(--shadow-home-card);
  text-align: center;
  color: var(--color-white);
}

.subscribe-icon {
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-lg);
  background: var(--overlay-white-12);
  display: grid;
  place-items: center;
  margin: 0 auto var(--space-4);
}

.subscribe-icon svg {
  color: var(--color-white);
}

.subscribe-title {
  color: var(--color-white);
}

.subscribe-description {
  color: var(--overlay-white-65);
}

.subscribe-form {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
  margin: var(--space-4) auto 0;
  background: var(--overlay-white-12);
  padding: var(--space-2);
  border-radius: var(--radius-full);
  max-width: var(--size-hero-text-max);
}

.email-input {
  padding: var(--space-2-4) var(--space-5);
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  font-size: var(--text-size-sm);
  color: var(--color-white);
  flex: 1 1 auto;
}

.email-input::placeholder {
  color: var(--overlay-white-65);
}

.subscribe-button {
  padding: var(--space-2-4) var(--space-6);
  border-radius: var(--radius-full);
  border: none;
  background: var(--color-white);
  color: var(--color-brand-700);
  font-weight: 600;
  transition:
    transform    var(--duration-fast)   var(--easing-standard),
    box-shadow   var(--duration-medium) var(--easing-standard);
}

.subscribe-button:hover {
  transform:  translateY(var(--size-lift-sm));
  box-shadow: 0 4px 12px var(--overlay-white-20);
}

.no-spam {
  color: var(--overlay-white-65);
}

/* Footer */
.site-footer {
  margin-top: var(--space-16);
  background: var(--color-burgundy-900);
  color: var(--color-white);
  padding: var(--space-12) var(--space-4) var(--space-8);
}

.footer-brand {
  max-width: var(--size-footer-max);
  margin: 0 auto var(--space-6);
  text-align: center;
}

.footer-logo{
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.footer-logo svg {
  margin-right: var(--space-3);
}

.site-footer small {
  display: block;
  text-align: center;
  opacity: 0.75;
}

.site-footer p {
  margin: 0 0 var(--space-4);
  color: var(--color-bg-white);
}

.footer-nav {
  display: flex;
  justify-content: center;
  margin: 0 0 var(--space-4);
  gap: var(--space-6);
  flex-wrap: wrap;
}


@media (max-width: 1024px) {
  .featured-idea-title article,
  .memories-section {
    grid-template-columns: 1fr;
  }

  .inspiration-ideas,
  .browse-page .browse-grid,
  .plans-page .plans-grid, 
  .feature-grid,
  .experience-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .memories-media { max-height: 50vh; }
}

@media (max-width: 767px) {
  .navbar {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo    toggle"
      "links   links"
      "auth    auth";
    padding: var(--space-4);
    row-gap: 0;
    column-gap: var(--space-4);
  }

  .nav-toggle {
    grid-area: toggle;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    justify-self: end;
    align-self: center;
  }

  .nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-brand-900);
    border-radius: 2px;
    transition: transform var(--duration-medium) var(--easing-standard),
    opacity   var(--duration-medium) var(--easing-standard);
  }

  .nav-links,
  .nav-auth-group {
    display: none;
    width: 100%;
    justify-self: stretch;
  }

  .nav-check:checked ~ .nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4) 0 var(--space-2);
    border-top: var(--border-1) solid var(--color-border);
    margin-top: var(--space-3);
  }

  .nav-check:checked ~ .nav-auth-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
  }

  .nav-check:checked ~ .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-check:checked ~ .nav-toggle span:nth-child(2) {
    opacity: 0;
  }
  .nav-check:checked ~ .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .generate-page .page-header form {
    width: min(100%, 430px);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-8);
  }

  .generate-page .page-header fieldset {
    grid-template-columns: 1fr;
  }

  .generate-page .page-header button[type="submit"] {
    width: 100%;
  }

  .generate-page .featured-idea-title article {
    grid-template-columns: 1fr;
    padding: var(--space-5);
    gap: var(--space-5);
  }

  .featured-idea-title article > section {
    grid-template-columns: 1fr;
    grid-template-areas:
      "tags"
      "title"
      "essentials"
      "tip"
      "actions";
    gap: var(--space-4);
  }

  .featured-idea-title .idea-summary h2 {
    font-size: clamp(1.65rem, 8.2vw, 2.05rem);
    line-height: 1.15;
    text-wrap: balance;
  }

  .inspiration-ideas {
    grid-template-columns: 1fr;
  }

  .browse-page .navbar {
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .browse-page .browse-grid {
    grid-template-columns: 1fr;
  }

  .plans-page .plans-search input {
    min-width: var(--size-full);
  }

  .plans-page .plans-grid {
    grid-template-columns: 1fr;
  }

  .plans-controls {
    flex-direction: column;
    align-items: flex-start !important; 
    gap: var(--space-4);
  }

  .plans-tabs {
    width: 100%;
    gap: var(--space-6);
    justify-content: flex-start !important; 
  }

  .plans-search {
    width: 100%;
    margin-left: 0 !important; 
  }

  .plans-search input {
    width: 100%; 
    min-width: unset;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .experience-list {
    grid-template-columns: 1fr;
  }

  .subscribe-form {
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--radius-lg);
    padding: var(--space-3);
  }

  .email-input {
    min-width: var(--size-full);
  }

  .subscribe-button { border-radius: var(--radius-md); }
}

@media (max-width: 480px) {
  .generate-page .page-main {
    padding: 0 var(--space-3) var(--space-12);
  }

  .generate-page .featured-idea-title article {
    padding: var(--space-4);
  }

  .featured-idea-title .idea-summary h2 {
    font-size: clamp(1.45rem, 8.6vw, 1.8rem);
  }

  .hero-content { padding: var(--space-8) var(--space-4) var(--space-12); }
  .how-it-works { margin-top: 0; }
  .home-main    { margin-top: var(--space-8); }
}

@media (max-width: 360px) {
  main {
    padding: 0 var(--space-3) var(--space-8) !important;
  }

  .home-main {
    padding: var(--space-6) var(--space-3) var(--space-6) !important;
  }

  .navbar {
    padding: var(--space-3) var(--space-2);
  }
  
  .logo-name {
    font-size: 1.1rem;
  }

  .home-hero-title,
  .page-title {
    font-size: 2rem !important;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .section-lead, 
  .home-hero-subtitle {
    font-size: var(--text-size-sm);
  }

  .feature-card,
  .card,
  .how-it-works,
  .subscribe {
    padding: var(--space-4);
  }

  .cta-button, 
  .subscribe-button {
    width: 100%;
    text-align: center;
    padding: var(--space-3) var(--space-4);
  }

  /* --- Home Page  --- */
  .experience-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .experience-controls {
    align-self: flex-start;
  }

  .subscribe-form {
    padding: var(--space-1);
    background: transparent;
  }

  .email-input {
    background: var(--overlay-white-12);
    margin-bottom: var(--space-2);
  }

  /* --- Browse Page  --- */
  .browse-filters {
    gap: var(--space-2);
  }

  .browse-filters button {
    padding: var(--space-1-2) var(--space-3);
    font-size: var(--text-size-xs);
  }

  .plans-controls {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }

  .plans-tabs {
    gap: var(--space-4);
    justify-content: flex-start;
  }

  .plans-tabs button {
    font-size: var(--text-size-sm);
  }

  .plan-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .plan-link, 
  .plan-done {
    width: 100%;
    text-align: center;
  }
  
  .plan-remove {
    width: var(--space-6);
    height: var(--space-6);
    top: var(--space-3);
    right: var(--space-3);
  }

  /* generate page */
  .generate-page .page-header > p {
    padding: 0 var(--space-4)
  }
}