/* ═══════════════════════════════════════════════════════════════════════
   LEOMEE — Premium SaaS Redesign System
   ───────────────────────────────────────────────────────────────────────
   "Linear meets Discord meets Stripe." A modern, spacious, minimal skin
   applied on top of the Django templates via the existing token system.

   Loaded last in base.html and scoped to `body.lm-redesign` (set on every
   page except the welcome landing). It re-maps the app's semantic CSS
   variables to the new palette, so every component recolors without markup
   changes — then refines the key surfaces (header, sidebar, feed, cards,
   buttons, inputs, widgets, modals) into a polished product UI.

   Micro-interactions use CSS transitions (the server-rendered equivalent of
   the requested Framer-Motion effects). Icons remain Lucide (already loaded).
   ═══════════════════════════════════════════════════════════════════════ */

body.lm-redesign {
  /* ── Palette ─────────────────────────────────────────────────────── */
  --c-bg:        #F8FAFC;
  --c-surface:   #FFFFFF;
  --c-primary:   #4F46E5;
  --c-primary-h: #4338CA;
  --c-accent:    #7C3AED;
  --c-success:   #16A34A;
  --c-warning:   #F59E0B;
  --c-danger:    #DC2626;
  --c-text:      #0F172A;
  --c-text-2:    #64748B;
  --c-border:    #E2E8F0;
  --c-hover:     #F1F5F9;
  --c-grad:      linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);

  /* ── Spacing (8px system) ────────────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* ── Radius ──────────────────────────────────────────────────────── */
  --rad-card:   20px;
  --rad-widget: 20px;
  --rad-btn:    14px;
  --rad-input:  14px;
  --rad-pill:   999px;

  /* ── Shadows (very soft) ─────────────────────────────────────────── */
  --sh-xs:  0 1px 2px rgba(15, 23, 42, 0.04);
  --sh-sm:  0 2px 8px rgba(15, 23, 42, 0.05);
  --sh:     0 4px 20px rgba(15, 23, 42, 0.06);
  --sh-md:  0 10px 30px rgba(15, 23, 42, 0.08);
  --sh-lg:  0 20px 48px rgba(15, 23, 42, 0.12);
  --ring:   0 0 0 3px rgba(79, 70, 229, 0.20);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Re-map the app's existing semantic tokens to the new palette so
        every component that reads them recolors automatically. ──────── */
  --bg-primary:       var(--c-surface);
  --bg-secondary:     var(--c-hover);
  --bg-hover:         var(--c-hover);
  --text-primary:     var(--c-text);
  --text-secondary:   var(--c-text-2);
  --text-muted:       var(--c-text-2);
  --border-color:     var(--c-border);
  --accent-purple:    var(--c-accent);
  --accent-pink:      var(--c-accent);
  --gradient-primary: var(--c-grad);
  --shadow-lg:        var(--sh-lg);

  /* Header (leomee-theme) tokens */
  --lm-bg:            var(--c-bg);
  --lm-text:          var(--c-text);
  --lm-text-mut:      var(--c-text-2);
  --lm-border:        var(--c-border);
  --lm-surface:       var(--c-hover);
  --lm-surface-2:     var(--c-hover);
  --lm-grad-primary:  var(--c-grad);
  --lm-shadow-soft:   var(--sh);
  --lm-shadow-card:   var(--sh-md);
  --lm-violet:        var(--c-accent);

  background: var(--c-bg) !important;
  color: var(--c-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

/* Flat, clean background — drop the decorative blob stage for the minimal
   SaaS look (gradients only on CTAs / hero, per spec). */
body.lm-redesign .lm-bg-stage { display: none !important; }

/* ── Typography scale ──────────────────────────────────────────────── */
body.lm-redesign { font-size: 15px; line-height: 1.6; }
body.lm-redesign h1,
body.lm-redesign .page-title,
body.lm-redesign .section-title,
body.lm-redesign .modal-title,
body.lm-redesign .panel-header {
  font-family: 'Inter', sans-serif;
  color: var(--c-text);
  letter-spacing: -0.02em;
}
body.lm-redesign h1, body.lm-redesign .page-title { font-weight: 700; font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.2; }
body.lm-redesign h2, body.lm-redesign .section-title { font-weight: 600; font-size: 1.25rem; line-height: 1.3; }
body.lm-redesign h3 { font-weight: 600; font-size: 1.05rem; }
body.lm-redesign small, body.lm-redesign .meta, body.lm-redesign .muted {
  color: var(--c-text-2); font-size: 0.8125rem; font-weight: 500;
}
body.lm-redesign ::selection { background: rgba(79, 70, 229, 0.18); color: var(--c-text); }

/* ── Layout — center + breathe ─────────────────────────────────────── */
body.lm-redesign .layout-container { gap: var(--s-5); }
body.lm-redesign .main-content { padding-bottom: var(--s-8); }

/* ═══════════════════════ HEADER — glass, sticky ═════════════════════ */
body.lm-redesign .main-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(248, 250, 252, 0.72) !important;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid rgba(226, 232, 240, 0.7) !important;
  box-shadow: none;
}
body.lm-redesign .main-header.is-scrolled {
  box-shadow: var(--sh-sm);
}
body.lm-redesign .main-header .logo {
  color: var(--c-primary) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em;
}
body.lm-redesign .header-nav-btn {
  border-radius: var(--rad-pill) !important;
  color: var(--c-text-2) !important;
  font-weight: 500 !important;
  transition: background .18s ease, color .18s ease, transform .18s var(--ease);
}
body.lm-redesign .header-nav-btn:hover {
  background: var(--c-hover) !important;
  color: var(--c-text) !important;
  transform: translateY(-1px);
}
body.lm-redesign .header-nav-btn .badge,
body.lm-redesign .badge {
  background: var(--c-grad) !important;
  color: #fff; font-weight: 600; border-radius: var(--rad-pill);
}
body.lm-redesign .avatar-circle-sm {
  border-radius: 50%; background: var(--c-grad);
}

/* Command-bar style global search */
body.lm-redesign .header-search {
  position: relative;
  flex: 1; max-width: 460px; margin: 0 auto;
  display: flex; align-items: center; gap: var(--s-2);
  height: 40px; padding: 0 var(--s-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--rad-btn);
  box-shadow: var(--sh-xs);
  transition: border-color .18s ease, box-shadow .18s ease;
}
body.lm-redesign .header-search:focus-within { border-color: var(--c-primary); box-shadow: var(--ring); }
body.lm-redesign .header-search-icon { width: 18px; height: 18px; color: var(--c-text-2); flex-shrink: 0; stroke-width: 1.75; }
/* The input must be a bare field inside the pill — no inner border/box.
   id-level selector + !important beats the generic input[type=search] rules. */
body.lm-redesign #globalSearchInput.header-search-input {
  flex: 1; height: 100%; min-height: 0 !important;
  border: none !important; background: transparent !important;
  box-shadow: none !important; outline: none !important;
  padding: 0 !important; margin: 0;
  -webkit-appearance: none; appearance: none;
  font-size: 0.9rem; color: var(--c-text);
}
body.lm-redesign #globalSearchInput:focus { border: none !important; box-shadow: none !important; outline: none !important; }
body.lm-redesign #globalSearchInput::-webkit-search-decoration,
body.lm-redesign #globalSearchInput::-webkit-search-cancel-button { -webkit-appearance: none; }
body.lm-redesign .header-search-results {
  position: absolute; top: calc(100% + var(--s-2)); left: 0; right: 0;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--rad-btn); box-shadow: var(--sh-lg);
  overflow: hidden auto; max-height: 380px; z-index: 60; padding: var(--s-1);
}
body.lm-redesign .header-search-results .suggestion-item { border-radius: var(--rad-btn); }
body.lm-redesign .header-search-results .suggestion-item:hover { background: var(--c-hover); }

/* Create Post CTA (gradient) */
body.lm-redesign .header-create-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 var(--s-4);
  background: var(--c-grad); color: #fff;
  border-radius: var(--rad-btn); font-weight: 600; font-size: 0.875rem;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25);
  transition: transform .18s var(--ease), box-shadow .25s var(--ease), filter .18s ease;
}
body.lm-redesign .header-create-btn i { width: 18px; height: 18px; stroke-width: 2; }
body.lm-redesign .header-create-btn:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 22px rgba(79, 70, 229, 0.35);
  filter: brightness(1.03);
}

/* Icon-only header buttons (theme toggle) */
body.lm-redesign .header-icon-btn {
  width: 40px; height: 40px; padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px !important; color: var(--c-text-2) !important;
}
body.lm-redesign .header-icon-btn i { width: 19px; height: 19px; stroke-width: 1.75; }

/* Guest "Login / Register" — solid gradient pill with WHITE text (the generic
   .header-nav-btn muted colour was making it unreadable). id beats the class. */
body.lm-redesign #guestActions a.header-nav-btn,
body.lm-redesign #guestActions a.header-nav-btn:hover {
  height: 40px; padding: 0 20px !important;
  background: var(--c-grad) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--rad-btn) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25);
  transition: transform .18s var(--ease), box-shadow .25s var(--ease), filter .18s ease;
}
body.lm-redesign #guestActions a.header-nav-btn i { color: #fff !important; }
body.lm-redesign #guestActions a.header-nav-btn:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 22px rgba(79, 70, 229, 0.35);
  filter: brightness(1.03);
}

/* ═══════════════════════ SIDEBAR — floating nav ════════════════════ */
body.lm-redesign .menu-options {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--rad-widget);
  box-shadow: var(--sh);
  padding: var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-1);
  position: sticky; top: 84px;
}
body.lm-redesign .menu-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 10px 14px;
  border-radius: var(--rad-btn);
  color: var(--c-text-2);
  font-weight: 500;
  position: relative;
  transition: background .18s ease, color .18s ease, transform .15s var(--ease);
}
body.lm-redesign .menu-item i { width: 20px; height: 20px; stroke-width: 1.75; }
body.lm-redesign .menu-item:hover {
  background: var(--c-hover);
  color: var(--c-text);
  transform: translateX(2px);
}
body.lm-redesign .menu-item.active {
  background: rgba(79, 70, 229, 0.08);
  color: var(--c-primary);
  font-weight: 600;
}
body.lm-redesign .menu-item.active i { color: var(--c-primary); }
body.lm-redesign .menu-item.active::before {
  content: ''; position: absolute; left: -13px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 0 3px 3px 0;
  background: var(--c-grad);
}

/* ── Mobile bottom nav — floating pill bar ─────────────────────────── */
body.lm-redesign .mobile-bottom-nav {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid var(--c-border) !important;
  border-radius: var(--rad-widget);
  box-shadow: var(--sh-md);
  margin: 0 var(--s-3) var(--s-3);
  bottom: var(--s-2);
}
body.lm-redesign .mobile-bottom-nav a { border-radius: var(--rad-btn); transition: color .18s ease, background .18s ease; }
body.lm-redesign .mobile-bottom-nav a.active { color: var(--c-primary); background: rgba(79, 70, 229, 0.08); }
body.lm-redesign .mobile-bottom-nav a i { stroke-width: 1.75; }

/* ═══════════════════════ CARDS ═════════════════════════════════════ */
body.lm-redesign .card,
body.lm-redesign .panel,
body.lm-redesign .section-card,
body.lm-redesign .glass-card,
body.lm-redesign .post-card-modern,
body.lm-redesign .post-card,
body.lm-redesign .connection-card,
body.lm-redesign .category-card-compact,
body.lm-redesign .profile-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--rad-card);
  box-shadow: var(--sh);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s ease;
}
body.lm-redesign .card:hover,
body.lm-redesign .post-card-modern:hover,
body.lm-redesign .post-card:hover,
body.lm-redesign .connection-card:hover,
body.lm-redesign .category-card-compact:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: #CBD5E1;
}

/* ═══════════════════════ BUTTONS ═══════════════════════════════════ */
/* Primary — subtle gradient, 48px, scale on hover */
body.lm-redesign .common-btn-compact,
body.lm-redesign .primary-auth-btn,
body.lm-redesign .btn-primary,
body.lm-redesign .lm-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: 10px 20px;
  background: var(--c-grad) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--rad-btn) !important;
  font-weight: 600 !important; font-size: 0.9375rem;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25);
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .25s var(--ease), filter .18s ease;
}
body.lm-redesign .common-btn-compact:hover,
body.lm-redesign .primary-auth-btn:hover,
body.lm-redesign .btn-primary:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 8px 22px rgba(79, 70, 229, 0.35);
  filter: brightness(1.03);
}
body.lm-redesign .common-btn-compact:active,
body.lm-redesign .primary-auth-btn:active { transform: translateY(0) scale(.99); }

/* Secondary / ghost — outlined */
body.lm-redesign .ghost-btn,
body.lm-redesign .btn-secondary,
body.lm-redesign .outline-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: 0 18px;
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--rad-btn) !important;
  font-weight: 600; font-size: 0.9375rem;
  cursor: pointer;
  transition: transform .18s var(--ease), background .18s ease, border-color .18s ease;
}
body.lm-redesign .ghost-btn:hover,
body.lm-redesign .btn-secondary:hover,
body.lm-redesign .outline-btn:hover {
  background: var(--c-hover);
  border-color: #CBD5E1;
  transform: translateY(-2px);
}

/* ═══════════════════════ INPUTS / FORMS ════════════════════════════ */
body.lm-redesign .elegant-input,
body.lm-redesign input[type="text"],
body.lm-redesign input[type="email"],
body.lm-redesign input[type="password"],
body.lm-redesign input[type="search"],
body.lm-redesign input[type="number"],
body.lm-redesign textarea,
body.lm-redesign select {
  min-height: 44px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--rad-input);
  color: var(--c-text);
  font-size: 0.9375rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
body.lm-redesign .elegant-input::placeholder,
body.lm-redesign textarea::placeholder { color: #94A3B8; }
body.lm-redesign .elegant-input:focus,
body.lm-redesign input:focus,
body.lm-redesign textarea:focus,
body.lm-redesign select:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: var(--ring);
}
body.lm-redesign .input-label,
body.lm-redesign .input-field-group label {
  font-weight: 500; font-size: 0.8125rem; color: var(--c-text-2);
}

/* ═══════════════════════ FEED / POST CARDS ═════════════════════════ */
body.lm-redesign .post-card-modern { padding: var(--s-5); }
body.lm-redesign .post-card-avatar {
  border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 3px var(--c-border);
}
body.lm-redesign .post-card-author-name { font-weight: 600; color: var(--c-text); letter-spacing: -0.01em; }
body.lm-redesign .post-card-author-handle,
body.lm-redesign .post-card-time { color: var(--c-text-2); font-weight: 500; }
body.lm-redesign .post-category-tag {
  border-radius: var(--rad-pill);
  background: rgba(79, 70, 229, 0.08);
  color: var(--c-primary);
  font-weight: 600; font-size: 0.72rem;
  border: none;
}
body.lm-redesign .post-card-content { color: var(--c-text); line-height: 1.6; }
body.lm-redesign .post-image,
body.lm-redesign .post-media img { border-radius: var(--rad-btn); }
/* Action row buttons (like / comment / share / bookmark) — soft, tactile */
body.lm-redesign .post-action-btn,
body.lm-redesign .post-card-actions button,
body.lm-redesign .action-btn {
  border-radius: var(--rad-pill);
  transition: background .18s ease, color .18s ease, transform .15s var(--ease);
}
body.lm-redesign .post-action-btn:hover,
body.lm-redesign .action-btn:hover {
  background: var(--c-hover);
  transform: translateY(-1px);
}

/* ═══════════════════════ POLL / QUIZ ═══════════════════════════════ */
/* Rebuilt markup (main.js generatePostMedia). Interactive pill options,
   animated gradient result bars, tabular percentages. */
body.lm-redesign .poll-card {
  margin: var(--s-5) 0; padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--rad-card);
}
body.lm-redesign .poll-question {
  margin: 0 0 var(--s-4); font-size: 1.05rem; font-weight: 600;
  color: var(--c-text); line-height: 1.4;
}
body.lm-redesign .poll-options { display: flex; flex-direction: column; gap: 10px; }

body.lm-redesign .poll-option {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; text-align: left; padding: 12px var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--rad-btn);
  color: var(--c-text); font-weight: 500; font-size: 0.95rem;
  cursor: pointer;
  transition: transform .18s var(--ease), border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
body.lm-redesign .poll-option:hover {
  transform: translateY(-2px);
  border-color: var(--c-primary);
  box-shadow: var(--sh-sm);
  background: var(--c-hover);
}
body.lm-redesign .poll-option-text { flex: 1; }
body.lm-redesign .poll-option-arrow { width: 18px; height: 18px; opacity: .35; }

body.lm-redesign .poll-letter {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px;
  display: inline-grid; place-items: center;
  font-weight: 700; font-size: 0.8rem;
  background: var(--c-hover); color: var(--c-text-2);
  border: 1px solid var(--c-border);
}

/* Result rows with animated gradient fill */
body.lm-redesign .poll-result {
  position: relative; overflow: hidden;
  border: 1px solid var(--c-border); border-radius: var(--rad-btn);
  background: var(--c-surface);
}
body.lm-redesign .poll-result-fill {
  position: absolute; inset: 0 auto 0 0; width: var(--poll-pct, 0%);
  background: linear-gradient(90deg, rgba(79, 70, 229, 0.12), rgba(124, 58, 237, 0.08));
  animation: pollGrow 1s cubic-bezier(.19, 1, .22, 1);
}
@keyframes pollGrow { from { width: 0; } }
body.lm-redesign .poll-result.is-correct { border-color: var(--c-success); }
body.lm-redesign .poll-result.is-correct .poll-result-fill { background: linear-gradient(90deg, rgba(22, 163, 74, 0.20), rgba(22, 163, 74, 0.10)); }
body.lm-redesign .poll-result.is-correct .poll-letter { background: rgba(22, 163, 74, 0.14); color: var(--c-success); border-color: var(--c-success); }
body.lm-redesign .poll-result.is-wrong { border-color: var(--c-danger); }
body.lm-redesign .poll-result.is-wrong .poll-result-fill { background: linear-gradient(90deg, rgba(220, 38, 38, 0.18), rgba(220, 38, 38, 0.08)); }
body.lm-redesign .poll-result.is-wrong .poll-letter { background: rgba(220, 38, 38, 0.12); color: var(--c-danger); border-color: var(--c-danger); }
body.lm-redesign .poll-result-row {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: var(--s-3); padding: 12px var(--s-4);
}
body.lm-redesign .poll-result-text { flex: 1; font-weight: 600; color: var(--c-text); }
body.lm-redesign .poll-correct-tag {
  margin-left: var(--s-2); font-size: 0.68rem; font-weight: 700;
  color: var(--c-success); background: rgba(22, 163, 74, 0.12);
  padding: 2px 8px; border-radius: var(--rad-pill);
}
body.lm-redesign .poll-pct { font-weight: 700; color: var(--c-text); font-variant-numeric: tabular-nums; }
body.lm-redesign .poll-meta {
  display: inline-block; margin-top: var(--s-4);
  font-size: 0.78rem; font-weight: 500; color: var(--c-text-2);
  background: var(--c-hover); border: 1px solid var(--c-border);
  padding: 5px 12px; border-radius: var(--rad-pill);
}

/* ═══════════════════════ COMMUNITY ═════════════════════════════════ */
body.lm-redesign .tab-btn {
  border-radius: var(--rad-pill); font-weight: 500;
  transition: background .18s ease, color .18s ease;
}
body.lm-redesign .tab-btn.active {
  background: rgba(79, 70, 229, 0.08);
  color: var(--c-primary); font-weight: 600;
}
body.lm-redesign .connection-card { border-radius: var(--rad-btn); }
body.lm-redesign .connection-card.active {
  border-color: rgba(79, 70, 229, 0.4);
  background: rgba(79, 70, 229, 0.04);
}
body.lm-redesign .card-avatar,
body.lm-redesign .card-avatar-wrapper img { border-radius: 50%; object-fit: cover; }
body.lm-redesign .card-name { font-weight: 600; color: var(--c-text); }
body.lm-redesign .card-subtext, body.lm-redesign .card-time { color: var(--c-text-2); }
body.lm-redesign .community-action-input {
  border-radius: var(--rad-pill);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
}
body.lm-redesign .community-action-input:focus {
  outline: none; border-color: var(--c-primary); box-shadow: var(--ring);
}
body.lm-redesign .suggestions-list {
  border-radius: var(--rad-btn);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-md);
  background: var(--c-surface);
}

/* ═══════════════════════ RIGHT SIDEBAR WIDGETS ═════════════════════ */
body.lm-redesign .right-container > * {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--rad-widget);
  box-shadow: var(--sh);
}

/* ═══════════════════════ LEADERBOARD ═══════════════════════════════ */
body.lm-redesign .leaderboard-row,
body.lm-redesign .rank-row {
  border-radius: var(--rad-btn);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
body.lm-redesign .leaderboard-row:hover,
body.lm-redesign .rank-row:hover { transform: translateY(-1px); box-shadow: var(--sh); }

/* ═══════════════════════ MODALS ════════════════════════════════════ */
body.lm-redesign .modal-content {
  border-radius: var(--rad-card);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  box-shadow: var(--sh-lg);
}
body.lm-redesign .modal-title { font-weight: 700; letter-spacing: -0.02em; }
body.lm-redesign .close-modal {
  border-radius: 50%;
  transition: background .18s ease, transform .2s var(--ease);
}
body.lm-redesign .close-modal:hover { background: var(--c-hover); transform: rotate(90deg); }
body.lm-redesign .requests-list > *,
body.lm-redesign .list-row {
  border-radius: var(--rad-btn);
  transition: background .18s ease;
}
body.lm-redesign .requests-list > *:hover,
body.lm-redesign .list-row:hover { background: var(--c-hover); }

/* ═══════════════════════ CHIPS / BADGES / DIVIDERS ═════════════════ */
body.lm-redesign .chip, body.lm-redesign .tag, body.lm-redesign .pill {
  border-radius: var(--rad-pill); font-weight: 500; font-size: 0.75rem;
}
body.lm-redesign hr, body.lm-redesign .divider {
  border: none; border-top: 1px solid var(--c-border);
}
body.lm-redesign .no-requests, body.lm-redesign .empty-state {
  color: var(--c-text-2); text-align: center; padding: var(--s-6) var(--s-4);
}

/* ── Focus visibility (accessibility) ──────────────────────────────── */
body.lm-redesign a:focus-visible,
body.lm-redesign button:focus-visible,
body.lm-redesign .menu-item:focus-visible,
body.lm-redesign input:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* ═══════════════════════ DARK MODE ═════════════════════════════════ */
/* Only the palette + shadows are re-declared — the semantic remaps above
   reference the --c-* vars, so every surface follows automatically.
   Toggled via #themeToggle (initTheme in main.js sets body[data-theme]). */
body.lm-redesign[data-theme="dark"] {
  --c-bg:        #0B1120;
  --c-surface:   #131B2E;
  --c-primary:   #6366F1;
  --c-primary-h: #4F46E5;
  --c-accent:    #8B5CF6;
  --c-text:      #E5E9F2;
  --c-text-2:    #94A3B8;
  --c-border:    #24314A;
  --c-hover:     #1B2740;
  --c-grad:      linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  --ring:  0 0 0 3px rgba(99, 102, 241, 0.30);
  --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --sh-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --sh:    0 4px 20px rgba(0, 0, 0, 0.40);
  --sh-md: 0 10px 30px rgba(0, 0, 0, 0.50);
  --sh-lg: 0 20px 48px rgba(0, 0, 0, 0.60);
}
body.lm-redesign[data-theme="dark"] .main-header {
  background: rgba(11, 17, 32, 0.72) !important;
  border-bottom-color: rgba(36, 49, 74, 0.7) !important;
}
body.lm-redesign[data-theme="dark"] .mobile-bottom-nav {
  background: rgba(19, 27, 46, 0.85) !important;
}
body.lm-redesign[data-theme="dark"] .header-search-input::placeholder,
body.lm-redesign[data-theme="dark"] .elegant-input::placeholder { color: #64748B; }

/* ═══════════════════════ RESPONSIVE ════════════════════════════════ */
/* Tablet */
@media (max-width: 1024px) {
  body.lm-redesign .layout-container { gap: var(--s-4); }
  body.lm-redesign .menu-options { top: 76px; }
  body.lm-redesign .header-search { max-width: 320px; }
}
/* Mobile */
@media (max-width: 720px) {
  body.lm-redesign { font-size: 14.5px; }
  body.lm-redesign .post-card-modern { padding: var(--s-4); border-radius: 16px; }
  body.lm-redesign .card,
  body.lm-redesign .glass-card,
  body.lm-redesign .connection-card { border-radius: 16px; }
  body.lm-redesign .main-header .header-content { padding: 0 var(--s-4); }
  /* Reclaim header space: hide the search bar, collapse Create to an icon. */
  body.lm-redesign .header-search { display: none; }
  body.lm-redesign .header-create-btn { width: 40px; padding: 0; justify-content: center; }
  body.lm-redesign .header-create-btn .label { display: none; }
}

/* ── Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.lm-redesign *, body.lm-redesign *::before, body.lm-redesign *::after {
    transition-duration: .001s !important; animation-duration: .001s !important;
  }
}