/* =========================================================
   0) Scrollbar stability (чтобы страница не прыгала по ширине)
   ========================================================= */
   html { overflow-y: scroll; }

   @supports (scrollbar-gutter: stable) {
     html { overflow-y: auto; scrollbar-gutter: stable; }
   }
   
   
   /* =========================================================
      1) CSS Variables
      ========================================================= */
   :root{
     /* --- Nav special colors (то, что ты руками подбирал) --- */
     --brand-purple: #6119FA; /* как на "Войти" (в меню hover = фиолетовый) */
     --brand-yellow: #FADC3B; /* как на "Перейти в каталог" (активная вкладка) */
     --ink: #121212;          /* чёрный для текста на жёлтом */
   
     /* --- Brand palette --- */
     --c-yellow: #FFDD2D;     /* yandex-like */
     --c-red:    #FF2B47;
     --c-purple: #6F2CFF;
   
     /* --- UI --- */
     --c-bg: #F6F5F2;
     --c-surface: #FFFFFF;
     --c-surface-2: rgba(255,255,255,.72);
     --c-text: #121212;
     --c-muted: rgba(18,18,18,.62);
     --c-border: rgba(18,18,18,.12);
   
     /* --- Radii --- */
     --r-sm: 10px;
     --r-md: 14px;
     --r-lg: 18px;
     --r-xl: 22px;
   
     /* --- Shadows / focus --- */
     --shadow-sm: 0 6px 16px rgba(0,0,0,.08);
     --shadow-md: 0 14px 34px rgba(0,0,0,.10);
     --focus: 0 0 0 3px rgba(111,44,255,.22);
   }
   
   
   /* =========================================================
      2) Base reset / base typography
      ========================================================= */
   *{ box-sizing:border-box; }
   html{ -webkit-text-size-adjust:100%; }
   
   body{
     margin:0;
     color:var(--c-text);
     font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
     background: var(--c-bg);
     min-height: 100vh;
     position: relative;
   }
   
   
   /* =========================================================
      3) Full-page gradient background
      ========================================================= */
   body::before{
     content:"";
     position: fixed;
     inset: 0;
     z-index: -1;
     pointer-events: none;
   
     background:
       /* ОСНОВА: очень насыщенный жёлтый сверху слева */
       radial-gradient(1250px 720px at 10% -16%, rgba(255,221,45,.78), rgba(255,221,45,0) 62%),
   
       /* ОСНОВА: фиолетовый сверху справа (чуть тусклее) */
       radial-gradient(1220px 740px at 92% -18%, rgba(111,44,255,.56), rgba(111,44,255,0) 64%),
   
       /* доп. фиолетовый “шлейф” ниже */
       radial-gradient(1200px 760px at 80% 38%, rgba(111,44,255,.20), rgba(111,44,255,0) 66%),
   
       /* доп. жёлтый “шлейф” ниже */
       radial-gradient(1200px 760px at 20% 46%, rgba(255,221,45,.20), rgba(255,221,45,0) 66%),
   
       /* КРАСНЫЙ: еле заметная дымка */
       radial-gradient(980px 620px at 56% 22%, rgba(255,43,71,.045), rgba(255,43,71,0) 70%),
   
       /* низ: мягкие хвосты */
       radial-gradient(1300px 900px at 26% 112%, rgba(255,221,45,.18), rgba(255,221,45,0) 64%),
       radial-gradient(1300px 900px at 78% 112%, rgba(111,44,255,.15), rgba(111,44,255,0) 64%),
   
       /* база */
       linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(246,245,242,1) 55%, rgba(246,245,242,1) 100%);
   
     filter: saturate(1.16) contrast(1.04);
   }
   
   
   /* =========================================================
      4) Elements
      ========================================================= */
   a{ color:inherit; text-decoration:none; }
   a:hover{ text-decoration:underline; }
   
   img{ max-width:100%; height:auto; display:block; }
   
   
   /* =========================================================
      5) Page container
      ========================================================= */
   .page{
     max-width: 1060px;
     margin: 0 auto;
     padding: 18px 16px 64px;
   }
   
   
   /* =========================================================
      6) Topbar / Navigation
      ========================================================= */
   .topbar{
     position: sticky;
     top: 0;
     z-index: 50;
     background: rgba(255,255,255,.80);
     backdrop-filter: blur(10px);
     border-bottom: 1px solid var(--c-border);
   }
   
   .topbar__inner{
     max-width: 1060px;
     margin: 0 auto;
     padding: 10px 16px;
     display:flex;
     gap:14px;
     align-items:center;
   }
   
   .topnav{
     display:flex;
     gap:10px;
     align-items:center;
     flex-wrap:wrap;
   }
   
   /* --- Nav link base --- */
   .topnav__link{
     border-radius: 999px;
     padding: 8px 12px;
     display: inline-flex;
     align-items: center;
     gap: 6px;
   
     /* важно: не подчёркивать даже при глобальном a:hover */
     text-decoration: none;
   
     transition: background .15s ease, color .15s ease, box-shadow .15s ease;
   }
   
   /* тень при наведении — ДЛЯ ВСЕХ (включая активную), как сейчас */
   .topnav__link:hover{
     box-shadow: 0 10px 26px rgba(0,0,0,.10);
     text-decoration: none;
   }
   
   /* hover — ФИОЛЕТОВЫЙ (только если не активная) */
   .topnav__link:not(.is-active):hover{
     background: var(--brand-purple);
     color: #fff;
   }
   
   /* активная — ЖЁЛТАЯ */
   .topnav__link.is-active{
     background: var(--brand-yellow);
     color: var(--ink);
   }
   
   /* чтобы активная не становилась фиолетовой при наведении */
   .topnav__link.is-active:hover{
     background: var(--brand-yellow);
     color: var(--ink);
   }
   
   /* фокус с клавиатуры */
   .topnav__link:focus-visible{
     outline: none;
     box-shadow: 0 0 0 3px rgba(97,25,250,.22);
     text-decoration: none;
   }
   
   .topbar__right{
     margin-left:auto;
     display:flex;
     gap:10px;
     align-items:center;
     flex-wrap:wrap;
   }
   
   
   /* =========================================================
      7) Small indicators (dots)
      ========================================================= */
   .brand-dot{
     width:10px; height:10px;
     border-radius:999px;
     background: var(--c-red);
     display:inline-block;
   }
   
   .nav-dot{
     width:8px; height:8px;
     border-radius:999px;
     background: var(--c-red);
     display:inline-block;
   }
   
   
   /* =========================================================
      8) Layout helpers
      ========================================================= */
   .row{ display:flex; gap:12px; align-items:center; }
   .row--wrap{ flex-wrap:wrap; }
   .row--between{ justify-content:space-between; }
   
   .stack{ display:flex; flex-direction:column; gap:12px; }
   .stack--sm{ gap:8px; }
   
   
   /* =========================================================
      9) Page head
      ========================================================= */
   .page-head{
     display:flex;
     gap:14px;
     align-items:flex-end;
     justify-content:space-between;
     flex-wrap:wrap;
     margin: 10px 0 14px;
   }
   
   .page-title{
     margin:0;
     font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
     font-size: 44px;
     line-height: 1.02;
     letter-spacing: -0.02em;
   }
   
   .page-subtitle{
     margin-top: 6px;
     color: var(--c-muted);
   }
   
   .link-back{
     display:inline-flex;
     align-items:center;
     gap:8px;
     color: var(--c-muted);
     text-decoration:none;
   }
   .link-back:hover{ color: var(--c-text); text-decoration:none; }
   
   
   /* =========================================================
      10) Cards / separators
      ========================================================= */
   .card{
     border: 1px solid var(--c-border);
     border-radius: var(--r-xl);
     background: var(--c-surface);
     box-shadow: var(--shadow-sm);
   }
   
   .card--soft{
     background: var(--c-surface-2);
   }
   
   .card__pad{ padding: 14px 14px; }
   .card__pad--lg{ padding: 16px 16px; }
   
   .hr{
     height:1px;
     background: var(--c-border);
     border:0;
     margin: 12px 0;
   }
   
   
   /* =========================================================
      11) Buttons
      ========================================================= */
   .btn{
     appearance:none;
     border: 1px solid var(--c-border);
     background: #fff;
     color: var(--c-text);
     border-radius: 999px;
     padding: 10px 14px;
     font-weight: 650;
     cursor:pointer;
   
     display:inline-flex;
     align-items:center;
     justify-content:center;
     gap:8px;
   
     text-decoration:none;
     user-select:none;
   }
   
   .btn:hover{
     box-shadow: 0 10px 26px rgba(0,0,0,.10);
     text-decoration:none;
   }
   
   .btn:focus{
     outline:none;
     box-shadow: var(--focus);
   }
   
   .btn--primary{
     background: var(--c-yellow);
     border-color: rgba(0,0,0,.10);
   }
   
   .btn--secondary{
     background: var(--c-purple);
     border-color: rgba(0,0,0,.10);
     color:#fff;
   }
   
   .btn--danger{
     background: var(--c-red);
     border-color: rgba(0,0,0,.10);
     color:#fff;
   }
   
   .btn--ghost{
     background: transparent;
   }
   
   .btn--sm{ padding: 7px 10px; font-weight: 650; }
   
   .btn--icon{
     width: 36px;
     height: 36px;
     padding:0;
     border-radius: 999px;
   }
   
   
   /* =========================================================
      12) Chips / pills
      ========================================================= */
   .chip{
     display:inline-flex;
     align-items:center;
     gap:8px;
     padding: 7px 12px;
     border-radius: 999px;
     border: 1px solid var(--c-border);
     background: rgba(255,255,255,.85);
     color: var(--c-text);
     font-weight: 600;
   }
   
   .chip--muted{ color: var(--c-muted); }
   /* .chip--yellow{ background: rgba(255,221,45,.30); border-color: rgba(0,0,0,.10); } */
   /* ===== Strong yellow chips (Today / Cart) ===== */
  .chip--yellow{
    background: var(--brand-yellow) !important;  /* или var(--c-yellow) если хочешь прям ярко */
    color: var(--ink) !important;
    border-color: rgba(0,0,0,.14) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.10);
  }

   .chip--purple{ background: rgba(111,44,255,.14); border-color: rgba(111,44,255,.22); }
   .chip--red{ background: rgba(255,43,71,.12); border-color: rgba(255,43,71,.22); }
   
   
   /* =========================================================
      13) Forms
      ========================================================= */
   .form{
     display:flex;
     flex-direction:column;
     gap:12px;
   }
   
   .field{ display:flex; flex-direction:column; gap:6px; }
   .label{ font-weight: 650; }
   
   .help{
     color: var(--c-muted);
     font-size: 13px;
     line-height: 1.35;
   }
   
   .input, .textarea, .select{
     width:100%;
     border: 1px solid var(--c-border);
     border-radius: var(--r-md);
     padding: 10px 12px;
     font: inherit;
     background: rgba(255,255,255,.92);
   }
   
   .textarea{ resize: vertical; min-height: 120px; }
   
   .input:focus, .textarea:focus, .select:focus{
     outline:none;
     box-shadow: var(--focus);
     border-color: rgba(111,44,255,.35);
   }
   
   .control-row{
     display:flex;
     gap:10px;
     align-items:center;
     flex-wrap:wrap;
   }
   
   .control-row .input--w80{ width:80px; }
   .control-row .input--w240{ width:240px; }
   .control-row .input--w520{ width:min(520px, 100%); }
   .control-row .input--w720{ width:min(720px, 100%); }
   
   
   /* =========================================================
      14) Flash messages
      ========================================================= */
   .flash-stack{
     display:flex;
     flex-direction:column;
     gap:10px;
     margin: 12px 0;
   }
   
   .flash{
     border-radius: var(--r-lg);
     padding: 10px 12px;
     border: 1px solid var(--c-border);
     background: rgba(255,255,255,.90);
   }
   
   .flash--success{ border-color: rgba(0,160,70,.25); background: rgba(0,160,70,.08); }
   .flash--error{ border-color: rgba(255,43,71,.28); background: rgba(255,43,71,.10); }
   .flash--warning{ border-color: rgba(255,221,45,.40); background: rgba(255,221,45,.20); }
   .flash--info{ border-color: rgba(111,44,255,.25); background: rgba(111,44,255,.10); }
   
   
   /* =========================================================
      15) Small utils
      ========================================================= */
   .muted{ color: var(--c-muted); }
   
   
   /* =========================================================
      16) Responsive
      ========================================================= */
   @media (max-width: 720px){
     .page-title{ font-size: 34px; }
     .topbar__inner{ gap:10px; }
     .btn{ padding: 9px 12px; }
   }
   
   
   /* =========================================================
      17) Task “solved” emoji
      ========================================================= */
   .task-item{
     position: relative;
     overflow: visible;
   }
   
   .task-solved-emoji{
     position: absolute;
     right: 26px;
     bottom: 34px;
     font-size: 92px;
     line-height: 1;
     transform: rotate(-10deg);
     filter: drop-shadow(0 18px 26px rgba(0,0,0,.20));
     pointer-events: none;
     z-index: 2;
   }
   
   
   /* =========================================================
      18) Meme overlay
      ========================================================= */
   .meme-overlay{
     position: fixed;
     inset: 0;
     z-index: 99999;
     pointer-events: none;
     display: grid;
     place-items: start center;
     padding-top: 18px;
   }
   
   .meme-overlay__box{
     width: min(560px, 92vw);
     border-radius: 18px;
     overflow: hidden;
     box-shadow: 0 22px 50px rgba(0,0,0,.28);
     background: rgba(255,255,255,.08);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border: 1px solid rgba(255,255,255,.22);
   }
   
   .meme-overlay__label{
     padding: 10px 14px;
     font-weight: 900;
     font-size: 14px;
     letter-spacing: .2px;
     color: rgba(255,255,255,.95);
     background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.10));
   }
   
   .meme-overlay__video{
     display: block;
     width: 100%;
     height: auto;
   }
   
   
   /* =========================================================
      19) Auth buttons sizing (Войти / Выйти одинаковые)
      ========================================================= */
   .btn--auth{
     min-width: 110px;
     height: 40px;
     padding: 0 14px;
     box-sizing: border-box;
   
     display: inline-flex;
     align-items: center;
     justify-content: center;
   
     line-height: 1;
     white-space: nowrap;
     font: inherit;
   }
   
   /* чтобы "Войти" по высоте совпал с ghost-кнопкой с рамкой */
   .btn--secondary.btn--auth{
     border: 1px solid transparent;
   }
   

    /* =========================================================
      20) Логотип ФМШМ
      ========================================================= */

      .brand{
        display:inline-flex;
        align-items:center;
        justify-content:center;
      
        padding: 10px 16px;     
        border-radius: 999px;
      
        font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
        font-weight: 900;
        font-size: 32px;        
        line-height: 1;
      
        letter-spacing: -0.02em;
      
        background: var(--brand-yellow);
        border: 1px solid var(--c-border);
        box-shadow: var(--shadow-sm);
      
        text-decoration: none;

        gap: 12px; 
      } 
      
      .brand__text{
        line-height: 1;
      }
      
      .brand__icon{ width: 46px; height: 46px; color: var(--ink); display:block;}

      /* не подчеркивать бренд никогда */
      .brand,
      .brand:hover,
      .brand:focus,
      .brand:focus-visible{
        text-decoration: none !important;
      }



      /* =========================================================
   21) Topbar: всегда аккуратная, без раздувания по высоте
   - не переносим пункты меню/контролы на новые строки
   - вместо этого даём горизонтальный скролл
   - отдельный "ультра-компакт" для iPhone landscape
   ========================================================= */

.topbar__inner{
  min-width: 0; /* важно для корректного сжатия flex-детей */
}

/* ---- NAV: всегда в одну строку, со скроллом ---- */
.topnav{
  flex: 1 1 auto;
  min-width: 0;

  flex-wrap: nowrap;          /* ключ: НЕ переносить */
  overflow-x: auto;           /* вместо переносов — скролл */
  overflow-y: hidden;
  white-space: nowrap;

  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;      /* Firefox: скрыть скроллбар */
}
.topnav::-webkit-scrollbar{ display:none; } /* WebKit: скрыть скроллбар */

/* чтобы элементы не сжимались в кашу */
.topnav > *{
  flex: 0 0 auto;
}

/* бренд оставляем "липким" слева (очень приятный эффект) */
.brand{
  flex: 0 0 auto;
  position: sticky;
  left: 0;
  z-index: 2;
}

/* ---- RIGHT: тоже не переносим (особенно teacher-mode) ---- */
.topbar__right{
  flex: 0 0 auto;

  flex-wrap: nowrap;          /* ключ: НЕ переносить */
  overflow-x: auto;           /* вместо переносов — скролл */
  overflow-y: hidden;

  max-width: min(520px, 45vw); /* чтобы не отъедало всё у меню */

  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.topbar__right::-webkit-scrollbar{ display:none; }

.topbar__right > *{
  flex: 0 0 auto;
}

/* запретить перенос внутри "row row--wrap" в шапке */
.topbar__right .row--wrap{ flex-wrap: nowrap; }

/* select в шапке НЕ должен быть width:100% */
.topbar__right .select{
  width: auto;
  max-width: 220px;
}

/* ---------------------------------------------------------
   Адаптация размеров (чтобы бренд не был огромным на узких)
   --------------------------------------------------------- */

@media (max-width: 1020px){
  .brand{
    padding: 8px 12px;
    gap: 10px;
    font-size: 26px;
  }
  .brand__icon{ width: 38px; height: 38px; }
}

/* phone portrait */
@media (max-width: 520px){
  .topbar__inner{ padding: 8px 12px; gap: 10px; }

  .brand{
    padding: 7px 10px;
    gap: 8px;
    font-size: 22px;
  }
  .brand__icon{ width: 30px; height: 30px; }

  /* на телефоне оставляем только иконку, чтобы шапка не раздувалась */
  .brand__text{ display: none; }

  .topnav{ gap: 6px; }
  .topnav__link{ padding: 7px 10px; font-size: 15px; }

  .btn--auth{ min-width: 86px; height: 36px; }
  .btn--icon{ width: 32px; height: 32px; }
  .chip{ padding: 6px 10px; font-size: 14px; }
}

/* iPhone landscape / маленькая высота: делаем шапку тонкой */
@media (max-height: 420px) and (orientation: landscape){
  .topbar__inner{ padding: 6px 10px; gap: 8px; }

  .brand__text{ display: none; }
  .brand{
    padding: 6px 8px;
    gap: 8px;
    font-size: 20px;
  }
  .brand__icon{ width: 26px; height: 26px; }

  .topnav__link{ padding: 6px 9px; font-size: 14px; }

  .btn{ padding: 7px 10px; }
  .btn--auth{ min-width: 76px; height: 34px; }
  .btn--icon{ width: 30px; height: 30px; }
  .chip{ padding: 5px 9px; font-size: 13px; }

  /* в landscape можно дать правой части чуть больше места */
  .topbar__right{ max-width: 55vw; }
}







/* ===== Page head: title left, controls right ===== */
.page-head--title-right{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

.page-head__left{ min-width: 240px; }

/* ===== Subject picker: pill like topnav ===== */
.subject-picker{
  position: relative;
}

.subject-picker__form{ margin: 0; }

.subject-picker__select{
  /* reset */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* size like pills */
  height: 40px;
  min-width: 220px;
  padding: 0 44px 0 14px;

  /* EXACT pill */
  border-radius: 999px;
  border: 1px solid var(--c-border);

  /* same saturated yellow as active nav */
  background: var(--brand-yellow);
  color: var(--ink);

  font: inherit;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;

  /* shadow like buttons/nav hover */
  box-shadow: var(--shadow-sm);

  transition: box-shadow .15s ease, transform .15s ease;
}

.subject-picker__select:hover{
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

.subject-picker__select:focus{
  outline: none;
  box-shadow: var(--focus);
  border-color: rgba(111,44,255,.35);
}

/* arrow like native, but consistent */
.subject-picker:after{
  content: "▾";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-weight: 900;
  opacity: .75;
  color: var(--ink);
}


.subject-picker__select{ width: auto; }












/* =========================================================
   TEACHER TOPBAR: 2 rows + divider + centered nav
   ========================================================= */

   .topbar__inner--teacher{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  
  /* верхний ряд: 3 зоны */
  .topbar__row--teacher-top{
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* left / center / right */
    align-items: center;
    column-gap: 14px;
    row-gap: 10px;
  }
  
  /* слоты */
  .topbar__slot{ min-width: 0; }
  .topbar__slot--left{ justify-self: start; }
  .topbar__slot--center{
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .topbar__slot--right{
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  
  /* разделитель между рядами */
  .topbar__divider{
    height: 1px;
    background: var(--c-border);
    border-radius: 999px;
    margin: 2px 0 0;
  }
  
  /* нижний ряд (вкладки) по центру */
  .topbar__inner--teacher .topnav--teacher{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    overflow: visible;
    white-space: normal;
    gap: 10px;
    padding-top: 2px;
  }
  
  /* у преподавателя бренд не липкий */
  .topbar__inner--teacher .brand{
    position: static;
    left: auto;
  }
  
  /* правую часть больше не ограничиваем */
  .topbar__inner--teacher .topbar__right{
    max-width: none;
    overflow: visible;
  }
  
  /* если экран очень узкий — складываем в 2 строки красиво */
  @media (max-width: 720px){
    .topbar__row--teacher-top{
      grid-template-columns: 1fr; /* в столбик */
      justify-items: center;
    }
    .topbar__slot--left,
    .topbar__slot--right{
      justify-self: center;
    }
  }
  
  















  /* =========================================================
   Teacher header (2 rows) + unified pickers
   вставь в конец base.css
   ========================================================= */

/* чтобы включать спец-стили для преподавателя */
body.is-teacher .topbar__inner{
  max-width: none;              /* не ограничиваем ширину у препода */
  padding-left: 24px;
  padding-right: 24px;
}

/* ===== Teacherbar layout ===== */
.teacherbar{
  width: 100%;
}

/* верхний ряд: бренд слева, выбор ученика по центру, действия справа */
.teacherbar__top{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}

.teacherbar__brand{ justify-self: start; }
.teacherbar__center{ justify-self: center; }
.teacherbar__right{
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.teacherbar__divider{
  height: 1px;
  background: var(--c-border);
}

/* нижний ряд: меню по центру */
.topnav--teacher{
  justify-content: center;
  padding: 10px 0;
  gap: 10px;

  flex-wrap: wrap;          /* у препода можно в 2 строки при необходимости */
  overflow: visible;        /* убираем скролл */
  white-space: normal;
}

/* ===== Page head: title left, controls right (если где-то нужно) ===== */
.page-head--with-controls{
  align-items: flex-start;
}

/* =========================================================
   Subject picker (yellow, pill like nav active)
   ========================================================= */
.subject-picker{ position: relative; display: inline-block; }
.subject-picker__form{ margin:0; }

.subject-picker__select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  height: 40px;
  min-width: 220px;
  padding: 0 44px 0 16px;

  border-radius: 999px;
  border: 1px solid var(--c-border);

  background: var(--brand-yellow);
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;

  box-shadow: var(--shadow-sm);
}

.subject-picker__select:focus{
  outline: none;
  box-shadow: var(--focus);
  border-color: rgba(111,44,255,.35);
}

/* стрелка */
.subject-picker:after{
  content: "▾";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-weight: 900;
  opacity: .75;
}

/* =========================================================
   Student picker (fixed size, purple when active, X fixed)
   ========================================================= */
.student-picker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* фиксируем ширину, чтобы не прыгало */
/* 1) центрируем текст в select */
.student-picker__select{
  /* было */
  /* width: 280px; padding: 0 44px 0 16px; ... */

  width: 280px;
  height: 40px;

  /* симметричные паддинги, чтобы текст реально был по центру */
  padding: 0 44px;

  text-align: center;        /* Safari/Chrome */
  text-align-last: center;   /* Firefox/часть браузеров */

  border-radius: 999px;
  border: 1px solid var(--c-border);
  background: rgba(255,255,255,.92);
  color: var(--c-text);
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

/* 2) когда активен (ученик выбран) — фиолетовый фон, БЕЛЫЙ текст */
.student-picker.is-active .student-picker__select{
  background: var(--brand-purple);
  color: #fff;
  border-color: rgba(0,0,0,.10);
}

/* 3) стрелка (твоя псевдо-стрелка) тоже белая при активном */
.student-picker.is-active .student-picker__wrap:after{
  color: #fff;
  opacity: .95;
}


.student-picker__select:focus{
  outline: none;
  box-shadow: var(--focus);
  border-color: rgba(111,44,255,.35);
}

/* стрелка для select */
.student-picker__wrap{
  position: relative;
  display: inline-block;
}
.student-picker__wrap:after{
  content: "▾";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-weight: 900;
  opacity: .75;
}

/* когда ученик выбран — фиолетовый фон и ЧЁРНЫЙ текст (как ты просил) */
.student-picker.is-active .student-picker__select{
  background: var(--brand-purple);
  color: #000;
  border-color: rgba(0,0,0,.10);
}

/* крестик всегда на месте */
.student-picker__clear{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  background: rgba(255,255,255,.85);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  line-height: 1;
}

.student-picker__clear:hover{
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

/* неактивный крестик, когда ученик не выбран */
.student-picker__clear:disabled{
  opacity: .35;
  cursor: default;
  box-shadow: none;
}







/* чтобы меню не обрезалось шапкой */
body.is-teacher .topbar{ overflow: visible; }

.student-dd{
  position: relative;
}

/* убираем стандартный маркер summary */
.student-dd__btn{
  list-style: none;
}
.student-dd__btn::-webkit-details-marker{ display:none; }

/* сама “кнопка” выбора ученика */
.student-dd__btn{
  width: 280px;
  height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center; /* центр текста */

  padding: 0 44px; /* место под стрелку справа симметрично */
  border-radius: 999px;
  border: 1px solid var(--c-border);

  background: rgba(255,255,255,.92);
  color: var(--c-text);
  font-weight: 800;

  cursor: pointer;
  box-shadow: var(--shadow-sm);

  position: relative;
}

/* стрелка справа */
.student-dd__btn:after{
  content: "▾";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 900;
  opacity: .75;
}

/* активный (ученик выбран): фиолетовый фон, БЕЛЫЙ текст и БЕЛАЯ стрелка */
.student-picker.is-active .student-dd__btn{
  background: var(--brand-purple);
  color: #fff;
  border-color: rgba(0,0,0,.10);
}
.student-picker.is-active .student-dd__btn:after{
  color: #fff;
  opacity: .95;
}

/* выпадающее меню — ВСЕГДА вниз */
.student-dd__menu{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 280px;

  background: rgba(255,255,255,.96);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);

  padding: 6px;
  z-index: 2000;

  max-height: min(60vh, 420px);
  overflow: auto;
}

/* пункты */
.student-dd__item{
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 12px;
  padding: 10px 12px;

  font: inherit;
  font-weight: 700;
  cursor: pointer;

  text-align: center; /* если хочешь по центру */
}

.student-dd__item:hover{
  background: rgba(111,44,255,.10);
}

/* когда details закрыт — меню не видно (на всякий) */
.student-dd:not([open]) .student-dd__menu{ display:none; }





/*Выпадающее вниз поле с учениками для учителя*/
.student-dd__btn{
  display:flex;
  align-items:center;
  gap:10px;
}

.student-dd__menu .student-dd__item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  text-align:left;
}

.student-dd__avatar{
  width:26px;
  height:26px;
  border-radius:999px;
  overflow:hidden;
  background: rgba(0,0,0,.06);
  flex: 0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.student-dd__avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.student-dd__avatar-stub{
  font-size:14px;
  line-height:1;
}

.student-dd__label{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}

.student-dd__name{
  font-weight:900;
}

.student-dd__username{
  font-size:12px;
  opacity:.65;
}

.student-dd__item.is-selected{
  background: rgba(0,0,0,.05);
}









/* QA button: plain white */
.qa-summary--plain{
  background: rgba(255,255,255,.92);
  border-color: rgba(18,18,18,.14);
  color: var(--c-text);
}

.qa-summary--plain:hover{
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}












.toast-stack{
  position: fixed;
  right: 16px;
  top: 86px;               /* чтобы не налезало на topbar */
  z-index: 9999;

  width: min(380px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 10px;

  pointer-events: none;    /* как у тг: не мешает кликам */
}

.toast{
  pointer-events: none;
  display: flex;
  gap: 12px;
  align-items: center;

  padding: 10px 12px;
  border-radius: 16px;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(18,18,18,.12);
  box-shadow: 0 16px 42px rgba(0,0,0,.14);
  backdrop-filter: blur(10px);

  animation: toast-in .18s ease-out both;
}

@keyframes toast-in{
  from { transform: translateY(-6px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.toast.is-leaving{
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease;
}

.toast__avatar{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0,0,0,.06);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.toast__avatar-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.toast__avatar-fallback{
  font-weight: 900;
}

.toast__body{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.toast__title{
  line-height: 1.1;
}

.toast__text{
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.toast__task{
  color: rgba(18,18,18,.70);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
}