/* ═══════════════════════════════════════════════════════════════
   MORVO — djokowi.dev Design System
   Clean · Minimal · Modern · Apple-inspired
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS Variables (Light) ─────────────────────────────────── */
:root {
  --bg: #F2F2F7;
  --bg2: #F4F7FE;
  --card: #FFFFFF;
  --bar: #F7F7F9;
  --fill: #F5F5F7;
  --fill2: #EBEBF0;
  --ink: #1D1D1F;
  --muted: #86868B;
  --faint: #8E8E93;
  --ph: #AEAEB2;
  --line: #00000014;
  --line2: #0000000A;
  --accent: #0071E3;
  --accent2: #0A84FF;
  --accent-soft: #0071E31F;
  --ok: #30D158;
  --ok-ink: #248A3D;
  --ok-soft: #30D1581F;
  --warn: #FF9F0A;
  --warn-ink: #B25E00;
  --warn-soft: #FF9F0A26;
  --bad: #FF453A;
  --bad-ink: #D70015;
  --bad-soft: #FF453A26;
  --purple: #5E5CE6;
  --teal: #5AC8FA;
  --orange: #FF9F0A;
  --r: 12px;
  --ri: 8px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-full: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sh: 0 4px 8px #0000000F, 0 14px 36px #00000014;
  --sh-sm: 0 1px 3px #0000000F, 0 4px 12px #0000000A;
  --sh-lg: 0 8px 24px #00000014, 0 24px 48px #0000001A;
  --font: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;

  /* ── Legacy variable aliases (for old templates) ─────── */
  --text: var(--ink);
  --text-2: var(--muted);
  --text-3: var(--faint);
  --win: var(--card);
  --win-raised: var(--card);
  --sep: var(--line);
  --sep-strong: var(--line2);
  --accent-tint: var(--accent-soft);
  --accent-tint-2: #0071E333;
  --accent-ring: #0071E340;
  --accent-dark: #0066D6;
  --accent-pressed: #0055B3;
  --green: var(--ok);
  --green-tint: var(--ok-soft);
  --orange-tint: var(--warn-soft);
  --red: var(--bad);
  --red-tint: var(--bad-soft);
  --fill-2: var(--fill2);
  --fill-3: #00000014;
  --r-sm: var(--ri);
  --r-md: var(--r);
  --t: 0.15s ease;
  --t-slow: 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  --sh-card: var(--sh-sm);
  --sh-pop: var(--sh);
  --sh-win: var(--sh-lg);
  --color-primary: var(--accent);
  --color-border-subtle: var(--line);
}

/* ── Dark Mode ─────────────────────────────────────────────── */
html.dark,
:root[data-theme="dark"] {
  --bg: #1C1C1E;
  --bg2: #18181B;
  --card: #2C2C2E;
  --bar: #232326;
  --fill: #3A3A3C;
  --fill2: #323236;
  --ink: #FFFFFF;
  --muted: #98989F;
  --faint: #6E6E73;
  --ph: #6E6E73;
  --line: #FFFFFF1F;
  --line2: #FFFFFF12;
  --accent: #0A84FF;
  --accent2: #5AC8FA;
  --accent-soft: #0A84FF2E;
  --ok: #32D74B;
  --ok-ink: #32D74B;
  --ok-soft: #32D74B26;
  --warn: #FF9F0A;
  --warn-ink: #FF9F0A;
  --warn-soft: #FF9F0A26;
  --bad: #FF453A;
  --bad-ink: #FF453A;
  --bad-soft: #FF453A26;
  --sh: 0 4px 8px #00000033, 0 14px 36px #0000004D;
  --sh-sm: 0 1px 3px #00000033, 0 4px 12px #00000026;
  --sh-lg: 0 8px 24px #0000004D, 0 24px 48px #00000066;

  /* ── Dark mode legacy aliases ────────────────────────── */
  --accent-tint-2: #0A84FF40;
  --accent-ring: #0A84FF59;
  --accent-dark: #007AFF;
  --fill-3: #FFFFFF1F;
}

/* ── GLOBAL RESET ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100dvh;
  background: linear-gradient(180deg, var(--bg2) 0%, var(--bg) 60%);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── KILL macOS CHROME (but NOT #macWindow — #app lives inside it!) ── */
#macMenuBar,
#macDock,
#hamburgerBtn,
#navOverlay,
#globalNav,
#macWindowBar,
#macSidebarBtn,
#macShareBtn,
.tlights,
.mac-titlebar,
.simple-nav {
  display: none !important;
}

/* Reset macOS window wrapper to a plain, full-width container so #app shows */
#macWindow {
  display: block !important;
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important;
  transform: none !important;
}
#macWindow .mac-win-body,
.mac-win-body {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

/* ── NAV BAR ───────────────────────────────────────────────── */
.mv-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 52px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--line);
}
html.dark .mv-nav {
  background: rgba(28, 28, 30, 0.82);
}
.mv-nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  height: 100%;
}
.mv-nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.mv-nav-logo-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 113, 227, 0.3);
}
.mv-nav-logo-icon .material-symbols-outlined { font-size: 15px; }
.mv-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.mv-nav-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--ri);
  transition: all 0.2s;
}
.mv-nav-link:hover {
  color: var(--ink);
  background: var(--fill);
}
.mv-nav-link.active {
  color: var(--accent);
  font-weight: 600;
}
.mv-nav-link.btn-primary {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: var(--ri);
}
.mv-nav-link.btn-primary:hover {
  filter: brightness(1.1);
  background: var(--accent);
}
.mv-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--ri);
  background: var(--fill);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s;
}
.mv-theme-toggle:hover {
  background: var(--fill2);
  color: var(--ink);
}
.mv-theme-toggle .material-symbols-outlined { font-size: 18px; }
@media (max-width: 768px) {
  .mv-nav-links .mv-nav-link:not(.btn-primary):not(.mv-theme-toggle) { display: none; }
}

/* ── APP CONTAINER ─────────────────────────────────────────── */
#app {
  min-height: calc(100dvh - 52px);
}

/* ── CARDS ─────────────────────────────────────────────────── */
.mv-card {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--sh);
  outline: 1px solid var(--line);
  overflow: hidden;
}
.mv-card-body { padding: 20px; }
.mv-card-flat {
  background: var(--card);
  border-radius: var(--r);
  border: 1px solid var(--line);
  padding: 20px;
}
.mv-card-sm {
  background: var(--card);
  border-radius: var(--r);
  border: 1px solid var(--line);
  padding: 16px;
}

/* ── BUTTONS ───────────────────────────────────────────────── */
.mv-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--ri);
  font: 600 13px var(--font);
  cursor: pointer;
  transition: all 0.2s var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.mv-btn:active { transform: scale(0.98); }
.mv-btn-primary {
  background: linear-gradient(110deg, var(--accent), var(--accent2));
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 113, 227, 0.3);
}
.mv-btn-primary:hover { filter: brightness(1.07); }
.mv-btn-primary:disabled { opacity: 0.55; cursor: default; box-shadow: none; }
.mv-btn-secondary {
  background: var(--fill);
  color: var(--ink);
  border: 1px solid var(--line);
}
.mv-btn-secondary:hover { background: var(--fill2); }
.mv-btn-ghost {
  background: transparent;
  color: var(--accent);
}
.mv-btn-ghost:hover { background: var(--accent-soft); }
.mv-btn-sm { padding: 6px 14px; font-size: 12px; }
.mv-btn-lg { padding: 12px 28px; font-size: 15px; border-radius: var(--r); }
.mv-btn-block { width: 100%; }

/* ── FORMS ─────────────────────────────────────────────────── */
.mv-input,
.mv-field input,
.mv-field textarea,
.mv-field select {
  width: 100%;
  padding: 10px 12px;
  background: var(--fill);
  border: 1px solid var(--line);
  border-radius: var(--ri);
  color: var(--ink);
  font: 500 13px var(--font);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.mv-input:focus,
.mv-field input:focus,
.mv-field textarea:focus,
.mv-field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.mv-input::placeholder,
.mv-field input::placeholder,
.mv-field textarea::placeholder {
  color: var(--ph);
}
.mv-field { margin-bottom: 16px; }
.mv-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.mv-field-with-icon {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 40px;
  background: var(--fill);
  border: 1px solid var(--line);
  border-radius: var(--ri);
}
.mv-field-with-icon:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.mv-field-with-icon input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: 0;
  padding: 0;
  color: var(--ink);
  font: 500 13px var(--font);
}
.mv-field-with-icon input::placeholder { color: var(--ph); }
.mv-field-with-icon .mv-field-icon {
  width: 16px;
  height: 16px;
  color: var(--faint);
  flex-shrink: 0;
}

/* ── BADGES / PILLS ────────────────────────────────────────── */
.mv-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font: 600 10px var(--font);
  letter-spacing: 0.3px;
}
.mv-pill-ok { background: var(--ok-soft); color: var(--ok-ink); }
.mv-pill-warn { background: var(--warn-soft); color: var(--warn-ink); }
.mv-pill-bad { background: var(--bad-soft); color: var(--bad-ink); }
.mv-pill-info { background: var(--accent-soft); color: var(--accent); }
.mv-pill-neutral { background: var(--fill); color: var(--muted); border: 1px solid var(--line); }

/* ── STATUS DOTS ───────────────────────────────────────────── */
.mv-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mv-dot-ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); animation: mv-pulse 2s var(--ease) infinite; }
.mv-dot-warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.mv-dot-bad { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.mv-dot-accent { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
@keyframes mv-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── PROGRESS BARS ─────────────────────────────────────────── */
.mv-progress {
  height: 6px;
  border-radius: var(--r-full);
  background: var(--line);
  overflow: hidden;
}
.mv-progress-fill {
  height: 100%;
  border-radius: var(--r-full);
  background: var(--ok);
  transition: width 0.8s var(--ease);
}
.mv-progress-fill.accent { background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.mv-progress-fill.warn { background: var(--warn); }
.mv-progress-fill.bad { background: var(--bad); }

/* ── TYPOGRAPHY ────────────────────────────────────────────── */
.mv-h1 {
  font-family: 'Inter', var(--font);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--ink);
  line-height: 1.15;
}
.mv-h2 {
  font-family: 'Inter', var(--font);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ink);
  line-height: 1.2;
}
.mv-h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.mv-sub {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.mv-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--faint);
}
.mv-accent-text { color: var(--accent); }
.mv-muted-text { color: var(--muted); }
.mv-mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.3px; }

/* ── SEGMENTED CONTROLS ────────────────────────────────────── */
.mv-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-full);
  background: var(--fill);
  outline: 1px solid var(--line);
}
.mv-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--faint);
  font: 600 11.5px var(--font);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.mv-seg-btn.active {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.mv-seg-btn .material-symbols-outlined { font-size: 13px; }

/* ── TABLES ────────────────────────────────────────────────── */
.mv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.mv-table th {
  text-align: left;
  padding: 10px 14px;
  background: var(--bar);
  color: var(--faint);
  font: 600 10px var(--font);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.mv-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line2);
  color: var(--ink);
}
.mv-table tr:last-child td { border-bottom: 0; }
.mv-table tr:hover { background: var(--fill); }

/* ── ALERTS ────────────────────────────────────────────────── */
.mv-alert {
  padding: 12px 16px;
  border-radius: var(--ri);
  font-size: 13px;
  margin: 12px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mv-alert-ok { background: var(--ok-soft); color: var(--ok-ink); border: 1px solid rgba(48,209,88,0.2); }
.mv-alert-warn { background: var(--warn-soft); color: var(--warn-ink); border: 1px solid rgba(255,159,10,0.2); }
.mv-alert-bad { background: var(--bad-soft); color: var(--bad-ink); border: 1px solid rgba(255,69,58,0.2); }
.mv-alert-info { background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(0,113,227,0.2); }

/* ── STAT CARDS ────────────────────────────────────────────── */
.mv-stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.2s var(--ease);
}
.mv-stat:hover { box-shadow: var(--sh-sm); transform: translateY(-1px); }
.mv-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--ri);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mv-stat-icon .material-symbols-outlined { font-size: 20px; }
.mv-stat-label { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.mv-stat-value { font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }

/* ── GRID HELPERS ──────────────────────────────────────────── */
.mv-grid { display: grid; gap: 16px; }
.mv-grid-2 { grid-template-columns: 1fr; }
.mv-grid-3 { grid-template-columns: 1fr; }
.mv-grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .mv-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .mv-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .mv-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .mv-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .mv-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ── CONTAINER ─────────────────────────────────────────────── */
.mv-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}
.mv-container-sm {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 20px;
}
.mv-container-md {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── SECTION ───────────────────────────────────────────────── */
.mv-section {
  padding: 48px 0;
}
.mv-section-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 6px;
  text-align: center;
}
.mv-section-sub {
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  max-width: 480px;
  margin: 0 auto 36px;
}

/* ── UTILITIES ─────────────────────────────────────────────── */
.mv-hidden { display: none !important; }
.mv-flex { display: flex; }
.mv-flex-col { display: flex; flex-direction: column; }
.mv-items-center { align-items: center; }
.mv-justify-between { justify-content: space-between; }
.mv-justify-center { justify-content: center; }
.mv-gap-1 { gap: 4px; }
.mv-gap-2 { gap: 8px; }
.mv-gap-3 { gap: 12px; }
.mv-gap-4 { gap: 16px; }
.mv-gap-5 { gap: 20px; }
.mv-mt-1 { margin-top: 4px; }
.mv-mt-2 { margin-top: 8px; }
.mv-mt-3 { margin-top: 12px; }
.mv-mt-4 { margin-top: 16px; }
.mv-mt-5 { margin-top: 20px; }
.mv-mt-6 { margin-top: 24px; }
.mv-mb-2 { margin-bottom: 8px; }
.mv-mb-3 { margin-bottom: 12px; }
.mv-mb-4 { margin-bottom: 16px; }
.mv-p-3 { padding: 12px; }
.mv-p-4 { padding: 16px; }
.mv-p-5 { padding: 20px; }
.mv-text-center { text-align: center; }
.mv-text-right { text-align: right; }
.mv-w-full { width: 100%; }
.mv-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-flex-1 { flex: 1; min-width: 0; }
.mv-shrink-0 { flex-shrink: 0; }

/* ── ANIMATIONS ────────────────────────────────────────────── */
@keyframes mv-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.mv-fadein { animation: mv-fadein 0.3s var(--ease); }

@keyframes mv-spin {
  to { transform: rotate(360deg); }
}
.mv-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: mv-spin 0.7s linear infinite;
}

/* ── SCROLLBAR ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--fill2); border-radius: 10px; }
* { scrollbar-width: thin; scrollbar-color: var(--fill2) transparent; }

/* ── ICON BUTTON ───────────────────────────────────────────── */
.mv-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--ri);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s;
}
.mv-icon-btn:hover {
  background: var(--fill);
  color: var(--ink);
}
.mv-icon-btn.danger:hover {
  background: var(--bad-soft);
  color: var(--bad);
}
.mv-icon-btn .material-symbols-outlined { font-size: 18px; }

/* ── TOAST OVERRIDE ────────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  padding: 12px 20px;
  border-radius: var(--r);
  font: 500 13px var(--font);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh-lg);
  color: var(--ink);
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.3s var(--ease);
}
.toast.show {
  transform: translateY(0);
  opacity: 1;
}
.toast-success { border-left: 3px solid var(--ok); }
.toast-error { border-left: 3px solid var(--bad); }

/* ── GLASS EFFECT (for templates) ──────────────────────────── */
.glass {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
html.dark .glass {
  background: rgba(28, 28, 30, 0.72);
}

/* ── UTILITY CLASSES (legacy support) ─────────────────────── */
.fade-in { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.slide-up { animation: slideUp 0.4s ease; }
@keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── REDUCED MOTION ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}