:root{
  --bg:#020817!important;
  --panel:#071225!important;
  --panel2:#0b1730!important;
  --text:#f8fbff!important;
  --muted:#9fb0ca!important;
  --line:#1b365d!important;
  --cyan:#19d7f8!important;
  --blue:#178cff!important;
  --violet:#8b5cf6!important;
  --pink:#d946ef!important;
  --green:#4ade80!important;
  --yellow:#facc15!important;
}
html{color-scheme:dark}
body{
  background:
    radial-gradient(circle at 8% -5%,rgba(23,140,255,.19),transparent 27%),
    radial-gradient(circle at 94% 7%,rgba(139,92,246,.18),transparent 29%),
    radial-gradient(circle at 50% 105%,rgba(25,215,248,.07),transparent 35%),
    #020817!important;
}
.top,.bar{
  background:rgba(2,8,23,.90)!important;
  border-bottom:1px solid rgba(25,215,248,.12)!important;
  box-shadow:0 12px 35px rgba(0,0,0,.18);
}
.brand{
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  color:#fff!important;
  text-decoration:none!important;
  font-weight:950!important;
}
.brand:hover{color:#fff!important}
.brand-logo{
  width:43px;height:43px;object-fit:contain;flex:0 0 auto;
  filter:drop-shadow(0 0 13px rgba(23,140,255,.30));
  transition:transform .18s ease,filter .18s ease;
}
.brand:hover .brand-logo{
  transform:translateY(-1px) scale(1.035);
  filter:drop-shadow(0 0 18px rgba(25,215,248,.42));
}
.brand-word{line-height:1.02;letter-spacing:.035em}
.brand-word strong{
  display:block;font-size:.94rem;
  background:linear-gradient(90deg,#fff 25%,#8be9ff 68%,#b69cff);
  -webkit-background-clip:text;color:transparent;
}
.brand-word small{
  display:block!important;color:#8295b4!important;font-size:.67rem!important;
  font-weight:700!important;letter-spacing:.01em!important;margin-top:3px;
}
.mark{display:none!important}
.btn.primary,.lang-btn.active{
  background:linear-gradient(135deg,#1677ff,#7c3aed)!important;
  border-color:transparent!important;
  box-shadow:0 7px 24px rgba(71,71,255,.13);
}
.progress div,.progress #progress,#progress{
  background:linear-gradient(90deg,#19d7f8,#178cff,#8b5cf6)!important;
}
.grad{
  background:linear-gradient(90deg,#edfaff,#19d7f8 38%,#5b8cff 67%,#a879ff)!important;
  -webkit-background-clip:text!important;color:transparent!important;
}
.kicker{color:#42ddfb!important}
.card,.concept,.activity,.assignment-card,.rubric-card{
  border-color:rgba(92,143,205,.17)!important;
}
pre{
  background:#020711!important;
  border-color:#17345b!important;
}
.assignment-launcher{
  background:
    radial-gradient(circle at 50% -25%,rgba(25,215,248,.12),transparent 38%),
    linear-gradient(145deg,rgba(6,20,43,.99),rgba(20,13,50,.99))!important;
  border-color:rgba(94,177,255,.26)!important;
}
.assignment-open-btn{
  background:linear-gradient(135deg,#078be8,#4f46e5,#8b5cf6)!important;
}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid #19d7f8!important;outline-offset:3px;
}
@media(max-width:620px){
  .brand-logo{width:37px;height:37px}
  .brand-word strong{font-size:.82rem}
  .brand-word small{font-size:.60rem!important}
}


/* Shared assignment submission UI */
.submission-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}
.submission-grid>div{
  border:1px solid rgba(84,156,124,.42);
  border-radius:16px;
  padding:16px;
  background:linear-gradient(160deg,rgba(7,29,25,.78),rgba(5,16,30,.88));
}
.submission-grid>div>b{
  display:block;
  font-size:1.55rem;
  margin-bottom:8px;
}
.submission-grid>div>strong{
  display:block;
  margin-bottom:6px;
  color:#effff5;
}
.submission-grid>div>p{
  margin:0;
  color:#b9c9d8;
  line-height:1.55;
}
@media(max-width:850px){
  .submission-grid{grid-template-columns:1fr}
}