@import url("https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@8..32,300..800&display=swap");
@import "actiontext.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer base {
  :root {
    --font-body-wght: 420;
    --font-body-wdth: 98;
    --font-heading-wght: 640;
    --font-heading-wdth: 108;
    --font-label-wght: 560;
    --font-label-wdth: 115;
  }

  body {
    font-family: "Google Sans Flex", "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-variation-settings: "wght" var(--font-body-wght), "wdth" var(--font-body-wdth);
    font-feature-settings: "case" 0;
  }

  h1, h2, h3, h4, h5, h6 {
    font-variation-settings: "wght" var(--font-heading-wght), "wdth" var(--font-heading-wdth);
    letter-spacing: 0.01em;
  }

  strong, b {
    font-variation-settings: "wght" 680, "wdth" 105;
  }

  .uppercase, [class*="tracking-"] {
    font-variation-settings: "wght" var(--font-label-wght), "wdth" var(--font-label-wdth);
  }
}

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

@layer components {
  .landing-section {
    @apply relative mx-auto w-full max-w-6xl px-6 py-16 md:px-12 md:py-24;
  }

  .full-bleed {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
  }

  .landing-card {
    @apply rounded-3xl border border-neutral-border/60 bg-neutral-surface/90 p-8 shadow-xl backdrop-blur-lg transition-transform duration-300;
  }

  .landing-card:hover {
    @apply -translate-y-2 shadow-2xl;
  }

  .landing-pill {
    @apply inline-flex items-center gap-2 rounded-full border border-brand-light/40 bg-brand-soft/60 px-4 py-2 text-sm font-semibold uppercase tracking-wide text-brand-dark shadow-sm backdrop-blur;
  }

  .landing-cta-primary {
    @apply inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-brand-gradientFrom via-brand-gradientVia to-brand-gradientTo px-8 py-3 text-base font-semibold text-white shadow-[0_20px_50px_rgba(124,58,237,0.35)] transition-transform duration-200 hover:-translate-y-1 hover:shadow-[0_26px_60px_rgba(124,58,237,0.45)] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-brand-light/60;
  }

  .landing-cta-secondary {
    @apply inline-flex items-center gap-2 rounded-full border border-brand-light/40 bg-white px-8 py-3 text-base font-semibold text-brand-dark shadow-md transition-all duration-200 hover:-translate-y-1 hover:border-brand-light hover:text-brand hover:shadow-xl focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-brand-soft;
  }

  .landing-bubble {
    @apply absolute rounded-full bg-gradient-to-br from-brand-gradientFrom via-brand-gradientVia to-brand-gradientTo opacity-30 blur-3xl;
  }

  .landing-divider {
    @apply mx-auto mt-10 h-px w-28 bg-gradient-to-r from-transparent via-brand-gradientVia/40 to-transparent;
  }

  .calendar-shell {
    @apply relative overflow-hidden rounded-[2.75rem] border border-white/40 bg-white/80 shadow-[0_45px_120px_rgba(15,23,42,0.16)] backdrop-blur-2xl;
  }

  .calendar-shell__glow {
    @apply pointer-events-none absolute inset-0;
    background: radial-gradient(circle at top left, rgba(147, 51, 234, 0.25), transparent 55%),
                radial-gradient(circle at bottom right, rgba(236, 72, 153, 0.2), transparent 50%);
  }

  .calendar-shell__content {
    @apply relative z-10 px-8 py-10 md:px-12;
  }

  .calendar-shell__badge {
    @apply items-center gap-2 rounded-full bg-brand-soft/90 px-5 py-2 text-xs font-semibold uppercase tracking-[0.35em] text-brand shadow-sm;
  }

  .calendar-surface {
    @apply rounded-[2.25rem] border border-brand-light/40 bg-white/85 p-6 shadow-[0_35px_90px_rgba(147,51,234,0.12)] backdrop-blur-xl;
  }

  .calendar-modern .fc {
    @apply text-neutral-text;
  }

  .calendar-modern .fc-scrollgrid,
  .calendar-modern .fc-scrollgrid td,
  .calendar-modern .fc-scrollgrid th {
    border-color: rgba(147, 51, 234, 0.08);
  }

  .calendar-modern .fc-toolbar.fc-header-toolbar {
    @apply flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between;
    margin-bottom: 1.5rem;
  }

  .calendar-modern .fc-toolbar-title {
    @apply text-xl font-semibold text-neutral-text sm:text-2xl;
  }

  .calendar-modern .fc-toolbar-chunk {
    @apply flex items-center gap-3;
  }

  .calendar-modern .fc-button-group {
    @apply flex rounded-full bg-white/80 p-1 shadow-sm;
  }

  .calendar-modern .fc-button {
    @apply rounded-full border border-transparent bg-white/0 px-5 py-2 text-[11px] font-semibold uppercase tracking-[0.35em] text-brand transition;
  }

  .calendar-modern .fc-button:hover {
    @apply bg-white/70 text-brand-dark;
  }

  .calendar-modern .fc-button:focus {
    @apply outline-none ring-0;
  }

  .calendar-modern .fc-button-primary:not(:disabled).fc-button-active,
  .calendar-modern .fc-button-primary:not(:disabled):active {
    @apply bg-gradient-to-r from-brand-gradientFrom to-brand-gradientTo text-white shadow-[0_18px_45px_rgba(147,51,234,0.35)];
    border: none;
  }

  .calendar-modern .fc-button-primary {
    @apply bg-white/70 text-brand;
    border: none;
  }

  .calendar-modern .fc-button-primary:not(:disabled):hover {
    @apply text-brand-dark;
  }

  .calendar-modern .fc-daygrid-day-number {
    @apply block text-sm font-semibold text-neutral-muted transition;
    padding: 0.35rem 0.5rem;
  }

  .calendar-modern .fc-daygrid-day {
    @apply transition-colors duration-200;
  }

  .calendar-modern .fc-daygrid-day:hover {
    @apply bg-brand-soft/40;
  }

  .calendar-modern .fc-day-today {
    @apply bg-brand-soft/60;
  }

  .calendar-modern .fc-day-today .fc-daygrid-day-number {
    @apply inline-flex items-center justify-center rounded-full bg-gradient-to-r from-brand-gradientFrom to-brand-gradientTo px-3 text-xs font-bold uppercase tracking-[0.35em] text-white shadow-[0_14px_35px_rgba(147,51,234,0.3)];
  }

  .calendar-modern .fc-col-header-cell-cushion {
    @apply text-xs font-semibold uppercase tracking-[0.35em] text-neutral-muted;
  }

  .calendar-modern .fc-daygrid-day-frame {
    @apply flex flex-col;
  }

  .calendar-modern .fc-day-other .fc-daygrid-day-number {
    @apply text-neutral-muted/50;
  }

  .calendar-modern .calendar-event {
    @apply block rounded-2xl border-none px-4 py-2 text-[11px] font-semibold uppercase tracking-[0.35em] text-white shadow-[0_20px_55px_rgba(147,51,234,0.3)] transition;
  }

  .calendar-modern .calendar-event:hover {
    @apply -translate-y-0.5 shadow-[0_26px_65px_rgba(147,51,234,0.35)];
  }

  .calendar-expand-btn {
    @apply inline-flex items-center gap-2 rounded-full border border-brand-light/40 bg-white/90 px-5 py-2 text-xs font-semibold uppercase tracking-[0.35em] text-brand transition hover:-translate-y-0.5 hover:bg-white shadow-sm;
  }

  .calendar-today {
    @apply rounded-[2.25rem] border border-white/50 bg-white/85 p-6 shadow-[0_35px_80px_rgba(15,23,42,0.12)] backdrop-blur-xl transition;
  }

  .calendar-today__header {
    @apply flex flex-wrap items-center justify-between gap-4;
  }

  .calendar-today__date-label {
    @apply text-xs uppercase tracking-[0.45em] text-neutral-muted/80;
  }

  .calendar-today__date-value {
    @apply text-2xl font-semibold text-neutral-text sm:text-3xl;
  }

  .calendar-today__jump {
    @apply inline-flex items-center rounded-full border border-transparent bg-brand-soft/80 px-5 py-2 text-xs font-semibold uppercase tracking-[0.35em] text-brand transition hover:-translate-y-0.5 hover:bg-brand-soft shadow-sm;
  }

  .calendar-today__list {
    @apply mt-6 space-y-4;
  }

  .calendar-today__item {
    @apply flex items-start gap-4 rounded-3xl border border-brand-light/30 bg-white/95 px-5 py-4 shadow-[0_18px_45px_rgba(15,23,42,0.08)] transition hover:-translate-y-0.5 hover:shadow-[0_24px_55px_rgba(147,51,234,0.2)];
  }

  .calendar-today__time {
    @apply text-sm font-semibold uppercase tracking-[0.35em] text-brand;
  }

  .calendar-today__meta {
    @apply text-xs uppercase tracking-[0.35em] text-neutral-muted/80;
  }

  .calendar-today__placeholder {
    @apply flex items-center gap-4 rounded-3xl border border-dashed border-brand-light/40 bg-white/70 px-5 py-6 text-sm text-neutral-muted;
  }

  .calendar-today__empty-icon {
    @apply flex h-10 w-10 items-center justify-center rounded-2xl bg-brand-soft/80 text-xl;
  }

  .calendar-modal__backdrop {
    @apply fixed inset-0 z-[120] flex items-center justify-center bg-neutral-text/40 backdrop-blur-sm opacity-0 pointer-events-none transition-opacity duration-200;
  }

  .calendar-modal__backdrop.is-visible {
    @apply opacity-100;
    pointer-events: auto;
  }

  .calendar-modal__panel {
    @apply relative w-full max-w-4xl translate-y-4 rounded-[1.5rem] border border-white/30 bg-white/95 px-5 py-6 sm:px-7 sm:py-7 shadow-[0_30px_80px_rgba(15,23,42,0.25)] opacity-0 transition-all duration-200 overflow-hidden;
  }

  .calendar-modal__panel--visible {
    @apply translate-y-0 opacity-100;
  }

  .calendar-modal__actions {
    @apply flex items-center gap-3;
  }

  .calendar-modal__close {
    @apply inline-flex h-10 w-10 items-center justify-center rounded-full border border-brand-light/30 bg-white/90 text-brand transition hover:-translate-y-0.5 hover:bg-white;
  }

  .calendar-modal__header {
    @apply flex flex-wrap items-center justify-between gap-4;
  }

  .calendar-modal__today {
    @apply inline-flex items-center gap-2 rounded-full border border-brand-light/30 bg-white/90 px-5 py-2 text-xs font-semibold uppercase tracking-[0.35em] text-brand transition hover:-translate-y-0.5 hover:bg-white;
  }

  .calendar-modal__surface {
    @apply mt-5 max-h-[65vh] w-full overflow-y-auto rounded-[1.25rem] border border-brand-light/30 bg-white/90 p-3 shadow-[0_25px_65px_rgba(147,51,234,0.12)] backdrop-blur-xl;
  }

  .group-shell {
    @apply full-bleed overflow-hidden bg-gradient-to-br from-brand-soft/40 via-neutral-bg to-neutral-bg;
  }

  .group-hero {
    @apply landing-section pb-10 pt-24 md:pt-32;
  }

  .group-hero__panel {
    @apply glass-panel flex flex-col gap-6 bg-gradient-to-r from-brand-gradientFrom/95 via-brand-gradientVia/85 to-brand-gradientTo/90 text-white shadow-[0_40px_120px_rgba(124,58,237,0.35)];
  }

  .group-hero__title {
    @apply text-3xl font-bold sm:text-4xl;
  }

  .group-hero__subtitle {
    @apply text-sm text-white/80 max-w-3xl;
  }

  .group-grid {
    @apply grid gap-6 sm:grid-cols-2 xl:grid-cols-3;
  }

  .group-card {
    @apply glass-panel flex h-full flex-col gap-5;
  }

  .group-card__header {
    @apply flex items-start justify-between gap-3;
  }

  .group-card__title {
    @apply text-xl font-semibold text-neutral-text;
  }

  .group-card__meta {
    @apply text-xs uppercase tracking-[0.35em] text-neutral-muted/70;
  }

  .group-card__description {
    @apply text-sm text-neutral-muted;
  }

  .group-card__actions {
    @apply flex flex-wrap gap-2;
  }

  .member-card {
    @apply glass-panel flex flex-col gap-1 bg-white/90;
  }

  .member-card__name {
    @apply text-lg font-semibold text-neutral-text;
  }

  .member-card__tag {
    @apply text-xs uppercase tracking-[0.35em] text-neutral-muted/80;
  }

  .friend-option {
    @apply flex cursor-pointer items-center justify-between gap-4 rounded-3xl border border-brand-light/40 bg-white/80 px-5 py-4 text-sm shadow-[0_12px_30px_rgba(147,51,234,0.08)] transition hover:-translate-y-0.5 hover:shadow-[0_20px_45px_rgba(147,51,234,0.18)];
  }

  .friend-option[data-selected="true"] {
    @apply border-brand-light bg-brand-soft/80 shadow-[0_20px_45px_rgba(147,51,234,0.25)];
  }

  .friend-option__meta {
    @apply text-xs uppercase tracking-[0.35em] text-neutral-muted/70;
  }

  .friend-option__checkbox {
    @apply flex h-8 w-8 items-center justify-center rounded-full border border-brand-light/40 bg-white text-brand transition;
  }

  .friend-option[data-selected="true"] .friend-option__checkbox {
    @apply bg-gradient-to-r from-brand-gradientFrom to-brand-gradientTo text-white shadow-[0_18px_45px_rgba(147,51,234,0.35)];
  }

  .profile-shell {
    @apply full-bleed overflow-hidden bg-gradient-to-br from-brand-soft/30 via-neutral-bg to-neutral-bg;
  }

  .profile-hero {
    @apply landing-section pb-10 pt-24 md:pt-32;
  }

  .profile-hero__panel {
    @apply glass-panel flex flex-col items-center gap-8 bg-gradient-to-r from-brand-gradientFrom/95 via-brand-gradientVia/85 to-brand-gradientTo/90 text-white shadow-[0_40px_120px_rgba(124,58,237,0.35)] md:flex-row md:items-stretch;
  }

  .profile-hero__panel--muted {
    @apply bg-white/95 text-neutral-text;
  }

  .profile-hero__avatar {
    @apply relative flex-shrink-0;
  }

  .profile-avatar {
    @apply h-44 w-44 rounded-full border-4 border-white/80 object-cover shadow-[0_25px_60px_rgba(124,58,237,0.45)];
  }

  .profile-avatar--small {
    @apply h-32 w-32 rounded-full border-4 border-white/80 object-cover shadow-md;
  }

  .profile-hero__details {
    @apply flex flex-col gap-4 md:justify-between;
  }

  .profile-hero__title {
    @apply text-3xl font-bold sm:text-4xl;
  }

  .profile-hero__subtitle {
    @apply text-sm text-white/75 max-w-2xl md:text-base;
  }

  .profile-hero__actions {
    @apply flex flex-wrap items-center gap-3;
  }

  .profile-card {
    @apply glass-panel space-y-4;
  }

  .profile-card__title {
    @apply text-lg font-semibold text-neutral-text;
  }

  .profile-meta-grid {
    @apply grid gap-4 sm:grid-cols-2;
  }

  .profile-meta-grid dt {
    @apply text-xs uppercase tracking-[0.35em] text-neutral-muted/70;
  }

  .profile-meta-grid dd {
    @apply mt-1 text-sm font-semibold text-neutral-text;
  }

  .profile-share {
    @apply flex flex-wrap items-center gap-3 rounded-3xl border border-brand-light/40 bg-white/80 px-4 py-3 text-sm text-neutral-muted;
  }

  .profile-avatar-upload input[type="file"] {
    @apply w-full;
  }

  .share-shell {
    @apply full-bleed min-h-screen overflow-hidden bg-gradient-to-br from-brand-soft/30 via-neutral-bg to-neutral-bg pb-16;
  }

  .share-hero {
    @apply landing-section pt-24 md:pt-32;
  }

  .share-hero__panel {
    @apply glass-panel grid gap-8 bg-gradient-to-r from-brand-gradientFrom/95 via-brand-gradientVia/85 to-brand-gradientTo/90 text-white shadow-[0_40px_120px_rgba(124,58,237,0.35)] md:grid-cols-[auto_minmax(0,1fr)];
  }

  .share-hero__details {
    @apply flex flex-col gap-4;
  }

  .share-hero__title {
    @apply text-3xl font-bold sm:text-4xl;
  }

  .share-hero__subtitle {
    @apply text-sm text-white/75 max-w-3xl;
  }

  .share-hero__meta {
    @apply flex flex-wrap items-center gap-3 text-xs uppercase tracking-[0.35em] text-white/70;
  }

  .share-hero__actions {
    @apply flex flex-wrap items-center gap-3;
  }

  .share-card {
    @apply glass-panel space-y-4;
  }

  .share-card__header {
    @apply flex flex-wrap items-center justify-between gap-3;
  }

  .share-card__url {
    @apply flex w-full min-w-0 items-center gap-3 rounded-3xl border border-brand-light/40 bg-white/85 px-4 py-3 text-sm text-neutral-muted;
  }

  .share-card__url span {
    @apply min-w-0 flex-1 truncate;
  }

  .share-card__url button {
    @apply flex-shrink-0;
  }

  .share-card__metrics {
    @apply flex items-center gap-3 text-xs uppercase tracking-[0.35em] text-neutral-muted/70;
  }

  .glass-panel {
    @apply relative overflow-visible rounded-3xl border border-white/20 bg-white/80 p-6 shadow-[0_25px_60px_rgba(15,23,42,0.12)] backdrop-blur-xl transition-all duration-300;
  }

  .glass-panel:hover {
    @apply -translate-y-1 shadow-[0_35px_80px_rgba(124,58,237,0.25)];
  }

  .metric-card {
    @apply flex flex-col rounded-2xl border border-brand-light/30 bg-white/90 px-5 py-4 shadow-md transition-transform duration-200 hover:-translate-y-1 hover:shadow-xl;
  }

  .metric-value {
    @apply text-3xl font-bold text-brand;
  }

  .metric-label {
    @apply text-xs uppercase tracking-[0.35em] text-neutral-muted/80 mt-2;
  }

  .sub-event-card {
    @apply rounded-2xl border border-white/30 bg-white/85 px-5 py-4 shadow-sm transition;
  }

  .sub-event-timeline__list {
    @apply relative space-y-6 pl-0;
  }

  .sub-event-timeline__list::before {
    content: "";
    position: absolute;
    left: 1.75rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: linear-gradient(180deg, rgba(124,58,237,0.4), rgba(0,255,213,0.3));
  }

  .sub-event-timeline__item {
    @apply relative pl-20;
  }

  .sub-event-timeline__dot {
    @apply absolute left-[0.9rem] top-1/2 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full bg-gradient-to-br from-brand-gradientFrom to-brand-gradientTo text-[0.6rem] font-semibold uppercase tracking-[0.45em] text-white shadow-[0_12px_28px_rgba(124,58,237,0.45)];
  }

  .sub-event-timeline__card {
    @apply grid gap-4 rounded-[1.8rem] border border-white/60 bg-white/95 p-5 shadow-[0_25px_55px_rgba(15,23,42,0.15)] md:grid-cols-[150px_minmax(0,1fr)];
  }

  .sub-event-timeline__meta {
    @apply flex flex-col gap-2 rounded-2xl border border-brand-light/20 bg-gradient-to-br from-brand-soft/60 to-white/20 px-4 py-3 text-brand-dark;
  }

  .sub-event-timeline__date {
    @apply text-xs font-semibold tracking-[0.35em];
  }

  .sub-event-timeline__time {
    @apply text-base font-semibold;
  }

  .sub-event-timeline__details {
    @apply rounded-2xl border border-white/40 bg-white/90 px-4 py-3;
  }

  .chip-link {
    @apply inline-flex items-center gap-2 rounded-full border border-brand-light/40 bg-white/80 px-5 py-2 text-sm font-semibold text-brand transition-all duration-200 hover:-translate-y-0.5 hover:border-brand-light hover:bg-brand-soft/60 hover:text-brand-dark;
  }

  .chip-link--primary {
    @apply inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-brand-gradientFrom via-brand-gradientVia to-brand-gradientTo px-6 py-3 text-sm font-semibold text-white shadow-[0_18px_45px_rgba(124,58,237,0.35)] transition-transform duration-200 hover:-translate-y-1 hover:shadow-[0_26px_65px_rgba(124,58,237,0.45)];
  }

  .event-feed-card {
    @apply glass-panel p-0 overflow-hidden;
  }

  .event-feed-card__header {
    @apply relative h-48 overflow-hidden;
  }

  .event-feed-card__body {
    @apply space-y-4 p-6;
  }

  .avatar-stack {
    @apply flex -space-x-3;
  }

  .avatar-stack__item {
    @apply relative inline-flex h-11 w-11 items-center justify-center rounded-full border-2 border-white bg-brand-soft text-brand font-semibold shadow-lg;
  }

  .soft-badge {
    @apply inline-flex items-center gap-2 rounded-full bg-brand-soft/80 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-brand;
  }

  .mission-card {
    @apply rounded-2xl border border-white/30 bg-gradient-to-br from-brand-soft/50 via-white/90 to-white p-5 shadow-[0_20px_45px_rgba(15,23,42,0.15)] transition hover:-translate-y-1 hover:shadow-[0_30px_65px_rgba(124,58,237,0.25)];
  }

  .mission-card__eyebrow {
    @apply text-xs uppercase tracking-[0.45em] text-brand-dark/70;
  }

  .mission-card__reward {
    @apply inline-flex items-center rounded-full bg-brand-soft/70 px-3 py-1 text-xs font-semibold text-brand;
  }

  .mission-card__progress {
    @apply mt-4 flex items-center gap-3 text-xs font-semibold text-neutral-muted;
  }

  .mission-card__progress-track {
    @apply relative h-1 flex-1 rounded-full bg-neutral-border/60 overflow-hidden;
  }

  .mission-card__progress-bar {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #7c3aed, #00ffd5);
    transition: width 0.4s ease;
  }

  .mission-card__progress span {
    @apply text-neutral-text;
  }

  .mission-card__status {
    @apply text-[0.65rem] uppercase tracking-[0.35em] text-neutral-muted mt-3;
  }

  .xp-card {
    @apply relative overflow-hidden;
  }

  .xp-meter {
    @apply relative h-2 w-full rounded-full bg-neutral-border/60 overflow-hidden;
  }

  .xp-meter__bar {
    @apply h-full rounded-full bg-gradient-to-r from-brand-gradientFrom via-brand-gradientVia to-brand-gradientTo transition-all duration-500;
  }

  .badge-pill {
    @apply inline-flex items-center rounded-full border border-brand-light/40 bg-white/80 px-3 py-1 text-xs font-semibold text-brand;
  }

  .timeline-card {
    @apply glass-panel p-5;
  }

  .info-chip {
    @apply inline-flex items-center gap-2 rounded-full border border-brand-light/40 bg-white/80 px-4 py-1 text-xs font-semibold uppercase tracking-[0.35em] text-neutral-muted/80 shadow-sm;
  }

  .icon-circle {
    @apply flex h-12 w-12 items-center justify-center rounded-full bg-brand-soft/70 text-brand text-xl shadow-inner;
  }

  .modal-backdrop {
    @apply fixed inset-0 z-[80] hidden flex items-center justify-center bg-neutral-text/60 backdrop-blur-[12px] opacity-0 transition-opacity duration-200 ease-out;
  }

  .modal-panel {
    @apply relative max-h-[85vh] w-full max-w-4xl overflow-y-auto rounded-3xl bg-white p-8 shadow-[0_50px_120px_rgba(15,23,42,0.35)] transition-all duration-200 ease-out;
  }

  .nav-trigger {
    @apply inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold text-white/70 transition duration-200 hover:text-white hover:bg-white/10;
  }

  .nav-trigger--active {
    @apply text-white bg-white/10;
  }

  .nav-icon {
    @apply inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/15 text-base text-white/75 transition duration-200;
  }

  .nav-trigger:not(.nav-trigger--active) .nav-icon {
    @apply text-white/70;
  }

  .nav-trigger--active .nav-icon {
    @apply bg-white text-brand;
  }

  .nav-icon--avatar {
    @apply h-8 w-8 rounded-full border border-white/30 object-cover shadow-inner;
  }

  .form-card {
    @apply glass-panel space-y-5;
  }

  .form-card__header {
    @apply flex items-start justify-between gap-4;
  }

  .form-card__eyebrow {
    @apply text-xs uppercase tracking-[0.35em] text-neutral-muted font-semibold;
  }

  .form-card__title {
    @apply text-lg font-semibold text-neutral-text;
  }

  .form-card__subtitle {
    @apply text-sm text-neutral-muted;
  }

  .form-field {
    @apply flex flex-col gap-2;
  }

  .form-label {
    @apply text-xs uppercase tracking-[0.32em] text-neutral-muted font-semibold;
  }

  .form-input {
    @apply w-full rounded-2xl border border-white/40 bg-white/80 px-4 py-3 text-neutral-text shadow-inner focus:outline-none focus:ring-2 focus:ring-brand-light focus:border-transparent transition;
  }

  .form-file {
    @apply block w-full text-sm text-neutral-muted file:mr-4 file:rounded-full file:border-0 file:bg-brand file:px-4 file:py-2 file:text-white hover:file:bg-brand-dark;
  }

  .form-helper {
    @apply text-xs text-neutral-muted;
  }

  .form-rich-text {
    @apply rounded-2xl border border-white/40 bg-white/80 px-3 py-2 shadow-inner;
  }

  .form-rich-text trix-editor {
    @apply min-h-[220px] bg-transparent text-neutral-text;
  }

  .form-attachment {
    @apply space-y-3;
  }

  .form-attachment__item {
    @apply flex items-center justify-between gap-4 rounded-2xl border border-white/30 bg-white/85 px-4 py-3 shadow-sm;
  }

  .form-attachment__icon {
    @apply inline-flex h-10 w-10 items-center justify-center rounded-full bg-brand-soft/80 text-brand text-base;
  }

  .nav-cta {
    @apply inline-flex items-center gap-3 rounded-full bg-white text-brand px-6 py-2 text-sm font-semibold shadow-[0_12px_30px_rgba(255,255,255,0.3)] transition hover:-translate-y-0.5 hover:shadow-[0_18px_45px_rgba(255,255,255,0.4)];
  }

  .nav-popover {
    @apply absolute right-0 mt-3 w-52 rounded-2xl border border-white/10 bg-neutral-text/90 p-3 text-sm text-white shadow-2xl backdrop-blur-xl transition;
  }

  .nav-popover__link {
    @apply block rounded-xl px-3 py-2 text-white/80 transition hover:bg-white/10 hover:text-white;
  }

  .nav-section-trigger {
    @apply flex flex-col rounded-2xl border border-white/10 px-4 py-3 text-left text-white transition hover:bg-white/10;
  }

  .nav-card {
    @apply flex flex-col gap-1 rounded-2xl border border-white/10 bg-white/10 px-4 py-3 text-white transition hover:border-white/40 hover:bg-white/20;
  }

  .nav-card__title {
    @apply text-sm font-semibold;
  }

  .nav-card__desc {
    @apply text-xs text-white/80;
  }

  .mobile-nav-link {
    @apply flex flex-col gap-1 rounded-2xl border border-neutral-border bg-white/90 px-4 py-3 text-sm font-semibold text-neutral-text shadow-sm transition hover:-translate-y-0.5 hover:bg-white;
  }

  .mobile-nav-link span:last-child {
    @apply text-xs font-normal text-neutral-muted;
  }

  .mobile-nav-cta {
    @apply inline-flex w-full items-center justify-center rounded-full bg-brand text-white px-5 py-3 text-sm font-semibold shadow-glow transition hover:-translate-y-0.5 hover:bg-brand-dark;
  }
}

@layer utilities {
  .bg-shimmer {
    background-size: 200% 100%;
    background-image: linear-gradient(120deg, rgba(124,58,237,0.18), rgba(236,72,153,0.1), rgba(124,58,237,0.18));
  }

  .bg-dotted {
    background-image: radial-gradient(circle at 1px 1px, rgba(124, 58, 237, 0.18) 1px, transparent 0);
    background-size: 22px 22px;
  }

  .shadow-glow {
    box-shadow: 0 22px 40px rgba(124, 58, 237, 0.25);
  }
}

html {
  scroll-behavior: smooth;
}

.youtube-embed {
  margin: 1rem 0;
  position: relative;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.youtube-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

ul {
  list-style-type: disc; /* Bullet points for unordered lists */
  margin-left: 1.5rem; /* Indent the list */
  margin-bottom: 1rem; /* Space below the list */
}

ul > li {
  margin-bottom: 0.5rem; /* Space between list items */
  padding-left: 0.5rem; /* Space between bullet and text */
}

ol {
  list-style-type: decimal; /* Numbered items for ordered lists */
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

ol > li {
  margin-bottom: 0.5rem;
  padding-left: 0.5rem;
}

ul, ol {
  font-family: 'Inter', sans-serif; /* Optional: Custom font */
  font-size: 1rem; /* Adjust font size */
  color: #4a5568; /* Tailwind gray-700 */
}

ul > li::marker,
ol > li::marker {
  color: #ff4d4d; /* Optional: Custom marker color */
}

/* Flash message animations */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.flash-message {
  animation: fade-in 0.3s ease-out;
}

/* Flash message types */
.flash-notice {
  background-color: #4caf50; /* Green for success */
  color: white;
}

.flash-alert {
  background-color: #f44336; /* Red for errors */
  color: white;
}

.flash-info {
  background-color: #2196f3; /* Blue for information */
  color: white;
}

.flash-warning {
  background-color: #ff9800; /* Orange for warnings */
  color: white;
}

/* Make the calendar smaller */
.fc {
  border-radius: 8px;
  padding: 12px;
  background-color: #ffffff;
  font-size: 0.85rem; /* Reduce text size */

  .fc-toolbar-title {
    font-size: 1; /* Smaller title */
    font-weight: 600;
    color: #1e293b;
    text-align: center;
    margin: 4px 0;
  }
}

/* In app/assets/stylesheets/app.css or imported manually */
.fc .fc-button {
  @apply bg-brand text-white font-semibold py-1 px-3 rounded shadow-sm transition;
}
.fc .fc-button:hover {
  @apply bg-brand-light;
}
.fc .fc-button.fc-button-active {
  @apply bg-brand-dark;
}
.fc .fc-toolbar-title {
  @apply text-sm font-bold text-neutral-text;
}
.fc .fc-daygrid-day-number {
  @apply text-sm text-neutral-muted hover:underline;
}

.fc-toolbar .fc-button:hover {
  background-color: #334155;
}

.fc-toolbar .fc-button.fc-button-active {
  background-color: #f56565;
}

/* Smaller View Mode Buttons ("Month", "Week", "Day") */
.fc-button-group .fc-button {
  margin: 0 2px;
  border-radius: 5px;
  background-color: #1e293b;
  color: white;
  padding: 4px 6px;
  font-size: 0.75rem;
  transition: 0.3s;
}

.fc-button-group .fc-button:hover {
  background-color: #334155;
}

.fc-button-group .fc-button.fc-button-active {
  background-color: #f56565;
}

/* Reduce Calendar Cell Size */
.fc-daygrid-day {
  border: 1px solid #e2e8f0;
  background-color: #f8fafc;
  transition: background-color 0.3s ease;
  height: 30px; /* Smaller cell height */
}

.fc-daygrid-day:hover {
  background-color: #edf2f7;
}

/* Reduce Size of Today's Highlight */
.fc-day-today {
  background-color: #fef2f2;
}

/* Make Events Smaller */
.fc-event {
  border-radius: 5px;
  padding: 2px 4px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .fc-toolbar {
    flex-direction: column;
    gap: 4px;
  }

  .fc-toolbar-title {
    text-align: center;
    font-size: 1rem;
    margin-bottom: 4px;
  }

  .fc-button {
    padding: 4px 6px;
    font-size: 0.7rem;
  }

  .fc-event {
    font-size: 0.7rem;
  }
}


button[data-action="click->friend-search#removeMember"] {
  background: transparent;
  border: none;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}
button[data-action="click->friend-search#removeMember"]:hover {
  color: #ff4d4f;
}

ul {
  margin-left: 0 !important;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-primary {
    @apply bg-fuchsia-500 text-white px-6 py-3 rounded-lg text-lg font-semibold shadow-md hover:bg-fuchsia-600 transition-all duration-300 transform hover:scale-105;
  }

  .btn-secondary {
    @apply border-2 border-gray-900 text-gray-900 px-6 py-3 rounded-lg text-lg font-semibold shadow-md hover:bg-gray-900 hover:text-white transition-all duration-300;
  }

  .feature-card {
    @apply p-6 bg-white rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:scale-105;
  }

  .testimonial-card {
    @apply p-6 bg-white rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:scale-105;
  }
}

@layer utilities {
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in {
    animation: fadeIn 1s ease-out forwards;
  }

  .animate-scroll-fade {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  .animate-fade-in-up {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

.hover-trigger:hover + .dropdown-menu,
.dropdown-menu:hover {
  display: flex;
}

[data-turbo-frame] {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

[data-turbo-frame][data-replaced] {
  transform: scale(1.02);
  opacity: 0.9;
}

turbo-frame[aria-busy="true"] {
  opacity: 0.5;
  transition: opacity 0.3s;
}

.animate-highlight {
  animation: pulse-green 0.5s ease;
}

@keyframes pulse-green {
  0% { background-color: #d1fae5; }
  100% { background-color: white; }
}

.cropper-crop-box, .cropper-view-box {
  border-radius: 50%;
}

.cropper-view-box {
box-shadow: 0 0 0 1px #39f;
outline: 0;
}

.theme-dark .sub-event-card {
  background: rgba(6, 6, 12, 0.92);
  border-color: rgba(255, 255, 255, 0.1);
  color: #f4f4fb;
}

.theme-dark .sub-event-timeline__list::before {
  background: linear-gradient(180deg, rgba(157,78,221,0.4), rgba(0,255,213,0.25));
}

.theme-dark .sub-event-timeline__dot {
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.55);
}

.theme-dark .sub-event-timeline__card {
  background: rgba(6, 6, 12, 0.95);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.65);
}

.theme-dark .sub-event-timeline__meta {
  background: rgba(14, 14, 24, 0.85);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f7f7ff;
}

.theme-dark .sub-event-timeline__details {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(8, 8, 14, 0.92);
  color: #f1f1fd;
}