/* ==========================================================================
   MintYourCard v2 - Component Library
   ==========================================================================
   Mobile-first base components using BEM naming with v2- prefix.
   All values reference tokens from tokens.css.
   GPU-only animations (transform, opacity). Touch targets >= 44px.

   Table of Contents:
   1.  Reset / Base
   2.  v2-btn (Buttons)
   3.  v2-card (Cards)
   4.  v2-stat-card (Stat Cards)
   5.  v2-badge (Badges)
   6.  v2-pill (Pills / Tags)
   7.  v2-chip (Filter Chips)
   8.  v2-avatar (Avatars)
   9.  v2-section (Content Sections)
   10. v2-list-item (List Items)
   11. v2-card-preview (Card Previews)
   12. v2-skeleton (Skeleton Loaders)
   13. v2-progress (Progress Bars)
   14. v2-hscroll (Horizontal Scroll)
   15. v2-toast (Toast Notifications)
   16. v2-skip-link (Accessibility)
   17. v2-interactive (Global Active State)
   18. Desktop Responsive Enhancements
   19. v2-page-header (Page Headers)
   20. v2-info-sheet (Info Bottom Sheet)
   ========================================================================== */


/* ==========================================================================
   1. RESET / BASE
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  touch-action: manipulation; /* prevent double-tap-to-zoom on all elements */
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
  max-width: 100%;
}

body {
  background-color: var(--v2-bg-app);
  color: var(--v2-text-primary);
  font-family: var(--v2-font-body);
  font-size: var(--v2-text-base);
  line-height: var(--v2-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

/* Remove default focus outlines, add our own */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

/* Prevent iOS zoom on input focus (keep font at 16px minimum) */
input,
select,
textarea {
  font-size: max(var(--v2-text-base), 16px);
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}


/* ==========================================================================
   2. v2-btn - Buttons
   ==========================================================================
   Usage:
     <button class="v2-btn v2-btn--primary">Primary</button>
     <button class="v2-btn v2-btn--secondary">Secondary</button>
     <button class="v2-btn v2-btn--ghost">Ghost</button>
     <button class="v2-btn v2-btn--icon" aria-label="Settings">...</button>
     <button class="v2-btn v2-btn--primary v2-btn--sm">Small</button>
     <button class="v2-btn v2-btn--primary v2-btn--lg">Large</button>
   ========================================================================== */

.v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--v2-space-2);
  padding: var(--v2-space-3) var(--v2-space-6);
  min-height: var(--v2-touch-target);
  border: 1px solid transparent;
  border-radius: var(--v2-radius-lg);
  font-family: var(--v2-font-body);
  font-size: var(--v2-text-sm);
  font-weight: var(--v2-font-medium);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
  transition:
    background-color var(--v2-duration-fast) var(--v2-ease-in-out),
    border-color var(--v2-duration-fast) var(--v2-ease-in-out),
    color var(--v2-duration-fast) var(--v2-ease-in-out),
    transform var(--v2-duration-micro) var(--v2-ease-in-out),
    opacity var(--v2-duration-fast) var(--v2-ease-in-out);
  -webkit-appearance: none;
  appearance: none;
  background: none;
  color: var(--v2-text-primary);
}

.v2-btn:active {
  transform: scale(0.97);
}

.v2-btn:disabled,
.v2-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* -- Primary: high-contrast white CTA ------------------------------------ */
.v2-btn--primary {
  background-color: var(--v2-cta-bg);
  color: var(--v2-cta-text);
  border-color: var(--v2-cta-bg);
}

.v2-btn--primary:hover {
  background-color: var(--v2-cta-hover);
  border-color: var(--v2-cta-hover);
}

.v2-btn--primary:active {
  transform: scale(0.97);
}

/* -- Secondary: border only ---------------------------------------------- */
.v2-btn--secondary {
  background-color: transparent;
  color: var(--v2-text-primary);
  border-color: var(--v2-border-default);
}

.v2-btn--secondary:hover {
  background-color: var(--v2-bg-elevated);
  border-color: var(--v2-glass-border-light);
}

/* -- Ghost: transparent, no border --------------------------------------- */
.v2-btn--ghost {
  background-color: transparent;
  color: var(--v2-text-secondary);
  border-color: transparent;
}

.v2-btn--ghost:hover {
  background-color: var(--v2-bg-elevated);
  color: var(--v2-text-primary);
}

/* -- Icon: 44x44 circle -------------------------------------------------- */
.v2-btn--icon {
  width: var(--v2-touch-target);
  height: var(--v2-touch-target);
  min-height: var(--v2-touch-target);
  padding: 0;
  border-radius: 50%;
  background-color: transparent;
  color: var(--v2-text-secondary);
}

.v2-btn--icon:hover {
  background-color: var(--v2-bg-elevated);
  color: var(--v2-text-primary);
}

/* -- Size: small --------------------------------------------------------- */
.v2-btn--sm {
  padding: var(--v2-space-2) var(--v2-space-4);
  min-height: 44px;
  font-size: var(--v2-text-xs);
}

/* -- Size: large --------------------------------------------------------- */
.v2-btn--lg {
  padding: var(--v2-space-4) var(--v2-space-8);
  min-height: 52px;
  font-size: var(--v2-text-base);
  font-weight: var(--v2-font-semibold);
}


/* ==========================================================================
   3. v2-card - Cards
   ==========================================================================
   Usage:
     <div class="v2-card">
       <div class="v2-card__header">...</div>
       <div class="v2-card__body">...</div>
       <div class="v2-card__footer">...</div>
     </div>
     <div class="v2-card v2-card--glass">...</div>
     <div class="v2-card v2-card--interactive">...</div>
   ========================================================================== */

.v2-card {
  background-color: var(--v2-bg-elevated);
  border-radius: var(--v2-radius-xl);
  padding: var(--v2-space-4);
  border: 1px solid var(--v2-border-subtle);
}

.v2-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--v2-space-3);
}

.v2-card__body {
  /* Content flows naturally */
}

.v2-card__footer {
  margin-top: var(--v2-space-3);
  padding-top: var(--v2-space-3);
  border-top: 1px solid var(--v2-border-subtle);
}

/* -- Glass: frosted translucent ------------------------------------------ */
.v2-card--glass {
  background-color: var(--v2-glass-bg);
  border-color: var(--v2-glass-border);
  -webkit-backdrop-filter: var(--v2-blur-md);
  backdrop-filter: var(--v2-blur-md);
}

/* -- Interactive: clickable card with hover lift -------------------------- */
.v2-card--interactive {
  cursor: pointer;
  transition:
    transform var(--v2-duration-fast) var(--v2-ease-out-quart),
    box-shadow var(--v2-duration-fast) var(--v2-ease-in-out);
}

.v2-card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--v2-shadow-md);
}

.v2-card--interactive:active {
  transform: translateY(0) scale(0.98);
}


/* ==========================================================================
   4. v2-stat-card - Stat Cards
   ==========================================================================
   Usage:
     <div class="v2-stat-card">
       <span class="v2-stat-card__icon">...</span>
       <span class="v2-stat-card__value">1,234</span>
       <span class="v2-stat-card__label">Cards Rated</span>
     </div>
   ========================================================================== */

.v2-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--v2-glass-bg);
  border: 1px solid var(--v2-glass-border);
  border-radius: var(--v2-radius-lg);
  padding: var(--v2-space-3);
  -webkit-backdrop-filter: var(--v2-blur-md);
  backdrop-filter: var(--v2-blur-md);
}

.v2-stat-card__icon {
  font-size: var(--v2-text-xl);
  margin-bottom: var(--v2-space-1);
  color: var(--v2-text-secondary);
}

.v2-stat-card__value {
  font-size: var(--v2-text-2xl);
  font-weight: var(--v2-font-bold);
  font-family: var(--v2-font-display);
  line-height: var(--v2-leading-tight);
  color: var(--v2-text-primary);
}

.v2-stat-card__label {
  font-size: 10px;
  font-weight: var(--v2-font-medium);
  color: var(--v2-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: var(--v2-space-1);
}

/* Clickable stat cards (dashboard navigation) */
.v2-stat-card--nav {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.v2-stat-card--nav:active {
  transform: scale(0.95);
  background-color: rgba(255, 255, 255, 0.06);
}


/* ==========================================================================
   5. v2-badge - Badges
   ==========================================================================
   Usage:
     <span class="v2-badge">3</span>
     <span class="v2-badge v2-badge--accent">New</span>
     <span class="v2-badge v2-badge--error">5</span>
     <span class="v2-badge v2-badge--count">99+</span>
   ========================================================================== */

.v2-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--v2-radius-full);
  font-size: var(--v2-text-xs);
  font-weight: var(--v2-font-bold);
  line-height: 1;
  background-color: var(--v2-bg-elevated);
  color: var(--v2-text-primary);
}

.v2-badge--accent {
  background-color: var(--v2-accent);
  color: var(--v2-text-inverse);
}

.v2-badge--error {
  background-color: var(--v2-error);
  color: #fff;
}

.v2-badge--count {
  background-color: var(--v2-error);
  color: #fff;
  min-width: 18px;
  height: 18px;
  font-size: 10px;
  padding: 0 5px;
}


/* ==========================================================================
   6. v2-pill - Pills / Tags
   ==========================================================================
   Usage:
     <span class="v2-pill">Default</span>
     <span class="v2-pill v2-pill--success">Active</span>
     <span class="v2-pill v2-pill--warning">Pending</span>
     <span class="v2-pill v2-pill--error">Expired</span>
   ========================================================================== */

.v2-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-space-1);
  padding: var(--v2-space-1) var(--v2-space-3);
  border-radius: var(--v2-radius-full);
  font-size: var(--v2-text-sm);
  font-weight: var(--v2-font-medium);
  line-height: var(--v2-leading-tight);
  background-color: var(--v2-bg-elevated);
  color: var(--v2-text-primary);
}

.v2-pill--success {
  background-color: var(--v2-success-light);
  color: var(--v2-success);
}

.v2-pill--warning {
  background-color: var(--v2-warning-light);
  color: var(--v2-warning);
}

.v2-pill--error {
  background-color: var(--v2-error-light);
  color: var(--v2-error);
}


/* ==========================================================================
   7. v2-chip - Filter Chips
   ==========================================================================
   Usage:
     <button class="v2-chip">All</button>
     <button class="v2-chip v2-chip--active">This Week</button>
   ========================================================================== */

.v2-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-space-2);
  padding: var(--v2-space-2) var(--v2-space-4);
  min-height: var(--v2-touch-target);
  border: 1px solid var(--v2-border-default);
  border-radius: var(--v2-radius-full);
  background: transparent;
  color: var(--v2-text-secondary);
  font-family: var(--v2-font-body);
  font-size: var(--v2-text-sm);
  font-weight: var(--v2-font-medium);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
  transition:
    background-color var(--v2-duration-fast) var(--v2-ease-in-out),
    border-color var(--v2-duration-fast) var(--v2-ease-in-out),
    color var(--v2-duration-fast) var(--v2-ease-in-out);
  -webkit-appearance: none;
  appearance: none;
}

.v2-chip:hover {
  background-color: var(--v2-bg-elevated);
  color: var(--v2-text-primary);
}

.v2-chip:active {
  transform: scale(0.97);
}

.v2-chip--active {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--v2-text-primary);
}

.v2-chip--active:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--v2-text-primary);
}


/* ==========================================================================
   8. v2-avatar - Avatars
   ==========================================================================
   Usage:
     <img class="v2-avatar v2-avatar--md" src="..." alt="User" />
     <div class="v2-avatar v2-avatar--lg">AB</div>
   ========================================================================== */

.v2-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  overflow: hidden;
  background-color: var(--v2-bg-surface-2);
  color: var(--v2-text-secondary);
  font-weight: var(--v2-font-semibold);
}

.v2-avatar--xs {
  width: 24px;
  height: 24px;
  font-size: var(--v2-text-xs);
}

.v2-avatar--sm {
  width: 32px;
  height: 32px;
  font-size: var(--v2-text-xs);
}

.v2-avatar--md {
  width: var(--v2-touch-target);
  height: var(--v2-touch-target);
  font-size: var(--v2-text-sm);
}

.v2-avatar--lg {
  width: 64px;
  height: 64px;
  font-size: var(--v2-text-lg);
}

.v2-avatar--xl {
  width: 96px;
  height: 96px;
  font-size: var(--v2-text-2xl);
}


/* ==========================================================================
   9. v2-section - Content Sections
   ==========================================================================
   Usage:
     <section class="v2-section">
       <div class="v2-section__header">
         <h2 class="v2-section__title">Leaderboard</h2>
         <button class="v2-section__action">See all</button>
       </div>
       <div class="v2-section__content">...</div>
     </section>
   ========================================================================== */

.v2-section {
  margin-bottom: var(--v2-space-6);
}

.v2-section__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--v2-space-3);
  padding: 0 var(--v2-space-1);
}

.v2-section__title {
  font-size: var(--v2-text-lg);
  font-weight: var(--v2-font-semibold);
  font-family: var(--v2-font-display);
  color: var(--v2-text-primary);
  line-height: var(--v2-leading-tight);
}

.v2-section__action {
  font-size: var(--v2-text-sm);
  font-weight: var(--v2-font-medium);
  color: var(--v2-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--v2-space-1) var(--v2-space-2);
  min-height: var(--v2-touch-target);
  display: inline-flex;
  align-items: center;
  font-family: var(--v2-font-body);
  -webkit-appearance: none;
  appearance: none;
}

.v2-section__action:hover {
  opacity: 0.8;
}

.v2-section__content {
  /* Content flows naturally */
}


/* ==========================================================================
   10. v2-list-item - List Items
   ==========================================================================
   Usage:
     <div class="v2-list-item">
       <div class="v2-list-item__icon">...</div>
       <div class="v2-list-item__content">
         <span class="v2-list-item__title">Title</span>
         <span class="v2-list-item__subtitle">Subtitle</span>
       </div>
       <span class="v2-list-item__trailing">...</span>
     </div>
   ========================================================================== */

.v2-list-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--v2-space-3);
  padding: var(--v2-space-3) 0;
  border-bottom: 1px solid var(--v2-border-subtle);
  min-height: var(--v2-touch-target);
}

.v2-list-item:last-child {
  border-bottom: none;
}

.v2-list-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--v2-touch-target);
  height: var(--v2-touch-target);
  color: var(--v2-text-secondary);
}

.v2-list-item__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0; /* Allow text truncation */
}

.v2-list-item__title {
  font-size: var(--v2-text-base);
  font-weight: var(--v2-font-medium);
  color: var(--v2-text-primary);
  line-height: var(--v2-leading-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v2-list-item__subtitle {
  font-size: var(--v2-text-sm);
  color: var(--v2-text-secondary);
  line-height: var(--v2-leading-tight);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v2-list-item__trailing {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--v2-text-tertiary);
  font-size: var(--v2-text-sm);
}


/* ==========================================================================
   11. v2-card-preview - Card Preview (Trading Card Thumbnails)
   ==========================================================================
   Usage:
     <div class="v2-card-preview">
       <img class="v2-card-preview__image" src="..." alt="Card" />
       <span class="v2-card-preview__badge">9.5</span>
     </div>
   ========================================================================== */

.v2-card-preview {
  position: relative;
  aspect-ratio: 5 / 7;
  border-radius: var(--v2-radius-lg);
  overflow: hidden;
  background-color: var(--v2-bg-surface);
  cursor: pointer;
  transition: transform var(--v2-duration-fast) var(--v2-ease-out-quart);
}

.v2-card-preview:active {
  transform: scale(0.98);
}

.v2-card-preview__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.v2-card-preview__badge {
  position: absolute;
  top: var(--v2-space-2);
  right: var(--v2-space-2);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 var(--v2-space-2);
  border-radius: var(--v2-radius-md);
  background-color: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: var(--v2-blur-sm);
  backdrop-filter: var(--v2-blur-sm);
  color: var(--v2-text-primary);
  font-size: var(--v2-text-xs);
  font-weight: var(--v2-font-bold);
  line-height: 1;
}


/* ==========================================================================
   12. v2-skeleton - Skeleton Loading States
   ==========================================================================
   Usage:
     <div class="v2-skeleton v2-skeleton--text"></div>
     <div class="v2-skeleton v2-skeleton--title"></div>
     <div class="v2-skeleton v2-skeleton--card"></div>
     <div class="v2-skeleton v2-skeleton--avatar"></div>
     <div class="v2-skeleton v2-skeleton--stat"></div>
   ========================================================================== */

.v2-skeleton {
  position: relative;
  background-color: var(--v2-bg-surface);
  border-radius: var(--v2-radius-md);
  overflow: hidden;
}

/* Shimmer pseudo-element */
.v2-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: v2-shimmer 1.5s ease-in-out infinite;
}

/* -- Variants ------------------------------------------------------------ */

.v2-skeleton--text {
  height: 14px;
  width: 100%;
}

.v2-skeleton--title {
  height: 20px;
  width: 60%;
}

.v2-skeleton--card {
  aspect-ratio: 5 / 7;
  border-radius: var(--v2-radius-lg);
}

.v2-skeleton--avatar {
  width: var(--v2-touch-target);
  height: var(--v2-touch-target);
  border-radius: 50%;
}

.v2-skeleton--stat {
  height: 80px;
  border-radius: var(--v2-radius-lg);
}


/* ==========================================================================
   13. v2-progress - Progress Bars
   ==========================================================================
   Usage:
     <div class="v2-progress">
       <div class="v2-progress__fill" style="width: 60%"></div>
     </div>
     <div class="v2-progress v2-progress--sm">...</div>
     <div class="v2-progress v2-progress--lg">...</div>
   ========================================================================== */

.v2-progress {
  height: 6px;
  background-color: var(--v2-bg-surface-2);
  border-radius: var(--v2-radius-full);
  overflow: hidden;
}

.v2-progress__fill {
  height: 100%;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: var(--v2-radius-full);
  transition: width 0.3s var(--v2-ease-out-quart);
  min-width: 0;
}

.v2-progress--sm {
  height: 4px;
}

.v2-progress--lg {
  height: 8px;
}


/* ==========================================================================
   14. v2-hscroll - Horizontal Scroll Container
   ==========================================================================
   Usage:
     <div class="v2-hscroll">
       <div class="v2-hscroll__item">Card 1</div>
       <div class="v2-hscroll__item">Card 2</div>
       <div class="v2-hscroll__item">Card 3</div>
     </div>
   ========================================================================== */

.v2-hscroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: var(--v2-space-3);
  padding: var(--v2-space-1) 0;

}

/* Utility: hide scrollbar across browsers */
.v2-no-scrollbar,
.v2-hscroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.v2-no-scrollbar::-webkit-scrollbar,
.v2-hscroll::-webkit-scrollbar {
  display: none;
}

.v2-hscroll__item {
  scroll-snap-align: start;
  flex-shrink: 0;
}


/* ==========================================================================
   15b. v2-empty-state / v2-error-state — Shared feedback states
   ==========================================================================
   Usage:
     <div class="v2-empty-state">
       <i class="fa-solid fa-inbox v2-empty-state__icon" aria-hidden="true"></i>
       <p class="v2-empty-state__title">No data</p>
       <p class="v2-empty-state__subtitle">Description text</p>
     </div>
   ========================================================================== */

.v2-empty-state,
.v2-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--v2-space-3);
  padding: var(--v2-space-12) var(--v2-space-6);
  grid-column: 1 / -1;
}

.v2-empty-state__icon,
.v2-error-state__icon {
  font-size: 40px;
  color: var(--v2-text-tertiary);
  opacity: 0.5;
}

.v2-empty-state__title,
.v2-error-state__title {
  font-family: var(--v2-font-display);
  font-size: var(--v2-text-lg);
  font-weight: var(--v2-font-semibold);
  color: var(--v2-text-primary);
}

.v2-empty-state__subtitle,
.v2-error-state__subtitle {
  font-size: var(--v2-text-sm);
  color: var(--v2-text-secondary);
  max-width: min(260px, 85vw);
  line-height: var(--v2-leading-normal);
}


/* ==========================================================================
   15. v2-toast - Toast Notifications
   ==========================================================================
   Usage:
     <div class="v2-toast-container">
       <div class="v2-toast v2-toast--success">Message</div>
       <div class="v2-toast v2-toast--error">Error!</div>
     </div>
   ========================================================================== */

.v2-toast-container {
  position: fixed;
  bottom: calc(var(--v2-bottom-nav-height) + var(--v2-space-5) + var(--v2-safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--v2-z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--v2-space-2);
  width: calc(100% - var(--v2-space-8));
  max-width: 400px;
  pointer-events: none;
}

.v2-toast {
  padding: var(--v2-space-3) var(--v2-space-4);
  border-radius: var(--v2-radius-lg);
  background-color: var(--v2-bg-elevated);
  border-left: 3px solid var(--v2-border-default);
  color: var(--v2-text-primary);
  font-size: var(--v2-text-sm);
  font-weight: var(--v2-font-medium);
  box-shadow: var(--v2-shadow-lg);
  pointer-events: auto;
  width: 100%;
  animation: v2-toast-enter var(--v2-duration-normal) var(--v2-ease-spring-gentle) forwards;
}

.v2-toast--success {
  border-left-color: var(--v2-success);
}

.v2-toast--error {
  border-left-color: var(--v2-error);
}

.v2-toast--info {
  border-left-color: var(--v2-info);
}

.v2-toast--exiting {
  animation: v2-toast-exit var(--v2-duration-fast) var(--v2-ease-in-out) forwards;
}

@keyframes v2-toast-enter {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes v2-toast-exit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
}


/* ==========================================================================
   15b. v2-mint-coin - Mint Currency Coin Icon
   ==========================================================================
   Shared coin icon used across views (account, gifts, dashboard).
   Loaded here so views don't depend on gifts.css for base sizing.
   ========================================================================== */

.v2-mint-coin {
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
  flex-shrink: 0;
}

.v2-mint-coin--inline {
  width: 18px;
  height: 18px;
}


/* ==========================================================================
   16. v2-skip-link - Accessibility Skip Link
   ==========================================================================
   Usage (first child of body):
     <a href="#main-content" class="v2-skip-link">Skip to content</a>
   ========================================================================== */

.v2-skip-link {
  position: absolute;
  top: -100%;
  left: var(--v2-space-4);
  z-index: var(--v2-z-tooltip);
  padding: var(--v2-space-2) var(--v2-space-4);
  background-color: var(--v2-accent);
  color: var(--v2-text-inverse);
  font-size: var(--v2-text-sm);
  font-weight: var(--v2-font-semibold);
  border-radius: var(--v2-radius-md);
  text-decoration: none;
  white-space: nowrap;
}

.v2-skip-link:focus {
  top: var(--v2-space-2);
}


/* ==========================================================================
   17. v2-glass-circle - iOS 26 Liquid Glass Circle (shared material)
   ==========================================================================
   Reusable frosted glass circle with refracted conic gradient border.
   Apply as base class alongside size-specific classes:
     <button class="v2-glass-circle v2-glass-btn">       → 42px header
     <span class="v2-glass-circle v2-quick-action__circle"> → 50px shortcut
   ========================================================================== */

.v2-glass-circle {
  border-radius: 50%;
  border: none;
  background: var(--v2-bg-glass-circle);
  -webkit-backdrop-filter: var(--v2-blur-sat-lg);
  backdrop-filter: var(--v2-blur-sat-lg);
  box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.20),
      inset 5px 5px 8px -2px rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--v2-duration-fast) var(--v2-ease-spring-gentle),
              background var(--v2-duration-fast) var(--v2-ease-out-expo);
  position: relative;
  overflow: hidden;
}

/* Refracted border: conic gradient — visible on TL↔BR diagonal, invisible on TR↔BL.
   Reusable via .v2-refracted-border class (inherits parent border-radius). */
.v2-refracted-border::before,
.v2-glass-circle::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0.5px;
  background: conic-gradient(
      from 0deg,
      rgba(255, 255, 255, 0.18) 0deg,
      rgba(255, 255, 255, 0.03) 45deg,
      rgba(255, 255, 255, 0.03) 90deg,
      rgba(255, 255, 255, 0.22) 135deg,
      rgba(255, 255, 255, 0.18) 180deg,
      rgba(255, 255, 255, 0.03) 225deg,
      rgba(255, 255, 255, 0.03) 270deg,
      rgba(255, 255, 255, 0.22) 315deg,
      rgba(255, 255, 255, 0.18) 360deg
  );
  -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.v2-glass-circle:active {
  transform: scale(0.90);
  background: rgba(255, 255, 255, 0.14);
}

.v2-glass-circle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}


/* ==========================================================================
   19. v2-page-header — Shared Sticky Page Header with Gradient Blur
   ==========================================================================
   Reusable sticky header for all view pages (Collection, Leaderboard, Noter…).
   Provides: sticky positioning, safe-area padding, edge bleed,
   gradient blur ::after pseudo-element, title row layout, glass action buttons.

   Usage (minimal — icon + title):
     <header class="v2-page-header">
       <div class="v2-page-header__row">
         <div class="v2-page-header__left">
           <span class="v2-page-header__icon"><i class="fa-solid fa-star"></i></span>
           <span class="v2-page-header__title">Page Title</span>
         </div>
       </div>
     </header>

   Usage (with actions + segment control):
     <header class="v2-page-header">
       <div class="v2-page-header__row">
         <div class="v2-page-header__left">…</div>
         <div class="v2-page-header__actions">
           <button class="v2-glass-circle v2-glass-btn">…</button>
         </div>
       </div>
       <div class="v2-segmented">…tabs…</div>
     </header>
   ========================================================================== */

.v2-page-header {
  position: sticky;
  top: 0;
  z-index: var(--v2-z-sticky);
  display: flex;
  flex-direction: column;
  gap: var(--v2-space-3);
  padding: var(--v2-space-3) var(--v2-space-4);
  padding-top: calc(var(--v2-safe-top) + var(--v2-space-2));
  margin: 0 calc(-1 * var(--v2-space-4));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.30));
  -webkit-backdrop-filter: var(--v2-blur-sat-lg);
  backdrop-filter: var(--v2-blur-sat-lg);
}

/* Gradient blur — covers header area + bleeds 36px below, fading out */
.v2-page-header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -36px;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.01));
  -webkit-backdrop-filter: var(--v2-blur-xl);
  backdrop-filter: var(--v2-blur-xl);
  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  pointer-events: none;
}

/* Mobile: restore blur (overrides var(--v2-blur-*):none from tokens.css) */
@media (max-width: 768px) {
    .v2-page-header {
        -webkit-backdrop-filter: saturate(140%) blur(12px);
        backdrop-filter: saturate(140%) blur(12px);
    }
    .v2-page-header::after {
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }
}

/* Title row: left side (icon + title) ↔ right side (action buttons) */
.v2-page-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v2-space-3);
}

/* Left group: icon + title */
.v2-page-header__left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

/* Icon — works with both FontAwesome <i> and <svg> elements directly */
.v2-page-header__icon {
  flex-shrink: 0;
  color: var(--v2-text-primary);
  font-size: 20px;              /* FontAwesome sizing; SVGs use width/height attrs */
}

/* Page title */
.v2-page-header__title {
  font-family: var(--v2-font-display);
  font-size: var(--v2-text-lg);
  font-weight: var(--v2-font-bold);
  color: var(--v2-text-primary);
  line-height: var(--v2-leading-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Right group: glass action buttons */
.v2-page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--v2-space-2);
  flex-shrink: 0;
}


/* ==========================================================================
   19b. SEGMENTED CONTROL (reusable tab switcher with sliding pill)
   ==========================================================================
   Shared component used by Leaderboard (3 tabs), Missions (2 tabs), Account, etc.
   Default pill width = 1/3. Override per-view for different tab counts:
     .v2-missions .v2-segmented__pill { width: calc((100% - 6px) / 2); }
   ========================================================================== */

.v2-segmented {
  position: relative;
  display: flex;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--v2-radius-lg);
  padding: 3px;
}

/* Sliding pill — spring physics (same curve as bottom nav) */
.v2-segmented__pill {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / 3);
  background: rgba(255, 255, 255, 0.12);
  border-radius: calc(var(--v2-radius-lg) - 2px);
  pointer-events: none;
  transform: translateX(calc(var(--active-tab, 0) * 100%));
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

.v2-segmented__tab {
  all: unset;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-height: 44px;
  font-family: var(--v2-font-body);
  font-size: var(--v2-text-sm);
  font-weight: var(--v2-font-medium);
  color: var(--v2-text-tertiary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.25s var(--v2-ease-out-expo);
  position: relative;
  z-index: 1;
  border-radius: calc(var(--v2-radius-lg) - 2px);
}

.v2-segmented__tab--active {
  color: var(--v2-text-primary);
  font-weight: var(--v2-font-semibold);
}

.v2-segmented__tab:active {
  transform: scale(0.97);
}

.v2-segmented__tab:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .v2-segmented__pill {
    transition: none;
  }
}


/* ==========================================================================
   20. v2-interactive - Global Active State for Touchable Elements
   ==========================================================================
   Apply to any tappable element for consistent press feedback.
   Usage:
     <div class="v2-interactive">Tap me</div>
   ========================================================================== */

.v2-interactive {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--v2-duration-micro) var(--v2-ease-in-out);
}

.v2-interactive:active {
  transform: scale(0.97);
}


/* ==========================================================================
   18. DESKTOP RESPONSIVE ENHANCEMENTS
   ==========================================================================
   Mobile-first: base styles above are mobile. These scale up for larger
   viewports using min-width media queries.
   ========================================================================== */

/* -- Tablet (769px+) ----------------------------------------------------- */
@media (min-width: 769px) {
  .v2-card {
    padding: var(--v2-space-5);
  }

  .v2-stat-card {
    padding: var(--v2-space-4);
  }

  .v2-section {
    margin-bottom: var(--v2-space-8);
  }

  .v2-section__title {
    font-size: var(--v2-text-xl);
  }

  .v2-list-item {
    padding: var(--v2-space-4) 0;
  }

  .v2-toast-container {
    max-width: 440px;
  }
}

/* -- Desktop (1025px+) --------------------------------------------------- */
@media (min-width: 1025px) {
  .v2-card {
    padding: var(--v2-space-6);
  }

  .v2-stat-card {
    padding: var(--v2-space-5);
  }

  .v2-stat-card__value {
    font-size: var(--v2-text-3xl);
  }

  .v2-section {
    margin-bottom: var(--v2-space-10);
  }

  .v2-hscroll {
    gap: var(--v2-space-4);
  }

  .v2-toast-container {
    max-width: 480px;
    bottom: var(--v2-space-8);
  }

  /* On desktop, interactive cards have a stronger lift */
  .v2-card--interactive:hover {
    transform: translateY(-4px);
    box-shadow: var(--v2-shadow-lg);
  }
}


/* ==========================================================================
   19. v2-badge-flair (Inline badge icon next to usernames)
   ========================================================================== */

.v2-badge-flair {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  vertical-align: middle;
  border-radius: 3px;
  object-fit: contain;
  flex-shrink: 0;
  aspect-ratio: 1;

  /* Static golden glow */
  filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.60));
}

/* Adjacent badges: tighter spacing between 2nd/3rd badge */
.v2-badge-flair + .v2-badge-flair {
  margin-left: 2px;
}

/* Prevent parent overflow:hidden from clipping the golden aura.
   overflow:hidden clips at the padding-box edge, so padding-right
   gives the glow room to breathe. Increased for up to 3 badges. */
:is(
  .v2-lb-row__name,
  .v2-podium__name,
  .v2-lb-user-card__name,
  .v2-community__top3-name,
  .v2-badge-picker__preview-name
):has(.v2-badge-flair) {
  padding-right: 12px;
}

/* iOS < 15.4 :has() fallback — class set by JS at render time */
.v2-has-flair {
  padding-right: 12px;
}

/* Slightly smaller in compact contexts (podium names, top3 dashboard) */
.v2-podium__name .v2-badge-flair,
.v2-community__top3-name .v2-badge-flair {
  width: 16px;
  height: 16px;
  margin-left: 3px;
}

.v2-podium__name .v2-badge-flair + .v2-badge-flair,
.v2-community__top3-name .v2-badge-flair + .v2-badge-flair {
  margin-left: 1px;
}


/* ==========================================================================
   20. v2-info-sheet — Reusable info bottom sheet
   ==========================================================================
   Lightweight informational bottom sheet with backdrop, handle, title,
   body content, and dismiss button. iOS 26 dark glass material.

   Usage (JS):
     const sheet = document.createElement('div');
     sheet.className = 'v2-info-sheet';
     sheet.innerHTML = `
       <div class="v2-info-sheet__backdrop"></div>
       <div class="v2-info-sheet__card">
         <div class="v2-info-sheet__handle"></div>
         <div class="v2-info-sheet__header">
           <i class="fa-solid fa-icon v2-info-sheet__icon"></i>
           <h3 class="v2-info-sheet__title">Title</h3>
         </div>
         <div class="v2-info-sheet__body">…content…</div>
         <button class="v2-info-sheet__btn">Compris</button>
       </div>`;
   ========================================================================== */

/* Overlay container */
.v2-info-sheet {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.v2-info-sheet--active {
  opacity: 1;
  pointer-events: auto;
}

/* Backdrop */
.v2-info-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: var(--v2-bg-backdrop);
  -webkit-backdrop-filter: var(--v2-blur-sm);
  backdrop-filter: var(--v2-blur-sm);
}

/* Card panel */
.v2-info-sheet__card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background-color: rgba(28, 28, 30, 0.96);
  -webkit-backdrop-filter: var(--v2-blur-bar);
  backdrop-filter: var(--v2-blur-bar);
  border-radius: 20px 20px 0 0;
  border-top: 0.5px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 -8px 40px rgba(0, 0, 0, 0.4),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
  padding: 0 var(--v2-space-6) calc(env(safe-area-inset-bottom, 0px) + var(--v2-space-6));
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
}

.v2-info-sheet--active .v2-info-sheet__card {
  transform: translateY(0);
}

/* Drag handle */
.v2-info-sheet__handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.25);
  margin: 10px auto 20px;
}

/* Header row — icon + title */
.v2-info-sheet__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--v2-space-4);
}

.v2-info-sheet__icon {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.50);
  flex-shrink: 0;
}

.v2-info-sheet__title {
  font-family: var(--v2-font-display);
  font-size: var(--v2-text-lg);
  font-weight: var(--v2-font-bold);
  color: var(--v2-text-primary);
  margin: 0;
}

/* Body content */
.v2-info-sheet__body {
  display: flex;
  flex-direction: column;
  gap: var(--v2-space-4);
}

/* Info row — icon + text explanation */
.v2-info-sheet__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.v2-info-sheet__row-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.v2-info-sheet__row-text {
  font-family: var(--v2-font-body);
  font-size: var(--v2-text-sm);
  color: var(--v2-text-secondary);
  line-height: var(--v2-leading-relaxed);
}

.v2-info-sheet__row-text strong {
  color: var(--v2-text-primary);
  font-weight: var(--v2-font-semibold);
}

/* Actions — stacked buttons at bottom */
.v2-info-sheet__actions {
  display: flex;
  flex-direction: column;
  gap: var(--v2-space-2);
  margin-top: var(--v2-space-6);
}

/* Base button (secondary / dismiss) */
.v2-info-sheet__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 50px;
  border: none;
  border-radius: var(--v2-radius-xl);
  background: rgba(255, 255, 255, 0.10);
  color: var(--v2-text-primary);
  font-family: var(--v2-font-display);
  font-size: var(--v2-text-base);
  font-weight: var(--v2-font-semibold);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
  -webkit-appearance: none;
  appearance: none;
}

.v2-info-sheet__btn:active {
  transform: scale(0.98);
  background: rgba(255, 255, 255, 0.15);
}

.v2-info-sheet__btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

/* Primary CTA — white bg, black text */
.v2-info-sheet__btn--primary {
  background: rgba(255, 255, 255, 0.92);
  color: #000;
}

.v2-info-sheet__btn--primary:active {
  background: rgba(255, 255, 255, 0.78);
}

/* Tablet+ — centered card, full border-radius */
@media (min-width: 768px) {
  .v2-info-sheet {
    align-items: center;
  }

  .v2-info-sheet__card {
    border-radius: 20px;
    max-height: 80vh;   /* fallback for iOS 14-15.3 */
    max-height: 80dvh;
    padding-bottom: var(--v2-space-6);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .v2-info-sheet,
  .v2-info-sheet__card {
    transition: none;
  }
}


/* ==========================================================================
   CONFIRM BOTTOM SHEET  (showConfirmSheet — PWA-safe window.confirm)
   ========================================================================== */

.v2-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--v2-z-modal);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--v2-ease-out-expo);
}

.v2-confirm-overlay--active {
  opacity: 1;
  pointer-events: auto;
}

.v2-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: var(--v2-bg-backdrop);
  -webkit-backdrop-filter: var(--v2-blur-sm);
  backdrop-filter: var(--v2-blur-sm);
}

.v2-confirm-sheet {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--v2-bg-elevated);
  border-radius: var(--v2-radius-2xl) var(--v2-radius-2xl) 0 0;
  padding: var(--v2-space-4) var(--v2-space-5);
  padding-bottom: max(var(--v2-safe-bottom), var(--v2-space-5));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--v2-space-4);
  transform: translateY(100%);
  transition: transform 0.35s var(--v2-ease-out-expo);
}

.v2-confirm-overlay--active .v2-confirm-sheet {
  transform: translateY(0);
}

/* Drag handle */
.v2-confirm-sheet__handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.15);
  margin: 0 auto var(--v2-space-1);
  flex-shrink: 0;
}

/* Icon */
.v2-confirm-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-size: 22px;
  flex-shrink: 0;
}

.v2-confirm-icon--default {
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.85);
}

.v2-confirm-icon--warning {
  background: rgba(255, 159, 10, 0.15);
  color: #FF9F0A;
}

.v2-confirm-icon--danger {
  background: rgba(255, 59, 48, 0.15);
  color: #FF3B30;
}

/* Body */
.v2-confirm-body {
  text-align: center;
}

.v2-confirm-title {
  font-family: var(--v2-font-display);
  font-size: var(--v2-text-lg);
  font-weight: var(--v2-font-semibold);
  color: var(--v2-text-primary);
  margin: 0;
  line-height: 1.3;
}

.v2-confirm-desc {
  margin: var(--v2-space-1) 0 0;
  font-size: var(--v2-text-sm);
  color: var(--v2-text-secondary);
  line-height: 1.5;
}

/* Actions */
.v2-confirm-actions {
  display: flex;
  flex-direction: column;
  gap: var(--v2-space-2);
  margin-top: var(--v2-space-1);
}

.v2-confirm-cancel,
.v2-confirm-ok {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 15px 20px;
  border-radius: var(--v2-radius-full);
  font-size: var(--v2-text-base);
  font-weight: var(--v2-font-semibold);
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity 0.15s, transform 0.1s;
}

.v2-confirm-cancel:active,
.v2-confirm-ok:active {
  opacity: 0.75;
  transform: scale(0.97);
}

.v2-confirm-cancel {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.65);
}

.v2-confirm-ok--default {
  background: rgba(255, 255, 255, 0.95);
  color: #000;
}

.v2-confirm-ok--danger {
  background: #FF3B30;
  color: #fff;
}

/* Tablet+ — centered card with full border-radius */
@media (min-width: 480px) {
  .v2-confirm-sheet {
    border-radius: var(--v2-radius-2xl);
    margin-bottom: var(--v2-space-6);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .v2-confirm-overlay,
  .v2-confirm-sheet {
    transition: none;
  }
}


/* ==========================================================================
   MODAL OVERLAY / SHEET — shared component used by account, gifts, grading,
   user-profile and any other module that opens a bottom-sheet modal.
   Moved here from account.css so all modules can rely on this without
   importing account.css.
   ========================================================================== */

.v2-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--v2-z-modal);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--v2-ease-out-expo);
}

.v2-modal-overlay--active {
    opacity: 1;
    pointer-events: auto;
}

.v2-modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--v2-bg-backdrop);
    -webkit-backdrop-filter: var(--v2-blur-sm);
    backdrop-filter: var(--v2-blur-sm);
}

.v2-modal-sheet {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;   /* fallback for iOS 14-15.3 */
    max-height: 90dvh;
    background: var(--v2-bg-elevated);
    border-radius: var(--v2-radius-2xl) var(--v2-radius-2xl) 0 0;
    padding: var(--v2-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--v2-space-5);
    transform: translateY(100%);
    transition: transform 0.35s var(--v2-ease-out-expo);
    overflow-y: auto;
}

.v2-modal-overlay--active .v2-modal-sheet {
    transform: translateY(0);
}

/* Drag handle */
.v2-modal-sheet__handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 auto;
    flex-shrink: 0;
    cursor: grab;
}

.v2-modal-sheet__handle:active {
    cursor: grabbing;
}

/* Modal header */
.v2-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.v2-modal-header__title {
    font-family: var(--v2-font-display);
    font-size: var(--v2-text-lg);
    font-weight: var(--v2-font-semibold);
    color: var(--v2-text-primary);
}

.v2-modal-header__close {
    all: unset;
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--v2-text-secondary);
    font-size: 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.v2-modal-header__close::before {
    content: '';
    position: absolute;
    inset: -6px;
}

.v2-modal-header__close:active {
    transform: scale(0.90);
}

/* Modal input fields */
.v2-modal-field {
    display: flex;
    flex-direction: column;
    gap: var(--v2-space-2);
}

.v2-modal-field__label {
    font-size: var(--v2-text-sm);
    font-weight: var(--v2-font-medium);
    color: var(--v2-text-secondary);
}

.v2-modal-field__input {
    width: 100%;
    height: 44px;
    padding: 0 var(--v2-space-4);
    background: var(--v2-bg-surface);
    border: 1px solid var(--v2-border-default);
    border-radius: var(--v2-radius-lg);
    color: var(--v2-text-primary);
    font-family: var(--v2-font-body);
    font-size: var(--v2-text-base);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.v2-modal-field__input::placeholder {
    color: var(--v2-text-tertiary);
}

.v2-modal-field__input:focus {
    border-color: rgba(255, 255, 255, 0.25);
}

.v2-modal-field__textarea {
    width: 100%;
    min-height: 100px;
    padding: var(--v2-space-3) var(--v2-space-4);
    background: var(--v2-bg-surface);
    border: 1px solid var(--v2-border-default);
    border-radius: var(--v2-radius-lg);
    color: var(--v2-text-primary);
    font-family: var(--v2-font-body);
    font-size: var(--v2-text-base);
    outline: none;
    resize: vertical;
    -webkit-appearance: none;
    appearance: none;
}

.v2-modal-field__textarea::placeholder {
    color: var(--v2-text-tertiary);
}

.v2-modal-field__textarea:focus {
    border-color: rgba(255, 255, 255, 0.25);
}

.v2-modal-field__hint {
    font-size: var(--v2-text-xs);
    color: var(--v2-text-tertiary);
}