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

   @supports (scrollbar-gutter: stable) {
     html { overflow-y: auto; scrollbar-gutter: stable; overflow-x: hidden; }
   }
   body { overflow-x: hidden; }
   
   
   /* =========================================================
      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: 25px;
   
     /* --- 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,
       "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     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: 1280px;
     min-width: 368px;
     margin: 0 auto;
     padding: 18px 16px 64px;
     overflow-x: hidden; /* без горизонтального ползунка */
     box-sizing: border-box;
   }
   
   
   /* =========================================================
      6) Topbar / Navigation
      ========================================================= */
   .topbar{
     position: sticky;
     top: 0;
     z-index: 50;
     height: 56px;
     background: rgba(255,255,255,1);
     backdrop-filter: blur(10px);
     border-bottom: 1px solid var(--c-border);
   }
   
   .topbar__inner{
     max-width: 1280px;
     margin: 0 auto;
     padding: 10px 16px;
     display:flex;
     gap:14px;
     align-items:center;
     flex-wrap: nowrap; /* never wrap to 2 rows */
   }

  /* =========================================================
     Mobile off-canvas nav (ChatGPT-like)
     ========================================================= */
  .mnav__toggle,
  .mnav__brand{ display:none; }

  .mnav-lock{ overflow: hidden; }

  .mnav{
    position: fixed;
    inset: 0;
    z-index: 200;
  }
  .mnav__backdrop{
    position:absolute;
    inset:0;
    background: rgba(0,0,0,0.32);
    opacity: 0;
    transition: opacity .25s ease-out;
  }
  .mnav__drawer{
    position:absolute;
    top:0; bottom:0; left:0;
    width: min(82vw, 300px);
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    border-right: 1px solid rgba(0,0,0,0.10);
    box-shadow: 0 18px 60px rgba(0,0,0,0.22);
    transform: translateX(-102%);
    opacity: 0;
    transition: transform .25s ease-out, opacity .25s ease-out;
    display:flex;
    flex-direction:column;
  }
  html.invert-images .mnav__drawer{
    background: rgba(30, 30, 30, 0.92);
    border-right-color: rgba(255,255,255,0.10);
  }

  .mnav.is-open .mnav__backdrop{ opacity: 1; transition: opacity .25s ease-out; }
  .mnav.is-open .mnav__drawer{ transform: translateX(0); opacity: 1; }

  .mnav__drawer-head{
    height: 56px;
    display:flex;
    align-items:center;
    gap:10px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
  }
  html.invert-images .mnav__drawer-head{ border-bottom-color: rgba(255,255,255,0.10); }

  .mnav__close{
    width: 40px; height: 40px;
    border-radius: 999px;
    border: 0;
    background: rgba(0,0,0,0);
    cursor:pointer;
    font-weight: 900;
  }
  html.invert-images .mnav__close{ background: rgba(255,255,255,0); color: #fff; }

  .mnav__drawer-brand{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    font-weight: 950;
  }
  .mnav__drawer-brand:hover{ text-decoration:none; }
  .mnav__drawer-brand .mnav__brand-labels{ margin-top: 1px; }

  .mnav__brand-icon{
    width: 40px;
    height: 40px;
  }
  .mnav__brand-labels{
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    min-width: 0;
  }
  .mnav__brand-text{
    font-size: 18px;
    letter-spacing: .2px;
  }
  html.invert-images .mnav__brand-text{ color:#fff; }
  .mnav__brand-subtitle{
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgba(18, 18, 18, 0.65);
    line-height: 1.2;
    white-space: nowrap;
  }
  html.invert-images .mnav__brand-subtitle{ color: rgba(255,255,255,0.45); }

  .mnav__drawer-body{
    padding: 10px 0;
    overflow:auto;
  }

  .mnav__section{
    margin: 0 0 10px;
  }
  .mnav__section-title{
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .70;
    margin-left: 6px;
    padding: 8px 10px 0 10px;
  }
  html.invert-images .mnav__section-title{ color: rgba(255,255,255,0.80); }

  .mnav__link{
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 10px 0;
    border-radius: 14px;
    text-decoration:none;
    transition: background .15s ease;
  }
  .mnav__link:hover{ background: rgba(0,0,0,0.05); text-decoration:none; }
  html.invert-images .mnav__link:hover{ background: rgba(255,255,255,0.08); }

  .mnav__link-icon{
    width: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    opacity: .85;
    color: inherit;
  }
  .mnav__link-icon svg{
    display: block;
    flex-shrink: 0;
  }
  .mnav__link:hover .mnav__link-icon{ opacity: 1; }
  .mnav__link-text{ min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .mnav__link-title{ display:block; font-weight: 400; }

  /* Single shared tooltip for sidebar links (position: fixed so it isn’t clipped) */
  .snav-link-tooltip{
    position: fixed;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    background: rgba(18,18,18,0.88);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease;
    z-index: 100;
  }
  .snav-link-tooltip.is-visible{ opacity: 1; }
  html.invert-images .snav-link-tooltip{
    background: rgba(233,233,233,0.92);
    color: #121212;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }

  .mnav__dot{
    display:inline-block;
    width:8px; height:8px;
    border-radius:999px;
    background: var(--c-red);
    vertical-align: middle;
    margin-left: 8px;
  }

  .mnav__toggle-row{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px;
    border-radius: 14px;
    cursor: pointer;
    transition: background .15s ease;
  }
  .mnav__toggle-row:hover{ background: rgba(0,0,0,0.05); }
  html.invert-images .mnav__toggle-row:hover{ background: rgba(255,255,255,0.08); }
  .mnav__toggle-icon{
    width: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    opacity: .85;
  }
  .mnav__toggle-icon svg{
    display: block;
    flex-shrink: 0;
  }
  .mnav__toggle-text{ font-weight: 400; min-width: 0; white-space: nowrap; }
  .mnav__toggle-row .switch{ flex-shrink: 0; }

  /* Button inside toggle-row (e.g. режим редактирования) */
  .mnav__toggle-button{
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .mnav__drawer-foot{
    margin-top:auto;
    padding: 12px;
    border-top: 1px solid rgba(0,0,0,0.08);
  }
  html.invert-images .mnav__drawer-foot{ border-top-color: rgba(255,255,255,0.10); }

  /* Мобильное меню (drawer): уменьшенные шрифты */
  .mnav__drawer .mnav__section-title{ font-size: 11px; padding: 6px 10px; }
  .mnav__drawer .mnav__link{ font-size: 14px; padding: 8px 10px 8px 0; }
  .mnav__drawer .mnav__link-icon{ font-size: 16px; }
  .mnav__drawer .mnav__link-title{ font-size: 14px; }
  .mnav__drawer .mnav__toggle-row{ font-size: 14px; padding: 8px 10px; }
  .mnav__drawer .mnav__toggle-icon{ font-size: 16px; }
  .mnav__drawer .mnav__toggle-text{ font-size: 14px; }

  .mnav__account{
    display:flex;
    align-items:center;
    gap:12px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(0,0,0,0.03);
    text-decoration:none;
  }
  html.invert-images .mnav__account{ background: rgba(255,255,255,0.06); }
  .mnav__account:hover{ text-decoration:none; background: rgba(0,0,0,0.05); }
  html.invert-images .mnav__account:hover{ background: rgba(255,255,255,0.08); }
  /* В drawer — как в боковой панели (snav__account) */
  .mnav__drawer .mnav__account{
    padding: 10px 0;
    background: transparent;
  }
  html.invert-images .mnav__drawer .mnav__account{ background: transparent; }
  .mnav__drawer .mnav__account:hover{ background: rgba(0,0,0,0.05); }
  html.invert-images .mnav__drawer .mnav__account:hover{ background: rgba(255,255,255,0.08); }
  .mnav__drawer .mnav__account-left{
    width: 52px;
    min-width: 52px;
    flex-shrink: 0;
    padding: 0 6px;
    box-sizing: border-box;
  }
  .mnav__drawer .mnav__account-mid{ min-width: 0; }
  .mnav__drawer .mnav__account-role{ font-size: 12px; }
  .mnav__avatar{
    width: 40px;
    height: 40px;
    border-radius: 999px;
    object-fit: cover;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight: 950;
    background: rgba(0,0,0,0.08);
  }
  html.invert-images .mnav__avatar{ background: rgba(255,255,255,0.12); color:#fff; }
  .mnav__avatar--stub{ font-size: 16px; }

  .mnav__account-name{ font-weight: 950; }
  html.invert-images .mnav__account-name{ color:#fff; }

  /* legacy (removed from template): .mnav__account-actions */
  .mnav__account-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.10);
    background: rgba(255,255,255,0.55);
    font-weight: 900;
    text-decoration:none;
    cursor:pointer;
  }
  html.invert-images .mnav__account-link{
    border-color: rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color:#fff;
  }
  .mnav__logout{ background: rgba(255,43,71,0.10); border-color: rgba(255,43,71,0.25); }

  /* Mobile header: hide desktop mega menu, show burger */
  @media (max-width: 720px){
    .mnav__toggle,
    .mnav__brand{ display:inline-flex; }

    .mnav__toggle{
      width: 40px;
      height: 40px;
      border-radius: 999px;
      border: 1px solid rgba(0,0,0,0);
      background: rgba(255,255,255,0.70);
      cursor:pointer;
      align-items:center;
      justify-content:center;
      flex: 0 0 auto;
    }
    html.invert-images .mnav__toggle{
      background: rgba(28,22,32,1);
      border-color: rgba(255,255,255,0);
      color:#fff;
    }
    .mnav__burger{
      width: 18px;
      height: 12px;
      position: relative;
      display:block;
    }
    .mnav__burger::before,
    .mnav__burger::after,
    .mnav__burger{
      background: currentColor;
    }
    .mnav__burger::before,
    .mnav__burger::after{
      content:"";
      position:absolute;
      left:0; right:0;
      height: 2px;
      border-radius: 999px;
    }
    .mnav__burger{ height:2px; border-radius:999px; }
    .mnav__burger::before{ top:-5px; }
    .mnav__burger::after{ top:5px; }

    .mnav__brand{
      gap: 10px;
      align-items:center;
      text-decoration:none;
      user-select:none;
      flex: 0 1 auto;
      min-width: 0;
    }
    .mnav__brand-text{ font-weight: 950; font-size: 18px; }

    /* Hide the big menu rows on mobile; keep teacherbar visible for teachers */
    .topbar__left{ display:none !important; }

    /* On mobile, move settings into the drawer */
    .topbar .switch{ display:none !important; }

    /* Prevent dropdown menu “jump” states on resize/touch.
       Profile/edit/logout actions live in the drawer footer. */
    .profile-dd__menu{ display:none !important; }
  }

  /* =========================================================
     Desktop left sidebar (students only) — ChatGPT-like layout
     Rail (narrow strip) + slide-out sidebar; no topbar on desktop
     ========================================================= */
  :root{
    --snav-rail-width: 52px;
    --snav-width: 240px;
    --snav-icon-column: 52px;
    --snav-icon-inset: 12px;
  }

  .snav-rail{
    display: none;
  }
  .snav{
    display:none;
  }

  /* One slide panel = rail + sidebar (like ChatGPT) */
  .snav-slide{
    display: none;
  }
  @media (min-width: 751px){
    /* Для пользователей с левым сайдбаром (ученик и учитель)
       на десктопе полностью прячем верхний topbar. */
    body.has-snav .topbar{
      display: none;
    }
    body.has-snav .snav-slide{
      display: flex;
      flex-direction: column;
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
      width: var(--snav-rail-width);
      z-index: 50;
      overflow-x: hidden;
      overflow-y: visible;
      transition: width 0.3s ease-out;
      background: rgba(255,255,255,0.85);
      backdrop-filter: blur(12px);
      border-right: 1px solid rgba(0,0,0,0.08);
    }
    body.has-snav:not(.snav-collapsed) .snav-slide{
      width: calc(var(--snav-rail-width) + var(--snav-width));
    }
    html.invert-images body.has-snav .snav-slide{
      background: rgba(30,30,30,0.85);
      border-right-color: rgba(255,255,255,0.10);
    }
    body.has-snav .snav__head{
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 52px;
      min-height: 52px;
      flex-shrink: 0;
      min-width: 0;
      padding: 0;
      background: rgba(255,255,255,0.85);
      backdrop-filter: blur(12px);
    }
    html.invert-images body.has-snav .snav__head{
      background: rgba(30,30,30,0.85);
    }
    body.has-snav .snav__head-right{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex: 1;
      min-width: 0;
      padding: 0 14px 0 8px;
    }
    body.has-snav .snav__head-right{
      transition: opacity 0.3s ease-out, max-width 0.3s ease-out;
    }
    body.has-snav.snav-collapsed.snav-js .snav__head-right{
      animation: snav-fade-out-shrink 0.3s ease-out forwards;
      overflow: hidden;
    }
    .snav-rail__btn-wrap{
      position: relative;
      display: flex;
      align-items: center;
      width: var(--snav-rail-width);
      min-width: var(--snav-rail-width);
      flex-shrink: 0;
      justify-content: center;
    }
    .snav-rail__logo-link{
      display: none;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      border-radius: 12px;
      flex-shrink: 0;
      text-decoration: none;
      color: inherit;
      position: relative;
      z-index: 2;
      cursor: pointer;
      transition: background .15s ease;
    }
    .snav-rail__logo-link:hover{
      background: rgba(0,0,0,0.06);
    }
    html.invert-images .snav-rail__logo-link:hover{
      background: rgba(255,255,255,0.08);
    }
    body.has-snav:not(.snav-collapsed) .snav-rail__logo-link{
      display: flex;
    }
    body.has-snav:not(.snav-collapsed) .snav-rail__btn{
      display: none;
    }
    body.has-snav:not(.snav-collapsed) .snav-rail__btn-wrap:hover .snav-rail__tooltip{
      opacity: 0;
    }
    .snav-rail__tooltip{
      position: absolute;
      left: calc(100% + 10px);
      top: 50%;
      transform: translateY(-50%);
      padding: 6px 10px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      white-space: nowrap;
      background: rgba(18,18,18,0.88);
      color: #fff;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      opacity: 0;
      pointer-events: none;
      transition: opacity .12s ease;
      z-index: 60;
    }
    .snav-rail__btn-wrap:hover .snav-rail__tooltip{
      opacity: 1;
    }
    html.invert-images .snav-rail__tooltip{
      background: rgba(233,233,233,0.92);
      color: #121212;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    .snav-rail__btn{
      appearance: none;
      border: 0;
      background: transparent;
      cursor: pointer;
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .15s ease;
    }
    .snav-rail__btn:hover,
    .snav-rail__btn:focus-visible{
      background: rgba(0,0,0,0.06);
    }
    html.invert-images .snav-rail__btn:hover,
    html.invert-images .snav-rail__btn:focus-visible{
      background: rgba(255,255,255,0.08);
    }
    .snav-rail__icon-wrap{
      position: relative;
      width: 40px;
      height: 40px;
      display: block;
      flex-shrink: 0;
    }
    .snav-rail__icon{
      width: 100%;
      height: 100%;
      display: block;
      transition: opacity .12s ease;
    }
    .snav-rail__icon-hover{
      position: absolute;
      left: 50%;
      top: 50%;
      width: 26px;
      height: 26px;
      margin-left: -13px;
      margin-top: -13px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .12s ease;
    }
    .snav-rail__btn:hover .snav-rail__icon-hover,
    .snav-rail__btn:focus-visible .snav-rail__icon-hover{
      opacity: 1;
    }
    .snav-rail__btn:hover .snav-rail__icon,
    .snav-rail__btn:focus-visible .snav-rail__icon{
      opacity: 0;
    }
    html.invert-images .snav-rail__icon{
      filter: invert(1) brightness(0.914);
    }
    html.invert-images .snav-rail__icon-hover{
      color: rgba(233,233,233,1);
    }
  }

  body.has-snav .snav{
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--snav-width);
    padding: 0;
    z-index: 40;
    overflow: hidden;
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(12px);
    border-right: 1px solid rgba(0,0,0,0.08);
    transform: translateX(0);
    transition: transform .18s ease;
  }
  @media (min-width: 751px){
    body.has-snav .snav{
      position: relative;
      left: auto;
      top: auto;
      bottom: auto;
      width: 100%;
      flex: 1 1 auto;
      min-height: 0;
      transform: none;
      overflow: visible;
      border-right: none;
      background: transparent;
    }
  }
  html.invert-images body.has-snav .snav{
    background: rgba(30,30,30,0.50);
    border-right-color: rgba(255,255,255,0.10);
  }
  @media (min-width: 751px){
    html.invert-images body.has-snav .snav{
      background: transparent;
      border-right: none;
    }
  }

  body.has-snav.snav-collapsed .snav{
    transform: translateX(-102%);
  }
  @media (min-width: 751px){
    body.has-snav.snav-collapsed .snav{
      transform: none;
    }
  }

  /* Sidebar header (brand + close button) */
  .snav__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
  }
  html.invert-images .snav__head{
    background: rgba(30,30,30,0.85);
  }
  .snav__head-brand{
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-weight: 900;
    font-size: 18px;
    letter-spacing: -0.02em;
    text-decoration: none;
    color: inherit;
  }
  .snav__head-brand:hover{ text-decoration: none; color: inherit; }
  .snav__head-text{
    font-size: 21px;
  }
  .snav__head-subtitle{
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgba(18, 18, 18, 0.65);
    line-height: 1.2;
    white-space: nowrap;
  }
  html.invert-images .snav__head-subtitle{ color: rgba(255,255,255,0.45); }
  .snav__head-icon{
    width: 28px;
    height: 28px;
    display: block;
  }
  html.invert-images .snav__head-icon{
    filter: invert(1) brightness(0.914);
  }
  .snav__close{
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    transition: background .15s ease;
  }
  .snav__close:hover,
  .snav__close:focus-visible{
    background: rgba(0,0,0,0.06);
  }
  html.invert-images .snav__close:hover,
  html.invert-images .snav__close:focus-visible{
    background: rgba(255,255,255,0.08);
  }

  body.has-snav .page{
    max-width: 1280px;
    margin: 0 auto;
    padding-left: calc(var(--snav-width) + 16px);
    padding-right: 16px;
  }
  @media (min-width: 751px){
    body.has-snav .page{
      padding-left: calc(var(--snav-rail-width) + 16px);
    }
    body.has-snav:not(.snav-collapsed) .page{
      padding-left: calc(var(--snav-rail-width) + var(--snav-width) + 16px);
    }
  }
  body.has-snav.snav-collapsed .page{
    padding-left: 16px;
  }
  @media (min-width: 751px){
    body.has-snav.snav-collapsed .page{
      padding-left: calc(var(--snav-rail-width) + 16px);
    }
  }

  /* Переменные для фиксированных элементов (например, нижняя панель чата), чтобы сдвигать их вместе с контентом */
  body.has-snav{
    --snav-fixed-inset-left: 0;
    --snav-fixed-inset-right: 0;
  }
  @media (min-width: 751px){
    body.has-snav.snav-collapsed{
      --snav-fixed-inset-left: calc(var(--snav-rail-width) + 16px);
      --snav-fixed-inset-right: 16px;
    }
    body.has-snav:not(.snav-collapsed){
      --snav-fixed-inset-left: calc(var(--snav-rail-width) + var(--snav-width) + 16px);
      --snav-fixed-inset-right: 16px;
    }
  }

  /* legacy toggle (was in topbar) — hidden when using rail */
  .snav__toggle{
    display:none !important;
  }

  /* sidebar contents: reuse mnav blocks but adjust sizing */
  body.has-snav .mnav__nav{ padding: 0; }
  body.has-snav .mnav__section-title{
    font-size: 10px;
    margin-left: 6px;
    padding: 8px 10px 0 10px;
  }
  body.has-snav .mnav__toggle-row{
    margin-top: 0;
    padding: 10px 0;
    min-height: 44px;
  }
  body.has-snav .snav .mnav__toggle-icon{
    width: var(--snav-icon-column);
    min-width: var(--snav-icon-column);
    padding-left: 0;
    box-sizing: border-box;
  }

  /* Collapsed sidebar: same left padding + narrower icon column; icon stays at same pixel position */
  @media (min-width: 751px){
    /* When collapsed without .snav-js (initial load): instant hide, no animation */
    body.has-snav.snav-collapsed:not(.snav-js) .snav .mnav__section-title{
      opacity: 0;
      visibility: hidden;
    }
    body.has-snav.snav-collapsed:not(.snav-js) .snav .mnav__section + .mnav__section{
      opacity: 0;
      max-height: 0;
      overflow: hidden;
    }
    body.has-snav.snav-collapsed:not(.snav-js) .snav .mnav__link-text{
      opacity: 0;
      max-width: 0;
      min-width: 0;
      overflow: hidden;
    }
    body.has-snav.snav-collapsed:not(.snav-js) .snav__account .snav__account-mid{
      opacity: 0;
      max-width: 0;
      min-width: 0;
      overflow: hidden;
    }
    body.has-snav.snav-collapsed:not(.snav-js) .snav__head-right{
      opacity: 0;
      max-width: 0;
      overflow: hidden;
    }
    /* When collapsed with .snav-js (user closed): play fade-out animation */
    body.has-snav.snav-collapsed.snav-js .snav .mnav__section-title{
      animation: snav-fade-out 0.3s ease-out forwards;
      visibility: hidden;
      transition: visibility 0s linear 0.3s;
    }
    body.has-snav.snav-collapsed.snav-js .snav .mnav__section + .mnav__section{
      animation: snav-fade-out-section 0.3s ease-out forwards;
      overflow: hidden;
    }
    body.has-snav:not(.snav-collapsed) .snav .mnav__section:nth-child(n+2){
      max-height: 400px;
    }
    @keyframes snav-section-fade{
      from{ opacity: 0; }
      to{ opacity: 1; }
    }
    @keyframes snav-section-fade-title{
      from{ opacity: 0; }
      to{ opacity: .70; }
    }
    @keyframes snav-fade-out{
      from{ opacity: 1; }
      to{ opacity: 0; }
    }
    @keyframes snav-fade-out-shrink{
      from{ opacity: 1; max-width: 260px; }
      to{ opacity: 0; max-width: 0; }
    }
    @keyframes snav-fade-out-section{
      from{ opacity: 1; max-height: 400px; }
      to{ opacity: 0; max-height: 0; }
    }
    body.has-snav:not(.snav-collapsed) .snav .mnav__section:nth-child(2){
      opacity: 0;
      animation: snav-section-fade 0.3s ease-out forwards;
      animation-fill-mode: both;
      animation-delay: 0.04s;
    }
    body.has-snav:not(.snav-collapsed) .snav .mnav__section:nth-child(3){
      opacity: 0;
      animation: snav-section-fade 0.3s ease-out forwards;
      animation-fill-mode: both;
      animation-delay: 0.08s;
    }
    body.has-snav:not(.snav-collapsed) .snav .mnav__section:nth-child(4){
      opacity: 0;
      animation: snav-section-fade 0.3s ease-out forwards;
      animation-fill-mode: both;
      animation-delay: 0.11s;
    }
    body.has-snav:not(.snav-collapsed) .snav .mnav__section:nth-child(1) .mnav__section-title{
      opacity: 0;
      animation: snav-section-fade-title 0.3s ease-out forwards;
      animation-fill-mode: both;
      animation-delay: 0s;
    }
    body.has-snav:not(.snav-collapsed) .snav .mnav__section:nth-child(1) .mnav__link:nth-child(2) .mnav__link-text{
      opacity: 0;
      animation: snav-section-fade 0.3s ease-out forwards;
      animation-fill-mode: both;
      animation-delay: 0.03s;
    }
    body.has-snav:not(.snav-collapsed) .snav .mnav__section:nth-child(1) .mnav__link:nth-child(3) .mnav__link-text{
      opacity: 0;
      animation: snav-section-fade 0.3s ease-out forwards;
      animation-fill-mode: both;
      animation-delay: 0.06s;
    }
    body.has-snav:not(.snav-collapsed) .snav .mnav__section:nth-child(1) .mnav__link:nth-child(4) .mnav__link-text{
      opacity: 0;
      animation: snav-section-fade 0.3s ease-out forwards;
      animation-fill-mode: both;
      animation-delay: 0.09s;
    }
    body.has-snav:not(.snav-collapsed) .snav .mnav__section:nth-child(1) .mnav__link:nth-child(5) .mnav__link-text{
      opacity: 0;
      animation: snav-section-fade 0.3s ease-out forwards;
      animation-fill-mode: both;
      animation-delay: 0.12s;
    }
    body.has-snav:not(.snav-collapsed) .snav__head-text,
    body.has-snav:not(.snav-collapsed) .snav__head-subtitle{
      opacity: 0;
      animation: snav-section-fade 0.3s ease-out forwards;
      animation-fill-mode: both;
      animation-delay: 0.02s;
    }
    body.has-snav:not(.snav-collapsed) .snav .mnav__link-text{
      max-width: 260px;
    }
    body.has-snav.snav-collapsed.snav-js .snav .mnav__link-text{
      animation: snav-fade-out-shrink 0.3s ease-out forwards;
      min-width: 0;
      overflow: hidden;
    }
    body.has-snav.snav-collapsed .snav__inner{
      padding: 0 var(--snav-icon-inset) 0 var(--snav-icon-inset);
      padding-right: 0;
      padding-left: 0;
      gap: 0;
    }
    body.has-snav.snav-collapsed .snav .mnav__link-icon{
      width: var(--snav-icon-column);
      min-width: var(--snav-icon-column);
    }
    body.has-snav.snav-collapsed .snav__account{
      width: 52px;
    }
    body.has-snav:not(.snav-collapsed) .snav__account .snav__account-mid{
      max-width: 260px;
      opacity: 0;
      animation: snav-section-fade 0.3s ease-out forwards;
      animation-fill-mode: both;
      animation-delay: 0.14s;
    }
    body.has-snav.snav-collapsed.snav-js .snav__account .snav__account-mid{
      animation: snav-fade-out-shrink 0.3s ease-out forwards;
      min-width: 0;
      overflow: hidden;
    }
  }

  .snav__inner{
    min-height: 100%;
    display:flex;
    flex-direction:column;
    gap: 12px;
    padding: 0;
    overflow: visible;
    flex: 1 1 auto;
    min-height: 0;
  }
  .snav__scroll{
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 0;
    padding-bottom: 8px;
  }
  /* Sidebar: fixed icon column so icons don't jump when open/close */
  @media (min-width: 751px){
    body.has-snav .snav__inner{
      padding-left: 0;
      padding-right: 0;
    }
    body.has-snav .snav .mnav__link{
      padding: 10px 0;
      min-height: 44px;
    }
    body.has-snav .snav .mnav__link-icon{
      width: var(--snav-icon-column);
      min-width: var(--snav-icon-column);
      flex-shrink: 0;
      padding-left: 0px;
      box-sizing: border-box;
    }
  }
  .snav__sections{
    flex: 1 1 auto;
  }
  .snav__teacher{
    padding: 10px 0 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .snav__account{
    display:flex;
    align-items:center;
    gap: 12px;
    padding: 10px 0 10px 0;
    border-radius: 16px;
    background: transparent;
    text-decoration:none;
  }
  .snav__account-left{
    width: 52px;
    min-width: 52px;
    flex-shrink: 0;
    margin-left: 0;
    margin-right: 0;
    padding-left: 6px;
    padding-right: 6px;
    box-sizing: border-box;
  }
  body.has-snav .snav__account:hover{ background: rgba(0,0,0,0.05); text-decoration:none; }
  html.invert-images body.has-snav .snav__account{
    background: transparent;
  }
  html.invert-images body.has-snav .snav__account:hover{
    background: rgba(255,255,255,0.08);
  }
  .snav__avatar{
    width: 40px;
    min-width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 999px;
    object-fit: cover;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight: 950;
    background: rgba(0,0,0,0.08);
  }
  html.invert-images body.has-snav .snav__avatar{
    background: rgba(255,255,255,0.12);
    color: #fff;
  }
  .snav__avatar--stub{ font-size: 16px; }
  .snav__account-name{
    font-weight: 950;
    width: 141px;
  }
  html.invert-images body.has-snav .snav__account-name{ color: #fff; }

  /* hide slide panel on small screens (mobile: topbar + drawer) */
  @media (max-width: 750px){
    body.has-snav .snav-slide{ display: none; }
    body.has-snav .snav{ display: none; }
    body.has-snav .page{ padding-left: 16px; }
    body.has-snav .topbar{ display: block; }
    /* Only minimal topbar for students: burger + ФМШМ; no topbar__left/right (no intermediate “Профиль Редактировать Выйти” row) */
    body.has-snav .topbar__left,
    body.has-snav .topbar__right{ display: none !important; }
    body.has-snav .mnav__toggle,
    body.has-snav .mnav__brand{ display: inline-flex !important; }
    /* Один вид топбара: фиксированные размеры, без скачков на 637px/720px/landscape */
    body.has-snav .topbar__inner{
      padding: 8px 14px !important;
      gap: 10px !important;
      min-height: 56px !important;
      box-sizing: border-box;
    }
    body.has-snav .mnav__toggle{
      width: 40px; height: 40px;
      border-radius: 999px;
      border: 1px solid rgba(0,0,0,0);
      background: rgba(255,255,255,0.70);
      cursor: pointer;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
    }
    html.invert-images body.has-snav .mnav__toggle{
      background: rgba(28,22,32,1);
      border-color: rgba(255,255,255,0);
      color: #fff;
    }
    body.has-snav .mnav__brand{
      gap: 10px;
      align-items: center;
      text-decoration: none;
      user-select: none;
      flex: 0 1 auto;
      min-width: 0;
    }
    body.has-snav .mnav__brand-text{ font-weight: 950; font-size: 18px; }
    body.has-snav .mnav__burger{
      width: 18px; height: 12px;
      position: relative;
      display: block;
    }
    body.has-snav .mnav__burger::before,
    body.has-snav .mnav__burger::after,
    body.has-snav .mnav__burger{ background: currentColor; }
    body.has-snav .mnav__burger::before,
    body.has-snav .mnav__burger::after{
      content: "";
      position: absolute;
      left: 0; right: 0;
      height: 2px;
      border-radius: 999px;
    }
    body.has-snav .mnav__burger{ height: 2px; border-radius: 999px; }
    body.has-snav .mnav__burger::before{ top: -5px; }
    body.has-snav .mnav__burger::after{ top: 5px; }
  }

   .topbar__left{
     display:flex;
     gap: 14px;
     align-items:center;
     min-width: 0;
     flex-wrap: nowrap; /* keep in one row */
   }
   
   .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;
   }

   /* =========================================================
      Stripe-like top menu (adapted)
      ========================================================= */
   .stripe-menu{
     display:flex;
     gap: 6px;
     align-items:center;
     flex-wrap: nowrap; /* keep tabs in one row */
     position: relative;
     z-index: 60;
     font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
   }

   .stripe-menu .menu-item{
     position: relative;
     display:flex;
     align-items:center;
   }

   /* Hover-bridge: keeps dropdown open while moving mouse down */
   .stripe-menu .menu-item::after{
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     top: 100%;
     height: 14px;
     /* invisible, but participates in hover hit-testing */
     background: transparent;
   }

   .stripe-menu .menu-text{
     appearance: none;
     border: 0;
     background: transparent;
     cursor: pointer;

     border-radius: 999px;
     padding: 8px 12px;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-weight: 850;
     color: rgba(18,18,18,.78);
     transition: background .15s ease, color .15s ease, box-shadow .15s ease;
     user-select: none;
     white-space: nowrap;
   }

   /* Night theme (invert-images): pills in calm dark palette */
   html.invert-images .stripe-menu .menu-text{
     background: #3E3C3D;
     color: #E9E9E9;
     border: 1px solid rgba(255,255,255,.10);
   }

   .stripe-menu .menu-item:hover > .menu-text,
   .stripe-menu .menu-item.is-open > .menu-text,
   .stripe-menu .menu-item:focus-within > .menu-text{
     background: var(--brand-purple);
     color: #fff;
     box-shadow: 0 10px 26px rgba(0,0,0,.10);
   }

   html.invert-images .stripe-menu .menu-item:hover > .menu-text,
   html.invert-images .stripe-menu .menu-item.is-open > .menu-text,
   html.invert-images .stripe-menu .menu-item:focus-within > .menu-text{
     background: #E9E9E9;
     color: #3E3C3D;
   }

   .stripe-menu .menu-item.is-active > .menu-text{
     background: var(--brand-yellow);
     color: var(--ink);
   }
   .stripe-menu .menu-item.is-active:hover > .menu-text,
   .stripe-menu .menu-item.is-active.is-open > .menu-text,
   .stripe-menu .menu-item.is-active:focus-within > .menu-text{
     background: var(--brand-yellow);
     color: var(--ink);
   }

   html.invert-images .stripe-menu .menu-item.is-active > .menu-text,
   html.invert-images .stripe-menu .menu-item.is-active:hover > .menu-text,
   html.invert-images .stripe-menu .menu-item.is-active.is-open > .menu-text,
   html.invert-images .stripe-menu .menu-item.is-active:focus-within > .menu-text{
     background: #E9E9E9;
     color: #3E3C3D;
   }

   .stripe-menu .sub-menu{
     position: absolute;
     top: calc(100% + 10px);
     left: 0;
     min-width: 360px;
     max-width: min(640px, 92vw);
     border-radius: 14px;
     /* чуть темнее/плотнее, чтобы текст читался */
     background: rgba(246,246,248,.98);
     border: 1px solid rgba(0,0,0,.10);
     box-shadow: 0 18px 44px rgba(0,0,0,.18);
     padding: 14px;
     opacity: 0;
     transform: translateY(-6px);
     pointer-events: none;
     transition: opacity .12s ease, transform .12s ease;
     z-index: 100;
   }

   /* Night theme (invert-images): dropdown becomes dark */
   html.invert-images .stripe-menu .sub-menu{
     background: rgba(62, 60, 61, .98);
     border-color: rgba(255,255,255,.10);
     box-shadow: 0 18px 44px rgba(0,0,0,.35);
   }

   .stripe-menu .sub-menu.double{
     min-width: 520px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 10px;
   }

   .stripe-menu .menu-item:hover .sub-menu,
   .stripe-menu .menu-item.is-open .sub-menu,
   .stripe-menu .menu-item:focus-within .sub-menu{
     opacity: 1;
     transform: translateY(0);
     pointer-events: auto;
   }

   /* keep last dropdown inside viewport */
   .stripe-menu .menu-item:last-child .sub-menu{
     left: auto;
     right: 0;
   }

   .stripe-menu .icon-box{
     display:flex;
     gap: 12px;
     align-items:flex-start;
     padding: 12px 12px;
     border-radius: 12px;
     text-decoration: none;
     color: inherit;
     width: 100%;
     box-sizing: border-box;
   }
   .stripe-menu .icon-box:hover{
     background: rgba(97,25,250,.06);
     text-decoration: none;
   }

   html.invert-images .stripe-menu .icon-box:hover{
     background: rgba(233,233,233,.08);
   }
   .stripe-menu .icon{
     width: 30px;
     display:flex;
     justify-content:center;
     padding-top: 2px;
     color: rgb(44 70 86);
     font-size: 18px;
     flex: 0 0 auto;
   }
   html.invert-images .stripe-menu .icon{
     color: rgba(233,233,233,.92);
   }
   .stripe-menu .title{
     font-weight: 900;
     color: rgb(44 70 86);
     margin: 0 0 2px 0;
   }
   html.invert-images .stripe-menu .title{
     color: rgba(233,233,233,.92);
   }
   .stripe-menu .title i{ font-size: 12px; opacity: .7; margin-left: 6px; }
   .stripe-menu .sub-text{
     font-size: 13px;
     opacity: .92;
     line-height: 1.25;
     color: rgba(44, 70, 86, .78);
   }
   html.invert-images .stripe-menu .sub-text{
     color: rgba(233,233,233,.78);
     opacity: 1;
   }

   .sub-menu-holder{ display:none; }

   @media (max-width: 750px){
     .stripe-menu{ row-gap: 6px; }
     .stripe-menu .sub-menu.double{
       grid-template-columns: 1fr;
       min-width: 360px;
     }
   }

   /* =========================================================
      Profile avatar (right side)
      ========================================================= */
   .profile-dd{
     position: relative;
     display:flex;
     align-items:center;
   }
   .profile-dd__avatar{
     width: 40px;
     height: 40px;
     border-radius: 999px;
     border: 1px solid rgba(0,0,0,.10);
     background: rgba(255,255,255,.72);
     box-shadow: var(--shadow-sm);
     overflow: hidden;
     display:flex;
     align-items:center;
     justify-content:center;
     text-decoration:none;
   }
   .profile-dd__avatar:hover{
     box-shadow: 0 10px 26px rgba(0,0,0,.10);
     text-decoration:none;
   }
   .profile-dd__avatar img{
     width: 100%;
     height: 100%;
     object-fit: cover;
     display:block;
   }
   .profile-dd__stub{
     font-weight: 950;
     color: rgba(18,18,18,.75);
   }
   .profile-dd__menu{
     position: absolute;
     top: calc(100% + 10px);
     right: 0;
     min-width: 200px;
     border-radius: 14px;
     background: rgba(255,255,255,.96);
     border: 1px solid rgba(0,0,0,.10);
     box-shadow: 0 18px 44px rgba(0,0,0,.18);
     padding: 8px;
     opacity: 0;
     transform: translateY(-6px);
     pointer-events: none;
     transition: opacity .12s ease, transform .12s ease;
     z-index: 120;
   }
   .profile-dd:hover .profile-dd__menu,
   .profile-dd:focus-within .profile-dd__menu{
     opacity: 1;
     transform: translateY(0);
     pointer-events: auto;
   }
   .profile-dd__item{
     width: 100%;
     display:block;
     padding: 10px 12px;
     border-radius: 12px;
     font-weight: 800;
     color: rgba(18,18,18,.82);
     text-decoration:none;
     background: transparent;
     border: 0;
     text-align:left;
     cursor: pointer;
   }
   .profile-dd__item:hover{
     background: rgba(97,25,250,.06);
     text-decoration:none;
   }
   .profile-dd__logout{
     color: rgba(180, 35, 24, .92);
   }

   /* =========================================================
      Teacher: students hub page
      ========================================================= */
   .teacher-students-exam summary{
     padding: 10px 12px;
     border-radius: 14px;
     border: 1px solid rgba(0,0,0,.08);
     background: rgba(255,255,255,.65);
   }
   html.invert-images .teacher-students-exam summary{
     background: rgba(62, 60, 61, .55);
     border-color: rgba(255,255,255,.10);
   }
   .teacher-student-btn{
     width: 100%;
     border: 1px solid rgba(0,0,0,.08);
     background: rgba(255,255,255,.75);
     border-radius: 14px;
     padding: 10px 12px;
     display:flex;
     align-items:center;
     gap: 12px;
     cursor:pointer;
     text-align:left;
   }
   .teacher-student-btn:hover{
     box-shadow: 0 10px 26px rgba(0,0,0,.10);
   }
   html.invert-images .teacher-student-btn{
     background: rgba(62, 60, 61, .55);
     border-color: rgba(255,255,255,.10);
   }
   .teacher-student-avatar{
     width: 34px;
     height: 34px;
     border-radius: 999px;
     overflow: hidden;
     border: 1px solid rgba(0,0,0,.10);
     display:flex;
     align-items:center;
     justify-content:center;
     background: rgba(255,255,255,.75);
     flex: 0 0 auto;
   }
   .teacher-student-avatar img{
     width:100%;
     height:100%;
     object-fit: cover;
     display:block;
   }
   .teacher-student-label{ display:flex; flex-direction:column; gap:2px; min-width:0; }
   .teacher-student-name{ font-weight: 900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
   .teacher-student-username{ font-size: 13px; opacity: .65; }
   
   
   /* =========================================================
      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;
   }

  /* Center title while keeping left/right slots */
  .page-head--center-title{
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* left / centered title / right */
    align-items: end;
    gap: 14px;
  }
  .page-head--center-title > .page-head__left{
    justify-self: start;
    min-width: 0;
  }
  .page-head--center-title > .page-head__main{
    justify-self: center;
    text-align: center;
    min-width: 0;
  }
  .page-head--center-title > .page-head__right{
    justify-self: end;
    min-width: 0;
  }
  @media (max-width: 720px){
    .page-head--center-title{
      grid-template-columns: 1fr;
      justify-items: center;
      align-items: center;
    }
    .page-head--center-title > .page-head__left,
    .page-head--center-title > .page-head__right{
      justify-self: center;
    }
  }
   
   .page-title{
     margin:0;
     font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
    font-weight: 800;
     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;
   }

/* ===== Night mode (invert-images): button palette overrides ===== */
html.invert-images .btn--primary{
  background: rgba(58, 58, 58, 1);
  color: rgba(233, 233, 233, 1);
}
html.invert-images .btn--secondary{
  background: rgba(233, 233, 233, 1);
  color: rgba(81, 81, 81, 1);
}
   
   .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); }
   .chip--green{ background: rgba(34,197,94,.20); border-color: rgba(34,197,94,.35); color: #0d5c2e; }
   
   
   /* =========================================================
      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); }


  /* =========================================================
     Breadcrumbs (Catalog path) — компактно, как в примере
     ========================================================= */
  .breadcrumbs{
    margin: 10px 0 16px;
  }
  .breadcrumbs__list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .breadcrumbs__item{
    min-width: 0;
  }
  .breadcrumbs__sep{
    color: rgba(18,18,18,.35);
    font-weight: 800;
    font-size: 14px;
    line-height: 1;
  }
  .breadcrumbs__link,
  .breadcrumbs__current{
    font-size: 14px;
    line-height: 1.25;
    letter-spacing: 0;
    white-space: nowrap;
  }
  .breadcrumbs__link{
    color: var(--c-muted);
    font-weight: 750;
    text-decoration: none;
  }
  .breadcrumbs__link:hover{
    color: var(--c-text);
    text-decoration: underline;
  }
  .breadcrumbs__current{
    color: var(--c-text);
    font-weight: 900;
  }

  /* =========================================================
     Switch (toggle) — used in topbar
     (adapted from your snippet; scoped, no global resets)
     ========================================================= */
  :root{
    --switch-hue: 223;
    --switch-trans-dur: 0.4s;
    --switch-trans-timing: cubic-bezier(0.65,0,0.35,1);
  }
  .switch,
  .switch__input{
    position: relative;
    -webkit-tap-highlight-color: transparent;
  }
  .switch{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    /* make geometry deterministic (avoid em rounding mismatches) */
    font-size: 16px;
    --switch-track-w: 3em;
    --switch-track-h: 1.5em;
    --switch-pad: 0.125em;
    --switch-knob: 1.25em;
    --switch-move: calc(var(--switch-track-w) - var(--switch-knob) - (var(--switch-pad) * 2));
    --switch-nudge-y: 0px; /* vertical tweak if needed */
  }
  .switch__input,
  .switch__input:before{
    background-color: hsl(var(--switch-hue),10%,10%);
  }
  .switch__input{
    border-radius: 0.75em;
    cursor: pointer;
    display: block;
    width: var(--switch-track-w);
    height: var(--switch-track-h);
    transition: background-color var(--switch-trans-dur) var(--switch-trans-timing);
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
    overflow: hidden; /* never let the knob render outside */
  }
  .switch__input:focus-visible{
    box-shadow: 0 0 0 3px rgba(111,44,255,.22);
  }
  .switch__input:before{
    border-radius: 50%;
    content: "";
    display: block;
    position: absolute;
    top: var(--switch-pad);
    left: var(--switch-pad);
    width: var(--switch-knob);
    height: var(--switch-knob);
    transform: translateY(var(--switch-nudge-y));
    transition:
      background-color var(--switch-trans-dur) var(--switch-trans-timing),
      transform var(--switch-trans-dur) var(--switch-trans-timing);
  }
  .switch__icon,
  .switch__icon-part{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  .switch__icon{
    background-color: hsl(var(--switch-hue),10%,90%);
    border-radius: 50%;
    overflow: hidden;
    pointer-events: none;
    top: var(--switch-pad);
    left: var(--switch-pad);
    width: var(--switch-knob);
    height: var(--switch-knob);
    transform: translateY(var(--switch-nudge-y));
    transition: transform var(--switch-trans-dur) var(--switch-trans-timing);
  }
  .switch__icon-part{
    transition:
      box-shadow var(--switch-trans-dur) var(--switch-trans-timing),
      transform var(--switch-trans-dur) var(--switch-trans-timing);
  }
  .switch__icon-part--1,
  .switch__icon-part--2,
  .switch__icon-part--3{
    border-radius: 50%;
  }
  .switch__icon-part--1{
    background-color: hsl(var(--switch-hue),10%,90%);
    top: calc(50% - 0.375em);
    left: calc(50% - 0.375em);
    width: 0.75em;
    height: 0.75em;
  }
  .switch__icon-part--2{
    background-color: hsl(var(--switch-hue),10%,10%);
    top: calc(50% - 0.4375em);
    left: calc(50% - 0.0625em);
    width: 0.5em;
    height: 0.5em;
    transform: translate(-0.1875em,0.1875em) scale(0.2);
  }
  .switch__icon-part--3{
    box-shadow: 0 0 0 0.625em hsl(var(--switch-hue),10%,10%) inset;
    width: 1.25em;
    height: 1.25em;
    transform: scale(0.25);
  }
  .switch__icon-part--3 ~ .switch__icon-part{
    background-color: hsl(var(--switch-hue),10%,10%);
    border-radius: 0.0625em;
    top: 50%;
    left: 50%;
    width: 0.125em;
    height: 0.1875em;
    transform-origin: 50% 0;
  }
  .switch__icon-part--4{ transform: translateX(-50%) rotate(0) translateY(0.25em); }
  .switch__icon-part--5{ transform: translateX(-50%) rotate(45deg) translateY(0.25em); }
  .switch__icon-part--6{ transform: translateX(-50%) rotate(90deg) translateY(0.25em); }
  .switch__icon-part--7{ transform: translateX(-50%) rotate(135deg) translateY(0.25em); }
  .switch__icon-part--8{ transform: translateX(-50%) rotate(180deg) translateY(0.25em); }
  .switch__icon-part--9{ transform: translateX(-50%) rotate(225deg) translateY(0.25em); }
  .switch__icon-part--10{ transform: translateX(-50%) rotate(270deg) translateY(0.25em); }
  .switch__icon-part--11{ transform: translateX(-50%) rotate(315deg) translateY(0.25em); }
  .switch__sr{
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
  }

  /* checked state */
  .switch__input:checked{
    background-color: hsl(var(--switch-hue),10%,90%);
  }
  .switch__input:checked:before,
  .switch__input:checked ~ .switch__icon{
    transform: translate(var(--switch-move), var(--switch-nudge-y));
  }
  .switch__input:checked ~ .switch__icon .switch__icon-part--2{
    transform: translate(0,0) scale(1);
  }
  .switch__input:checked ~ .switch__icon .switch__icon-part--3{
    box-shadow: 0 0 0 0.25em hsl(var(--switch-hue),10%,10%) inset;
    transform: scale(1);
  }
  .switch__input:checked ~ .switch__icon .switch__icon-part--4{ transform: translateX(-50%) rotate(0) translateY(0.625em) scale(0); }
  .switch__input:checked ~ .switch__icon .switch__icon-part--5{ transform: translateX(-50%) rotate(45deg) translateY(0.625em) scale(0); }
  .switch__input:checked ~ .switch__icon .switch__icon-part--6{ transform: translateX(-50%) rotate(90deg) translateY(0.625em) scale(0); }
  .switch__input:checked ~ .switch__icon .switch__icon-part--7{ transform: translateX(-50%) rotate(135deg) translateY(0.625em) scale(0); }
  .switch__input:checked ~ .switch__icon .switch__icon-part--8{ transform: translateX(-50%) rotate(180deg) translateY(0.625em) scale(0); }
  .switch__input:checked ~ .switch__icon .switch__icon-part--9{ transform: translateX(-50%) rotate(225deg) translateY(0.625em) scale(0); }
  .switch__input:checked ~ .switch__icon .switch__icon-part--10{ transform: translateX(-50%) rotate(270deg) translateY(0.625em) scale(0); }
  .switch__input:checked ~ .switch__icon .switch__icon-part--11{ transform: translateX(-50%) rotate(315deg) translateY(0.625em) scale(0); }

  /* in topbar row */
  .topbar .switch{
    --switch-nudge-y: 1px; /* кружок чуть ниже */
    transform: translateY(1px);
  }


  /* =========================================================
     Invert task statement images (toggle)
     ========================================================= */
  html.invert-images .media-box img{
    /* мягкая инверсия: “чёрный” → светло‑серый, без жёсткого контраста */
    filter: invert(0.80) hue-rotate(180deg) brightness(0.98) contrast(0.95) saturate(0.90);
  }
   
   
   /* =========================================================
      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;
      
        height: 44px;
        padding: 0;              /* голый логотип без плашки */
        border-radius: 0;
      
        font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
        font-weight: 900;
        font-size: 26px;
        line-height: 1;
      
        letter-spacing: -0.02em;
      
        background: transparent;
        border: 0;
        box-shadow: none;
      
        text-decoration: none;

        gap: 10px;
      } 
      
      .brand__text{
        line-height: 1;
      }
      
      .brand__icon-wrap{
        position: relative;
        width: 47px;
        height: 36px;
        flex: 0 0 auto;
      }
      .brand__icon{ width: 100%; height: 100%; color: var(--ink); display:block;}

      /* Student desktop: logo acts as sidebar toggle */
      .brand--toggle{
        appearance: none;
        -webkit-appearance: none;
        border: 0;
        background: transparent;
        cursor: pointer;
      }

      /* Hover/focus: swap logo -> "toggle sidebar" icon (GPT-like) */
      .brand__toggle-icon{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        pointer-events: none;
        transition: opacity 80ms linear;
      }
      .brand--toggle:hover .brand__toggle-icon,
      .brand--toggle:focus-visible .brand__toggle-icon{
        opacity: 1;
      }
      .brand--toggle:hover .brand__icon,
      .brand--toggle:focus-visible .brand__icon{
        opacity: 0;
      }

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

      /* убрать "рамку" фокуса мышью, но оставить для клавиатуры */
      .brand:focus{
        outline: none;
      }
      .brand:focus-visible{
        outline: none;
        box-shadow: var(--focus);
      }



      /* =========================================================
   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;
}

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

/* phone portrait / compact header */
@media (max-width: 637px){
  .topbar__inner{ padding: 8px 14px; gap: 10px; }

  .brand{
    height: 40px;
    padding: 0 10px;
    gap: 8px;
    font-size: 22px;
  }
  .brand__icon-wrap{ 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; }
}

/* если после уменьшения бренда всё ещё тесно — скрываем инверсию */
@media (max-width: 520px){
  .topbar .switch{ display: none; }
  .stripe-menu .menu-text{ padding: 7px 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{
    height: 36px;
    padding: 0 8px;
    gap: 8px;
    font-size: 20px;
  }
  .brand__icon-wrap{ width: 28px; height: 28px; }

  .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);
}

/* teacher: menu row under divider */
.teacherbar__menu{
  padding: 10px 0 6px;
  display:flex;
  justify-content: center;
}

/* нижний ряд: меню по центру */
.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;
}

/* Заголовок по центру (Решать сегодня, Домашние задания, История попыток) */
.page-head--with-controls .page-head__main{
  flex: 1;
  min-width: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-head--with-controls .page-head__main .page-subtitle{
  text-align: center;
}

/* Заголовок по центру страницы (без селектора справа) */
.page-head--centered{
  justify-content: center;
}
.page-head--centered .page-head__main{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-head--centered .page-head__main .page-subtitle{
  text-align: center;
}

/* ===== Каталог (главная): блок по центру страницы, контент внутри по левому краю ===== */
.page-content--center{
  max-width: 1028px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.page-head--center{
  justify-content: center;
  text-align: center;
}
.page-head--center .page-title,
.page-head--center .muted{
  text-align: center;
}
.page-content--center__section{
  text-align: left;
}
.page-content--center__row{
  justify-content: 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);
  border-width: 0;
  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;
  width: 230px;
}

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

/* сама “кнопка” выбора ученика: сбрасываем дефолт, дальше стилизуем как snav__account */
.student-dd__btn{
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

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

/* активный (ученик выбран): оставляем ту же заливку, что у меню;
   подсветка только по hover через .snav__account:hover */
.student-picker.is-active .student-dd__btn{
  background: transparent;
  color: inherit;
}

/* выпадающее меню — ВСЕГДА вниз */
.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);
}

/* Night mode: “подсказка GPT” chip */
html.invert-images .qa-summary--plain{
  border-color: rgba(233, 233, 233, 0.14);
  color: rgba(233, 233, 233, 1);
}
html.invert-images .qa-open{
  color: rgba(232, 232, 232, 1);
}

.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;
}

/* =========================================================
   22) Night theme (html.invert-images)
   ========================================================= */
html.invert-images{
  color-scheme: dark;
}

html.invert-images{
  --c-bg: #0f1014;
  --c-surface: rgba(62, 62, 62, 0.95);
  --c-surface-2: rgba(62, 62, 62, 0.75);
  --c-text: rgba(233, 233, 233, 1);
  --c-muted: rgba(233, 233, 233, 0.68);
  --c-border: rgba(233, 233, 233, 0.14);

  --shadow-sm: 0 10px 26px rgba(0,0,0,.28);
  --shadow-md: 0 18px 46px rgba(0,0,0,.36);
}

html.invert-images body::before{
  background:
    radial-gradient(980px 620px at 10% -16%, rgba(255,221,45,.14), rgba(255,221,45,0) 62%),
    radial-gradient(980px 620px at 92% -18%, rgba(111,44,255,.18), rgba(111,44,255,0) 64%),
    radial-gradient(1200px 760px at 70% 38%, rgba(111,44,255,.10), rgba(111,44,255,0) 66%),
    radial-gradient(1200px 760px at 22% 46%, rgba(255,221,45,.08), rgba(255,221,45,0) 66%),
    radial-gradient(980px 620px at 56% 22%, rgba(255,43,71,.04), rgba(255,43,71,0) 70%),
    linear-gradient(180deg, rgba(12,12,14,1) 0%, rgba(15,16,20,1) 55%, rgba(15,16,20,1) 100%);
  filter: saturate(1.05) contrast(1.02);
}

html.invert-images a{ color: inherit; }

/* Topbar */
html.invert-images .topbar{
  background: rgba(18, 18, 22, 0.72);
  border-bottom-color: rgba(233, 233, 233, 0.12);
}

/* Cards */
html.invert-images .card{
  background: var(--c-surface);
  border-color: var(--c-border);
  box-shadow: var(--shadow-sm);
}

/* Buttons (base) */
html.invert-images .btn{
  background: rgba(255,255,255,.06);
  border-color: var(--c-border);
  color: var(--c-text);
}
html.invert-images .btn:hover{
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}
html.invert-images .btn--ghost{
  background: transparent;
}

/* Inputs */
html.invert-images .input,
html.invert-images .textarea,
html.invert-images .select{
  background: rgba(255,255,255,.06);
  border-color: var(--c-border);
  color: var(--c-text);
}
html.invert-images .input::placeholder,
html.invert-images .textarea::placeholder{
  color: rgba(233, 233, 233, 0.45);
}

/* Chips */
html.invert-images .chip{
  background: rgba(255,255,255,.06);
  border-color: var(--c-border);
  color: var(--c-text);
}

/* Flash messages */
html.invert-images .flash{
  background: rgba(18, 18, 22, 0.62);
  border-color: var(--c-border);
  box-shadow: 0 16px 42px rgba(0,0,0,.22);
}

/* Breadcrumbs */
html.invert-images .breadcrumbs__sep{ color: rgba(233,233,233,.35); }
html.invert-images .breadcrumbs__link{ color: rgba(233,233,233,.62); }
html.invert-images .breadcrumbs__link:hover{ color: rgba(233,233,233,.90); }

/* Toasts */
html.invert-images .toast{
  background: rgba(18, 18, 22, 0.72);
  border-color: var(--c-border);
}
html.invert-images .toast__task{
  color: rgba(233,233,233,.70);
}

/* Teacher/student pickers (menus) */
html.invert-images .student-dd__menu{
  background: rgba(18, 18, 22, 0.92);
  border-color: var(--c-border);
}
html.invert-images .student-dd__item.is-selected{
  background: rgba(255,255,255,.06);
}
html.invert-images .student-picker__clear{
  background: rgba(255,255,255,.06);
  border-color: var(--c-border);
  color: var(--c-text);
}

/* Brand + active nav in night mode */
html.invert-images .brand{
  background: transparent;
  color: rgba(233, 233, 233, 1);
  border: 0;
  box-shadow: none;
}
html.invert-images .brand__text{
  color: rgba(233, 233, 233, 1);
}
html.invert-images .brand__icon{
  color: rgba(233, 233, 233, 1);
  /* brand icon is an <img>, so use filter (not "color") */
  /* target visual color ~ #E9E9E9 */
  filter: invert(1) brightness(0.914);
}

/* Mobile brand icon in dark theme */
html.invert-images .mnav__brand-icon{
  filter: invert(1) brightness(0.914);
}

html.invert-images .topnav__link.is-active{
  background: rgba(233, 233, 233, 1);
  color: var(--ink);
}
html.invert-images .topnav__link.is-active:hover{
  background: rgba(233, 233, 233, 1);
  color: var(--ink);
}