/* IQMO · Profile Hero · Holographic v3 (03 Futuristic EDU · Dark-glass) */

@keyframes iqmoShimmer{
  0%{transform:translateX(-100%);}
  60%{transform:translateX(100%);}
  100%{transform:translateX(100%);}
}
@keyframes iqmoLivePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5), 0 0 14px rgba(34,197,94,.7);}
  50%{box-shadow:0 0 0 8px rgba(34,197,94,0), 0 0 14px rgba(34,197,94,.9);}
}
@keyframes iqmoOrbBreathe{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.035);}
}
@keyframes iqmoOrbPulse{
  0%,100%{opacity:.55; transform:scale(1);}
  50%{opacity:.9; transform:scale(1.08);}
}
@keyframes iqmoOrbSpin{
  to{transform:rotate(360deg);}
}
/* Каждая точка теперь крутится индивидуально (см. iqmoOrbitDotSpin
   рядом с .orb-orbit i), поэтому общий iqmoOrbitGroupSpin удалён —
   контейнер .orb-orbit больше не вращается. Оставшийся iqmoOrbitDotPulse
   мерцает opacity, не трогая transform — две анимации спокойно
   живут параллельно на одной точке. */
@keyframes iqmoOrbitDotPulse{
  0%,100%{opacity:.85;}
  50%{opacity:1;}
}
@keyframes iqmoCoreShine{
  0%,100%{opacity:.5;}
  50%{opacity:.9;}
}
@keyframes iqmoFloat{
  0%,100%{transform:translateY(0) translateX(0);}
  50%{transform:translateY(-12px) translateX(6px);}
}
@keyframes iqmoScanBeam{
  0%{transform:translateX(-30%) rotate(-8deg);}
  100%{transform:translateX(30%) rotate(-8deg);}
}

.iqmo-hero.v3{
  --line:#e6e8f0;
  --line-2:#eef0f7;
  --ink:#0f1226;
  --ink-2:#2a2e4a;
  --muted:#6b7094;
  --muted-2:#9aa0bf;
  position:relative;
  border-radius:24px;
  overflow:hidden;
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  border:1px solid rgba(124,58,237,.18);
    background:
      radial-gradient(700px 380px at 100% -10%, rgba(14,165,233,.18), transparent 60%),
      radial-gradient(640px 360px at 0% 110%, rgba(219,39,119,.13), transparent 60%),
      radial-gradient(900px 600px at 50% 50%, rgba(167,139,250,.16), transparent 70%),
      linear-gradient(180deg, #ffffff 0%, #f5f6ff 100%);
    box-shadow:
      0 1px 0 rgba(255,255,255,.9) inset,
      0 30px 70px -34px rgba(56,90,200,.28);
    color:var(--ink);
  }
  /* grid backdrop */
.iqmo-hero.v3::before{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
    background-image:
      linear-gradient(rgba(15,18,38,.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15,18,38,.06) 1px, transparent 1px);
    background-size: 36px 36px;
    background-position:-1px -1px;
    -webkit-mask: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
            mask: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
    opacity:.45;
  }
  /* holographic streaks */
.iqmo-hero.v3::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
    background:
      linear-gradient(115deg, transparent 30%, rgba(14,165,233,.10) 50%, transparent 70%),
      linear-gradient(115deg, transparent 60%, rgba(219,39,119,.08) 80%, transparent 100%);
    mix-blend-mode:multiply;
  }

.iqmo-hero.v3 .hero-inner{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:240px minmax(0, 1fr) minmax(280px, 360px);
  gap:28px;
  align-items:start;
  padding:28px 28px 22px;
}
.iqmo-hero.v3 .h-id .sec-row{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}
/* Пустой третий слот сетки: место зарезервировано, чип не виден. */
.iqmo-hero.v3 .h-id .sec-row .qstat.slot--empty{
  background:transparent;
  border:0;
  box-shadow:none;
  pointer-events:none;
  padding:0;
}
.iqmo-hero.v3 .h-id .sec-row .qstat.slot--empty:hover{
  transform:none;
  box-shadow:none;
}

  /* avatar — concentric segmented neon ring */
.iqmo-hero.v3 .av{
    position:relative;
    width:210px; height:210px;
    align-self:center; justify-self:center;
    display:grid; place-items:center;
  }
.iqmo-hero.v3 .av-outer{
    position:absolute; inset:0; border-radius:50%;
    background:conic-gradient(
      from -90deg,
      #0ea5e9 0%, #7c3aed 30%, #db2777 61%,
      rgba(15,18,38,.08) 61%, rgba(15,18,38,.08) 100%
    );
    filter:drop-shadow(0 0 18px rgba(124,58,237,.35));
  }
.iqmo-hero.v3 .av-outer::after{
    content:""; position:absolute; inset:5px; border-radius:50%;
    background:radial-gradient(circle at 50% 30%, #ffffff, #eef1ff 80%);
    box-shadow: inset 0 0 0 1px rgba(124,58,237,.10);
  }
  /* tick marks */
.iqmo-hero.v3 .av-ticks{
    position:absolute; inset:0; border-radius:50%;
    z-index:2;
    background:repeating-conic-gradient(
      from -90deg,
      rgba(15,18,38,.55) 0deg .8deg,
      transparent .8deg 9deg
    );
    -webkit-mask: radial-gradient(circle, transparent 0 96px, #000 96px 102px, transparent 102px);
            mask: radial-gradient(circle, transparent 0 96px, #000 96px 102px, transparent 102px);
    opacity:.5;
  }
.iqmo-hero.v3 .av-img{
    position:relative; z-index:3;
    width:172px; height:172px;
    border-radius:50%; overflow:hidden;
    background:#eef1ff;
    box-shadow: inset 0 -3px 12px rgba(15,18,38,.08), 0 0 0 1px rgba(124,58,237,.18);
  }
.iqmo-hero.v3 .av-img img{width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block;}
.iqmo-hero.v3 .av-chip{
    position:absolute; bottom:-8px; left:50%; transform:translateX(-50%);
    z-index:4;
    display:inline-flex; align-items:center; gap:7px;
    padding:7px 13px; border-radius:999px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(10px);
    border:1px solid rgba(124,58,237,.4);
    color:#5b21b6;
    font-family:'JetBrains Mono',monospace;
    font-weight:800; font-size:12.5px;
    letter-spacing:.05em;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.6) inset,
      0 8px 22px -6px rgba(124,58,237,.4);
  }
.iqmo-hero.v3 .av-chip svg{width:11px; height:11px; fill:#7c3aed;}
.iqmo-hero.v3 .av-pct{
    position:absolute; top:-2px; right:-12px;
    z-index:5;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(8px);
    border:1px solid rgba(14,165,233,.55);
    color:#0369a1;
    border-radius:999px;
    font-family:'JetBrains Mono',monospace;
    font-size:10.5px; font-weight:800;
    padding:4px 9px;
    box-shadow:0 0 14px rgba(14,165,233,.25);
  }

  /* identity */
.iqmo-hero.v3 .h-name{
  margin:0;
  font-size:34px;
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.05;
  color:var(--ink);
}
.iqmo-hero.v3 .h-handle{color:var(--muted);}
.iqmo-hero.v3 .h-pro{
    display:inline-flex; align-items:center; gap:5px;
    padding:3px 9px; border-radius:999px;
    background:rgba(14,165,233,.10);
    border:1px solid rgba(14,165,233,.35);
    color:#0369a1;
    font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.1em;
  }
.iqmo-hero.v3 .h-pro svg{width:10px; height:10px; fill:#0369a1;}
.iqmo-hero.v3 .h-meta-row{
    margin-top:6px;
    display:flex; align-items:center; gap:8px;
    font-size:12px; color:var(--muted);
    font-family:'JetBrains Mono',monospace;
  }
.iqmo-hero.v3 .h-meta-row .rank{
    color:#a21caf;
    font-weight:800;
    letter-spacing:.02em;
    text-shadow:0 0 12px rgba(219,39,119,.25);
  }
.iqmo-hero.v3 .h-meta-row .dot{width:3px; height:3px; border-radius:50%; background:var(--muted-2); display:inline-block;}

  /* XP glass block */
.iqmo-hero.v3 .xp{
    margin-top:14px;
    padding:14px 16px 13px;
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(10px);
    border:1px solid rgba(124,58,237,.12);
    border-radius:14px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 8px 20px -12px rgba(56,90,200,.18);
  }
.iqmo-hero.v3 .xp-head{
    display:flex; align-items:baseline; justify-content:space-between;
    margin-bottom:10px;
    font-size:12px;
  }
.iqmo-hero.v3 .xp-head .xp-curr{display:inline-flex; gap:8px; align-items:baseline;}
.iqmo-hero.v3 .xp-head .eye{font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#0369a1; font-family:'JetBrains Mono',monospace;}
.iqmo-hero.v3 .xp-head .num{font-family:'JetBrains Mono',monospace; font-weight:800; color:var(--ink); font-size:14px; letter-spacing:.02em;}
.iqmo-hero.v3 .xp-head .xp-next{color:var(--muted); font-family:'JetBrains Mono',monospace;}
.iqmo-hero.v3 .xp-head .xp-next b{color:var(--ink-2); font-weight:800;}
.iqmo-hero.v3 .xp-bar{
    position:relative;
    height:12px;
    border-radius:999px;
    background:rgba(15,18,38,.06);
    border:1px solid rgba(15,18,38,.05);
    overflow:hidden;
  }
.iqmo-hero.v3 .xp-fill{
    position:absolute; inset:0 auto 0 0; width:61%;
    border-radius:999px;
    background:linear-gradient(90deg, #0ea5e9 0%, #7c3aed 60%, #db2777 100%);
    box-shadow:0 0 16px rgba(124,58,237,.55);
    overflow:hidden;
  }
.iqmo-hero.v3 .xp-fill::after{
    content:""; display:block; position:absolute; inset:0;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
    transform:translateX(-100%);
    animation:iqmoShimmer 2.2s ease-in-out infinite;
    will-change:transform;
  }
  /* segment ticks overlay on xp */
.iqmo-hero.v3 .xp-bar::after{
    content:""; position:absolute; inset:0;
    background-image: linear-gradient(90deg, transparent calc(10% - 1px), #fff calc(10% - 1px), #fff 10%, transparent 10%);
    background-size:10% 100%;
    pointer-events:none;
    opacity:.9;
  }
.iqmo-hero.v3 .xp-foot{
    margin-top:9px;
    display:flex; align-items:center; justify-content:space-between;
    font-size:11.5px; color:var(--muted);
    font-family:'JetBrains Mono',monospace;
  }
.iqmo-hero.v3 .xp-foot b{color:var(--ink); font-family:'JetBrains Mono',monospace; font-weight:800;}
.iqmo-hero.v3 .xp-foot .untill{color:#0369a1; font-weight:700;}

  /* Streak HERO glass card */
.iqmo-hero.v3 .streak{
    position:relative;
    border-radius:20px;
    padding:20px 22px 18px;
    overflow:hidden;
    background:
      radial-gradient(260px 180px at 100% 0%, rgba(34,197,94,.20), transparent 60%),
      radial-gradient(220px 160px at 0% 100%, rgba(14,165,233,.15), transparent 60%),
      radial-gradient(280px 200px at 50% 120%, rgba(124,58,237,.10), transparent 65%),
      linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(244,253,247,.92) 100%);
    backdrop-filter:blur(14px);
    border:1px solid rgba(34,197,94,.25);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 30px 50px -22px rgba(34,197,94,.22),
      0 0 0 1px rgba(14,165,233,.05);
    display:flex; flex-direction:column; gap:12px;
  }
  /* scan beam */
.iqmo-hero.v3 .streak::before{
    content:""; position:absolute; top:-40%; left:-20%; width:240%; height:60%;
    background:linear-gradient(115deg, transparent 40%, rgba(74,222,128,.18) 50%, transparent 60%);
    transform:rotate(-8deg);
    animation:iqmoScanBeam 7s linear infinite;
    pointer-events:none;
    mix-blend-mode:multiply;
  }

.iqmo-hero.v3 .streak-top{
    display:flex; align-items:center; justify-content:space-between;
    position:relative; z-index:2;
  }
.iqmo-hero.v3 .s-eye{
    display:inline-flex; align-items:center; gap:7px;
    font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
    color:#047857;
    font-family:'JetBrains Mono',monospace;
  }
.iqmo-hero.v3 .s-eye .pulse{
    width:8px; height:8px; border-radius:50%;
    background:#22c55e;
    box-shadow: 0 0 0 0 rgba(34,197,94,.55), 0 0 14px rgba(34,197,94,.8);
    animation:iqmoLivePulse 1.8s ease-in-out infinite;
  }
.iqmo-hero.v3 .s-bonus{
    display:inline-flex; align-items:center; gap:5px;
    padding:4px 9px; border-radius:7px;
    background:rgba(14,165,233,.12);
    border:1px solid rgba(14,165,233,.4);
    color:#0369a1;
    font-size:10px; font-weight:800; letter-spacing:.08em;
    font-family:'JetBrains Mono',monospace;
  }
.iqmo-hero.v3 .s-bonus svg{width:10px; height:10px; fill:#0369a1;}

.iqmo-hero.v3 .s-hero{
    display:grid; grid-template-columns:auto 1fr;
    gap:14px; align-items:center;
    position:relative; z-index:2;
  }
  /* energy orb — holographic core */
.iqmo-hero.v3 .orb{
    --orbit-r:48px;
    position:relative;
    width:96px; height:96px;
    display:grid; place-items:center;
  }
  /* outer breathing aura */
.iqmo-hero.v3 .orb::before{
    content:""; position:absolute; inset:-14px; border-radius:50%;
    background:
      radial-gradient(circle at 50% 50%, rgba(34,197,94,.35), transparent 55%),
      radial-gradient(circle at 50% 50%, rgba(14,165,233,.18), transparent 70%);
    z-index:0;
    animation:iqmoOrbPulse 3.6s ease-in-out infinite;
    filter:blur(2px);
  }
  /* orbital track (faint ring) */
.iqmo-hero.v3 .orb::after{
    content:""; position:absolute; inset:6px; border-radius:50%;
    border:1px dashed rgba(34,197,94,.35);
    z-index:1;
    animation:iqmoOrbSpin 22s linear infinite;
  }
  /* rotating iridescent shell */
.iqmo-hero.v3 .orb-shell{
    position:absolute; inset:0; border-radius:50%;
    background:conic-gradient(
      from 0deg,
      rgba(34,197,94,.85) 0deg,
      rgba(74,222,128,.55) 60deg,
      rgba(14,165,233,.55) 140deg,
      rgba(124,58,237,.55) 220deg,
      rgba(34,197,94,.85) 320deg,
      rgba(34,197,94,.85) 360deg
    );
    -webkit-mask: radial-gradient(circle, transparent 0 36px, #000 37px 46px, transparent 47px);
            mask: radial-gradient(circle, transparent 0 36px, #000 37px 46px, transparent 47px);
    filter:drop-shadow(0 0 12px rgba(34,197,94,.45));
    animation:iqmoOrbSpin 8s linear infinite;
  }
  /* glass core */
.iqmo-hero.v3 .orb-core{
    position:relative; z-index:3;
    width:68px; height:68px; border-radius:50%;
    background:
      radial-gradient(circle at 35% 28%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.5) 22%, transparent 45%),
      radial-gradient(circle at 50% 65%, rgba(74,222,128,.35), transparent 65%),
      linear-gradient(160deg, rgba(255,255,255,.85) 0%, rgba(236,253,245,.85) 50%, rgba(219,234,254,.85) 100%);
    backdrop-filter:blur(8px);
    box-shadow:
      inset 0 -6px 14px rgba(34,197,94,.18),
      inset 0 1px 0 rgba(255,255,255,.9),
      0 0 0 1px rgba(255,255,255,.7),
      0 6px 18px -6px rgba(34,197,94,.35);
    display:grid; place-items:center;
    animation:iqmoOrbBreathe 4.2s ease-in-out infinite;
  }
.iqmo-hero.v3 .orb-core::after{
    content:""; position:absolute; inset:8% 32% 60% 12%;
    border-radius:50%;
    background:radial-gradient(ellipse at center, rgba(255,255,255,.85), transparent 70%);
    animation:iqmoCoreShine 4.2s ease-in-out infinite;
    pointer-events:none;
  }
.iqmo-hero.v3 .orb-core svg{
    position:relative; z-index:2;
    width:30px; height:30px;
    fill:none;
    stroke:url(#orbGrad);
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    filter:drop-shadow(0 0 6px rgba(34,197,94,.55));
  }
  /* orbiting particles — динамические точки. Количество = streak (1 точка
     на день серии), максимум 30. Каждая точка имеет свой --angle (равно-
     мерно по окружности) и СВОЮ скорость + направление + цвет — это
     визуально оживляет орб и даёт ощущение «живой системы», а не
     синхронного обруча. Параметры тащит iqmo-orbit-dots.js → build().
     Радиус задаём через --orbit-r (по умолчанию 48px для 96px-орба). */
.iqmo-hero.v3 .orb-orbit{
    position:absolute; inset:0; z-index:4;
    pointer-events:none;
    transform-origin:50% 50%;
  }
.iqmo-hero.v3 .orb-orbit i{
    position:absolute; top:50%; left:50%;
    /* размер задаётся data-orbit-tier (см. ниже), здесь fallback */
    width:var(--dot-size, 6px); height:var(--dot-size, 6px);
    margin: calc(var(--dot-size, 6px) / -2) 0 0 calc(var(--dot-size, 6px) / -2);
    border-radius:50%;
    display:block;
    will-change:transform, opacity;
    backface-visibility:hidden;
    /* Каждая точка катится по орбите ИНДИВИДУАЛЬНО: --dur — её период
       (22..32s, разные у соседей), --dir — направление (1/-1), --angle —
       стартовый сдвиг. iqmoOrbitDotSpin читает все три, поэтому точки
       расходятся / сходятся со временем как в реальном вращающемся
       рое — без впечатления «склеенного обруча». */
    animation:
      iqmoOrbitDotSpin var(--dur, 26s) linear infinite,
      iqmoOrbitDotPulse 2.4s ease-in-out infinite;
    animation-delay: 0s, var(--pdel, 0s);
    /* Цвет тоже индивидуальный — палитра в HSL по --hue (130..290).
       Сохраняем тот же визуальный язык: мягкий неоновый градиент с
       внутренним «глянцем» и наружным glow. */
    background:
      radial-gradient(circle at 30% 30%,
        hsl(var(--hue, 145) 95% 78%) 0%,
        hsl(var(--hue, 145) 80% 55%) 70%,
        hsl(var(--hue, 145) 70% 38%) 100%);
    box-shadow:
      0 0 8px hsla(var(--hue, 145), 90%, 60%, .55),
      0 0 3px rgba(255,255,255,.9) inset;
  }
@keyframes iqmoOrbitDotSpin{
    from{ transform: rotate(calc(var(--angle, 0deg) + 0deg * var(--dir, 1))) translateX(var(--orbit-r, 48px)); }
    to  { transform: rotate(calc(var(--angle, 0deg) + 360deg * var(--dir, 1))) translateX(var(--orbit-r, 48px)); }
  }
  /* Тиры размеров точек — чем больше дней, тем компактнее точки,
     иначе при 30 точках они визуально сольются и забьют центральную иконку.
     Box-shadow тоже завязан на --hue, чтобы тинт точки и её свечение
     были одного цвета. */
.iqmo-hero.v3 .orb-orbit[data-orbit-tier="big"]{ --dot-size:7px; }
.iqmo-hero.v3 .orb-orbit[data-orbit-tier="mid"]{ --dot-size:5.5px; }
.iqmo-hero.v3 .orb-orbit[data-orbit-tier="small"]{ --dot-size:4px; }
.iqmo-hero.v3 .orb-orbit[data-orbit-tier="big"] i{
    box-shadow:
      0 0 12px hsla(var(--hue, 145), 90%, 65%, .85),
      0 0 4px rgba(255,255,255,.95) inset;
  }
.iqmo-hero.v3 .orb-orbit[data-orbit-tier="small"] i{
    box-shadow:0 0 5px hsla(var(--hue, 145), 90%, 60%, .55);
  }
@media (prefers-reduced-motion: reduce){
.iqmo-hero.v3 .orb-orbit{ animation:none; }
.iqmo-hero.v3 .orb-orbit i{ animation:none; }
  }
  /* Hover-tooltip: при наведении на .orb показываем .orb-tip.
     Текст рендерит JS (см. profile-render.js → IqmoOrbitDots.tooltipText). */
.iqmo-hero.v3 .orb{ cursor:help; }
.iqmo-hero.v3 .orb-tip{
    position:absolute; left:50%; bottom:calc(100% + 10px);
    transform:translateX(-50%) translateY(4px);
    background:linear-gradient(180deg, rgba(15,18,38,.96), rgba(15,18,38,.92));
    color:#e7eaf6;
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
    padding:8px 12px;
    font-size:12px; font-weight:500; line-height:1.4;
    width:max-content; max-width:240px;
    text-align:center;
    box-shadow:0 8px 24px -8px rgba(0,0,0,.55);
    opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
    z-index:50;
  }
.iqmo-hero.v3 .orb-tip::after{
    content:""; position:absolute; left:50%; top:100%;
    transform:translateX(-50%);
    border:6px solid transparent;
    border-top-color:rgba(15,18,38,.96);
  }
.iqmo-hero.v3 .orb:hover .orb-tip,
.iqmo-hero.v3 .orb:focus-within .orb-tip{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }

.iqmo-hero.v3 .s-big .num{
    display:block;
    font-family:'JetBrains Mono',monospace; font-weight:800;
    font-size:56px; letter-spacing:-.05em; line-height:.9;
    background:linear-gradient(180deg, #1f2342 0%, #059669 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    text-shadow:0 0 18px rgba(34,197,94,.12);
  }
.iqmo-hero.v3 .s-big .lbl{
    margin-top:6px;
    font-size:13px; font-weight:800; color:#047857;
    letter-spacing:.12em; text-transform:uppercase;
    font-family:'JetBrains Mono',monospace;
  }
.iqmo-hero.v3 .s-warn{
    position:relative; z-index:2;
    font-size:13px; color:var(--ink-2); line-height:1.4;
  }
.iqmo-hero.v3 .s-warn b{color:#5b21b6; font-family:'JetBrains Mono',monospace; font-weight:800;}

  /* progress bar */
.iqmo-hero.v3 .s-prog{position:relative; z-index:2;}
.iqmo-hero.v3 .s-prog-bar{
    position:relative;
    height:10px; border-radius:999px;
    background:rgba(15,18,38,.06);
    border:1px solid rgba(15,18,38,.05);
    overflow:hidden;
  }
.iqmo-hero.v3 .s-prog-fill{
    height:100%;
    width:57%;
    border-radius:999px;
    background:linear-gradient(90deg, #22c55e 0%, #4ade80 55%, #86efac 100%);
    box-shadow:
      0 0 14px rgba(34,197,94,.5),
      0 0 28px rgba(74,222,128,.35),
      inset 0 1px 0 rgba(255,255,255,.6);
    position:relative;
    overflow:hidden;
  }
.iqmo-hero.v3 .s-prog-fill::after{
    content:""; display:block; position:absolute; inset:0;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
    transform:translateX(-100%);
    animation:iqmoShimmer 2.4s ease-in-out infinite;
    will-change:transform;
  }
.iqmo-hero.v3 .s-prog-bar::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background-image: linear-gradient(90deg, transparent calc(14.28% - 1px), #fff calc(14.28% - 1px), #fff 14.28%, transparent 14.28%);
    background-size:14.28% 100%;
    opacity:.95;
  }
.iqmo-hero.v3 .s-prog-foot{
    margin-top:8px;
    display:flex; align-items:center; justify-content:space-between;
    font-size:11.5px; color:var(--muted);
    font-family:'JetBrains Mono',monospace;
  }
.iqmo-hero.v3 .s-prog-foot b{color:var(--ink);}
.iqmo-hero.v3 .s-prog-foot .rew{
    display:inline-flex; align-items:center; gap:6px;
    color:#047857;
    text-transform:uppercase; letter-spacing:.08em; font-weight:800;
    font-size:10.5px;
  }
.iqmo-hero.v3 .s-prog-foot .rew svg{width:10px; height:10px; fill:#047857;}

.iqmo-hero.v3 .s-cta{
    position:relative; z-index:2;
    margin-top:4px;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    height:40px; padding:0 16px;
    border-radius:11px;
    background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(240,253,244,.92));
    border:1px solid rgba(34,197,94,.4);
    color:#065f46; font-weight:700; font-size:12.5px;
    letter-spacing:.04em;
    backdrop-filter:blur(10px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 0 0 3px rgba(34,197,94,.08),
      0 8px 18px -8px rgba(34,197,94,.35);
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
    align-self:flex-start;
    font-family:'JetBrains Mono',monospace;
  }
.iqmo-hero.v3 .s-cta:hover{
    background:linear-gradient(180deg, #ffffff, #ecfdf5);
    border-color:rgba(34,197,94,.6);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 0 0 4px rgba(34,197,94,.12),
      0 12px 26px -8px rgba(34,197,94,.5);
    transform:translateY(-1px);
  }
.iqmo-hero.v3 .s-cta svg{width:13px; height:13px; fill:#059669;}

  /* secondary glass cards */
.iqmo-hero.v3 .qstat{
    position:relative;
    padding:13px 14px;
    background:rgba(255,255,255,.78);
    backdrop-filter:blur(10px);
    border:1px solid rgba(124,58,237,.14);
    border-radius:14px;
    display:flex; align-items:flex-start; gap:12px;
    overflow:hidden;
    box-shadow: 0 6px 16px -10px rgba(56,90,200,.2), inset 0 1px 0 rgba(255,255,255,.8);
  }
.iqmo-hero.v3 .qstat::before{
    content:""; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, rgba(124,58,237,.55), transparent);
  }
.iqmo-hero.v3 .qstat .q-ic{
    width:32px; height:32px; border-radius:9px;
    display:grid; place-items:center; flex-shrink:0;
    background:rgba(15,18,38,.04);
    border:1px solid rgba(15,18,38,.06);
  }
.iqmo-hero.v3 .qstat .q-ic svg{width:14px; height:14px;}
.iqmo-hero.v3 .qstat.league .q-ic svg{fill:#0369a1;}
.iqmo-hero.v3 .qstat.acc    .q-ic svg{fill:#047857;}
.iqmo-hero.v3 .qstat.course .q-ic svg{fill:#7c3aed;}
.iqmo-hero.v3 .qstat .q-val{
    font-family:'JetBrains Mono',monospace; font-weight:800;
    font-size:18px; color:var(--ink); line-height:1;
  }
.iqmo-hero.v3 .qstat .q-val .unit{color:var(--muted); font-size:11px; margin-left:1px;}
.iqmo-hero.v3 .qstat .q-lbl{
    margin-top:5px;
    font-size:10px; font-weight:800; letter-spacing:.12em;
    text-transform:uppercase; color:var(--muted);
    font-family:'JetBrains Mono',monospace;
  }
.iqmo-hero.v3 .qstat .q-delta{
    flex:0 0 auto;
    align-self:center;
    margin-left:auto;
    font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:800;
    padding:3px 7px; border-radius:6px;
    background:rgba(16,185,129,.10); color:#047857;
    border:1px solid rgba(16,185,129,.25);
  }
.iqmo-hero.v3 .qstat .q-delta:empty{
    visibility:hidden;
    min-width:42px;
    padding:3px 7px;
    border-color:transparent;
    background:transparent;
  }
.iqmo-hero.v3 .qstat.league .q-delta{background:rgba(14,165,233,.10); color:#0369a1; border-color:rgba(14,165,233,.25);}
.iqmo-hero.v3 .qstat.course .q-delta{background:rgba(124,58,237,.10); color:#5b21b6; border-color:rgba(124,58,237,.25);}

  /* particles for v3 (light) */
.iqmo-hero.v3-deco{position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden;}
.iqmo-hero.v3-deco .pp{position:absolute; border-radius:50%;}
.iqmo-hero.v3-deco .pp.a{ width:5px; height:5px; top:60px;  left:480px;  background:#0ea5e9; box-shadow:0 0 14px #38bdf8; animation:iqmoFloat 6s ease-in-out infinite;}
.iqmo-hero.v3-deco .pp.b{ width:4px; height:4px; top:160px; left:680px;  background:#db2777; box-shadow:0 0 14px #f472b6; animation:iqmoFloat 7s ease-in-out infinite 1.2s;}
.iqmo-hero.v3-deco .pp.c{ width:3px; height:3px; bottom:80px; left:340px; background:#7c3aed; box-shadow:0 0 12px #a78bfa; animation:iqmoFloat 5.4s ease-in-out infinite .4s;}
.iqmo-hero.v3-deco .pp.d{ width:4px; height:4px; top:120px; left:1080px; background:#22c55e; box-shadow:0 0 12px #4ade80; animation:iqmoFloat 6.5s ease-in-out infinite .8s;}

  /* ──────────────────────────────────────────────
     STREAK · DARK GLASS variant (modifier .dark)
     embedded dark holographic card inside light UI
     ────────────────────────────────────────────── */
.iqmo-hero.v3 .streak.dark{
    background:
      radial-gradient(280px 200px at 100% 0%, rgba(74,222,128,.16), transparent 60%),
      radial-gradient(220px 160px at 0% 100%, rgba(14,165,233,.12), transparent 60%),
      radial-gradient(300px 220px at 50% 130%, rgba(124,58,237,.20), transparent 65%),
      linear-gradient(180deg, rgba(27,29,46,.94) 0%, rgba(20,20,35,.94) 100%);
    backdrop-filter:blur(20px);
    border:1px solid rgba(134,239,172,.18);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      0 30px 50px -22px rgba(15,18,38,.45),
      0 0 0 1px rgba(124,58,237,.12);
    padding:18px 20px 16px;
    gap:11px;
    color:#e8eaff;
  }
  /* holographic hairline border on top of the card */
.iqmo-hero.v3 .streak.dark > .holo-border{
    position:absolute; inset:0; pointer-events:none; z-index:3;
    border-radius:inherit;
    padding:1px;
    background:linear-gradient(135deg, rgba(134,239,172,.6), rgba(125,211,252,.4) 38%, rgba(167,139,250,.55) 72%, rgba(134,239,172,.4));
    -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity:.55;
  }
  /* scan beam softer + screen-blend on dark */
.iqmo-hero.v3 .streak.dark::before{
    background:linear-gradient(115deg, transparent 40%, rgba(167,139,250,.12) 50%, transparent 60%);
    mix-blend-mode:screen;
    animation-duration:8s;
  }

.iqmo-hero.v3 .streak.dark .s-eye{color:#86efac;}
.iqmo-hero.v3 .streak.dark .s-eye .pulse{
    background:#4ade80;
    box-shadow:0 0 0 0 rgba(74,222,128,.5), 0 0 12px rgba(74,222,128,.7);
  }
.iqmo-hero.v3 .streak.dark .s-bonus{
    background:rgba(125,211,252,.10);
    border-color:rgba(125,211,252,.3);
    color:#7dd3fc;
  }
.iqmo-hero.v3 .streak.dark .s-bonus svg{fill:#7dd3fc;}

  /* compact dark orb */
.iqmo-hero.v3 .streak.dark .orb{width:84px; height:84px;}
.iqmo-hero.v3 .streak.dark .orb::before{
    inset:-12px;
    background:
      radial-gradient(circle at 50% 50%, rgba(74,222,128,.28), transparent 55%),
      radial-gradient(circle at 50% 50%, rgba(124,58,237,.16), transparent 70%);
  }
.iqmo-hero.v3 .streak.dark .orb::after{
    inset:5px; border-color:rgba(134,239,172,.28);
  }
.iqmo-hero.v3 .streak.dark .orb-shell{
    -webkit-mask:radial-gradient(circle, transparent 0 32px, #000 33px 40px, transparent 41px);
            mask:radial-gradient(circle, transparent 0 32px, #000 33px 40px, transparent 41px);
    filter:drop-shadow(0 0 10px rgba(74,222,128,.35));
  }
.iqmo-hero.v3 .streak.dark .orb-core{
    width:60px; height:60px;
    background:
      radial-gradient(circle at 35% 28%, rgba(255,255,255,.45) 0%, rgba(255,255,255,.12) 22%, transparent 45%),
      radial-gradient(circle at 50% 65%, rgba(74,222,128,.30), transparent 65%),
      linear-gradient(160deg, rgba(48,52,82,.92) 0%, rgba(35,36,58,.92) 50%, rgba(20,20,35,.94) 100%);
    box-shadow:
      inset 0 -6px 14px rgba(74,222,128,.20),
      inset 0 1px 0 rgba(255,255,255,.12),
      0 0 0 1px rgba(134,239,172,.18),
      0 6px 18px -6px rgba(74,222,128,.28);
  }
.iqmo-hero.v3 .streak.dark .orb-core::after{
    background:radial-gradient(ellipse at center, rgba(255,255,255,.5), transparent 70%);
  }
.iqmo-hero.v3 .streak.dark .orb-core svg{
    width:26px; height:26px;
    filter:drop-shadow(0 0 6px rgba(74,222,128,.7));
  }

  /* numbers / labels */
.iqmo-hero.v3 .streak.dark .s-big .num{
    font-size:50px;
    background:linear-gradient(180deg, #ffffff 0%, #86efac 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    text-shadow:0 0 18px rgba(74,222,128,.18);
  }
.iqmo-hero.v3 .streak.dark .s-big .lbl{color:#86efac;}
.iqmo-hero.v3 .streak.dark .s-warn{color:#cbd2f5;}
.iqmo-hero.v3 .streak.dark .s-warn b{color:#c4b5fd; font-family:'JetBrains Mono',monospace; font-weight:800;}

  /* progress bar — same emerald gradient, glass-on-dark */
.iqmo-hero.v3 .streak.dark .s-prog-bar{
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.08);
  }
.iqmo-hero.v3 .streak.dark .s-prog-fill{
    box-shadow:
      0 0 14px rgba(34,197,94,.4),
      0 0 28px rgba(74,222,128,.25),
      inset 0 1px 0 rgba(255,255,255,.5);
  }
.iqmo-hero.v3 .streak.dark .s-prog-bar::after{
    background-image:linear-gradient(90deg, transparent calc(14.28% - 1px), rgba(20,20,35,.9) calc(14.28% - 1px), rgba(20,20,35,.9) 14.28%, transparent 14.28%);
    background-size:14.28% 100%;
  }
.iqmo-hero.v3 .streak.dark .s-prog-foot{color:#9aa0bf;}
.iqmo-hero.v3 .streak.dark .s-prog-foot b{color:#fff;}
.iqmo-hero.v3 .streak.dark .s-prog-foot .rew{color:#86efac;}
.iqmo-hero.v3 .streak.dark .s-prog-foot .rew svg{fill:#86efac;}

  /* CTA — dark glass with green border */
.iqmo-hero.v3 .streak.dark .s-cta{
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border-color:rgba(134,239,172,.34);
    color:#e8eaff;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 0 0 3px rgba(74,222,128,.06),
      0 8px 18px -8px rgba(0,0,0,.55);
  }
.iqmo-hero.v3 .streak.dark .s-cta:hover{
    background:linear-gradient(180deg, rgba(74,222,128,.12), rgba(74,222,128,.04));
    border-color:rgba(134,239,172,.6);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.1),
      0 0 0 4px rgba(74,222,128,.10),
      0 12px 26px -8px rgba(74,222,128,.35);
  }
.iqmo-hero.v3 .streak.dark .s-cta svg{fill:#86efac;}

  
.iqmo-hero.v3 .h-name-view{
  display:inline-flex; align-items:baseline; gap:3px; min-width:0; max-width:100%;
}
.iqmo-hero.v3 .h-name-edit{
  flex-shrink:0;
  width:auto; height:auto;
  margin:0 0 0 1px;
  padding:3px;
  border:none;
  border-radius:5px;
  background:transparent;
  color:var(--muted-2);
  opacity:.5;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:baseline;
  cursor:pointer;
  line-height:0;
  transform:translateY(-0.06em);
  transition:opacity .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease;
}
.iqmo-hero.v3 .h-name-edit svg{width:15px; height:15px; display:block;}
.iqmo-hero.v3 .h-name-edit:hover{
  opacity:1;
  color:var(--muted);
  background:rgba(124,58,237,.06);
  box-shadow:0 0 0 5px rgba(124,58,237,.07);
}
.iqmo-hero.v3 .h-name-edit:focus-visible{
  opacity:1;
  outline:2px solid rgba(99,102,241,.32);
  outline-offset:2px;
}
.iqmo-hero.v3 .h-name-edit:active{opacity:.78;}
.iqmo-hero.v3 .h-name-edit-form{
  display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap;
  min-width:min(100%, 320px);
}
.iqmo-hero.v3 .h-name-edit-form[hidden]{display:none!important;}
.iqmo-hero.v3 .h-name-view[hidden]{display:none!important;}
.iqmo-hero.v3 .h-name-edit-input{
  flex:1 1 160px; min-width:120px;
  padding:8px 11px;
  border:1px solid var(--line);
  border-radius:10px;
  font:inherit; font-size:15px; font-weight:700;
  color:var(--ink);
  background:#fff;
}
.iqmo-hero.v3 .h-name-edit-input:focus{
  outline:2px solid rgba(99,102,241,.28);
  border-color:rgba(99,102,241,.45);
}
.iqmo-hero.v3 .h-name-edit-save,
.iqmo-hero.v3 .h-name-edit-cancel{
  font:inherit;
  font-size:12px; font-weight:700;
  padding:7px 12px;
  border-radius:9px;
  cursor:pointer;
  border:1px solid transparent;
}
@media (max-width:1180px){
  .iqmo-hero.v3 .hero-inner{
    grid-template-columns:200px minmax(0, 1fr);
    gap:20px;
    padding-left:20px;
    padding-right:20px;
  }
  .iqmo-hero.v3 .hero-inner{padding-top:22px;}
  .iqmo-hero.v3 .hero-inner .streak{grid-column:1 / -1;}
}
@media (max-width:720px){
  .iqmo-hero.v3 .hero-inner{
    grid-template-columns:1fr;
    gap:16px;
    padding-left:14px;
    padding-right:14px;
  }
  .iqmo-hero.v3 .hero-inner{padding-top:16px;}
  .iqmo-hero.v3 .av{justify-self:center;width:176px;height:176px;}
  .iqmo-hero.v3 .av-img{width:148px;height:148px;}
  .iqmo-hero.v3 .av-ticks{
    -webkit-mask:radial-gradient(circle, transparent 0 82px, #000 82px 88px, transparent 88px);
            mask:radial-gradient(circle, transparent 0 82px, #000 82px 88px, transparent 88px);
  }
  .iqmo-hero.v3 .h-id{align-items:center;text-align:center;}
  .iqmo-hero.v3 .h-name-row{justify-content:center;}
  .iqmo-hero.v3 .h-meta-row{justify-content:center;flex-wrap:wrap;}
  .iqmo-hero.v3 .xp-foot{flex-wrap:wrap;gap:6px;}
  .iqmo-hero.v3 .h-id .sec-row{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .iqmo-hero.v3 *,
  .iqmo-hero.v3 *::before,
  .iqmo-hero.v3 *::after{
    animation:none !important;
    transition:none !important;
  }
}

.iqmo-hero.v3 .av-initials{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:52px; font-weight:800; letter-spacing:-.04em;
  color:#7c3aed;
  background:linear-gradient(180deg,#f5f3ff 0%,#eef1ff 100%);
}