/* app.css — Professional design layer on top of Tailwind CDN
   NOTE: @apply does NOT work in external CSS with the Tailwind Play CDN.
   All rules here use plain CSS properties. */

/* ── Light variables ────────────────────────────────────────────────────────── */
:root {
  --primary:       #2563eb;
  --primary-dark:  #1d4ed8;
  --primary-light: #eff6ff;
  --surface:       #ffffff;
  --bg:            #f1f5f9;
  --border:        #e2e8f0;
  --text:          #0f172a;
  --text-muted:    #64748b;
  --radius:        8px;
  --radius-sm:     6px;
  --shadow-sm:     0 1px 2px rgba(0,0,0,0.06);
  --shadow:        0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:     0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.04);
}

/* ── Base ───────────────────────────────────────────────────────────────────── */
body {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'kern' 1;
  letter-spacing: -0.01em;
}

h1, h2, h3, h4, .heading {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
}

/* Tabular numbers for all rating/score figures */
.font-mono, td .font-mono, [class*="tabular"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ── Navigation ─────────────────────────────────────────────────────────────── */
nav {
  background: white;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.nav-link {
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.25rem 0;
  letter-spacing: -0.01em;
  transition: color 0.15s;
}
.nav-link:hover  { color: var(--primary); }
.nav-link.active {
  color: var(--primary);
  font-weight: 600;
  border-bottom: 2px solid var(--primary);
  padding-bottom: 0.15rem;
}

/* ── Tab buttons ────────────────────────────────────────────────────────────── */
.tab {
  padding: 0.5rem 1.125rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.tab:hover     { color: #334155; background: #f8fafc; }
.tab-active    { color: var(--primary); border-bottom-color: var(--primary); background: white; font-weight: 600; }

/* ── Form labels ────────────────────────────────────────────────────────────── */
.label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #475569;
  margin-bottom: 0.3rem;
  letter-spacing: 0.01em;
}

/* ── Inputs & selects ───────────────────────────────────────────────────────── */
.input {
  display: block;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.65rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--text);
  background: white;
  line-height: 1.5;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  background: var(--primary);
  color: white;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.45rem 1rem;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: background 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 2px rgba(37,99,235,0.2);
}
.btn-primary:hover { background: var(--primary-dark); box-shadow: 0 2px 4px rgba(37,99,235,0.3); }
.btn-primary:disabled,
.btn-primary[disabled] { opacity: 0.6; cursor: not-allowed; box-shadow: none; }
.btn-primary:disabled:hover,
.btn-primary[disabled]:hover { background: var(--primary); box-shadow: none; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  background: white;
  color: #374151;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.45rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: background 0.15s, border-color 0.15s;
}
.btn-secondary:hover { background: #f8fafc; border-color: #cbd5e1; }

/* ── Suggest page button variants ─────────────────────────────────────────── */
.cat-btn, .court-btn {
  padding: 0.35rem 0;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: white;
  color: #6b7280;
  cursor: pointer;
  text-align: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.cat-btn:hover, .court-btn:hover { border-color: var(--primary); color: var(--primary); }
.cat-btn.active, .court-btn.active { background: var(--primary); border-color: var(--primary); color: white; }
.mode-btn {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: white;
  color: #374151;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.mode-btn:hover { border-color: var(--primary); }
.mode-btn.active { border-color: var(--primary); background: #eff6ff; }
.mode-btn.active span:first-child { color: var(--primary); }
html.dark .cat-btn, html.dark .court-btn, html.dark .mode-btn { background: #1f2937; border-color: #374151; color: #9ca3af; }
html.dark .cat-btn.active, html.dark .court-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
html.dark .mode-btn.active { background: #1e3a5f; border-color: var(--primary); }

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #dc2626;
  color: white;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.45rem 1rem;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.btn-danger:hover { background: #b91c1c; }

/* ── Cards ──────────────────────────────────────────────────────────────────── */
.card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s;
}

/* ── Badges ─────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  line-height: 1.4;
}
.badge-active      { background: #dcfce7; color: #15803d; }
.badge-recent      { background: #ccfbf1; color: #0f766e; }
.badge-quiet       { background: #fef9c3; color: #a16207; }
.badge-cold        { background: #ffedd5; color: #c2410c; }
.badge-full        { background: #dcfce7; color: #15803d; } /* legacy */
.badge-provisional { background: #fef9c3; color: #a16207; }
.badge-inactive    { background: #f1f5f9; color: #94a3b8; }
.badge-unrated     { background: #e0e7ff; color: #4338ca; }

/* Novelty badges — at most one per player, awarded across the whole roster. */
.novelty-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  border: 1px solid transparent;
}
.novelty-badge::before { font-size: 0.9rem; line-height: 1; }
.novelty-addict       { background: #fef3c7; color: #b45309; border-color: #fde68a; }
.novelty-addict::before       { content: '🔥'; }
.novelty-practitioner { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.novelty-practitioner::before { content: '🏋️'; }
.novelty-sleeper      { background: #ede9fe; color: #6d28d9; border-color: #ddd6fe; }
.novelty-sleeper::before      { content: '😴'; }

/* ── Tables ─────────────────────────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.data-table th {
  padding: 0.625rem 0.875rem;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table td {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid #f1f5f9;
  color: var(--text);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background 0.1s; }
.data-table tbody tr:hover { background: #f8fafc; }

/* ── Drag-and-drop zone ─────────────────────────────────────────────────────── */
.dropzone {
  border: 2px dashed #cbd5e1;
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  text-align: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.dropzone:hover  { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.dropzone.drag-over { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }

/* ── Rank row highlights ─────────────────────────────────────────────────────── */
.rank-gold   { background: #fefce8; }
.rank-silver { background: #f8fafc; }
.rank-bronze { background: #fff7ed; }

/* ── Provisional tilde ───────────────────────────────────────────────────────── */
.provisional-tilde { color: #d97706; }

/* ══════════════════════════════════════════════════════════════════════════════
   DARK MODE — html.dark class toggled via JS, persisted in localStorage
   Uses CSS overrides on Tailwind-generated classes + custom component resets.
   ══════════════════════════════════════════════════════════════════════════════ */

html.dark {
  --primary:       #60a5fa;
  --primary-dark:  #3b82f6;
  --primary-light: #1e3a5f;
  --surface:       #1e2433;
  --bg:            #111827;
  --border:        #374151;
  --text:          #f1f5f9;
  --text-muted:    #94a3b8;
}

html.dark body  { background: #111827; color: #f3f4f6; }

/* Nav */
html.dark nav                { background: #1f2937; border-color: #374151; }
html.dark .nav-link          { color: #9ca3af; }
html.dark .nav-link:hover    { color: #60a5fa; }
html.dark .nav-link.active   { color: #60a5fa; border-bottom-color: #60a5fa; }

/* Theme toggle button */
html.dark #theme-toggle      { color: #9ca3af; }
html.dark #theme-toggle:hover { background: #374151; }

/* Tabs */
html.dark .tab               { color: #9ca3af; }
html.dark .tab:hover         { color: #e5e7eb; background: #374151; }
html.dark .tab-active        { color: #60a5fa; border-bottom-color: #60a5fa; background: #1f2937; }

/* Backgrounds */
html.dark .bg-white          { background-color: #1f2937 !important; }
html.dark .bg-gray-50        { background-color: #111827 !important; }
html.dark .bg-gray-100       { background-color: #1f2937 !important; }
html.dark .bg-yellow-50      { background-color: #422006 !important; }
html.dark .bg-orange-50      { background-color: #431407 !important; }
html.dark .bg-blue-50        { background-color: #1e3a5f !important; }
html.dark .bg-amber-50       { background-color: #451a03 !important; }

/* Borders */
html.dark .border-gray-200   { border-color: #374151 !important; }
html.dark .border-gray-100   { border-color: #1f2937 !important; }
html.dark .border-gray-300   { border-color: #4b5563 !important; }
html.dark .border-blue-200   { border-color: #1e40af !important; }
html.dark .border-amber-200  { border-color: #92400e !important; }
html.dark .border-amber-300  { border-color: #92400e !important; }
html.dark .border-green-300  { border-color: #15803d !important; }
html.dark .border-t-0        { border-top-color: transparent !important; }

/* Text */
html.dark .text-gray-900     { color: #f9fafb !important; }
html.dark .text-gray-800     { color: #f3f4f6 !important; }
html.dark .text-gray-700     { color: #e5e7eb !important; }
html.dark .text-gray-600     { color: #d1d5db !important; }
html.dark .text-gray-500     { color: #9ca3af !important; }
html.dark .text-gray-400     { color: #6b7280 !important; }
html.dark .text-gray-300     { color: #4b5563 !important; }
html.dark .text-blue-700     { color: #93c5fd !important; }
html.dark .text-blue-600     { color: #60a5fa !important; }
html.dark .text-blue-800     { color: #bfdbfe !important; }
html.dark .text-amber-800    { color: #fde68a !important; }
html.dark .text-amber-900    { color: #fef3c7 !important; }
html.dark .text-amber-700    { color: #fcd34d !important; }
html.dark .text-amber-600    { color: #fbbf24 !important; }
html.dark .text-amber-500    { color: #f59e0b !important; }
html.dark .text-red-700      { color: #fca5a5 !important; }
html.dark .text-green-600    { color: #4ade80 !important; }
html.dark .text-red-500      { color: #f87171 !important; }

/* Shadows */
html.dark .shadow-sm         { box-shadow: 0 1px 2px rgba(0,0,0,0.4) !important; }
html.dark .shadow-xl         { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.6) !important; }
html.dark .shadow-lg         { box-shadow: 0 10px 15px rgba(0,0,0,0.5) !important; }

/* Forms */
html.dark input, html.dark select, html.dark .input {
  background: #374151 !important;
  color: #f3f4f6 !important;
  border-color: #4b5563 !important;
}
html.dark input:focus, html.dark select:focus, html.dark .input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.2) !important;
}
html.dark input::placeholder { color: #6b7280; }

/* Buttons */
html.dark .btn-secondary     { background: #374151; color: #e5e7eb; border-color: #4b5563; }
html.dark .btn-secondary:hover { background: #4b5563; border-color: #6b7280; }

/* Cards */
html.dark .card              { background: #1f2937; border-color: #374151; }

/* Tables */
html.dark .data-table th     { background: #1f2937; color: #9ca3af; border-color: #374151; }
html.dark .data-table td     { border-color: #374151; color: #e5e7eb; }
html.dark .data-table tbody tr:hover { background: #374151; }

/* Badges */
html.dark .badge-active      { background: #14532d; color: #86efac; }
html.dark .badge-recent      { background: #134e4a; color: #5eead4; }
html.dark .badge-quiet       { background: #78350f; color: #fde68a; }
html.dark .badge-cold        { background: #7c2d12; color: #fdba74; }
html.dark .badge-full        { background: #14532d; color: #86efac; }
html.dark .badge-provisional { background: #78350f; color: #fde68a; }
html.dark .badge-inactive    { background: #374151; color: #6b7280; }
html.dark .badge-unrated     { background: #312e81; color: #a5b4fc; }
html.dark .novelty-addict       { background: #78350f; color: #fde68a; border-color: #92400e; }
html.dark .novelty-practitioner { background: #1e3a8a; color: #bfdbfe; border-color: #1e40af; }
html.dark .novelty-sleeper      { background: #4c1d95; color: #ddd6fe; border-color: #5b21b6; }

/* Rank highlights */
html.dark .rank-gold         { background: #422006 !important; }
html.dark .rank-silver       { background: #1f2937 !important; }
html.dark .rank-bronze       { background: #431407 !important; }

/* Dropzone */
html.dark .dropzone          { border-color: #4b5563; color: #9ca3af; background: transparent; }
html.dark .dropzone:hover, html.dark .dropzone.drag-over { border-color: #3b82f6; background: #1e3a5f; color: #93c5fd; }

/* Hover rows */
html.dark .hover\:bg-blue-50:hover  { background-color: #1e3a5f !important; }
html.dark .hover\:bg-gray-50:hover  { background-color: #1f2937 !important; }
html.dark .hover\:bg-gray-100:hover { background-color: #374151 !important; }

/* Inline code */
html.dark code { background: #374151; color: #f3f4f6; border-radius: 3px; padding: 0 3px; }

/* Opacity adjustments */
html.dark .opacity-40        { opacity: 0.25; }
html.dark .opacity-50        { opacity: 0.3; }

/* File-mode row tint */
html.dark .bg-blue-50\/30    { background-color: rgba(30,58,95,0.25) !important; }

/* Most-improved cards */
html.dark .bg-yellow-50      { background-color: #422006 !important; }
html.dark .bg-slate-50       { background-color: #1e293b !important; }
html.dark .bg-orange-50      { background-color: #431407 !important; }
html.dark .text-green-600    { color: #4ade80 !important; }

/* Space Grotesk headings in dark */
html.dark h1, html.dark h2, html.dark h3 { color: #f1f5f9; }

/* Footer */
html.dark footer { border-color: #374151; }
html.dark footer a:hover { color: #60a5fa !important; }

/* Mobile nav menu */
html.dark #nav-mobile { border-color: #374151; }

/* ── Mobile ─────────────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
  .btn-primary, .btn-secondary, .btn-danger {
    min-height: 44px;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }
  .input {
    min-height: 44px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  #nav-mobile .nav-link {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ── Player quote bubble ─────────────────────────────────────────────────── */
@keyframes wiggle {
  0%          { transform: rotate(0deg) scale(1); }
  15%         { transform: rotate(-4deg) scale(1.03); }
  30%         { transform: rotate(4deg) scale(1.03); }
  45%         { transform: rotate(-3deg) scale(1.01); }
  60%         { transform: rotate(3deg) scale(1.01); }
  75%         { transform: rotate(-1deg); }
  100%        { transform: rotate(0deg) scale(1); }
}
.quote-wiggle {
  animation: wiggle 0.55s ease-in-out;
  transform-origin: left center;
}
.player-quote {
  position: relative;
  display: inline-block;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 1rem;
  padding: 0.4rem 0.875rem;
  font-size: 0.875rem;
  color: #374151;
  max-width: 480px;
  font-style: italic;
}
.player-quote::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-right-color: #bfdbfe;
}
.player-quote::after {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-right-color: #eff6ff;
}
html.dark .player-quote {
  background: #1e3a5f;
  border-color: #3b82f6;
  color: #d1d5db;
}
html.dark .player-quote::before { border-right-color: #3b82f6; }
html.dark .player-quote::after  { border-right-color: #1e3a5f; }

/* ── Team Fight animations ─────────────────────────────────────────────── */
@keyframes tf-slide-up {
  from { opacity: 0; transform: translateY(56px) scale(0.88); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
@keyframes tf-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.38); }
  100% { transform: scale(1); }
}
@keyframes tf-winner {
  0%   { opacity: 0; transform: scale(0.4) rotate(-8deg); }
  62%  { transform: scale(1.13) rotate(2deg); }
  82%  { transform: scale(0.96) rotate(-1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes tf-category-in {
  0%   { opacity: 0; transform: translateX(-80px) scale(0.85); }
  65%  { transform: translateX(6px) scale(1.02); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes tf-flash {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}
.tf-slide-up    { animation: tf-slide-up    0.45s cubic-bezier(0.34,1.56,0.64,1) both; }
.tf-pop         { animation: tf-pop         0.35s ease-out; }
.tf-winner      { animation: tf-winner      0.7s  cubic-bezier(0.34,1.56,0.64,1) both; }
.tf-category-in { animation: tf-category-in 0.5s  cubic-bezier(0.34,1.56,0.64,1) both; }
.tf-flash       { animation: tf-flash       0.55s ease-in-out 3; }

/* ── "Tap to expand" hint for the Enter-Result chevron ─────────────────────
   Brief horizontal jiggle + scale pulse every few seconds. Wrapped in a
   parent span so it doesn't fight with the SVG's own rotate transform. */
@keyframes chev-attract {
  0%, 65%, 100% { transform: translateX(0)    scale(1); }
  72%           { transform: translateX(-3px) scale(1.15); }
  79%           { transform: translateX( 3px) scale(1.15); }
  86%           { transform: translateX(-2px) scale(1.10); }
  93%           { transform: translateX( 2px) scale(1.05); }
}
.chev-attract {
  animation: chev-attract 3s ease-in-out infinite;
  transform-origin: center;
}
.chev-attract svg { color: #2563eb; }
@media (prefers-reduced-motion: reduce) {
  .chev-attract { animation: none; }
  .chev-attract svg { color: inherit; }
}

/* ── #match-login-prompt: shimmer text + border running-light ────────────── */
@property --border-light-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes shimmer-text {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes border-light-rotate {
  to { --border-light-angle: 360deg; }
}

.shimmer-text {
  background: linear-gradient(
    90deg,
    #94a3b8 25%,
    #e2e8f0 45%,
    #f8fafc 50%,
    #e2e8f0 55%,
    #94a3b8 75%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer-text 5s linear infinite;
}

html.dark .shimmer-text {
  background: linear-gradient(
    90deg,
    #4b5563 25%,
    #9ca3af 45%,
    #d1d5db 50%,
    #9ca3af 55%,
    #4b5563 75%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.login-border-light {
  position: relative;
}

.login-border-light::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--border-light-angle),
    #e2e8f0 0deg,
    #e2e8f0 150deg,
    #93c5fd 175deg,
    #2563eb 190deg,
    #93c5fd 205deg,
    #e2e8f0 230deg,
    #e2e8f0 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;
  animation: border-light-rotate 3s linear infinite;
  pointer-events: none;
}

html.dark .login-border-light::before {
  background: conic-gradient(
    from var(--border-light-angle),
    #374151 0deg,
    #374151 150deg,
    #3b82f6 175deg,
    #60a5fa 190deg,
    #3b82f6 205deg,
    #374151 230deg,
    #374151 360deg
  );
}

@media (prefers-reduced-motion: reduce) {
  .shimmer-text {
    background: none;
    -webkit-text-fill-color: unset;
    animation: none;
    color: #6b7280;
  }
  html.dark .shimmer-text {
    background: none;
    -webkit-text-fill-color: unset;
    color: #9ca3af;
  }
  .login-border-light {
    border: 1px solid #e2e8f0;
  }
  html.dark .login-border-light {
    border-color: #374151;
  }
  .login-border-light::before {
    display: none;
  }
}

/* ── Dashboard card running-light border ──────────────────────────────────────
   Reuses @property --border-light-angle and @keyframes border-light-rotate
   defined above in the #match-login-prompt section — no re-declaration. */

.card-border-light {
  position: relative;
}

.card-border-light::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--border-light-angle),
    #e2e8f0 0deg,
    #e2e8f0 150deg,
    #93c5fd 175deg,
    #2563eb 190deg,
    #93c5fd 205deg,
    #e2e8f0 230deg,
    #e2e8f0 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;
  animation: border-light-rotate 3s linear infinite;
  pointer-events: none;
}

html.dark .card-border-light::before {
  background: conic-gradient(
    from var(--border-light-angle),
    #374151 0deg,
    #374151 150deg,
    #3b82f6 175deg,
    #60a5fa 190deg,
    #3b82f6 205deg,
    #374151 230deg,
    #374151 360deg
  );
}

@media (prefers-reduced-motion: reduce) {
  .card-border-light::before {
    display: none;
  }
}