/* ════════════════════════════════════════════════════════════════════════════
   Sectorly v2 — my_garage.css
   ────────────────────────────────────────────────────────────────────────────
   "My Garage" tab styles. Mirrors design tokens used elsewhere in v2
   (Outfit font, dark theme, class colors). Per the locked spec
   (Notion page 16), this tab uses cards (not rows) and signals
   "your space" with deliberate visual distinction from Race tab.

   Chunk 1 covers: header + race progress bar (with FCY ticks, hour
   ticks, live pulse). Per-car cards, lap chart, drift chart, and
   activity feed styles come in later chunks.
   ════════════════════════════════════════════════════════════════════════════ */


/* ── View root ────────────────────────────────────────────────────────────── */

.view.my-garage {
  font-family: 'Outfit', -apple-system, system-ui, sans-serif;
  color: var(--text, #f5f7fa);
  background: var(--bg, #07090d);
}

.view.my-garage .column {
  display: flex;
  flex-direction: column;
}


/* ── Header ───────────────────────────────────────────────────────────────── */

.mg-header {
  padding: 8px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mg-header__title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text, #f5f7fa);
  line-height: 1.1;
}

.mg-header__meta {
  font-size: 13px;
  font-weight: 500;
  color: var(--text3, #7d8390);
  letter-spacing: 0.01em;
}


/* ── Race progress bar ────────────────────────────────────────────────────── */

.mg-progress {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* The track is the host for all overlays. Position: relative so absolute
   children (fill, ticks, pulse) anchor to it correctly. */
.mg-progress__track {
  position: relative;
  height: 4px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 2px;
}

/* The fill IS clipped by the track's border-radius via overflow on the
   track itself when needed — but we keep overflow visible on the track
   so FCY ticks and the pulse dot can extend slightly above/below. */

/* Filled portion — elapsed time, gradient fill */
.mg-progress__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.30),
    rgba(255, 255, 255, 0.55)
  );
  border-radius: 2px;
  transition: width 0.6s ease-out;
}

/* Hour tick marks — subtle vertical hairlines on the track */
.mg-progress__hour-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mg-progress__hour-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
}

/* FCY tick marks — amber notches that extend above and below the track to
   make them visible regardless of where the fill is. */
.mg-progress__fcy-ticks {
  position: absolute;
  inset: -3px 0;  /* extend 3px above and below the 4px track */
  pointer-events: none;
}

.mg-progress__fcy-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--amber, #f59e0b);
  opacity: 0.75;
  border-radius: 1px;
  transform: translateX(-1px); /* center the 2px tick on its left position */
}

/* Pulsing leading-edge dot — only animates when session is actively under
   green flag. The dot sits at the current elapsed position and pulses to
   communicate "live" presence. Sized to be visible above the 4px track. */
.mg-progress__pulse {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  transform: translate(-50%, -50%);
  transition: left 0.6s ease-out;
  box-shadow: 0 0 0 2px var(--bg, #07090d);  /* gap from fill */
}

.mg-progress__pulse--live {
  animation: mg-pulse-live 2s ease-in-out infinite;
}

@keyframes mg-pulse-live {
  0%, 100% {
    box-shadow:
      0 0 0 2px var(--bg, #07090d),
      0 0 0 0 rgba(255, 255, 255, 0.55);
  }
  50% {
    box-shadow:
      0 0 0 2px var(--bg, #07090d),
      0 0 0 4px rgba(255, 255, 255, 0.0);
  }
}

/* Meta line below the bar — elapsed left, remaining right */
.mg-progress__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10px;
  font-weight: 600;
  color: var(--text3, #7d8390);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mg-progress__meta-left,
.mg-progress__meta-right {
  white-space: nowrap;
}


/* ── Panel hosts (filled by later chunks) ─────────────────────────────────── */

.mg-cards {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Empty .mg-cards (Chunk 1 default) renders nothing — no margin, no padding
   beyond what the children would add. */
.mg-cards:empty {
  display: none;
}

.mg-panel {
  margin: 20px 16px 0;
  padding: 16px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
}

/* Empty panel hosts render nothing — keeps the scaffold visually clean
   until later chunks fill them in. */
.mg-panel:empty {
  display: none;
}


/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .mg-progress__fill,
  .mg-progress__pulse {
    transition: none;
  }
  .mg-progress__pulse--live {
    animation: none;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   PER-CAR CARDS  (Chunk 2)
   ════════════════════════════════════════════════════════════════════════ */
/*
   The visual identity of the tab. Cards (not rows) signal "your space."
   Five-row skeleton: identity → position → state → pace → next pit.
   Same skeleton serves the off-weekend variant (Chunk 7+) — content shifts,
   structure doesn't.

   Per-class accent (4px left edge) uses --accent set inline on each card
   from the JS layer. Class color also tints the car-number in the identity
   column and the pace sparkline stroke.
*/

.mg-cards {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Note when followed cars aren't in the current session — keeps the user
   oriented without rendering tombstone cards. */
.mg-cards__note {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--text3, #7d8390);
  font-style: italic;
  padding: 6px 4px 2px;
  letter-spacing: 0.02em;
}


/* ── Card root ────────────────────────────────────────────────────────── */
/* Brief E, Option B story-forward card. Section paddings replace the old
   single card-level padding so each section (top / storyline / progression
   / facts) can control its own spacing per the locked visual spec. */

.car-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 14px;
  overflow: hidden;
  font-family: 'Outfit', sans-serif;
}

/* Left edge accent in class color (--accent set inline by JS). */
.car-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent, #888);
}

/* Skeleton card while liveState is still loading — same dimensions as a
   real card, dimmer content. */
.car-card--skeleton {
  opacity: 0.5;
}
.cc-top__num--skeleton    { color: var(--text3) !important; }
.cc-top__driver--skeleton { color: var(--text3); }


/* ── Top section: identity + position + meta line ───────────────────────── */

.cc-top {
  padding: 16px 16px 12px;
}

.cc-top__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.cc-top__driver-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.cc-top__driver {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-top__num {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  /* color set inline via classColorVar() */
}

.cc-top__num::before {
  content: '#';
  opacity: 0.6;
}

.cc-top__pos {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-shrink: 0;
}

.cc-top__pos-actual {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cc-top__pos-actual--retired {
  color: var(--text3);
  font-size: 16px;
}

.cc-top__pos-eff {
  font-size: 10px;
  font-weight: 700;
  color: var(--yellow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cc-top__meta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text3);
}


/* ── Storyline callout ───────────────────────────────────────────────────── */

.cc-storyline {
  margin: 4px 16px 12px;
  padding: 10px 12px;
  background: rgba(255, 214, 0, 0.05);
  border: 1px solid rgba(255, 214, 0, 0.2);
  border-radius: 8px;
}

.cc-storyline__label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 4px;
}

.cc-storyline__text {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
}


/* ── Race progression bar ────────────────────────────────────────────────── */

.mg-prog {
  padding: 4px 16px 4px;
}

.mg-prog__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 6px;
}

.mg-prog__bar {
  display: flex;
  height: 22px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.mg-prog__segment {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-right: 1px solid rgba(10, 14, 20, 0.4);
}

.mg-prog__segment:last-child {
  border-right: none;
}

.mg-prog__segment--current {
  background: var(--yellow);
  color: rgba(0, 0, 0, 0.7);
}

.mg-prog__segment--future {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text3);
}

.mg-prog__legend {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text3);
  margin-top: 5px;
  font-weight: 500;
}


/* ── Facts row ────────────────────────────────────────────────────────────── */

.mg-facts {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 12px 16px 16px;
  border-radius: 6px;
  overflow: hidden;
}

.mg-facts__cell {
  background: rgba(0, 0, 0, 0.2);
  padding: 8px 10px;
  text-align: center;
}

.mg-facts__label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 2px;
}

.mg-facts__value {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}


/* ── Off-weekend facts (Brief E, Task 5) ─────────────────────────────────── */
/* Stacked with dividers, not the race-active facts row's 3-column grid —
   off-weekend cards only carry two facts (last race, next race) and read
   better as label/value pairs than compressed cells. */

.cc-ow-facts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px 14px;
}

.cc-ow-fact {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  gap: 12px;
}

.cc-ow-fact__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text3);
  flex-shrink: 0;
}

.cc-ow-fact__value {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-align: right;
}

.cc-ow-fact__value .accent {
  color: var(--yellow);
  font-weight: 700;
}

.cc-ow-fact__value .muted {
  color: var(--text3);
  font-weight: 400;
}


/* ════════════════════════════════════════════════════════════════════════
   LAP CHART  (Chunk 3) — .mg-lap-*
   ════════════════════════════════════════════════════════════════════════ */
/*
   Filtered to classes containing followed cars. Chip strip at top selects
   active class; SVG renders followed cars solid + ghosts; legend lets
   user tap-to-elevate non-followed cars temporarily.

   FCY bands carry from Numbers tab treatment (faint yellow vertical
   regions). Y-axis = lap time (faster = top, conventional motorsport
   chart orientation).
*/

/* Panel header (reused for any panel; not lap-specific but added here
   because lap chart is the first panel to use it). */
.mg-panel__header {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text2, #b6bcc7);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.mg-panel__empty {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: var(--text3, #7d8390);
  padding: 24px 8px;
  text-align: center;
  font-style: italic;
}


/* ── Class chips ──────────────────────────────────────────────────────── */
/* Row of tappable class filters above the chart. Each shows class dot
   (color), label, and a count of followed cars in that class. */

.mg-lap__chips {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.mg-lap__chip {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text3, #7d8390);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.mg-lap__chip:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text2, #b6bcc7);
}

.mg-lap__chip--active {
  background: rgba(255, 255, 255, 0.10);
  color: var(--text, #f5f7fa);
  border-color: rgba(255, 255, 255, 0.15);
}

.mg-lap__chip-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.mg-lap__chip-label {
  letter-spacing: 0.06em;
}

.mg-lap__chip-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--text4, #5a606b);
  font-variant-numeric: tabular-nums;
}

.mg-lap__chip--active .mg-lap__chip-count {
  color: var(--text2, #b6bcc7);
}


/* ── SVG ──────────────────────────────────────────────────────────────── */
/* Container is full-width; SVG viewBox scales it. */

.mg-lap__svg {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 8px;
}


/* ── Legend ───────────────────────────────────────────────────────────── */
/* Tappable car chips. Followed cars get a permanent active state; tap
   any non-followed chip to elevate it (highlight on chart). */

.mg-lap__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.mg-lap__legend-chip {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text3, #7d8390);
  display: flex;
  align-items: baseline;
  gap: 5px;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.mg-lap__legend-chip:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text2, #b6bcc7);
}

.mg-lap__legend-chip--active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text, #f5f7fa);
  border-color: rgba(255, 255, 255, 0.12);
}

/* Followed cars use the accent color (class color, set via the chip's
   parent panel context). For simplicity in chunk 3, just use the brighter
   active treatment — class-color accent on legend chips is a nice future
   tweak when we know the active class color at render time. */
.mg-lap__legend-chip--followed {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--text, #f5f7fa);
}

.mg-lap__legend-num {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.mg-lap__legend-driver {
  font-weight: 500;
  letter-spacing: 0.01em;
}


/* ════════════════════════════════════════════════════════════════════════
   EFFECTIVE POSITION DRIFT  (Chunk 4) — .mg-drift-*
   ════════════════════════════════════════════════════════════════════════ */
/*
   Small multiples. One row per followed car, all rows share x-axis (laps)
   and y-axis (P1 → Pmax) for compare-across reading. Lines accumulate as
   the race progresses — first render is one dot per car, by lap 5 you see
   the shape forming, by mid-race the strategic story is legible.
*/

.mg-drift__stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mg-drift__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mg-drift__label {
  flex: 0 0 64px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mg-drift__num {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  /* color set inline (class color) */
}

.mg-drift__current {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  color: var(--text3, #7d8390);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.mg-drift__chart {
  flex: 1 1 auto;
  height: 56px;
  min-width: 0;
  display: block;
}


/* ════════════════════════════════════════════════════════════════════════
   ACTIVITY FEED  (Chunk 5) — .mg-feed-*
   ════════════════════════════════════════════════════════════════════════ */
/*
   Reverse chronological event feed. Each row: car number (class color)
   left, text + meta right. Tag chips on the meta row color-coded by event
   type — CUE/PACE cyan (informational), PIT/FCY amber (mid-importance),
   FCY GAIN + EFFECTIVE gain green (positive), EFFECTIVE lose red.
*/

.mg-feed {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mg-feed__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.mg-feed__num {
  flex: 0 0 36px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.3;
  /* color set inline (class color) */
}

.mg-feed__num--global {
  color: var(--text3, #7d8390);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding-top: 2px;
}

.mg-feed__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mg-feed__text {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text, #f5f7fa);
}

.mg-feed__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text3, #7d8390);
  font-variant-numeric: tabular-nums;
}

.mg-feed__sep {
  color: var(--text4, #5a606b);
}

.mg-feed__lap {
  letter-spacing: 0.02em;
}

.mg-feed__time {
  letter-spacing: 0.02em;
}

/* ── Tag chips ────────────────────────────────────────────────────────── */
/* Small uppercase chip with subtle colored background per event type. */

.mg-feed__tag {
  font-family: 'Outfit', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text2, #b6bcc7);
}

.mg-feed__tag--cue {
  background: rgba(110, 200, 230, 0.14);
  color: #8ed6e8;
}

.mg-feed__tag--pace {
  background: rgba(110, 200, 230, 0.14);
  color: #8ed6e8;
}

.mg-feed__tag--pit {
  background: rgba(255, 180, 80, 0.14);
  color: #ffb84a;
}

.mg-feed__tag--fcy {
  background: rgba(255, 180, 80, 0.14);
  color: #ffb84a;
}

.mg-feed__tag--fcy_gain {
  background: rgba(86, 200, 130, 0.16);
  color: #6fd49a;
}

.mg-feed__tag--effective-gain {
  background: rgba(86, 200, 130, 0.16);
  color: #6fd49a;
}

.mg-feed__tag--effective-lose {
  background: rgba(232, 110, 110, 0.16);
  color: #ee8a8a;
}


/* ════════════════════════════════════════════════════════════════════════
   BROWSE SECTION  (Brief F.1) — .mg-browse-*
   ════════════════════════════════════════════════════════════════════════ */
/*
   Always-visible "follow a car right now" section below the followed-car
   cards. Powered by /api/weekend/last-race-results (Brief E's endpoint) --
   the only path to following a car that doesn't require a live session.
*/

.mg-browse {
  margin-top: 20px;
}

.mg-browse__header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 6px 4px;
}

.mg-browse__title {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text3);
}

.mg-browse__meta {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  letter-spacing: 0.05em;
  font-weight: 500;
  color: var(--text3);
  text-align: right;
  white-space: nowrap;
}

.mg-browse__subheader {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--text3);
  text-transform: uppercase;
  padding: 12px 4px 6px;
}

.mg-browse__subheader:first-of-type {
  padding: 6px 4px 6px;
}

.mg-browse__row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  position: relative;
  overflow: hidden;
}

.mg-browse__row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent, var(--text3));
}

.mg-browse__num {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent, var(--text));
  font-variant-numeric: tabular-nums;
  text-align: center;
  line-height: 1;
  padding-left: 5px;
}

.mg-browse__num::before {
  content: '#';
  opacity: 0.6;
}

.mg-browse__identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mg-browse__identity-primary {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mg-browse__identity-meta {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  color: var(--text3);
  letter-spacing: 0.03em;
  font-weight: 500;
  line-height: 1.2;
}

.mg-browse__action {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 6px 10px;
  border-radius: 14px;
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: var(--purple);
  background: transparent;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.mg-browse__action--disabled {
  color: var(--text3);
  border-color: transparent;
  background: rgba(255, 255, 255, 0.03);
  font-size: 9px;
  letter-spacing: 0.08em;
  cursor: default;
}

.mg-browse__empty {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: var(--text3, #7d8390);
  text-align: center;
  padding: 24px 8px;
  font-style: italic;
}