/* Shared presentation layer: desktop workspace, accessible themes and accents. */
html:has(body.beta) {
 --ui-bg:#f3f5f8; --ui-surface:#fff; --ui-soft:#f2f4f8;
 --ui-text:#182033; --ui-muted:#626f85; --ui-border:#e3e7ef;
 --ui-accent:#2449df; --ui-accent-soft:#edf1ff; --ui-on-accent:#fff;
 --ui-success-bg:#e5f5ed; --ui-success:#246749;
 --ui-warning-bg:#fff3e1; --ui-warning:#82560e;
 --ui-danger-bg:#ffebef; --ui-danger:#a12e45;
 background:var(--ui-bg);
}
html[data-theme=dark]:has(body.beta) {
 --ui-bg:#101216; --ui-surface:#191c22; --ui-soft:#22262f;
 --ui-text:#eef0f6; --ui-muted:#a8b1c3; --ui-border:#323843;
 --ui-accent:#a8bbff; --ui-accent-soft:#293456; --ui-on-accent:#101b36;
 --ui-success-bg:#203d32; --ui-success:#9bdec0;
 --ui-warning-bg:#413621; --ui-warning:#f0cb86;
 --ui-danger-bg:#452832; --ui-danger:#ffb0c0;
}
html[data-accent=violet]:has(body.beta) { --ui-accent:#7142c7; --ui-accent-soft:#f2edfc; }
html[data-accent=emerald]:has(body.beta) { --ui-accent:#147451; --ui-accent-soft:#e5f4ed; }
html[data-accent=rose]:has(body.beta) { --ui-accent:#b33564; --ui-accent-soft:#fcecf2; }
html[data-accent=amber]:has(body.beta) { --ui-accent:#8e5f0a; --ui-accent-soft:#fff3db; }
html[data-theme=dark][data-accent=violet]:has(body.beta) { --ui-accent:#c5acff; --ui-accent-soft:#362a4d; --ui-on-accent:#291743; }
html[data-theme=dark][data-accent=emerald]:has(body.beta) { --ui-accent:#95ddba; --ui-accent-soft:#203d33; --ui-on-accent:#113326; }
html[data-theme=dark][data-accent=rose]:has(body.beta) { --ui-accent:#ffb0ce; --ui-accent-soft:#452b38; --ui-on-accent:#43172b; }
html[data-theme=dark][data-accent=amber]:has(body.beta) { --ui-accent:#edcc8d; --ui-accent-soft:#403622; --ui-on-accent:#3a2a0f; }
body.beta {
 --ink:var(--ui-text); --muted:var(--ui-muted); --blue:var(--ui-accent);
 --page:var(--ui-surface); --surface:var(--ui-soft); --line:var(--ui-border);
 color:var(--ui-text); background:var(--ui-bg); accent-color:var(--ui-accent);
}
.beta ::selection { color:var(--ui-text); background:var(--ui-accent-soft); }
.beta :is(button,a,input,select,textarea,summary):focus-visible { outline-color:var(--ui-accent); }
/* Search focus belongs to the complete field, including its leading icon. */
.beta :is(.grade-search,.campus-useful-search) {
 display:flex; align-items:center; gap:10px;
 min-height:48px; margin:0 0 14px; padding:0 14px;
 border:1px solid transparent; border-radius:14px;
 background:var(--ui-soft); color:var(--ui-muted);
}
.beta :is(.grade-search,.campus-useful-search) > svg { width:18px; height:18px; flex-shrink:0; color:var(--ui-muted); }
.beta :is(.grade-search,.campus-useful-search) input {
 width:100%; min-width:0; min-height:46px; margin:0; padding:10px 0;
 border:0; border-radius:0; background:transparent; color:var(--ui-text);
 font-size:16px; line-height:1.5;
}
.beta :is(.grade-search,.campus-useful-search) input::placeholder { color:var(--ui-muted); opacity:1; }
.beta :is(.grade-search,.campus-useful-search):focus-within {
 outline:2px solid var(--ui-accent); outline-offset:2px;
 outline-color:color-mix(in srgb,var(--ui-accent) 75%,var(--ui-surface));
}
.beta :is(.grade-search,.campus-useful-search) input:focus-visible { outline:none; box-shadow:none; }
@media(forced-colors:active) {
 .beta :is(.grade-search,.campus-useful-search):focus-within { outline-color:Highlight; }
}
.beta .study-nav { background:var(--ui-surface); }
.beta :is(.campus-card,.campus-post,.course-detail,.profile-sheet,.beta-card,.campus-feed-options > div,.campus-poll-option,.campus-filters select,.campus-form input,.campus-form textarea,.campus-form select,.beta-entry input:not([type=checkbox])) { background:var(--ui-surface); border-color:var(--ui-border); color:var(--ui-text); }
.beta :is(.campus-shortcuts > .campus-button,.campus-article-list .campus-button,.campus-profile-actions > .campus-button) { background:var(--ui-surface); color:var(--ui-text); }
.beta :is(.campus-avatar-edit,.campus-club-segments .campus-chip[aria-pressed=true]) { background:var(--ui-surface); }
.beta :is(.campus-profile-photo .campus-avatar,.campus-author-photo > .campus-avatar,.campus-profile-actions .campus-avatar) { border-color:var(--ui-surface); }
.beta .campus-button,.beta .study-button,.beta .beta-card button,.beta .day-strip button[aria-pressed=true],.beta .campus-hero-link { color:var(--ui-on-accent); }
.beta .day-strip button[aria-pressed=true] > strong { color:var(--ui-on-accent); }
.beta :is(.campus-secondary,.study-button.secondary,.beta-card .beta-secondary) { background:var(--ui-soft); color:var(--ui-text); }
.beta .campus-chip[aria-pressed=true],
.beta .campus-poll-option.is-selected,
.beta .campus-cover-choice[aria-pressed=true],
.beta .campus-institute-tag,
.beta .study-group-tag,
.beta .person-avatar,
.beta .campus-community-mark,
.beta .study-connection,
.beta .beta-next-class,
.beta .lesson-location { background:var(--ui-accent-soft); color:var(--ui-accent); }
.beta #study-avatar { background:var(--ui-accent-soft); color:var(--ui-accent); }
.beta .campus-feed-bar > .campus-chip-strip > .campus-chip { background:transparent; }
.beta .quiet-pill,
.beta .study-institution,
.beta .icon-button,
.beta .campus-chip,
.beta .study-nav button:not(.active),
.beta .campus-compose-trigger > span:nth-child(2),
.beta .campus-compose-icons,
.beta .campus-category,
.beta .campus-action:not(.is-active),
.beta .campus-poll-meta,
.beta .campus-poll-option strong,
.beta .campus-article-list .campus-button > .campus-icon:last-child,
.beta .campus-cover-choice > span,
.beta .campus-profile-counter,
.beta .campus-profile-identity > p,
.beta .campus-profile-card .text-button,
.beta .campus-home-heading p,
.beta .campus-study-summary small,
.beta .week-control button,
.beta .day-strip button:not([aria-pressed=true]),
.beta .lesson-teacher,
.beta .lesson-body > small,
.beta .lesson-body > .ui-icon,
.beta .grade-summary strong,
.beta .course-totals > span,
.beta .course-totals strong,
.beta .person-fields dd,
.beta .detail-fields dd,
.beta .lesson-extra > p,
.beta .grade-search { color:var(--ui-muted); }
.beta :is(.campus-post-text,.campus-social-identity > p:not(.campus-profile-counter),.campus-article .campus-article-lead) { color:var(--ui-text); }
.beta .campus-identity-tags > span { color:var(--ui-muted); background:var(--ui-soft); }
.beta .campus-identity-tags .campus-institute-tag { color:var(--ui-accent); background:var(--ui-accent-soft); }
.beta :is(.campus-activity-summary strong,.lesson-place) { color:var(--ui-accent); }
.beta .campus-activity-day { background:var(--ui-soft); }
.beta .campus-activity-day[data-level="1"] { background:color-mix(in srgb,var(--ui-accent) 20%,var(--ui-surface)); }
.beta .campus-activity-day[data-level="2"] { background:color-mix(in srgb,var(--ui-accent) 40%,var(--ui-surface)); }
.beta .campus-activity-day[data-level="3"] { background:color-mix(in srgb,var(--ui-accent) 65%,var(--ui-surface)); }
.beta .campus-activity-day[data-level="4"] { background:var(--ui-accent); }
.beta .campus-poll-option progress { background:var(--ui-border); }
.beta .campus-poll-option progress::-webkit-progress-bar { background:var(--ui-border); }
.beta :is(.lesson-body,.campus-message,.beta-message,.study-notice) { background:var(--ui-accent-soft); color:var(--ui-text); border-color:var(--ui-border); }
.beta .lesson-kind { color:var(--ui-accent); }
.beta .lesson-body.amber { background:var(--ui-warning-bg); }
.beta .lesson-body.amber .lesson-kind { color:var(--ui-warning); }
.beta .lesson-body.mint { background:var(--ui-success-bg); }
.beta .lesson-body.mint .lesson-kind { color:var(--ui-success); }
.beta :is(.results-card,.resource-error,.campus-error,.beta-message[data-tone=error],.study-notice.error) { background:var(--ui-warning-bg); color:var(--ui-warning); border-color:color-mix(in srgb,var(--ui-warning) 25%,var(--ui-surface)); }
.beta .results-card > span:first-child { color:var(--ui-warning); }
.beta :is(.mark-excellent,.study-notice.success) { color:var(--ui-success); background:var(--ui-success-bg); }
.beta .mark-good { color:var(--ui-accent); background:var(--ui-accent-soft); }
.beta .mark-pass { color:var(--ui-warning); background:var(--ui-warning-bg); }
.beta :is(.mark-fail,.beta-card .beta-danger) { color:var(--ui-danger); background:var(--ui-danger-bg); }
.beta .mark-neutral { color:var(--ui-muted); background:var(--ui-soft); }
.beta :is(.campus-danger,.beta-card .text-button.beta-danger) { color:var(--ui-danger); }
.beta .campus-destructive { background:var(--ui-danger); color:var(--ui-surface); }
.beta .campus-form label { color:var(--ui-muted); }
.beta .campus-form input:not([type=file]),.beta .campus-form textarea,.beta .campus-form select { background:var(--ui-surface); border-color:var(--ui-border); color:var(--ui-text); }
.beta :is(.campus-club-card,.campus-poll-option) { background:var(--ui-surface); border-color:var(--ui-border); }
.beta .campus-file-label { color:var(--ui-accent); background:var(--ui-accent-soft); }
.beta .campus-form .campus-file-label { color:var(--ui-accent); }
.beta .campus-chip[aria-pressed=true],.beta .campus-settings-tabs .campus-chip[aria-current=page] { color:var(--ui-accent); }
.beta .lesson-meta :is(.lesson-place,.lesson-teacher) { color:var(--ui-muted); }
.beta .campus-confirm > p { color:var(--ui-muted); }
.beta .study-nav .active[data-tab=schedule] > svg { stroke:var(--ui-on-accent); }
.beta .beta-entry { background:var(--ui-surface); }
.beta > .beta-message[role=note]:not([data-local-note]) { color:var(--ui-muted); background:var(--ui-bg); }
.beta-bars-panel { color:var(--ui-text); }

/* Native buttons retain keyboard focus when a selection changes. */
.beta .appearance-controls { display:grid; gap:28px; margin:4px 0 28px; }
.beta .appearance-group { min-width:0; border:0; padding:0; margin:0; }
.beta .appearance-group legend { font-size:16px; font-weight:750; padding:0; margin:0 0 6px; }
.beta .appearance-group > p { color:var(--ui-muted); font-size:12px; line-height:1.65; margin:0 0 14px; }
.beta :is(.appearance-modes,.appearance-accents) { display:flex; flex-wrap:wrap; gap:8px; }
.beta .appearance-choice { display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--ui-border); border-radius:12px; min-height:48px; padding:10px 13px; color:var(--ui-text); background:var(--ui-surface); font-size:12px; font-weight:600; }
.beta .appearance-modes .appearance-choice { flex:1 1 105px; }
.beta .appearance-choice[aria-pressed=true] { border-color:var(--ui-accent); box-shadow:inset 0 0 0 1px var(--ui-accent); background:var(--ui-accent-soft); color:var(--ui-accent); }
.beta .appearance-swatch { width:18px; height:18px; border-radius:50%; flex-shrink:0; background:#2449df; box-shadow:inset 0 0 0 1px #0002; }
.beta .swatch-violet { background:#7142c7; }
.beta .swatch-emerald { background:#147451; }
.beta .swatch-rose { background:#b33564; }
.beta .swatch-amber { background:#a87319; }

@media(min-width:700px) and (max-width:999px) {
 .beta #beta-app { max-width:760px; padding-inline:32px; }
 .beta .study-nav { width:min(100%,760px); }
 .beta .study-nav button { font-size:12px; }
 .beta-bars-panel,.beta > .beta-message[role=note]:not([data-local-note]) { max-width:760px; }
}
@media(min-width:1000px) {
 html:has(body.beta) { scroll-padding-block:32px; }
 .beta #beta-app { display:block; width:100%; max-width:1260px; padding:36px 32px 56px; min-height:100dvh; background:transparent; }
 .beta #beta-dashboard { display:grid; grid-template-columns:190px minmax(0,950px); align-items:start; gap:48px; width:100%; min-width:0; }
 .beta .study-layout { grid-column:2; grid-row:1; width:100%; min-width:0; padding:26px 34px 30px; border:1px solid var(--ui-border); border-radius:22px; background:var(--ui-surface); }
 .beta .study-top { position:fixed; top:36px; left:max(32px,calc((100vw - 1260px)/2 + 32px)); width:190px; z-index:21; flex-wrap:wrap; justify-content:flex-start; gap:24px; margin:0; }
 .beta .study-brand { width:100%; gap:10px; }
 .beta .study-wordmark { font-size:26px; }
 .beta .study-institution { padding-left:10px; color:var(--ui-muted); }
 .beta .study-top-actions { gap:12px; }
 .beta .shell-search { border-radius:12px; background:var(--ui-surface); border:1px solid var(--ui-border); }
 .beta #study-avatar { width:40px; min-height:40px; }
 .beta .study-nav { position:sticky; grid-column:1; grid-row:1; top:176px; left:auto; bottom:auto; transform:none; width:100%; display:flex; flex-direction:column; gap:7px; padding:0; margin-top:140px; border:0; box-shadow:none; background:transparent; }
 .beta .study-nav button { flex-direction:row; justify-content:flex-start; gap:14px; padding:12px 14px; min-height:51px; border-radius:13px; font-size:14px; font-weight:600; }
 .beta .study-nav button.active { background:var(--ui-accent-soft); }
 .beta .study-nav button.active::before { display:none; }
 .beta .study-nav button > svg { width:23px; height:23px; }
 .beta .study-heading { margin:0 0 26px; }
 .beta .study-heading h1,.beta .campus-home-heading h1 { font-size:32px; }
 .beta .campus-home-heading { margin:0 0 24px; }
 .beta .campus-study-summary { gap:12px; margin-bottom:20px; }
 .beta .campus-study-summary button { min-height:86px; padding:16px; }
 .beta .campus-study-summary strong { font-size:15px; }
 .beta :is(.campus-study-summary small,.campus-study-summary button > span > span) { font-size:12px; }
 .beta :is(.campus-discover,.mpei-home-art > img) { max-height:420px; }
 .beta .campus-hero-content { padding:30px; }
 .beta .campus-hero-content > strong { font-size:48px; }
 .beta .campus-post { padding:22px; margin-bottom:18px; }
 .beta .campus-author strong { font-size:14px; }
 .beta .campus-post :is(h2,h3) { font-size:19px; margin-top:18px; }
 .beta .campus-post-text { font-size:15px; line-height:1.75; }
 .beta .campus-avatar { width:40px; height:40px; }
 .beta .campus-post-photo { max-height:600px; }
 .beta .lesson-row { grid-template-columns:65px minmax(0,1fr); gap:24px; }
 .beta .lesson-time::after { right:-15px; }
 .beta .lesson-body { padding:21px 24px; }
 .beta .lesson-title { font-size:18px; }
 .beta .lesson-meta { gap:8px 24px; }
 .beta .lesson-meta .lesson-teacher { flex:0 1 auto; }
 .beta .day-strip { gap:10px; margin-bottom:24px; }
 .beta .day-strip button { flex-basis:calc((100% - 60px)/7); min-height:84px; }
 .beta .day-strip button > strong { font-size:23px; }
 .beta .day-strip button > span { font-size:12px; }
 .beta .grade-controls { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; }
 .beta .semester-control { flex:1; max-width:370px; }
 .beta .grade-summary { justify-content:flex-end; gap:12px; padding-bottom:12px; }
 .beta .course-item > summary { padding:20px; }
 .beta .course-label strong { font-size:17px; }
 .beta .course-detail { padding-inline:20px; }
 .beta .task-row { grid-template-columns:minmax(0,1fr) 90px; padding-block:16px; }
 .beta .task-work strong { font-size:14px; }
 .beta .campus-settings-tabs { gap:12px; margin-bottom:28px; }
 .beta .campus-settings-tabs .campus-chip { font-size:13px; padding-inline:14px; }
 .beta .campus-settings-content { max-width:740px; }
 .beta .campus-form-grid { gap:20px; }
 .beta .campus-cover-gallery { gap:16px; }
 .beta .campus-social-identity h1 { font-size:30px; }
 .beta .campus-social-identity > p:not(.campus-profile-counter) { font-size:15px; }
 .beta .campus-activity-chart { max-width:580px; }
 .beta .beta-entry { max-width:520px; margin:8vh auto; }
 .beta .beta-entry:only-child { width:100%; }
 .beta .beta-bars-panel { width:calc(100% - 238px); max-width:950px; margin:16px 0 16px 238px; padding:0; }
 .beta > .beta-message[role=note]:not([data-local-note]) { max-width:1260px; padding-left:270px; padding-top:12px; }
}

@keyframes appearance-enter { from { opacity:.6; transform:translateY(5px); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:no-preference) {
 .beta .study-main { animation:appearance-enter .22s ease-out; }
 .beta :is(.campus-card,.campus-post,.lesson-body,.course-item,.study-empty) { animation:appearance-enter .24s ease-out; }
 .beta :is(button,a,summary) { transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease; }
 .beta .course-item > summary > svg { transition:transform .18s ease; }
}
@media(hover:hover) {
 .beta button:hover:not(:disabled) { filter:none; }
 .beta :is(.study-nav button:not(.active),.campus-chip:not([aria-pressed=true]),.campus-icon-button,.icon-button,.shell-search):hover:not(:disabled) { background:var(--ui-soft); }
 .beta :is(.appearance-choice,.campus-poll-option,.campus-cover-choice):hover:not(:disabled) { border-color:var(--ui-accent); }
 .beta :is(.campus-post,.campus-card):hover { border-color:color-mix(in srgb,var(--ui-accent) 22%,var(--ui-border)); }
 .beta :is(.campus-button,.study-button):hover:not(:disabled) { box-shadow:inset 0 0 0 100px #0000000a; }
}
@media(prefers-reduced-motion:reduce) {
 .beta *,.beta *::before,.beta *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
/* Secondary actions remain legible beside primary actions in both themes. */
.beta button.campus-button.campus-secondary { background:var(--ui-soft); color:var(--ui-text); }
@media(min-width:1000px) { .beta .appearance-choice,.beta .appearance-group > p { font-size:14px; } }