/* ── PROFILE VIEW ────────────────────────────────────────────────────────── */
#profileView { min-height: 60vh; }
.profile-view-inner { max-width: 1140px; margin: 0 auto; padding: 36px 24px 80px; }
@media (max-width: 600px) { .profile-view-inner { padding: 28px 16px 80px; } }

.profile-view-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
}
.profile-view-header::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.profile-view-title {
  font-size: .66rem; font-weight: 700; letter-spacing: .24em;
  text-transform: uppercase; color: var(--text-3); white-space: nowrap; margin: 0;
}
.profile-back-btn { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; flex-shrink: 0; background: var(--surface-1); }
/* order:1 places it after the divider line (::after) → far right of the header. */
.profile-share-btn { order: 1; display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; flex-shrink: 0; background: var(--surface-1); }

.profile-identity {
  display: flex; align-items: center; gap: 18px;
  padding: 22px; background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 16px;
  margin-bottom: 28px; box-shadow: var(--shadow-card);
}
.profile-avatar {
  font-size: 2.4rem; line-height: 1;
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 2px solid var(--border);
  border-radius: 50%; flex-shrink: 0;
}
.profile-identity-name {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem;
  letter-spacing: .04em; color: var(--text-1); line-height: 1.1;
}
.profile-identity-role { font-size: .78rem; color: var(--text-3); margin-top: 4px; }

/* Avatar frame wrap + level badge */
.profile-avatar-wrap {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; padding: 3px; flex-shrink: 0;
}
.profile-level-badge {
  position: absolute; bottom: -5px; right: -5px; z-index: 2;
  background: var(--gold); color: #1a1408;
  font-size: .6rem; font-weight: 800; letter-spacing: .02em;
  padding: 2px 6px; border-radius: 20px; border: 2px solid var(--surface-1);
  white-space: nowrap;
}
/* Thicker ring for the large profile avatar when framed */
.profile-identity .profile-avatar-wrap[class*="frame-"] { padding: 4px; }
[class*="frame-"] > .profile-avatar,
[class*="frame-"] > .house-top-avatar { border-color: var(--surface-1); color: #fff; }

/* ── FRAMES ──────────────────────────────────────────────────────────────────
   Each frame = a decorative conic ring (the wrap background) + a glow + a themed
   inner-avatar background. Some add textures (stars/dots/sheen), an SVG accent,
   or a subtle animation. Applies to both the big profile avatar and the mini
   leaderboard avatar. */

/* Metals — conic sheen + tinted inner */
.frame-bronze   { background: conic-gradient(from 45deg, #7a4e22, #cd7f32, #f0b27a, #a85b20, #7a4e22); box-shadow: 0 0 10px rgba(205,127,50,.4); }
/* .frame-bronze   > .profile-avatar, .frame-bronze > .house-top-avatar { background: radial-gradient(circle at 32% 26%, #5a4023, #241608); } */
.frame-silver   { background: conic-gradient(from 45deg, #8b93a4, #e8eaf0, #ffffff, #aeb4c2, #8b93a4); box-shadow: 0 0 11px rgba(205,210,225,.45); }
.frame-silver   > .profile-avatar, .frame-silver > .house-top-avatar { background: radial-gradient(circle at 32% 26%, #3a3f4a, #171a20); }
.frame-gold     { background: conic-gradient(from 45deg, #a87f1e, #f4d35e, #fff3b0, #e0b400, #a87f1e); box-shadow: 0 0 16px rgba(244,211,94,.55); }
.frame-gold     > .profile-avatar, .frame-gold > .house-top-avatar { background: radial-gradient(circle at 32% 26%, #4a3a10, #221a06); }

/* Ember — fiery, warm glow + pulse */
.frame-ember    { background: conic-gradient(from 90deg, #c0392b, #ff7a18, #ffcf6b, #ff5722, #c0392b); box-shadow: 0 0 16px rgba(255,90,30,.55); }
.frame-ember    > .profile-avatar, .frame-ember > .house-top-avatar { background: radial-gradient(circle at 50% 118%, #7a1e10, #2a0c08); }

/* Tide — water blues + shimmer */
.frame-tide     { background: conic-gradient(from 200deg, #0e4f6b, #36c5f0, #b8ecff, #1a6b8a, #0e4f6b); box-shadow: 0 0 14px rgba(54,197,240,.5); }
.frame-tide     > .profile-avatar, .frame-tide > .house-top-avatar { background: radial-gradient(circle at 35% 28%, #103a4a, #06181f); }

/* Grove — greens + foliage dots */
.frame-grove    { background: conic-gradient(from 120deg, #1d5e22, #27892b, #7bd389, #3aa53f, #1d5e22); box-shadow: 0 0 12px rgba(60,165,63,.45); }
.frame-grove    > .profile-avatar, .frame-grove > .house-top-avatar {
  background:
    radial-gradient(2px 2px at 28% 38%, rgba(170,255,170,.55), transparent),
    radial-gradient(1.5px 1.5px at 68% 64%, rgba(140,230,150,.5), transparent),
    radial-gradient(circle at 40% 30%, #1f5a25, #0b2a11);
}

/* Nebula — cosmic purples + starfield + slow spin */
.frame-nebula   { background: conic-gradient(from 0deg, #2a1a4a, #6b3d9a, #b06bff, #4a2a7a, #2a1a4a); box-shadow: 0 0 18px rgba(176,107,255,.6); }
.frame-nebula   > .profile-avatar, .frame-nebula > .house-top-avatar {
  background:
    radial-gradient(1.5px 1.5px at 22% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 70% 60%, #fff, transparent),
    radial-gradient(1px 1px at 48% 78%, #d8c6ff, transparent),
    radial-gradient(1px 1px at 80% 35%, #fff, transparent),
    radial-gradient(circle at 42% 34%, #3a2a6a, #15082c);
}

/* Aurora — animated multicolour shimmer */
.frame-aurora   { background: linear-gradient(120deg, #a1ffce, #b06bff, #36c5f0, #faffd1, #a1ffce); background-size: 300% 300%; box-shadow: 0 0 16px rgba(160,120,255,.5); }
.frame-aurora   > .profile-avatar, .frame-aurora > .house-top-avatar { background: radial-gradient(circle at 40% 30%, #16282a, #081414); }

/* Obsidian — dark glass with an edge sheen */
.frame-obsidian { background: conic-gradient(from 220deg, #14161d, #4a4f63, #20242f, #717892, #0f1014); box-shadow: 0 0 9px rgba(120,130,160,.32); }
.frame-obsidian > .profile-avatar, .frame-obsidian > .house-top-avatar { background: linear-gradient(135deg, #2a2e3a, #14161d 55%, #0a0b10); }

/* ── Frames pack 2 (added 2026-06) ─── mix of animated / static / unique ───── */

/* Magma — molten crimson→orange ring, ANIMATED pulsing heat glow */
.frame-magma    { background: conic-gradient(from 30deg, #2a0a06, #c0220f, #ff6a00, #ffb347, #c0220f, #2a0a06); box-shadow: 0 0 16px rgba(255,80,20,.55); }
.frame-magma    > .profile-avatar, .frame-magma > .house-top-avatar { background: radial-gradient(circle at 50% 120%, #5a1206, #1a0604); }

/* Glacier — crisp ice white→cyan, STATIC cold sheen */
.frame-glacier  { background: conic-gradient(from 210deg, #bfeaff, #ffffff, #7fd4ff, #cdeeff, #bfeaff); box-shadow: 0 0 14px rgba(150,220,255,.55); }
.frame-glacier  > .profile-avatar, .frame-glacier > .house-top-avatar { background: radial-gradient(circle at 35% 28%, #1b3a4a, #08161f); }

/* Toxic — radioactive neon green, ANIMATED irregular flicker (unique) */
.frame-toxic    { background: conic-gradient(from 0deg, #0a2a0a, #39ff14, #aaff00, #1aff6a, #0a2a0a); box-shadow: 0 0 16px rgba(80,255,60,.6); }
.frame-toxic    > .profile-avatar, .frame-toxic > .house-top-avatar { background: radial-gradient(circle at 40% 30%, #0c2a10, #03140a); }

/* Prism — full-spectrum rainbow ring, ANIMATED rotating sheen (unique) */
.frame-prism    { background: conic-gradient(from 0deg, #ff004c, #ff8a00, #ffe600, #14ff72, #00e0ff, #6a5cff, #ff00d4, #ff004c); box-shadow: 0 0 16px rgba(180,120,255,.55); }
.frame-prism    > .profile-avatar, .frame-prism > .house-top-avatar { background: radial-gradient(circle at 40% 30%, #14111f, #060409); }

/* Void — minimalist black with a faint violet rim, STATIC */
.frame-void     { background: conic-gradient(from 180deg, #0a0a12, #2a2440, #0a0a12, #1a1630, #0a0a12); box-shadow: 0 0 10px rgba(130,90,210,.4); }
.frame-void     > .profile-avatar, .frame-void > .house-top-avatar { background: radial-gradient(circle at 40% 30%, #15121f, #050406); }

/* ── Frames pack 3 (added 2026-06) ─── WILD animations ─────────────────────── */

/* Glitch — cyan/magenta cyber ring, ANIMATED chromatic RGB-split jitter */
.frame-glitch    { background: conic-gradient(from 0deg, #00eaff, #ff00d4, #08070d, #00eaff); box-shadow: 0 0 10px rgba(0,234,255,.45); }
.frame-glitch    > .profile-avatar, .frame-glitch > .house-top-avatar { background: radial-gradient(circle at 40% 30%, #0a1420, #050309); }

/* Heartbeat — crimson ring that BEATS (double-pulse scale + glow) */
.frame-heartbeat { background: conic-gradient(from 0deg, #ff2d55, #ff5e7e, #b3001b, #ff2d55); box-shadow: 0 0 12px rgba(255,45,85,.5); }
.frame-heartbeat > .profile-avatar, .frame-heartbeat > .house-top-avatar { background: radial-gradient(circle at 40% 30%, #3a0810, #160305); }

/* Plasma — electric purple/magenta/cyan, ANIMATED morphing gradient */
.frame-plasma    { background: linear-gradient(120deg, #7b2ff7, #f107a3, #00d4ff, #7b2ff7, #f107a3); background-size: 300% 300%; box-shadow: 0 0 16px rgba(180,60,255,.55); }
.frame-plasma    > .profile-avatar, .frame-plasma > .house-top-avatar { background: radial-gradient(circle at 40% 30%, #1a0a2a, #08040f); }

/* Strobe — hard-cut rainbow STROBE glow (cycles through the spectrum) */
.frame-strobe    { background: conic-gradient(from 0deg, #ffffff, #888, #ffffff); box-shadow: 0 0 14px rgba(255,255,255,.5); }
.frame-strobe    > .profile-avatar, .frame-strobe > .house-top-avatar { background: radial-gradient(circle at 40% 30%, #1a1a1f, #070709); }

/* Vortex — iridescent ring with a FAST spinning spiral overlay (profile only) */
.frame-vortex    { background: conic-gradient(from 0deg, #00e0ff, #6a5cff, #ff00d4, #00e0ff); box-shadow: 0 0 16px rgba(120,80,255,.55); }
.frame-vortex    > .profile-avatar, .frame-vortex > .house-top-avatar { background: radial-gradient(circle at 40% 30%, #0a0a1a, #050409); }

/* ── Avatar decorations ──────────────────────────────────────────────────────
   A separate cosmetic (e.g. a crown) layered over the avatar — independent of
   the frame. Supports inline SVG, images (incl. data URIs) and emoji. Renders on
   the large profile avatar and the mini avatars in the tables. */
.avatar-decoration {
  position: absolute; z-index: 3; pointer-events: none; line-height: 1;
  --dx: 0px; --dy: 0px; --ds: 1;         /* per-decoration nudge (px) + scale */
  /* --deco-k scales the WHOLE decoration (size + anchor + nudge) with the avatar
     so it stays aligned at every size. 1 = the 46px shop/creation-preview avatar
     where the teacher tunes the offsets; other contexts set their own factor. */
  --deco-k: 1;
  font-size: calc(22px * var(--ds) * var(--deco-k));   /* drives emoji + 1em svg/img sizing */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.avatar-decoration img, .avatar-decoration svg { display: block; height: 1em; width: auto; }
/* Each position anchors the element, then var(--dx)/var(--dy) nudge it precisely —
   anchors and nudge both scaled by --deco-k to track the avatar size. */
.avatar-decoration.deco-top        { top: calc(-16px * var(--deco-k)); left: 50%; transform: translate(calc(-50% + var(--dx) * var(--deco-k)), calc(var(--dy) * var(--deco-k))); }
.avatar-decoration.deco-top-right  { top: calc(-8px * var(--deco-k));  right: calc(-8px * var(--deco-k)); transform: translate(calc(var(--dx) * var(--deco-k)), calc(var(--dy) * var(--deco-k))); }
.avatar-decoration.deco-top-left   { top: calc(-8px * var(--deco-k));  left: calc(-8px * var(--deco-k));  transform: translate(calc(var(--dx) * var(--deco-k)), calc(var(--dy) * var(--deco-k))); }
.avatar-decoration.deco-left       { top: 50%;   left: calc(-13px * var(--deco-k)); transform: translate(calc(var(--dx) * var(--deco-k)), calc(-50% + var(--dy) * var(--deco-k))); }

/* Mini avatars in tables (≈30px): scale down proportionally; lighter shadow. */
.house-top-frame .avatar-decoration { --deco-k: .65; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
/* Large profile identity avatar (60px): scale up from the 46px reference. */
.profile-identity .avatar-decoration { --deco-k: 1.3; }

/* Motion — only when the user hasn't asked to reduce it */
@media (prefers-reduced-motion: no-preference) {
  .profile-identity .frame-nebula::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 0;
    background: conic-gradient(from 0deg, transparent, rgba(255,255,255,.35), transparent 30%);
    animation: frameSpin 7s linear infinite;
  }
  .profile-identity .frame-nebula > .profile-avatar { position: relative; z-index: 1; }
  .frame-aurora { animation: auroraShift 6s ease-in-out infinite; }
  .frame-ember  { animation: emberGlow 2.4s ease-in-out infinite; }
  .frame-magma  { animation: magmaPulse 2.2s ease-in-out infinite; }
  .frame-toxic  { animation: toxicPulse 2.2s ease-in-out infinite; }
  /* Prism: a rotating highlight sweep over the rainbow ring (avatar sits above it). */
  .profile-identity .frame-prism::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 0;
    background: conic-gradient(from 0deg, transparent, rgba(255,255,255,.55), transparent 25%);
    animation: frameSpin 3.5s linear infinite;
  }
  .profile-identity .frame-prism > .profile-avatar { position: relative; z-index: 1; }
  /* Frames pack 3 — wild */
  .frame-glitch    { animation: glitchJit .32s steps(2, end) infinite; }
  .frame-heartbeat { animation: heartBeat 1.4s ease-in-out infinite; }
  .frame-plasma    { animation: plasmaMorph 2.4s linear infinite; }
  .frame-strobe    { animation: strobe 1.4s steps(1, end) infinite; }
  .profile-identity .frame-vortex::before {
    content: ""; position: absolute; inset: -3px; border-radius: 50%; z-index: 0;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,.6) 40deg, transparent 90deg, rgba(0,234,255,.55) 180deg, transparent 230deg, rgba(255,0,212,.55) 320deg, transparent 360deg);
    animation: frameSpin 1.6s linear infinite;
  }
  .profile-identity .frame-vortex > .profile-avatar { position: relative; z-index: 1; }
}
@keyframes frameSpin  { to { transform: rotate(360deg); } }
@keyframes auroraShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes emberGlow  { 0%,100% { box-shadow: 0 0 12px rgba(255,90,30,.45); } 50% { box-shadow: 0 0 24px rgba(255,120,40,.8); } }
@keyframes magmaPulse  { 0%,100% { box-shadow: 0 0 12px rgba(255,70,20,.45); } 50% { box-shadow: 0 0 26px rgba(255,140,40,.9); } }
@keyframes toxicPulse {
  0%,100% { box-shadow: 0 0 12px rgba(80,255,60,.55); }
  30%     { box-shadow: 0 0 26px rgba(170,255,50,.95); }
  50%     { box-shadow: 0 0 14px rgba(80,255,60,.6); }
  70%     { box-shadow: 0 0 24px rgba(150,255,40,.9); }
}
@keyframes glitchJit {
  0%   { box-shadow: -3px 0 6px rgba(255,0,90,.7), 3px 0 6px rgba(0,234,255,.7); transform: translate(0, 0); }
  25%  { box-shadow: 3px 0 6px rgba(255,0,90,.7), -3px 0 6px rgba(0,234,255,.7); transform: translate(1px, -1px); }
  50%  { box-shadow: -2px 1px 6px rgba(255,0,90,.7), 2px -1px 6px rgba(0,234,255,.7); transform: translate(-1px, 1px); }
  75%  { box-shadow: 2px -1px 6px rgba(255,0,90,.7), -2px 1px 6px rgba(0,234,255,.7); transform: translate(1px, 0); }
  100% { box-shadow: -3px 0 6px rgba(255,0,90,.7), 3px 0 6px rgba(0,234,255,.7); transform: translate(0, 0); }
}
@keyframes heartBeat {
  0%,45%,100% { transform: scale(1);    box-shadow: 0 0 10px rgba(255,45,85,.45); }
  10%         { transform: scale(1.09); box-shadow: 0 0 22px rgba(255,70,110,.85); }
  20%         { transform: scale(1); }
  30%         { transform: scale(1.06); box-shadow: 0 0 16px rgba(255,60,100,.7); }
}
@keyframes plasmaMorph { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes strobe {
  0%   { box-shadow: 0 0 20px rgba(255,0,64,.95); }
  14%  { box-shadow: 0 0 20px rgba(255,128,0,.95); }
  28%  { box-shadow: 0 0 20px rgba(255,255,0,.95); }
  42%  { box-shadow: 0 0 20px rgba(0,255,80,.95); }
  57%  { box-shadow: 0 0 20px rgba(0,200,255,.95); }
  71%  { box-shadow: 0 0 20px rgba(80,80,255,.95); }
  85%  { box-shadow: 0 0 20px rgba(200,0,255,.95); }
  100% { box-shadow: 0 0 20px rgba(255,0,64,.95); }
}

/* ── Frames pack 4 (added 2026-06) ── PARTICLES (animated on the profile avatar) ──
   Base ring shows everywhere; the box-shadow particle clusters live behind the
   avatar and only render on the large .profile-identity avatar, gated by motion. */
.frame-sparks    { background: conic-gradient(from 90deg, #5a1e08, #ff7a18, #ffd089, #c0392b, #5a1e08); box-shadow: 0 0 12px rgba(255,110,30,.5); }
.frame-sparks    > .profile-avatar, .frame-sparks > .house-top-avatar { background: radial-gradient(circle at 50% 120%, #3a1206, #140503); }
.frame-fireflies { background: conic-gradient(from 120deg, #16351a, #6fd36f, #d9ff9e, #2e7d32, #16351a); box-shadow: 0 0 12px rgba(120,220,90,.45); }
.frame-fireflies > .profile-avatar, .frame-fireflies > .house-top-avatar { background: radial-gradient(circle at 40% 30%, #15301a, #06140a); }
.frame-snow      { background: conic-gradient(from 200deg, #2a4a5a, #bfe9ff, #ffffff, #6fb4d4, #2a4a5a); box-shadow: 0 0 12px rgba(180,225,255,.5); }
.frame-snow      > .profile-avatar, .frame-snow > .house-top-avatar { background: radial-gradient(circle at 40% 30%, #16323f, #07151c); }
.frame-bubbles   { background: conic-gradient(from 200deg, #0e4f6b, #36c5f0, #b8ecff, #1a6b8a, #0e4f6b); box-shadow: 0 0 12px rgba(54,197,240,.5); }
.frame-bubbles   > .profile-avatar, .frame-bubbles > .house-top-avatar { background: radial-gradient(circle at 35% 28%, #0c3140, #051319); }
.frame-stardust  { background: conic-gradient(from 0deg, #1a1040, #6b3d9a, #c79bff, #3a2070, #1a1040); box-shadow: 0 0 14px rgba(170,110,255,.55); }
.frame-stardust  > .profile-avatar, .frame-stardust > .house-top-avatar { background: radial-gradient(circle at 40% 30%, #140a2a, #060312); }

@media (prefers-reduced-motion: no-preference) {
  /* Particles render IN FRONT of the avatar (z-index 2) so they read clearly. */
  /* Sparks — embers rising */
  .profile-identity .frame-sparks > .profile-avatar { position: relative; z-index: 1; }
  .profile-identity .frame-sparks::before,
  .profile-identity .frame-sparks::after {
    content: ""; position: absolute; left: 50%; top: 82%; width: 3px; height: 3px;
    border-radius: 50%; background: #ffd089; z-index: 2; pointer-events: none;
    filter: drop-shadow(0 0 4px rgba(255,140,40,.95));
    box-shadow: -26px 0 0 #ff7a18, -14px 2px 0 #ffd089, -2px -2px 0 #ff944d, 12px 1px 0 #ff7a18, 24px -2px 0 #ffd089, 7px 4px 0 #ffae3b, -18px 5px 0 #ff944d;
    animation: sparkRise 1.7s linear infinite;
  }
  .profile-identity .frame-sparks::after { animation-delay: .85s; }
  /* Fireflies — twinkling in place */
  .profile-identity .frame-fireflies > .profile-avatar { position: relative; z-index: 1; }
  .profile-identity .frame-fireflies::before,
  .profile-identity .frame-fireflies::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px;
    border-radius: 50%; background: #eaffb0; z-index: 2; pointer-events: none;
    filter: drop-shadow(0 0 5px rgba(150,255,70,.95));
    box-shadow: -30px -16px 0 #c6ff7a, 28px -12px 0 #aef06a, -20px 18px 0 #d9ff9e, 24px 20px 0 #b9f57e, 0 -32px 0 #cdff88, 34px 4px 0 #aef06a, -34px 2px 0 #d9ff9e;
    animation: twinkle 2.2s ease-in-out infinite;
  }
  .profile-identity .frame-fireflies::after {
    box-shadow: -16px -24px 0 #c6ff7a, 16px 24px 0 #aef06a, 32px -18px 0 #d9ff9e, -32px 14px 0 #b9f57e, 9px 30px 0 #cdff88, -9px -30px 0 #aef06a;
    animation-delay: 1.1s;
  }
  /* Snow — falling flakes (wider spread, brighter, longer fall) */
  .profile-identity .frame-snow > .profile-avatar { position: relative; z-index: 1; }
  .profile-identity .frame-snow::before,
  .profile-identity .frame-snow::after {
    content: ""; position: absolute; left: 50%; top: 4%; width: 3px; height: 3px;
    border-radius: 50%; background: #fff; z-index: 2; pointer-events: none;
    filter: drop-shadow(0 0 4px rgba(190,230,255,.95));
    box-shadow: -30px 0 0 #fff, -18px -3px 0 #eaf6ff, -6px 2px 0 #fff, 8px -2px 0 #dff0ff, 20px 1px 0 #fff, 32px -1px 0 #eaf6ff, 0 4px 0 #fff;
    animation: snowFall 3s linear infinite;
  }
  .profile-identity .frame-snow::after { animation-delay: 1.5s; }
  /* Bubbles — rising */
  .profile-identity .frame-bubbles > .profile-avatar { position: relative; z-index: 1; }
  .profile-identity .frame-bubbles::before,
  .profile-identity .frame-bubbles::after {
    content: ""; position: absolute; left: 50%; top: 84%; width: 4px; height: 4px;
    border-radius: 50%; background: rgba(210,245,255,.95); z-index: 2; pointer-events: none;
    filter: drop-shadow(0 0 4px rgba(90,210,255,.85));
    box-shadow: -22px 2px 0 rgba(180,235,255,.85), 16px 0 0 rgba(150,225,255,.8), -9px 5px 0 rgba(200,240,255,.8), 24px 4px 0 rgba(160,225,255,.75);
    animation: bubbleRise 2.8s ease-in infinite;
  }
  .profile-identity .frame-bubbles::after { animation-delay: 1.4s; }
  /* Stardust — a ring of stars orbiting the avatar */
  .profile-identity .frame-stardust > .profile-avatar { position: relative; z-index: 1; }
  .profile-identity .frame-stardust::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px;
    border-radius: 50%; background: #fff; z-index: 2; pointer-events: none;
    filter: drop-shadow(0 0 4px rgba(200,150,255,.9));
    box-shadow: 0 -36px 0 #fff, 25px -25px 0 #e6d8ff, 36px 0 0 #fff, 25px 25px 0 #c79bff, 0 36px 0 #fff, -25px 25px 0 #e6d8ff, -36px 0 0 #fff, -25px -25px 0 #c79bff;
    animation: frameSpin 9s linear infinite;
  }
}
@keyframes sparkRise { 0% { transform: translate(-50%, 0) scale(1); opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(-50%, -46px) scale(.4); opacity: 0; } }
@keyframes twinkle   { 0%,100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes snowFall  { 0% { transform: translate(-50%, -4px); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translate(-44%, 52px); opacity: 0; } }
@keyframes bubbleRise{ 0% { transform: translate(-50%, 0) scale(.6); opacity: 0; } 20% { opacity: .95; } 85% { opacity: .8; } 100% { transform: translate(-50%, -50px) scale(1.1); opacity: 0; } }

/* ── PROFILE-CARD FRAMES ──────────────────────────────────────────────────────
   Decorate the whole identity card (not the avatar). Range from a simple accent
   border to tinted backgrounds, gradient borders, glows and animations. Gradient
   borders use the padding-box/border-box double-background technique so the card
   keeps its own background. Applied as a class on .profile-identity. */
.pframe-line  { border: 2px solid #6f7bff; }
.pframe-tint  { border: 1px solid #7a6ad6; background: color-mix(in srgb, #7a6ad6 9%, var(--surface-1)); }
.pframe-gild  { border: 2px solid #d4a017; box-shadow: 0 0 18px rgba(212,160,23,.32), var(--shadow-card); }
.pframe-ember { border: 2px solid #ff5722; box-shadow: 0 0 16px rgba(255,90,30,.38), var(--shadow-card); }
.pframe-neon  { border: 2px solid #b06bff; box-shadow: 0 0 14px rgba(176,107,255,.5), var(--shadow-card); }

.pframe-tide {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface-1), var(--surface-1)) padding-box,
    linear-gradient(135deg, #0e4f6b, #36c5f0, #b8ecff, #1a6b8a) border-box;
  box-shadow: 0 0 14px rgba(54,197,240,.26), var(--shadow-card);
}
.pframe-aurora {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface-1), var(--surface-1)) padding-box,
    linear-gradient(120deg, #a1ffce, #b06bff, #36c5f0, #faffd1, #a1ffce) border-box;
  background-size: 100% 100%, 300% 300%;
  box-shadow: 0 0 16px rgba(160,120,255,.3), var(--shadow-card);
}
.pframe-royal {
  border: 2px solid transparent;
  background:
    linear-gradient(color-mix(in srgb, #6b3d9a 10%, var(--surface-1)), color-mix(in srgb, #6b3d9a 10%, var(--surface-1))) padding-box,
    linear-gradient(135deg, #f4d35e, #b06bff, #6b3d9a, #f4d35e) border-box;
  box-shadow: 0 6px 26px rgba(107,61,154,.28), var(--shadow-card);
}

/* ── Profile-card frames pack 2 (added 2026-06) ── animated / static / unique ── */
/* Magma — molten gradient border, ANIMATED heat glow */
.pframe-magma {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface-1), var(--surface-1)) padding-box,
    linear-gradient(135deg, #5a1206, #ff6a00, #ffb347, #c0220f) border-box;
  box-shadow: 0 0 16px rgba(255,90,20,.32), var(--shadow-card);
}
/* Frost — icy cyan border + faint tint, STATIC */
.pframe-frost  { border: 2px solid #7fd4ff; background: color-mix(in srgb, #7fd4ff 8%, var(--surface-1)); box-shadow: 0 0 14px rgba(127,212,255,.28), var(--shadow-card); }
/* Toxic — neon green, ANIMATED pulse */
.pframe-toxic  { border: 2px solid #39ff14; box-shadow: 0 0 14px rgba(80,255,60,.5), var(--shadow-card); }
/* Rainbow — full-spectrum gradient border, ANIMATED slide (unique) */
.pframe-rainbow {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface-1), var(--surface-1)) padding-box,
    linear-gradient(90deg, #ff004c, #ff8a00, #ffe600, #14ff72, #00e0ff, #6a5cff, #ff00d4, #ff004c) border-box;
  background-size: 100% 100%, 300% 100%;
  box-shadow: 0 0 16px rgba(180,120,255,.3), var(--shadow-card);
}
/* Shadow — dark border with inset sheen, STATIC */
.pframe-shadow { border: 2px solid #2a2e3a; box-shadow: inset 0 0 12px rgba(120,130,160,.18), 0 0 8px rgba(20,22,30,.6), var(--shadow-card); }

/* ── Profile-card frames pack 3 (added 2026-06) ── WILD ─────────────────────── */
/* RGB — chromatic-aberration glitch shadow */
.pframe-rgb      { border: 2px solid #1a1d27; }
/* Spectrum — fast full-spectrum border slide */
.pframe-spectrum {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface-1), var(--surface-1)) padding-box,
    linear-gradient(90deg, #ff004c, #ff8a00, #ffe600, #14ff72, #00e0ff, #6a5cff, #ff00d4, #ff004c) border-box;
  background-size: 100% 100%, 300% 100%;
  box-shadow: 0 0 16px rgba(180,120,255,.3), var(--shadow-card);
}
/* Pulse — fast neon glow heartbeat */
.pframe-pulse    { border: 2px solid #b06bff; }
/* Siren — alternating red/blue police lights */
.pframe-siren {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface-1), var(--surface-1)) padding-box,
    linear-gradient(90deg, #ff1a1a, #1a4dff) border-box;
}
/* Vapor — chill vaporwave pink/cyan slide */
.pframe-vapor {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface-1), var(--surface-1)) padding-box,
    linear-gradient(120deg, #ff6ad5, #8c52ff, #5cd0ff, #ff6ad5) border-box;
  background-size: 100% 100%, 200% 100%;
  box-shadow: 0 0 16px rgba(255,106,213,.28), var(--shadow-card);
}

@media (prefers-reduced-motion: no-preference) {
  .pframe-aurora { animation: auroraShift 7s ease-in-out infinite; }
  .pframe-ember  { animation: pframeEmberGlow 2.6s ease-in-out infinite; }
  .pframe-neon   { animation: pframeNeon 1.9s ease-in-out infinite; }
  .pframe-magma   { animation: pframeMagmaGlow 2.6s ease-in-out infinite; }
  .pframe-toxic   { animation: pframeToxic 1.9s ease-in-out infinite; }
  .pframe-rainbow { animation: auroraShift 5s ease-in-out infinite; }
  .pframe-rgb      { animation: rgbSplit .4s steps(2, end) infinite; }
  .pframe-spectrum { animation: spectrumSlide 2.5s linear infinite; }
  .pframe-pulse    { animation: pframePulse 1s ease-in-out infinite; }
  .pframe-siren    { animation: siren .7s steps(1, end) infinite; }
  .pframe-vapor    { animation: vaporShift 6s ease-in-out infinite; }
}
@keyframes pframeEmberGlow { 0%,100% { box-shadow: 0 0 12px rgba(255,90,30,.3), var(--shadow-card); } 50% { box-shadow: 0 0 26px rgba(255,120,40,.6), var(--shadow-card); } }
@keyframes pframeNeon { 0%,100% { box-shadow: 0 0 10px rgba(176,107,255,.4), var(--shadow-card); } 50% { box-shadow: 0 0 22px rgba(176,107,255,.85), var(--shadow-card); } }
@keyframes pframeMagmaGlow { 0%,100% { box-shadow: 0 0 12px rgba(255,90,20,.28), var(--shadow-card); } 50% { box-shadow: 0 0 26px rgba(255,140,40,.55), var(--shadow-card); } }
@keyframes pframeToxic { 0%,100% { box-shadow: 0 0 10px rgba(80,255,60,.4), var(--shadow-card); } 50% { box-shadow: 0 0 22px rgba(160,255,40,.85), var(--shadow-card); } }
@keyframes rgbSplit {
  0%   { box-shadow: -4px 0 0 rgba(255,0,90,.5), 4px 0 0 rgba(0,234,255,.5), var(--shadow-card); }
  33%  { box-shadow: 4px 0 0 rgba(255,0,90,.5), -4px 0 0 rgba(0,234,255,.5), var(--shadow-card); }
  66%  { box-shadow: -3px 2px 0 rgba(255,0,90,.5), 3px -2px 0 rgba(0,234,255,.5), var(--shadow-card); }
  100% { box-shadow: -4px 0 0 rgba(255,0,90,.5), 4px 0 0 rgba(0,234,255,.5), var(--shadow-card); }
}
@keyframes spectrumSlide { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes pframePulse { 0%,100% { box-shadow: 0 0 8px rgba(176,107,255,.35), var(--shadow-card); } 50% { box-shadow: 0 0 26px rgba(176,107,255,.9), var(--shadow-card); } }
@keyframes siren {
  0%   { box-shadow: -9px 0 18px rgba(255,30,30,.75), 9px 0 18px rgba(40,90,255,.45), var(--shadow-card); }
  50%  { box-shadow: 9px 0 18px rgba(255,30,30,.45), -9px 0 18px rgba(40,90,255,.75), var(--shadow-card); }
  100% { box-shadow: -9px 0 18px rgba(255,30,30,.75), 9px 0 18px rgba(40,90,255,.45), var(--shadow-card); }
}
@keyframes vaporShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ── Profile-card frames pack 4 (added 2026-06) ── PARTICLES ───────────────────
   A particle field painted on a ::before overlay, clipped to the card via
   border-radius: inherit (so dots never spill past the rounded corners). Card
   content is lifted above it. Only renders when motion is allowed. */
.pframe-starfield { position: relative; border: 1px solid #3a2f6a; box-shadow: var(--shadow-card); }
.pframe-embers    { position: relative; border: 1px solid #5a2a12; box-shadow: 0 0 12px rgba(255,100,30,.18), var(--shadow-card); }
.pframe-confetti  { position: relative; border: 1px solid #3a3550; box-shadow: var(--shadow-card); }
.pframe-glitter   { position: relative; border: 1px solid #5a4a20; box-shadow: 0 0 12px rgba(244,211,94,.18), var(--shadow-card); }
.pframe-fireflies { position: relative; border: 1px solid #243a22; box-shadow: 0 0 12px rgba(120,220,90,.16), var(--shadow-card); }
.pframe-starfield > *, .pframe-embers > *, .pframe-confetti > *, .pframe-glitter > *, .pframe-fireflies > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
  .pframe-starfield::before, .pframe-embers::before, .pframe-confetti::before, .pframe-glitter::before, .pframe-fireflies::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background-repeat: no-repeat;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));   /* soft halo so dots read on light surfaces */
  }
  .pframe-starfield::before {
    background:
      radial-gradient(2.5px 2.5px at 10% 30%, #fff, transparent), radial-gradient(2.5px 2.5px at 26% 70%, #e7dcff, transparent),
      radial-gradient(2px 2px at 44% 22%, #fff, transparent),     radial-gradient(3px 3px at 60% 55%, #c79bff, transparent),
      radial-gradient(2px 2px at 75% 36%, #fff, transparent),     radial-gradient(2.5px 2.5px at 88% 70%, #e0d0ff, transparent),
      radial-gradient(2px 2px at 52% 86%, #fff, transparent),     radial-gradient(2.5px 2.5px at 34% 48%, #fff, transparent);
    animation: pTwinkle 3.2s ease-in-out infinite;
  }
  .pframe-embers::before {
    background:
      radial-gradient(3px 3px at 15% 92%, #ffbe5c, transparent),  radial-gradient(2.5px 2.5px at 35% 92%, #ff8a2b, transparent),
      radial-gradient(3px 3px at 55% 92%, #ffd089, transparent),  radial-gradient(2.5px 2.5px at 72% 92%, #ffa45d, transparent),
      radial-gradient(3px 3px at 88% 92%, #ff8a2b, transparent),  radial-gradient(2.5px 2.5px at 45% 92%, #ffbe5c, transparent);
    filter: drop-shadow(0 0 5px rgba(255,120,30,.9));
    animation: pRise 3.4s linear infinite;
  }
  .pframe-confetti::before {
    background:
      radial-gradient(3px 3px at 12% 4%, #ff4d6d, transparent),   radial-gradient(3px 3px at 30% 4%, #4dd2ff, transparent),
      radial-gradient(3px 3px at 48% 4%, #ffe14d, transparent),   radial-gradient(3px 3px at 66% 4%, #6bff9e, transparent),
      radial-gradient(3px 3px at 84% 4%, #c77dff, transparent),   radial-gradient(3px 3px at 92% 4%, #ff8a4d, transparent);
    animation: pFall 3.8s linear infinite;
  }
  .pframe-glitter::before {
    background:
      radial-gradient(2.5px 2.5px at 18% 25%, #fff6c2, transparent), radial-gradient(2.5px 2.5px at 40% 60%, #ffe27a, transparent),
      radial-gradient(2px 2px at 58% 30%, #fff, transparent),        radial-gradient(3px 3px at 74% 65%, #f4d35e, transparent),
      radial-gradient(2px 2px at 86% 40%, #fff6c2, transparent),     radial-gradient(2.5px 2.5px at 30% 82%, #ffe27a, transparent);
    filter: drop-shadow(0 0 4px rgba(255,220,110,.9));
    animation: pTwinkle 1.8s ease-in-out infinite;
  }
  .pframe-fireflies::before {
    background:
      radial-gradient(3px 3px at 16% 40%, #d4ff8a, transparent),  radial-gradient(2.5px 2.5px at 38% 75%, #b8f56a, transparent),
      radial-gradient(3px 3px at 60% 35%, #e3ffae, transparent),  radial-gradient(2.5px 2.5px at 80% 68%, #c4ff8e, transparent),
      radial-gradient(2.5px 2.5px at 70% 18%, #d6ff96, transparent), radial-gradient(3px 3px at 26% 60%, #b8f56a, transparent);
    filter: drop-shadow(0 0 5px rgba(150,255,80,.85));
    animation: pTwinkle 2.6s ease-in-out infinite;
  }
}
@keyframes pTwinkle { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes pRise    { 0% { transform: translateY(6px);  opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-26px); opacity: 0; } }
@keyframes pFall    { 0% { transform: translateY(-6px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(26px);  opacity: 0; } }

/* Identity extras: title chip, rank line, XP bar, motto */
.profile-identity-title {
  display: inline-block; margin-top: 5px; padding: 2px 9px; border-radius: 20px;
  background: rgba(212,160,23,.14); color: var(--gold);
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
}
/* Role badges (prefect / research seedbed) */
.profile-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.profile-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 20px;
  font-size: .72rem; font-weight: 700; letter-spacing: .01em;
  border: 1px solid transparent;
}
.profile-badge-prefect { background: rgba(212,160,23,.16); color: var(--gold);   border-color: rgba(212,160,23,.3); }
.profile-badge-seedbed { background: rgba(54,197,240,.14); color: #36c5f0;       border-color: rgba(54,197,240,.3); }
[data-theme="light"] .profile-badge-seedbed { color: #1a7fa0; }
.profile-badge-graduate { background: rgba(167,139,250,.16); color: #a78bfa;     border-color: rgba(167,139,250,.32); }
[data-theme="light"] .profile-badge-graduate { color: #6d4bd1; }

.profile-rank-line { font-size: .8rem; color: var(--text-2); margin-top: 6px; font-weight: 600; }

/* Multicoin wallet chip (shop currency) */
.profile-coins {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 8px; padding: 3px 11px; border-radius: 20px;
  font-size: .78rem; font-weight: 600; color: var(--text-2);
  background: rgba(212,160,23,.12); border: 1px solid rgba(212,160,23,.28);
}
.profile-coins strong { color: var(--gold); font-weight: 800; }
.profile-coins .coin-icon { font-size: .92rem; line-height: 1; }

.profile-xp { margin-top: 8px; max-width: 340px; }
.profile-xp-track { height: 7px; background: var(--surface-3); border-radius: 20px; overflow: hidden; }
.profile-xp-fill { height: 100%; background: linear-gradient(90deg, var(--gold), #f4d35e); border-radius: 20px; transition: width .5s ease; }
.profile-xp-label { font-size: .68rem; color: var(--text-3); margin-top: 4px; }
.profile-identity-motto { font-size: .82rem; color: var(--text-2); font-style: italic; margin-top: 8px; }

/* Personalization (own profile) + cosmetics modal */
.customize-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.customize-row-avatar { align-items: flex-start; }
.customize-label { width: 64px; flex-shrink: 0; font-size: .78rem; font-weight: 600; color: var(--text-2); }
.customize-row .form-input { flex: 1; }
.customize-readonly { flex: 1; font-size: .85rem; color: var(--text-3); }
.customize-note { font-size: .73rem; color: var(--text-3); font-style: italic; margin-top: 4px; }
.cosmetics-form { margin-top: 8px; }

/* Avatar emoji picker */
.avatar-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.avatar-opt {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  transition: transform .12s, border-color .12s, background .12s;
}
.avatar-opt:hover { background: var(--surface-3); transform: translateY(-2px); }
.avatar-opt.selected { border-color: var(--gold); background: rgba(212,160,23,.14); box-shadow: 0 0 0 1px var(--gold) inset; }
.avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* Top 10 list inside the house modal */
.house-top-list { display: flex; flex-direction: column; gap: 2px; }
.house-top-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 6px; border: none; background: none; cursor: pointer;
  border-radius: 8px; text-align: left; color: inherit; transition: background .15s;
}
.house-top-row:hover { background: var(--surface-2); }
.house-top-rank { width: 20px; flex-shrink: 0; text-align: center; font-family: 'Bebas Neue', sans-serif; font-size: 1rem; color: var(--text-3); }
.house-top-frame { padding: 2px; }
.house-top-avatar {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 50%; font-size: 1rem;
}
.house-top-info { flex: 1; min-width: 0; }
.house-top-name { display: block; font-weight: 600; font-size: .86rem; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.house-top-sub { display: block; font-size: .72rem; color: var(--text-3); }
.house-top-pts { flex-shrink: 0; font-family: 'Bebas Neue', sans-serif; font-size: 1.05rem; color: var(--text-1); }
.house-top-pts-label { font-size: .6rem; color: var(--text-3); margin-left: 3px; }

.profile-block { margin-bottom: 28px; }
.profile-block-title {
  font-size: .66rem; font-weight: 700; letter-spacing: .24em;
  text-transform: uppercase; color: var(--text-3);
  margin-bottom: 14px; padding: 0; border-bottom: none;
  display: flex; align-items: center; gap: 12px;
}
.profile-block-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* Profile house card */
.profile-house-card {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow-card);
}
.phc-stripe { height: 5px; }
.phc-body { padding: 20px 22px; }
.phc-top { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.phc-icon { font-size: 4rem; line-height: 1; flex-shrink: 0; }
.phc-top-info {}
.phc-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; letter-spacing: .04em; line-height: 1; }
.phc-motto { font-size: .8rem; color: var(--text-3); font-style: italic; margin-top: 4px; }
.phc-affinity { font-size: .78rem; color: var(--text-2); margin-top: 6px; }
.phc-stats {
  display: flex; gap: 20px; flex-wrap: wrap;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 13px 18px; margin-bottom: 18px;
}
.phc-stat-val { font-family: 'Bebas Neue', sans-serif; font-size: 1.7rem; line-height: 1; letter-spacing: .04em; }
.phc-stat-key { font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-top: 3px; }
.phc-section { margin-bottom: 16px; }
.phc-section-title {
  font-weight: 700; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.phc-text { font-size: .87rem; color: var(--text-2); line-height: 1.7; }
.phc-strengths { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.phc-strengths li {
  display: flex; align-items: center; gap: 10px;
  font-size: .85rem; color: var(--text-2);
  padding: 9px 12px; background: var(--surface-2);
  border-radius: 6px; border: 1px solid var(--border);
}

/* Achievements */
.profile-achievements {
  display: flex; flex-direction: column;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-card);
}
.achievement-card {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 20px; transition: background .15s;
}
.achievement-card + .achievement-card { border-top: 1px solid var(--border); }
.achievement-icon { font-size: 1.5rem; line-height: 1; flex-shrink: 0; width: 30px; text-align: center; }
.achievement-info { flex: 1; }
.achievement-label { font-size: .87rem; font-weight: 600; color: var(--text-1); }
.achievement-desc { font-size: .75rem; color: var(--text-3); margin-top: 2px; }
/* Secret achievement marker (shown once unlocked) */
.achievement-secret {
  display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 20px;
  font-size: .62rem; font-weight: 700; vertical-align: middle;
  background: rgba(139,124,255,.14); color: #8b7cff; border: 1px solid rgba(139,124,255,.3);
}
.achievement-card.is-secret.unlocked .achievement-icon { filter: drop-shadow(0 0 6px rgba(139,124,255,.45)); }
.achievement-badge { font-size: .85rem; flex-shrink: 0; color: var(--text-3); }
/* Locked: muted & desaturated, description hidden (omitted in JS) */
.achievement-card.locked { opacity: .6; }
.achievement-card.locked .achievement-icon  { filter: grayscale(1); }
.achievement-card.locked .achievement-label { color: var(--text-3); font-weight: 500; }

/* Teacher self-preview toggle in the profile achievements list */
.ach-toggle-note {
  font-size: .73rem; color: var(--text-3); font-style: italic;
  padding: 10px 20px 4px;
}
.ach-toggle-btn {
  flex-shrink: 0; padding: 5px 11px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-2); font-size: .72rem; font-weight: 600;
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.ach-toggle-btn:hover { background: var(--surface-3); color: var(--text-1); }
.ach-toggle-btn.is-on {
  background: rgba(202,138,4,.12); border-color: rgba(202,138,4,.4); color: var(--gold);
}

/* Personalization placeholder */
.profile-placeholder-card {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px; color: var(--text-3);
  font-size: .86rem; font-style: italic;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-card);
}

/* ── Profile: RPG attributes (radar) ──────────────────────────────────────── */
.profile-attributes {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 20px; box-shadow: var(--shadow-card);
}
.attr-layout { display: flex; gap: 22px; align-items: center; }
.attr-chart { flex: 0 0 300px; max-width: 300px; }
.attr-detail { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }

.radar-svg { width: 100%; height: auto; display: block; overflow: visible; }
.radar-grid  { fill: none; stroke: var(--border); stroke-width: 1; }
.radar-spoke { stroke: var(--border); stroke-width: 1; }
.radar-area  { fill-opacity: .22; stroke-width: 2; stroke-linejoin: round; }
.radar-dot   { stroke: var(--surface-1); stroke-width: 1.5; }
.radar-axis-label { font-size: 11px; font-weight: 700; fill: var(--text-2); }
.radar-axis-val   { font-size: 11px; font-weight: 800; }

/* ── Season performance chart (same visual language as the radar) ─────────────── */
.profile-seasons {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 20px; box-shadow: var(--shadow-card);
}
.season-chart { width: 100%; max-width: 480px; margin: 0 auto; }
.season-svg { width: 100%; height: auto; display: block; overflow: visible; }
.season-grid { stroke: var(--border); stroke-width: 1; }
.season-bar { cursor: pointer; }
.season-hit { fill: transparent; }
.season-bar-rect { fill-opacity: .24; stroke-width: 2; stroke-linejoin: round; transition: fill-opacity .15s ease; }
.season-bar:hover .season-bar-rect,
.season-bar:focus-visible .season-bar-rect { fill-opacity: .45; }
.season-bar:focus { outline: none; }
.season-bar.is-current .season-bar-rect { stroke-dasharray: 4 3; }
.season-bar-val   { font-size: 12px; font-weight: 800; }
.season-bar-label { font-size: 11px; font-weight: 700; fill: var(--text-2); }
.season-bar-now   { font-size: 9px; font-weight: 800; fill: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.season-hint { margin: 12px 0 0; font-size: .76rem; color: var(--text-3); text-align: center; font-style: italic; }

/* Per-season achievements modal */
.season-modal-list { display: flex; flex-direction: column; gap: 8px; }
.season-modal-empty { color: var(--text-3); font-style: italic; padding: 10px 2px; text-align: center; }

/* Available-points header */
.attr-pool { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.attr-pool-badge {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; letter-spacing: .04em;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  border-radius: 8px; padding: 1px 12px; white-space: nowrap;
}
.attr-pool-text { font-size: .8rem; color: var(--text-2); }
.attr-pool-empty .attr-pool-text { color: var(--text-3); font-style: italic; }
/* Teacher free respec button (infinite pool) */
.attr-reset-btn {
  margin-left: auto; flex: 0 0 auto; padding: 3px 10px; border-radius: 7px;
  background: var(--surface-3); color: var(--text-2);
  border: 1px solid var(--border); font-size: .76rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: background .15s, color .15s;
}
.attr-reset-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--text-1); }
.attr-reset-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Per-axis rows */
.attr-rows { display: flex; flex-direction: column; gap: 9px; }
.attr-row { display: flex; align-items: center; gap: 10px; }
.attr-row-label { flex: 0 0 104px; font-size: .82rem; font-weight: 600; color: var(--text-1); white-space: nowrap; }
.attr-row-bar {
  flex: 1; height: 7px; border-radius: 20px; background: var(--surface-3);
  overflow: hidden; min-width: 40px;
}
.attr-row-fill { display: block; height: 100%; border-radius: 20px; transition: width .35s cubic-bezier(.22,.9,.3,1); }
.attr-row-val {
  flex: 0 0 auto; font-family: 'Bebas Neue', sans-serif; font-size: 1.05rem;
  letter-spacing: .03em; color: var(--text-1); min-width: 40px; text-align: right;
}
.attr-row-max { font-size: .75rem; color: var(--text-3); font-family: system-ui, sans-serif; }
/* Per-axis step controls: subir/bajar el borrador sin confirmar. */
.attr-row-ctrls { flex: 0 0 auto; display: flex; gap: 5px; }
.attr-step-btn {
  width: 26px; height: 26px; border-radius: 7px; padding: 0;
  background: var(--surface-3); color: var(--text-2);
  border: 1px solid var(--border); font-size: 1.1rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .1s, color .15s, border-color .15s;
}
.attr-step-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--text-1); border-color: var(--border-hi); }
.attr-step-btn:active:not(:disabled) { transform: scale(.9); }
.attr-step-btn:disabled { opacity: .3; cursor: not-allowed; }
.attr-step-add { background: rgba(212,160,23,.12); color: var(--gold); border-color: rgba(212,160,23,.3); }
.attr-step-add:hover:not(:disabled) { background: rgba(212,160,23,.26); color: var(--gold); border-color: rgba(212,160,23,.45); }

/* Marca del delta pendiente (sin confirmar) sobre el valor del eje. */
.attr-row-pending {
  font-family: system-ui, sans-serif; font-size: .72rem; font-weight: 700;
  color: var(--gold); margin-left: 4px; vertical-align: 1px;
}
.attr-row.has-pending .attr-row-val { color: var(--gold); }

/* Barra de confirmación del borrador. */
.attr-confirm {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
  padding: 11px 14px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border-hi);
}
.attr-confirm-text { flex: 1; font-size: .82rem; color: var(--text-2); }
.attr-confirm-text strong {
  color: var(--gold); font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem; letter-spacing: .02em;
}
.attr-confirm-cancel {
  flex: 0 0 auto; padding: 6px 13px; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--text-2); border: 1px solid var(--border);
  font-size: .78rem; font-weight: 600; transition: background .15s, color .15s, border-color .15s;
}
.attr-confirm-cancel:hover { background: var(--surface-3); color: var(--text-1); border-color: var(--border-hi); }
.attr-confirm-btn {
  flex: 0 0 auto; padding: 6px 16px; border-radius: 8px; cursor: pointer;
  background: var(--red); color: #fff; border: 1px solid var(--red);
  font-size: .78rem; font-weight: 800; transition: background .15s, box-shadow .15s, transform .1s;
}
.attr-confirm-btn:hover { background: var(--red-dark); box-shadow: var(--shadow-red); }
.attr-confirm-btn:active { transform: scale(.97); }

@media (max-width: 620px) {
  .attr-layout { flex-direction: column; gap: 10px; }
  .attr-chart { flex-basis: auto; max-width: 280px; width: 100%; }
  .attr-detail { width: 100%; }
}

/* Attribute-points chip in the achievements management list */
.ach-mgmt-axis {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.05rem; letter-spacing: .04em;
  color: var(--accent, #8b7cff);
  background: color-mix(in srgb, var(--accent, #8b7cff) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #8b7cff) 30%, transparent);
  border-radius: 6px; padding: 2px 9px; flex-shrink: 0; white-space: nowrap;
}

/* ── Profile: projects / awards / certifications ──────────────────────────── */
.profile-items { display: flex; flex-direction: column; gap: 18px; }
.item-section { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow-card); }
.item-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.item-section-title { font-size: .82rem; font-weight: 700; color: var(--text-1); letter-spacing: .02em; }
.item-add-btn {
  flex-shrink: 0; padding: 4px 12px; border-radius: 8px; cursor: pointer;
  font-size: .76rem; font-weight: 700;
  background: color-mix(in srgb, #8b7cff 14%, transparent); color: #8b7cff;
  border: 1px solid color-mix(in srgb, #8b7cff 32%, transparent);
  transition: background .15s, transform .1s;
}
.item-add-btn:hover { background: color-mix(in srgb, #8b7cff 24%, transparent); }
.item-add-btn:active { transform: scale(.95); }

.item-list { display: flex; flex-direction: column; gap: 8px; }
.item-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px;
}
.item-row.is-pending { border-style: dashed; border-color: var(--border-hi); }
.item-info { flex: 1; min-width: 0; }
.item-name {
  font-size: .87rem; font-weight: 600; color: var(--text-1);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.item-meta-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; }
.item-entity { font-size: .75rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Asignatura chip (proyectos de aula) */
.item-subject {
  flex-shrink: 0; font-size: .68rem; font-weight: 600; white-space: nowrap;
  padding: 1px 8px; border-radius: 20px;
  background: color-mix(in srgb, #8b7cff 14%, transparent); color: #8b7cff;
  border: 1px solid color-mix(in srgb, #8b7cff 30%, transparent);
}
/* Distinción otorgada por un docente (Expo Multimedia, etc.) */
.item-distinction {
  font-size: .66rem; font-weight: 700; white-space: nowrap;
  padding: 1px 8px; border-radius: 20px;
  background: rgba(212,160,23,.16); color: var(--gold); border: 1px solid rgba(212,160,23,.34);
}
/* Teacher inline distinction picker */
.item-dist-select {
  margin-top: 7px; max-width: 100%; font-size: .73rem;
  padding: 4px 8px; border-radius: 7px;
  background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border);
  cursor: pointer; transition: border-color .15s;
}
.item-dist-select:hover { border-color: var(--border-hi); }
.item-status {
  font-size: .62rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  padding: 1px 8px; border-radius: 20px;
  background: rgba(212,160,23,.16); color: var(--gold); border: 1px solid rgba(212,160,23,.3);
}
.item-link {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-3); color: var(--text-2); text-decoration: none;
  font-size: 1rem; border: 1px solid var(--border); transition: background .15s, color .15s;
}
.item-link:hover { background: var(--surface-1); color: var(--text-1); border-color: var(--border-hi); }
.item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.item-btn {
  padding: 4px 10px; border-radius: 7px; cursor: pointer;
  font-size: .74rem; font-weight: 700; border: 1px solid transparent;
  transition: filter .15s, transform .1s;
}
.item-btn:active { transform: scale(.94); }
.item-approve { background: rgba(34,197,94,.14); color: var(--green); border-color: rgba(34,197,94,.3); }
.item-approve:hover { filter: brightness(1.15); }
.item-reject  { background: var(--danger-dim); color: #ff8080; border-color: rgba(200,16,46,.25); }
.item-reject:hover  { filter: brightness(1.1); }
.item-empty { font-size: .78rem; color: var(--text-3); font-style: italic; padding: 2px 2px; }

/* Pending-review indicator in the teacher's student list */
.pending-items-badge {
  font-size: .68rem; font-weight: 700; vertical-align: middle; white-space: nowrap;
  padding: 1px 7px; border-radius: 20px;
  background: rgba(212,160,23,.16); color: var(--gold); border: 1px solid rgba(212,160,23,.3);
}
.btn-ach.has-pending { background: rgba(212,160,23,.22); border-color: var(--gold); }

/* Danger zone — kept as card to signal destructive action */
.profile-danger-block {
  background: var(--danger-dim);
  border: 1px solid color-mix(in srgb, var(--red) 25%, var(--border));
  border-radius: 12px; padding: 20px; box-shadow: var(--shadow-card);
}
.profile-danger-block .profile-block-title { color: var(--red); }
.profile-danger-block .profile-block-title::after { background: color-mix(in srgb, var(--red) 25%, var(--border)); }
.profile-danger-desc { font-size: .82rem; color: var(--text-3); margin: 0 0 14px; padding: 0; }
.profile-delete-btn {
  margin: 0;
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 1px solid var(--red);
  color: var(--red); padding: 8px 16px;
  border-radius: 8px; font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: background .15s, color .15s;
}
.profile-delete-btn:hover { background: var(--red); color: white; }

/* User chip profile button */
.user-chip-info-btn {
  display: flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer;
  padding: 0; color: inherit; text-align: left;
  border-radius: 20px; transition: opacity .15s;
}
.user-chip-info-btn:hover { opacity: .8; }