:root {
  --color-success: #16794a;
  --color-warning: #9a6700;
  --color-danger: #b42318;
  --color-neutral: #475467;
  --color-ink: #182230;
  --color-ink-muted: #475467;
  --color-canvas: #f8fafc;
  --color-surface: #ffffff;
  --color-border: #d0d5dd;
  --focus-ring: #155eef;
  --radius-sm: .375rem;
  --radius-md: .625rem;
  --radius-lg: 1rem;
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem;
  --shadow-card: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 10%);
}

[data-portal="studio"] { --portal-primary: #1467d9; --portal-primary-dark: #0b4aa6; --portal-primary-light: #dbeafe; --portal-surface: #f3f8ff; }
[data-portal="admin"] { --portal-primary: #bb2518; --portal-primary-dark: #8c1d16; --portal-primary-light: #fee9e7; --portal-surface: #f6f7f9; }
[data-portal="company"] { --portal-primary: #087b78; --portal-primary-dark: #05615f; --portal-primary-light: #d5f5f3; --portal-surface: #f0fbfa; }

.portal-shell { background: var(--portal-surface); color: var(--color-ink); min-height: 100%; }
.portal-primary-action { background: var(--portal-primary); border: 1px solid var(--portal-primary); border-radius: var(--radius-md); color: var(--portal-primary-ink,#fff); }
.portal-primary-action:hover { background: var(--portal-primary-dark); border-color: var(--portal-primary-dark); }
.portal-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.portal-nav__item[aria-current="page"] { background: var(--portal-primary-light); color: var(--portal-primary-dark); font-weight: 600; }
.status-danger, .destructive-action { background: #fef3f2; border-color: var(--color-danger); color: #912018; }
.portal-primary-action:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.skip-link { position: fixed; z-index: 1000; top: .5rem; left: .5rem; padding: .7rem 1rem; border-radius: var(--radius-md); color: #fff; background: var(--color-ink); font-weight: 800; text-decoration: none; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
img { max-width: 100%; }
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.button,
.portal-primary-action,
.destructive-action,
.onboarding-action,
[role="button"] { white-space: nowrap !important; }
.status-pill { max-width: 100%; overflow-wrap: anywhere; }
form[aria-busy="true"] { cursor: progress; }
main.app-navigation-departing,main.app-screen-building { position: relative; }
main.app-navigation-departing > :not(.app-navigation-skeleton) { display: none !important; }
html.app-navigation-arriving :is(main#main-content,main.deletion-content) { visibility: hidden; }
html.app-navigation-arriving :is(main#main-content,main.deletion-content).app-screen-building { visibility: visible; pointer-events: none; }
main.app-screen-building > :not(.app-navigation-skeleton) { visibility: hidden; }
main.app-screen-building.app-screen-revealing > :not(.app-navigation-skeleton) { visibility: visible; animation: app-navigation-content-in .25s ease both; }
@keyframes app-navigation-content-in { from { opacity: 0; } to { opacity: 1; } }
.app-navigation-skeleton { position: absolute; z-index: 10; top: 0; left: 0; width: 100%; overflow: hidden; background: var(--portal-surface,var(--color-canvas,#f8fafc)); pointer-events: none; }
.app-navigation-skeleton.is-morphing { transition: height .34s ease; }
.app-navigation-skeleton.is-revealing { opacity: 0; transition: opacity .25s ease; }
.app-navigation-skeleton__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.app-navigation-skeleton__tile { position: absolute; display: flex; flex-direction: column; gap: .75rem; min-width: 0; overflow: hidden; border: 1px solid var(--color-border,#d8e0ec); border-radius: .9rem; padding: 1.15rem; background: var(--shop-card,var(--color-surface,#fff)); box-shadow: 0 8px 20px rgb(15 23 42 / 5%); transform-origin: center; animation: app-build-snap var(--nav-build-duration,1s) cubic-bezier(.2,.75,.25,1) var(--nav-build-delay,0s) both; }
.app-navigation-skeleton__tile.is-settled { animation: none; }
.app-navigation-skeleton__tile.is-morphing { transition: left .34s ease,top .34s ease,width .34s ease,height .34s ease,opacity .34s ease; }
.app-navigation-skeleton__tile::after { position: absolute; inset: 0; background: linear-gradient(105deg,transparent 25%,color-mix(in srgb,var(--portal-primary,#2563eb) 8%,transparent) 50%,transparent 75%); content: ''; transform: translateX(-110%); animation: app-build-sheen 2s ease-in-out infinite; }
.app-navigation-skeleton__tile i { display: block; flex: 0 0 auto; width: 62%; height: .65rem; border-radius: 999px; background: color-mix(in srgb,var(--color-border,#d8e0ec) 78%,var(--shop-card,#fff)); animation: app-skeleton-wait 1.6s ease-in-out var(--nav-wait-delay,1.5s) infinite; }
.app-navigation-skeleton__tile i:first-child { width: 38%; }
.app-navigation-skeleton__tile i:nth-child(2) { width: 84%; }
.app-navigation-skeleton__tile--heading,.app-navigation-skeleton__tile--utility { border: 0; box-shadow: none; background: transparent; }
.app-navigation-skeleton__tile--heading { padding: .4rem 0; }
.app-navigation-skeleton__tile--heading i:first-child { width: 56%; height: 1.35rem; }
.app-navigation-skeleton__tile--heading i:nth-child(2) { width: 33%; }
.app-navigation-skeleton__tile--utility { padding: .45rem 0; }
.app-navigation-skeleton__tile--utility i:first-child { width: 25%; }
.app-navigation-skeleton__tile--utility i:nth-child(n+2) { display: none; }
.app-navigation-skeleton__tile--control { justify-content: center; gap: 0; border-radius: .6rem; padding: .5rem .75rem; }
.app-navigation-skeleton__tile--control i:first-child { width: 75%; }
.app-navigation-skeleton__tile--control i:nth-child(n+2) { display: none; }
.app-build-tile { position: relative; display: flex; flex-direction: column; gap: .65rem; min-width: 0; overflow: hidden; border: 1px solid var(--color-border,#d8e0ec); border-radius: .95rem; padding: 1.1rem; background: var(--shop-card,var(--color-surface,#fff)); box-shadow: 0 8px 20px rgb(15 23 42 / 5%); transform-origin: center; animation: app-build-snap 1s cubic-bezier(.2,.75,.25,1) both; }
.app-build-tile:nth-child(1) { --build-x: 75px; --build-y: 78px; --build-rotate: -12deg; --build-scale: .83; animation-delay: 0s; }
.app-build-tile:nth-child(2) { --build-x: -72px; --build-y: 63px; --build-rotate: 14deg; --build-scale: .76; animation-delay: .1s; }
.app-build-tile:nth-child(3) { --build-x: 86px; --build-y: -108px; --build-rotate: 11deg; --build-scale: .78; animation-delay: .2s; }
.app-build-tile:nth-child(4) { --build-x: -58px; --build-y: 82px; --build-rotate: -15deg; --build-scale: .87; animation-delay: .3s; }
.app-build-tile::before { width: 2.25rem; height: .35rem; border-radius: 999px; background: var(--portal-primary,#2563eb); opacity: .5; content: ''; }
.app-build-tile::after { position: absolute; inset: 0; background: linear-gradient(105deg,transparent 30%,color-mix(in srgb,var(--portal-primary,#2563eb) 7%,transparent) 50%,transparent 70%); content: ''; transform: translateX(-110%); animation: app-build-sheen 2.2s ease-in-out 1.1s infinite; pointer-events: none; }
.app-build-tile i { display: block; height: .6rem; border-radius: .4rem; background: color-mix(in srgb,var(--color-border,#d8e0ec) 80%,var(--shop-card,#fff)); }
.app-build-tile i:first-child { width: 48%; margin-top: .35rem; }
.app-build-tile i:nth-child(2) { width: 82%; }
.app-build-tile i:nth-child(3) { width: 64%; }
@keyframes app-build-snap { 0%,14% { opacity: .9; transform: translate3d(var(--build-x),var(--build-y),0) rotate(var(--build-rotate)) scale(var(--build-scale)); } 68% { opacity: 1; transform: translate3d(-3px,5px,0) rotate(-.7deg) scale(1.025); } 84% { transform: translate3d(1px,-3px,0) rotate(.3deg) scale(.99); } 100% { opacity: 1; transform: none; } }
@keyframes app-build-sheen { to { transform: translateX(110%); } }
@keyframes app-skeleton-wait { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
.quick-create-loading { display: grid; gap: 1rem; min-height: 15rem; padding: 1.5rem; color: var(--color-ink,#172033); }
.quick-create-loading__heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.quick-create-build { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; }
.quick-create-build .app-build-tile--form { grid-column: span 1; min-height: 5.5rem; }
.quick-create-build .app-build-tile--form-wide { grid-column: span 2; min-height: 5.5rem; }
.quick-create-build .app-build-tile:last-child { animation-delay: .5s; }
@media(max-width:700px) { .quick-create-build .app-build-tile:nth-child(1) { --build-x: 26px; --build-y: 48px; } .quick-create-build .app-build-tile:nth-child(2) { --build-x: -30px; --build-y: 42px; } .quick-create-build .app-build-tile:nth-child(3) { --build-x: 28px; --build-y: -55px; } .quick-create-build .app-build-tile:nth-child(4) { --build-x: -24px; --build-y: 58px; } }
@media(prefers-reduced-motion:reduce) { html.app-navigation-arriving :is(main#main-content,main.deletion-content) { visibility: visible; } main.app-screen-building.app-screen-revealing > :not(.app-navigation-skeleton),.app-navigation-skeleton__tile,.app-navigation-skeleton__tile i,.app-navigation-skeleton__tile::after,.app-build-tile,.app-build-tile::after { animation: none; opacity: 1; transform: none; translate: none; rotate: none; scale: none; filter: none; } .app-navigation-skeleton__tile::after,.app-build-tile::after { display: none; } }
.app-transition-indicator { position: fixed; z-index: 5000; top: max(1rem,env(safe-area-inset-top)); right: max(1rem,env(safe-area-inset-right)); display: flex; align-items: center; gap: .72rem; width: max-content; max-width: min(24rem,calc(100vw - 2rem)); min-height: 3.7rem; overflow: hidden; border: 1px solid color-mix(in srgb,var(--portal-primary,#2563eb) 28%,var(--color-border)); border-radius: .9rem; padding: .65rem .85rem; color: var(--color-ink); background: color-mix(in srgb,var(--shop-card,var(--color-surface)) 94%,transparent); box-shadow: 0 14px 38px rgb(15 23 42 / 18%); backdrop-filter: blur(14px); pointer-events: none; animation: app-transition-arrive .18s ease-out both; }
.app-transition-indicator::after { position: absolute; right: 0; bottom: 0; left: 0; height: .18rem; background: linear-gradient(90deg,transparent,var(--portal-primary,#2563eb),transparent); content: ""; animation: app-transition-sweep 1.05s ease-in-out infinite; transform: translateX(-100%); }
.app-transition-motion { position: relative; display: flex; flex: 0 0 2.35rem; align-items: center; justify-content: center; gap: .2rem; width: 2.35rem; height: 2.35rem; border-radius: .72rem; color: var(--portal-primary-ink,#fff); background: linear-gradient(135deg,var(--portal-primary,#2563eb),color-mix(in srgb,var(--portal-primary,#2563eb) 52%,#7c3aed)); box-shadow: 0 7px 18px color-mix(in srgb,var(--portal-primary,#2563eb) 24%,transparent); }
.app-transition-motion i { width: .27rem; height: .27rem; border-radius: 50%; background: currentColor; animation: app-transition-step .82s ease-in-out infinite; }
.app-transition-motion i:nth-child(2) { animation-delay: .11s; }
.app-transition-motion i:nth-child(3) { animation-delay: .22s; }
.app-transition-copy { display: grid; min-width: 0; line-height: 1.22; }
.app-transition-copy strong,.app-transition-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-transition-copy strong { font-size: .84rem; }
.app-transition-copy small { margin-top: .18rem; color: var(--color-ink-muted); font-size: .7rem; font-weight: 700; }
@keyframes app-transition-arrive { from { opacity: 0; transform: translateY(-.35rem) scale(.98); } }
@keyframes app-transition-step { 0%,100% { opacity: .45; transform: translateX(-.08rem) scale(.72); } 50% { opacity: 1; transform: translateX(.08rem) scale(1.18); } }
@keyframes app-transition-sweep { to { transform: translateX(100%); } }

/* Theme-aware text surfaces. Native dialogs otherwise use browser canvas
   colors, which can place black text on cards from a dark dashboard theme. */
body[data-portal] dialog:not(.destructive-confirmation) {
  color: var(--color-ink);
  background: var(--shop-card, var(--color-surface));
}
body[data-portal] dialog:not(.destructive-confirmation) > :where(form, .panel),
body[data-portal] :where(.portal-card, .picker-option, .rich-content, .rich-canvas) {
  color: var(--color-ink);
}
.teaching-context-switcher { display: grid; gap: var(--space-1); color: var(--color-ink); }
.teaching-context-switcher select { min-height: 2.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-ink); padding: 0 var(--space-3); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.class-code { color: var(--portal-primary-dark); font: 800 .95rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; white-space: nowrap; }
.class-code-input { text-transform: uppercase; font: 800 1.2rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .22em; }
.sidebar > :where(.portal-nav, .nav) { grid-auto-rows: max-content; align-content: start; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.account-zone { display: grid; gap: .55rem; margin-top: auto; padding-top: .85rem; border-top: 1px solid rgb(255 255 255 / 18%); }
.sidebar > .account-zone { position: sticky; z-index: 2; bottom: 0; flex: 0 0 auto; margin-top: 0; background: inherit; }
.account-card { display: grid; grid-template-columns: 2.7rem minmax(0,1fr) auto; align-items: center; gap: .65rem; padding: .65rem; border: 1px solid rgb(255 255 255 / 16%); border-radius: var(--radius-md); color: inherit; background: rgb(255 255 255 / 7%); text-decoration: none; }
.account-card:hover { border-color: rgb(255 255 255 / 35%); background: rgb(255 255 255 / 12%); }
.account-card__avatar,.user-avatar { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; overflow: hidden; border-radius: 50%; color: var(--portal-primary-ink,#fff); background: var(--portal-primary); object-fit: cover; font-weight: 850; }
.account-card__identity { display: grid; min-width: 0; line-height: 1.25; }
.account-card__identity strong,.account-card__identity small,.account-card__identity span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-card__identity small { color: inherit; }
.account-card__identity span { margin-top: .2rem; font-size: .7rem; font-weight: 750; }
.account-sign-out { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 2.65rem; border: 1px solid rgb(255 255 255 / 18%); border-radius: var(--radius-md); color: inherit; background: transparent; font: inherit; font-weight: 750; }
.account-sign-out:hover { background: rgb(255 255 255 / 9%); }
.account-sign-out svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; }
:where(.mobile-header, .mobile):has(.mobile-menu[open]) { z-index: 40; }
.mobile-menu[open] .mobile-panel { display: flex; max-height: calc(100dvh - 5.5rem - env(safe-area-inset-bottom)); flex-direction: column; overflow: hidden; overscroll-behavior: contain; }
.mobile-panel > .portal-nav { grid-auto-rows: max-content; align-content: start; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.mobile-panel .account-zone { position: sticky; z-index: 2; bottom: 0; flex: 0 0 auto; margin-top: 1rem; border-color: var(--color-border); color: var(--color-ink); background: var(--shop-card, #fff); box-shadow: 0 -.5rem .8rem var(--shop-card, #fff); }
.mobile-panel .account-card { border-color: var(--color-border); background: var(--portal-surface); }
.mobile-panel .account-card.profile-card-surface { color: var(--profile-card-color); background: var(--profile-card-background); }
.mobile-panel .account-sign-out { border-color: var(--color-border); color: var(--color-danger); }
.user-avatar--large { width: 5rem; height: 5rem; font-size: 1.4rem; }
.account-settings-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.account-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin: 1.25rem 0; padding: 1rem; }
.account-summary div { display: grid; gap: .2rem; }
.account-summary span { color: var(--color-ink-muted); font-size: .76rem; font-weight: 750; text-transform: uppercase; }
.account-settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.account-settings-panel { display: grid; align-content: start; gap: .75rem; padding: 1.2rem; }
.account-settings-panel h2 { margin: 0; }
.account-settings-panel p { margin: .2rem 0 0; }
.account-settings-panel .button { width: 100%; margin-top: .5rem; }
.account-toggle { display: flex; align-items: flex-start; gap: .7rem; margin: 0; padding: .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.account-toggle input { flex: 0 0 auto; width: 1.15rem; min-height: 1.15rem; margin-top: .2rem; }
.account-toggle span { display: grid; gap: .15rem; }
.account-toggle small { color: var(--color-ink-muted); font-weight: 500; }
.account-errors { margin: 1rem 0; padding: 1rem; border: 1px solid #fda29b; border-radius: var(--radius-md); color: var(--color-danger); background: #fff5f4; }
.student-switcher { display: grid; gap: .45rem; padding: .75rem; border: 1px solid rgb(255 255 255 / 18%); border-radius: var(--radius-md); background: rgb(255 255 255 / 7%); }
.student-switcher label { margin: 0; color: inherit; font-size: .75rem; }
.student-switcher select { min-height: 2.5rem; color: var(--color-ink); background: var(--shop-card,#fff); }
.student-switcher a,.student-family-link { color: inherit; font-size: .78rem; font-weight: 750; }
.student-family-link { display: block; padding: .65rem .8rem; border: 1px dashed rgb(255 255 255 / 24%); border-radius: var(--radius-md); text-align: center; }
.mobile-panel .student-switcher { margin-bottom: .75rem; border-color: var(--color-border); color: var(--color-ink); background: var(--portal-surface); }
.mobile-panel .student-switcher a,.mobile-panel .student-family-link { color: var(--portal-primary-dark); }
.mobile-panel .student-family-link { margin-bottom: .75rem; border-color: var(--color-border); }
.family-onboarding,.family-add-student { max-width: 48rem; margin-top: 1.25rem; padding: clamp(1rem,4vw,1.5rem); }
.family-onboarding h2,.family-add-student h2 { margin: .25rem 0; }
.family-onboarding .button,.family-add-student .button { margin-top: 1rem; }
.family-student-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(15rem,1fr)); gap: 1rem; margin: 1.25rem 0; }
.family-student-card { display: grid; align-content: start; gap: 1rem; padding: 1rem; }
.family-student-card.is-active { border: 2px solid var(--portal-primary); }
.family-student-card__heading { display: flex; align-items: center; gap: .75rem; }
.family-student-card__heading h2 { margin: 0; }
.family-student-card__heading span { color: var(--color-ink-muted); font-size: .78rem; }
.family-student-card dl { display: grid; grid-template-columns: repeat(2,1fr); gap: .5rem; margin: 0; }
.family-student-card dl div { padding: .65rem; border-radius: var(--radius-sm); background: var(--portal-surface); }
.family-student-card dt { color: var(--color-ink-muted); font-size: .7rem; font-weight: 750; text-transform: uppercase; }
.family-student-card dd { margin: .15rem 0 0; font-size: 1.25rem; font-weight: 850; }
.family-student-card .button { width: 100%; }
.family-add-student { display: grid; grid-template-columns: minmax(0,1fr) minmax(16rem,.8fr); gap: 1.5rem; max-width: none; }

.profile-card-surface { --profile-card-background: linear-gradient(135deg,#2563eb,#7c3aed); --profile-card-color: #fff; --profile-card-muted: #fff; background: var(--profile-card-background); color: var(--profile-card-color); }
.profile-card-surface.profile-background--default { --profile-card-background: linear-gradient(135deg,#2563eb,#7c3aed); }
.profile-card-surface.profile-background--blue-notes { --profile-card-background: radial-gradient(circle at 18% 24%,rgb(255 255 255 / 32%) 0 .18rem,transparent .22rem),radial-gradient(circle at 72% 68%,rgb(255 255 255 / 24%) 0 .24rem,transparent .28rem),linear-gradient(145deg,#075985,#2563eb 54%,#7c3aed); background-size: 3rem 3rem,4rem 4rem,auto; }
.profile-card-surface.profile-background--concert { --profile-card-background: radial-gradient(circle at 50% 0,rgb(251 191 36 / 72%),transparent 38%),linear-gradient(145deg,#450a0a,#9f1239 52%,#111827); }
.profile-card-surface.profile-background--piano { --profile-card-background: linear-gradient(rgb(255 255 255 / 82%),rgb(255 255 255 / 82%)),repeating-linear-gradient(90deg,#fff 0 11%,#111 11% 16%,#fff 16% 25%); --profile-card-color: #111827; --profile-card-muted: #374151; }
.profile-card-surface.profile-background--orchestra { --profile-card-background: radial-gradient(ellipse at 50% 110%,#92400e 0 25%,transparent 26%),linear-gradient(145deg,#451a03,#b45309 55%,#f59e0b); }
.profile-card-surface.profile-background--space { --profile-card-background: radial-gradient(circle at 20% 20%,#67e8f9 0 .12rem,transparent .16rem),radial-gradient(circle at 78% 32%,#fff 0 .09rem,transparent .13rem),radial-gradient(circle at 58% 78%,#c4b5fd 0 .14rem,transparent .18rem),linear-gradient(145deg,#0f172a,#312e81 55%,#581c87); background-size: 4rem 4rem,5rem 5rem,6rem 6rem,auto; }
.profile-card-surface.profile-background--mountains { --profile-card-background: linear-gradient(145deg,transparent 0 48%,rgb(15 118 110 / 86%) 49% 68%,#134e4a 69%),linear-gradient(#bae6fd,#e0f2fe); }
.profile-card-surface.profile-background--studio { --profile-card-background: linear-gradient(90deg,transparent 48%,rgb(255 255 255 / 10%) 49% 51%,transparent 52%),radial-gradient(circle at 78% 24%,#fbbf24 0 4%,transparent 16%),linear-gradient(145deg,#1f2937,#7c2d12); }
.profile-card-surface.profile-background--vinyl { --profile-card-background: radial-gradient(circle at 78% 50%,#f59e0b 0 5%,#111827 6% 28%,#334155 29% 30%,#111827 31% 45%,transparent 46%),linear-gradient(145deg,#111827,#4c0519); }
.profile-card-surface.profile-background--aurora-flow { --profile-card-background: radial-gradient(ellipse at 25% 15%,rgb(45 212 191 / 76%),transparent 48%),linear-gradient(115deg,#071b3a,#312e81 32%,#7c3aed 54%,#0f766e 75%,#071b3a); background-size: 150% 150%,220% 220%; animation: profile-card-aurora 7s ease-in-out infinite alternate; }
.profile-card-surface.profile-background--starfield-motion { --profile-card-background: radial-gradient(circle,#fff 0 .08rem,transparent .12rem),radial-gradient(circle,#67e8f9 0 .11rem,transparent .15rem),radial-gradient(circle,#c4b5fd 0 .07rem,transparent .11rem),linear-gradient(145deg,#020617,#1e1b4b 58%,#4c1d95); background-size: 2.8rem 2.8rem,4.2rem 4.2rem,5.5rem 5.5rem,auto; animation: profile-card-starfield 12s linear infinite; }
.profile-card-surface.profile-background--golden-spotlight { --profile-card-background: radial-gradient(ellipse at 50% -10%,#fff7c2 0 4%,#fbbf24 18%,transparent 52%),linear-gradient(145deg,#422006,#92400e 55%,#1c1917); }
.profile-card-surface.profile-background--cherry-blossom { --profile-card-background: radial-gradient(circle at 18% 24%,#fff 0 .16rem,#f9a8d4 .18rem .34rem,transparent .37rem),radial-gradient(circle at 78% 68%,#fff 0 .12rem,#fbcfe8 .14rem .3rem,transparent .33rem),linear-gradient(145deg,#9f1239,#ec4899 52%,#f9a8d4); background-size: 3.4rem 3.4rem,4.8rem 4.8rem,auto; }
.profile-card-surface.profile-background--underwater-melody { --profile-card-background: radial-gradient(circle,#cffafe 0 .1rem,transparent .14rem),radial-gradient(circle,#67e8f9 0 .16rem,transparent .2rem),linear-gradient(160deg,#0e7490,#075985 52%,#172554); background-size: 3rem 3rem,4.6rem 4.6rem,auto; animation: profile-card-bubbles 8s linear infinite; }
.profile-card-surface.profile-background--midnight-staff { --profile-card-background: repeating-linear-gradient(0deg,transparent 0 .68rem,rgb(226 232 240 / 28%) .71rem .76rem,transparent .79rem 1.02rem),linear-gradient(145deg,#020617,#172554 58%,#312e81); }
.profile-card-surface.profile-background--sunset-rhythm { --profile-card-background: repeating-linear-gradient(155deg,rgb(255 255 255 / 10%) 0 .16rem,transparent .18rem 1.2rem),linear-gradient(135deg,#7c2d12,#e11d48 48%,#f59e0b); }
.profile-card-surface.profile-background--royal-velvet { --profile-card-background: radial-gradient(ellipse at 50% 110%,rgb(251 191 36 / 42%),transparent 40%),repeating-linear-gradient(110deg,rgb(255 255 255 / 4%) 0 .12rem,transparent .14rem 1.4rem),linear-gradient(145deg,#2e1065,#581c87 55%,#701a75); }
.profile-card-surface .account-card__identity small,.profile-card-surface .family-student-card__heading span { color: var(--profile-card-muted); }
.account-card.profile-card-surface { grid-template-columns: 3.15rem minmax(0,1fr) auto; border-color: rgb(255 255 255 / 38%); }
.account-card.profile-card-surface:hover { background: var(--profile-card-background); filter: brightness(1.08); }
.family-student-card.profile-card-surface dl div { background: rgb(255 255 255 / 88%); color: #172033; }

.profile-avatar-frame { display: grid; place-items: center; width: 3.15rem; height: 3.15rem; padding: .22rem; border-radius: 50%; background: transparent; }
.profile-avatar-frame .user-avatar { width: 100%; height: 100%; }
.profile-avatar-frame--large { width: 8rem; height: 8rem; padding: .5rem; }
.profile-avatar-frame--large .user-avatar { font-size: 2rem; }
.profile-avatar-frame.profile-frame--default { padding: .08rem; }
.profile-avatar-frame.profile-frame--silver { background: linear-gradient(145deg,#f8fafc,#94a3b8 48%,#e2e8f0); box-shadow: 0 0 0 1px #64748b; }
.profile-avatar-frame.profile-frame--gold,.profile-avatar-frame.profile-frame--classical { background: linear-gradient(145deg,#fef3c7,#d4a72c 45%,#78350f); box-shadow: 0 0 0 1px #92400e; }
.profile-avatar-frame.profile-frame--neon { background: linear-gradient(135deg,#22d3ee,#a855f7,#f472b6,#22d3ee); background-size: 240% 240%; box-shadow: 0 0 .9rem rgb(168 85 247 / 76%); animation: profile-frame-neon 2.8s ease-in-out infinite; }
.profile-avatar-frame.profile-frame--vinyl { background: repeating-radial-gradient(circle,#111 0 .24rem,#334155 .26rem .3rem); box-shadow: 0 0 0 1px #020617; }
.profile-avatar-frame.profile-frame--treble { background: linear-gradient(135deg,#fef3c7,#b45309); box-shadow: 0 0 0 2px #fbbf24,0 0 0 4px #78350f; }
.profile-avatar-frame.profile-frame--piano { background: repeating-linear-gradient(90deg,#fff 0 12%,#111 13% 20%,#fff 21% 31%); box-shadow: 0 0 0 1px #111; }
.profile-avatar-frame.profile-frame--sparkle { background: conic-gradient(from 45deg,#fef3c7,#f472b6,#c4b5fd,#67e8f9,#fef3c7); box-shadow: 0 0 .8rem rgb(244 114 182 / 68%); }
.profile-avatar-frame.profile-frame--ice { background: linear-gradient(145deg,#ecfeff,#7dd3fc 48%,#2563eb); box-shadow: 0 0 .65rem rgb(125 211 252 / 72%); }
.profile-avatar-frame.profile-frame--flame { background: linear-gradient(0deg,#7f1d1d,#dc2626 22%,#f97316 48%,#facc15 72%,#fff7c2); background-size: 100% 240%; box-shadow: 0 0 .7rem rgb(249 115 22 / 68%); animation: profile-frame-flame 1.65s ease-in-out infinite alternate; }
.profile-avatar-frame.profile-frame--rainbow { background: conic-gradient(#ef4444,#eab308,#22c55e,#3b82f6,#a855f7,#ef4444); box-shadow: 0 0 0 1px rgb(255 255 255 / 70%); }
.profile-avatar-frame.profile-frame--classical { box-shadow: 0 0 0 2px #fbbf24,0 0 0 5px #78350f; }
.profile-avatar-frame.profile-frame--electric-glow { background: linear-gradient(135deg,#e0f2fe,#22d3ee,#2563eb,#a855f7,#e0f2fe); background-size: 260% 260%; box-shadow: 0 0 .9rem rgb(34 211 238 / 78%); animation: profile-frame-electric 2.25s ease-in-out infinite; }
.profile-avatar-frame.profile-frame--aurora-ring { background: linear-gradient(135deg,#34d399,#22d3ee,#8b5cf6,#ec4899,#34d399); background-size: 280% 280%; box-shadow: 0 0 .75rem rgb(52 211 153 / 58%); animation: profile-frame-aurora 4s linear infinite; }
.profile-avatar-frame.profile-frame--starlight-orbit { background: radial-gradient(circle at 18% 22%,#fff 0 4%,transparent 5%),radial-gradient(circle at 76% 70%,#67e8f9 0 4%,transparent 5%),conic-gradient(#0f172a,#4338ca,#7e22ce,#0f172a); background-size: 150% 150%,175% 175%,auto; box-shadow: 0 0 .9rem rgb(129 140 248 / 70%); animation: profile-frame-starlight 5s linear infinite; }
.profile-avatar-frame.profile-frame--soundwave { background: repeating-conic-gradient(from 0deg,#22d3ee 0 8deg,#a855f7 9deg 16deg,#f472b6 17deg 22deg,#0f172a 23deg 28deg); box-shadow: 0 0 .7rem rgb(168 85 247 / 65%); animation: profile-frame-soundwave 1.15s ease-in-out infinite alternate; }
.profile-avatar-frame.profile-frame--rose-gold { background: linear-gradient(145deg,#fff1f2,#fb7185 42%,#9f1239 72%,#fecdd3); box-shadow: 0 0 0 1px #be123c,0 0 .5rem rgb(251 113 133 / 48%); }
.profile-avatar-frame.profile-frame--emerald-crown { background: conic-gradient(from 25deg,#fde68a,#047857,#34d399,#d4a72c,#fde68a); box-shadow: 0 0 0 2px #065f46,0 0 .55rem rgb(52 211 153 / 52%); }
.profile-avatar-frame.profile-frame--crystal { background: conic-gradient(from 45deg,#fff,#bae6fd,#818cf8,#ecfeff,#38bdf8,#fff); box-shadow: 0 0 0 1px #7dd3fc,0 0 .65rem rgb(186 230 253 / 78%); }
.profile-avatar-frame.profile-frame--black-diamond { background: conic-gradient(from 22deg,#020617,#94a3b8,#111827,#e2e8f0,#020617); box-shadow: 0 0 0 2px #0f172a,0 0 0 4px #94a3b8; }

/* Keep the shared analytics primitives ahead of the optional profile cosmetics.
   These power the Company Overview chart and tables as well as Admin analytics. */
.analytics-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.analytics-heading h1 { margin-top: 0; }
.analytics-tier { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 var(--space-3); border: 1px solid var(--portal-primary); border-radius: 999px; background: var(--portal-primary-light); color: var(--portal-primary-dark); font-size: .8125rem; font-weight: 700; white-space: nowrap; }
.analytics-preview { display: grid; gap: var(--space-3); margin: var(--space-4) 0; padding: var(--space-4); border-style: dashed; }
.analytics-preview small { color: var(--color-ink-muted); }
.analytics-preview__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: var(--space-3); margin: var(--space-6) 0; }
.analytics-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.analytics-stat { display: grid; align-content: start; gap: var(--space-1); min-height: 7.5rem; padding: var(--space-4); }
.analytics-stat span, .analytics-stat small { color: var(--color-ink-muted); }
.analytics-stat strong { color: var(--color-ink); font-size: clamp(1.65rem, 4vw, 2.3rem); line-height: 1.1; }
.analytics-stat small { font-size: .78rem; line-height: 1.35; }
.analytics-panel, .analytics-empty { margin: var(--space-4) 0; padding: clamp(1rem, 3vw, 1.5rem); }
.analytics-panel__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.analytics-panel__heading h2 { margin: .15rem 0 0; }
.analytics-panel__heading small { color: var(--color-ink-muted); }
.eyebrow { color: var(--portal-primary-dark); font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.analytics-progress { height: .75rem; overflow: hidden; border-radius: 999px; background: var(--portal-primary-light); }
.analytics-progress span { display: block; height: 100%; border-radius: inherit; background: var(--portal-primary); }
.analytics-mini-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.analytics-mini-grid div { display: grid; gap: var(--space-1); }
.analytics-mini-grid strong { font-size: 1.35rem; }
.analytics-mini-grid span { color: var(--color-ink-muted); font-size: .82rem; }
.analytics-bars { display: grid; grid-template-columns: repeat(8, minmax(2.5rem, 1fr)); gap: var(--space-2); min-height: 14rem; margin: var(--space-4) 0; overflow-x: auto; }
.analytics-bar { display: grid; grid-template-rows: 1.5rem 8rem 1.5rem; gap: var(--space-2); min-width: 2.5rem; text-align: center; }
.analytics-bar > strong, .analytics-bar > small { font-size: .72rem; }
.analytics-bar > small { color: var(--color-ink-muted); }
.analytics-bar > div { display: flex; align-items: flex-end; justify-self: center; width: min(75%, 2.75rem); overflow: hidden; border-radius: var(--radius-sm); background: var(--portal-surface); }
.analytics-bar > div > span { width: 100%; min-height: .25rem; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--portal-primary); }
.analytics-table-wrap { width: 100%; overflow-x: auto; }
.analytics-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.analytics-table th, .analytics-table td { padding: .75rem; border-bottom: 1px solid var(--color-border); text-align: left; white-space: nowrap; }
.analytics-table thead th { color: var(--color-ink-muted); font-size: .72rem; letter-spacing: .03em; text-transform: uppercase; }
.analytics-table tbody th { font-weight: 700; }
.analytics-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.analytics-list { display: grid; }
.analytics-list > div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: .75rem 0; border-bottom: 1px solid var(--color-border); }
.analytics-list > div:last-child { border-bottom: 0; }

@media (max-width: 700px) {
  .analytics-heading, .analytics-panel__heading { align-items: stretch; flex-direction: column; }
  .analytics-tier { align-self: flex-start; }
  .analytics-grid--three, .analytics-split { grid-template-columns: 1fr; }
  .analytics-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-table th, .analytics-table td { padding: .65rem .55rem; }
}

.student-profile-card{position:relative;display:inline-grid;grid-template-columns:2.75rem minmax(0,1fr) auto;align-items:center;gap:.65rem;width:min(100%,22rem);min-width:12rem;min-height:3.55rem;padding:.35rem .55rem;border:1px solid rgb(255 255 255 / 38%);border-radius:.85rem;color:var(--profile-card-color,#fff);background:var(--profile-card-background);box-shadow:0 4px 14px rgb(15 23 42 / 12%);font:inherit;text-align:left;overflow:hidden;isolation:isolate;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease}.student-profile-card::after{position:absolute;z-index:-1;inset:-60% auto -60% -25%;width:45%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / 20%),transparent);content:"";transform:rotate(18deg);transition:translate .35s ease}.student-profile-card:hover{filter:brightness(1.08);box-shadow:0 7px 20px rgb(15 23 42 / 18%);transform:translateY(-1px)}.student-profile-card:hover::after{translate:250%}.student-profile-card:focus-visible{outline:3px solid var(--focus-ring,#f59e0b);outline-offset:2px}.student-profile-card__avatar{width:2.75rem;height:2.75rem}.student-profile-card__copy{display:grid;min-width:0}.student-profile-card__copy strong,.student-profile-card__copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.student-profile-card__copy strong{color:inherit;font-size:.9rem}.student-profile-card__copy small{color:var(--profile-card-muted,currentColor);font-size:.67rem;font-weight:700;opacity:.9}.student-profile-card__open{font-size:.62rem;font-weight:850;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;opacity:.88}.student-profile-card--fallback{display:inline-grid;color:var(--color-ink);background:var(--shop-card,#fff);border-color:var(--color-border);box-shadow:none}.student-profile-dialog{width:min(36rem,calc(100% - 2rem));max-width:36rem;height:auto;max-height:calc(100dvh - 2rem);margin:auto;border:0;border-radius:1.25rem;padding:0;color:var(--color-ink);background:var(--shop-card,#fff);box-shadow:0 32px 90px rgb(2 6 23 / 38%)}.student-profile-dialog::backdrop{background:rgb(2 6 23 / 68%);backdrop-filter:blur(4px)}.student-profile-dialog__shell{padding:1rem}.student-profile-dialog__heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.75rem;color:var(--color-ink-muted);font-size:.72rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase}.student-profile-dialog__heading button{display:grid;width:2.25rem;height:2.25rem;place-items:center;border:1px solid var(--color-border);border-radius:50%;color:var(--color-ink);background:var(--shop-card,#fff);font-size:1.35rem;line-height:1}.student-profile-showcase{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:1.25rem;min-height:18rem;padding:2rem;border:1px solid rgb(255 255 255 / 38%);border-radius:1.1rem;overflow:hidden;isolation:isolate;box-shadow:inset 0 1px 0 rgb(255 255 255 / 24%),0 20px 45px rgb(15 23 42 / 20%)}.student-profile-showcase__glow{position:absolute;z-index:-1;right:-4rem;bottom:-5rem;width:13rem;height:13rem;border-radius:50%;background:rgb(255 255 255 / 15%);filter:blur(2px)}.student-profile-showcase__copy span{display:block;margin-bottom:.25rem;color:var(--profile-card-muted);font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.student-profile-showcase__copy h2{margin:0;color:var(--profile-card-color);font:800 clamp(1.7rem,6vw,2.6rem)/1.05 Georgia,serif;letter-spacing:-.035em}.student-profile-showcase__copy p{margin:.4rem 0 0;color:var(--profile-card-muted);font-weight:750}.student-profile-showcase__mark{position:absolute;right:1.25rem;bottom:.5rem;color:rgb(255 255 255 / 16%);font:900 6rem/1 Georgia,serif;transform:rotate(-8deg)}.student-profile-dialog__hint{max-width:28rem;margin:.85rem auto .15rem;color:var(--color-ink-muted);font-size:.76rem;text-align:center}@media(max-width:600px){.student-profile-card{grid-template-columns:2.6rem minmax(0,1fr);min-width:10rem}.student-profile-card__avatar{width:2.6rem;height:2.6rem}.student-profile-card__open{display:none}.student-profile-dialog{width:calc(100% - 1rem);max-width:none}.student-profile-showcase{grid-template-columns:1fr;justify-items:center;min-height:24rem;text-align:center}.student-profile-showcase__mark{font-size:5rem}}@media(prefers-reduced-motion:reduce){.student-profile-card,.student-profile-card::after{transition:none}}

.student-profile-dialog:has(.student-profile-teacher-overview:not([hidden])){width:min(48rem,calc(100% - 2rem);max-width:48rem}.student-profile-showcase--compact{grid-template-columns:auto minmax(0,1fr);gap:.85rem;min-height:6.5rem;padding:1rem 1.15rem}.student-profile-showcase--compact .profile-avatar-frame--large{width:4rem;height:4rem}.student-profile-showcase--compact .student-profile-showcase__copy h2{font-size:clamp(1.35rem,4vw,1.8rem)}.student-profile-showcase--compact .student-profile-showcase__mark{right:.8rem;bottom:-.55rem;font-size:4rem}.student-profile-teacher-overview{padding-top:1rem}.student-profile-teacher-overview__summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}.student-profile-teacher-overview__summary>div{min-width:0;padding:.75rem;border:1px solid var(--color-border);border-radius:.75rem;background:var(--portal-surface)}.student-profile-teacher-overview__summary span,.student-profile-teacher-overview__summary small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-ink-muted)}.student-profile-teacher-overview__summary span{font-size:.63rem;font-weight:850;letter-spacing:.05em;text-transform:uppercase}.student-profile-teacher-overview__summary strong{display:block;overflow:hidden;margin:.15rem 0;color:var(--color-ink);font-size:.88rem;text-overflow:ellipsis;white-space:nowrap}.student-profile-teacher-overview__summary small{font-size:.68rem}.student-profile-teacher-overview__heading{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-top:1rem}.student-profile-teacher-overview__heading span{color:var(--portal-primary-dark);font-size:.7rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.student-profile-teacher-overview__heading p{margin:.1rem 0 0;font-size:.75rem}.student-profile-activity{display:grid;gap:.45rem;max-height:17rem;margin:.65rem 0 0;padding:0;overflow:auto;list-style:none}.student-profile-activity__item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.8rem;align-items:center;padding:.6rem .7rem;border:1px solid var(--color-border);border-left:3px solid var(--portal-primary);border-radius:.65rem;background:var(--shop-card,#fff)}.student-profile-activity__item--assignment{border-left-color:#8b5cf6}.student-profile-activity__item strong,.student-profile-activity__item span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.student-profile-activity__item strong{color:var(--color-ink);font-size:.8rem}.student-profile-activity__item span,.student-profile-activity__item time,.student-profile-activity__empty,.student-profile-activity__more{color:var(--color-ink-muted);font-size:.7rem}.student-profile-activity__item time{white-space:nowrap}.student-profile-activity__empty{padding:.8rem;border:1px dashed var(--color-border);border-radius:.65rem;text-align:center}.student-profile-activity__more{margin:.6rem 0 0}.student-profile-teacher-overview__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem;margin-top:1rem}.student-profile-teacher-overview__actions .button{min-height:2.5rem;font-size:.78rem}@media(max-width:600px){.student-profile-dialog:has(.student-profile-teacher-overview:not([hidden])){width:calc(100% - 1rem);max-width:none}.student-profile-showcase--compact{grid-template-columns:auto minmax(0,1fr);justify-items:stretch;min-height:0;text-align:left}.student-profile-showcase--compact .student-profile-showcase__mark{display:block}.student-profile-teacher-overview__summary{grid-template-columns:1fr}.student-profile-activity__item{grid-template-columns:minmax(0,1fr)}.student-profile-activity__item time{display:none}.student-profile-teacher-overview__actions{display:grid;grid-template-columns:1fr}.student-profile-teacher-overview__actions .button{width:100%}}
@keyframes profile-card-aurora { from { background-position: 0 0,0 50%; } to { background-position: 100% 45%,100% 50%; } }
@keyframes profile-card-starfield { from { background-position: 0 0,0 0,0 0,0 0; } to { background-position: 2.8rem 5.6rem,-4.2rem 8.4rem,5.5rem 11rem,0 0; } }
@keyframes profile-card-bubbles { from { background-position: 0 3rem,0 4.6rem,0 0; } to { background-position: 0 -3rem,0 -4.6rem,0 0; } }
@keyframes profile-frame-neon { 0%,100% { background-position: 0 50%; box-shadow: 0 0 .55rem rgb(34 211 238 / 58%); } 50% { background-position: 100% 50%; box-shadow: 0 0 1.15rem rgb(244 114 182 / 88%); } }
@keyframes profile-frame-flame { from { background-position: 50% 85%; box-shadow: 0 0 .5rem rgb(220 38 38 / 58%); } to { background-position: 50% 15%; box-shadow: 0 0 1.05rem rgb(250 204 21 / 88%); } }
@keyframes profile-frame-electric { 0%,100% { background-position: 0 50%; box-shadow: 0 0 .45rem rgb(37 99 235 / 60%); } 50% { background-position: 100% 50%; box-shadow: 0 0 1.2rem rgb(34 211 238 / 96%); } }
@keyframes profile-frame-aurora { from { background-position: 0 50%; } to { background-position: 280% 50%; } }
@keyframes profile-frame-starlight { from { background-position: 0 0,0 0,0 0; } to { background-position: 150% 150%,-175% 175%,0 0; } }
@keyframes profile-frame-soundwave { from { box-shadow: 0 0 .35rem rgb(34 211 238 / 58%); } to { box-shadow: 0 0 1rem rgb(244 114 182 / 92%); } }

@media (max-width: 700px) {
  .account-settings-heading { align-items: flex-start; }
  .account-summary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; margin-block: .85rem; padding: .8rem; }
  .account-summary > div:first-child { grid-column: 1 / -1; }
  .account-settings-grid { grid-template-columns: 1fr; }
  .account-settings-panel { padding: 1rem; }
  .family-add-student { grid-template-columns: 1fr; }
}

/* Keep the desktop information architecture on landscape tablets. */
@media (min-width: 901px) and (max-width: 1100px) {
  body[data-portal="student"] .shell { display: grid !important; grid-template-columns: 15rem minmax(0,1fr); }
  body[data-portal="student"] .sidebar { display: flex !important; }
  body[data-portal="student"] .mobile-header,
  body[data-portal="student"] .student-tabbar { display: none !important; }
  body[data-portal="student"] .content { padding: 2rem clamp(1.25rem,3vw,2.5rem) 4rem !important; }
  body[data-portal="student"] .utility { display: block !important; }
  body[data-portal="student"] .heading,
  body[data-portal="student"] .student-header { align-items: center !important; flex-direction: row !important; }
  body[data-portal="student"] .action-row { align-items: center !important; flex-direction: row !important; }
  body[data-portal="student"] .student-header .button,
  body[data-portal="student"] .action-row .button { width: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
  .app-transition-indicator,.app-transition-indicator::after,.app-transition-motion i { animation: none; }
}

@media (max-width: 600px) {
  .app-transition-indicator { top: max(.65rem,env(safe-area-inset-top)); right: .65rem; left: .65rem; width: auto; max-width: none; }
}

/* Shared second-step safeguard for destructive actions. The portal-qualified
   selectors intentionally outrank the full-screen rules used by edit dialogs
   in the responsive layouts. */
dialog.destructive-confirmation,
body[data-portal] dialog.destructive-confirmation {
  box-sizing: border-box;
  width: min(30rem, calc(100vw - 2rem)) !important;
  max-width: 30rem !important;
  height: max-content !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 2rem) !important;
  margin: auto !important;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, .9rem) !important;
  padding: 1.1rem !important;
  color: var(--color-ink);
  background: #fff;
  box-shadow: 0 24px 64px rgb(15 23 42 / 28%);
}
dialog.destructive-confirmation::backdrop,
body[data-portal] dialog.destructive-confirmation::backdrop { background: rgb(15 23 42 / 58%); backdrop-filter: blur(2px); }
dialog.destructive-confirmation[open],
body[data-portal] dialog.destructive-confirmation[open] { display: grid; align-content: start; grid-template-columns: auto minmax(0, 1fr); gap: .75rem .85rem; }
.destructive-confirmation__icon,
body[data-portal] .destructive-confirmation__icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; color: #912018; background: #fee4e2; font-size: 1.1rem; font-weight: 900; }
.destructive-confirmation__copy h2,
body[data-portal] .destructive-confirmation__copy h2 { margin: .05rem 0 .25rem; color: var(--color-ink); font: 800 1.05rem/1.25 ui-sans-serif, system-ui; letter-spacing: 0; }
.destructive-confirmation__copy p,
body[data-portal] .destructive-confirmation__copy p { margin: 0; color: var(--color-ink-muted); font-size: .9rem; line-height: 1.45; }
.destructive-confirmation__actions,
body[data-portal] .destructive-confirmation__actions { display: flex; align-items: center; grid-column: 1 / -1; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.destructive-confirmation__actions .button,
body[data-portal] .destructive-confirmation__actions .button {
  align-self: center;
  width: auto !important;
  min-width: 0;
  min-height: 2.75rem !important;
  height: auto !important;
  margin: 0 !important;
  padding: .55rem .85rem !important;
  font-size: .88rem;
  line-height: 1.2;
  white-space: normal !important;
}
.destructive-confirmation__actions .danger,
body[data-portal] .destructive-confirmation__actions .danger { border-color: var(--color-danger); color: #fff; background: var(--color-danger); }

@media (max-width: 360px) {
  .destructive-confirmation__actions,
  body[data-portal] .destructive-confirmation__actions { display: grid; grid-template-columns: 1fr; }
  .destructive-confirmation__actions .button,
  body[data-portal] .destructive-confirmation__actions .button { width: 100% !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.oversight-filters { display: grid; grid-template-columns: minmax(12rem, 2fr) minmax(11rem, 1fr) auto; align-items: end; gap: var(--space-3); margin: var(--space-4) 0; padding: var(--space-4); }
.oversight-filters label { margin: 0; }
.oversight-filters .button { min-width: 7rem; }
.oversight-content { margin: var(--space-3) 0; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--portal-surface); }
.moderation-alert { margin: var(--space-4) 0; padding: var(--space-4); border: 1px solid #f79009; border-left-width: .35rem; background: #fffaeb; }
.moderation-alert > strong { color: #7a2e0e; font-size: 1.05rem; }
.moderation-alert--admin { border-color: var(--portal-primary); background: var(--portal-surface); }
.moderation-alert form { max-width: 38rem; }
.moderation-alert textarea { min-height: 6rem; }
.button.danger { border-color: var(--color-danger); color: #912018; background: #fff; }

@media (max-width: 700px) {
  .oversight-filters { grid-template-columns: 1fr; }
  .oversight-filters .button { width: 100%; }
}

/* Plan selection and visible entitlement capacity */
.organization-id-card { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: var(--space-3) var(--space-5); margin: var(--space-4) 0; padding: clamp(1rem,3vw,1.5rem); }
.organization-id-card h2 { margin: .15rem 0 0; }
.organization-id-card p { margin: .35rem 0 0; }
.organization-id-card__value { display: flex; align-items: stretch; gap: var(--space-2); }
.organization-id-card__value code { display: flex; align-items: center; min-height: 3rem; padding: .55rem .85rem; border: 2px solid var(--portal-primary); border-radius: var(--radius-sm); color: var(--portal-primary-dark); background: var(--portal-surface); font-size: clamp(1.05rem,3vw,1.35rem); font-weight: 850; letter-spacing: .08em; white-space: nowrap; }
.organization-id-card__status { color: #166534; font-weight: 700; }
.organization-id-card__status--paused { color: #854d0e; }
.organization-id-card form { justify-self: end; }
.plan-card-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(17rem,1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.plan-choice { position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: clamp(1rem,3vw,1.5rem); }
.plan-choice--featured { border: 2px solid var(--portal-primary); }
.plan-choice h2 { margin: 0; }
.plan-badge { align-self: flex-start; padding: .25rem .6rem; border-radius: 999px; color: #07162e; background: #ffc458; font-size: .75rem; font-weight: 850; }
.plan-price { display: block; color: var(--portal-primary-dark); font-size: clamp(1.65rem,4vw,2.15rem); }
.plan-price small { font-size: .85rem; }
.plan-limits { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-2); margin: var(--space-2) 0; }
.plan-limits div { min-width: 0; padding: .65rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--portal-surface); }
.plan-limits strong,.plan-limits span { display: block; overflow-wrap: anywhere; }
.plan-limits span { color: var(--color-ink-muted); font-size: .75rem; }
.plan-usage { margin: var(--space-4) 0; padding: clamp(1rem,3vw,1.5rem); }
.plan-usage h2 { margin: .1rem 0 0; }
.plan-usage__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(12rem,1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.plan-usage__item { display: grid; gap: var(--space-2); padding: .8rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.plan-usage__item > div:first-child { display: flex; justify-content: space-between; gap: var(--space-2); }
.plan-usage__item span { color: var(--color-ink-muted); font-size: .78rem; text-align: right; }
.plan-usage__bar { height: .45rem; overflow: hidden; border-radius: 999px; background: var(--portal-primary-light); }
.plan-usage__bar span { display: block; height: 100%; background: var(--portal-primary); }

@media (max-width: 700px) {
  .organization-id-card { grid-template-columns: 1fr; }
  .organization-id-card__value { flex-direction: column; }
  .organization-id-card__value code { justify-content: center; overflow-wrap: anywhere; white-space: normal; }
  .organization-id-card form { justify-self: stretch; }
  .organization-id-card form .button { width: 100%; }
  .plan-card-grid { grid-template-columns: 1fr; }
  .plan-choice { padding: 1rem; }
  .plan-usage__grid { grid-template-columns: 1fr; }
}
@font-face{font-family:"Bravura Text";src:url("/assets/fonts/BravuraText.woff2?v=1") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Bravura";src:url("/assets/fonts/Bravura.woff2?v=1") format("woff2");font-style:normal;font-weight:400;font-display:swap}
.music-symbol{display:inline-block;font-family:"Bravura Text","Apple Symbols",serif!important;font-weight:400!important;font-style:normal!important;font-variant-ligatures:common-ligatures;font-feature-settings:"liga" 1;line-height:1;vertical-align:-.14em;speak:none}.music-symbol--small{font-size:.86em}.music-symbol--normal{font-size:1.25em}.music-symbol--large{font-size:2.25em}.music-symbol--xl{font-size:4em}.music-symbol[data-music-display="block"]{display:block;margin:.75rem auto;text-align:center}.music-symbol-missing{display:inline-grid;place-items:center;min-width:1em;border:1px dashed currentColor;border-radius:.15em;color:var(--color-ink-muted)}
.music-symbol--large,.music-symbol--xl,.music-symbol[data-music-display="block"]{font-family:"Bravura","Bravura Text","Apple Symbols",serif!important}
.music-symbol.music-symbol--time-signature{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:1em;font-family:"Bravura","Bravura Text","Apple Symbols",serif!important;line-height:.58;vertical-align:-.36em}.music-symbol__time-signature-part{display:block;min-width:100%;font:inherit;font-size:.72em;line-height:.68;text-align:center;white-space:nowrap}.music-symbol.music-symbol--time-signature[data-music-display="block"]{display:flex;width:max-content}
.music-symbol-launch{display:inline-grid!important;place-items:center;width:2.25rem!important;min-width:2.25rem!important;min-height:2.25rem!important;margin:.3rem 0 .55rem;padding:0!important;border-radius:50%!important;font-family:"Bravura Text",ui-sans-serif!important;font-size:1.25rem!important;line-height:1!important}.music-symbol-field-preview{clear:both;margin:.25rem 0 .65rem;padding:.65rem;border:1px dashed var(--color-border);border-radius:.55rem;background:var(--portal-surface);white-space:pre-wrap;overflow-wrap:anywhere}.music-symbol-field-preview small{display:block;margin-bottom:.25rem;color:var(--color-ink-muted);font-family:inherit;font-size:.72rem;font-weight:750;text-transform:uppercase}.music-symbol-picker{width:min(70rem,calc(100% - 2rem));max-height:calc(100dvh - 2rem);border:0;border-radius:1.15rem;padding:0;color:var(--color-ink);background:var(--shop-card,#fff);box-shadow:0 24px 70px rgb(15 23 42 / 30%)}.music-symbol-picker::backdrop{background:rgb(15 23 42 / 64%);backdrop-filter:blur(3px)}.music-symbol-picker__shell{display:flex;flex-direction:column;max-height:calc(100dvh - 2rem);padding:0}.music-symbol-picker__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.2rem 1.25rem .85rem;border-bottom:1px solid var(--color-border);background:linear-gradient(135deg,color-mix(in srgb,var(--portal-primary) 10%,var(--shop-card,#fff)),var(--shop-card,#fff) 62%)}.music-symbol-picker__header h2,.music-symbol-picker__header p{margin:.1rem 0}.music-symbol-picker__header h2{font-size:1.25rem}.music-symbol-picker__header p{color:var(--color-ink-muted);font-size:.84rem}.music-symbol-picker__tabs{display:flex;gap:.4rem;padding:.75rem 1.25rem 0;overflow-x:auto}.music-symbol-picker__tabs button{min-height:2.35rem;border:1px solid var(--color-border);border-radius:999px;padding:.35rem .8rem;color:var(--color-ink);background:var(--shop-card,#fff);font:inherit;font-size:.78rem;font-weight:800;white-space:nowrap}.music-symbol-picker__tabs button.is-active{border-color:var(--portal-primary);color:var(--portal-primary-ink,#fff);background:var(--portal-primary);box-shadow:0 3px 10px color-mix(in srgb,var(--portal-primary) 24%,transparent)}.music-symbol-picker__tools{display:grid;grid-template-columns:minmax(14rem,1.5fr) minmax(10rem,1fr) minmax(9rem,.8fr) 6.5rem minmax(11rem,auto);align-items:end;gap:.6rem;padding:.85rem 1.25rem .65rem}.music-symbol-picker__tools label{min-width:0;margin:0;font-size:.76rem;font-weight:800}.music-symbol-picker__tools input,.music-symbol-picker__tools select{min-height:2.45rem;margin-top:.25rem;border-radius:.55rem}.music-symbol-picker__display{display:flex;align-items:center;gap:.4rem;min-height:2.7rem}.music-symbol-picker__display input{width:1.1rem;min-height:1.1rem;margin:0}.music-symbol-picker__status{padding:0 1.25rem .6rem;color:var(--color-ink-muted);font-size:.78rem}.music-symbol-picker__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.65rem;min-height:10rem;padding:.35rem 1.25rem 1rem;overflow:auto}.music-symbol-picker__card{position:relative;min-width:0;min-height:9.4rem;overflow:hidden;border:1px solid color-mix(in srgb,var(--color-border) 88%,var(--portal-primary));border-radius:.85rem;background:linear-gradient(155deg,var(--shop-card,#fff),color-mix(in srgb,var(--portal-surface) 55%,var(--shop-card,#fff)));box-shadow:0 1px 2px rgb(15 23 42 / 4%);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}.music-symbol-picker__card:hover{border-color:var(--portal-primary);box-shadow:0 8px 18px rgb(15 23 42 / 10%);transform:translateY(-2px)}.music-symbol-picker__choose{display:grid;place-items:center;align-content:center;gap:.55rem;width:100%;min-width:0;height:100%;min-height:9.4rem;overflow:hidden;border:0;border-radius:.8rem;padding:.75rem .55rem;color:var(--color-ink);background:transparent;font:inherit;text-align:center}.music-symbol-picker__choose:hover,.music-symbol-picker__choose:focus-visible{outline:3px solid color-mix(in srgb,var(--portal-primary) 42%,transparent);outline-offset:-3px;background:color-mix(in srgb,var(--portal-primary) 7%,transparent)}.music-symbol-picker__choose>.music-symbol{display:block;max-width:100%;overflow:hidden;font-family:"Bravura","Bravura Text","Apple Symbols",serif!important;font-size:3rem;line-height:1.05;vertical-align:initial}.music-symbol-picker__choose>span:last-child{display:-webkit-box;width:100%;max-width:100%;overflow:hidden;color:var(--color-ink);font-size:.72rem;font-weight:750;line-height:1.25;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2}.music-symbol-picker__favorite{position:absolute;top:.35rem;right:.35rem;display:grid;place-items:center;width:2rem;min-height:2rem;border:1px solid transparent;border-radius:50%;padding:0;color:#a86000;background:color-mix(in srgb,var(--shop-card,#fff) 85%,transparent);font-size:1.2rem}.music-symbol-picker__favorite:hover,.music-symbol-picker__favorite:focus-visible{border-color:#d89422;background:#fff7e6}.music-symbol-picker__pagination{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:.75rem 1.25rem;border-top:1px solid var(--color-border);background:var(--portal-surface);font-size:.8rem;font-weight:800}.music-symbol-picker__pagination .button{min-height:2.35rem}.music-symbol-picker__pagination button:disabled{opacity:.45;cursor:not-allowed}@media(max-width:900px){.music-symbol-picker__tools{grid-template-columns:1fr 1fr 1fr}.music-symbol-picker__tools label:first-child,.music-symbol-picker__display{grid-column:auto}}@media(max-width:760px){.music-symbol-picker{width:100%;max-width:none;max-height:100dvh;margin:auto 0 0;border-radius:1rem 1rem 0 0}.music-symbol-picker__shell{max-height:100dvh}.music-symbol-picker__tools{grid-template-columns:1fr 1fr;padding-inline:.85rem}.music-symbol-picker__tools label:first-child,.music-symbol-picker__display{grid-column:1/-1}.music-symbol-picker__grid{grid-template-columns:repeat(3,minmax(0,1fr));padding-inline:.85rem}.music-symbol-picker__header{padding-inline:.85rem}.music-symbol-picker__tabs,.music-symbol-picker__status,.music-symbol-picker__pagination{padding-inline:.85rem}.music-symbol-picker__header p{display:none}}@media(max-width:420px){.music-symbol-picker__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.music-symbol-picker__pagination{position:sticky;bottom:0}}
.music-symbol-picker__choose{min-height:8rem}
.music-symbol-picker,
.music-symbol-picker__shell{overflow:hidden}
.music-symbol-picker__header,
.music-symbol-picker__tabs,
.music-symbol-picker__tools,
.music-symbol-picker__status,
.music-symbol-picker__pagination{flex:0 0 auto}
.music-symbol-picker__tabs{min-height:3.05rem}
.music-symbol-picker__grid{flex:1 1 auto;min-height:0}
.student-profile-dialog{height:fit-content!important;max-height:min(46rem,calc(100dvh - 2rem))!important}
@media(max-width:1100px){.student-profile-dialog{width:min(48rem,calc(100% - 1rem))!important;max-width:48rem!important;height:auto!important;max-height:calc(100dvh - 1rem)!important;margin:auto!important;border-radius:1.25rem!important;overflow:auto}.student-profile-dialog .student-profile-dialog__shell{min-height:0!important;padding-bottom:1rem!important}}
.student-profile-dialog:has(.student-profile-teacher-overview:not([hidden])) .student-profile-dialog__shell{padding:1.25rem}.student-profile-dialog:has(.student-profile-teacher-overview:not([hidden])) .student-profile-dialog__heading{margin-bottom:1rem}.student-profile-showcase--compact{min-height:7rem;border-color:rgb(255 255 255 / 48%);box-shadow:inset 0 1px 0 rgb(255 255 255 / 28%),0 12px 28px rgb(15 23 42 / 16%)}.student-profile-showcase--compact .student-profile-showcase__copy span{margin-bottom:.12rem;font-size:.62rem}.student-profile-showcase--compact .student-profile-showcase__copy p{margin-top:.22rem;font-size:.82rem}.student-profile-teacher-overview{padding-top:1.2rem}.student-profile-teacher-overview__summary{gap:.7rem}.student-profile-teacher-overview__summary>div{position:relative;min-height:5.7rem;padding:.85rem .9rem .8rem;border:0;border-radius:.85rem;background:linear-gradient(145deg,color-mix(in srgb,var(--portal-primary) 10%,#fff),#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--portal-primary) 13%,var(--color-border)),0 4px 12px rgb(15 23 42 / 5%);overflow:hidden}.student-profile-teacher-overview__summary>div::before{position:absolute;top:0;right:0;bottom:0;width:.25rem;border-radius:999px 0 0 999px;background:var(--portal-primary);content:""}.student-profile-teacher-overview__summary>div:nth-child(2)::before{background:#8b5cf6}.student-profile-teacher-overview__summary>div:nth-child(3)::before{background:#14b8a6}.student-profile-teacher-overview__summary span{font-size:.61rem;letter-spacing:.075em}.student-profile-teacher-overview__summary strong{margin:.3rem 0 .18rem;font-size:1.08rem;letter-spacing:-.02em}.student-profile-teacher-overview__summary small{font-size:.7rem}.student-profile-teacher-overview__heading{position:relative;margin-top:1.35rem;padding-top:1rem;border-top:1px solid var(--color-border)}.student-profile-teacher-overview__heading::after{position:absolute;top:-1px;left:0;width:3.2rem;height:2px;border-radius:999px;background:var(--portal-primary);content:""}.student-profile-teacher-overview__heading span{font-size:.66rem}.student-profile-teacher-overview__heading p{font-size:.78rem}.student-profile-activity{gap:.55rem;max-height:18rem;margin-top:.75rem;padding-right:.2rem}.student-profile-activity__item{grid-template-columns:2rem minmax(0,1fr) auto;gap:.7rem;border:0;border-radius:.8rem;padding:.7rem;background:linear-gradient(90deg,color-mix(in srgb,var(--portal-primary) 6%,#fff),#fff 72%);box-shadow:inset 0 0 0 1px var(--color-border)}.student-profile-activity__item--assignment{background:linear-gradient(90deg,#f5f3ff,#fff 72%)}.student-profile-activity__marker{display:grid;place-items:center;width:2rem;height:2rem;border-radius:.65rem;color:var(--portal-primary-dark);background:var(--portal-primary-light);font-size:.9rem;font-weight:900}.student-profile-activity__item--assignment .student-profile-activity__marker{color:#6d28d9;background:#ede9fe}.student-profile-activity__item strong{font-size:.84rem}.student-profile-activity__item span:not(.student-profile-activity__marker){margin-top:.08rem;font-size:.72rem}.student-profile-activity__item time{align-self:start;margin-top:.13rem;font-size:.68rem}.student-profile-teacher-overview__actions{justify-content:space-between;margin-top:1.15rem;padding-top:1rem;border-top:1px solid var(--color-border)}.student-profile-teacher-overview__actions .button{min-width:10.5rem;border-radius:.7rem}.student-profile-teacher-overview__actions .button:last-child{margin-left:auto}@media(max-width:600px){.student-profile-dialog:has(.student-profile-teacher-overview:not([hidden])) .student-profile-dialog__shell{padding:1rem}.student-profile-showcase--compact{min-height:6.25rem;padding:.85rem}.student-profile-teacher-overview__summary{gap:.5rem}.student-profile-teacher-overview__summary>div{min-height:0;padding:.72rem .8rem}.student-profile-teacher-overview__actions{gap:.6rem}.student-profile-teacher-overview__actions .button{min-width:0;margin:0!important}}
.student-profile-dialog:has(.student-profile-teacher-overview:not([hidden])){background:linear-gradient(160deg,#fff 0%,#fbfcff 55%,color-mix(in srgb,var(--portal-primary) 6%,#fff) 100%)}.student-profile-dialog:has(.student-profile-teacher-overview:not([hidden])) .student-profile-showcase--compact{min-height:7.6rem;background-image:radial-gradient(circle at 88% 12%,rgb(255 255 255 / 20%) 0 1.25rem,transparent 1.3rem),linear-gradient(118deg,rgb(4 24 72 / 92%),var(--portal-primary) 58%,#7452ef)}.student-profile-dialog:has(.student-profile-teacher-overview:not([hidden])) .student-profile-showcase--compact::before{position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(0deg,transparent 0 1.05rem,rgb(255 255 255 / 9%) 1.1rem 1.15rem);content:"";opacity:.8}.student-profile-dialog:has(.student-profile-teacher-overview:not([hidden])) .student-profile-showcase--compact .student-profile-showcase__copy span{display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;padding:.28rem .5rem;color:#fff;background:rgb(255 255 255 / 14%);font-size:.58rem;letter-spacing:.1em}.student-profile-dialog:has(.student-profile-teacher-overview:not([hidden])) .student-profile-showcase--compact .student-profile-showcase__copy span::before{width:.38rem;height:.38rem;border:1px solid rgb(255 255 255 / 70%);border-radius:50%;content:""}.student-profile-dialog:has(.student-profile-teacher-overview:not([hidden])) .student-profile-showcase--compact .student-profile-showcase__copy p{color:rgb(255 255 255 / 78%)}.student-profile-teacher-overview__summary{grid-template-columns:minmax(12rem,1.35fr) repeat(2,minmax(8.4rem,1fr));align-items:stretch}.student-profile-teacher-overview__summary>.student-profile-metric{min-height:6.15rem}.student-profile-teacher-overview__summary>.student-profile-metric--practice{padding:1rem 1rem .85rem;border:0;color:#fff;background:linear-gradient(135deg,#0a245e 0%,var(--portal-primary) 58%,#5c46d8 100%);box-shadow:0 12px 22px rgb(35 72 183 / 19%)}.student-profile-teacher-overview__summary>.student-profile-metric--practice::before{display:none}.student-profile-teacher-overview__summary>.student-profile-metric--practice span,.student-profile-teacher-overview__summary>.student-profile-metric--practice small{color:rgb(255 255 255 / 76%)}.student-profile-teacher-overview__summary>.student-profile-metric--practice strong{color:#fff;font-size:1.32rem}.student-profile-metric__progress{height:.38rem;margin-top:.58rem;overflow:hidden;border-radius:999px;background:rgb(255 255 255 / 24%)}.student-profile-metric__progress span{display:block!important;height:100%;border-radius:inherit;background:linear-gradient(90deg,#fef3c7,#fff);box-shadow:0 0 10px rgb(255 255 255 / 78%);transition:width .45s ease}.student-profile-teacher-overview__summary>.student-profile-metric--assignments{background:linear-gradient(145deg,#f8f6ff,#fff)}.student-profile-teacher-overview__summary>.student-profile-metric--activity{background:linear-gradient(145deg,#f0fdfa,#fff)}.student-profile-teacher-overview__heading{display:flex;align-items:center;min-height:3.55rem;margin-top:1.55rem;padding:.7rem .85rem;border:0;border-radius:.8rem;background:linear-gradient(90deg,color-mix(in srgb,var(--portal-primary) 9%,#fff),transparent)}.student-profile-teacher-overview__heading::after{top:50%;left:.15rem;width:.3rem;height:1.55rem;transform:translateY(-50%)}.student-profile-teacher-overview__heading p{font-size:.75rem}.student-profile-activity{position:relative;gap:.65rem;max-height:17.25rem;margin-top:.8rem;padding:.15rem .1rem .15rem 1.05rem}.student-profile-activity::before{position:absolute;top:.4rem;bottom:.4rem;left:.52rem;width:1px;background:linear-gradient(var(--portal-primary),#8b5cf6 56%,transparent);content:""}.student-profile-activity__item{position:relative;grid-template-columns:2.25rem minmax(0,1fr) auto;gap:.78rem;padding:.78rem .82rem;border-radius:.9rem;background:linear-gradient(100deg,color-mix(in srgb,var(--portal-primary) 7%,#fff),#fff 68%);box-shadow:inset 0 0 0 1px rgb(18 41 92 / 9%),0 5px 12px rgb(15 23 42 / 4%)}.student-profile-activity__item::before{position:absolute;top:50%;left:-.72rem;width:.46rem;height:.46rem;border:2px solid #fff;border-radius:50%;background:var(--portal-primary);box-shadow:0 0 0 1px color-mix(in srgb,var(--portal-primary) 35%,#fff);content:"";transform:translateY(-50%)}.student-profile-activity__item--assignment::before{background:#8b5cf6}.student-profile-activity__marker{width:2.25rem;height:2.25rem;border-radius:.72rem}.student-profile-activity__empty{position:relative;margin-left:1.05rem;border-style:solid;background:var(--portal-surface)}.student-profile-teacher-overview__actions{align-items:center;padding-top:1.1rem}.student-profile-teacher-overview__action{display:inline-flex!important;align-items:center;justify-content:center;gap:.42rem;min-width:11rem!important}.student-profile-teacher-overview__action--history::before{content:"↗";font-size:1rem}.student-profile-teacher-overview__action--pulse::after{content:"→";font-size:1rem}@media(max-width:680px){.student-profile-teacher-overview__summary{grid-template-columns:1fr 1fr}.student-profile-teacher-overview__summary>.student-profile-metric--practice{grid-column:1/-1}.student-profile-teacher-overview__heading{margin-top:1.15rem}.student-profile-activity{max-height:15rem}.student-profile-activity__item{grid-template-columns:2.15rem minmax(0,1fr)}.student-profile-activity__item time{display:none}}@media(max-width:430px){.student-profile-teacher-overview__summary{grid-template-columns:1fr}.student-profile-teacher-overview__summary>.student-profile-metric--practice{grid-column:auto}.student-profile-teacher-overview__summary>.student-profile-metric{min-height:0}.student-profile-activity{padding-left:.85rem}.student-profile-activity::before{left:.4rem}.student-profile-activity__item::before{left:-.62rem}.student-profile-teacher-overview__heading{padding-right:.6rem}.student-profile-teacher-overview__heading p{line-height:1.35}}