/* Adapted from Web-App/assets/css/app.css; the app itself is unchanged. */
:root {
  --orange:#fe6800;
  --orange-dark:#c65316;
  --orange-soft:#fff0e5;
  --ink:#151c1d;
  --ink-soft:#353a40;
  --muted:#6d737a;
  --page:#fff7f1;
  --surface:#fff;
  --surface-alt:#fff8f3;
  --line:#dfe3e6;
  --line-strong:#cbd1d6;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  background:var(--page);
  color:var(--ink);
}
html,body { background:var(--page); color:var(--ink); }
body { border-top:5px solid var(--orange); }
header { background:white; border-color:#f2c7ab; }
.workspace-open>header { display:none; }
main { width:min(1720px,calc(100% - 32px)); max-width:none; padding:0; margin:11px auto 16px; }
#workspace { grid-template-columns:278px minmax(0,1fr); column-gap:0; background:#fffaf7; min-height:calc(100vh - 110px); }
.tabs { background:#172021; color:white; padding:0 12px 24px; min-height:calc(100vh - 110px); border:0; }
.sidebar-brand { display:flex; align-items:center; gap:12px; padding:20px 6px; margin-bottom:14px; border-bottom:1px solid #ffffff1a; min-height:88px; }
.sidebar-brand img { width:48px; height:48px; object-fit:cover; border:1px solid #394243; border-radius:7px; }
.sidebar-brand strong { display:block; font-size:15px; }
.sidebar-brand span { display:block; font-size:12px; color:#aeb5bc; margin-top:4px; }
.nav-heading { color:#929aa2; font-size:10px; padding:12px 9px 7px; font-weight:800; }
.tabs button { background:transparent; color:#e7eaed; border:0; border-radius:6px; min-height:44px; font-weight:700; padding:9px 10px; }
.tabs button:hover { background:#263132; }
.tabs button[aria-current] { background:var(--orange); color:white; border:0; }
.page-heading { min-height:114px; padding:22px 2px 20px; margin:0 24px 22px; border-bottom:1px solid var(--line); position:relative; }
.page-heading:after { content:""; position:absolute; bottom:-2px; left:0; width:128px; height:4px; background:var(--orange); }
.page-heading h1 { font-size:28px; margin:6px 0 3px; line-height:1.15; }
.eyebrow { color:var(--orange-dark); font-size:11px; font-weight:800; }
.view { padding:0 24px 32px; background:#fffaf7; }
.summary-grid { border-color:var(--line); margin-bottom:24px; padding-bottom:24px; }
.metric { border-color:var(--line); padding-top:0; }
.metric>span { color:var(--muted); font-size:11px; }
.metric strong { color:var(--ink); font-size:34px; }
.metric p,.muted,.tag { color:var(--muted); }
progress { accent-color:var(--orange); }
progress::-webkit-progress-bar { background:var(--line); }
progress::-webkit-progress-value { background:var(--orange); }
progress::-moz-progress-bar { background:var(--orange); }
button { border-color:var(--line); border-radius:7px; }
button:hover { background:var(--surface-alt); border-color:#aeb5bb; }
.primary { background:var(--orange); border-color:var(--orange); color:#fff; }
.primary:hover { background:var(--orange-dark); color:white; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline-color:#ed741b88; }
.section-heading h2 { font-size:20px; }
.task { background:var(--surface); border-color:var(--line); border-radius:7px; padding:18px 20px; }
.task-preview { border-radius:4px; }
.homework-task h3 { color:var(--ink); font-size:19px; }
.homework-task p { color:var(--ink-soft); }
.homework-task .task-actions { border-color:var(--line); }
.task a,.section-heading a,#message { color:var(--orange-dark); }
.status-badge { background:var(--orange-soft); color:var(--orange-dark); }
.status-badge.done { background:#edf8f2; color:#218553; }
.status-badge.help { background:#fff1dc; color:#89590c; }
.training-note { border-top:4px solid var(--orange); margin-top:26px; padding:22px 0; }
.training-note h2 { font-size:18px; }
.teacher-tools { background:transparent; border-color:var(--line); }
input,textarea,select { border-color:var(--line-strong); border-radius:5px; }
form label select { display:block; margin-top:6px; width:100%; }
dialog { border:1px solid var(--line); border-radius:8px; border-top:4px solid var(--orange); }
footer { background:white; border-top:1px solid #f2c7ab; }
.demo-label { color:var(--orange-dark); background:var(--orange-soft); }
.login { padding:30px 24px; }
#message { padding-left:24px; margin-left:278px; }
@media(max-width:1100px) {
  #workspace { grid-template-columns:230px minmax(0,1fr); }
  #message { margin-left:230px; }
  .view { padding-left:18px; padding-right:18px; }
  .page-heading { margin-left:18px; margin-right:18px; }
}
@media(max-width:750px) {
  main { width:calc(100% - 20px); margin-top:10px; }
  #workspace { grid-template-columns:minmax(0,1fr); }
  .tabs { min-height:0; padding:10px; gap:6px; margin-bottom:18px; }
  .sidebar-brand { grid-column:1 / -1; padding:5px 0 13px; min-height:64px; margin:0 0 4px; }
  .tabs button { background:#263132; font-size:12px; min-height:40px; }
  .tabs button[aria-current] { background:var(--orange); color:white; }
  .page-heading { margin:0 14px 16px; padding:17px 0; min-height:90px; }
  .page-heading h1 { font-size:25px; }
  .view { padding:0 14px 24px; }
  .metric:nth-child(2) { border-left-color:var(--line)!important; }
  .metric:last-child { border-top-color:var(--line)!important; }
  .metric strong { font-size:30px; }
  .metric .date { font-size:21px; }
  .task { padding:14px; }
  .homework-task h3 { font-size:17px; }
  #message { margin-left:0; padding-left:14px; }
  .login { padding:10px; }
}