:root {
    color-scheme: light;
    --cp-bg: #f7f4ef;
    --cp-bg-elevated: #fcfbf8;
    --cp-surface: #ffffff;
    --cp-surface-soft: #f5f5f5;
    --cp-border: #dedede;
    --cp-border-strong: #919191;
    --cp-text: #242424;
    --cp-text-muted: #5c5c5c;
    --cp-text-soft: #6f6f6f;
    --cp-accent: #b11f4b;
    --cp-accent-hover: #9a1a41;
    --cp-accent-soft: rgba(177, 31, 75, 0.08);
    --cp-accent-fg: #ffffff;
    --cp-success: #16a34a;
    --cp-danger: #dc2626;
    --cp-warning: #f59e0b;
    --cp-link: #0078d4;
    --cp-shadow: 0 18px 48px rgba(0, 0, 0, 0.12);
    --cp-overlay: rgba(255, 255, 255, 0.8);
    --cp-panel: rgba(255, 255, 255, 0.86);
    --cp-panel-strong: rgba(255, 255, 255, 0.96);
    --cp-sheen: rgba(255, 255, 255, 0.55);
    --cp-highlight: rgba(177, 31, 75, 0.12);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --cp-bg: #3d3b3a;
    --cp-bg-elevated: #343231;
    --cp-surface: #292929;
    --cp-surface-soft: #2e2e2e;
    --cp-border: #474747;
    --cp-border-strong: #5f5f5f;
    --cp-text: #dedede;
    --cp-text-muted: #919191;
    --cp-text-soft: #b0b0b0;
    --cp-accent: #fd8ea1;
    --cp-accent-hover: #fb7b91;
    --cp-accent-soft: rgba(253, 142, 161, 0.14);
    --cp-accent-fg: #1a1a1a;
    --cp-success: #4ade80;
    --cp-danger: #f87171;
    --cp-warning: #fbbf24;
    --cp-link: #4da6ff;
    --cp-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
    --cp-overlay: rgba(41, 41, 41, 0.88);
    --cp-panel: rgba(41, 41, 41, 0.72);
    --cp-panel-strong: rgba(41, 41, 41, 0.96);
    --cp-sheen: rgba(255, 255, 255, 0.04);
    --cp-highlight: rgba(253, 142, 161, 0.12);
}

/* Bridge the existing MudBlazor views to one palette, including popovers and dialogs. */
html[data-theme] {
    --shell-ink: var(--cp-text);
    --shell-brand: var(--cp-accent);
    --shell-surface: var(--cp-surface);
    --shell-surface-strong: var(--cp-bg-elevated);
    --shell-line: var(--cp-border);
    --shell-shadow-soft: none;
    --shell-shadow-strong: none;
    --mud-palette-primary: var(--cp-accent);
    --mud-palette-primary-text: var(--cp-accent-fg);
    --mud-palette-primary-darken: var(--cp-accent-hover);
    --mud-palette-primary-hover: var(--cp-accent-soft);
    --mud-palette-secondary: var(--cp-accent);
    --mud-palette-secondary-text: var(--cp-accent-fg);
    --mud-palette-secondary-darken: var(--cp-accent-hover);
    --mud-palette-secondary-hover: var(--cp-accent-soft);
    --mud-palette-tertiary: var(--cp-link);
    --mud-palette-info: var(--cp-link);
    --mud-palette-success: var(--cp-success);
    --mud-palette-warning: var(--cp-warning);
    --mud-palette-error: var(--cp-danger);
    --mud-palette-background: var(--cp-bg);
    --mud-palette-background-gray: var(--cp-surface-soft);
    --mud-palette-surface: var(--cp-surface);
    --mud-palette-text-primary: var(--cp-text);
    --mud-palette-text-secondary: var(--cp-text-muted);
    --mud-palette-text-disabled: var(--cp-text-soft);
    --mud-palette-action-default: var(--cp-text-muted);
    --mud-palette-action-disabled: var(--cp-text-soft);
    --mud-palette-action-disabled-background: var(--cp-surface-soft);
    --mud-palette-divider: var(--cp-border);
    --mud-palette-divider-light: var(--cp-border);
    --mud-palette-lines-default: var(--cp-border);
    --mud-palette-lines-inputs: var(--cp-border-strong);
    --mud-palette-appbar-background: var(--cp-bg-elevated);
    --mud-palette-appbar-text: var(--cp-text);
    --mud-palette-drawer-background: var(--cp-surface);
    --mud-palette-drawer-text: var(--cp-text);
    --mud-palette-table-hover: var(--cp-accent-soft);
    --mud-default-borderradius: 10px;
    background: var(--cp-bg);
    color: var(--cp-text);
    scroll-padding-top: 6rem;
}

html[data-theme] body {
    background: var(--cp-bg);
    color: var(--cp-text);
    font-family: "Segoe UI", Aptos, Calibri, -apple-system, BlinkMacSystemFont, sans-serif;
}

body::before { display: none; }
button, input, textarea, select { font: inherit; }
a { color: var(--cp-link); }
button, a, input, textarea, select, [tabindex] { -webkit-tap-highlight-color: var(--cp-accent-soft); }
:focus-visible { outline: 3px solid var(--cp-accent); outline-offset: 4px; }
html[data-theme] :is(button, a, input, textarea, select, [tabindex]):focus-visible { outline: 3px solid var(--cp-accent); outline-offset: 4px; }
.preserve-lines { white-space: pre-wrap; overflow-wrap: anywhere; }
.portal-lock-bar { display: flex; justify-content: flex-end; max-width: 1360px; margin: 0 auto; padding: 0.5rem 2rem 0; }
html[data-theme] .form-control { min-height: 48px; padding: 0.75rem; border-radius: 10px; background: var(--cp-bg-elevated); color: var(--cp-text); border-color: var(--cp-border-strong); }
html[data-theme] .form-control:focus { border-color: var(--cp-accent); box-shadow: 0 0 0 3px var(--cp-accent-soft); }

html[data-theme] :is(.surface-card, .pin-card, .hero-card, .planner-item-card, .planner-sprint-step,
    .planner-event-item, .certification-goal-card, .certification-catalog-entry, .learning-tool-card,
    .history-summary-card, .certification-summary-card, .planner-focus-stat, .timeline-event-card,
    .chat-panel, .video-sidebar-card, .video-canvas-card, .reconnect-card) {
    background: var(--cp-surface);
    border-color: var(--cp-border);
    border-radius: 16px;
    box-shadow: none;
    color: var(--cp-text);
    backdrop-filter: none;
}

html[data-theme] :is(.resource-card, .note-card, .timeline-entry, .chat-message, .video-channel-card,
    .video-card, .dashboard-history-recent, .history-pride-callout, .history-day-detail,
    .history-activity-row, .video-canvas-header, .learning-tool-use-case) {
    background: var(--cp-bg-elevated);
    border-color: var(--cp-border);
    border-radius: 10px;
    box-shadow: none;
}

html[data-theme] .mud-typography { color: inherit; }
html[data-theme] :is(.mud-secondary-text, .dashboard-muted-text, .section-summary, .planner-item-domain,
    .overview-summary, .overview-stat-label, .overview-stat-action, .reconnect-description) {
    color: var(--cp-text-muted) !important;
}
html[data-theme] :is(.dashboard-card-value, .dashboard-card-label, .overview-stat-value, .reconnect-title) { color: var(--cp-text); }
html[data-theme] :is(.section-kicker, .overview-kicker, .dashboard-card-action, .planner-focus-action) { color: var(--cp-accent) !important; }
html[data-theme] :is(.planner-due-overdue, .mud-error-text) { color: var(--cp-danger) !important; }
html[data-theme] .planner-due-soon { color: var(--cp-text) !important; }
html[data-theme] :is(.resource-card, .note-card, .timeline-entry, .planner-sprint-step, .planner-event-item):hover {
    border-color: var(--cp-accent);
    box-shadow: none;
    transform: none;
}
html[data-theme] [class*="dashboard-accent-"]::before { background: var(--cp-border); width: 2px; }
html[data-theme] .planner-item-card:is(.row-overdue, .row-blocked) { border-inline-start: 3px solid var(--cp-danger); }
html[data-theme] .planner-item-card.row-completed { border-inline-start: 3px solid var(--cp-success); }
html[data-theme] .planner-sprint-step-active { border-color: var(--cp-accent); box-shadow: inset 3px 0 0 var(--cp-accent); }
html[data-theme] .planner-sprint-step-number { background: var(--cp-accent-soft); color: var(--cp-accent); border-color: var(--cp-border); }
html[data-theme] .learning-tool-icon { background: var(--cp-accent-soft) !important; color: var(--cp-accent) !important; }
html[data-theme] .learning-tool-card { border-inline-start-color: var(--cp-accent); }

html[data-theme] .tracker-tabs .mud-tabs-tabbar {
    background: var(--cp-bg-elevated);
    border-color: var(--cp-border);
    border-radius: 12px;
    box-shadow: none;
    padding: 0.25rem;
}
html[data-theme] .tracker-tabs .mud-tab {
    border-radius: 8px;
    min-width: 104px;
    min-height: 48px;
    text-transform: none;
    font-weight: 600;
}
html[data-theme] .tracker-tabs .mud-tab:is(:hover, .mud-tab-active) { background: var(--cp-accent-soft); transform: none; }
html[data-theme] .tracker-tabs .mud-tab.mud-tab-active { color: var(--cp-accent); }
html[data-theme] .tracker-app-icon { background: var(--cp-accent-soft); color: var(--cp-accent); border-color: var(--cp-border); }
html[data-theme] .surface-card .mud-input-root { background: var(--cp-bg-elevated); border-radius: 10px; }
html[data-theme] .surface-card .mud-input-outlined-border { border-color: var(--cp-border-strong) !important; }
html[data-theme] .surface-card .mud-input-control :is(.mud-input-label, .mud-input-adornment, input, textarea) { color: var(--cp-text); }
html[data-theme] .surface-card .mud-button-root { border-radius: 10px; }
html[data-theme] .surface-card .mud-table-container { border-color: var(--cp-border); }
html[data-theme] .surface-card .mud-table-head .mud-table-cell { background: var(--cp-surface-soft); color: var(--cp-text); }
html[data-theme] .surface-card .mud-table-body .mud-table-row:hover { background: var(--cp-accent-soft); }
html[data-theme] .surface-card .mud-expansion-panel { background: var(--cp-bg-elevated); border-color: var(--cp-border); border-radius: 10px; }
html[data-theme] .mud-button-root { text-transform: none; letter-spacing: normal; box-shadow: none; }
html[data-theme] .mud-chip-filled { color: var(--cp-text); background: var(--cp-surface-soft); }
html[data-theme] .mud-button-filled:not(.mud-button-filled-primary):not(.mud-button-filled-secondary):not(:disabled) {
    color: var(--cp-text);
    background: var(--cp-surface-soft);
    border: 1px solid var(--cp-border-strong);
}
html[data-theme] .mud-button-filled-primary:hover, html[data-theme] .mud-button-filled-secondary:hover {
    background: var(--cp-accent-hover);
}
html[data-theme] .reconnect-modal { background: var(--cp-overlay); }
html[data-theme] .reconnect-button { background: var(--cp-accent); color: var(--cp-accent-fg); border-radius: 10px; }
html[data-theme] .learning-heatmap-scroll { scrollbar-color: var(--cp-border-strong) var(--cp-surface-soft); }
html[data-theme] .learning-day-cell { border-color: var(--cp-border); }
html[data-theme] .learning-day-level-0 { background: var(--cp-surface-soft); }
html[data-theme] .learning-day-level-1 { background: color-mix(in srgb, var(--cp-accent) 22%, var(--cp-surface)); }
html[data-theme] .learning-day-level-2 { background: color-mix(in srgb, var(--cp-accent) 46%, var(--cp-surface)); }
html[data-theme] .learning-day-level-3 { background: color-mix(in srgb, var(--cp-accent) 72%, var(--cp-surface)); }
html[data-theme] .learning-day-level-4 { background: var(--cp-accent); }
html[data-theme] .learning-day-button:is(:hover, :focus-visible), html[data-theme] .learning-day-selected {
    border-color: var(--cp-accent); box-shadow: 0 0 0 2px var(--cp-accent-soft);
}

.skip-link {
    background: var(--cp-accent);
    color: var(--cp-accent-fg);
    padding: 0.75rem 1rem;
    position: fixed;
    top: -5rem;
    left: 1rem;
    z-index: 2000;
    border-radius: 10px;
}
.skip-link:focus { top: 0.5rem; color: var(--cp-accent-fg); }
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 0.75rem;
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: 10px;
    color: var(--cp-text);
    cursor: pointer;
    font-size: 0.8125rem;
}
.theme-toggle:hover { border-color: var(--cp-accent); }
.theme-light-label { display: none; }
html[data-theme="dark"] .theme-light-label { display: inline-flex; gap: 0.5rem; align-items: center; }
html[data-theme="dark"] .theme-dark-label { display: none; }
.theme-dark-label { display: inline-flex; gap: 0.5rem; align-items: center; }

.studio-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: 0.5rem 0 1.75rem; }
.studio-eyebrow { display: block; color: var(--cp-accent); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.studio-heading h2 { font-size: clamp(1.65rem, 2.8vw, 2.5rem); font-weight: 650; letter-spacing: -0.035em; line-height: 1.2; margin: 0.5rem 0 0.65rem; }
.studio-heading p, .studio-card p { color: var(--cp-text-muted); font-size: 0.9375rem; line-height: 1.65; margin: 0.5rem 0 1rem; }
.studio-date { color: var(--cp-text-muted); font-size: 0.8125rem; white-space: nowrap; margin-bottom: 1rem; }
.studio-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.studio-card { background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: 16px; padding: 1.75rem; min-width: 0; }
.studio-card h3 { font-size: 1.25rem; letter-spacing: -0.02em; font-weight: 650; line-height: 1.4; margin: 0.75rem 0; }
.studio-card-topline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.studio-card-topline > .mud-icon-root { color: var(--cp-text-soft); }
.focus-session { border-top: 3px solid var(--cp-accent); }
.focus-domain { display: inline-block; color: var(--cp-accent); background: var(--cp-accent-soft); border-radius: 6px; padding: 0.3rem 0.65rem; margin-top: 1.25rem; font-size: 0.75rem; font-weight: 600; }
.focus-session h3 { font-size: clamp(1.35rem, 1.8vw, 1.8rem); margin: 0.85rem 0; max-width: 36rem; }
.focus-description { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.focus-context { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 1rem; font-size: 0.75rem; color: var(--cp-text-muted); }
.focus-context > span { display: inline-flex; align-items: center; gap: 0.3rem; }
.focus-session .focus-reason { font-size: 0.75rem; color: var(--cp-text-soft); margin: 0.65rem 0 1.5rem; }
.session-budget { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; border-top: 1px solid var(--cp-border); padding-top: 1.25rem; margin-top: 1.5rem; }
.session-budget > strong { font-size: 0.8125rem; font-weight: 600; }
.studio-segmented { display: flex; gap: 0.25rem; background: var(--cp-surface-soft); border: 1px solid var(--cp-border); border-radius: 10px; padding: 0.2rem; }
.studio-segmented button { background: var(--cp-surface-soft); color: var(--cp-text-muted); border: 0; border-radius: 7px; padding: 0.55rem 0.65rem; min-height: 44px; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.studio-segmented button[aria-pressed="true"] { background: var(--cp-accent); color: var(--cp-accent-fg); }
.session-path { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: 0; }
.session-path li { display: flex; gap: 0.85rem; padding-bottom: 1rem; position: relative; }
.session-path li:not(:last-child)::after { content: ""; position: absolute; width: 1px; background: var(--cp-border); left: 15px; top: 34px; bottom: 3px; }
.session-step-number { display: flex; flex: 0 0 32px; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--cp-border); border-radius: 50%; font-size: 0.75rem; color: var(--cp-accent); background: var(--cp-accent-soft); }
.session-path strong { display: flex; align-items: baseline; gap: 0.6rem; font-size: 0.9375rem; line-height: 1.8; }
.session-path small { font-size: 0.6875rem; font-weight: 400; color: var(--cp-text-muted); }
.studio-card .session-path p { font-size: 0.8125rem; margin: 0.25rem 0 0; }
.session-resources { border-top: 1px solid var(--cp-border); padding-top: 1rem; display: grid; gap: 0.4rem; }
.session-resources .studio-eyebrow { color: var(--cp-text-soft); margin-bottom: 0.25rem; }
.session-resources a { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8125rem; line-height: 1.5; color: var(--cp-link); min-height: 40px; text-decoration: none; padding: 0.25rem 0; }
.session-resources a span { flex: 1; overflow-wrap: anywhere; }
.session-resources a:hover span { text-decoration: underline; }
.studio-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 1.25rem; }
.studio-actions .mud-button-root { border-radius: 10px; min-height: 44px; padding-inline: 1rem; }
.studio-text-link, .studio-text-button { color: var(--cp-accent); font-size: 0.8125rem; font-weight: 600; text-decoration: none; }
.studio-text-button { background: none; border: 0; padding: 0.7rem 0; cursor: pointer; min-height: 44px; }
.studio-text-link:hover, .studio-text-button:hover { text-decoration: underline; }
.studio-card .studio-footnote { color: var(--cp-text-soft); font-size: 0.75rem; line-height: 1.6; margin: 1rem 0 0; }
.studio-side { display: grid; gap: 1.5rem; }
.topic-map > p { font-size: 0.8125rem; }
.topic-row { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: stretch; gap: 0.55rem; background: none; color: var(--cp-text); border: 0; border-bottom: 1px solid var(--cp-border); text-align: start; padding: 1rem 0; width: 100%; cursor: pointer; }
.topic-row > span { width: 100%; }
.topic-row:hover .topic-row-title strong { color: var(--cp-accent); }
.topic-row-title { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.8125rem; }
.topic-row-title strong { font-weight: 600; }
.topic-row-title > span { color: var(--cp-text-muted); font-variant-numeric: tabular-nums; }
.topic-track { height: 6px; border-radius: 3px; background: var(--cp-surface-soft); border: 1px solid var(--cp-border); overflow: hidden; }
.topic-track > span { display: block; height: 100%; border-radius: 3px; background: var(--cp-accent); }
.topic-row-detail { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.75rem; color: var(--cp-text-muted); }
.week-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.week-heading h3 { font-size: 1rem; margin: 0; }
.week-heading > strong { font-size: 1.25rem; color: var(--cp-accent); }
.week-heading small { font-size: 0.6875rem; font-weight: 400; color: var(--cp-text-muted); }
.week-chart { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; margin: 1.25rem 0 0; }
.week-day { display: grid; gap: 0.4rem; text-align: center; border: 0; border-radius: 6px; padding: 0.25rem; background: none; color: var(--cp-text-muted); font-size: 0.6875rem; cursor: pointer; }
.week-day:disabled { cursor: default; }
.week-count { font-variant-numeric: tabular-nums; }
.week-bar-well { display: flex; align-items: flex-end; justify-content: stretch; background: var(--cp-surface-soft); border-radius: 4px; height: 46px; width: 100%; overflow: hidden; }
.week-bar { width: 100%; background: var(--cp-accent); border-radius: 4px; }
.week-day.is-today { background: var(--cp-accent-soft); color: var(--cp-accent); font-weight: 700; }
.week-day:hover:not(:disabled) { outline: 1px solid var(--cp-accent); }
.recall-practice { margin: 1.5rem 0; display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.5fr); gap: 2.5rem; scroll-margin-top: 6rem; }
.recall-intro h3 { font-size: 1.65rem; margin: 0.75rem 0; }
.recall-intro > p { font-size: 0.875rem; }
.review-due-label { display: inline-flex; font-size: 0.75rem; font-weight: 600; background: var(--cp-accent-soft); color: var(--cp-accent); padding: 0.5rem 0.75rem; border-radius: 8px; margin-top: 0.5rem; }
.recall-workbench { min-width: 0; }
.recall-workbench .mud-input-control { margin-top: 0; }
.recall-workbench .review-schedule { font-size: 0.6875rem; color: var(--cp-text-soft); margin: 0.5rem 0 1rem; }
.recall-workbench .recall-question { color: var(--cp-text); font-size: 0.9375rem; font-weight: 600; }
.reveal-button { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; }
.recall-reference { padding: 1rem; background: var(--cp-bg-elevated); border: 1px solid var(--cp-border); border-radius: 10px; margin: 0.5rem 0 1rem; }
.recall-reference > strong { font-size: 0.75rem; }
.recall-reference p { font-size: 0.8125rem; margin-bottom: 0; overflow-wrap: anywhere; }
.recall-confidence { border: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; padding: 0; margin: 0.5rem 0 1.25rem; }
.recall-confidence legend { float: none; width: auto; font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.6rem; }
.recall-confidence button { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; text-align: start; padding: 0.75rem; border: 1px solid var(--cp-border); border-radius: 10px; background: var(--cp-bg-elevated); color: var(--cp-text); cursor: pointer; }
.recall-confidence button strong { display: block; font-size: 0.75rem; font-weight: 600; }
.recall-confidence button span { display: block; color: var(--cp-text-muted); font-size: 0.75rem; }
.recall-confidence button[aria-pressed="true"] { border-color: var(--cp-accent); background: var(--cp-accent-soft); box-shadow: inset 0 0 0 1px var(--cp-accent); }
.recall-confidence button:disabled { cursor: default; }
.recall-workbench .recall-saved { font-size: 0.8125rem; color: var(--cp-text); padding: 0.75rem 1rem; border-inline-start: 3px solid var(--cp-success); background: var(--cp-surface-soft); }
.studio-empty { text-align: center; padding: 1.5rem 0; color: var(--cp-text-muted); }
.studio-empty h4 { color: var(--cp-text); font-size: 1rem; margin: 1rem 0 0; }
.studio-empty > .mud-icon-root { color: var(--cp-accent); }
.plan-glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.plan-glance button { display: flex; flex-direction: column; align-items: flex-start; text-align: start; gap: 0.4rem; padding: 1.25rem 1.5rem; background: var(--cp-bg-elevated); color: var(--cp-text); border: 1px solid var(--cp-border); border-radius: 12px; cursor: pointer; }
.plan-glance button > span { font-size: 0.75rem; font-weight: 600; }
.plan-glance button > strong { font-size: 1.7rem; line-height: 1.3; font-weight: 650; font-variant-numeric: tabular-nums; }
.plan-glance button > small { color: var(--cp-text-muted); font-size: 0.6875rem; }
.plan-glance button:hover { border-color: var(--cp-accent); }

@media (max-width: 959.98px) {
    .studio-heading { align-items: start; }
    .studio-date { display: none; }
    .studio-grid { grid-template-columns: 1fr; }
    .studio-side { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
    .recall-practice { grid-template-columns: 1fr; gap: 1.5rem; }
    .recall-intro { max-width: 36rem; }
}

@media (max-width: 599.98px) {
    .portal-lock-bar { padding-inline: 1rem; }
    .studio-heading { margin-top: 0; margin-bottom: 1.25rem; }
    .studio-heading p { font-size: 0.8125rem; }
    .studio-grid, .studio-side { grid-template-columns: 1fr; gap: 1rem; }
    .studio-card { padding: 1.25rem; }
    .studio-heading h2 { max-width: 19rem; }
    .recall-practice { margin-top: 1rem; }
    .recall-confidence { grid-template-columns: 1fr; gap: 0.5rem; }
    .recall-confidence button { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; min-height: 48px; }
    .recall-confidence button span { margin-top: 0; }
    .studio-actions { align-items: stretch; flex-direction: column; }
    .studio-actions .studio-text-link { text-align: center; padding: 0.25rem; }
    .plan-glance { grid-template-columns: 1fr; gap: 0.5rem; }
    .plan-glance button { display: grid; grid-template-columns: 1fr auto; padding: 1rem 1.25rem; }
    .plan-glance button > strong { grid-row: 1 / span 2; grid-column: 2; }
    .plan-glance button > small { grid-row: 2; }
    .theme-toggle-text { display: none; }
    html[data-theme] .tracker-tabs .mud-tab { min-width: 96px; font-size: 0.8125rem; }
    .section-grid .mud-input-control { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}