/* Classroom display: compact private account badge, swipe navigation, original rank emblems. */
.brand-hero { grid-template-columns:50px minmax(0,1fr) auto; gap:10px; align-items:center; }
.brand-hero .brand-mark { width:50px; height:50px; align-self:center; }
.brand-hero .brand-copy { gap:2px; }
.brand-hero .brand-copy h1 { font-size:26px; line-height:1.1; }
.brand-hero .header-class-line { font-size:11px; line-height:1.2; gap:6px; }
.brand-hero #classSwitchButton { min-height:24px; padding:2px 7px; font-size:11px; }
.account-avatar-button { min-width:0; }
.account-avatar-label { white-space:nowrap; }
.header-account .sync-compact,
.header-account .account-avatar-button { width:38px; height:38px; min-width:38px; min-height:38px; padding:5px; border-radius:10px; }
.header-account .account-avatar-button { display:grid; grid-template-columns:1fr; place-items:center; gap:0; }
.header-account .sync-status-icon { width:21px; height:21px; margin:0; }
.header-account .account-avatar-frame { width:26px; height:26px; flex:0 0 26px; }
.morality-card { --metal:#aa7145; --shine:#f3d3a4; --depth:#6c442a; --gem:#d5a36e; background:linear-gradient(155deg,var(--surface),color-mix(in srgb,var(--metal) 9%,var(--surface))); border:1px solid color-mix(in srgb,var(--metal) 32%,var(--line)); border-radius:10px; padding-top:4px; }
.rank-silver { --metal:#8197ac; --shine:#eef5ff; --depth:#445a72; --gem:#bddef2; }
.rank-gold { --metal:#d5a12a; --shine:#fff0a0; --depth:#846018; --gem:#f4c13a; }
.rank-platinum { --metal:#37a39a; --shine:#c4fff0; --depth:#256a74; --gem:#56ead6; }
.rank-diamond { --metal:#548fdd; --shine:#d9f5ff; --depth:#364987; --gem:#7bd8ff; }
.rank-star { --metal:#9165cf; --shine:#f0d9ff; --depth:#553274; --gem:#d09cff; }
.rank-king { --metal:#cc8324; --shine:#fff2be; --depth:#814822; --gem:#ef6354; }
.rank-legend { --metal:#d47836; --shine:#fff2ad; --depth:#9c3d32; --gem:#fa8b4e; }
.rank-myth { --metal:#b55798; --shine:#ffe1ac; --depth:#643065; --gem:#f69be3; }
.rank-practice { --metal:#9b9ba1; --shine:#e7e8ec; --depth:#676874; --gem:#aeb1bb; }
.rank-warning { --metal:#cc5252; --shine:#ffdddd; --depth:#9b3038; --gem:#e85454; }
.rank-emblem { --crest:polygon(14% 0,86% 0,100% 24%,92% 80%,50% 100%,8% 80%,0 24%); position:relative; isolation:isolate; width:76px; height:44px; margin:1px auto 0; display:flex; flex-direction:column; justify-content:center; align-items:center; filter:drop-shadow(0 2px 2px rgb(25 30 50 / 15%)); }
.rank-emblem::before { content:''; position:absolute; inset:0; z-index:-2; clip-path:var(--crest); background:linear-gradient(135deg,var(--depth),var(--shine) 23%,var(--metal) 42%,var(--shine) 58%,var(--metal) 80%,var(--depth)); }
.rank-emblem::after { content:''; position:absolute; inset:3px 5px 4px; z-index:-1; clip-path:var(--crest); background:radial-gradient(ellipse at top,color-mix(in srgb,var(--shine) 42%,white),var(--surface) 75%); box-shadow:inset 0 0 6px var(--metal); }
.morality-card-detail .rank-emblem .morality-score strong { color:var(--depth); font-size:24px; line-height:25px; letter-spacing:-.6px; }
.rank-name { font-size:8px; font-weight:800; color:var(--depth); line-height:10px; white-space:nowrap; }
.rank-silver .rank-emblem { --crest:polygon(0 9%,25% 17%,50% 0,75% 17%,100% 9%,90% 68%,50% 100%,10% 68%); }
.rank-gold .rank-emblem { --crest:polygon(0 0,27% 16%,50% 0,73% 16%,100% 0,93% 76%,50% 100%,7% 76%); }
.rank-platinum .rank-emblem { --crest:polygon(0 23%,20% 25%,30% 0,50% 14%,70% 0,80% 25%,100% 23%,86% 74%,50% 100%,14% 74%); }
.rank-diamond .rank-emblem { --crest:polygon(0 37%,23% 9%,40% 14%,50% 0,60% 14%,77% 9%,100% 37%,76% 77%,50% 100%,24% 77%); }
.rank-star .rank-emblem { --crest:polygon(0 12%,28% 23%,50% 0,72% 23%,100% 12%,88% 53%,100% 69%,66% 84%,50% 100%,34% 84%,0 69%,12% 53%); }
.rank-king .rank-emblem,.rank-legend .rank-emblem,.rank-myth .rank-emblem { --crest:polygon(0 0,22% 24%,29% 5%,40% 20%,50% 0,60% 20%,71% 5%,78% 24%,100% 0,94% 70%,70% 88%,50% 100%,30% 88%,6% 70%); }
.rank-legend .rank-emblem { filter:drop-shadow(0 0 3px #e9ab50); }
.rank-myth .rank-emblem { filter:drop-shadow(0 0 3px #c18adb); }
.morality-card-detail .morality-card-status { position:absolute; top:4px; right:4px; font-size:9px; line-height:11px; }
.morality-card.is-warning { border:1px solid #d94444; background:color-mix(in srgb,#d94444 9%,var(--surface)); }
.morality-card-detail h3 { margin:1px 0; }
@media screen and (min-width:1100px) {
  .morality-card-detail .morality-seat { line-height:10px; }
  .morality-card-detail h3 { font-size:14px; line-height:16px; }
  .morality-card-actions { margin-top:2px; }
  .morality-card-actions button { height:27px; min-height:27px; }
}
@media screen and (max-width:760px) {
  .brand-hero { grid-template-columns:40px minmax(0,1fr) auto; gap:4px 8px; padding-bottom:8px; margin-bottom:8px; }
  .brand-hero .brand-mark { width:40px; height:40px; grid-column:1; grid-row:1; }
  .brand-hero .brand-copy { grid-column:2; grid-row:1; gap:1px; }
  .brand-hero .brand-copy h1 { font-size:22px; line-height:1.1; }
  .brand-hero .header-class-line { font-size:10px; gap:4px; }
  .brand-hero .header-account { grid-column:3; grid-row:1; justify-self:end; flex-wrap:nowrap; gap:5px; margin:0; }
  .header-account .account-avatar-button,.header-account #teacherSyncStatusButton { width:34px; height:34px; min-width:34px; min-height:34px; padding:4px; }
  .header-account .account-avatar-frame { width:24px; height:24px; flex-basis:24px; }
  .home-student-directory-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; gap:6px; }
  .home-student-directory-actions button { min-width:0; padding-inline:5px; }
  #primaryNavigation { display:flex; flex-direction:row; flex-wrap:nowrap; gap:4px; padding:4px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:thin; touch-action:pan-x pan-y; }
  #primaryNavigation .primary-nav-item { flex:0 0 68px; width:68px; min-height:46px; gap:3px; padding:5px 4px; scroll-snap-align:center; }
  #primaryNavigation .primary-nav-item .ui-icon { width:17px; height:17px; }
  .primary-sidebar { position:static; }
  .rank-emblem { width:90px; height:54px; }
  .morality-card-detail .rank-emblem .morality-score strong { font-size:29px; line-height:31px; }
  .rank-name { font-size:10px; line-height:12px; }
  .morality-card-detail { min-height:0; }
  .morality-card-detail h3 { margin:3px 0; }
}