body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  background: #ffffff;
}

.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-background svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  padding: 2rem;
}

.hero-content h1 {
  font-size: 3rem;
  color: #030213;
  margin-bottom: 1rem;
}

.hero-content p {
  font-size: 1.25rem;
  color: #555;
  margin-bottom: 2rem;
}

.hero-button {
  background-color: #3f51f4;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s;
}

.hero-button:hover {
  background-color: #2c3ad6;
}

/* Feedback fragment utilities (used by the injected fragment and JS initializer) */
.feedback-form { font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial; }
.feedback-form label{ display:block; font-weight:600; margin-bottom:6px; color:#0f172a; }
.feedback-field{ width:100%; padding:10px 12px; border:1px solid #e6e6e6; border-radius:8px; background:#fafafa; }
.feedback-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }
.btn-primary{ background:#0ea5a4; color:#fff; padding:8px 12px; border-radius:8px; border:none; }
.btn-cancel{ background:#f3f4f6; color:#111827; padding:8px 12px; border-radius:8px; border:none; }
.rating-wrap{ display:flex; gap:8px; align-items:center; }
.star{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:#94a3b8; font-size:20px; border-radius:8px; transition:transform .12s ease, color .16s ease, box-shadow .16s ease, background-color .16s ease; background: transparent; border: none; }
.star:hover{ transform:scale(1.08); box-shadow:0 8px 20px rgba(2,6,23,0.08); }
.star:focus{ outline: none; box-shadow: 0 6px 20px rgba(14,165,233,0.12); border-radius:8px; }
.star.filled{ color:#fbbf24; /* amber-400 */ background: rgba(251,191,36,0.08); text-shadow:0 1px 0 rgba(0,0,0,0.06); transform:translateY(-2px); box-shadow:0 8px 24px rgba(251,191,36,0.08); }
.star.pop{ transform:scale(1.18) translateY(-2px); box-shadow:0 14px 40px rgba(2,6,23,0.12); }
.rating-raw{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; overflow:hidden !important; }

/* Recommend pill styles */
.recommend-pill { transition: background-color .12s ease, color .12s ease, transform .12s ease; background: #ffffff; color: #0f172a; border:1px solid #e6e6e6; }
.recommend-pill:focus{ outline:none; box-shadow:0 6px 20px rgba(14,165,233,0.12); }
.recommend-pill:hover{ transform: translateY(-1px); filter:brightness(.98); }
.recommend-pill.selected, .recommend-pill.bg-teal-600 { background-color:#0ea5a4 !important; color: #ffffff !important; border-color: #0ea5a4 !important; }
.recommend-pill.selected:focus, .recommend-pill.selected:hover{ box-shadow: 0 8px 24px rgba(14,165,164,0.12); }

/* Ensure pointer cursor and visible borders on hover */
.recommend-pill{ cursor:pointer; }
.recommend-pill.selected{ box-shadow: 0 6px 18px rgba(14,165,164,0.12); }

/* Inbox list: square avatar and name boxes to avoid strange gaps and invisible links */
.inbox-link { display:flex; align-items:center; justify-content:space-between; width:100%; }
.inbox-avatar-square{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; background:#f3f4f6; border:1px solid #e6e6e6; }
.inbox-name-box{ min-width:160px; }
.inbox-link .username-text{ display:inline-block; }
.inbox-profile-link{ opacity:0.9; padding:6px; border-radius:6px; }
.inbox-profile-link svg{ display:block; }

/* Ensure inbox items have tight spacing without dark gaps */
.flex-1.overflow-y-auto.space-y-4 li { margin:0; padding:0; }
.flex-1.overflow-y-auto.space-y-4 li + li { margin-top: 8px; }