/* Functional additions only. The original Studio theme in styles.css owns the design. */
html body :is(.ux-theme,.ux-menu-open){display:inline-flex;gap:8px;align-items:center;justify-content:center;background:var(--studio-soft)!important;color:var(--studio-text)!important;border:1px solid var(--studio-line)!important;border-radius:12px;padding:8px 14px;font:inherit;font-weight:700;cursor:pointer}
html body .ux-theme>span:first-child{font-size:1.25rem}
html body .ux-auth-theme{position:relative;display:flex;justify-content:flex-end;padding:16px 24px;z-index:2}
html body .ux-avatar>span{font-size:2.5rem;font-weight:700;text-transform:uppercase}
html body .ux-avatar-small>span{font-size:.9rem}
html body .ux-avatar{position:relative;display:inline-grid;place-items:center;width:112px;height:112px;border-radius:50%;overflow:hidden;background:var(--studio-tint);color:var(--studio-primary);border:3px solid var(--studio-line);flex-shrink:0}
html body .ux-avatar>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html body .ux-avatar-small{width:34px;height:34px;border-width:1px}
html body .ux-avatar img[hidden]{display:none!important}
html body .ux-photo-panel{grid-column:1/-1;display:grid;grid-template-columns:minmax(180px,1fr) auto minmax(240px,1.2fr);gap:24px;align-items:center}
html body .ux-photo-panel h2 small{display:inline-block;font-size:.7rem;letter-spacing:0;background:var(--studio-tint);color:var(--studio-primary);padding:5px 9px;border-radius:30px}
html body .ux-photo-panel p{color:var(--studio-muted);font-size:.9rem}
html body .ux-photo-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
html body #removeProfilePhoto{background:var(--studio-soft);color:var(--studio-text);border:1px solid var(--studio-line);border-radius:12px;padding:8px 14px}
html body .ux-menu{position:fixed;inset:0;margin:auto;width:min(720px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:24px;border:1px solid var(--studio-line);border-radius:24px;background:var(--studio-card);color:var(--studio-text);box-shadow:0 30px 100px #0005;overflow:auto;z-index:10000}
html body .ux-menu::backdrop{background:#07161fcc;backdrop-filter:blur(5px)}
html body .ux-menu>header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
html body .ux-menu h2{margin:4px 0;font-size:1.7rem}
html body .ux-menu button{background:var(--studio-soft);color:var(--studio-text);border:1px solid var(--studio-line);border-radius:12px;padding:8px 14px}
html body .ux-menu nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
html body .ux-menu nav a{display:flex;flex-direction:column;gap:4px;background:var(--studio-soft);color:var(--studio-text);border:1px solid var(--studio-line);border-radius:14px;padding:14px;text-decoration:none;min-width:0}
html body .ux-menu nav a.active{background:var(--studio-tint);border-color:var(--studio-primary)}
html body .ux-menu nav a:hover{border-color:var(--studio-primary)}
html body .ux-menu small{color:var(--studio-muted);font-size:.8rem;line-height:1.4}
html body .ux-menu-footer{display:flex;justify-content:space-between;align-items:center;margin-top:18px}
html body .ux-menu-footer form{margin:0}
html.ux-menu-visible{overflow:hidden}

@media(min-width:1201px){html body .mobile-bottom-nav{display:none!important}}
@media(max-width:1200px){
 html body .topbar>nav{display:none!important}
 html body .topbar{position:relative;padding:12px 16px}
 html body .topbar .account-menu{margin-left:auto}
 html body .mobile-bottom-nav{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;inset:auto 0 0;z-index:1000;padding:8px 8px max(8px,env(safe-area-inset-bottom));gap:4px;background:var(--studio-card)!important;border-top:1px solid var(--studio-line)}
 html body .mobile-bottom-nav :is(a,button){display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 2px;min-width:0;min-height:52px;border:0;border-radius:12px;font:inherit;font-size:.68rem;font-weight:700;line-height:1.25;background:transparent;color:var(--studio-muted)!important;text-decoration:none}
 html body .mobile-bottom-nav span{font-size:1.25rem}
 html body:has(.mobile-bottom-nav){padding-bottom:calc(86px + env(safe-area-inset-bottom))}
 html body .ux-photo-panel{grid-template-columns:1fr auto}html body .ux-photo-panel form{grid-column:1/-1}
}
@media(max-width:640px){
 html body .topbar{gap:10px}
 html body .topbar .brand{flex:1 0 60%}
 html body .brand-copy strong{font-size:.88rem}html body .brand-copy small{font-size:.66rem}
 html body .topbar .account-menu{width:100%;justify-content:space-between;gap:6px;flex-wrap:nowrap}
 html body .topbar .theme-toggle{min-width:0!important;width:auto!important;padding:8px!important;gap:5px}
 html body .topbar .theme-toggle-copy,html body .topbar .theme-toggle-track{display:none!important}
 html body .topbar .theme-toggle-action{display:inline!important;font-size:.8rem}
 html body .topbar :is(.logout-form,.trial-account-pill,.ux-account-label){display:none!important}
 html body .ux-menu-open{font-size:.8rem;padding:8px 12px}
 html body .ux-menu{padding:16px;border-radius:18px}
 html body .ux-menu nav{grid-template-columns:1fr 1fr;gap:8px}
 html body .ux-menu nav a{padding:12px;font-size:.85rem;overflow-wrap:anywhere}
 html body .ux-menu nav small{font-size:.74rem}
 html body :is(.profile-grid,.admin-grid){grid-template-columns:1fr!important}
 html body .ux-photo-panel{grid-template-columns:1fr;text-align:left}html body .ux-photo-panel form{grid-column:auto}
 html body :is(.view,.pm-page,.admin-card,.academy-main,.edu-reader,.question-card){min-width:0;max-width:100%}
 html body :is(.library-toolbar,.section-heading,.pm-page-head){flex-wrap:wrap;gap:14px}
 html body :is(.exam-library,.glossary-grid){grid-template-columns:1fr!important}
 html body :is(.trial-live-banner,.trial-live-actions){align-items:flex-start}
 html body .trial-live-banner{padding:12px 16px}html body .trial-live-banner small{display:block!important;max-width:100%;line-height:1.5}
 html body :is(.table-scroll,.lesson-table-wrap,.book-table-wrap,.edu-compare){overflow-x:auto;max-width:100%}
}
@media(prefers-reduced-motion:reduce){html body *,html body *::before,html body *::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

html body .account-profile-btn{display:inline-flex;align-items:center;gap:8px}
html body .theme-toggle{display:inline-flex!important;visibility:visible!important;opacity:1!important}
@media(max-width:1200px){html body .topbar .account-menu{display:flex!important;align-items:center}html body:has(#home.active) .topbar>nav{display:none!important}}
@media(max-width:640px){html body .topbar{display:flex!important;flex-wrap:wrap}}
