/* Approved graphite concept. Presentation only; existing layouts and actions remain. */
:root,:root[data-theme=light]{--bg:#f5f5f3;--card:#ffffff;--ink:#191919;--muted:#666666;--line:#dddddd;--soft:#eaeaea;--blue:#363636;--green:#286642;--orange:#855617;--action:#191919;--on-action:#ffffff;--focus:#777777;--raised:#ededeb;color:var(--ink);background:var(--bg)}
:root[data-theme=dark]{--bg:#101010;--card:#191919;--ink:#f3f3f1;--muted:#adadad;--line:#383838;--soft:#2b2b2b;--blue:#d9d9d9;--green:#a5d1b1;--orange:#e8c38f;--action:#f0f0ee;--on-action:#181818;--focus:#bdbdbd;--raised:#232323;color:var(--ink);background:var(--bg)}
html{background:var(--bg)}body{background:var(--bg);color:var(--ink);font-family:'Golos Text',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1{font-weight:550;letter-spacing:-1.1px}h2{font-weight:550;letter-spacing:-.45px}h3{font-weight:550}.eyebrow,.nav-label{letter-spacing:1.6px;font-size:11px}.subline{line-height:1.65}
:root :is(.topbar,.sidebar,.bottom-nav){background:var(--bg);border-color:var(--line)}
:root :is(.panel,.course-card,.course-profile,.form-section,.editor-panel,.course-tree,.hw-panel,.hw-sidebar,.login-card,dialog,.admin-content){border-color:var(--line);box-shadow:none;border-radius:12px}
:root .btn{border-radius:8px;box-shadow:none;min-height:44px;transition:background-color .15s,border-color .15s}
:root .btn.primary,:root .login-primary{background:var(--action);border-color:var(--action);color:var(--on-action);box-shadow:none}
:root .btn.primary:hover,:root .login-primary:hover{background:var(--ink);border-color:var(--ink);color:var(--on-action);filter:none}
:root .btn:not(.primary):not(.ghost):hover{background:var(--soft)}
:root :is(button,a,input,select,textarea):focus-visible{outline:2px solid var(--focus);outline-offset:3px}
:root :is(input,textarea,select){background:var(--card);color:var(--ink);border-color:var(--line);border-radius:8px;accent-color:var(--action)}
:root input::placeholder,:root textarea::placeholder{color:var(--muted);opacity:1}
:root :is(.nav button.active,.nav button:hover,.bottom-nav button.active,.role-switch button.active,.chip.active,.filter.active){background:var(--soft);color:var(--ink);box-shadow:none}
:root .nav button{border-radius:7px;font-weight:450}.nav button.active{font-weight:550}
:root :is(.nav-count,.avatar,.subject-icon,.course-list-image,.account-avatar-placeholder){background:var(--soft);color:var(--ink)}
:root .avatar-fallback,:root .course-list-image .avatar-fallback{background:var(--soft);color:var(--ink)}
:root :is(.role-switch,.course-tags span,.course-facts>div,.course-list-facts>div){background:var(--raised);color:var(--ink)}
:root .theme-toggle{background:var(--bg);border-color:var(--line)}
:root .theme-toggle .theme-toggle-knob{background:var(--action);box-shadow:none}
:root .theme-toggle[aria-checked=true] .theme-toggle-knob{background:var(--action)}
:root .theme-toggle[aria-checked=false] .theme-sun,:root .theme-toggle[aria-checked=true] .theme-moon{color:var(--on-action)}
:root .theme-toggle:focus-visible{outline-color:var(--focus)}
:root .programme-kinds button[aria-pressed=true]{color:var(--ink);border-color:var(--focus);background:var(--soft)}
:root .progress-ring{background:conic-gradient(var(--ink) var(--progress),var(--line) 0)}
:root :is(.programme-progress progress,.course-section progress){accent-color:var(--ink)}
:root .programme-progress progress::-webkit-progress-bar,:root .course-section progress::-webkit-progress-bar{background:var(--soft)}
:root .programme-progress progress::-webkit-progress-value,:root .course-section progress::-webkit-progress-value{background:var(--ink)}
:root :is(.account-telegram,.hw-drop-hint,.section-import-drop,.assignment-context){background:var(--soft);border-color:var(--line);color:var(--ink)}
:root :is(.section-import-drop.dragging,.account-avatar-drop.dragover,.hw-dragging .hw-drop-hint){background:var(--raised);border-color:var(--focus);color:var(--ink)}
:root :is(.account-link,.account-avatar-placeholder){color:var(--ink)}
:root :is(.login-page,.account-page){background:var(--bg);color:var(--ink)}
:root .login-card{box-shadow:none}.login-primary{font-weight:550}.login-subtitle{line-height:1.6}
:root dialog::backdrop{background:rgba(0,0,0,.62);backdrop-filter:blur(5px)}
:root dialog{background:var(--card);color:var(--ink)}
:root .course-card.course-list-card:hover{box-shadow:none;border-color:var(--focus)}
:root .brand-logo,:root .header-logo,:root .login-brand{object-fit:contain;height:auto}
:root .brand-logo{width:190px;max-width:100%}:root .header-logo{width:180px}
:root .login-brand{width:260px;max-width:75vw}.app-loading img{width:240px}
:root .brand>small{font-size:10px;letter-spacing:1.8px;margin-top:12px}
:root .side-note{background:transparent;border-color:var(--line)}
:root #toast{background:var(--ink);color:var(--bg);border:1px solid var(--line);box-shadow:0 8px 30px #0002}
:root .cal-day.today>header strong{background:transparent;color:var(--ink);padding:0;border-radius:0}
@media(min-width:1100px){h1{font-size:34px}.content{padding-top:40px}.heading{margin-bottom:32px}.topbar{height:84px}.nav-label{margin-top:35px}}
@media(max-width:760px){
 :root .topbar{padding-top:max(12px,env(safe-area-inset-top));padding-bottom:12px;min-height:72px;height:auto;gap:10px}
 :root .topbar .header-logo{width:148px;max-width:148px}.topright{gap:8px}
 :root .content{padding-top:24px}.heading{gap:16px}h1{font-size:27px;line-height:1.25;letter-spacing:-.7px}h2{line-height:1.4}
 :root :is(input,select,textarea){font-size:16px;min-height:44px}
 :root .bottom-nav{background:var(--bg);padding-bottom:max(10px,env(safe-area-inset-bottom));box-shadow:none}
 :root .bottom-nav button{border-radius:8px;min-height:48px}
 :root dialog{border-radius:14px;padding:22px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);overflow-y:auto}
 :root .account-page .login-card,:root .login-page .login-card{background:transparent;box-shadow:none}
 :root .course-card.course-list-card{border-radius:12px}
 :root :is(.btn,.chip){min-height:44px}
}
@media(max-width:360px){:root .topbar .header-logo{width:128px;max-width:128px}.theme-toggle{width:84px}.content{padding-left:14px;padding-right:14px}:root dialog{padding:18px}}
/* Tagline remains real text so it stays crisp at small sizes. */
:root .brand>small{font-size:10px;font-weight:450;letter-spacing:0;text-transform:none;margin-top:8px;color:var(--muted)}
:root .breadcrumb{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
:root .breadcrumb:has(.header-logo)::after{content:'Больше чем онлайн-школа';font-size:10px;line-height:1.3;color:var(--muted);padding-left:35px}
:root .account-brand{display:flex;flex-direction:column;align-items:center;gap:4px}
:root .account-brand::after{content:'Больше чем онлайн-школа';font-size:12px;font-weight:450;color:var(--muted);margin-bottom:16px}
@media(max-width:760px){:root .breadcrumb:has(.header-logo)::after{font-size:9px;padding-left:0;letter-spacing:-.1px}}
:root{--primary:var(--blue)}
:root :is(.badge,.badge.blue){background:var(--soft);color:var(--ink)}
:root :is(.course-card,.programme-progress,.editor-head){background:var(--card);border-color:var(--line)}
:root :is(.tree-item.active,.tree-course.active,.tree-section-title.active,.course-cover){background:var(--soft);color:var(--ink)}
:root .dash-focus{border-left-color:var(--focus)}
:root :is(.dropzone,.work-row:hover){background:var(--raised);border-color:var(--line)}
:root .hero,:root .welcome{background:var(--soft);color:var(--ink)}
:root :is(.gm-level,.gm-badge.earned,.gm-badge.earned .gm-badge-icon,.gm-badge-icon,.gm-event-icon){background:var(--soft);border-color:var(--line);color:var(--ink)}
:root .hw-dragging{outline-color:var(--focus)}
:root input[type=checkbox],:root input[type=radio]{min-height:0;accent-color:var(--action)}
:root .brand{gap:0}:root .brand>small{margin-top:0;align-self:center}
:root .badge.amber{background:#f5ebd7;color:#79501b}:root .badge.green{background:#e3efe5;color:#286642}
:root[data-theme=dark] .badge.amber{background:#342e22;color:#e8c38f}:root[data-theme=dark] .badge.green{background:#23362a;color:#a5d1b1}
:root .bottom-nav button{color:var(--muted)}:root .bottom-nav button.active{color:var(--ink)}
@media(min-width:761px){:root .breadcrumb:has(.header-logo){visibility:hidden}}
@media(max-width:760px){:root .role-switch{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}:root .role-switch button{padding:7px 3px;font-size:10px;min-width:0}}
.loading-brand{display:flex;flex-direction:column;align-items:center;gap:2px;max-width:100%}
:root .loading-brand img{width:240px;max-width:75vw;height:auto}
.loading-brand span{font-size:11px;line-height:1.5;color:var(--muted);padding-left:42px}
/* One lockup preserves the reference proportions at every placement. */
:root .brand>small,:root .loading-brand span{display:none}
:root .breadcrumb:has(.header-logo)::after,:root .account-brand::after{content:none}
:root .brand-logo{width:190px}:root .login-brand{width:280px;max-width:85vw}
:root .loading-brand img{width:280px;max-width:85vw}
@media(max-width:760px){:root .topbar .header-logo{width:170px;max-width:170px}}
@media(max-width:360px){:root .topbar .header-logo{width:148px;max-width:148px}}

/* Flowing ribbons are isolated background images; they never delay app readiness. */
:root{--brand-ribbon-static:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%201200%22%20preserveAspectRatio%3D%22none%22%20fill%3D%22none%22%3E%3Cg%20stroke%3D%22%23111%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M%20-350%201500%20C%20-500%201200%20300%201100%20250%20950%20C%20200%20800%20630%20800%20670%20650%20C%20710%20500%20400%20300%20690%20150%20C%20980%20-100%20850%20-250%201050%20-400%22%20stroke-width%3D%2212%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M%20-312%201500%20C%20-462%201200%20338%201100%20288%20950%20C%20238%20800%20668%20800%20708%20650%20C%20748%20500%20438%20300%20728%20150%20C%201018%20-100%20888%20-250%201088%20-400%22%20stroke-width%3D%223%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M%20-274%201500%20C%20-424%201200%20376%201100%20326%20950%20C%20276%20800%20706%20800%20746%20650%20C%20786%20500%20476%20300%20766%20150%20C%201056%20-100%20926%20-250%201126%20-400%22%20stroke-width%3D%229%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M%20-236%201500%20C%20-386%201200%20414%201100%20364%20950%20C%20314%20800%20744%20800%20784%20650%20C%20824%20500%20514%20300%20804%20150%20C%201094%20-100%20964%20-250%201164%20-400%22%20stroke-width%3D%223%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M%20-198%201500%20C%20-348%201200%20452%201100%20402%20950%20C%20352%20800%20782%20800%20822%20650%20C%20862%20500%20552%20300%20842%20150%20C%201132%20-100%201002%20-250%201202%20-400%22%20stroke-width%3D%2213%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M%20-160%201500%20C%20-310%201200%20490%201100%20440%20950%20C%20390%20800%20820%20800%20860%20650%20C%20900%20500%20590%20300%20880%20150%20C%201170%20-100%201040%20-250%201240%20-400%22%20stroke-width%3D%223%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M%20-122%201500%20C%20-272%201200%20528%201100%20478%20950%20C%20428%20800%20858%20800%20898%20650%20C%20938%20500%20628%20300%20918%20150%20C%201208%20-100%201078%20-250%201278%20-400%22%20stroke-width%3D%228%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');--brand-ribbon-motion:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%201200%22%20preserveAspectRatio%3D%22none%22%20fill%3D%22none%22%3E%3Cg%20stroke%3D%22%23111%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M%20-350%201500%20C%20-500%201200%20300%201100%20250%20950%20C%20200%20800%20630%20800%20670%20650%20C%20710%20500%20400%20300%20690%20150%20C%20980%20-100%20850%20-250%201050%20-400%22%20stroke-width%3D%2212%22%3E%3Canimate%20attributeName%3D%22d%22%20values%3D%22M%20-350%201500%20C%20-500%201200%20300%201100%20250%20950%20C%20200%20800%20630%20800%20670%20650%20C%20710%20500%20400%20300%20690%20150%20C%20980%20-100%20850%20-250%201050%20-400%3BM%20-350%201500%20C%20-500%201200%20220%201100%20170%20950%20C%20120%20800%20700%20800%20740%20650%20C%20780%20500%20480%20300%20770%20150%20C%201060%20-100%20850%20-250%201050%20-400%3BM%20-350%201500%20C%20-500%201200%20360%201100%20310%20950%20C%20260%20800%20570%20800%20610%20650%20C%20650%20500%20360%20300%20650%20150%20C%20940%20-100%20850%20-250%201050%20-400%3BM%20-350%201500%20C%20-500%201200%20300%201100%20250%20950%20C%20200%20800%20630%20800%20670%20650%20C%20710%20500%20400%20300%20690%20150%20C%20980%20-100%20850%20-250%201050%20-400%22%20dur%3D%228s%22%20begin%3D%22-2s%22%20repeatCount%3D%22indefinite%22%20calcMode%3D%22spline%22%20keyTimes%3D%220%3B0.333%3B0.667%3B1%22%20keySplines%3D%22.42%200%20.58%201%3B.42%200%20.58%201%3B.42%200%20.58%201%22%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M%20-312%201500%20C%20-462%201200%20338%201100%20288%20950%20C%20238%20800%20668%20800%20708%20650%20C%20748%20500%20438%20300%20728%20150%20C%201018%20-100%20888%20-250%201088%20-400%22%20stroke-width%3D%223%22%3E%3Canimate%20attributeName%3D%22d%22%20values%3D%22M%20-312%201500%20C%20-462%201200%20338%201100%20288%20950%20C%20238%20800%20668%20800%20708%20650%20C%20748%20500%20438%20300%20728%20150%20C%201018%20-100%20888%20-250%201088%20-400%3BM%20-312%201500%20C%20-462%201200%20258%201100%20208%20950%20C%20158%20800%20738%20800%20778%20650%20C%20818%20500%20518%20300%20808%20150%20C%201098%20-100%20888%20-250%201088%20-400%3BM%20-312%201500%20C%20-462%201200%20398%201100%20348%20950%20C%20298%20800%20608%20800%20648%20650%20C%20688%20500%20398%20300%20688%20150%20C%20978%20-100%20888%20-250%201088%20-400%3BM%20-312%201500%20C%20-462%201200%20338%201100%20288%20950%20C%20238%20800%20668%20800%20708%20650%20C%20748%20500%20438%20300%20728%20150%20C%201018%20-100%20888%20-250%201088%20-400%22%20dur%3D%228s%22%20begin%3D%22-2s%22%20repeatCount%3D%22indefinite%22%20calcMode%3D%22spline%22%20keyTimes%3D%220%3B0.333%3B0.667%3B1%22%20keySplines%3D%22.42%200%20.58%201%3B.42%200%20.58%201%3B.42%200%20.58%201%22%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M%20-274%201500%20C%20-424%201200%20376%201100%20326%20950%20C%20276%20800%20706%20800%20746%20650%20C%20786%20500%20476%20300%20766%20150%20C%201056%20-100%20926%20-250%201126%20-400%22%20stroke-width%3D%229%22%3E%3Canimate%20attributeName%3D%22d%22%20values%3D%22M%20-274%201500%20C%20-424%201200%20376%201100%20326%20950%20C%20276%20800%20706%20800%20746%20650%20C%20786%20500%20476%20300%20766%20150%20C%201056%20-100%20926%20-250%201126%20-400%3BM%20-274%201500%20C%20-424%201200%20296%201100%20246%20950%20C%20196%20800%20776%20800%20816%20650%20C%20856%20500%20556%20300%20846%20150%20C%201136%20-100%20926%20-250%201126%20-400%3BM%20-274%201500%20C%20-424%201200%20436%201100%20386%20950%20C%20336%20800%20646%20800%20686%20650%20C%20726%20500%20436%20300%20726%20150%20C%201016%20-100%20926%20-250%201126%20-400%3BM%20-274%201500%20C%20-424%201200%20376%201100%20326%20950%20C%20276%20800%20706%20800%20746%20650%20C%20786%20500%20476%20300%20766%20150%20C%201056%20-100%20926%20-250%201126%20-400%22%20dur%3D%228s%22%20begin%3D%22-2s%22%20repeatCount%3D%22indefinite%22%20calcMode%3D%22spline%22%20keyTimes%3D%220%3B0.333%3B0.667%3B1%22%20keySplines%3D%22.42%200%20.58%201%3B.42%200%20.58%201%3B.42%200%20.58%201%22%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M%20-236%201500%20C%20-386%201200%20414%201100%20364%20950%20C%20314%20800%20744%20800%20784%20650%20C%20824%20500%20514%20300%20804%20150%20C%201094%20-100%20964%20-250%201164%20-400%22%20stroke-width%3D%223%22%3E%3Canimate%20attributeName%3D%22d%22%20values%3D%22M%20-236%201500%20C%20-386%201200%20414%201100%20364%20950%20C%20314%20800%20744%20800%20784%20650%20C%20824%20500%20514%20300%20804%20150%20C%201094%20-100%20964%20-250%201164%20-400%3BM%20-236%201500%20C%20-386%201200%20334%201100%20284%20950%20C%20234%20800%20814%20800%20854%20650%20C%20894%20500%20594%20300%20884%20150%20C%201174%20-100%20964%20-250%201164%20-400%3BM%20-236%201500%20C%20-386%201200%20474%201100%20424%20950%20C%20374%20800%20684%20800%20724%20650%20C%20764%20500%20474%20300%20764%20150%20C%201054%20-100%20964%20-250%201164%20-400%3BM%20-236%201500%20C%20-386%201200%20414%201100%20364%20950%20C%20314%20800%20744%20800%20784%20650%20C%20824%20500%20514%20300%20804%20150%20C%201094%20-100%20964%20-250%201164%20-400%22%20dur%3D%228s%22%20begin%3D%22-2s%22%20repeatCount%3D%22indefinite%22%20calcMode%3D%22spline%22%20keyTimes%3D%220%3B0.333%3B0.667%3B1%22%20keySplines%3D%22.42%200%20.58%201%3B.42%200%20.58%201%3B.42%200%20.58%201%22%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M%20-198%201500%20C%20-348%201200%20452%201100%20402%20950%20C%20352%20800%20782%20800%20822%20650%20C%20862%20500%20552%20300%20842%20150%20C%201132%20-100%201002%20-250%201202%20-400%22%20stroke-width%3D%2213%22%3E%3Canimate%20attributeName%3D%22d%22%20values%3D%22M%20-198%201500%20C%20-348%201200%20452%201100%20402%20950%20C%20352%20800%20782%20800%20822%20650%20C%20862%20500%20552%20300%20842%20150%20C%201132%20-100%201002%20-250%201202%20-400%3BM%20-198%201500%20C%20-348%201200%20372%201100%20322%20950%20C%20272%20800%20852%20800%20892%20650%20C%20932%20500%20632%20300%20922%20150%20C%201212%20-100%201002%20-250%201202%20-400%3BM%20-198%201500%20C%20-348%201200%20512%201100%20462%20950%20C%20412%20800%20722%20800%20762%20650%20C%20802%20500%20512%20300%20802%20150%20C%201092%20-100%201002%20-250%201202%20-400%3BM%20-198%201500%20C%20-348%201200%20452%201100%20402%20950%20C%20352%20800%20782%20800%20822%20650%20C%20862%20500%20552%20300%20842%20150%20C%201132%20-100%201002%20-250%201202%20-400%22%20dur%3D%228s%22%20begin%3D%22-2s%22%20repeatCount%3D%22indefinite%22%20calcMode%3D%22spline%22%20keyTimes%3D%220%3B0.333%3B0.667%3B1%22%20keySplines%3D%22.42%200%20.58%201%3B.42%200%20.58%201%3B.42%200%20.58%201%22%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M%20-160%201500%20C%20-310%201200%20490%201100%20440%20950%20C%20390%20800%20820%20800%20860%20650%20C%20900%20500%20590%20300%20880%20150%20C%201170%20-100%201040%20-250%201240%20-400%22%20stroke-width%3D%223%22%3E%3Canimate%20attributeName%3D%22d%22%20values%3D%22M%20-160%201500%20C%20-310%201200%20490%201100%20440%20950%20C%20390%20800%20820%20800%20860%20650%20C%20900%20500%20590%20300%20880%20150%20C%201170%20-100%201040%20-250%201240%20-400%3BM%20-160%201500%20C%20-310%201200%20410%201100%20360%20950%20C%20310%20800%20890%20800%20930%20650%20C%20970%20500%20670%20300%20960%20150%20C%201250%20-100%201040%20-250%201240%20-400%3BM%20-160%201500%20C%20-310%201200%20550%201100%20500%20950%20C%20450%20800%20760%20800%20800%20650%20C%20840%20500%20550%20300%20840%20150%20C%201130%20-100%201040%20-250%201240%20-400%3BM%20-160%201500%20C%20-310%201200%20490%201100%20440%20950%20C%20390%20800%20820%20800%20860%20650%20C%20900%20500%20590%20300%20880%20150%20C%201170%20-100%201040%20-250%201240%20-400%22%20dur%3D%228s%22%20begin%3D%22-2s%22%20repeatCount%3D%22indefinite%22%20calcMode%3D%22spline%22%20keyTimes%3D%220%3B0.333%3B0.667%3B1%22%20keySplines%3D%22.42%200%20.58%201%3B.42%200%20.58%201%3B.42%200%20.58%201%22%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M%20-122%201500%20C%20-272%201200%20528%201100%20478%20950%20C%20428%20800%20858%20800%20898%20650%20C%20938%20500%20628%20300%20918%20150%20C%201208%20-100%201078%20-250%201278%20-400%22%20stroke-width%3D%228%22%3E%3Canimate%20attributeName%3D%22d%22%20values%3D%22M%20-122%201500%20C%20-272%201200%20528%201100%20478%20950%20C%20428%20800%20858%20800%20898%20650%20C%20938%20500%20628%20300%20918%20150%20C%201208%20-100%201078%20-250%201278%20-400%3BM%20-122%201500%20C%20-272%201200%20448%201100%20398%20950%20C%20348%20800%20928%20800%20968%20650%20C%201008%20500%20708%20300%20998%20150%20C%201288%20-100%201078%20-250%201278%20-400%3BM%20-122%201500%20C%20-272%201200%20588%201100%20538%20950%20C%20488%20800%20798%20800%20838%20650%20C%20878%20500%20588%20300%20878%20150%20C%201168%20-100%201078%20-250%201278%20-400%3BM%20-122%201500%20C%20-272%201200%20528%201100%20478%20950%20C%20428%20800%20858%20800%20898%20650%20C%20938%20500%20628%20300%20918%20150%20C%201208%20-100%201078%20-250%201278%20-400%22%20dur%3D%228s%22%20begin%3D%22-2s%22%20repeatCount%3D%22indefinite%22%20calcMode%3D%22spline%22%20keyTimes%3D%220%3B0.333%3B0.667%3B1%22%20keySplines%3D%22.42%200%20.58%201%3B.42%200%20.58%201%3B.42%200%20.58%201%22%2F%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');--brand-ribbon:var(--brand-ribbon-motion)}
:root .app-loading{position:relative;isolation:isolate;overflow:hidden}
:root .app-loading::before{content:"";position:absolute;inset:-20%;background:var(--brand-ribbon) center/100% 100% no-repeat;opacity:.08;pointer-events:none;z-index:-1}
:root[data-theme=dark] .app-loading::before{filter:invert(1);opacity:.075}
:root .loading-brand,:root .app-loading>p{position:relative;z-index:1}
@media(min-width:1100px){
 :root .login-page{position:relative;isolation:isolate;overflow-x:clip}
 :root .login-page::before{content:"";position:fixed;right:-200px;bottom:-250px;width:750px;height:1200px;background:var(--brand-ribbon) center/100% 100% no-repeat;opacity:.075;pointer-events:none;z-index:-1}
 :root[data-theme=dark] .login-page::before{filter:invert(1);opacity:.065}
}
@media(max-width:760px){
 :root .app-loading::before{inset:-20%;opacity:.075;mask-image:radial-gradient(ellipse at 45% 48%,transparent 22%,#000 62%)}
 :root[data-theme=dark] .app-loading::before{opacity:.075}
}
@media(prefers-reduced-motion:reduce){:root{--brand-ribbon:var(--brand-ribbon-static)}}

/* Mobile bank rows give the title its own width; status follows below. */
@media(max-width:760px){
 :root .hw-bank-row[data-bank]{display:grid;grid-template-columns:36px minmax(0,1fr) 18px;column-gap:12px;row-gap:10px;padding:18px 16px;align-items:start}
 :root .hw-bank-row[data-bank]>.subject-icon{width:36px;height:36px;grid-column:1;grid-row:1}
 :root .hw-bank-row[data-bank]>span:nth-child(2){grid-column:2;grid-row:1}
 :root .hw-bank-row[data-bank]>.badge{grid-column:2;grid-row:2;justify-self:start;max-width:100%;white-space:normal}
 :root .hw-bank-row[data-bank]>svg{grid-column:3;grid-row:1;align-self:center}
}

/* The loading lockup is inline vector art: no separate image download. */
:root .loading-brand .loading-logo{display:block;width:280px;max-width:85vw;height:auto;stroke:none;fill:none;color:var(--ink)}
/* Released and completed calendar events use neutral surfaces, with explicit status text. */
:root .cal-release{background:var(--raised);border-left-color:var(--focus)}
:root .cal-event.cal-past{opacity:1;background:var(--card);border-left-color:var(--line);color:var(--muted)}
:root .cal-past strong{color:var(--ink)}
:root .cal-status.past,:root .cal-status.submitted{color:var(--ink);background:var(--soft);border-radius:5px;padding:2px 6px;display:inline-flex;align-items:center;gap:5px}
:root .cal-status.submitted::before,:root .cal-live .cal-status.past::before{content:'✓';font-weight:600}

/* Course completion stays monochrome in both themes; check and label convey status. */
:root .lesson-row.is-complete{background:var(--raised);border-left-color:var(--focus)}
:root .lesson-row.is-complete .subject-icon,:root .lesson-row.is-complete .completion-pill{background:var(--soft);color:var(--ink)}
:root :is(.programme-progress progress,.course-section progress){background:var(--soft)}
:root .programme-progress progress::-moz-progress-bar,:root .course-section progress::-moz-progress-bar{background:var(--ink);border-radius:5px}

/* Inline navigation mark paints with the shell, without image fetch/decode on each render. */
:root svg.navigation-brand{display:block;stroke:none;fill:none;color:var(--ink);filter:none;aspect-ratio:880 / 290;flex-shrink:0}
/* Subject identity uses the same graphite treatment in both themes. */
:root[data-theme] .subject-icon,:root[data-theme] .course-cover,:root[data-theme] .course-list-image .avatar-fallback{background:var(--soft);color:var(--ink)}