/* ============================================================
   KEY v62 — fix icon/label font split + stronger edge glow
   Loads AFTER v61 so it overrides safely.
   ============================================================ */

/* ---------- 1. ICON spans: have display:block, not text-align ---------- */
[data-v61] .category-btn > span[style*="display:block"]:not([style*="text-align"]):not(.v61-tint) {
  font-size: 20px !important;
  line-height: 1 !important;
  margin-bottom: 10px !important;
  display: block !important;
  font-weight: 400 !important;
}

/* ---------- 2. LABEL spans: have text-align (usually center) ---------- */
[data-v61] .category-btn > span[style*="text-align"]:not(.v61-tint) {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  color: #0f172a !important;
  letter-spacing: .005em !important;
}

/* ---------- 3. Plain text in buttons (academic main page — no span) ---------- */
[data-v61] .category-btn {
  font-size: 12.5px !important;
}

/* ---------- 4. Group headers (daily) — same size as academic H3 ---------- */
[data-v61] .mag-section-title span {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
}
[data-v61] .mag-section-title span > span {
  font-size: 12px !important;
}

/* ============================================================
   5. STRONGER EDGE GLOW — increased opacity + wider beam + outer halo
   ============================================================ */

/* default (graphite) */
[data-v61] .category-btn {
  --accent-soft: rgba(71,85,105,.60);
  --accent-halo: rgba(71,85,105,.22);
}

[data-v61] .category-btn.v61-c0 { --accent-soft: rgba(30,64,175,.60);  --accent-halo: rgba(30,64,175,.22); }
[data-v61] .category-btn.v61-c1 { --accent-soft: rgba(51,65,85,.60);   --accent-halo: rgba(51,65,85,.22); }
[data-v61] .category-btn.v61-c2 { --accent-soft: rgba(15,118,110,.60); --accent-halo: rgba(15,118,110,.22); }
[data-v61] .category-btn.v61-c3 { --accent-soft: rgba(127,29,29,.60);  --accent-halo: rgba(127,29,29,.22); }
[data-v61] .category-btn.v61-c4 { --accent-soft: rgba(55,48,163,.60);  --accent-halo: rgba(55,48,163,.22); }
[data-v61] .category-btn.v61-c5 { --accent-soft: rgba(146,64,14,.60);  --accent-halo: rgba(146,64,14,.22); }
[data-v61] .category-btn.v61-c6 { --accent-soft: rgba(14,116,144,.60); --accent-halo: rgba(14,116,144,.22); }
[data-v61] .category-btn.v61-c7 { --accent-soft: rgba(71,85,105,.60);  --accent-halo: rgba(71,85,105,.22); }

/* Rebuild the rotating conic gradient — wider beam, faster, brighter */
[data-v61] .category-btn::before {
  inset: -120% !important;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 8deg,
    var(--accent-soft) 40deg,
    var(--accent) 90deg,
    var(--accent-soft) 140deg,
    transparent 172deg,
    transparent 360deg
  ) !important;
  animation: v62spin 7.5s linear infinite !important;
  opacity: 1 !important;
}

@keyframes v62spin {
  to { transform: rotate(360deg); }
}

/* Add a soft outer halo that matches the accent color */
[data-v61] .category-btn {
  box-shadow:
    0 1px 2px rgba(15,23,42,.04),
    0 0 12px var(--accent-halo),
    0 0 0 1px var(--accent-halo) !important;
}
[data-v61] .category-btn:hover {
  box-shadow:
    0 10px 24px rgba(15,23,42,.10),
    0 0 18px var(--accent-halo),
    0 0 0 1px var(--accent-halo) !important;
}

/* Same treatment for daily-category 3 action buttons */
[data-v61="daily-category"] .primary-btn,
[data-v61="daily-category"] .secondary-btn {
  --accent-soft: rgba(71,85,105,.60);
  --accent-halo: rgba(71,85,105,.22);
  box-shadow:
    0 1px 2px rgba(15,23,42,.04),
    0 0 12px var(--accent-halo),
    0 0 0 1px var(--accent-halo) !important;
}
[data-v61="daily-category"] button[onclick*="showProblemForm"] {
  --accent: #7f1d1d;
  --accent-soft: rgba(127,29,29,.60);
  --accent-halo: rgba(127,29,29,.22);
}
[data-v61="daily-category"] button[onclick*="showExpertsByType"] {
  --accent: #1e40af;
  --accent-soft: rgba(30,64,175,.60);
  --accent-halo: rgba(30,64,175,.22);
}
[data-v61="daily-category"] button[onclick*="openDailyCategoryHub"] {
  --accent: #0f766e;
  --accent-soft: rgba(15,118,110,.60);
  --accent-halo: rgba(15,118,110,.22);
}
[data-v61="daily-category"] .primary-btn::before,
[data-v61="daily-category"] .secondary-btn::before {
  inset: -120% !important;
  animation: v62spin 7.5s linear infinite !important;
}
[data-v61="daily-category"] .primary-btn:hover,
[data-v61="daily-category"] .secondary-btn:hover {
  box-shadow:
    0 10px 24px rgba(15,23,42,.10),
    0 0 18px var(--accent-halo),
    0 0 0 1px var(--accent-halo) !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-v61] .category-btn::before,
  [data-v61="daily-category"] .primary-btn::before,
  [data-v61="daily-category"] .secondary-btn::before {
    animation: none !important;
  }
}

/* ---------- 6. Dark theme — slightly brighter halo ---------- */
[data-theme="dark"] [data-v61] .category-btn {
  box-shadow:
    0 1px 2px rgba(0,0,0,.3),
    0 0 14px var(--accent-halo),
    0 0 0 1px var(--accent-halo) !important;
}
[data-theme="dark"] [data-v61="daily-category"] .primary-btn,
[data-theme="dark"] [data-v61="daily-category"] .secondary-btn {
  box-shadow:
    0 1px 2px rgba(0,0,0,.3),
    0 0 14px var(--accent-halo),
    0 0 0 1px var(--accent-halo) !important;
}

/* ---------- 7. Mobile — keep consistent ---------- */
@media (max-width: 560px) {
  [data-v61] .category-btn > span[style*="display:block"]:not([style*="text-align"]):not(.v61-tint) {
    font-size: 18px !important;
    margin-bottom: 8px !important;
  }
  [data-v61] .category-btn > span[style*="text-align"]:not(.v61-tint) {
    font-size: 12px !important;
  }
}