/* ═══════════════════════════════════════════════════════════════════════════
   ELITE+ HOME PAGE — ULTIMATE VISUAL REVAMP v3.0
   Premium · Cinematic · GSAP-Powered Dark Dashboard
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   § 1  DESIGN TOKENS & EXTENDED PALETTE
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Core Palette ─────────────────────────────────────── */
  --hp-purple:      139, 92, 246;
  --hp-gold:        245, 158, 11;
  --hp-indigo:      99, 102, 241;
  --hp-rose:        244, 63, 94;
  --hp-emerald:     16, 185, 129;
  --hp-cyan:        6, 182, 212;

  /* ── Depth layers ─────────────────────────────────────── */
  --hp-layer-0:     #050507;
  --hp-layer-1:     #09090b;
  --hp-layer-2:     #111114;
  --hp-layer-3:     #18181d;
  --hp-layer-4:     #1f1f26;

  /* ── Glass surfaces ───────────────────────────────────── */
  --hp-glass:       rgba(255, 255, 255, 0.03);
  --hp-glass-hover: rgba(255, 255, 255, 0.06);
  --hp-glass-border:rgba(255, 255, 255, 0.06);
  --hp-glass-shine: rgba(255, 255, 255, 0.10);

  /* ── Gradients ────────────────────────────────────────── */
  --hp-grad-hero:   linear-gradient(160deg, rgba(var(--hp-purple), .10) 0%, rgba(var(--hp-indigo), .06) 30%, rgba(var(--hp-gold), .04) 70%, transparent 100%);
  --hp-grad-card:   linear-gradient(160deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.008) 100%);
  --hp-grad-glow:   radial-gradient(ellipse 600px 300px at 25% 0%, rgba(var(--hp-purple), .10), transparent 70%);
  --hp-grad-warm:   radial-gradient(ellipse 500px 250px at 75% 100%, rgba(var(--hp-gold), .06), transparent 70%);

  /* ── Shadows ──────────────────────────────────────────── */
  --hp-sh-xs:       0 1px 2px rgba(0,0,0,.35);
  --hp-sh-sm:       0 2px 8px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.25);
  --hp-sh-md:       0 4px 24px rgba(0,0,0,.28), 0 1px 4px rgba(0,0,0,.22);
  --hp-sh-lg:       0 12px 48px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.20);
  --hp-sh-xl:       0 24px 80px rgba(0,0,0,.40), 0 8px 24px rgba(0,0,0,.25);
  --hp-sh-glow-p:   0 0 40px rgba(var(--hp-purple), .12);
  --hp-sh-glow-g:   0 0 40px rgba(var(--hp-gold), .10);
  --hp-sh-inner:    inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.25);

  /* ── Motion ───────────────────────────────────────────── */
  --hp-ease:        cubic-bezier(.4, 0, .2, 1);
  --hp-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --hp-ease-out:    cubic-bezier(.16, 1, .3, 1);
  --hp-dur-fast:    180ms;
  --hp-dur-base:    280ms;
  --hp-dur-slow:    420ms;
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 2  KEYFRAMES
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes hp-aurora {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes hp-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes hp-breathe {
  0%, 100% { opacity: .5; transform: scale(1); }
  50%      { opacity: .85; transform: scale(1.05); }
}

@keyframes hp-shine {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes hp-orb-drift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(50px, -60px) scale(1.1); }
  66%  { transform: translate(-30px, 40px) scale(.95); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes hp-ring-spin {
  from { transform: rotate(-90deg); }
  to   { transform: rotate(270deg); }
}

@keyframes hp-pulse-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--hp-purple), .25); }
  50%      { box-shadow: 0 0 0 6px rgba(var(--hp-purple), 0); }
}

@keyframes hp-today-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(var(--hp-gold), .15), 0 0 0 0 rgba(var(--hp-gold), .20); }
  50%      { box-shadow: 0 0 18px rgba(var(--hp-gold), .25), 0 0 0 4px rgba(var(--hp-gold), 0); }
}

@keyframes hp-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@keyframes hp-noise-drift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-10%, -10%); }
}

@keyframes hp-urgency-throb {
  0%, 100% { opacity: 1; border-color: rgba(var(--hp-gold), .20); }
  50%      { opacity: .82; border-color: rgba(var(--hp-gold), .45); }
}

@keyframes hp-confetti {
  0%   { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(140px) rotate(720deg); opacity: 0; }
}

@keyframes hp-count-flash {
  0%, 100% { color: inherit; }
  50%      { color: #fbbf24; }
}

@keyframes hp-shimmer-bar {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 3  PAGE SHELL & ATMOSPHERIC BACKGROUND
   ═══════════════════════════════════════════════════════════════════════════ */

.hp7 {
  position: relative;
  padding: 0 0 80px;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    var(--hp-grad-glow),
    var(--hp-grad-warm),
    linear-gradient(180deg, var(--hp-layer-0) 0%, var(--hp-layer-1) 15%, var(--hp-layer-2) 40%, var(--hp-layer-1) 75%, var(--hp-layer-0) 100%);
  background-attachment: fixed;
}

/* Noise texture overlay for depth */
.hp7::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
  animation: hp-noise-drift 8s linear infinite;
  mix-blend-mode: overlay;
}

/* Animated aurora orbs */
.hp7-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hp7-bg::before {
  content: '';
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--hp-purple), .12) 0%, transparent 70%);
  top: -300px;
  right: -200px;
  animation: hp-orb-drift 25s ease-in-out infinite;
  filter: blur(60px);
}

.hp7-bg::after {
  content: '';
  position: absolute;
  width: 550px;
  height: 550px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--hp-gold), .08) 0%, transparent 70%);
  bottom: -150px;
  left: -150px;
  animation: hp-orb-drift 30s ease-in-out infinite reverse;
  filter: blur(50px);
}

/* Dot grid mesh */
.hp7-bg-mesh {
  position: absolute;
  inset: 0;
  opacity: .025;
  background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 4  HERO SECTION — CINEMATIC
   ═══════════════════════════════════════════════════════════════════════════ */

.hp7-hero {
  position: relative;
  z-index: 1;
  padding: 52px 36px 44px !important;
  margin-bottom: 2rem;
  border-radius: 28px;
  background:
    linear-gradient(160deg, rgba(var(--hp-purple), .08) 0%, rgba(var(--hp-indigo), .05) 40%, rgba(var(--hp-gold), .04) 80%, transparent 100%),
    rgba(14, 14, 18, .6);
  border: 1px solid rgba(var(--hp-purple), .12);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  box-shadow: var(--hp-sh-lg), var(--hp-sh-inner);
  overflow: hidden;
}

/* Top edge highlight */
.hp7-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--hp-purple), .35), rgba(var(--hp-gold), .20), transparent);
}

/* Ambient warm glow */
.hp7-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 300px 200px at 90% 20%, rgba(var(--hp-gold), .05), transparent 70%);
  pointer-events: none;
}

/* Title — animated gradient shimmer */
.hp7-title {
  font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
  font-weight: 900 !important;
  letter-spacing: -0.03em;
  line-height: 1.05;
  background:
    linear-gradient(
      120deg,
      #ffffff 0%, #e4e4e7 20%, #fcd34d 45%, #f59e0b 55%, #e4e4e7 80%, #ffffff 100%
    );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: hp-aurora 8s ease-in-out infinite;
  filter: drop-shadow(0 2px 12px rgba(var(--hp-purple), .12));
}

.hp7-eyebrow {
  font-weight: 700 !important;
  letter-spacing: .18em;
  color: #71717a;
}

.hp7-eyebrow .hp7-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa, #c084fc);
  box-shadow: 0 0 8px rgba(var(--hp-purple), .4);
}

.hp7-subtitle {
  color: rgba(255, 255, 255, .55) !important;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.6;
}

/* ── Hero Rating Badge ──────────────────────────────────── */
.hp7-hero-badge {
  background: rgba(12, 12, 16, .6);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(var(--hp-purple), .22) !important;
  box-shadow: var(--hp-sh-md), var(--hp-sh-glow-p), var(--hp-sh-inner);
  border-radius: 26px;
  padding: 24px !important;
  transition: all var(--hp-dur-slow) var(--hp-ease);
  position: relative;
  overflow: hidden;
}

.hp7-hero-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,.04), transparent 50%);
  pointer-events: none;
}

.hp7-hero-badge:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(var(--hp-purple), .4) !important;
  box-shadow: var(--hp-sh-xl), 0 0 60px rgba(var(--hp-purple), .18), var(--hp-sh-inner);
}

.hp7-hero-rating {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 2.8rem !important;
  letter-spacing: -0.03em;
  background: linear-gradient(160deg, #c4b5fd 0%, #a78bfa 40%, #d8b4fe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 4px 16px rgba(var(--hp-purple), .25));
}

.hp7-hero-rating-lbl {
  color: #52525b;
  letter-spacing: .14em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 5  ACTION BUTTONS — PREMIUM
   ═══════════════════════════════════════════════════════════════════════════ */

.hp7-actions {
  gap: 12px;
  margin-top: 28px;
}

.hp7-act {
  border-radius: 16px !important;
  font-weight: 700;
  letter-spacing: .015em;
  position: relative;
  overflow: hidden;
  transition: all var(--hp-dur-base) var(--hp-ease);
  backdrop-filter: blur(12px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  font-size: .84rem;
}

/* Radial hover glow */
.hp7-act::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--hp-dur-base);
  background: radial-gradient(circle at center, rgba(255,255,255,.12) 0%, transparent 70%);
  pointer-events: none;
}
.hp7-act:hover::before { opacity: 1; }

/* Shine strip */
.hp7-act::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transition: left .6s var(--hp-ease);
  pointer-events: none;
}
.hp7-act:hover::after { left: 120%; }

.hp7-act--gold {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #fcd34d 100%) !important;
  color: #0f0a00 !important;
  box-shadow: 0 6px 24px rgba(var(--hp-gold), .30), 0 0 0 1px rgba(var(--hp-gold), .35),
              inset 0 1px 0 rgba(255,255,255,.35),
              inset 0 -1px 0 rgba(0,0,0,.15);
  text-shadow: 0 1px 0 rgba(255,255,255,.15);
}

.hp7-act--gold:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 40px rgba(var(--hp-gold), .40), 0 0 0 1px rgba(var(--hp-gold), .50),
              0 0 30px rgba(var(--hp-gold), .18),
              inset 0 1px 0 rgba(255,255,255,.45);
}

.hp7-act--gold:active {
  transform: translateY(-2px) scale(.98) !important;
}

.hp7-act--glass {
  background: rgba(20, 20, 24, .55) !important;
  color: #b4b4bb !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(var(--hp-purple), .15) !important;
  box-shadow: var(--hp-sh-sm), var(--hp-sh-inner);
}

.hp7-act--glass:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--hp-purple), .35) !important;
  color: #e4e4e7 !important;
  background: rgba(24, 24, 30, .7) !important;
  box-shadow: var(--hp-sh-md), 0 0 24px rgba(var(--hp-purple), .10), var(--hp-sh-inner);
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 6  BENTO GRID & CARD SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

.hp7-bento {
  gap: 18px;
}

.hp7-card {
  border-radius: 24px !important;
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  background:
    var(--hp-grad-card),
    rgba(14, 14, 18, .72) !important;
  border: 1px solid rgba(255, 255, 255, .055) !important;
  padding: 28px !important;
  box-shadow: var(--hp-sh-md), var(--hp-sh-inner);
  position: relative;
  overflow: hidden;
  transition: all var(--hp-dur-slow) var(--hp-ease);

    /* Visibility-first baseline: content must render even if GSAP is late/disabled. */
    opacity: 1;
    transform: none;
}

/* Safety net: if GSAP hasn't revealed cards within 2s, force-show them.
   The .hp7-gsap-ready class is added by GSAP when it starts animating. */
.hp7-card:not(.hp7-gsap-active) {
  animation: hp7-fallback-reveal 0.5s ease-out 2s both;
}
.hp7-card.hp7-gsap-active {
  animation: none !important;
}
@keyframes hp7-fallback-reveal {
  to { opacity: 1; transform: translateY(0); }
}

/* Ghost highlight on hover */
.hp7-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--hp-dur-slow);
  background: linear-gradient(160deg, rgba(var(--hp-purple), .05), rgba(var(--hp-gold), .025), transparent 60%);
  pointer-events: none;
  border-radius: 24px;
}

.hp7-card:hover {
  border-color: rgba(var(--hp-purple), .20) !important;
  transform: translateY(-5px);
  box-shadow: var(--hp-sh-lg), var(--hp-sh-glow-p), var(--hp-sh-inner);
}

.hp7-card:hover::before {
  opacity: 1;
}

/* Card header */
.hp7-card-label h3 {
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-weight: 750;
  letter-spacing: .01em;
  color: #e4e4e7;
  font-size: .96rem;
}

.hp7-card-label .hp7-ic {
  width: 30px; height: 30px;
  border-radius: 11px;
  color: #c4b5fd;
  background: linear-gradient(160deg, rgba(var(--hp-purple), .12), rgba(var(--hp-indigo), .08));
  border: 1px solid rgba(var(--hp-purple), .18);
  box-shadow: var(--hp-sh-inner);
  transition: all var(--hp-dur-base) var(--hp-ease);
}

.hp7-card:hover .hp7-card-label .hp7-ic {
  background: linear-gradient(160deg, rgba(var(--hp-purple), .22), rgba(var(--hp-indigo), .14));
  border-color: rgba(var(--hp-purple), .35);
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--hp-sh-sm), 0 0 12px rgba(var(--hp-purple), .15);
}

/* Tags */
.hp7-tag {
  font-size: .58rem;
  padding: 5px 13px;
  border-radius: 99px;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
  background: rgba(var(--hp-purple), .08);
  color: #b4a0f0;
  border: 1px solid rgba(var(--hp-purple), .14);
  transition: all var(--hp-dur-fast) var(--hp-ease);
  white-space: nowrap;
}

.hp7-card:hover .hp7-tag {
  background: rgba(var(--hp-purple), .15);
  border-color: rgba(var(--hp-purple), .30);
  white-space: nowrap;
}

.hp7-tag--gold {
  background: linear-gradient(135deg, rgba(var(--hp-gold), .12), rgba(var(--hp-gold), .06)) !important;
  color: #fbbf24 !important;
  border-color: rgba(var(--hp-gold), .22) !important;
}

.hp7-tag--green {
  background: rgba(var(--hp-emerald), .08) !important;
  color: #34d399 !important;
  border-color: rgba(var(--hp-emerald), .15) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 7  STAT MEGA CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

.hp7-stat {
  padding: 34px 20px !important;
  min-height: 145px;
  border-radius: 22px !important;
  position: relative;
  overflow: hidden;
  transition: all var(--hp-dur-base) var(--hp-ease);
}

/* Ambient colored glow per stat */
.hp7-stat::before {
  content: '';
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--hp-dur-slow);
  pointer-events: none;
  filter: blur(40px);
}

.hp7-card:has(.hp7-stat):hover .hp7-stat::before {
  opacity: .6;
}

/* Purple stat glow */
.hp7-card:has(.hp7-stat-val--purple) .hp7-stat::before {
  background: radial-gradient(circle, rgba(var(--hp-purple), .12), transparent 60%);
}
.hp7-card:has(.hp7-stat-val--gold) .hp7-stat::before {
  background: radial-gradient(circle, rgba(var(--hp-gold), .10), transparent 60%);
}
.hp7-card:has(.hp7-stat-val--indigo) .hp7-stat::before {
  background: radial-gradient(circle, rgba(var(--hp-indigo), .12), transparent 60%);
}

.hp7-stat-val {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  letter-spacing: -0.03em;
  font-size: 2.6rem !important;
}

.hp7-stat-val--purple {
  background: linear-gradient(150deg, #a78bfa 0%, #c084fc 60%, #e9d5ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 12px rgba(var(--hp-purple), .20));
}

.hp7-stat-val--gold {
  background: linear-gradient(150deg, #f59e0b 0%, #fbbf24 60%, #fef3c7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 12px rgba(var(--hp-gold), .20));
}

.hp7-stat-val--indigo {
  background: linear-gradient(150deg, #818cf8 0%, #a5b4fc 60%, #e0e7ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 12px rgba(var(--hp-indigo), .20));
}

.hp7-stat-lbl {
  color: #71717a;
  letter-spacing: .10em;
  font-weight: 750;
  text-transform: uppercase;
  font-size: .62rem;
}

/* Sparklines */
.hp7-stat-spark {
  gap: 3px;
  margin-top: 10px;
}

.hp7-stat-spark-bar {
  min-height: 3px;
  border-radius: 3px;
  background: rgba(var(--hp-purple), .20);
  transition: all var(--hp-dur-slow) var(--hp-ease);
  box-shadow: 0 0 6px rgba(var(--hp-purple), .10);
}

.hp7-card:hover .hp7-stat-spark-bar {
  background: rgba(var(--hp-purple), .45);
  box-shadow: 0 0 14px rgba(var(--hp-purple), .25);
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 8  FORM RING — FLOATING PERFORMANCE GAUGE
   ═══════════════════════════════════════════════════════════════════════════ */

.hp7-form {
  align-items: center;
  gap: 28px;
}

.hp7-ring {
  flex-shrink: 0;
  position: relative;
  animation: hp-float 4s ease-in-out infinite;
}

/* Circular glow behind the ring */
.hp7-ring::after {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--hp-purple), .18) 0%, rgba(var(--hp-purple), .06) 50%, transparent 72%);
  z-index: -1;
  pointer-events: none;
  animation: hp-breathe 4s ease-in-out infinite;
}

.hp7-ring svg {
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.25));
}

.hp7-ring-fill {
  filter: drop-shadow(0 0 6px rgba(var(--hp-purple), .40));
}

.hp7-ring-center {
  background: radial-gradient(circle at 35% 35%, rgba(var(--hp-purple), .08), rgba(var(--hp-indigo), .04));
  backdrop-filter: blur(10px);
  border-radius: 50%;
}

.hp7-ring-num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #f4f4f5;
  font-size: 1.9rem !important;
}

.hp7-ring-sub {
  color: #52525b;
  letter-spacing: .12em;
}

/* Form badges */
.hp7-form-badge {
  font-weight: 750;
  letter-spacing: .06em;
  border-radius: 14px;
  transition: all var(--hp-dur-fast);
}

.hp7-form-badge.excellent {
  background: linear-gradient(135deg, rgba(var(--hp-purple), .14), rgba(192,132,252,.06));
  border: 1px solid rgba(var(--hp-purple), .22);
  color: #d8b4fe;
  box-shadow: 0 0 12px rgba(var(--hp-purple), .08);
}

.hp7-form-badge.good {
  background: linear-gradient(135deg, rgba(var(--hp-gold), .12), rgba(251,191,36,.06));
  border: 1px solid rgba(var(--hp-gold), .20);
  color: #fcd34d;
}

.hp7-form-badge.average {
  background: rgba(63,63,70,.15);
  border: 1px solid rgba(63,63,70,.25);
  color: #a1a1aa;
}

.hp7-form-badge.poor {
  background: rgba(239,68,68,.07);
  border: 1px solid rgba(239,68,68,.14);
  color: #fca5a5;
}

.hp7-form-stat strong { color: #d4d4d8; }

/* W/D/L badges */
.hp7-wld { gap: 8px; }

.hp7-wld span {
  border-radius: 12px;
  font-weight: 750;
  letter-spacing: .06em;
  transition: all var(--hp-dur-base) var(--hp-ease);
  padding: 5px 13px;
}

.hp7-wld .w {
  background: linear-gradient(135deg, rgba(var(--hp-purple), .14), rgba(var(--hp-purple), .06));
  color: #c4b5fd;
  border: 1px solid rgba(var(--hp-purple), .18);
}

.hp7-wld .d {
  background: linear-gradient(135deg, rgba(var(--hp-gold), .10), rgba(var(--hp-gold), .04));
  color: #fcd34d;
  border: 1px solid rgba(var(--hp-gold), .15);
}

.hp7-wld .l {
  background: rgba(239,68,68,.06);
  color: #fca5a5;
  border: 1px solid rgba(239,68,68, .10);
}

.hp7-form:hover .hp7-wld span {
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 9  WEEKLY HEATMAP
   ═══════════════════════════════════════════════════════════════════════════ */

.hp7-heatmap { gap: 10px; }

.hp7-heatmap-cell {
  border-radius: 14px;
  border: 1px solid transparent;
  font-weight: 750;
  transition: all var(--hp-dur-base) var(--hp-ease);
  cursor: default;
  letter-spacing: .02em;
}

.hp7-heatmap-cell.lvl-0 {
  background: rgba(63,63,70,.16);
  color: #3f3f46;
}

.hp7-heatmap-cell.lvl-1 {
  background: rgba(var(--hp-purple), .14);
  color: #a78bfa;
  border-color: rgba(var(--hp-purple), .16);
  box-shadow: 0 2px 10px rgba(var(--hp-purple), .08);
}

.hp7-heatmap-cell.lvl-2 {
  background: rgba(var(--hp-purple), .24);
  color: #c4b5fd;
  border-color: rgba(var(--hp-purple), .26);
  box-shadow: 0 4px 16px rgba(var(--hp-purple), .14);
}

.hp7-heatmap-cell.lvl-3 {
  background: rgba(var(--hp-purple), .36);
  color: #e9d5ff;
  border-color: rgba(var(--hp-purple), .38);
  box-shadow: 0 6px 24px rgba(var(--hp-purple), .20);
}

.hp7-heatmap-cell.today {
  border-color: rgba(var(--hp-gold), .50) !important;
  animation: hp-today-glow 2.5s ease-in-out infinite;
}

.hp7-heatmap-cell:hover {
  transform: scale(1.08);
}

.hp7-heatmap-lbl {
  letter-spacing: .10em;
  color: #3f3f46;
  font-weight: 750;
}

.hp7-heatmap-lbl.today {
  color: #fbbf24;
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 9B  THIS WEEK — VERTICAL BAR CHART
   ═══════════════════════════════════════════════════════════════════════════ */

.hp7-week-kpi {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0 16px;
}

.hp7-week-kpi-num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(150deg, #a78bfa 0%, #c084fc 55%, #e9d5ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 14px rgba(139, 92, 246, .25));
}

.hp7-week-kpi-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hp7-week-kpi-label {
  font-size: .58rem;
  color: #52525b;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.hp7-week-kpi-days {
  font-size: .74rem;
  font-weight: 800;
  color: #a1a1aa;
}

.hp7-week-kpi-days em {
  font-style: normal;
  color: #52525b;
  font-weight: 650;
  font-size: .64rem;
}

/* Bar chart columns */
.hp7-week-cols {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  height: 62px;
}

.hp7-week-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  height: 100%;
}

.hp7-week-col-track {
  flex: 1;
  width: 100%;
  background: rgba(63, 63, 70, .16);
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  transition: background .25s;
  position: relative;
}

.hp7-week-col--today .hp7-week-col-track {
  background: rgba(245, 158, 11, .05);
  border: 1px solid rgba(251, 191, 36, .30);
  box-shadow: 0 0 14px rgba(245, 158, 11, .09), inset 0 0 8px rgba(245,158,11,.04);
}

.hp7-week-col-fill {
  width: 100%;
  transition: height .65s cubic-bezier(.34, 1.56, .64, 1);
  border-radius: 3px;
}

.hp7-week-col-fill.lvl-0 {
  background: rgba(63, 63, 70, .30);
}

.hp7-week-col-fill.lvl-1 {
  background: linear-gradient(to top, rgba(139,92,246,.85), rgba(139,92,246,.45));
  box-shadow: 0 -3px 10px rgba(139, 92, 246, .20);
}

.hp7-week-col-fill.lvl-2 {
  background: linear-gradient(to top, rgba(139,92,246,.92), rgba(167,139,250,.68));
  box-shadow: 0 -3px 16px rgba(139, 92, 246, .30);
}

.hp7-week-col-fill.lvl-3 {
  background: linear-gradient(to top, #8b5cf6, #c084fc);
  box-shadow: 0 -4px 22px rgba(139, 92, 246, .42);
}

.hp7-week-col-lbl {
  font-size: .52rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #3f3f46;
  flex-shrink: 0;
  line-height: 1;
}

.hp7-week-col--today .hp7-week-col-lbl {
  color: #fbbf24;
}

.hp7-week-col--active:not(.hp7-week-col--today) .hp7-week-col-lbl {
  color: #8b82c8;
}

/* Hover lift on inactive days */
.hp7-week-col:hover .hp7-week-col-track {
  background: rgba(63, 63, 70, .26);
}

.hp7-week-col--active:hover .hp7-week-col-fill {
  filter: brightness(1.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 10  ACTIVITY FEED
   ═══════════════════════════════════════════════════════════════════════════ */

.hp7-feed {
  gap: 8px;
  max-height: 420px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--hp-purple), .15) transparent;
}

.hp7-feed::-webkit-scrollbar { width: 4px; }
.hp7-feed::-webkit-scrollbar-thumb {
  background: rgba(var(--hp-purple), .18);
  border-radius: 99px;
}
.hp7-feed::-webkit-scrollbar-track { background: transparent; }

.hp7-feed-row {
  border-radius: 16px;
  padding: 14px 18px;
  background: rgba(20, 20, 24, .45);
  border: 1px solid rgba(255,255,255,.04);
  transition: all var(--hp-dur-base) var(--hp-ease);
  backdrop-filter: blur(8px);
}

.hp7-feed-row:hover {
  background: rgba(30, 30, 38, .65);
  border-color: rgba(var(--hp-purple), .18);
  transform: translateX(6px);
  box-shadow: var(--hp-sh-sm), 0 0 16px rgba(var(--hp-purple), .06);
}

.hp7-feed-dot.match {
  background: linear-gradient(135deg, #a78bfa, #c084fc);
  box-shadow: 0 0 10px rgba(var(--hp-purple), .35);
}

.hp7-feed-dot.training {
  background: linear-gradient(135deg, #fbbf24, #fcd34d);
  box-shadow: 0 0 10px rgba(var(--hp-gold), .30);
}

.hp7-feed-dot.journal {
  background: linear-gradient(135deg, #818cf8, #a5b4fc);
  box-shadow: 0 0 10px rgba(var(--hp-indigo), .30);
}

.hp7-feed-info strong { color: #e4e4e7; font-weight: 700; }
.hp7-feed-info span   { color: #71717a; }

.hp7-feed-badge {
  border: none;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: .62rem;
  border-radius: 10px;
  padding: 4px 12px;
}

.hp7-feed-badge.W {
  background: linear-gradient(135deg, rgba(var(--hp-purple), .14), rgba(var(--hp-purple), .06));
  color: #c4b5fd;
}

.hp7-feed-badge.D {
  background: linear-gradient(135deg, rgba(var(--hp-gold), .10), rgba(var(--hp-gold), .04));
  color: #fcd34d;
}

.hp7-feed-badge.L {
  background: rgba(239,68,68,.07);
  color: #fca5a5;
}

.hp7-feed-empty {
  padding: 40px;
  color: #52525b;
}

/* Feed tabs */
.hp7-feed-tabs {
  background: rgba(16, 16, 20, .5) !important;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.04);
}

.hp7-feed-tab.active {
  background: rgba(var(--hp-purple), .12) !important;
  color: #c4b5fd !important;
  box-shadow: 0 0 8px rgba(var(--hp-purple), .10);
}

.hp7-feed-tab:hover:not(.active) {
  background: rgba(63,63,70,.20);
  color: #a1a1aa;
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 11  SEASON PROGRESS BARS
   ═══════════════════════════════════════════════════════════════════════════ */

.hp7-season { gap: 20px; }

.hp7-season-top span  { color: #71717a; letter-spacing: .01em; }
.hp7-season-top strong { color: #d4d4d8; }

.hp7-season-bar {
  border-radius: 99px;
  background: rgba(63,63,70,.20);
  overflow: hidden;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.35);
  height: 8px;
}

.hp7-season-fill {
  border-radius: 99px;
  transition: width 1.2s var(--hp-ease);
  position: relative;
}

.hp7-season-fill.goals {
  background: linear-gradient(90deg, #8b5cf6 0%, #c084fc 100%);
  box-shadow: 0 0 14px rgba(var(--hp-purple), .20);
}

.hp7-season-fill.assists {
  background: linear-gradient(90deg, #d97706 0%, #fbbf24 100%);
  box-shadow: 0 0 14px rgba(var(--hp-gold), .18);
}

.hp7-season-fill.matches {
  background: linear-gradient(90deg, #4f46e5 0%, #a5b4fc 100%);
  box-shadow: 0 0 14px rgba(var(--hp-indigo), .18);
}

.hp7-season-fill::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; width: 30px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25));
  border-radius: 0 99px 99px 0;
}

/* Default fill color for targets without a specific class */
.hp7-season-fill:not(.goals):not(.assists):not(.matches):not(.wins):not(.clean_sheets):not(.minutes):not(.training):not(.journal) {
  background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
  box-shadow: 0 0 14px rgba(var(--hp-emerald), .18);
}

/* Additional season target gradients */
.hp7-season-fill.wins           { background: linear-gradient(90deg, #f59e0b, #fbbf24); box-shadow: 0 0 14px rgba(var(--hp-gold), .18); }
.hp7-season-fill.clean_sheets   { background: linear-gradient(90deg, #0ea5e9, #38bdf8); box-shadow: 0 0 14px rgba(14,165,233,.18); }
.hp7-season-fill.minutes        { background: linear-gradient(90deg, #10b981, #34d399); box-shadow: 0 0 14px rgba(var(--hp-emerald), .18); }
.hp7-season-fill.training       { background: linear-gradient(90deg, #ef4444, #f87171); box-shadow: 0 0 14px rgba(239,68,68,.18); }
.hp7-season-fill.journal        { background: linear-gradient(90deg, #ec4899, #f472b6); box-shadow: 0 0 14px rgba(236,72,153,.18); }

/* Season target edit/add buttons */
.hp7-season-edit-btn {
  cursor: pointer;
  font-size: .58rem !important;
  transition: all var(--hp-dur-fast);
}
.hp7-season-edit-btn:hover {
  color: #c4b5fd !important;
  background: rgba(var(--hp-purple), .12) !important;
}

.hp7-season-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  border: 1px dashed rgba(255,255,255,.10);
  border-radius: 12px;
  background: rgba(var(--hp-purple), .04);
  color: #71717a;
  font-size: .68rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--hp-dur-base) var(--hp-ease);
}
.hp7-season-add-btn:hover {
  border-color: rgba(var(--hp-purple), .25);
  background: rgba(var(--hp-purple), .08);
  color: #c4b5fd;
}

/* ── Season Target Modal ── */
.hp7-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: hp-fade-in .2s ease-out;
}

@keyframes hp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hp7-modal {
  background: var(--hp-layer-3);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 28px 32px;
  width: min(380px, 90vw);
  box-shadow: var(--hp-sh-xl);
}

.hp7-modal-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: #e4e4e7;
  margin-bottom: 20px;
}

.hp7-modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hp7-modal-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hp7-modal-row label {
  flex: 1;
  font-size: .75rem;
  font-weight: 600;
  color: #a1a1aa;
}

.hp7-modal-input {
  width: 80px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: var(--hp-layer-2);
  color: #e4e4e7;
  font-size: .78rem;
  font-weight: 600;
  text-align: center;
  outline: none;
  transition: border-color var(--hp-dur-fast);
}
.hp7-modal-input:focus {
  border-color: rgba(var(--hp-purple), .40);
}

.hp7-modal-select {
  width: auto;
  flex: 1;
  text-align: left;
  padding-right: 8px;
}

.hp7-modal-remove {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(239,68,68,.08);
  color: #f87171;
  border-radius: 8px;
  cursor: pointer;
  font-size: .7rem;
  transition: all var(--hp-dur-fast);
}
.hp7-modal-remove:hover {
  background: rgba(239,68,68,.18);
}

.hp7-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}
.hp7-modal-cancel {
  padding: 8px 18px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: transparent;
  color: #a1a1aa;
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
}
.hp7-modal-cancel:hover { background: rgba(255,255,255,.04); }

.hp7-modal-save {
  padding: 8px 22px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, rgba(var(--hp-purple), .45), rgba(var(--hp-indigo), .35));
  color: #e4e4e7;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--hp-dur-fast);
}
.hp7-modal-save:hover { background: linear-gradient(135deg, rgba(var(--hp-purple), .55), rgba(var(--hp-indigo), .45)); }

/* ═══════════════════════════════════════════════════════════════════════════
   § 12  STREAK CARD
   ═══════════════════════════════════════════════════════════════════════════ */

.hp7-card--streak {
  border-color: rgba(var(--hp-gold), .12) !important;
  background:
    linear-gradient(160deg, rgba(var(--hp-gold), .06), rgba(18, 18, 22, .80)),
    rgba(14, 14, 18, .72) !important;
}

.hp7-card--streak::after {
  content: '';
  position: absolute;
  top: -80%; right: -50%;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--hp-gold), .07), transparent 70%);
  pointer-events: none;
  animation: hp-breathe 8s ease-in-out infinite;
  filter: blur(30px);
}

.hp7-card--streak:hover {
  border-color: rgba(var(--hp-gold), .28) !important;
  box-shadow: var(--hp-sh-lg), var(--hp-sh-glow-g), var(--hp-sh-inner) !important;
}

.hp7-streak-count {
  letter-spacing: -0.03em;
  background: linear-gradient(150deg, #fbbf24, #f59e0b, #fde68a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 4px 12px rgba(var(--hp-gold), .20));
}

.hp7-streak-dot-circle {
  border: 2px solid transparent;
  transition: all var(--hp-dur-base) var(--hp-ease);
  font-weight: 750;
}

.hp7-streak-dot-circle.empty {
  background: rgba(63,63,70,.22);
  color: #3f3f46;
  border-color: rgba(63,63,70,.18);
}

.hp7-streak-dot-circle.done {
  background: linear-gradient(135deg, rgba(var(--hp-gold), .18), rgba(251,191,36,.10));
  color: #fcd34d;
  border-color: rgba(var(--hp-gold), .35);
  box-shadow: 0 0 10px rgba(var(--hp-gold), .15);
}

.hp7-streak-dot-circle.today {
  border-color: rgba(168,85,247,.45);
  background: rgba(168,85,247,.12);
  color: #e9d5ff;
  animation: hp-pulse-ring 2s ease-in-out infinite;
}

.hp7-streak-status {
  border-radius: 14px;
  font-weight: 650;
  backdrop-filter: blur(8px);
}

.hp7-streak-status.urgent {
  background: linear-gradient(135deg, rgba(var(--hp-gold), .10), rgba(251,191,36,.04));
  border: 1px solid rgba(var(--hp-gold), .20);
  animation: hp-urgency-throb 2.5s ease-in-out infinite;
  box-shadow: 0 0 16px rgba(var(--hp-gold), .06);
}

.hp7-streak-action {
  border-radius: 12px;
  border: 1px solid rgba(var(--hp-purple), .12);
  background: rgba(20, 20, 24, .55);
  color: #a1a1aa;
  font-weight: 650;
  transition: all var(--hp-dur-base) var(--hp-ease);
}

.hp7-streak-action:hover {
  border-color: rgba(var(--hp-gold), .28);
  background: linear-gradient(135deg, rgba(var(--hp-gold), .10), rgba(251,191,36,.04));
  color: #fcd34d;
  transform: translateY(-2px);
  box-shadow: var(--hp-sh-sm), 0 0 12px rgba(var(--hp-gold), .10);
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 13  ACHIEVEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

.hp7-card--ach {
  border-color: rgba(var(--hp-gold), .08) !important;
}

.hp7-card--ach:hover {
  border-color: rgba(var(--hp-gold), .18) !important;
  box-shadow: var(--hp-sh-lg), var(--hp-sh-glow-g), var(--hp-sh-inner) !important;
}

.hp7-ach {
  cursor: pointer;
  transition: all var(--hp-dur-base) var(--hp-ease);
}

.hp7-ach:hover {
  transform: translateX(6px);
}

.hp7-ach-rarity.legendary {
  background: rgba(var(--hp-gold), .10);
  color: #fcd34d;
  border-color: rgba(var(--hp-gold), .20);
  box-shadow: 0 0 8px rgba(var(--hp-gold), .06);
}

.hp7-ach-rarity.epic {
  background: rgba(168,85,247,.08);
  color: #d8b4fe;
  border-color: rgba(168,85,247,.14);
}

.hp7-ach-pbar {
  border-radius: 99px;
  background: rgba(63,63,70,.22);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.25);
  height: 7px;
}

.hp7-ach-pfill {
  background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 60%, #fde68a 100%);
  border-radius: 99px;
  box-shadow: 0 0 10px rgba(var(--hp-gold), .18);
  position: relative;
}

.hp7-ach-pfill::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; width: 20px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.30));
  border-radius: 0 99px 99px 0;
}

.hp7-ach-cta {
  border-radius: 12px;
  background: rgba(var(--hp-gold), .07);
  border: 1px solid rgba(var(--hp-gold), .16);
  color: #fbbf24;
  font-weight: 750;
  letter-spacing: .05em;
  cursor: pointer;
  transition: all var(--hp-dur-base) var(--hp-ease);
}

.hp7-ach-cta:hover {
  background: rgba(var(--hp-gold), .16);
  border-color: rgba(var(--hp-gold), .35);
  transform: translateY(-2px);
  box-shadow: var(--hp-sh-sm), 0 0 16px rgba(var(--hp-gold), .12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 14  QUICK NAV LINKS — PREMIUM GRID
   ═══════════════════════════════════════════════════════════════════════════ */

.hp7-nav {
  display: grid !important;
  grid-template-columns: minmax(0, 268px) minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

.hp7-explore-rail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 20px 18px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(99, 102, 241, .18) 0%, rgba(67, 56, 202, .08) 40%, rgba(15, 15, 18, .96) 100%);
  border: 1px solid rgba(99, 102, 241, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.hp7-explore-intro {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hp7-explore-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #c7d2fe;
  font-weight: 800;
}

.hp7-explore-title {
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: clamp(1.08rem, 1.9vw, 1.42rem);
  font-weight: 800;
  line-height: 1.04;
  color: #fafafa;
  max-width: 11ch;
}

.hp7-explore-copy {
  margin: 0;
  font-size: .76rem;
  line-height: 1.55;
  color: #d4d4d8;
  max-width: 28ch;
}

.hp7-explore-points {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hp7-explore-point {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(10, 10, 12, .34);
  border: 1px solid rgba(255, 255, 255, .08);
  font-size: .68rem;
  color: #e4e4e7;
  font-weight: 600;
  line-height: 1.35;
}

.hp7-explore-point .elite-icon {
  color: #a5b4fc;
}

.hp7-explore-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.hp7-explore-stat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(9, 9, 11, .54);
  border: 1px solid rgba(255, 255, 255, .10);
  font-size: .64rem;
  color: #f4f4f5;
  font-weight: 650;
  text-align: center;
}

.hp7-explore-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.hp7-nav-link {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  border-radius: 18px !important;
  background: rgba(24, 24, 27, .74) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  backdrop-filter: blur(14px);
  transition: all var(--hp-dur-base) var(--hp-ease);
  color: #cbd5e1 !important;
  font-weight: 700;
  position: relative;
  overflow: hidden;
  padding: 16px 16px 18px !important;
  text-decoration: none;
  cursor: pointer;
  min-height: 112px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

/* Glow sweep on hover */
.hp7-nav-link::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--hp-dur-base);
  background: radial-gradient(ellipse at 50% -30%, rgba(var(--hp-purple), .14), transparent 70%);
  pointer-events: none;
}

.hp7-nav-link:hover {
  background: rgba(28, 28, 32, .72) !important;
  border-color: rgba(var(--hp-purple), .22) !important;
  color: #e2e8f0 !important;
  transform: translateY(-2px);
  box-shadow: var(--hp-sh-md), 0 0 24px rgba(var(--hp-purple), .10);
}

.hp7-nav-link:hover::before { opacity: 1; }

.hp7-nav-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  height: 32px !important;
  flex-shrink: 0;
  background: rgba(63, 63, 70, .22) !important;
  border: 1px solid rgba(63, 63, 70, .32) !important;
  border-radius: 11px !important;
  transition: all var(--hp-dur-base) var(--hp-ease);
  box-shadow: var(--hp-sh-inner);
  font-size: .95rem;
  color: #e4e4e7;
}

.hp7-nav-link:hover .hp7-nav-ic {
  transform: scale(1.08) rotate(-3deg);
  background: rgba(var(--hp-indigo), .18);
  border-color: rgba(var(--hp-indigo), .28);
  box-shadow: var(--hp-sh-sm);
}

.hp7-nav-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.hp7-nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
}

.hp7-nav-name {
  font-size: .9rem;
  font-weight: 760;
  color: #f8fafc;
  transition: color var(--hp-dur-fast);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.hp7-nav-desc {
  font-size: .7rem;
  font-weight: 500;
  color: #c4c4cf;
  transition: color var(--hp-dur-fast);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hp7-nav-link:hover .hp7-nav-name { color: #f8fafc; }
.hp7-nav-link:hover .hp7-nav-desc { color: #d4d4d8; }

.hp7-nav-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  color: #e5e7eb;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .03em;
  white-space: normal;
  line-height: 1.15;
  flex-shrink: 0;
  max-width: 100%;
}

.hp7-nav-arrow {
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-6px);
  transition: all var(--hp-dur-base) var(--hp-ease);
  color: #71717a;
  font-size: .76rem;
}

/* Color-coded default states */
.hp7-nav-link[data-page="analytics"] { border-color: rgba(var(--hp-indigo), .18) !important; background: linear-gradient(180deg, rgba(var(--hp-indigo), .08), rgba(24, 24, 27, .82)) !important; }
.hp7-nav-link[data-page="analytics"]:hover { border-color: rgba(var(--hp-indigo), .32) !important; background: rgba(24, 24, 30, .76) !important; }
.hp7-nav-link[data-page="goals"] { border-color: rgba(var(--hp-purple), .18) !important; background: linear-gradient(180deg, rgba(var(--hp-purple), .08), rgba(24, 24, 27, .82)) !important; }
.hp7-nav-link[data-page="goals"]:hover { border-color: rgba(var(--hp-purple), .32) !important; background: rgba(24, 24, 30, .76) !important; }
.hp7-nav-link[data-page="calendar"] { border-color: rgba(var(--hp-gold), .16) !important; background: linear-gradient(180deg, rgba(var(--hp-gold), .06), rgba(24, 24, 27, .82)) !important; }
.hp7-nav-link[data-page="calendar"]:hover { border-color: rgba(var(--hp-gold), .24) !important; background: rgba(24, 24, 30, .76) !important; }
.hp7-nav-link[data-page="achievements"] { border-color: rgba(251, 191, 36, .18) !important; background: linear-gradient(180deg, rgba(251, 191, 36, .08), rgba(24, 24, 27, .82)) !important; }
.hp7-nav-link[data-page="achievements"]:hover { border-color: rgba(251, 191, 36, .26) !important; background: rgba(24, 24, 30, .76) !important; }
.hp7-nav-link[data-page="journal"] { border-color: rgba(192, 132, 252, .18) !important; background: linear-gradient(180deg, rgba(192, 132, 252, .08), rgba(24, 24, 27, .82)) !important; }
.hp7-nav-link[data-page="journal"]:hover { border-color: rgba(192, 132, 252, .26) !important; background: rgba(24, 24, 30, .76) !important; }
.hp7-nav-link[data-page="analytics"] .hp7-nav-ic,
.hp7-nav-link[data-page="analytics"] .hp7-nav-meta { color: #a5b4fc; }
.hp7-nav-link[data-page="analytics"] .hp7-nav-ic { background: rgba(var(--hp-indigo), .16) !important; border-color: rgba(var(--hp-indigo), .22) !important; }
.hp7-nav-link[data-page="analytics"] .hp7-nav-meta { background: rgba(var(--hp-indigo), .12); border-color: rgba(var(--hp-indigo), .18); }
.hp7-nav-link[data-page="goals"] .hp7-nav-ic,
.hp7-nav-link[data-page="goals"] .hp7-nav-meta { color: #d8b4fe; }
.hp7-nav-link[data-page="goals"] .hp7-nav-ic { background: rgba(var(--hp-purple), .16) !important; border-color: rgba(var(--hp-purple), .22) !important; }
.hp7-nav-link[data-page="goals"] .hp7-nav-meta { background: rgba(var(--hp-purple), .12); border-color: rgba(var(--hp-purple), .18); }
.hp7-nav-link[data-page="calendar"] .hp7-nav-ic,
.hp7-nav-link[data-page="calendar"] .hp7-nav-meta { color: #fcd34d; }
.hp7-nav-link[data-page="calendar"] .hp7-nav-ic { background: rgba(var(--hp-gold), .12) !important; border-color: rgba(var(--hp-gold), .18) !important; }
.hp7-nav-link[data-page="calendar"] .hp7-nav-meta { background: rgba(var(--hp-gold), .10); border-color: rgba(var(--hp-gold), .15); }
.hp7-nav-link[data-page="achievements"] .hp7-nav-ic,
.hp7-nav-link[data-page="achievements"] .hp7-nav-meta { color: #fcd34d; }
.hp7-nav-link[data-page="achievements"] .hp7-nav-ic { background: rgba(251, 191, 36, .13) !important; border-color: rgba(251, 191, 36, .18) !important; }
.hp7-nav-link[data-page="achievements"] .hp7-nav-meta { background: rgba(251, 191, 36, .10); border-color: rgba(251, 191, 36, .15); }
.hp7-nav-link[data-page="journal"] .hp7-nav-ic,
.hp7-nav-link[data-page="journal"] .hp7-nav-meta { color: #e9d5ff; }
.hp7-nav-link[data-page="journal"] .hp7-nav-ic { background: rgba(192, 132, 252, .13) !important; border-color: rgba(192, 132, 252, .18) !important; }
.hp7-nav-link[data-page="journal"] .hp7-nav-meta { background: rgba(192, 132, 252, .10); border-color: rgba(192, 132, 252, .15); }

.hp7-nav-link:hover .hp7-nav-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Color-coded hovers */
.hp7-nav-link[data-page="analytics"]:hover .hp7-nav-ic  { background: rgba(var(--hp-indigo), .18) !important; border-color: rgba(var(--hp-indigo), .25) !important; }
.hp7-nav-link[data-page="goals"]:hover .hp7-nav-ic      { background: rgba(var(--hp-purple), .18) !important; border-color: rgba(var(--hp-purple), .25) !important; }
.hp7-nav-link[data-page="calendar"]:hover .hp7-nav-ic   { background: rgba(var(--hp-gold), .14) !important; border-color: rgba(var(--hp-gold), .20) !important; }
.hp7-nav-link[data-page="achievements"]:hover .hp7-nav-ic { background: rgba(251, 191, 36, .15) !important; border-color: rgba(251, 191, 36, .22) !important; }
.hp7-nav-link[data-page="journal"]:hover .hp7-nav-ic    { background: rgba(192, 132, 252, .14) !important; border-color: rgba(192, 132, 252, .20) !important; }

/* "Soon" locked state */
.hp7-nav-link--soon {
  border-color: rgba(148, 163, 184, .16) !important;
  background: linear-gradient(180deg, rgba(148, 163, 184, .05), rgba(24, 24, 27, .74)) !important;
  opacity: .9;
  cursor: default;
}
.hp7-nav-link--soon:hover {
  border-color: rgba(148, 163, 184, .24) !important;
  background: rgba(28, 28, 32, .72) !important;
}
.hp7-nav-link--soon .hp7-nav-name { color: #e5e7eb; }
.hp7-nav-link--soon .hp7-nav-desc { color: #a1a1aa; }
.hp7-nav-link--soon .hp7-nav-ic {
  background: rgba(148, 163, 184, .10) !important;
  border-color: rgba(148, 163, 184, .16) !important;
  color: #cbd5e1;
}

.hp7-nav-meta--soon {
  background: rgba(148, 163, 184, .12);
  border-color: rgba(148, 163, 184, .18);
  color: #e2e8f0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 15  INSIGHT BANNER
   ═══════════════════════════════════════════════════════════════════════════ */

.hp7-insight {
  background: linear-gradient(160deg, rgba(var(--hp-purple), .06), rgba(var(--hp-indigo), .03));
  border: 1px solid rgba(var(--hp-purple), .12);
  border-radius: 20px;
  padding: 24px 26px;
  backdrop-filter: blur(12px);
  box-shadow: var(--hp-sh-sm), var(--hp-sh-inner);
  transition: all var(--hp-dur-base) var(--hp-ease);
}

.hp7-insight:hover {
  border-color: rgba(var(--hp-purple), .24);
  box-shadow: var(--hp-sh-md), 0 0 20px rgba(var(--hp-purple), .08);
}

.hp7-insight-ic {
  background: linear-gradient(160deg, rgba(var(--hp-purple), .12), rgba(192,132,252,.06));
  border: 1px solid rgba(var(--hp-purple), .18);
  box-shadow: var(--hp-sh-inner);
  border-radius: 12px;
}

.hp7-insight-body strong {
  color: #d8b4fe;
  font-weight: 750;
}

.hp7-insight-body p {
  color: #a1a1aa;
  line-height: 1.65;
  font-size: .82rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 16  NBA (NEXT BEST ACTION) CARD
   ═══════════════════════════════════════════════════════════════════════════ */

.hp7-card--highlight {
  background:
    linear-gradient(160deg, rgba(12, 12, 16, .90), rgba(18, 18, 24, .95)) !important;
  border: 1px solid rgba(168, 85, 247, .22) !important;
}

.hp7-card--highlight:hover {
  border-color: rgba(168, 85, 247, .40) !important;
  box-shadow: var(--hp-sh-xl), 0 0 60px rgba(168, 85, 247, .12), var(--hp-sh-inner) !important;
}

.hp7-nba-glow {
  filter: blur(50px);
  opacity: .5;
}

.hp7-nba-icon {
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(168, 85, 247, .18), rgba(168, 85, 247, .06));
  border: 2px solid rgba(168, 85, 247, .28);
  box-shadow: var(--hp-sh-inner), 0 0 16px rgba(168, 85, 247, .08);
  transition: all var(--hp-dur-base) var(--hp-ease-spring);
}

.hp7-card--highlight:hover .hp7-nba-icon {
  transform: scale(1.08) rotate(5deg);
  box-shadow: var(--hp-sh-sm), 0 0 24px rgba(168, 85, 247, .18);
}

.hp7-nba-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

.hp7-nba-btn {
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(168,85,247,.16), rgba(168,85,247,.10));
  border: 1px solid rgba(168,85,247,.28);
  font-weight: 750;
  transition: all var(--hp-dur-base) var(--hp-ease);
  box-shadow: var(--hp-sh-inner);
}

.hp7-nba-btn:hover {
  background: linear-gradient(135deg, rgba(168,85,247,.28), rgba(168,85,247,.18));
  transform: translateY(-3px);
  box-shadow: var(--hp-sh-md), 0 0 24px rgba(168, 85, 247, .18);
}

.hp7-nba-btn.urgency-high {
  background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
  border: none;
  color: #18181b;
  box-shadow: 0 4px 20px rgba(var(--hp-gold), .28);
}

.hp7-nba-btn.urgency-high:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 12px 36px rgba(var(--hp-gold), .40) !important;
}

/* Secondary action */
.hp7-nba-secondary {
  border-radius: 18px;
  background: rgba(18, 18, 22, .55);
  border: 1px solid rgba(63, 63, 70, .25);
  transition: all var(--hp-dur-base) var(--hp-ease);
  backdrop-filter: blur(8px);
}

.hp7-nba-secondary:hover {
  background: rgba(24, 24, 30, .65);
  border-color: rgba(var(--hp-indigo), .25);
  transform: translateX(5px);
  box-shadow: var(--hp-sh-sm);
}

.hp7-nba-secondary-icon {
  border-radius: 14px;
  background: rgba(var(--hp-indigo), .10);
  border: 1px solid rgba(var(--hp-indigo), .18);
  transition: all var(--hp-dur-base) var(--hp-ease);
}

.hp7-nba-secondary:hover .hp7-nba-secondary-icon {
  background: rgba(var(--hp-indigo), .18);
  transform: scale(1.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 17  MISSION CARD
   ═══════════════════════════════════════════════════════════════════════════ */

.hp7-card--mission.completed {
  border-color: rgba(var(--hp-emerald), .14) !important;
  box-shadow: var(--hp-sh-md), 0 0 24px rgba(var(--hp-emerald), .06);
}

.hp7-mission-btn {
  border-radius: 12px;
  background: rgba(var(--hp-gold), .10);
  border: 1px solid rgba(var(--hp-gold), .18);
  color: #fbbf24;
  font-weight: 700;
  transition: all var(--hp-dur-base) var(--hp-ease);
}

.hp7-mission-btn:hover {
  background: rgba(var(--hp-gold), .22);
  transform: translateY(-2px);
  box-shadow: var(--hp-sh-sm), 0 0 12px rgba(var(--hp-gold), .12);
}

.hp7-mission-claim {
  border-radius: 14px;
  background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
  box-shadow: 0 4px 20px rgba(var(--hp-gold), .25);
  transition: all var(--hp-dur-base) var(--hp-ease);
}

.hp7-mission-claim:hover {
  transform: scale(1.06) !important;
  box-shadow: 0 8px 32px rgba(var(--hp-gold), .35) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 18  XP / PROGRESSION
   ═══════════════════════════════════════════════════════════════════════════ */

.hp7-xp-badge {
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(168,85,247,.14), rgba(192,132,252,.06));
  border: 1px solid rgba(168,85,247,.20);
  box-shadow: var(--hp-sh-inner);
}

.hp7-xp-lvl {
  font-weight: 900;
  font-size: 1.6rem !important;
  background: linear-gradient(150deg, #c4b5fd, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(var(--hp-purple), .15));
}

.hp7-xp-bar {
  border-radius: 8px;
  background: rgba(63,63,70,.30);
  box-shadow: inset 0 1px 4px rgba(0,0,0,.35);
}

.hp7-xp-fill {
  border-radius: 8px;
  background: linear-gradient(90deg, #a78bfa 0%, #c4b5fd 70%, #e9d5ff 100%);
  box-shadow: 0 0 14px rgba(var(--hp-purple), .20);
  transition: width 1.2s var(--hp-ease);
  position: relative;
}

.hp7-xp-fill::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; width: 40px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.30));
  border-radius: 0 8px 8px 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 19  QUOTE CARD
   ═══════════════════════════════════════════════════════════════════════════ */

.hp7-card--quote {
  background:
    linear-gradient(160deg, rgba(var(--hp-purple), .04), transparent),
    rgba(14, 14, 18, .72) !important;
}

.hp7-quote-mark {
  font-size: 3rem;
  color: rgba(var(--hp-purple), .12);
  font-family: Georgia, 'Times New Roman', serif;
}

.hp7-quote-text {
  color: #d4d4d8;
  line-height: 1.6;
  font-style: italic;
  font-size: .74rem;
}

.hp7-quote-author {
  color: #71717a;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 20  CONSISTENCY BADGE
   ═══════════════════════════════════════════════════════════════════════════ */

.hp7-consistency {
  border-radius: 8px;
  font-size: .56rem;
  font-weight: 700;
  backdrop-filter: blur(8px);
}

.hp7-consistency.high {
  background: rgba(var(--hp-emerald), .08);
  color: #4ade80;
  border: 1px solid rgba(var(--hp-emerald), .14);
}

.hp7-consistency.med {
  background: rgba(var(--hp-gold), .08);
  color: #fbbf24;
  border: 1px solid rgba(var(--hp-gold), .14);
}

.hp7-consistency.low {
  background: rgba(239,68,68,.06);
  color: #f87171;
  border: 1px solid rgba(239,68,68,.10);
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 21  FITNESS TESTING CARD
   ═══════════════════════════════════════════════════════════════════════════ */

.hp7-card--fitness {
  border-color: rgba(var(--hp-emerald), .10) !important;
}

.hp7-card--fitness:hover {
  border-color: rgba(var(--hp-emerald), .22) !important;
  box-shadow: var(--hp-sh-lg), 0 0 24px rgba(var(--hp-emerald), .06), var(--hp-sh-inner) !important;
}

.hp7-fitness-stat {
  background: rgba(var(--hp-emerald), .04);
  border: 1px solid rgba(var(--hp-emerald), .08);
  border-radius: 14px;
  padding: 12px 14px;
  transition: all var(--hp-dur-base) var(--hp-ease);
}

.hp7-fitness-stat:hover {
  background: rgba(var(--hp-emerald), .08);
  transform: translateY(-2px);
}

.hp7-fitness-type-tag {
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(var(--hp-emerald), .06);
  border: 1px solid rgba(var(--hp-emerald), .10);
  color: #34d399;
  font-weight: 650;
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 22  TRAINING VOLUME
   ═══════════════════════════════════════════════════════════════════════════ */

.hp7-training-vol-chart {
  gap: 6px;
}

.hp7-training-vol-bar {
  border-radius: 6px 6px 0 0;
  background: rgba(var(--hp-indigo), .22);
  transition: all var(--hp-dur-base) var(--hp-ease);
  position: relative;
  overflow: hidden;
}

.hp7-training-vol-bar:hover {
  background: rgba(var(--hp-indigo), .40);
  box-shadow: 0 0 12px rgba(var(--hp-indigo), .14);
}

.hp7-training-vol-bar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(var(--hp-indigo), .15), transparent);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 23  GSAP ENTRANCE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Remove the old CSS-only entrance animations — GSAP takes over */
.hp7-anim {
  animation: none !important;
}

.hp7-anim-d1, .hp7-anim-d2, .hp7-anim-d3, .hp7-anim-d4,
.hp7-anim-d5, .hp7-anim-d6, .hp7-anim-d7, .hp7-anim-d8,
.hp7-anim-d9, .hp7-anim-d10, .hp7-anim-d11, .hp7-anim-d12 {
  animation-delay: 0s !important;
}

/* Hero visibility-first baseline; GSAP uses from/fromTo for entrance motion. */
.hp7-hero {
  opacity: 1;
  transform: none;
}

/* Progress bars: GSAP sets initial width to 0 via JS, no CSS !important needed */
/* (Removed width:0!important — it blocked GSAP inline style animation) */

/* ═══════════════════════════════════════════════════════════════════════════
   § 24  RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .hp7 { padding: 0 0 60px; }
  .hp7-w { width: calc(100% - 16px); }

  .hp7-hero {
    padding: 28px 20px 24px !important;
    border-radius: 22px;
  }

  .hp7-title { font-size: 1.8rem !important; }
  .hp7-subtitle { font-size: .78rem; }

  .hp7-hero-badge {
    flex-direction: row;
    padding: 14px 18px !important;
    gap: 10px;
    border-radius: 18px;
  }

  .hp7-hero-rating { font-size: 1.7rem !important; }

  .hp7-card {
    padding: 22px !important;
    border-radius: 20px !important;
  }

  .hp7-bento {
    grid-template-columns: 1fr;
  }

  .hp7-c-8, .hp7-c-6, .hp7-c-4, .hp7-c-3, .hp7-c-12 {
    grid-column: span 1 !important;
  }

  .hp7-form {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .hp7-ring {
    width: 90px !important;
    height: 90px !important;
    animation: none !important;
  }

  .hp7-nav {
    grid-template-columns: 1fr !important;
  }

  .hp7-explore-rail {
    padding: 16px;
  }

  .hp7-explore-grid {
    grid-template-columns: 1fr !important;
  }

  .hp7-nav-link {
    min-height: 96px;
    padding: 14px 14px 16px !important;
  }

  .hp7-actions { flex-wrap: wrap; }

  .hp7-act {
    padding: 11px 20px;
    font-size: .80rem;
  }
}

@media (max-width: 900px) {
  .hp7-c-8, .hp7-c-4 {
    grid-column: span 6;
  }

  .hp7-nav {
    grid-template-columns: 1fr !important;
  }

  .hp7-explore-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 25  ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .hp7-explore-rail {
    padding: 16px;
  }

  .hp7-explore-grid {
    grid-template-columns: 1fr !important;
  }

  .hp7-nav-link {
    min-height: 96px;
    padding: 14px 14px 16px !important;
  }
}

/* Focus ring */
.hp7-card:focus-within {
  outline: 2px solid rgba(var(--hp-purple), .30);
  outline-offset: -1px;
}

.hp7-nav-link:focus-visible,
.hp7-act:focus-visible,
.hp7-nba-btn:focus-visible {
  outline: 2px solid rgba(var(--hp-purple), .50);
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hp7-ring { animation: none !important; }

  .hp7-card,
  .hp7-hero {
    opacity: 1 !important;
    transform: none !important;
  }

  .hp7-season-fill,
  .hp7-ach-pfill,
  .hp7-xp-fill {
    width: auto !important;
  }
}