:root {
  color-scheme: light;
  --bg:#f4f6fb; --surface:#fff; --surface-alt:#f7f8fc;
  --ink:#202a39; --muted:#738096; --line:#e3e8f0;
  --primary:#5267e8; --primary-hover:#4055d2; --primary-soft:#eef0ff;
  --success:#12684f; --success-bg:#e8f7f0;
  --warning:#79520e; --warning-bg:#fff4dc;
  --danger:#a83d45; --danger-bg:#fdebed;
  --shadow:0 10px 28px rgba(32,42,57,.06);
  --ambient-a:rgba(112,132,255,.18);
  --ambient-b:rgba(76,205,183,.13);
  --ambient-c:rgba(202,132,241,.12);
  --glyph-color:rgba(75,91,151,.14);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
body[data-theme="dark"] {
  color-scheme:dark;
  --bg:#141821; --surface:#1d2430; --surface-alt:#252d3b;
  --ink:#edf1f8; --muted:#a5b0c2; --line:#343e4e;
  --primary:#8794ff; --primary-hover:#a4afff; --primary-soft:#2b3153;
  --success:#83d4b5; --success-bg:#1d3b33;
  --warning:#f0c36f; --warning-bg:#45371f;
  --danger:#ff9299; --danger-bg:#48272c;
  --shadow:0 10px 28px rgba(0,0,0,.2);
  --ambient-a:rgba(97,112,255,.22);
  --ambient-b:rgba(45,206,190,.14);
  --ambient-c:rgba(180,104,247,.16);
  --glyph-color:rgba(197,207,255,.16);
}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:var(--bg);transition:background .2s,color .2s}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.6;cursor:wait}
#root{position:relative;z-index:1}

.subject-background{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;user-select:none}
.ambient-orb{position:absolute;width:clamp(240px,34vw,520px);aspect-ratio:1;border-radius:50%;filter:blur(70px);opacity:.85;will-change:transform}
.orb-one{top:-15%;left:-10%;background:radial-gradient(circle,var(--ambient-a),transparent 70%);animation:drift1 24s ease-in-out infinite alternate}
.orb-two{top:25%;right:-15%;background:radial-gradient(circle,var(--ambient-b),transparent 70%);animation:drift2 29s ease-in-out infinite alternate}
.orb-three{bottom:-27%;left:30%;background:radial-gradient(circle,var(--ambient-c),transparent 70%);animation:drift3 32s ease-in-out infinite alternate}
.subject-glyph{position:absolute;color:var(--glyph-color);font-weight:750;line-height:1;animation:glyphFloat 11s ease-in-out infinite}
.g1{top:17%;left:13%;font-size:clamp(28px,4vw,52px)}
.g2{top:27%;right:12%;font-size:clamp(19px,2.6vw,32px);animation-delay:-3s}
.g3{top:63%;left:7%;font-size:clamp(30px,4vw,50px);animation-delay:-5s}
.g4{top:72%;right:16%;font-size:clamp(28px,3.5vw,44px);animation-delay:-2s}
.g5{top:44%;left:48%;font-size:clamp(30px,4vw,54px);animation-delay:-7s}
.g6{bottom:10%;left:43%;font-size:clamp(28px,3vw,40px);animation-delay:-4s}
.g7{top:11%;right:38%;font-size:clamp(25px,3vw,38px);animation-delay:-6s}
.g8{bottom:24%;right:43%;font-size:clamp(22px,2.5vw,32px);animation-delay:-1s}
@keyframes drift1{to{transform:translate(9vw,8vh) scale(1.16)}}
@keyframes drift2{to{transform:translate(-10vw,7vh) scale(.92)}}
@keyframes drift3{to{transform:translate(6vw,-8vh) scale(1.12)}}
@keyframes glyphFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-12px) rotate(4deg)}}

.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px max(18px,calc((100% - 1240px)/2));background:var(--surface);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand-mark{display:grid;place-items:center;width:40px;height:40px;color:#fff;background:var(--primary);border-radius:12px}
.top-right{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:20px;max-width:1240px;margin:24px auto;padding:0 18px}
.sidebar{position:sticky;top:78px;align-self:start;max-height:calc(100vh - 94px);overflow:auto;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow)}
.nav-title{margin:7px 9px 10px;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.nav button{display:flex;align-items:center;gap:9px;width:100%;padding:11px 12px;margin:3px 0;color:var(--muted);text-align:left;background:transparent;border:0;border-radius:9px;font-weight:650}
.nav button:hover{background:var(--surface-alt)}
.nav button.active{color:var(--primary);background:var(--primary-soft)}
.nav hr{border:0;border-top:1px solid var(--line);margin:9px 0}
main{min-width:0}
.hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:27px;color:#fff;background:linear-gradient(120deg,#5267e8,#7b88f2);border-radius:19px;box-shadow:var(--shadow)}
.hero h1{margin:0 0 8px;font-size:clamp(24px,4vw,35px)}
.hero p{max-width:720px;margin:0;color:rgba(255,255,255,.9);line-height:1.55}
.hero-icon{font-size:48px}
.panel,.card,.login-card,.stat{background:var(--surface);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow)}
.panel{padding:20px;margin:15px 0}.card{padding:17px;margin:11px 0}
.panel h2,.card h3{margin-top:0}
.panel.danger-zone{border-color:var(--danger)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:15px 0}
.stat{padding:15px}.stat strong{display:block;margin:5px 0;font-size:24px}.stat span{color:var(--muted);font-size:13px}
.muted,.small{color:var(--muted);line-height:1.5}.small{font-size:13px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
label{display:block;font-weight:650}
input,select,textarea{width:100%;padding:10px 11px;margin:6px 0 13px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:9px;outline-color:var(--primary)}
textarea{min-height:88px;resize:vertical}
input[type=radio]{width:auto;margin:0 7px 0 0;vertical-align:middle}
input[type=checkbox]{width:auto;margin:0 7px 0 0}
input[type=file]{padding:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 13px;color:#fff;background:var(--primary);border:0;border-radius:9px;font-weight:700}
.btn:hover{background:var(--primary-hover)}
.btn.secondary{color:var(--ink);background:var(--surface-alt);border:1px solid var(--line)}
.btn.danger{color:#fff;background:var(--danger)}
.btn.small-btn{padding:8px 10px;font-size:13px}
.btn.big{padding:13px 20px;font-size:16px}
.btn-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tag,.role-badge{display:inline-block;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:750}
.tag{color:var(--primary);background:var(--primary-soft)}
.tag.pts{color:var(--success);background:var(--success-bg)}
.tag.warn{color:var(--warning);background:var(--warning-bg)}
.tag.bad{color:var(--danger);background:var(--danger-bg)}
.role-badge{color:#fff;border:1px solid rgba(255,255,255,.25);background-size:220% 220%;animation:roleShimmer 5s ease infinite}
.role-student{background-image:linear-gradient(120deg,#1677c8,#26b9ce,#1677c8)}
.role-teacher{background-image:linear-gradient(120deg,#6944cf,#a461dd,#6944cf)}
.role-developer{background-image:linear-gradient(120deg,#202a39,#5267e8,#a461dd,#202a39)}
@keyframes roleShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.notice{padding:12px 14px;color:var(--muted);background:var(--surface-alt);border-radius:10px;font-size:13px;line-height:1.5}
.notice.warning{color:var(--warning);background:var(--warning-bg)}
.notice.success{color:var(--success);background:var(--success-bg)}
.notice.danger{color:var(--danger);background:var(--danger-bg)}
.empty{padding:25px 12px;color:var(--muted);text-align:center}
.empty[hidden]{display:none}
.row{padding:11px 0;border-bottom:1px solid var(--line)}.row:last-child{border-bottom:0}
.work-head,.question-head,.q-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.q-head{align-items:center}
.question-card{padding:15px;margin:11px 0;background:var(--surface-alt);border:1px solid var(--line);border-radius:12px}
.question-card h4{margin:0}.definition-field{margin:12px 0}.definition-field textarea{min-height:100px}
.q-text{margin:8px 0 12px;line-height:1.55;white-space:pre-wrap}
.cred{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:10px 0;padding:12px;background:var(--surface);border:1px dashed var(--primary);border-radius:10px}
.cred code{font-size:16px;font-weight:800;letter-spacing:.04em;user-select:all}
.tabs{display:flex;gap:8px;margin:16px 0}
.tabs button{flex:1;padding:10px;color:var(--muted);background:var(--surface-alt);border:1px solid var(--line);border-radius:9px;font-weight:700}
.tabs button.active{color:var(--primary);background:var(--primary-soft);border-color:var(--primary)}
textarea.code,pre.out{font-family:ui-monospace,Consolas,"Courier New",monospace;font-size:14px;line-height:1.5;tab-size:4}
textarea.code{min-height:120px;color:#e6edf7;background:#10151f;border-color:#2c3648;white-space:pre;overflow:auto}
pre.out{margin:6px 0;padding:10px;background:var(--surface-alt);border:1px solid var(--line);border-radius:9px;white-space:pre-wrap;overflow:auto;max-height:260px}
table.bd{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
.bd th,.bd td{padding:7px 8px;text-align:left;border-bottom:1px solid var(--line)}
.bd th{color:var(--muted);font-weight:700}
details{margin-top:8px}
summary{cursor:pointer;color:var(--primary);font-weight:650}
.grade-row{margin-top:10px;padding:10px;background:var(--surface-alt);border:1px solid var(--line);border-radius:10px}
.grade-row input{max-width:140px}
.login-wrap{max-width:560px;margin:6vh auto;padding:18px}.login-card{padding:27px}.login-card h1{margin-top:0}
footer{padding:22px 0;color:var(--muted);text-align:center;font-size:12px}

/* вложения */
.attach{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
.attach img{display:block;max-width:100%;max-height:380px;border:1px solid var(--line);border-radius:10px;background:#fff}
.file-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;color:var(--ink);text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:9px;font-size:13px;font-weight:650}
.file-chip:hover{border-color:var(--primary)}
.att-item{display:flex;align-items:center;gap:10px;padding:8px;margin:6px 0;background:var(--surface);border:1px solid var(--line);border-radius:9px;font-size:13px}
.att-item img{width:54px;height:54px;object-fit:cover;border-radius:7px}
.att-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* страница теста */
.test-wrap{max-width:1180px;margin:20px auto;padding:0 18px}
.test-title{display:flex;flex-direction:column;gap:2px}
.test-title strong{font-size:16px}
.saved{color:var(--success);font-size:12px;font-weight:700}
.ide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px;align-items:start}
.ide-left,.ide-right{min-width:0}
.run-box{margin-top:8px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:10px}
.test-submit{position:sticky;bottom:0;z-index:4;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:12px 16px;margin-top:16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.q-nav-box{position:sticky;top:64px;z-index:3;padding:12px 14px;margin-bottom:14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.q-nav-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:13px;font-weight:700}
.q-nav{display:flex;flex-wrap:wrap;gap:6px}
.q-btn{min-width:40px;height:40px;padding:0 10px;color:var(--ink);background:var(--surface-alt);border:2px solid var(--line);border-radius:10px;font-weight:800}
.q-btn:hover{border-color:var(--primary)}
.q-btn.done{color:var(--success);background:var(--success-bg)}
.q-btn.cur{color:#fff;background:var(--primary);border-color:var(--primary)}
.q-slot[hidden]{display:none!important}
.q-step{display:flex;justify-content:space-between;gap:10px;margin-top:10px}

/* результат на весь экран */
.result-full{min-height:100vh;padding:5vh 18px 40px}
.result-inner{max-width:980px;margin:0 auto}
.result-top{display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding:30px;margin-bottom:18px;background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}
.ring{display:grid;place-items:center;width:170px;height:170px;border-radius:50%;background:conic-gradient(var(--ring-color,var(--primary)) calc(var(--p)*1%),var(--line) 0)}
.ring.ok{--ring-color:var(--success)}
.ring.bad{--ring-color:var(--danger)}
.ring.wait{--ring-color:var(--warning)}
.ring span{display:grid;place-items:center;width:130px;height:130px;font-size:34px;font-weight:850;background:var(--surface);border-radius:50%}
.result-top h1{margin:0 0 8px;font-size:clamp(24px,4vw,36px)}
.result-score{margin:0 0 10px;font-size:20px;font-weight:750}
.result-table{width:100%;border-collapse:collapse;font-size:15px}
.result-table th,.result-table td{padding:12px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.result-table th{color:var(--muted);font-size:13px}
.result-table td.q{max-width:380px;color:var(--muted)}
.result-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

/* профиль */
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.ach{padding:14px;background:var(--surface-alt);border:1px solid var(--line);border-radius:12px}
.ach .ico{font-size:30px}
.ach strong{display:block;margin:6px 0 3px}
.ach.locked{opacity:.5;filter:grayscale(1)}
.bar{height:8px;margin-top:6px;overflow:hidden;background:var(--line);border-radius:99px}
.bar>i{display:block;height:100%;background:var(--danger)}
.bar.ok>i{background:var(--success)}
.scroll-x{overflow-x:auto}

/* фон по предмету */
#subjectCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
body.subj .subject-background{display:none}
body.subj .panel,body.subj .card,body.subj .stat,body.subj .sidebar,body.subj .result-top{background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(3px)}

/* предметы и список тестов */
.subj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.subj-card{display:flex;flex-direction:column;gap:6px;padding:18px;text-align:left;color:var(--ink);background:var(--surface-alt);border:1px solid var(--line);border-radius:16px;transition:transform .15s,border-color .2s,box-shadow .2s}
.subj-card:hover{transform:translateY(-3px);border-color:var(--primary);box-shadow:var(--shadow)}
.subj-ico{font-size:34px}
.subj-card strong{font-size:17px}
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:6px}
.filters input[type=search]{flex:1;min-width:200px;margin:0}
.chk{display:flex;align-items:center;font-weight:600;white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.chip{padding:7px 13px;color:var(--muted);background:var(--surface-alt);border:1px solid var(--line);border-radius:99px;font-weight:700}
.chip.active{color:var(--primary);background:var(--primary-soft);border-color:var(--primary)}
#testList{max-height:60vh;overflow:auto;padding-right:4px}
.t-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;margin:8px 0;background:var(--surface-alt);border:1px solid var(--line);border-radius:12px}
.t-row[hidden]{display:none!important}
.t-main{min-width:0}

@keyframes enterUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes enterSoft{from{opacity:0;transform:translateY(-10px) scale(.985)}to{opacity:1;transform:none}}
.login-card{animation:enterUp .5s cubic-bezier(.2,.7,.2,1) backwards}
main.enter>*{animation:enterUp .45s cubic-bezier(.2,.7,.2,1) backwards}
main.enter>*:nth-child(2){animation-delay:.06s}
main.enter>*:nth-child(3){animation-delay:.12s}
main.enter>*:nth-child(4){animation-delay:.18s}
main.enter>*:nth-child(5){animation-delay:.24s}
.enter-soft{animation:enterSoft .38s cubic-bezier(.2,.7,.2,1) backwards}
.leaving{opacity:0;transform:translateY(-10px);transition:opacity .17s ease,transform .17s ease;pointer-events:none}
.btn,.nav button,.tabs button{transition:background .2s,color .2s,border-color .2s,transform .15s}
.btn:active,.nav button:active,.tabs button:active{transform:scale(.97)}
.card{transition:box-shadow .2s,transform .2s}

@media(prefers-reduced-motion:reduce){.role-badge,.ambient-orb,.subject-glyph{animation:none}.login-card,main.enter>*,.enter-soft{animation:none}.leaving{transition:none}}
@media(max-width:900px){.ide{grid-template-columns:1fr}}
@media(max-width:800px){.layout{grid-template-columns:1fr;margin-top:14px}.sidebar{position:static;max-height:none;order:-1}.nav{display:flex;flex-wrap:wrap;gap:4px}.nav-title{width:100%}.nav button{width:auto}.nav hr{display:none}.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.topbar{align-items:flex-start;flex-direction:column}.top-right{justify-content:flex-start}.grid{grid-template-columns:1fr}.hero{padding:21px}.hero-icon{font-size:36px}.work-head{flex-direction:column}.g5,.g8{display:none}.ring{width:140px;height:140px}.ring span{width:105px;height:105px;font-size:28px}.result-top{padding:20px}}
/* экран входа */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.auth-wrap .login-card {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 28px;
}
.auth-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.auth-wrap .tabs {
  display: flex;
  gap: 8px;
  margin: 14px 0;
}
.auth-wrap .tabs .btn {
  flex: 1;
}
.auth-wrap label {
  display: block;
  margin-bottom: 10px;
}
.auth-wrap input,
.auth-wrap select {
  width: 100%;
  box-sizing: border-box;
}
/* ===== каркас: шапка, меню, контент ===== */
.topbar {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  box-sizing: border-box;
  width: 100%;
}
.topbar .brand { font-size: 18px; }
.topbar .top-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.layout {
  display: block !important;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px 48px;
  box-sizing: border-box;
}
.layout > .side {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  position: static !important;
  width: auto !important;
  margin: 0 0 20px;
  padding: 0;
  background: none;
  border: 0;
}
.layout .nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(128,128,128,.3));
  background: var(--card, rgba(128,128,128,.12));
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  width: auto;
}
.layout .nav-btn:hover { filter: brightness(1.1); }
.layout .nav-btn.active {
  background: #5267e8;
  border-color: #5267e8;
  color: #fff;
}
.layout > main {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* карточка-заголовок раздела */
.hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 28px;
  margin-bottom: 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, #5267e8, #a461dd);
  color: #fff;
}
.hero h1 { margin: 0 0 6px; color: #fff; }
.hero p { margin: 0; opacity: .92; }
.hero-ico { font-size: 44px; line-height: 1; flex: none; }

/* панели и карточки */
.layout .panel {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 18px;
}
.work-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.work-head > .btn { white-space: nowrap; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }

@media (max-width: 700px) {
  .topbar, .layout { padding-left: 12px; padding-right: 12px; }
  .hero { flex-direction: column; align-items: flex-start; }
}