/* Personal web runtime theme control.  It is deliberately independent of the
   group route switcher: personal now changes theme in place. */
.personal-theme-control{
    position:fixed;
    right:max(18px, env(safe-area-inset-right));
    bottom:max(18px, env(safe-area-inset-bottom));
    z-index:calc(var(--z-overlay, 900) - 1);
}
.personal-theme-trigger{
    display:grid;
    width:46px;
    height:46px;
    padding:0;
    place-items:center;
    border:1px solid #cbd5e1;
    border-radius:50%;
    background:#fff;
    box-shadow:none;
    color:#2e5ebc;
    cursor:pointer;
    transition:transform .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease;
}
.personal-theme-trigger:hover,
.personal-theme-trigger[aria-expanded="true"]{
    border-color:#94a3b8;
    background:#f8fafc;
    box-shadow:none;
    color:#244d9a;
    outline:none;
    transform:translateY(-1px);
}
.personal-theme-trigger:focus-visible{
    border-color:#94a3b8;
    background:#f8fafc;
    box-shadow:none;
    color:#244d9a;
    outline:2px solid rgb(57 113 211 / .58);
    outline-offset:3px;
    transform:translateY(-1px);
}
.personal-theme-trigger:active{transform:translateY(0)}
.personal-theme-trigger-icon{
    display:grid;
    width:24px;
    height:24px;
    place-items:center;
}
.personal-theme-trigger-icon svg{width:22px;height:22px}
.personal-theme-sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}
.personal-theme-menu{
    position:absolute;
    right:0;
    bottom:calc(100% + 10px);
    display:grid;
    width:min(276px, calc(100vw - 36px));
    gap:4px;
    padding:7px;
    border:1px solid rgb(148 163 184 / .36);
    border-radius:16px;
    background:rgb(255 255 255 / .97);
    box-shadow:0 12px 28px rgb(15 23 42 / .14);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}
.personal-theme-menu[hidden]{display:none}
.personal-theme-option{
    display:grid;
    grid-template-columns:34px minmax(0,1fr) 20px;
    gap:10px;
    width:100%;
    min-height:56px;
    padding:9px;
    align-items:center;
    border:1px solid transparent;
    border-radius:11px;
    background:transparent;
    color:#334155;
    text-align:left;
    cursor:pointer;
    transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.personal-theme-option:hover,
.personal-theme-option:focus-visible{
    border-color:transparent;
    background:transparent;
    color:#244d9a;
}
.personal-theme-option:focus-visible{
    outline:2px solid rgb(57 113 211 / .48);
    outline-offset:1px;
}
.personal-theme-option.is-selected{
    border-color:transparent;
    background:transparent;
    color:#244d9a;
}
.personal-theme-option-icon,
.personal-theme-option-check{
    display:grid;
    width:34px;
    height:34px;
    place-items:center;
    border-radius:10px;
    background:rgb(57 113 211 / .1);
    color:#2e5ebc;
}
.personal-theme-option-icon svg{width:18px;height:18px}
.personal-theme-option-check{
    width:20px;
    height:20px;
    background:transparent;
}
.personal-theme-option-check svg{width:17px;height:17px}
.personal-theme-option-copy{display:grid;gap:2px;min-width:0}
.personal-theme-option-copy strong{font-size:14px;font-weight:800;line-height:1.2}
.personal-theme-option-copy small{color:#64748b;font-size:12px;font-weight:600;line-height:1.35}

.personal-theme-welcome-card{
    position:relative;
    width:min(460px, calc(100vw - 32px));
    max-width:460px;
    padding:30px;
}
.personal-theme-welcome-close{
    position:absolute;
    top:16px;
    right:16px;
    display:grid;
    width:38px;
    height:38px;
    padding:0;
    place-items:center;
    border:1px solid var(--web-accent-border-muted);
    border-radius:12px;
    background:#fff;
    color:var(--web-accent-primary);
    cursor:pointer;
}
.personal-theme-welcome-close:hover,
.personal-theme-welcome-close:focus-visible{
    border-color:var(--web-accent-border-strong);
    background:var(--web-accent-surface-strong);
    outline:none;
}
.personal-theme-welcome-close svg{width:19px;height:19px}
.personal-theme-welcome-intro{display:grid;gap:9px;padding-right:40px}
.personal-theme-welcome-intro h2{display:flex;gap:9px;margin:0;align-items:center;color:#172033;font-size:25px;line-height:1.25}
.personal-theme-welcome-title-icon{display:grid;width:28px;height:28px;flex:0 0 auto;place-items:center;color:var(--web-accent-primary)}
.personal-theme-welcome-title-icon svg{width:24px;height:24px}
.personal-theme-welcome-intro p{margin:0;color:#64748b;font-size:15px;font-weight:650;line-height:1.65}
.personal-theme-welcome-choice-list{display:grid;gap:9px;margin-top:22px}
.personal-theme-welcome-choice{
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    gap:11px;
    width:100%;
    min-height:62px;
    padding:11px;
    align-items:center;
    border:1px solid var(--web-accent-border-muted);
    border-radius:14px;
    background:#fff;
    color:#334155;
    text-align:left;
    cursor:pointer;
    transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease;
}
.personal-theme-welcome-choice:hover,
.personal-theme-welcome-choice:focus-visible{
    border-color:var(--web-accent-primary);
    background:var(--web-accent-surface);
    color:var(--web-accent-primary);
    outline:none;
    transform:translateY(-1px);
}
.personal-theme-welcome-choice > i{
    display:grid;
    width:38px;
    height:38px;
    place-items:center;
    border-radius:11px;
    background:var(--web-accent-surface);
    color:var(--web-accent-primary);
}
.personal-theme-welcome-choice > i svg{width:20px;height:20px}
.personal-theme-welcome-choice-icon{
    display:grid;
    width:38px;
    height:38px;
    place-items:center;
    border-radius:11px;
    background:var(--web-accent-surface);
    color:var(--web-accent-primary);
}
.personal-theme-welcome-choice-icon svg{width:20px;height:20px}
.personal-theme-welcome-choice span{display:grid;gap:2px;min-width:0}
.personal-theme-welcome-choice strong{font-size:15px;font-weight:800;line-height:1.25}
.personal-theme-welcome-choice small{color:#64748b;font-size:12px;font-weight:600;line-height:1.35}
.personal-theme-welcome-hint{margin:2px 2px 0;color:#64748b;font-size:12px;font-weight:600;line-height:1.55}

html.personal-theme-transition body.personal-web,
html.personal-theme-transition body.personal-web :is(
    .page,
    .app-shell,
    .page-view,
    .teacher-sidebar,
    .teacher-sidebar-footer,
    .teacher-follow,
    .context-panel,
    .context-card,
    .context-panel-content,
    .teacher-card,
    .web-login-card,
    .personal-session-section,
    .stepper-card,
    .section,
    .student-profiles-page-header,
    .student-profiles-page-toolbar,
    .feedback-records-toolbar,
    .student-profile-panel,
    .data-table-scroll,
    .modal,
    .modal-card,
    .modal-panel,
    .performance-panel,
    .personal-theme-trigger,
    .personal-theme-menu,
    .personal-theme-option,
    .personal-theme-welcome-card,
    .personal-theme-welcome-choice,
    input,
    textarea,
    select
){
    transition-property:background-color,color,border-color,box-shadow,fill,stroke !important;
    transition-duration:.56s !important;
    transition-timing-function:cubic-bezier(.22,.7,.2,1) !important;
}

html.web-night-preview .personal-theme-trigger{
    border-color:#315fba;
    background:#101010;
    box-shadow:none;
    color:#76a8ff;
}
html.web-night-preview .personal-theme-trigger:hover,
html.web-night-preview .personal-theme-trigger[aria-expanded="true"]{
    border-color:#4c8dff;
    background:#151515;
    box-shadow:none;
    color:#a9c7ff;
}
html.web-night-preview .personal-theme-trigger:focus-visible{
    border-color:#4c8dff;
    background:#151515;
    box-shadow:none;
    outline:2px solid #4c8dff;
    outline-offset:3px;
    color:#a9c7ff;
}
html.web-night-preview .personal-theme-menu{
    border-color:#242424;
    background:rgb(13 13 13 / .98);
    box-shadow:0 12px 28px rgb(0 0 0 / .34);
}
html.web-night-preview .personal-theme-option{color:#e9edf5}
html.web-night-preview .personal-theme-option:hover,
html.web-night-preview .personal-theme-option:focus-visible{
    border-color:transparent;
    background:transparent;
    color:#a9c7ff;
}
html.web-night-preview .personal-theme-option:focus-visible{outline-color:#4c8dff}
html.web-night-preview .personal-theme-option.is-selected{
    border-color:#315fba;
    background:transparent;
    color:#a9c7ff;
}
html.web-night-preview .personal-theme-option-icon{background:#101010;color:#76a8ff}
html.web-night-preview .personal-theme-option-copy small{color:#979ca7}
html.web-night-preview .personal-theme-welcome-close{
    border-color:#242424;
    background:#0d0d0d;
    color:#76a8ff;
}
html.web-night-preview .personal-theme-welcome-close:hover,
html.web-night-preview .personal-theme-welcome-close:focus-visible{
    border-color:#4c8dff;
    background:#101010;
}
html.web-night-preview .personal-theme-welcome-intro h2{color:#f2f4f8}
html.web-night-preview .personal-theme-welcome-title-icon{color:#76a8ff}
html.web-night-preview .personal-theme-welcome-intro p{color:#b2b7c1}
html.web-night-preview .personal-theme-welcome-choice{
    border-color:#242424;
    background:#0d0d0d;
    color:#e9edf5;
}
html.web-night-preview .personal-theme-welcome-choice:hover,
html.web-night-preview .personal-theme-welcome-choice:focus-visible{
    border-color:#4c8dff;
    background:#101010;
    color:#a9c7ff;
}
html.web-night-preview :is(.personal-theme-welcome-choice > i,.personal-theme-welcome-choice-icon){background:#101010;color:#76a8ff}
html.web-night-preview .personal-theme-welcome-choice small{color:#979ca7}
html.web-night-preview .personal-theme-welcome-hint{color:#b2b7c1}

/* The personal night system intentionally normalizes every button.  Keep this
   utility's more specific surfaces intact without leaking any rule to group. */
body.personal-web.web-night-preview #personalThemeControl .personal-theme-trigger{
    border-color:#315fba!important;
    background:#101010!important;
    box-shadow:none!important;
    color:#76a8ff!important;
}
body.personal-web.web-night-preview #personalThemeControl .personal-theme-trigger:hover,
body.personal-web.web-night-preview #personalThemeControl .personal-theme-trigger[aria-expanded="true"]{
    border-color:#4c8dff!important;
    background:#151515!important;
    box-shadow:none!important;
    color:#a9c7ff!important;
}
body.personal-web.web-night-preview #personalThemeControl .personal-theme-trigger:focus-visible{
    border-color:#4c8dff!important;
    background:#151515!important;
    box-shadow:none!important;
    outline:2px solid #4c8dff!important;
    outline-offset:3px;
    color:#a9c7ff!important;
}
body.personal-web.web-night-preview #personalThemeControl .personal-theme-menu{
    border-color:#242424!important;
    background:rgb(13 13 13 / .98)!important;
    box-shadow:0 12px 28px rgb(0 0 0 / .34)!important;
}
body.personal-web.web-night-preview #personalThemeControl .personal-theme-option{
    border-color:transparent!important;
    background:transparent!important;
    color:#e9edf5!important;
}
body.personal-web.web-night-preview #personalThemeControl .personal-theme-option:hover,
body.personal-web.web-night-preview #personalThemeControl .personal-theme-option:focus-visible{
    border-color:transparent!important;
    background:transparent!important;
    color:#a9c7ff!important;
}
body.personal-web.web-night-preview #personalThemeControl .personal-theme-option:focus-visible{outline-color:#4c8dff!important}
body.personal-web.web-night-preview #personalThemeControl .personal-theme-option.is-selected{
    border-color:#315fba!important;
    background:transparent!important;
    color:#a9c7ff!important;
}
body.personal-web.web-night-preview .personal-theme-option-icon{background:#101010!important;color:#76a8ff!important}
body.personal-web.web-night-preview .personal-theme-option-copy small{color:#979ca7!important}
body.personal-web.web-night-preview .personal-theme-welcome-close{
    border-color:#242424!important;
    background:#0d0d0d!important;
    color:#76a8ff!important;
}
body.personal-web.web-night-preview .personal-theme-welcome-close:hover,
body.personal-web.web-night-preview .personal-theme-welcome-close:focus-visible{
    border-color:#4c8dff!important;
    background:#101010!important;
}
body.personal-web.web-night-preview .personal-theme-welcome-intro h2{color:#f2f4f8!important}
body.personal-web.web-night-preview .personal-theme-welcome-title-icon{color:#76a8ff!important}
body.personal-web.web-night-preview .personal-theme-welcome-intro p{color:#b2b7c1!important}
body.personal-web.web-night-preview .personal-theme-welcome-choice{
    border-color:#242424!important;
    background:#0d0d0d!important;
    color:#e9edf5!important;
}
body.personal-web.web-night-preview .personal-theme-welcome-choice:hover,
body.personal-web.web-night-preview .personal-theme-welcome-choice:focus-visible{
    border-color:#4c8dff!important;
    background:#101010!important;
    color:#a9c7ff!important;
}
body.personal-web.web-night-preview :is(.personal-theme-welcome-choice > i,.personal-theme-welcome-choice-icon){background:#101010!important;color:#76a8ff!important}
body.personal-web.web-night-preview .personal-theme-welcome-choice small{color:#979ca7!important}
body.personal-web.web-night-preview .personal-theme-welcome-hint{color:#b2b7c1!important}

/* Personal-only segmented controls use the selected option as the colour
   surface.  Removing both travelling layers and colour transitions makes a
   selection change in one frame, so the dark container cannot show through. */
body.personal-web .data-view-switch::before,
body.personal-web .context-summary-choice-group::before{
    display:none!important;
    content:none!important;
}
body.personal-web .web-login-mode-tab-indicator{
    display:none!important;
}
body.personal-web .data-view-switch > button,
body.personal-web .web-login-mode-tab,
body.personal-web .context-summary-choice-group .context-summary-choice{
    background-color:transparent!important;
    background-image:none!important;
    box-shadow:none!important;
    transform:none!important;
    transition:none!important;
}
body.personal-web.web-night-preview .data-view-switch > button,
body.personal-web.web-night-preview .web-login-mode-tab,
body.personal-web.web-night-preview .context-summary-choice-group .context-summary-choice{
    transition:none!important;
}
body.personal-web .data-view-switch > button:is(.is-active,[aria-pressed="true"]),
body.personal-web .web-login-mode-tab:is(.is-active,[aria-selected="true"]),
body.personal-web .context-summary-choice:is(.is-active,[aria-pressed="true"]){
    background-color:var(--web-accent-primary)!important;
    color:#fff!important;
}
body.personal-web.web-night-preview .data-view-switch > button:is(.is-active,[aria-pressed="true"]),
body.personal-web.web-night-preview .web-login-mode-tab:is(.is-active,[aria-selected="true"]),
body.personal-web.web-night-preview .context-summary-choice:is(.is-active,[aria-pressed="true"]){
    background-color:var(--night-brand,var(--web-accent-primary))!important;
}
body.personal-web.web-night-preview .data-view-switch > button:is(.is-active,[aria-pressed="true"]):is(:hover,:focus-visible,:active),
body.personal-web.web-night-preview .web-login-mode-tab:is(.is-active,[aria-selected="true"]):is(:hover,:focus-visible,:active),
body.personal-web.web-night-preview .context-summary-choice:is(.is-active,[aria-pressed="true"]):is(:hover,:focus-visible,:active){
    background:var(--night-brand,var(--web-accent-primary))!important;
    color:#fff!important;
}
body.personal-web :is(
    .data-view-switch > button,
    .web-login-mode-tab,
    .context-summary-choice
):is(.is-active,[aria-pressed="true"],[aria-selected="true"]) :is([data-lucide],svg.lucide){
    color:#fff!important;
}

/* Adjacent enabled feedback options share one blue outer edge in night mode.
   The quiet middle divider preserves the separate controls without a doubled
   blue frame between them. */
body.personal-web.web-night-preview .generation-options-list > .generation-option-button.is-on:has(+ .generation-option-button.is-on){
    border-bottom-color:var(--night-divider)!important;
    border-bottom-left-radius:0!important;
    border-bottom-right-radius:0!important;
}
body.personal-web.web-night-preview .generation-options-list > .generation-option-button.is-on + .generation-option-button.is-on{
    border-top:0!important;
    border-top-left-radius:0!important;
    border-top-right-radius:0!important;
}
/* Keep the focused button's full boundary visible for keyboard navigation. */
body.personal-web.web-night-preview .generation-options-list > .generation-option-button.is-on:has(+ .generation-option-button.is-on):focus-visible{
    border-bottom-color:var(--night-brand)!important;
    border-bottom-left-radius:var(--night-radius-row)!important;
    border-bottom-right-radius:var(--night-radius-row)!important;
}
body.personal-web.web-night-preview .generation-options-list > .generation-option-button.is-on + .generation-option-button.is-on:focus-visible{
    border-top:1px solid var(--night-brand)!important;
    border-top-left-radius:var(--night-radius-row)!important;
    border-top-right-radius:var(--night-radius-row)!important;
}

@media (max-width:560px){
    .personal-theme-control{right:max(12px, env(safe-area-inset-right));bottom:max(12px, env(safe-area-inset-bottom))}
    .personal-theme-trigger{width:43px;height:43px}
    .personal-theme-welcome-card{padding:25px 20px 20px}
}
@media (prefers-reduced-motion:reduce){
    .personal-theme-trigger,
    .personal-theme-option,
    .personal-theme-welcome-choice,
    html.personal-theme-transition body.personal-web,
    html.personal-theme-transition body.personal-web :is(
        .page,.app-shell,.page-view,.teacher-sidebar,.teacher-sidebar-footer,
        .teacher-follow,.context-panel,.context-card,.context-panel-content,
        .teacher-card,.web-login-card,.personal-session-section,.stepper-card,
        .section,.student-profiles-page-header,.student-profiles-page-toolbar,
        .feedback-records-toolbar,.student-profile-panel,.data-table-scroll,
        .modal,.modal-card,.modal-panel,.performance-panel,.personal-theme-trigger,
        .personal-theme-menu,.personal-theme-option,.personal-theme-welcome-card,
        .personal-theme-welcome-choice,input,textarea,select
    ),
    body.personal-web .data-view-switch > button,
    body.personal-web .web-login-mode-tab,
    body.personal-web .context-summary-choice{
        transition:none!important;
    }
}
@media print{.personal-theme-control{display:none!important}}