:root{
  --bg:#f4f6f8;
  --panel:#ffffff;
  --line:#e6eaee;
  --text:#1f2a37;
  --muted:#6b7280;
  --brand:#2d9cdb;
  --brand2:#ff7a00;
  --green:#23b26b;
  --warn:#f59e0b;
  --danger:#ef4444;
  --shadow: 0 8px 24px rgba(16,24,40,.08);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
}

a{ color:inherit; text-decoration:none; }

.app{
  height:100vh;
  display:grid;
  grid-template-columns: 260px 1fr;
}

/* Sidebar */
.sidebar{
  background:#fff;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
}

.sidebar.is-hidden{
  display:none;
}

.brand{
  padding:18px 18px 12px;
  border-bottom:1px solid var(--line);
}
.brand__logo{
  font-weight:800;
  letter-spacing:.2px;
  font-size:26px;
  color:#0b1b2b;
}
.brand__logo span{
  color:var(--green);
}

.nav{
  padding:14px 10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.nav__item{
  padding:10px 12px;
  border-radius:10px;
  color:#0f172a;
  display:flex;
  align-items:center;
  gap:10px;
}
.nav__item:hover{ background:#f7f9fc; }
.nav__item.active{
  background:#eef6ff;
  border:1px solid #d7e9ff;
}
.nav__icon{ width:24px; text-align:center; }

/* Main */
.main{
  display:flex;
  flex-direction:column;
  min-width:0;
}

/* Topbar */
.topbar{
  height:56px;
  background:#fff;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 14px;
}
.topbar__right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:12px;
}
.user-pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
}
.user-pill__avatar{
  width:28px;height:28px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#f2f4f7;
}

/* Search */
.search{
  flex:1;
  max-width:520px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
}
.search__icon{ opacity:.6; }
.search__input{
  width:100%;
  border:none;
  outline:none;
  font-size:14px;
}

/* Buttons */
.icon-btn{
  border:1px solid var(--line);
  background:#fff;
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
}
.icon-btn:hover{ background:#f7f9fc; }

.icon-btn.is-active{
  background:#2db581;
  border-color:#2db581;
  color:#fff;
}

.btn{
  border:1px solid var(--line);
  background:#fff;
  border-radius:10px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:600;
  font-size:14px;
}
.btn-sm{ padding:7px 10px; font-size:13px; }
.btn-primary{
  background: #36c38d;
  border-color:#2db581;
  color:#fff;
}
.btn-primary:hover{ filter:brightness(.98); }
.btn-ghost{
  background:#fff;
}
.btn-disabled{
  background:#f3f4f6;
  color:#9ca3af;
  cursor:not-allowed;
}

/* Toolbar */
.toolbar{
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.toolbar__left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.view-icons{ display:flex; gap:8px; }
.nav-arrows{ display:flex; gap:8px; }

.title{
  margin-left:10px;
  min-width:0;
}
.title__big{
  font-weight:800;
  letter-spacing:.6px;
}
.title__sub{
  color:var(--muted);
  font-size:12.5px;
}

/* Content area */
.content{
  padding:0 14px 14px;
  min-height:0;
}

/* Tabs (pure CSS) */
.tab-radio{ position:absolute; opacity:0; pointer-events:none; }
.tabs{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  margin-bottom:10px;
}
.tab{
  padding:8px 12px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
}
#tab-month:checked ~ .tabs label[for="tab-month"],
#tab-week:checked ~ .tabs label[for="tab-week"],
#tab-day:checked ~ .tabs label[for="tab-day"]{
  background:#2db581;
  border-color:#2db581;
  color:#fff;
}

.panel{ display:none; }
#tab-month:checked ~ .panel--month{ display:block; }
#tab-week:checked ~ .panel--week{ display:block; }
#tab-day:checked ~ .panel--day{ display:block; }

/* Month grid */
.month-grid{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  box-shadow: var(--shadow);
  display:grid;
  grid-template-columns: repeat(7, 1fr);
}
.month-grid__head{
  padding:10px;
  text-transform:lowercase;
  font-weight:800;
  color:#475569;
  background:#fafbfc;
  border-bottom:1px solid var(--line);
  text-align:center;
}
.day-cell{
  min-height:150px;
  padding:10px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff;
  position:relative;
}
.day-cell:nth-child(7n){ border-right:none; }
.day-cell__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}
.day-cell__num{
  font-weight:800;
  color:#111827;
}
.day-cell.is-muted{ background:#fcfdff; }
.day-cell__more{
  margin-top:8px;
  color:#2563eb;
  font-size:12.5px;
  cursor:pointer;
}
.day-cell__empty{ color:#9ca3af; padding:18px 0; text-align:center; }

/* Event card */
.event{
  display:block;
  border:1px solid #dfe7df;
  border-left:4px solid var(--green);
  border-radius:10px;
  padding:8px 10px;
  background:#fff;
  margin-bottom:8px;
  box-shadow: 0 1px 0 rgba(16,24,40,.03);
}
.event:hover{ background:#fbfffb; }
.event__time{ font-weight:800; font-size:12.5px; }
.event__title{ font-weight:800; margin-top:2px; }
.event__meta{ color:var(--muted); font-size:12.5px; margin-top:2px; }

.event--accent{ border-left-color: #22c55e; }
.event--warn{ border-left-color: var(--warn); }
.event--ok{ border-left-color: #06b6d4; }
.event--block{
  position:absolute;
  left:10px;
  right:10px;
}

/* Week view */
.week{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.week__grid{
  display:grid;
  grid-template-columns: 86px 1fr;
  min-height:560px;
}
.week__timecol{
  background:#fafbfc;
  border-right:1px solid var(--line);
  padding-top:42px;
}
.week__time{
  height:3.2rem;
  padding:6px 10px;
  color:#475569;
  font-size:12.5px;
  border-bottom:1px dashed #eef2f6;
}
.week__days{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
}
.week__day{
  position:relative;
  border-right:1px solid var(--line);
  min-height:560px;
  background:
    repeating-linear-gradient(
      to bottom,
      #ffffff,
      #ffffff 3.2rem,
      #f6f8fb 3.2rem,
      #f6f8fb 3.21rem
    );
}
.week__day:last-child{ border-right:none; }
.week__dayhead{
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:#334155;
  border-bottom:1px solid var(--line);
  background:#fff;
  position:sticky;
  top:0;
  z-index:2;
}
.week__empty{
  padding:18px;
  color:#9ca3af;
}

/* Day view */
.day{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.day__head{
  padding:14px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:12px;
}
.day__title{ font-weight:900; font-size:18px; }
.day__subtitle{ color:var(--muted); }

.day__grid{
  display:grid;
  grid-template-columns: 86px 1fr;
  min-height:560px;
}
.day__timecol{
  background:#fafbfc;
  border-right:1px solid var(--line);
  padding-top:10px;
}
.day__time{
  height:3.2rem;
  padding:6px 10px;
  color:#475569;
  font-size:12.5px;
  border-bottom:1px dashed #eef2f6;
}
.day__lane{
  position:relative;
  background:
    repeating-linear-gradient(
      to bottom,
      #ffffff,
      #ffffff 3.2rem,
      #f6f8fb 3.2rem,
      #f6f8fb 3.21rem
    );
}

/* Modal via :target */
.modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:50;
}
.modal:target{ display:block; }
.modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.45);
}
.modal__card{
  position:relative;
  width:min(520px, calc(100% - 24px));
  margin:90px auto;
  background:#fff;
  border-radius:14px;
  box-shadow: var(--shadow);
  border:1px solid var(--line);
  overflow:hidden;
}
.modal__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 14px;
  border-bottom:1px solid var(--line);
}
.modal__title{ font-weight:900; }
.modal__close{
  width:34px; height:34px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}
.modal__body{ padding:14px; }
.modal__foot{
  padding:14px;
  display:flex;
  gap:10px;
  justify-content:flex-start;
  border-top:1px solid var(--line);
}

/* Key-value rows */
.kv{ display:flex; flex-direction:column; gap:10px; }
.kv__row{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap:12px;
  font-size:14px;
}
.kv__k{ color:var(--muted); }
.kv__v{ font-weight:650; }
.pill{
  display:inline-block;
  margin-left:8px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#f8fafc;
  font-size:12px;
  font-weight:800;
}
.pill--warn{
  background:#fff7ed;
  border-color:#fed7aa;
  color:#9a3412;
}

.modal__list{ margin-top:12px; }
.modal__list-title{
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fbfcfe;
  font-weight:800;
}
.right{ float:right; }
.muted{ color:var(--muted); font-weight:600; }
.danger{ color:var(--danger); font-weight:900; }
.dot{ opacity:.6; }

/* Profile page layout */
.profile-layout{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap:14px;
}

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card--side{ align-self:start; }

.profile-head{
  display:flex;
  gap:14px;
  padding:16px;
  border-bottom:1px solid var(--line);
}
.avatar{
  width:56px;height:56px;
  border-radius:50%;
  background:#f2f4f7;
  display:grid;place-items:center;
  font-size:28px;
}
.profile-name{
  font-size:26px;
  font-weight:950;
}
.profile-sub{
  color:var(--muted);
  font-weight:650;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:4px;
}
.profile-meta{ margin-top:8px; display:flex; flex-direction:column; gap:2px; }

.card__section{
  padding:14px 16px;
  border-bottom:1px solid var(--line);
}
.card__section:last-child{ border-bottom:none; }

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.section-title{ font-weight:950; }
.section-actions{ display:flex; align-items:center; gap:10px; }

.attendance{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.att{
  width:58px;
  border-radius:12px;
  border:1px solid var(--line);
  padding:8px 6px;
  text-align:center;
  background:#fff;
}
.att__day{
  font-weight:900;
  color:#64748b;
  font-size:12px;
}
.att__date{
  font-weight:950;
  margin-top:4px;
}
.att--ok{ background:#ecfdf3; border-color:#bbf7d0; }
.att--warn{ background:#fff7ed; border-color:#fed7aa; }
.att--muted{ background:#f3f4f6; border-color:#e5e7eb; color:#9ca3af; }
.att--now{ background:#eef2ff; border-color:#c7d2fe; }

.link{ color:#2563eb; font-weight:800; }

.legend{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px 14px;
}
.legend__item{
  display:flex;
  align-items:center;
  gap:10px;
  color:#334155;
  font-weight:750;
}
.legend__swatch{
  width:14px;height:14px;
  border-radius:4px;
  border:1px solid var(--line);
}
.sw-ok{ background:#ecfdf3; border-color:#bbf7d0; }
.sw-prep{ background:#eff6ff; border-color:#bfdbfe; }
.sw-free{ background:#f0fdfa; border-color:#99f6e4; }
.sw-debt{ background:#fef2f2; border-color:#fecaca; }
.sw-miss{ background:#fff7ed; border-color:#fed7aa; }

.side-block{
  padding:14px 16px;
  border-bottom:1px solid var(--line);
}
.side-block:last-child{ border-bottom:none; }
.side-title{ font-weight:950; margin-bottom:10px; }
.side-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:6px 0;
  font-weight:700;
}
.reg{ margin-top:10px; }
.reg__line{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fbfcfe;
  font-weight:900;
}
.reg__day{
  width:34px;height:28px;
  display:grid;place-items:center;
  border-radius:8px;
  background:#eef2ff;
  border:1px solid #c7d2fe;
  font-weight:950;
}
.spacer{ height:10px; }

/* Responsive */
@media (max-width: 1100px){
  .profile-layout{ grid-template-columns: 1fr; }
}
@media (max-width: 900px){
  .app{ grid-template-columns: 1fr; }
  .sidebar{ display:none; }
  .title__sub{ display:none; }
}
/* JS modal (class-based, not :target) */
.modal-js{
  position:fixed;
  inset:0;
  display:none;
  z-index:60;
}
.modal-js.is-open{ display:block; }
.modal-js__backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.45);
}
.modal-js__card{
  position:relative;
  width:min(720px, calc(100% - 24px));
  margin:80px auto;
  background:#fff;
  border-radius:14px;
  box-shadow: var(--shadow);
  border:1px solid var(--line);
  overflow:hidden;
}
.modal-js__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px;
  border-bottom:1px solid var(--line);
}
.modal-js__title{ font-weight:950; }
.modal-js__body{ padding:14px; }
.modal-js__foot{
  padding:14px;
  display:flex;
  gap:10px;
  align-items:center;
  border-top:1px solid var(--line);
}

.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.field{ display:flex; flex-direction:column; gap:6px; }
.field span{ color:var(--muted); font-weight:800; font-size:12.5px; }
.field input, .field select{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
  font-weight:700;
}
.field input:focus, .field select:focus{
  border-color:#b6d7ff;
  box-shadow: 0 0 0 3px rgba(45,156,219,.12);
}
.field--full{ grid-column:1 / -1; }
.students-wrap{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}
.students-row{
  display:flex;
  gap:10px;
  align-items:center;
}

.status-tabs{
  display:flex;
  gap:10px;
  margin-bottom:12px;
  border-bottom:1px solid var(--line);
  padding-bottom:10px;
}
.status-tab{
  border:none;
  background:transparent;
  padding:10px 12px;
  font-weight:900;
  color:#64748b;
  cursor:pointer;
  border-radius:10px 10px 0 0;
}
.status-tab.is-active{
  color:#0f172a;
  background:#f8fafc;
  border:1px solid var(--line);
  border-bottom-color:#f8fafc;
}

.list-row{
  display:grid;
  grid-template-columns: 140px 1fr 220px;
  gap:12px;
  padding:10px 8px;
  border-bottom:1px solid var(--line);
  align-items:center;
}
.list-row:hover{ background:#fafafa; }
.list-h{
  font-size:12px;
  color:#64748b;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.4px;
}

/* Sidebar collapse (бургер) */
.app.sidebar-collapsed{
  grid-template-columns: 0 1fr;
}
.app.sidebar-collapsed .sidebar{
  width:0;
  min-width:0;
  overflow:hidden;
  border-right:none;
}

/* Pages */
.page { display: none; }
.page.is-active { display: block; }

/* Small animation when switching pages */
.page.is-active {
  animation: pageIn .18s ease-out;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== Pages (tabs) ===== */
.pages { padding: 0 14px 14px; min-height: 0; }
.page { display: none; animation: pageIn .18s ease-out; }
.page.is-active { display: block; }

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

/* nav кнопки (бо тепер це <button>) */
.nav__item{
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
}
.nav__item.active{
  background:#eef6ff;
  border:1px solid #d7e9ff;
}

/* ===== Profile (new) ===== */
.profile2__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.profile2__who{ display:flex; gap:12px; align-items:center; }
.profile2__avatar{
  width:52px; height:52px;
  border-radius:50%;
  background:#f2f4f7;
  display:grid; place-items:center;
  font-size:26px;
  border:1px solid var(--line);
}
.profile2__name{ font-weight:950; font-size:22px; }
.profile2__actions{ display:flex; gap:10px; flex-wrap:wrap; }

.profile2__grid{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:14px;
}
.profile2__schedule{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.profile2__dayrow{
  display:grid;
  grid-template-columns: 130px 1fr;
  gap:12px;
  padding:8px 0;
  border-bottom:1px solid var(--line);
}
.profile2__dayrow:last-child{ border-bottom:none; }
.profile2__day{ font-weight:900; color:#334155; }
.profile2__lessons{ display:flex; flex-direction:column; gap:6px; }
.profile2__lesson{ display:flex; gap:10px; align-items:center; font-weight:750; }
.profile2__time{ width:86px; font-weight:900; color:#0f172a; }
.profile2__stats{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.profile2__stat{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fbfcfe;
}

/* ===== Chat ===== */
.chat{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:14px;
  min-height: calc(100vh - 56px - 14px - 14px);
}
.chat__leftHead{
  display:flex;
  gap:10px;
  padding:12px;
  border-bottom:1px solid var(--line);
  align-items:center;
}
.chat__search{
  flex:1;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
  font-weight:700;
}
.chat__contacts{ padding:10px; display:flex; flex-direction:column; gap:8px; }
.chat__contact{
  display:flex;
  gap:10px;
  align-items:center;
  width:100%;
  text-align:left;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
  cursor:pointer;
}
.chat__contact.is-active{ border-color:#b6d7ff; box-shadow:0 0 0 3px rgba(45,156,219,.10); }
.chat__ava{
  width:36px; height:36px;
  border-radius:50%;
  background:#f2f4f7;
  display:grid; place-items:center;
  border:1px solid var(--line);
}
.chat__name{ font-weight:950; }
.chat__right{ position:relative; overflow:hidden; }
.chat__empty{
  position:absolute; inset:0;
  display:grid; place-items:center;
  padding:14px;
  text-align:center;
}

/* responsive */
@media (max-width: 1100px){
  .profile2__grid{ grid-template-columns: 1fr; }
  .chat{ grid-template-columns: 1fr; }
}

.chat__head{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.chat__title{ font-weight:950; }
.chat__msgs{
  height: calc(100% - 54px - 64px);
  overflow:auto;
  padding:12px;
}
.chat__composer{
  padding:12px;
  border-top:1px solid var(--line);
  display:flex;
  gap:10px;
  align-items:center;
}
.chat__input{
  flex:1;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
  font-weight:700;
}
.msg{
  max-width: 72%;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow: 0 2px 10px rgba(16,24,40,.05);
  margin-bottom:10px;
}
.msg--me{
  margin-left:auto;
  background:#ecfdf3;
  border-color:#bbf7d0;
}
.msg__meta{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
  margin-top:6px;
}

/* ===== Report table ===== */
.report-row{
  display:grid;
  grid-template-columns: 120px 90px 1fr 220px;
  gap:10px;
  padding:10px 8px;
  border-bottom:1px solid var(--line);
  align-items:center;
}
.report-row:hover{ background:#fafafa; }
.report-h{
  font-size:12px;
  color:#64748b;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#f8fafc;
  font-size:12px;
  font-weight:900;
}

/* ===== Tasks ===== */
.tasks-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.tasks-actions{ display:flex; gap:10px; align-items:center; }

.tasks-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.task{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fbfcfe;
}
.task.is-done{
  opacity:.75;
  text-decoration: line-through;
}
.task__left{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.task__title{
  font-weight:900;
}
.task__meta{
  margin-top:4px;
  font-size:12.5px;
  color:var(--muted);
  font-weight:700;
}
.task__right{
  display:flex;
  gap:8px;
  align-items:center;
}
.task__btn{
  border:1px solid var(--line);
  background:#fff;
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
  font-weight:800;
}
.task__btn:hover{ background:#f7f9fc; }
.task__btn--danger{
  border-color:#fecaca;
  color:#b91c1c;
}

/* ===== Student popover card ===== */
.student-card{
  position: fixed;
  z-index: 999;
  width: 360px;
  max-width: calc(100vw - 24px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  display: none;
  overflow: hidden;
  transform-origin: top left;
}
.student-card.is-open{
  display: block;
  animation: popIn .12s ease-out;
}
@keyframes popIn{
  from{ opacity:0; transform: translateY(6px) scale(.98); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
.student-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
}
.student-card__title{
  font-weight:950;
}
.student-card__body{
  padding:12px;
  font-weight:750;
}
.student-card__row{
  display:flex;
  gap:10px;
  padding:6px 0;
}
.student-card__k{ width:92px; color:var(--muted); font-weight:900; }
.student-card__v{ flex:1; }
.student-card__foot{
  padding:10px 12px;
  border-top:1px solid var(--line);
  display:flex;
  gap:10px;
}
.student-link{
  color:#0eeb33;
  font-weight:900;
  cursor:pointer;
}
.student-link:hover{ text-decoration: underline; }

/* ===== Leads / Students page ===== */
.leads-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
.leads-col{
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  overflow:hidden;
}
.leads-col__title{
  padding:10px 12px;
  font-weight:950;
  border-bottom:1px solid var(--line);
  background:#fbfcfe;
}
.leads-list{
  padding:10px 10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:120px;
}
.lead-item{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
  cursor:pointer;
}
.lead-item:hover{ background:#fafafa; }
.lead-item__top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}
.lead-item__name{ font-weight:950; }
.lead-item__meta{ margin-top:4px; font-size:12.5px; color:var(--muted); font-weight:700; }

/* ===== Student schedule style like фото 2 ===== */
.sch7{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.sch7__item{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
}
.sch7__row1{
  display:flex;
  gap:10px;
  align-items:baseline;
}
.sch7__dow{
  font-weight:950;
  color:#2563eb;
  min-width:30px;
}
.sch7__time{
  font-weight:950;
  color:#0f172a;
}
.sch7__sub{
  margin-top:6px;
  font-weight:800;
}
.sch7__muted{
  margin-top:4px;
  color:var(--muted);
  font-weight:700;
  font-size:12.5px;
}
@media (max-width: 1100px){
  .leads-grid{ grid-template-columns: 1fr; }
}

.profile2__student{
  cursor: pointer;
  font-weight: 800;
  color: #16a34a;
}

.profile2__student:hover{
  text-decoration: underline;
}

/* ===== Mail ===== */
.mail-page{
  display:grid;
  grid-template-columns: 380px 1fr;
  gap:14px;
  min-height: calc(100vh - 56px - 28px);
}

.mail-sidebar,
.mail-view{
  min-height: 720px;
}

.mail-sidebar__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px;
  border-bottom:1px solid var(--line);
}

.mail-title{
  font-weight:950;
  font-size:18px;
}

.mail-filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:12px 14px 0;
}

.mail-filter{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:8px 12px;
  font-weight:800;
  cursor:pointer;
}
.mail-filter.is-active{
  background:#ecfdf3;
  border-color:#86efac;
}

.mail-search-wrap{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
}

.mail-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px;
}

.mail-item{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
  cursor:pointer;
  transition:.15s ease;
}
.mail-item:hover{
  background:#fafafa;
  transform:translateY(-1px);
}
.mail-item.is-active{
  border-color:#b6d7ff;
  box-shadow:0 0 0 3px rgba(45,156,219,.10);
}
.mail-item.is-new{
  background:#f8fffb;
}

.mail-item__top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}
.mail-item__name{
  font-weight:950;
}
.mail-item__date{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
}
.mail-item__subject{
  margin-top:4px;
  font-weight:800;
}
.mail-item__snippet{
  margin-top:4px;
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
}

.mail-badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:11px;
  font-weight:900;
}
.mail-badge--new{
  background:#ecfdf3;
  border-color:#86efac;
  color:#166534;
}
.mail-badge--read{
  background:#f8fafc;
  color:#475569;
}
.mail-badge--work{
  background:#eff6ff;
  border-color:#bfdbfe;
  color:#1d4ed8;
}
.mail-badge--spam{
  background:#fef2f2;
  border-color:#fecaca;
  color:#b91c1c;
}

.mail-view{
  position:relative;
  overflow:hidden;
}

.mail-view__head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  padding:16px;
  border-bottom:1px solid var(--line);
}

.mail-view__subject{
  font-size:22px;
  font-weight:950;
}

.mail-view__meta{
  margin-top:6px;
  color:var(--muted);
  font-weight:700;
}

.mail-view__actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.mail-view__body{
  padding:16px;
  animation: pageIn .18s ease-out;
}

.mail-kv{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-bottom:18px;
}

.mail-kv__row{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fbfcfe;
}
.mail-kv__row span{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.mail-message{
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  background:#fff;
}

.mail-message__title{
  font-weight:950;
  margin-bottom:10px;
}
.mail-message__text{
  white-space:pre-wrap;
  line-height:1.55;
}

@media (max-width: 1100px){
  .mail-page{
    grid-template-columns: 1fr;
  }
}

.mail-item{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
  cursor:pointer;
  transition:.18s ease;
  animation: mailItemIn .2s ease;
}

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

.nav-badge{
  margin-left:auto;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  font-size:12px;
  font-weight:900;
  display:grid;
  place-items:center;
}
.nav-badge.is-hidden{
  display:none;
}

.nav-mail-badge{
  margin-left:auto;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  font-size:11px;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.teacher-info{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.teacher-info__row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fbfcfe;
  font-weight:700;
}

.teacher-info__row span{
  color:var(--muted);
  font-weight:900;
}

.courses-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.course-card{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  background:#fff;
}

.course-card__top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}

.course-card__title{
  font-weight:950;
  font-size:16px;
}

.course-card__progress{
  font-weight:900;
  color:#16a34a;
}

.course-card__meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}

.course-pill{
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fbfcfe;
  font-size:12px;
  font-weight:800;
}

.course-dates{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:10px;
}

.course-date{
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid var(--line);
}

.course-date--planned{
  background:#eff6ff;
  border-color:#bfdbfe;
}

.course-date--done,
.course-date--debt,
.course-date--free{
  background:#ecfdf3;
  border-color:#bbf7d0;
}

.course-date--cancelled{
  background:#fef2f2;
  border-color:#fecaca;
}