/* V23.9.287 STAGING — avatar-frame renderer + developer avatar */
.nav-account-avatar-shell,.avatar-frame-shell{position:relative;display:grid;place-items:center;isolation:isolate;overflow:visible!important;--frame-scale:1;--frame-x:0%;--frame-y:0%}
.avatar-frame-core{position:relative;z-index:1;display:grid;place-items:center;border-radius:50%;overflow:hidden;background:linear-gradient(145deg,#f59e0b,#ea580c);color:#fff}
.avatar-frame-layer{position:absolute;z-index:4;pointer-events:none;user-select:none;max-width:none!important;width:100%;height:100%;left:50%;top:50%;transform:translate(-50%,-50%);object-fit:contain;object-position:center;filter:drop-shadow(0 7px 16px rgba(2,6,23,.30))}
.avatar-frame-layer[src=""]{display:none}

/* Navigation avatar: outer frame box and inner avatar are intentionally different sizes. */
.nav-account-avatar-shell{width:56px;height:56px;flex:0 0 56px}
.nav-account-avatar-shell .nav-account-avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;overflow:hidden;background:linear-gradient(145deg,#f59e0b,#ea580c)!important;color:#fff;font-weight:900;box-shadow:none!important}
.nav-account-avatar img,.avatar-frame-core img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.nav-account-chip{overflow:visible!important;padding:3px 12px 3px 4px!important;gap:10px;min-height:62px}
.nav-account-chip:hover{overflow:visible!important}
@media(max-width:1180px){.nav-account-chip{padding:3px!important;max-width:60px;min-height:auto}.nav-account-avatar-shell{width:48px;height:48px;flex-basis:48px}.nav-account-avatar-shell .nav-account-avatar{width:32px;height:32px}}

/* Large profile avatar. 116px frame canvas / 72px inner avatar matches the normalized opening. */
.profile-avatar-large.avatar-frame-shell{width:116px!important;height:116px!important;padding:0!important;border:none!important;background:none!important;box-shadow:none!important;border-radius:50%!important;overflow:visible!important;flex:0 0 116px}
.profile-avatar-large.avatar-frame-shell>.avatar-frame-core{width:72px;height:72px;background:linear-gradient(145deg,rgba(30,41,59,.96),rgba(15,23,42,.96));border:1px solid rgba(255,255,255,.10)}
.profile-avatar-large.avatar-frame-shell>.avatar-frame-core>span{font-size:29px;font-weight:950;color:var(--gold)}
.profile-avatar-large.avatar-frame-shell .avatar-frame-layer{filter:drop-shadow(0 9px 20px rgba(2,6,23,.34))}

/* Public profile uses the same geometry ratio at a slightly larger presentation size. */
.public-profile-avatar.avatar-frame-shell{width:132px;height:132px;display:grid;place-items:center;flex:0 0 132px;background:none!important;border-radius:50%!important;overflow:visible!important}
.public-profile-avatar.avatar-frame-shell>.avatar-frame-core{width:82px;height:82px;font-size:2rem;font-weight:900;background:linear-gradient(145deg,#f59e0b,#ea580c)}
.public-profile-avatar.avatar-frame-shell .avatar-frame-layer{filter:drop-shadow(0 10px 22px rgba(2,6,23,.34))}

/* Frame picker: preview uses the exact same renderer, only scaled down. */
.profile-frame-picker-form{display:grid;gap:14px;margin-top:16px}
.profile-frame-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(142px,1fr));gap:12px;overflow:visible;padding:6px 4px 8px}
.profile-frame-choice{position:relative;display:grid;justify-items:center;align-content:start;gap:8px;min-height:142px;padding:12px 10px 11px;border:1px solid var(--line);border-radius:18px;background:rgba(15,23,42,.28);cursor:pointer;transition:.16s ease;min-width:0;overflow:visible}
.profile-frame-choice:hover{border-color:rgba(251,191,36,.34);background:rgba(251,191,36,.045);transform:translateY(-1px)}
.profile-frame-choice:has(input:checked){border-color:rgba(251,191,36,.58);background:rgba(251,191,36,.08);box-shadow:0 0 0 1px rgba(251,191,36,.14),0 10px 24px rgba(0,0,0,.14)}
.profile-frame-choice input{position:absolute;opacity:0;pointer-events:none}
.profile-frame-choice b{max-width:100%;font-size:10px;line-height:1.25;text-align:center;color:var(--muted-strong);white-space:normal;margin-top:1px}
.profile-frame-preview.avatar-frame-shell{width:92px;height:92px;display:grid;place-items:center;border-radius:50%;background:none!important;color:#fff;font-size:19px;font-weight:950;overflow:visible}
.profile-frame-preview.avatar-frame-shell>.avatar-frame-core{width:58px;height:58px;background:radial-gradient(circle at 30% 30%,#fb923c 0%,#f59e0b 42%,#ea580c 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 8px 18px rgba(2,6,23,.16)}
.profile-frame-preview i{display:grid;place-items:center;width:100%;height:100%;font-style:normal}
.profile-frame-preview.avatar-frame-shell .avatar-frame-layer{filter:drop-shadow(0 6px 13px rgba(2,6,23,.28))}
.developer-frame-picker{grid-template-columns:repeat(auto-fill,minmax(142px,1fr))}

@media(max-width:820px){
  .profile-avatar-large.avatar-frame-shell{width:96px!important;height:96px!important;flex-basis:96px}
  .profile-avatar-large.avatar-frame-shell>.avatar-frame-core{width:60px;height:60px}
  .profile-avatar-large.avatar-frame-shell>.avatar-frame-core>span{font-size:24px}
}
@media(max-width:620px){
  .profile-frame-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .profile-frame-choice{min-height:126px;padding:10px 7px}
  .profile-frame-preview.avatar-frame-shell{width:80px;height:80px}
  .profile-frame-preview.avatar-frame-shell>.avatar-frame-core{width:50px;height:50px}
}
@media(max-width:520px){.profile-avatar-large.avatar-frame-shell{display:none}}
.profile-frame-choice,
.help-panel,
.parent-picker-card,
.attention-row,
.parent-subject-list article,
.family-access-grid .card{border-width:1.35px!important}

.nav-account-avatar-shell{width:62px;height:62px;flex:0 0 62px}
.nav-account-avatar-shell .nav-account-avatar{width:44px;height:44px}
.nav-account-chip{min-height:68px;padding:3px 13px 3px 4px!important}

.profile-avatar-large.avatar-frame-shell{width:124px!important;height:124px!important;flex:0 0 124px}
.profile-avatar-large.avatar-frame-shell>.avatar-frame-core{width:82px;height:82px}
.profile-avatar-large.avatar-frame-shell>.avatar-frame-core>span{font-size:31px}
.public-profile-avatar.avatar-frame-shell>.avatar-frame-core{width:88px;height:88px}
.profile-frame-preview.avatar-frame-shell>.avatar-frame-core{width:60px;height:60px}
.profile-avatar-preview{width:88px!important;height:88px!important;flex-basis:88px}

@media(max-width:1180px){
  .nav-account-avatar-shell{width:52px;height:52px;flex-basis:52px}
  .nav-account-avatar-shell .nav-account-avatar{width:36px;height:36px}
}
@media(max-width:820px){
  .profile-avatar-large.avatar-frame-shell{width:104px!important;height:104px!important;flex-basis:104px}
  .profile-avatar-large.avatar-frame-shell>.avatar-frame-core{width:68px;height:68px}
  .profile-avatar-large.avatar-frame-shell>.avatar-frame-core>span{font-size:26px}
}
@media(max-width:620px){
  .profile-frame-preview.avatar-frame-shell>.avatar-frame-core{width:52px;height:52px}
}

/* V23.9.291 STAGING — performance polish, larger labels and avatar presentation */
.hero,
.card,
.stat,
.profile-card,
.public-card,
.admin-card,
.quiet-hero,
.quiet-page-head,
.profile-frame-choice,
.help-panel,
.parent-picker-card,
.attention-row,
.parent-subject-list article,
.family-access-grid .card{border-width:1.5px!important}

.nav-account-avatar-shell{width:64px;height:64px;flex-basis:64px}
.nav-account-avatar-shell .nav-account-avatar{width:46px;height:46px}
.nav-account-chip{min-height:70px}
.profile-avatar-large.avatar-frame-shell{width:144px!important;height:144px!important;flex:0 0 144px}
.profile-avatar-large.avatar-frame-shell>.avatar-frame-core{width:100px;height:100px}
.profile-avatar-large.avatar-frame-shell>.avatar-frame-core>span{font-size:36px}
.profile-frame-choice-main>input{position:absolute;opacity:0;pointer-events:none}
.profile-frame-swatches{display:flex;align-items:center;justify-content:center;gap:8px;min-height:24px;margin-top:2px;position:relative;z-index:8}
.frame-color-swatch{display:grid;place-items:center;cursor:pointer;padding:2px;border-radius:7px}
.frame-color-swatch input{position:absolute!important;opacity:0!important;pointer-events:none!important}
.frame-color-swatch span{display:block;width:18px;height:18px;border-radius:5px;background:var(--frame-swatch);border:1px solid rgba(255,255,255,.22);box-shadow:0 2px 8px rgba(2,6,23,.24);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.frame-color-swatch .frame-swatch-red{--frame-swatch:#b91c2b}.frame-color-swatch .frame-swatch-blue{--frame-swatch:#2563eb}
.frame-color-swatch:hover span{transform:translateY(-1px) scale(1.06)}
.frame-color-swatch:has(input:checked) span{border-color:#fff;box-shadow:0 0 0 2px rgba(249,115,22,.7),0 3px 12px rgba(2,6,23,.30)}
.profile-frame-choice[data-frame-code="developer"]{min-height:174px}
.profile-frame-choice[data-frame-code="developer"]:has(input[name="reward_style"]:checked){box-shadow:0 0 0 1px rgba(251,191,36,.18),0 12px 28px rgba(0,0,0,.16)}

.developer-frame-fieldset{min-width:0;margin:0;padding:0;border:0;display:grid;gap:7px}
.developer-frame-fieldset>legend{padding:0;margin:0 0 2px;font-size:12px;font-weight:800;color:var(--text)}
.developer-frame-scroll{display:grid;gap:7px;max-height:252px;overflow-y:auto;overscroll-behavior:contain;padding:5px 7px 5px 3px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--card2) 88%,transparent);scrollbar-width:thin;scrollbar-color:rgba(249,115,22,.65) rgba(148,163,184,.08)}
.developer-frame-scroll::-webkit-scrollbar{width:8px}.developer-frame-scroll::-webkit-scrollbar-track{background:rgba(148,163,184,.08);border-radius:99px}.developer-frame-scroll::-webkit-scrollbar-thumb{background:linear-gradient(#fb923c,#ea580c);border-radius:99px}
.developer-frame-scroll-item{display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;gap:10px;min-height:60px;padding:6px 9px;border:1px solid transparent;border-radius:12px;cursor:pointer;transition:.14s ease;background:rgba(15,23,42,.18)}
.developer-frame-scroll-item:hover{background:rgba(249,115,22,.055);border-color:rgba(249,115,22,.22)}
.developer-frame-scroll-item>input{position:absolute;opacity:0;pointer-events:none}
.developer-frame-scroll-item:has(input:checked){background:rgba(249,115,22,.10);border-color:rgba(249,115,22,.58);box-shadow:inset 3px 0 #f97316}
.developer-frame-scroll-item>b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.developer-frame-scroll-preview.avatar-frame-shell{width:48px;height:48px}
.developer-frame-scroll-preview.avatar-frame-shell>.avatar-frame-core{width:31px;height:31px;font-size:11px;background:linear-gradient(145deg,#f59e0b,#ea580c)}
.developer-frame-admin-grid>form{min-width:0;overflow:visible!important}

@media(max-width:620px){
  .profile-frame-choice[data-frame-code="developer"]{min-height:150px}
  .frame-color-swatch span{width:17px;height:17px}
  .developer-frame-scroll{max-height:220px}
}
.profile-avatar-settings-v377{overflow:visible!important}
.profile-avatar-settings-row-v377{
  display:grid!important;grid-template-columns:minmax(0,1fr) 172px!important;
  align-items:center!important;gap:22px!important;min-height:168px!important
}
.profile-avatar-upload-actions-v377{
  display:flex!important;align-items:center!important;align-content:center!important;gap:10px!important;flex-wrap:wrap!important;min-width:0!important
}
.profile-avatar-preview-note{
  flex-basis:100%!important;display:block!important;max-width:390px!important;color:var(--muted)!important;
  font-size:.72rem!important;line-height:1.45!important;margin-top:2px!important
}
.profile-avatar-stage{
  justify-self:end!important;width:156px!important;height:156px!important;display:grid!important;place-items:center!important;
  flex:0 0 156px!important;border-radius:50%!important;background:none!important;overflow:visible!important
}
.profile-avatar-stage>.avatar-frame-core{
  width:96px!important;height:96px!important;border-radius:50%!important;
  background:linear-gradient(145deg,rgba(30,41,59,.96),rgba(15,23,42,.96))!important;
  border:1px solid rgba(255,255,255,.10)!important;box-shadow:0 12px 28px rgba(2,6,23,.20)!important
}
.profile-avatar-stage>.avatar-frame-core>img{
  width:100%!important;height:100%!important;object-fit:cover!important;border-radius:50%!important;display:block!important
}
.profile-avatar-stage>.avatar-frame-core>span{font-size:2rem!important;font-weight:950!important;color:var(--gold)!important}
.profile-avatar-stage .avatar-frame-layer{width:116%!important;height:116%!important}
.profile-avatar-stage.frame-preview-hidden .avatar-frame-layer{display:none!important}

.profile-frame-visibility-toggle{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:34px!important;
  padding:6px 10px!important;border:1px solid var(--line)!important;border-radius:999px!important;
  background:rgba(148,163,184,.08)!important;color:var(--muted-strong)!important;font:800 .70rem/1 Inter,sans-serif!important;cursor:pointer!important
}
.profile-frame-visibility-toggle[aria-pressed="true"]{
  border-color:rgba(251,191,36,.34)!important;background:rgba(251,191,36,.08)!important;color:#fbbf24!important
}

/* Frames now live above achievements and have their own visual hierarchy. */
.profile-decoration-card-v377{overflow:visible!important}
.profile-decoration-card-v377 .profile-card-head>div>small{
  display:block!important;margin-top:4px!important;color:var(--muted)!important;font-size:.72rem!important;line-height:1.4!important
}
.profile-current-frame{
  flex:0 0 auto!important;padding:7px 10px!important;border:1px solid rgba(251,191,36,.26)!important;border-radius:999px!important;
  background:rgba(251,191,36,.07)!important;color:#fbbf24!important;font-size:.70rem!important;white-space:nowrap!important
}

/* Old :has(input:checked) also matched checked variant radios inside an inactive
   card. Explicit is-selected is the source of truth from V377 onward. */
.profile-frame-choice:not(.is-selected){
  border-color:var(--line)!important;background:rgba(15,23,42,.28)!important;box-shadow:none!important
}
.profile-frame-choice.is-selected{
  border-color:rgba(251,191,36,.72)!important;background:linear-gradient(180deg,rgba(251,191,36,.10),rgba(251,191,36,.045))!important;
  box-shadow:0 0 0 1px rgba(251,191,36,.18),0 14px 30px rgba(0,0,0,.17)!important
}
.profile-frame-selected-mark{
  display:none!important;padding:4px 8px!important;border-radius:999px!important;background:rgba(251,191,36,.12)!important;
  color:#fbbf24!important;font-size:.62rem!important;font-weight:900!important;line-height:1!important
}
.profile-frame-choice.is-selected .profile-frame-selected-mark{display:inline-flex!important}
.profile-frame-choice-main{cursor:pointer!important}
.profile-frame-preview>.avatar-frame-core>img{
  width:100%!important;height:100%!important;object-fit:cover!important;border-radius:50%!important;display:block!important
}

/* Keep the header frame fully visible: mobile shell gives it a little more
   frame canvas while the inner photo keeps its existing readable size. */
@media(max-width:760px){
  body.mobile-shell-v374 .navbar .nav-account-avatar-shell{width:48px!important;height:48px!important;flex:0 0 48px!important}
  body.mobile-shell-v374 .navbar .nav-account-avatar-shell .nav-account-avatar{width:32px!important;height:32px!important}
  body.mobile-shell-v374 .navbar .nav-account-chip{pointer-events:auto!important}
  body.mobile-shell-v374 .navbar .nav-account-chip *{pointer-events:auto!important}
  .profile-avatar-settings-row-v377{
    grid-template-columns:minmax(0,1fr) 136px!important;gap:12px!important;min-height:142px!important
  }
  .profile-avatar-stage{width:132px!important;height:132px!important;flex-basis:132px!important}
  .profile-avatar-stage>.avatar-frame-core{width:82px!important;height:82px!important}
  .profile-frame-picker{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:430px){
  .profile-avatar-settings-row-v377{
    grid-template-columns:minmax(0,1fr) 124px!important;align-items:center!important
  }
  .profile-avatar-stage{width:120px!important;height:120px!important}
  .profile-avatar-stage>.avatar-frame-core{width:74px!important;height:74px!important}
  .profile-avatar-upload-actions-v377 .btn{min-width:0!important;padding-left:12px!important;padding-right:12px!important}
  .profile-avatar-preview-note{font-size:.66rem!important}
}

/* V300: authentic V406 developer-only frame picker. */
.oct15-profile-editor .profile-frame-choice-main{display:grid;justify-items:center;gap:7px;cursor:pointer}
.oct15-profile-editor .profile-frame-visibility-toggle{cursor:pointer}
.oct15-profile-editor .profile-avatar-settings-row{min-height:130px}
.oct15-profile-editor .profile-avatar-stage{margin-left:auto}
.oct15-profile-editor .profile-frame-picker{grid-template-columns:repeat(2,minmax(110px,168px));gap:13px}
.oct15-profile-editor .profile-frame-choice b{font-size:12px}
.oct15-profile-editor .profile-frame-picker-form{margin:0}
.oct15-profile-editor .profile-frame-picker-form button[type=submit]{justify-self:start}
.oct15-profile-editor .profile-frame-selected-mark{display:none}
.oct15-profile-editor .profile-frame-choice.is-selected .profile-frame-selected-mark{display:inline-flex}
.oct15-avatar-shell{position:relative;display:grid!important;place-items:center!important;isolation:isolate;overflow:visible!important;border:none!important;background:transparent!important;box-shadow:none!important;flex-shrink:0}
.oct15-avatar-shell>.oct15-avatar-core{position:relative;display:grid;place-items:center;width:65%;height:65%;border-radius:50%;overflow:hidden;background:linear-gradient(145deg,#f59e0b,#ea580c);color:#fff;font-weight:850}
.oct15-avatar-core img{width:100%;height:100%;object-fit:cover;display:block}
.oct15-avatar-shell>.oct15-frame-overlay{position:absolute;z-index:2;width:100%;height:100%;inset:0;object-fit:contain;pointer-events:none;user-select:none;max-width:none;filter:drop-shadow(0 4px 9px rgba(0,0,0,.24))}
.nav-account-avatar.oct15-avatar-shell{width:56px!important;height:56px!important;min-width:56px!important;border-radius:50%!important;overflow:visible!important}
.nav-account-avatar.oct15-avatar-shell>.oct15-avatar-core{width:36px;height:36px}
.profile-avatar-large.oct15-avatar-shell{width:116px!important;height:116px!important;flex-basis:116px!important}
.profile-avatar-large.oct15-avatar-shell>.oct15-avatar-core{width:72px;height:72px}
.oct15-profile-editor{padding:22px;overflow:visible}
.oct15-profile-editor .profile-avatar-stage.avatar-frame-shell>.avatar-frame-core{overflow:hidden}
.oct15-profile-editor .profile-frame-preview .avatar-frame-core{overflow:hidden}
.oct15-profile-editor .avatar-frame-layer{width:100%!important;height:100%!important}
.oct15-profile-editor .profile-frame-swatches{display:flex;gap:11px;align-items:center;justify-content:center}
.oct15-profile-editor .frame-color-swatch{display:grid;place-items:center;cursor:pointer}
.oct15-profile-editor .frame-color-swatch span{width:22px;height:22px;display:block;border-radius:6px}
.oct15-profile-editor .frame-color-swatch .frame-swatch-red{background:#b91c2b}.oct15-profile-editor .frame-color-swatch .frame-swatch-blue{background:#2563eb}
.oct15-profile-editor .frame-color-swatch:has(input:checked) span{outline:2px solid #f59e0b;outline-offset:3px}
.oct15-profile-editor [data-profile-status]{min-height:20px;color:var(--muted)}
@media(max-width:820px){.nav-account-avatar.oct15-avatar-shell{width:48px!important;height:48px!important;min-width:48px!important}.nav-account-avatar.oct15-avatar-shell>.oct15-avatar-core{width:32px;height:32px}}
@media(max-width:500px){.oct15-profile-editor .profile-frame-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.oct15-profile-editor .profile-avatar-stage{margin:6px auto 0}}

/* Override earlier mobile shell avatar clipping: full ornamental frame remains visible. */
body.mobile-shell-v370 .navbar .nav-account-avatar.oct15-avatar-shell {width:48px!important;height:48px!important;min-width:48px!important;overflow:visible!important;padding:0!important;max-width:none!important;flex-shrink:0!important;border-radius:50%!important;}
body.mobile-shell-v370 .navbar .nav-account-avatar.oct15-avatar-shell>.oct15-avatar-core {width:32px;height:32px;overflow:hidden!important;border-radius:50%!important;}
body.mobile-shell-v370 .navbar .nav-account-avatar.oct15-avatar-shell>.oct15-frame-overlay {width:100%;height:100%;position:absolute!important;inset:0;object-fit:contain!important;}