.visuallyHidden{
      position:absolute;
      width:1px;
      height:1px;
      padding:0;
      margin:-1px;
      overflow:hidden;
      clip:rect(0,0,0,0);
      white-space:nowrap;
      border:0;
    }
    :root{
      --bg:#0b1220;
      --panel:#0f1b33;
      --panel2:#122246;
      --ink:#eaf0ff;
      --muted:#b9c6ea;
      --accent:#5aa7ff;
      --good:#38d07c;
      --bad:#ff4d6d;
      --warn:#ffcc66;
      --line: rgba(255,255,255,.12);
      --line-strong: rgba(255,255,255,.18);
      /* Solid surfaces — readable on all GPUs / color profiles (avoid stacked transparent panels) */
      --surface-section: #0f1b33;
      --surface-hero-text: #eaf0ff;
      --shadow: 0 12px 28px rgba(0,0,0,.35);
      --r: 18px;

      --blue1:#0f3b86;
      --blue2:#1e63d6;

      --fsBase: 22px;
      --fsButton: 28px;

      /* Locker Overview rhythm (all themes): align horizontal pad to global page shell */
      --locker-hero-pad-y-start: 18px;
      --locker-hero-pad-y-end: 18px;
      --locker-section-gap: 24px;

      /* Theme tokens (canonical profile): one source for stats card, wallet card, progress, recognition, creator summary. Stats and wallet stay in sync. First-pass set: Classic Lantern, Midnight Blue, Sunset Gold, Forest Green, Cosmic Violet (violet). */
      --theme-wallet-border: rgba(242,194,48,.45);
      --theme-wallet-bg: linear-gradient(135deg, rgba(242,194,48,.2), rgba(242,194,48,.08));
      --theme-progress-fill: linear-gradient(90deg, rgba(242,194,48,.85), rgba(242,140,48,.8));
      --theme-recognition-border: rgba(242,194,48,.22);
      --theme-recognition-bg: linear-gradient(180deg, rgba(242,194,48,.06), rgba(242,194,48,.02));
      --theme-creator-bar: linear-gradient(90deg, rgba(242,194,48,.75), rgba(242,140,48,.7));
    }
    body[data-theme="classic"]{
      --theme-wallet-border: rgba(242,194,48,.45);
      --theme-wallet-bg: linear-gradient(135deg, rgba(242,194,48,.2), rgba(242,194,48,.08));
      --theme-progress-fill: linear-gradient(90deg, rgba(242,194,48,.85), rgba(242,140,48,.8));
      --theme-recognition-border: rgba(242,194,48,.22);
      --theme-recognition-bg: linear-gradient(180deg, rgba(242,194,48,.06), rgba(242,194,48,.02));
      --theme-creator-bar: linear-gradient(90deg, rgba(242,194,48,.75), rgba(242,140,48,.7));
    }
    body[data-theme="midnight"]{
      --theme-wallet-border: rgba(68,140,220,.5);
      --theme-wallet-bg: linear-gradient(135deg, rgba(68,140,220,.2), rgba(40,80,160,.08));
      --theme-progress-fill: linear-gradient(90deg, rgba(68,140,220,.85), rgba(56,120,255,.8));
      --theme-recognition-border: rgba(68,140,220,.28);
      --theme-recognition-bg: linear-gradient(180deg, rgba(68,140,220,.08), rgba(40,80,160,.03));
      --theme-creator-bar: linear-gradient(90deg, rgba(68,140,220,.75), rgba(56,120,255,.7));
    }
    body[data-theme="sunset"]{
      --theme-wallet-border: rgba(255,170,68,.45);
      --theme-wallet-bg: linear-gradient(135deg, rgba(255,170,68,.18), rgba(255,170,68,.06));
      --theme-progress-fill: linear-gradient(90deg, rgba(255,170,68,.85), rgba(255,140,68,.8));
      --theme-recognition-border: rgba(255,170,68,.25);
      --theme-recognition-bg: linear-gradient(180deg, rgba(255,170,68,.07), rgba(255,170,68,.02));
      --theme-creator-bar: linear-gradient(90deg, rgba(255,170,68,.75), rgba(255,140,68,.7));
    }
    body[data-theme="forest"]{
      --theme-wallet-border: rgba(56,180,100,.5);
      --theme-wallet-bg: linear-gradient(135deg, rgba(56,180,100,.18), rgba(40,140,80,.08));
      --theme-progress-fill: linear-gradient(90deg, rgba(56,180,100,.85), rgba(48,200,120,.8));
      --theme-recognition-border: rgba(56,180,100,.28);
      --theme-recognition-bg: linear-gradient(180deg, rgba(56,180,100,.07), rgba(40,140,80,.03));
      --theme-creator-bar: linear-gradient(90deg, rgba(56,180,100,.75), rgba(48,200,120,.7));
    }
    body[data-theme="violet"]{
      --theme-wallet-border: rgba(156,100,255,.45);
      --theme-wallet-bg: linear-gradient(135deg, rgba(156,100,255,.18), rgba(156,100,255,.06));
      --theme-progress-fill: linear-gradient(90deg, rgba(156,100,255,.85), rgba(140,80,255,.8));
      --theme-recognition-border: rgba(156,100,255,.25);
      --theme-recognition-bg: linear-gradient(180deg, rgba(156,100,255,.07), rgba(156,100,255,.02));
      --theme-creator-bar: linear-gradient(90deg, rgba(156,100,255,.75), rgba(140,80,255,.7));
    }
    *{box-sizing:border-box}
    html{ min-height: 100%; }
    html,body{ height: 100%; margin: 0; }
    body{
      background-color: var(--bg);
      /* Single predictable gradient + base; avoids per-device stacking differences with multiple translucent overlays */
      background-image: linear-gradient(180deg, #0c1830 0%, var(--bg) 45%, #0a1018 100%);
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-position: center top;
      color:var(--ink);
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      overflow-x:hidden;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
      font-size: var(--fsBase);
    }
    /* Full-page background skins (Phase 5): equipped background affects entire page; no layout change, readability kept */
    body[data-background="stars"]{ background: linear-gradient(180deg, rgba(30,20,60,.85), rgba(10,5,25,.98)); background-attachment: fixed; }
    body[data-background="sunset"]{ background: linear-gradient(180deg, rgba(80,40,20,.7), rgba(20,10,5,.98)); background-attachment: fixed; }
    body[data-background="aurora"]{ background: linear-gradient(135deg, rgba(20,60,80,.6), rgba(60,20,80,.6)); background-attachment: fixed; }
    body[data-background="galaxy"]{ background: linear-gradient(180deg, rgba(15,5,35,.9), rgba(5,2,15,.99)); background-attachment: fixed; }
    body[data-background="classroom"]{ background: linear-gradient(180deg, rgba(60,40,20,.5), rgba(15,10,5,.95)); background-attachment: fixed; }
    body[data-background="ocean"]{ background: linear-gradient(180deg, rgba(10,40,60,.75), rgba(5,15,30,.98)); background-attachment: fixed; }
    body[data-background="forest"]{ background: linear-gradient(180deg, rgba(15,45,25,.6), rgba(5,15,10,.95)); background-attachment: fixed; }
    body[data-background="midnight"]{ background: linear-gradient(180deg, rgba(10,15,35,.9), rgba(5,5,15,.99)); background-attachment: fixed; }
    body[data-background="arcade"]{ background: linear-gradient(135deg, rgba(80,20,80,.6), rgba(20,5,40,.95)); background-attachment: fixed; }
    body[data-background="hidden_lantern"]{ background: linear-gradient(180deg, rgba(40,25,10,.7), rgba(15,8,2,.98)); background-attachment: fixed; }
    body[data-background="newsroom"]{ background: linear-gradient(180deg, rgba(30,25,50,.6), rgba(10,8,25,.95)); background-attachment: fixed; }
    body[data-background="sports"]{ background: linear-gradient(180deg, rgba(20,50,30,.6), rgba(8,20,12,.95)); background-attachment: fixed; }
    body[data-background="neon"]{ background: linear-gradient(135deg, rgba(20,5,40,.85), rgba(5,20,40,.9)); background-attachment: fixed; }
    /* Cross-device: fixed background can fail on iOS/Android; use scroll on small viewports */
    @media (max-width: 768px) {
      body, body[data-background]{ background-attachment: scroll !important; }
    }
    @media (max-width: 1024px) {
      body[data-effect] .cosmeticEffectLayer{ will-change: auto; }
    }
    /* Cosmetic effects layer (Phase 6): one effect active, subtle, does not reduce readability */
    .cosmeticEffectLayer{
      position: fixed; inset: 0; pointer-events: none; z-index: 0;
      opacity: 0;
      transition: opacity .3s ease;
    }
    body[data-effect="sparkles"] .cosmeticEffectLayer{
      opacity: 1;
      background: radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.4), transparent),
                  radial-gradient(1.5px 1.5px at 60% 70%, rgba(255,220,150,.35), transparent),
                  radial-gradient(1.5px 1.5px at 80% 20%, rgba(255,255,255,.3), transparent);
      animation: effectSparkle 6s ease-in-out infinite;
    }
    @keyframes effectSparkle{
      0%,100%{ opacity: .6; }
      50%{ opacity: 1; }
    }
    body[data-effect="snow"] .cosmeticEffectLayer{
      opacity: .85;
      background: radial-gradient(2px 2px at 10% 10%, rgba(255,255,255,.5), transparent),
                  radial-gradient(2px 2px at 90% 80%, rgba(255,255,255,.4), transparent);
      animation: effectSnow 12s linear infinite;
    }
    @keyframes effectSnow{
      0%{ transform: translateY(-10px); }
      100%{ transform: translateY(100vh); }
    }
    body[data-effect="nuggets"] .cosmeticEffectLayer{
      opacity: .7;
      background: radial-gradient(4px 4px at 15% 20%, rgba(242,194,48,.25), transparent),
                  radial-gradient(4px 4px at 85% 60%, rgba(242,194,48,.2), transparent);
      animation: effectFloat 8s ease-in-out infinite;
    }
    @keyframes effectFloat{
      0%,100%{ transform: translate(0,0); }
      50%{ transform: translate(4px, -6px); }
    }
    a{color:inherit}

    /* Outer shell: lantern-header.css .wrap.lanternContent; nested .wrap (e.g. Store tab) stays capped */
    .wrap{ position: relative; z-index: 1; min-width: 0; }
    .wrap:not(.lanternContent){
      max-width: var(--lantern-page-max-width);
      margin-left: auto;
      margin-right: auto;
    }

    /* ===== PROFILE HERO (Phase 7: identity-first) ===== */
    .profileHero{
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      /* Horizontal: 0 — shell (.wrap.lanternContent) already applies --lantern-pad-x */
      padding: var(--locker-hero-pad-y-start) 0 var(--locker-hero-pad-y-end);
      gap: 16px;
      border-radius: var(--r);
      overflow: hidden;
    }
    /* Theme tint at hero level so theme reads on the card, not only in stats/wallet (cross-device visibility) */
    .profileHero.theme-classic::before{ content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(242,194,48,.04), transparent 50%); pointer-events: none; }
    .profileHero.theme-midnight::before{ content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(68,140,220,.07), transparent 50%); pointer-events: none; }
    .profileHero.theme-sunset::before{ content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,170,68,.06), transparent 50%); pointer-events: none; }
    .profileHero.theme-forest::before{ content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(56,180,100,.06), transparent 50%); pointer-events: none; }
    .profileHero.theme-violet::before{ content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(156,100,255,.06), transparent 50%); pointer-events: none; }
    .avatarWrap{
      position: relative;
      width: 168px;
      height: 168px;
      margin-left: auto;
      margin-right: auto;
      flex-shrink: 0;
    }
    .avatarCircle{
      width: 168px;
      height: 168px;
      border-radius: 50%;
      background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
      border: 4px solid rgba(255,255,255,.25);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 72px;
      line-height: 1;
      box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.06);
      overflow: hidden;
    }
    /* Avatar reveal (Phase 7): no default flash; 200ms smear — white fade, blur to sharp */
    .avatarRevealPlaceholder{
      width: 100%;
      height: 100%;
      background: rgba(255,255,255,.08);
      border-radius: 50%;
    }
    .avatarReveal{
      position: absolute;
      inset: 0;
      border-radius: 50%;
      overflow: hidden;
    }
    .avatarReveal::before{
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,.92);
      opacity: 0;
      pointer-events: none;
    }
    .avatarReveal.revealed::before{
      animation: avatarRevealFlash .2s ease-out forwards;
    }
    @keyframes avatarRevealFlash{
      0%{ opacity: 1; }
      100%{ opacity: 0; }
    }
    .avatarReveal img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      filter: blur(12px);
    }
    .avatarReveal.revealed img{
      animation: avatarRevealFocus .2s ease-out forwards;
    }
    @keyframes avatarRevealFocus{
      0%{ opacity: .5; filter: blur(12px); }
      100%{ opacity: 1; filter: blur(0); }
    }
    .avatarReveal .avatarContent{
      position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 72px; line-height: 1;
      opacity: 0;
    }
    .avatarReveal.revealed .avatarContent{ opacity: 1; transition: opacity .2s ease-out; }
    .avatarReveal .avatarContent img{ width: 100%; height: 100%; object-fit: cover; }
    .avatarFrame{
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      border: 3px solid transparent;
      pointer-events: none;
    }
    .profileHero.frame-gold .avatarFrame{ border-color: rgba(242,194,48,.7); }
    .profileHero.frame-blue .avatarFrame{ border-color: rgba(90,167,255,.7); }
    .profileHero.frame-green .avatarFrame{ border-color: rgba(56,208,124,.7); }
    .profileHero.frame-purple .avatarFrame{ border-color: rgba(156,100,255,.7); }
    .profileHero.theme-sunset .walletCard,
    .profileHero.theme-sunset .statsCard{ border-color: rgba(255,170,68,.45); background: linear-gradient(135deg, rgba(255,170,68,.18), rgba(255,170,68,.06)); }
    .profileHero.theme-midnight .walletCard,
    .profileHero.theme-midnight .statsCard{ border-color: rgba(68,140,220,.5); background: linear-gradient(135deg, rgba(68,140,220,.2), rgba(40,80,160,.08)); }
    .profileHero.theme-forest .walletCard,
    .profileHero.theme-forest .statsCard{ border-color: rgba(56,180,100,.5); background: linear-gradient(135deg, rgba(56,180,100,.18), rgba(40,140,80,.08)); }
    .profileHero.theme-violet .walletCard,
    .profileHero.theme-violet .statsCard{ border-color: rgba(156,100,255,.45); background: linear-gradient(135deg, rgba(156,100,255,.18), rgba(156,100,255,.06)); }
    /* ===== COSMETICS (Phase 10) ===== */
    .profileHero.cosmetic-bg-stars{ background: linear-gradient(180deg, rgba(30,20,60,.6), rgba(10,5,25,.9)); box-shadow: inset 0 0 80px rgba(100,80,180,.15); border-radius: var(--r); }
    .profileHero.cosmetic-bg-sunset{ background: linear-gradient(180deg, rgba(80,40,20,.5), rgba(20,10,5,.9)); box-shadow: inset 0 0 60px rgba(255,140,60,.12); border-radius: var(--r); }
    .profileHero.cosmetic-bg-aurora{ background: linear-gradient(135deg, rgba(20,60,80,.4), rgba(60,20,80,.4)); box-shadow: inset 0 0 100px rgba(56,208,124,.08); border-radius: var(--r); }
    .profileHero.cosmetic-bg-galaxy{ background: linear-gradient(180deg, rgba(15,5,35,.7), rgba(5,2,15,.95)); box-shadow: inset 0 0 120px rgba(100,80,200,.2), inset 0 0 80px rgba(200,100,255,.08); border-radius: var(--r); }
    .profileHero.cosmetic-bg-classroom{ background: linear-gradient(180deg, rgba(60,40,20,.4), rgba(15,10,5,.92)); box-shadow: inset 0 0 60px rgba(220,180,120,.1); border-radius: var(--r); }
    .profileHero.cosmetic-bg-ocean{ background: linear-gradient(180deg, rgba(10,40,60,.6), rgba(5,15,30,.95)); box-shadow: inset 0 0 80px rgba(50,150,200,.15); border-radius: var(--r); }
    .profileHero.cosmetic-bg-forest{ background: linear-gradient(180deg, rgba(15,45,25,.5), rgba(5,15,10,.92)); box-shadow: inset 0 0 70px rgba(80,180,100,.12); border-radius: var(--r); }
    .profileHero.cosmetic-bg-midnight{ background: linear-gradient(180deg, rgba(10,15,35,.8), rgba(5,5,15,.98)); box-shadow: inset 0 0 100px rgba(80,100,180,.2); border-radius: var(--r); }
    .profileHero.cosmetic-bg-arcade{ background: linear-gradient(135deg, rgba(80,20,80,.5), rgba(20,5,40,.9)); box-shadow: inset 0 0 80px rgba(200,100,255,.15); border-radius: var(--r); }
    .profileHero.cosmetic-bg-hidden_lantern{ background: linear-gradient(180deg, rgba(40,25,10,.6), rgba(15,8,2,.95)); box-shadow: inset 0 0 90px rgba(255,180,80,.2); border-radius: var(--r); }
    .profileHero.cosmetic-bg-newsroom{ background: linear-gradient(180deg, rgba(30,25,50,.5), rgba(10,8,25,.92)); box-shadow: inset 0 0 70px rgba(150,150,220,.12); border-radius: var(--r); }
    .profileHero.cosmetic-frame-silver .avatarFrame{ border-color: rgba(200,200,220,.8); }
    .profileHero.cosmetic-frame-gold .avatarFrame{ border-color: rgba(242,194,48,.7); }
    .profileHero.cosmetic-frame-rainbow .avatarFrame{ border-image: linear-gradient(135deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3) 1; border-width: 2px; }
    .profileHero.cosmetic-frame-legend .avatarFrame{ border-color: rgba(242,194,48,.9); box-shadow: 0 0 20px rgba(242,194,48,.2); }
    .profileHero.cosmetic-frame-blue .avatarFrame{ border-color: rgba(90,167,255,.8); }
    .profileHero.cosmetic-frame-green .avatarFrame{ border-color: rgba(56,208,124,.7); }
    .profileHero.cosmetic-frame-school .avatarFrame{ border-color: rgba(180,160,255,.7); }
    .profileHero.cosmetic-frame-champion .avatarFrame{ border-color: rgba(242,194,48,.9); box-shadow: 0 0 24px rgba(242,194,48,.3); }
    .profileHero.cosmetic-frame-nugget_seeker .avatarFrame{ border-color: rgba(242,194,48,.8); border-style: double; }
    .profileHero.cosmetic-frame-hallway_hero .avatarFrame{ border-color: rgba(156,100,255,.8); box-shadow: 0 0 20px rgba(156,100,255,.25); }
    .cosmeticBadge{ position: absolute; top: -4px; left: -4px; width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,.5); border: 2px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; font-size: 26px; pointer-events: none; }
    .cosmeticAccessory{ position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 36px; pointer-events: none; z-index: 2; }
    .cosmeticDecoration{ margin-top: -8px; font-size: 32px; pointer-events: none; opacity: .9; }
    .profileHero.cosmetic-accent-gold .walletCard,
    .profileHero.cosmetic-accent-gold .statsCard{ border-color: rgba(242,194,48,.6); box-shadow: 0 0 20px rgba(242,194,48,.2); }
    .profileHero.cosmetic-accent-rainbow .walletCard,
    .profileHero.cosmetic-accent-rainbow .statsCard{ border-image: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3) 1; border-width: 2px; }
    .profileHero.cosmetic-accent-glow .walletCard,
    .profileHero.cosmetic-accent-glow .statsCard{ border-color: rgba(255,255,255,.5); box-shadow: 0 0 24px rgba(255,255,255,.25); }
    .profileHero.cosmetic-accent-silver .walletCard,
    .profileHero.cosmetic-accent-silver .statsCard{ border-color: rgba(200,210,230,.7); }
    .profileHero.cosmetic-accent-blue .walletCard,
    .profileHero.cosmetic-accent-blue .statsCard{ border-color: rgba(90,167,255,.6); box-shadow: 0 0 16px rgba(90,167,255,.2); }
    .profileHero.cosmetic-accent-green .walletCard,
    .profileHero.cosmetic-accent-green .statsCard{ border-color: rgba(56,208,124,.6); box-shadow: 0 0 16px rgba(56,208,124,.2); }
    .profileHero.cosmetic-accent-arcade .walletCard,
    .profileHero.cosmetic-accent-arcade .statsCard{ border-color: rgba(200,100,255,.6); box-shadow: 0 0 20px rgba(200,100,255,.25); }
    .cosmeticEquipWrap{ display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
    .cosmeticEquipRow{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    .cosmeticEquipRow label{ margin: 0; font-size: 20px; min-width: 90px; }
    .cosmeticEquipBtn{ width: 48px; height: 48px; border-radius: 12px; border: 2px solid var(--line); background: rgba(255,255,255,.06); font-size: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
    .cosmeticEquipBtn:hover{ border-color: var(--accent); background: rgba(90,167,255,.15); }
    .cosmeticEquipBtn.equipped{ border-color: var(--good); background: rgba(56,208,124,.2); }
    .testStudentBadge{
      font-size: 18px;
      font-weight: 800;
      color: var(--warn);
      margin-top: 4px;
      padding: 4px 10px;
      border-radius: 8px;
      background: rgba(255,204,102,.15);
      border: 1px solid rgba(255,204,102,.4);
      display: inline-block;
    }
    .profileDisplayName{
      font-size: 28px;
      font-weight: 900;
      color: var(--surface-hero-text);
      margin-top: 10px;
      margin-bottom: 4px;
      max-width: 100%;
      text-align: center;
      line-height: 1.2;
      padding: 0 var(--lantern-pad-x, 12px);
      box-sizing: border-box;
    }
    .profileIdentityIdLine{
      font-size: 18px;
      font-weight: 700;
      color: var(--muted);
      margin-top: 0;
      margin-bottom: 2px;
      max-width: 100%;
      text-align: center;
      line-height: 1.25;
      padding: 0 var(--lantern-pad-x, 12px);
      box-sizing: border-box;
    }
    .profileStatus{
      font-size: 22px;
      font-weight: 800;
      color: var(--accent);
      margin-top: 0;
      margin-bottom: 2px;
      max-width: 100%;
      text-align: center;
      padding: 0 var(--lantern-pad-x, 12px);
      box-sizing: border-box;
    }
    .bio{
      color: var(--muted);
      font-size: 22px;
      font-weight: 800;
      max-width: 400px;
      line-height: 1.4;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }
    .bio.placeholder{ opacity: .7; font-style: italic; }

    /* ===== NUGGET WALLET (prominent; theme-driven) ===== */
    .profileHeroHeader{
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin: 0 0 12px;
      padding: 0;
      box-sizing: border-box;
    }
   .profileHeroHeader .profileHeroActions{ margin-top: 0; }
    @media (max-width: 639px) {
      .profileHeroHeader{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 0;
      }
      .profileHeroHeader .profileHeroActions{
        justify-content: center;
        width: 100%;
      }
    }
    .walletCard,
    .statsCard{
      width: 100%;
      max-width: 100%;
      min-height: 140px;
      box-sizing: border-box;
    }
    .walletCard{
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 16px;
      padding: 18px 20px;
      border-radius: var(--r);
      background: var(--theme-wallet-bg, linear-gradient(135deg, rgba(242,194,48,.2), rgba(242,194,48,.08)));
      border: 2px solid var(--theme-wallet-border, rgba(242,194,48,.45));
      margin: 8px 0 0;
      box-shadow: 0 4px 12px rgba(0,0,0,.2);
    }
    .walletIcon{ font-size: 36px; display: inline-flex; align-items: center; flex-shrink: 0; }
    .walletIcon img{ width: 44px; height: 44px; object-fit: contain; vertical-align: middle; filter: drop-shadow(0 2px 4px rgba(242,194,48,.35)); }
    .walletIconLarge img{ width: 72px; height: 72px; filter: drop-shadow(0 3px 8px rgba(242,194,48,.4)); }
    .hiddenNugget img{ width: 40px; height: 40px; object-fit: contain; }
    .dailyHuntNugget img{ width: 36px; height: 36px; object-fit: contain; }
    /* Lantern shared icon sizes: ticker/feed small, wallet/reward larger */
    .activityIconImg{ width: 24px; height: 24px; object-fit: contain; vertical-align: middle; }
    .icon-ticker img, .tickerIconImg{ width: 18px; height: 18px; object-fit: contain; vertical-align: middle; }
    .walletAmount{ font-weight: 1000; font-size: 34px; color: var(--warn); }
    .walletLabel{ font-size: 22px; color: var(--muted); font-weight: 800; }
    .walletCardInner{ display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
    .nuggetProgressWrap{ width: 100%; margin-top: 10px; }
    .nuggetProgressLabel{ font-size: 18px; font-weight: 800; color: var(--muted); display: block; margin-bottom: 4px; }
    .nuggetProgressBar{ height: 8px; border-radius: 999px; background: rgba(0,0,0,.2); overflow: hidden; width: 100%; }
    .nuggetProgressFill{ height: 100%; border-radius: 999px; background: var(--theme-progress-fill, linear-gradient(90deg, rgba(242,194,48,.85), rgba(242,140,48,.8))); transition: width .25s ease; }

    .profileHeroStats{
      font-size: 22px;
      color: var(--muted);
      font-weight: 800;
      margin-top: 4px;
    }
    /* Left stats card: same size/shape as wallet card; icon rows */
    .statsCard{
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 18px 20px;
      border-radius: var(--r);
      background: var(--theme-wallet-bg, linear-gradient(135deg, rgba(242,194,48,.2), rgba(242,194,48,.08)));
      border: 2px solid var(--theme-wallet-border, rgba(242,194,48,.45));
      margin: 8px 0 0;
      box-shadow: 0 4px 12px rgba(0,0,0,.2);
    }
    .statsCardInner{ display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 0; width: 100%; }
    .profileStatRow{
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 20px;
      font-weight: 800;
    }
    .profileStatIcon{ font-size: 24px; flex-shrink: 0; }
    .profileStatLabel{ color: var(--muted); flex: 1; }
    .profileStatNum{ color: var(--accent); font-weight: 900; min-width: 1.5em; text-align: right; }
    .profileHero.theme-classic .profileStatNum,
    .profileHero .profileStatNum{ color: #5aa7ff; }
    .profileHero.theme-sunset .profileStatNum{ color: var(--warn); }

    /* Full-width 3-column hero row: equal thirds, same width as sections below */
    .profileIdentityCard{
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px 24px;
      width: 100%;
      max-width: 100%;
      align-items: stretch;
      box-sizing: border-box;
      justify-items: stretch;
    }
    @media (min-width: 640px) {
      .profileIdentityCard{ grid-template-columns: 1fr 1fr 1fr; align-items: stretch; min-height: 200px; }
      .profileIdentityCardLeft{ text-align: left; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
      .profileIdentityCardCenter{ text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
      .profileIdentityCardRight{ text-align: right; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; }
    }
    .profileIdentityCardLeft,
    .profileIdentityCardCenter,
    .profileIdentityCardRight{ min-width: 0; }
    .profileIdentityCardCenter{
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
    .profileIdentityCardLeft .profileHeroStats{ font-size: 22px; font-weight: 800; color: var(--muted); line-height: 1.5; }
    /* Single-column: same story as desktop — identity (avatar) first, then stats, then wallet */
    @media (max-width: 639px) {
      .profileIdentityCardCenter{ order: 1; justify-content: flex-start; }
      .profileIdentityCardLeft{ order: 2; align-items: center; text-align: center; }
      .profileIdentityCardRight{ order: 3; align-items: center; text-align: center; }
      .profileIdentityCardLeft,
      .profileIdentityCardRight{
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
      }
      .profileIdentityCardLeft .statsCard,
      .profileIdentityCardRight .walletCard{
        margin-left: auto;
        margin-right: auto;
        max-width: 420px;
      }
      .profileIdentityCardRight .walletCard{
        justify-content: center;
      }
      .profileIdentityCardRight .walletCardInner{
        align-items: center;
      }
      .profileLegendPanel{ margin-left: auto; margin-right: auto; }
    }

    /* Identity controls on profile hero (Edit Profile, Switch Student) */
    .profileHeroActions{
      display: flex;
      flex-wrap: wrap;
      gap: 10px 16px;
      justify-content: center;
      margin-top: 12px;
      font-size: 20px;
    }
    .profileHeroAction{
      background: none;
      border: none;
      color: var(--link);
      font-size: inherit;
      font-weight: 700;
      cursor: pointer;
      padding: 0;
      font-family: inherit;
    }
    .profileHeroAction:hover{ text-decoration: underline; }

    /* ===== CONTENT SECTIONS (Phase 7: hierarchy) ===== */
    .section{
      margin-top: var(--locker-section-gap, 24px);
      border: 1px solid var(--line-strong);
      background: var(--surface-section);
      border-radius: var(--r);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .sectionHd{
      padding: 16px 18px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .sectionHd .h{ font-weight: 900; letter-spacing: .2px; font-size: 26px; }
    .sectionBd{ padding: 16px; }
    .sectionPlaceholder{
      color: var(--muted);
      font-size: 22px;
      text-align: center;
      padding: 32px 20px;
      line-height: 1.4;
      font-weight: 800;
    }

    /* ===== CONTENT TABS (Phase 7: polished) ===== */
    .contentTabs{
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 14px;
      border-bottom: 2px solid var(--line);
    }
    .contentTab{
      padding: 14px 18px;
      font-weight: 900;
      font-size: 22px;
      color: var(--muted);
      cursor: pointer;
      border-bottom: 3px solid transparent;
      margin-bottom: -2px;
      transition: color .15s ease;
    }
    .contentTab:hover{ color: var(--ink); }
    .contentTab.active{ color: var(--ink); border-bottom-color: var(--accent); }

    /* ===== POST FEED (Phase 7: showcase by type) ===== */
    .postFeed{ display: flex; flex-direction: column; gap: 18px; }
    .postCard{
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
      border-radius: var(--r);
      overflow: hidden;
      padding: 18px;
      transition: transform .15s ease, box-shadow .2s ease;
    }
    .postCard:hover{ transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
    /* Pass 1.5: profile post shell matches canonical .exploreCard — no type-colored borders or alternate shell fills; curation reads via badges/content only */
    .teacherPraiseBlock{ margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: linear-gradient(135deg, rgba(242,194,48,.15), rgba(242,194,48,.06)); border: 1px solid rgba(242,194,48,.35); font-size: 22px; font-weight: 800; color: var(--warn); }
    .teacherPraiseBlock .label{ font-size: 20px; color: var(--muted); margin-bottom: 4px; }
    .postStatusBadge{ display: inline-block; margin-left: 8px; padding: 4px 10px; border-radius: 8px; font-size: 18px; font-weight: 800; }
    .postStatusBadge.pending{ background: rgba(255,204,102,.2); border: 1px solid rgba(255,204,102,.5); color: var(--warn); }
    .postStatusBadge.returned{ background: rgba(255,204,102,.2); border: 1px solid rgba(255,204,102,.5); color: var(--warn); }
    .postStatusBadge.rejected{ background: rgba(255,77,109,.2); border: 1px solid rgba(255,77,109,.4); color: var(--bad); }
    .postReturnedReason{ margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255,204,102,.12); border: 1px solid rgba(255,204,102,.35); font-size: 22px; color: var(--muted); }
    .postCard.type-image .postPreview{ max-height: 280px; margin: 0 -18px 14px; border-radius: 0; border-left: none; border-right: none; }
    .postCardHd{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }
    .postTypeIcon{ font-size: 30px; }
    .postTitle{ font-weight: 900; font-size: 26px; }
    .postCardAuthorRow{ display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
    .postCardAuthorAvatarImg{ width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: block; }
    .postCardAuthorAvatar{ font-size: 28px; }
    .postCardAuthorName{ font-size: 22px; font-weight: 800; color: var(--muted); }
    .postCaption{ color: var(--muted); font-size: 22px; line-height: 1.4; margin-top: 6px; }
    .postUrl{
      display: inline-block;
      margin-top: 8px;
      color: var(--accent);
      font-size: 22px;
      font-weight: 800;
      text-decoration: none;
      word-break: break-all;
    }
    .postUrl:hover{ text-decoration: underline; }
    .postPreview{
      margin-top: 12px;
      max-height: 220px;
      overflow: hidden;
      border-radius: 14px;
      border: 1px solid var(--line);
    }
    .postPreview img{ width: 100%; height: auto; display: block; }
    .postMeta{
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid rgba(255,255,255,.08);
    }
    .postTime{ font-size: 20px; color: var(--muted); }
    .postReactions{ display: flex; gap: 8px; align-items: center; }
    .postReactionBtn{
      width: 48px;
      height: 48px;
      border-radius: 14px;
      border: 2px solid var(--line);
      background: rgba(255,255,255,.06);
      font-size: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform .12s ease, filter .15s ease, border-color .15s ease;
    }
    .postReactionBtn:hover{ filter: brightness(1.2); }
    .postReactionBtn:active{ transform: scale(0.9); }
    .postReactionBtn.active{ border-width: 2px; }
    .postReactionBtn.like.active{ background: rgba(255,77,109,.2); border-color: rgba(255,77,109,.5); }
    .postReactionBtn.favorite.active{ background: rgba(242,194,48,.25); border-color: rgba(242,194,48,.5); }
    .postReactionBtn.fire.active{ background: rgba(255,140,68,.25); border-color: rgba(255,140,68,.5); }
    .postActions{ display: flex; gap: 8px; flex-wrap: wrap; }
    .postActions .btn.small{ height: 40px; font-size: 18px; padding: 0 12px; }

    /* ===== COMMENTS LITE (Phase 9) ===== */
    .postCommentsWrap{ margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
    .postCommentsToggle{
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 0;
      font-size: 22px;
      font-weight: 800;
      color: var(--muted);
      cursor: pointer;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }
    .postCommentsToggle:hover{ color: var(--ink); }
    .postCommentsToggle .icon{ font-size: 24px; }
    .postCommentsList{ padding: 8px 0 0; }
    .commentItem{
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .commentItem:last-child{ border-bottom: none; }
    .commentAvatar{ font-size: 28px; flex-shrink: 0; }
    .commentBody{ flex: 1; min-width: 0; }
    .commentAuthor{ font-weight: 900; font-size: 22px; margin-bottom: 2px; }
    .commentText{ font-size: 22px; line-height: 1.4; color: var(--muted); }
    .commentTime{ font-size: 20px; color: var(--muted); margin-top: 4px; opacity: .8; }
    .commentForm{
      display: flex;
      gap: 10px;
      margin-top: 12px;
      align-items: flex-end;
    }
    .commentForm input{
      flex: 1;
      min-width: 0;
      height: 48px;
      padding: 0 14px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.06);
      color: var(--ink);
      font-size: 22px;
    }
    .commentForm .btn.small{ height: 48px; flex-shrink: 0; }

    .discoverySection{ margin-top: 24px; }
    /* ===== HORIZONTAL CONTENT SCROLLERS (Phase 3) ===== */
    .contentScroller{
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      margin: 0 -18px;
      padding: 0 18px;
    }
    .contentScrollerTrack{
      display: flex;
      gap: 14px;
      padding: 12px 0 16px;
      min-height: 0;
    }
    .contentScrollerTrack .scrollerCard{
      flex-shrink: 0;
      width: 260px;
      min-width: 260px;
      padding: 14px;
      border-radius: var(--r);
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      text-decoration: none;
      color: var(--ink);
      display: block;
      transition: filter .12s ease;
    }
    .contentScrollerTrack .scrollerCard:hover{ filter: brightness(1.05); }
    .contentScrollerTrack .scrollerCardTitle{ font-weight: 900; font-size: 22px; margin-bottom: 4px; }
    .contentScrollerTrack .scrollerCardMeta{ font-size: 20px; color: var(--muted); }
    /* Store tab + any remaining `contentScrollerTrack` rows still need this. L-Rail-2: `#postFeedEl` is `.lanternScroller` — card sizing from `lantern-cards.css` only. */
    .contentScrollerTrack .exploreCard--size-rail,
    .contentScrollerTrack .exploreCard.medium{
      flex-shrink: 0;
      width: 280px;
      min-width: 260px;
      max-width: 280px;
      margin-bottom: 0;
    }

    /* ===== RICH POST TYPES (Phase 8) ===== */
    .postCard.type-image .postPreview{ max-height: 300px; }
    .postCard.type-link .linkCardWrap{
      margin-top: 12px;
      padding: 16px;
      border-radius: 14px;
      background: rgba(255,255,255,.05);
      border: 1px solid var(--line);
    }
    .postCard.type-link .postUrl{ margin-top: 0; display: block; margin-bottom: 10px; }
    .postCard.type-link .launchBtn{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      border-radius: 12px;
      font-weight: 900;
      font-size: 22px;
      background: rgba(255,255,255,.08);
      border: 2px solid var(--line);
      color: var(--ink);
      text-decoration: none;
      transition: filter .15s ease;
    }
    .postCard.type-link .launchBtn:hover{ filter: brightness(1.15); }
    .postCard.type-video .videoCardWrap{
      margin-top: 12px;
      position: relative;
      border-radius: 14px;
      overflow: hidden;
      background: rgba(0,0,0,.22);
      min-height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
    }
    .postCard.type-video .videoCardWrap .videoPreviewImg{ position: absolute; inset: 0; }
    .postCard.type-video .videoCardWrap .videoPreviewImg img{ width: 100%; height: 100%; object-fit: cover; }
    .postCard.type-video .videoCardWrap .playIcon{ font-size: 56px; opacity: .9; z-index: 2; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
    .postCard.type-video .videoCardWrap .postPreview{ margin: 0; max-height: 200px; border: none; border-radius: 0; }
    .postCard.type-video .videoCardWrap .launchBtn{
      position: absolute;
      bottom: 12px;
      right: 12px;
      margin: 0;
      padding: 10px 18px;
      font-size: 20px;
      z-index: 2;
      background: rgba(255,255,255,.1);
      border: 2px solid var(--line);
    }
    .postCard.type-video .videoCardWrap.videoCardFallback{ flex-direction: column; gap: 8px; padding: 20px; }
    .postCard.type-video .videoCardWrap .videoFallbackTitle{ font-weight: 900; font-size: 22px; text-align: center; z-index: 2; }
    .postCard.type-video .videoCardWrap .videoFallbackAuthor{ font-size: 18px; color: var(--muted); z-index: 2; }
    .postCard.type-webapp .launchBtn, .postCard.type-project .launchBtn{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 20px;
      border-radius: 12px;
      font-weight: 900;
      font-size: 22px;
      background: rgba(255,255,255,.08);
      border: 2px solid var(--line);
      color: var(--ink);
      text-decoration: none;
      margin-top: 10px;
      transition: filter .15s ease;
    }
    .postCard.type-webapp .launchBtn:hover, .postCard.type-project .launchBtn:hover{ filter: brightness(1.15); }
    /* ===== FEED / GRID VIEW (Phase 8) ===== */
    .viewToggle{ display: flex; gap: 4px; }
    .viewToggleBtn{
      width: 44px;
      height: 44px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.04);
      font-size: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background .15s ease;
    }
    .viewToggleBtn.active{ background: rgba(90,167,255,.2); border-color: rgba(90,167,255,.4); }
    .postFeed.gridView{
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 16px;
    }
    .postFeed.gridView .postCard.type-image{ padding: 0; }
    .postFeed.gridView .postCard.type-image .postPreview{ margin: 0; max-height: 200px; border-radius: 0; }
    .postFeed.gridView .postCard:not(.type-image){ grid-column: 1 / -1; }
    .postFeed.gridView .postCard.type-image .postCardHd,
    .postFeed.gridView .postCard.type-image .postCaption,
    .postFeed.gridView .postCard.type-image .postMeta{ padding: 0 14px 10px; }
    .postFeed.gridView .exploreCard.type-image{ padding: 0; overflow: hidden; }
    .postFeed.gridView .exploreCard:not(.type-image){ grid-column: 1 / -1; }
    .postFeed.gridView .exploreCard.type-image .exploreCardHd,
    .postFeed.gridView .exploreCard.type-image .exploreCardMetaOneLine{ padding: 0 14px 12px; }
    .postFeed.gridView .exploreCard.type-image .exploreCardVisual{ margin-bottom: 0; border-radius: 12px 12px 0 0; }

    /* ===== EMPTY STATES (Phase 8) ===== */
    .emptyState{
      text-align: center;
      padding: 32px 20px;
      padding: 32px 24px;
    }
    .emptyStateIcon{ font-size: 48px; margin-bottom: 14px; opacity: .6; }
    .emptyStateTitle{ font-weight: 900; font-size: 26px; margin-bottom: 8px; }
    .emptyStateHint{ color: var(--muted); font-size: 22px; line-height: 1.45; }

    /* ===== NEW POST MODAL ===== */
    .overlay{
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,.6);
      z-index: 9999;
      padding: 18px;
    }
    .overlay.show{ display: flex; }
    #avatarCropOverlay.show{ z-index: 10000; }
    .modal{
      width: min(500px, 96vw);
      max-height: 90vh;
      overflow: auto;
      border-radius: var(--r);
      border: 1px solid var(--line);
      background: var(--panel);
      box-shadow: var(--shadow);
      padding: 20px;
    }
    /* Profile Studio: larger, roomy edit-profile experience */
    #editProfileOverlay .modal.profileStudioModal{
      width: min(720px, 94vw);
      max-height: 92vh;
      padding: 24px 28px 32px;
    }
    #editProfileOverlay .profileStudioModal .modalHd .h{ font-size: 32px; }
    #editProfileOverlay .profileStudioModal .profileStudioSubtitle{ color: var(--muted); font-size: 22px; font-weight: 800; margin-top: 4px; margin-bottom: 20px; }
    .profileStudioSection{
      margin-bottom: 28px;
      padding-bottom: 24px;
      border-bottom: 1px solid var(--line);
    }
    .profileStudioSection:last-of-type{ border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
    .profileStudioSectionH{
      font-weight: 900; font-size: 26px; letter-spacing: .02em; margin-bottom: 14px; color: var(--ink);
    }
    .profileStudioSection .profileStudioSectionH + label{ margin-top: 4px; }
    .profileStudioBuyGrid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 8px; }
    /* My Praise Buttons: pill options + live preview */
    .praisePreviewRow{ font-size: 20px; color: var(--muted); margin-bottom: 14px; min-height: 28px; }
    .praisePreviewRow strong{ color: var(--ink); }
    .praisePreviewEmojis{ font-size: 26px; letter-spacing: 4px; margin-top: 4px; display: inline-block; }
    .praisePreviewZero{ font-style: italic; color: var(--muted); }
    .praiseButtonsWrap{ display: flex; flex-wrap: wrap; gap: 10px; }
    .praiseOption{
      display: inline-flex; align-items: center; gap: 8px;
      padding: 10px 16px; border-radius: 999px;
      border: 2px solid var(--line); background: rgba(255,255,255,.04);
      cursor: pointer; font-size: 22px; font-weight: 700;
      transition: border-color .15s, background .15s, box-shadow .15s;
    }
    .praiseOption:hover{ border-color: rgba(242,194,48,.35); background: rgba(242,194,48,.06); }
    .praiseOption.is-selected{ border-color: rgba(242,194,48,.6); background: linear-gradient(135deg, rgba(242,194,48,.18), rgba(242,194,48,.08)); box-shadow: 0 2px 8px rgba(242,194,48,.2); }
    .praiseOption input{ margin: 0; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--warn); }
    .profileStudioPraiseSubtitle{ font-size: 20px; color: var(--muted); margin: 4px 0 14px; line-height: 1.45; text-align: left; }

    /* Creator reaction summary (horizontal bars, feature-flagged) */
    .creatorReactionSummaryCard{ padding: 4px 0; }
    .creatorReactionBars{ display: flex; flex-direction: column; gap: 10px; }
    .creatorReactionBarRow{ display: flex; align-items: center; gap: 10px; font-size: 22px; }
    .creatorReactionBarRow .barLabel{ min-width: 120px; font-weight: 800; color: var(--ink); }
    .creatorReactionBarRow .barTrack{ flex: 1; height: 12px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
    .creatorReactionBarRow .barFill{ height: 100%; border-radius: 999px; background: var(--theme-creator-bar, linear-gradient(90deg, rgba(242,194,48,.7), rgba(242,140,48,.6))); transition: width .25s ease; }
    .creatorReactionBarRow .barPct{ min-width: 3em; font-weight: 800; color: var(--muted); font-size: 20px; text-align: right; }
    .creatorReactionNotEnough{ font-size: 20px; color: var(--muted); margin: 0; line-height: 1.45; }

    .modalHd{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }
    .modalHd .h{ font-weight: 900; font-size: 28px; }
    .modal .x{
      width: 44px;
      height: 44px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.06);
      cursor: pointer;
      color: var(--ink);
      font-weight: 900;
      font-size: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .modal label{ display: block; font-weight: 800; color: var(--muted); font-size: 22px; margin: 0 0 6px; }
    .modal input, .modal select, .modal textarea{
      width: 100%;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: #0a1428;
      color: #fff;
      font-size: 22px;
      margin-bottom: 14px;
    }
    .modal textarea{ min-height: 80px; resize: vertical; }
    .modal .checkboxRow{ display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
    .modal .checkboxRow input[type="checkbox"]{ width: 28px; height: 28px; margin: 0; }
    .avatarPicker{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
    .avatarPicker .av{ width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--line); background: rgba(255,255,255,.06); font-size: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
    .avatarPicker .av.selected{ border-color: var(--accent); background: rgba(90,167,255,.2); }
    .framePicker, .themePicker{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
    .framePicker .opt, .themePicker .opt{ padding: 10px 14px; border-radius: 12px; border: 2px solid var(--line); background: rgba(255,255,255,.04); font-weight: 800; font-size: 20px; cursor: pointer; }
    .framePicker .opt.selected, .themePicker .opt.selected{ border-color: var(--accent); background: rgba(90,167,255,.15); }
    /* ===== FEATURED SHOWCASE (Phase 8) — shell wraps LanternCards exploreCard ===== */
    .featuredPostCard{
      border: 1px solid rgba(255,255,255,.12);
      background: #132547;
      border-radius: var(--r);
      padding: 0;
      overflow: hidden;
      margin-bottom: 24px;
      box-shadow: 0 8px 24px rgba(0,0,0,.25);
    }
    .featuredPostCard > .exploreCard.lockerFeaturedPostExplore{
      width: 100%;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
      margin: 0;
    }
    /* Legacy hand-built block had no author row; OPENED card model adds identity — hide for same Locker expectations */
    .featuredPostCard > .exploreCard.lockerFeaturedPostExplore .exploreCardIdentity{
      display: none;
    }
    .featuredPostCard > .exploreCard.lockerFeaturedPostExplore .exploreCardVisual img,
    .featuredPostCard > .exploreCard.lockerFeaturedPostExplore .exploreCardVisual video{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* ===== SPOTLIGHT (Phase 7: badge on avatar, popover detail) ===== */
    .spotlightBadge{
      position: absolute;
      bottom: -4px;
      right: -4px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(242,194,48,.95), rgba(242,140,48,.95));
      border: 2px solid rgba(255,255,255,.7);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      box-shadow: 0 4px 16px rgba(242,194,48,.5);
      cursor: pointer;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      z-index: 10;
    }
    .spotlightBadge:hover{ filter: brightness(1.08); }
    .spotlightBadge:focus{ outline: 2px solid rgba(255,255,255,.6); outline-offset: 2px; }
    /* Legend/help: text only, lower-left; same style as nugget progress label (supporting text) */
    .profileLegendTextBlock{ margin-top: 14px; max-width: 100%; }
    .profileLegendTextBlock .profileLegendText{ margin: 0; font-size: 18px; font-weight: 800; color: var(--muted); line-height: 1.4; word-wrap: break-word; overflow-wrap: break-word; }

    .hiddenNugget{
      position: absolute;
      bottom: 16px;
      right: 16px;
      width: 44px;
      height: 44px;
      font-size: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      opacity: 0.35;
      transition: opacity 0.2s ease, transform 0.15s ease;
      z-index: 100;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }
    .hiddenNugget:hover{ opacity: 0.7; }
    .hiddenNugget:active{ transform: scale(0.9); }
    .hiddenNugget.found{ opacity: 0.5; }

    .dailyHuntHint{
      padding: 12px 16px;
      margin-bottom: 12px;
      border-radius: 14px;
      border: 1px solid rgba(242,194,48,.4);
      background: rgba(242,194,48,.12);
      font-size: 22px;
      font-weight: 800;
      color: var(--warn);
      text-align: center;
    }
    .dailyHuntHint.found{ border-color: rgba(56,208,124,.4); background: rgba(56,208,124,.12); color: var(--good); }
    .dailyHuntNugget{
      position: absolute;
      bottom: 10px;
      right: 10px;
      width: 44px;
      height: 44px;
      font-size: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 5;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      animation: dailyHuntSparkle 2s ease-in-out infinite;
      opacity: 0.82;
    }
    .dailyHuntNugget:hover{ opacity: 1; transform: scale(1.12); }
    .dailyHuntNugget:active{ transform: scale(0.95); }
    @keyframes dailyHuntSparkle{
      0%,100%{ filter: drop-shadow(0 0 6px rgba(242,194,48,.6)); opacity: 0.9; }
      50%{ filter: drop-shadow(0 0 14px rgba(242,194,48,.9)); opacity: 1; }
    }

    /* ===== YOUR WINS (Spotlight + Achievements rails, Explore-card family) ===== */
    .yourWinsOuterBd{
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: var(--r);
      padding: 18px 16px 8px;
    }
    .yourWinsRailBlock{ margin-bottom: 18px; }
    .yourWinsRailBlock:last-child{ margin-bottom: 0; }
    .yourWinsRailLabel{
      font-size: 26px;
      font-weight: 900;
      letter-spacing: .02em;
      color: var(--ink);
    }
    .yourWinsRailSub{
      font-size: 20px;
      font-weight: 700;
      color: var(--muted);
      margin: 6px 0 10px;
      line-height: 1.35;
    }
    /* Spotlight + Achievements: canonical `.wrap.lanternContent .lanternScroller` (lantern-cards.css). L-Rail-1 — no track wrapper, no profile-only card width here. L-Rail-3a: removed orphan `#schoolActivitySection` track rules (no such node in app). */
    .pinnedRow{ display: flex; overflow-x: auto; gap: 14px; padding: 12px 0 16px; -webkit-overflow-scrolling: touch; margin-bottom: 16px; }
    .pinnedRowCard{ flex: 0 0 auto; min-width: 200px; max-width: 260px; padding: 0; border-radius: 14px; border: 1px solid rgba(242,194,48,.4); background: linear-gradient(180deg, rgba(242,194,48,.12), rgba(242,194,48,.04)); overflow: hidden; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
    .pinnedRowCard:hover{ transform: translateY(-2px); box-shadow: 0 6px 16px rgba(242,194,48,.2); }
    .pinnedRowThumb{ width: 100%; height: 100px; background-size: cover; background-position: center; background-color: rgba(0,0,0,.2); }
    .pinnedRowBody{ padding: 12px 14px; display: flex; align-items: center; gap: 8px; }
    .pinnedRowIcon{ font-size: 22px; }
    .pinnedRowTitle{ font-size: 22px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* ===== CHARACTER PICKER (preserved) ===== */
    .card{
      margin-top: 12px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border-radius: var(--r);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .cardHd{
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .cardHd .h{ font-weight: 900; letter-spacing: .2px; font-size: 26px; }
    .cardBd{ padding: 14px; }
    .note{ color: var(--muted); font-size: 22px; line-height: 1.35; }

    .btn{
      height: 52px;
      padding: 0 14px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.06);
      color: var(--ink);
      font-weight: 800;
      font-size: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      cursor: pointer;
      user-select: none;
      box-shadow: 0 6px 16px rgba(0,0,0,.22);
      text-decoration: none;
    }
    .btn:active{ transform: translateY(1px); }
    .btn.primary{ background: linear-gradient(180deg, rgba(90,167,255,.24), rgba(90,167,255,.1)); border-color: rgba(90,167,255,.4); }
    .btn.good{ background: linear-gradient(180deg, rgba(56,208,124,.22), rgba(56,208,124,.1)); border-color: rgba(56,208,124,.42); }
    .btn.small{ height: 44px; font-size: 20px; padding: 0 12px; }

    /* ===== TESTING CONTROLS (collapsible, preserved) ===== */
    .testingCard .cardHd{ cursor: pointer; }
    .testingCard.testingCardCollapsed .cardHd{ opacity: .85; color: var(--muted); }
    .testingCard.testingCardCollapsed .cardHd .h{ font-size: 22px; }
    .testingControls{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
    input[type="number"]{
      width: 90px;
      height: 44px;
      padding: 0 10px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: #0a1428;
      color: #fff;
      font-size: 22px;
    }

    /* ===== ACTIVITY TABLE (preserved for balance history) ===== */
    table{
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      font-size: 22px;
    }
    th, td{ padding: 10px; border-bottom: 1px solid rgba(255,255,255,.1); }
    th{ text-align: left; color: var(--muted); font-weight: 900; }
    tr:last-child td{ border-bottom: none; }
    .placeholderRow{ color: var(--muted); font-size: 22px; text-align: center; padding: 18px; }

    .toast{
      position: fixed;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      background: rgba(0,0,0,.72);
      border: 1px solid rgba(255,255,255,.12);
      color: rgba(233,241,255,.95);
      padding: 12px 14px;
      border-radius: 14px;
      box-shadow: var(--shadow);
      max-width: 92vw;
      display: none;
      z-index: 10000;
      font-weight: 950;
      font-size: 22px;
    }
    .toast.toast--postLive{
      border-color: rgba(56,208,124,.42);
      background: linear-gradient(180deg, rgba(56,208,124,.16), rgba(0,0,0,.78));
      padding: 14px 18px;
    }
    .toastPostLiveInner{ text-align: center; max-width: 22em; }
    .toastPostLiveTitle{ font-weight: 950; font-size: 22px; line-height: 1.25; }
    .toastPostLiveSub{ font-weight: 750; font-size: 20px; color: var(--muted); margin-top: 6px; line-height: 1.35; }
    .verifyModeBanner{ display: none; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 10px 14px; margin-bottom: 12px; border-radius: var(--r); border: 1px solid rgba(255,204,102,.5); background: linear-gradient(90deg, rgba(255,204,102,.18), rgba(255,204,102,.06)); font-size: 22px; }
    .verifyModeBanner.is-active{ display: flex; }
    .verifyModeBanner .verifyModeLabel{ font-weight: 900; color: var(--warn); }
    .verifyModeBanner .verifyModeSource{ font-weight: 800; color: var(--muted); }
    .verifyModeBanner .verifyModeIdentity{ font-weight: 900; }
    .verifyModeBanner .verifyModeId{ font-size: 20px; color: var(--muted); }
    .verifyModeBanner .verifyAvatarPreview{ width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: rgba(0,0,0,.2); flex-shrink: 0; }
    .verifyModeBanner .verifyAvatarEmoji{ font-size: 28px; line-height: 36px; width: 36px; height: 36px; text-align: center; flex-shrink: 0; }

    .lockerShell .contentScroller{
      margin-left: calc(-1 * var(--lantern-pad-x));
      margin-right: calc(-1 * var(--lantern-pad-x));
      padding-left: var(--lantern-pad-x);
      padding-right: var(--lantern-pad-x);
    }
    .lockerShell .lockerSectionHd,
    .lockerShell .lockerSectionSub{
      padding-left: 0;
      padding-right: 0;
    }

    /* Store tab: not a second page shell — fills Locker content width (no extra max-width / margin / padding) */
    .lockerShell .wrap:not(.lanternContent){
      max-width: 100%;
      margin-left: 0;
      margin-right: 0;
    }
    .lockerShell #lockerPanelStore > .storePanelRoot{
      padding-left: 0;
      padding-right: 0;
      max-width: 100%;
      margin-left: 0;
      margin-right: 0;
      box-sizing: border-box;
      min-width: 0;
    }

    /* Locker Overview — My Articles (same semantics as legacy news.html list; not production feed cards) */
    .profileMyArticlesPlaceholder{
      color: var(--muted);
      font-size: 22px;
      text-align: center;
      padding: 16px 12px;
      line-height: 1.45;
    }
    .myArticleItem{
      padding: 14px;
      margin-bottom: 10px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(0,0,0,.15);
    }
    .myArticleItem:last-child{ margin-bottom: 0; }
    .myArticleStatus{ font-weight: 900; font-size: 22px; }
    .myArticleStatus.pending{ color: var(--warn); }
    .myArticleStatus.approved{ color: var(--good); }
    .myArticleStatus.rejected{ color: var(--bad); }
    .myArticleStatus.returned{ color: var(--warn); }
    .myArticleFeedback{
      margin-top: 8px;
      padding: 10px;
      border-radius: 10px;
      background: rgba(255,204,102,.12);
      border: 1px solid rgba(255,204,102,.35);
      font-size: 20px;
      color: var(--warn);
    }
    .myArticleTitle{ font-size: 22px; margin-top: 6px; }
    .myArticleMeta{ font-size: 20px; color: var(--muted); margin-top: 4px; }