/* =========================================================
   portal.css — Личный кабинет ученика
   Использует переменные/шрифты из styles.css (тот же бренд).
   Светлый контент + тёплый тёмный сайдбар. Готов к тёмной теме.
   ========================================================= */

:root{
  --side-w: 256px;
  --portal-bg: #F3EADB;          /* чуть прохладнее основного крема */
  --card: #FBF7EF;
  --side: #20180F;               /* тёплый эспрессо для сайдбара */
}

body.portal-body{
  margin:0; background:var(--portal-bg); color:var(--ink);
  font-family:var(--ff-body); min-height:100svh;
}

/* атрибут hidden должен всегда скрывать (классы ниже задают display:grid/flex,
   которые иначе перебивают встроенное правило [hidden]{display:none}) */
[hidden]{ display:none !important; }

/* экран загрузки */
.boot{ position:fixed; inset:0; display:grid; place-items:center; color:var(--ink-soft); font-weight:600; background:var(--portal-bg); z-index:80; }

/* =========================================================
   ВХОД
   ========================================================= */
.auth{ min-height:100svh; display:grid; place-items:center; padding:32px var(--pad); }
.auth__card{
  width:100%; max-width:420px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-md); padding:clamp(28px,5vw,44px);
  display:flex; flex-direction:column; gap:4px;
  animation:rise .6s var(--ease) both;
}
.auth__brand{ font-family:var(--ff-display); font-size:1.5rem; font-weight:600; color:var(--espresso); }
.auth__brand em{ font-family:var(--ff-hand); font-style:normal; color:var(--amber); }
.auth__title{ font-family:var(--ff-display); font-weight:600; font-size:2rem; color:var(--espresso); margin:1rem 0 0; }
.auth__sub{ color:var(--ink-soft); margin:.3rem 0 1.4rem; }
.auth__err{ margin:.2rem 0 0; color:#9a3b2a; font-weight:600; font-size:.9rem; }
.auth__back{ margin-top:1rem; color:var(--clay); font-weight:700; font-size:.9rem; text-align:center; }
.auth .field{ margin-bottom:14px; }

/* =========================================================
   КАРКАС ПРИЛОЖЕНИЯ
   ========================================================= */
.app{ display:flex; min-height:100svh; }

.side{
  width:var(--side-w); flex-shrink:0; background:var(--side); color:rgba(255,255,255,.72);
  display:flex; flex-direction:column; padding:24px 18px; position:sticky; top:0; height:100svh; overflow-y:auto;
}
.side__brand{ font-family:var(--ff-display); font-size:1.45rem; font-weight:600; color:#fff; padding:6px 10px 22px; }
.side__brand em{ font-family:var(--ff-hand); font-style:normal; color:var(--amber); }
.side__nav{ display:flex; flex-direction:column; gap:4px; }
.side__link{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:11px 12px; border-radius:12px; color:rgba(255,255,255,.72);
  font-weight:600; font-size:.95rem; transition:background .2s var(--ease), color .2s var(--ease);
}
.side__link svg{ width:19px; height:19px; opacity:.85; flex-shrink:0; }
.side__link:hover{ background:rgba(255,255,255,.07); color:#fff; }
.side__link.is-active{ background:rgba(238,185,73,.16); color:#fff; }
.side__link.is-active svg{ color:var(--amber); opacity:1; }
.side__foot{ margin-top:auto; display:flex; flex-direction:column; gap:10px; padding-top:18px; }
.side__logout{ color:rgba(255,255,255,.55); font-weight:600; font-size:.9rem; padding:8px; text-align:center; transition:color .2s; }
.side__logout:hover{ color:#fff; }

.main{ flex:1; min-width:0; padding:clamp(20px,3vw,40px) clamp(18px,4vw,56px) 64px; }

.topbar{ display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.topbar__burger{ display:none; flex-direction:column; gap:5px; padding:8px; }
.topbar__burger span{ width:22px; height:2px; background:var(--espresso); border-radius:2px; }
.topbar__title{ font-weight:700; color:var(--espresso); font-size:1.05rem; display:none; }

/* =========================================================
   ПАНЕЛИ / КАРТОЧКИ
   ========================================================= */
.panel{ animation:fade .45s var(--ease) both; }
.panel__head{ margin-bottom:18px; }
.panel__head h2{ font-family:var(--ff-display); font-weight:600; font-size:clamp(1.8rem,3.5vw,2.4rem); color:var(--espresso); margin:0; }

.hello{ font-family:var(--ff-display); font-weight:600; font-size:clamp(2rem,4.5vw,3rem); color:var(--espresso); margin:0; }
.hello__sub{ color:var(--ink-soft); margin:.4rem 0 1.8rem; }

.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); padding:clamp(20px,2.4vw,28px);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card--lift:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.card__label{ font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--clay); margin:0 0 .8rem; }

/* próxima clase */
.next{ display:flex; flex-direction:column; gap:.5rem; }
.next__when{ font-family:var(--ff-display); font-size:1.9rem; font-weight:600; color:var(--espresso); line-height:1.1; }
.next__fmt{ color:var(--ink); font-weight:600; }
.next__empty{ color:var(--ink-soft); }
.next__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:1rem; }

/* créditos visual */
.credits{ display:flex; flex-direction:column; gap:14px; }
.credit-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.credit-row__fmt{ font-weight:700; color:var(--espresso); }
.credit-dots{ display:flex; gap:6px; flex-wrap:wrap; }
.dot{ width:14px; height:14px; border-radius:50%; background:rgba(67,53,42,.14); }
.dot.is-on{ background:var(--amber); box-shadow:0 1px 4px rgba(238,185,73,.5); }
.credits__big{ font-family:var(--ff-display); font-size:3rem; font-weight:600; color:var(--espresso); line-height:1; }
.credits__big span{ font-family:var(--ff-body); font-size:.9rem; font-weight:600; color:var(--ink-soft); }

/* lista de créditos pendientes (agendar) */
.credits-list{ display:grid; gap:14px; margin-bottom:28px; }
.pcredit{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:18px 20px; box-shadow:var(--shadow-sm);
}
.pcredit__info b{ color:var(--espresso); }
.pcredit__info span{ display:block; color:var(--ink-soft); font-size:.88rem; margin-top:2px; }

/* tabs */
.tabs{ display:flex; gap:4px; background:var(--cream-deep); border:1px solid var(--line); border-radius:var(--r-pill); padding:4px; width:max-content; max-width:100%; margin-bottom:18px; overflow-x:auto; }
.tab{ padding:.55em 1.1em; border-radius:var(--r-pill); font-weight:700; font-size:.88rem; color:var(--ink-soft); white-space:nowrap; transition:.2s var(--ease); }
.tab.is-active{ background:var(--espresso); color:#fff; }

/* lista de clases */
.lesson-list, .pay-list{ display:grid; gap:12px; }
.lrow{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:16px 20px; box-shadow:var(--shadow-sm); animation:fade .4s var(--ease) both;
}
.lrow__date{ font-weight:700; color:var(--espresso); font-variant-numeric:tabular-nums; min-width:128px; }
.lrow__fmt{ flex:1; color:var(--ink); min-width:120px; }
.lrow__actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.pill{ font-size:.74rem; font-weight:700; padding:.34em .8em; border-radius:var(--r-pill); white-space:nowrap; }
.pill--upcoming{ background:rgba(238,185,73,.2); color:#8a6406; }
.pill--done{ background:rgba(126,138,82,.2); color:#4d5a2b; }
.pill--cancelled{ background:rgba(192,86,59,.16); color:#9a3b2a; }
.empty{ color:var(--ink-soft); padding:24px; text-align:center; background:var(--card); border:1px dashed var(--line-strong); border-radius:var(--r-md); }

.integration-list{ border-top:1px solid var(--line); }
.integration-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0; border-bottom:1px solid var(--line); }
.integration-row h3{ margin:0 0 5px; color:var(--espresso); font-size:1.05rem; }
.integration-row p{ margin:0; color:var(--ink-soft); font-size:.88rem; overflow-wrap:anywhere; }
.integration-row__actions{ display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; }

/* pagos */
.payrow{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:16px 20px; box-shadow:var(--shadow-sm); }
.payrow__amount{ font-family:var(--ff-display); font-size:1.3rem; font-weight:600; color:var(--espresso); }
.payrow__meta{ color:var(--ink-soft); font-size:.88rem; }

/* perfil */
.profile-card{ display:grid; gap:.5rem; margin-bottom:20px; }
.profile-card dt{ font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); }
.profile-card dd{ margin:0 0 .8rem; font-weight:700; color:var(--espresso); }
.card h3{ font-family:var(--ff-display); font-weight:600; font-size:1.4rem; color:var(--espresso); margin:0 0 1rem; }
.form-msg{ margin:.6rem 0 0; font-size:.88rem; font-weight:600; }
.form-msg.is-ok{ color:#4d5a2b; } .form-msg.is-err{ color:#9a3b2a; }

/* botones pequeños ghost para acciones de fila */
.btn--mini{ padding:.5em 1em; font-size:.82rem; }
.btn--soft{ background:var(--cream-deep); color:var(--espresso); }
.btn--soft:hover{ background:#e3d6bf; }
.btn--danger{ background:transparent; color:var(--clay); border:1.5px solid rgba(192,86,59,.4); }
.btn--danger:hover{ background:rgba(192,86,59,.1); }

@media (max-width:620px){
  .integration-row{ align-items:flex-start; flex-direction:column; }
  .integration-row__actions{ justify-content:flex-start; }
}

/* --- Купить занятия --- */
.buy{ max-width:640px; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.pill-chip{ padding:.6em 1.2em; border-radius:var(--r-pill); background:var(--cream-deep); color:var(--ink); font-weight:600; font-size:.9rem; border:1.5px solid transparent; transition:background .2s var(--ease), color .2s var(--ease); }
.pill-chip:hover{ background:#e3d6bf; }
.pill-chip.is-active{ background:var(--espresso); color:#fff; border-color:var(--espresso); }
.buy__total{ font-family:var(--ff-display); font-size:2.4rem; font-weight:600; color:var(--espresso); margin:1.8rem 0 1.2rem; }
.buy__total span{ font-family:var(--ff-body); font-size:.9rem; font-weight:600; color:var(--ink-soft); }
.buy__note{ font-size:.85rem; color:var(--ink-soft); margin:1rem 0 0; max-width:54ch; line-height:1.5; }

/* --- преподаватель: статистика и прочее --- */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
.stat{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:22px 24px; }
.stat__val{ font-family:var(--ff-display); font-size:2.4rem; font-weight:600; color:var(--espresso); line-height:1; }
.stat__label{ color:var(--ink-soft); font-size:.9rem; margin-top:.4rem; }
.alerts{ display:grid; gap:.7rem; }
.alerts li{ color:var(--ink); }
.search{ width:100%; max-width:420px; padding:.85em 1.1em; border-radius:var(--r-sm); border:1.5px solid var(--line-strong); background:#fff; color:var(--ink); font:inherit; }
.search:focus{ outline:none; border-color:var(--clay); box-shadow:0 0 0 3px rgba(192,86,59,.15); }
.lrow--click{ cursor:pointer; }
.lrow--click:hover{ border-color:var(--amber); box-shadow:var(--shadow-md); }
.modal__card--wide{ max-width:620px; }
.st-stats{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:1rem 0; }
.st-pkgs{ color:var(--ink-soft); font-size:.9rem; }
.st-h{ font-family:var(--ff-display); font-weight:600; font-size:1.2rem; color:var(--espresso); margin:1.4rem 0 .7rem; }
.note-box{ width:100%; min-height:90px; padding:.9em 1.1em; border-radius:var(--r-sm); border:1.5px solid var(--line-strong); background:#fff; color:var(--ink); font:inherit; resize:vertical; margin-bottom:.7rem; }
.note-box:focus{ outline:none; border-color:var(--clay); box-shadow:0 0 0 3px rgba(192,86,59,.15); }
.note-saved{ color:#4d5a2b; font-weight:600; font-size:.85rem; margin-left:10px; }
.modal__card h4{ margin:0; }

/* цели */
.goals-list{ display:grid; gap:8px; margin-bottom:10px; }
.goal{ display:flex; align-items:center; gap:10px; }
.goal__check{ width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line-strong); color:var(--olive); font-weight:700; display:grid; place-items:center; flex-shrink:0; }
.goal.is-done .goal__check{ background:var(--olive); color:#fff; border-color:var(--olive); }
.goal__text{ flex:1; color:var(--espresso); }
.goal.is-done .goal__text{ text-decoration:line-through; color:var(--ink-soft); }
.goal__x{ color:var(--clay); font-size:1.25rem; line-height:1; padding:2px 6px; }
.goal-presets{ margin-bottom:10px; }
.goal-presets .pill-chip{ font-size:.82rem; padding:.45em .9em; }

/* редактирование расписания */
.sched-add{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.sched-add input, .sched-add select{ padding:.6em .8em; border-radius:var(--r-sm); border:1.5px solid var(--line-strong); background:#fff; color:var(--ink); font:inherit; }
.sched-add input#goalInput{ flex:1; min-width:160px; }
.sched-day{ display:flex; align-items:center; gap:10px; font-weight:600; color:var(--espresso); }
.sched-day input{ width:18px; height:18px; }

/* задания и презентации */
.hw-text{ background:var(--cream-deep); border-radius:var(--r-md); padding:14px 16px; color:var(--ink); line-height:1.55; white-space:pre-wrap; margin:0; }
.hw-text--answer{ border-left:4px solid var(--amber); }
.hw-text--comment{ border-left:4px solid var(--olive); }
.pres-desc{ color:var(--ink-soft); font-size:.86rem; }
.st-level{ display:inline-flex; align-items:center; gap:8px; font-size:.88rem; color:var(--ink-soft); }
.st-level select{ padding:.4em .7em; border-radius:var(--r-sm); border:1.5px solid var(--line-strong); background:#fff; font:inherit; }

/* карточка-подсказка (📌 инфо, не popup) */
.info-card{
  background:linear-gradient(180deg,#FBF3E2,var(--card));
  border:1px solid var(--line); border-left:4px solid var(--amber);
  border-radius:var(--r-md); padding:18px 22px; margin-bottom:22px; box-shadow:var(--shadow-sm);
  animation:fade .4s var(--ease) both;
}
.info-card__title{ font-weight:800; color:var(--espresso); margin:0 0 .7rem; font-size:1.02rem; }
.info-card ul{ margin:0; padding-left:1.15rem; display:grid; gap:.4rem; list-style:disc; }
.info-card li{ color:var(--ink); line-height:1.5; display:list-item; }
.info-card li::marker{ color:var(--amber); }

/* файлы задания (чипы со ссылкой на скачивание) */
.hw-files{ display:flex; flex-wrap:wrap; gap:8px; margin:.3rem 0 .5rem; }
.file-chip{ display:inline-flex; align-items:center; gap:8px; max-width:100%;
  background:var(--cream-deep); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:.42em .85em; font-size:.84rem; font-weight:600; color:var(--espresso); }
.file-chip__name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:210px; color:inherit; }
.file-chip__name:hover{ text-decoration:underline; }
.file-chip__size{ color:var(--ink-soft); font-weight:500; }
.file-chip__x{ color:var(--clay); font-size:1.1rem; line-height:1; padding:0 2px; }

/* переписка по заданию */
.hw-thread{ display:grid; gap:8px; margin:.3rem 0 .7rem; }
.hw-thread--empty{ color:var(--ink-soft); font-size:.9rem; }
.hw-msg{ padding:9px 13px; border-radius:14px; max-width:88%; }
.hw-msg__who{ font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:2px; opacity:.7; }
.hw-msg__body{ white-space:pre-wrap; color:var(--ink); line-height:1.5; }
.hw-msg--teacher{ background:rgba(126,138,82,.14); border:1px solid rgba(126,138,82,.25); justify-self:start; border-bottom-left-radius:4px; }
.hw-msg--student{ background:rgba(238,185,73,.16); border:1px solid rgba(238,185,73,.32); justify-self:end; border-bottom-right-radius:4px; }

/* оценка */
.pill--grade{ background:var(--espresso); color:#fff; }

/* строка «прикрепить файл» */
.hw-attach{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:.2rem 0 .7rem; }
.hw-attach input[type=file]{ font-size:.84rem; max-width:100%; }
.hw-attach > span{ font-size:.86rem; color:var(--ink-soft); font-weight:600; }

/* админ-панель */
.lrow.is-blocked{ opacity:.55; }
.lrow select{ padding:.45em .7em; border-radius:var(--r-sm); border:1.5px solid var(--line-strong); background:#fff; font:inherit; font-size:.85rem; }

/* =========================================================
   МОДАЛКА ЗАПИСИ + КАЛЕНДАРЬ (светлый)
   ========================================================= */
.modal{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:20px; }
.modal[hidden]{ display:none; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(34,26,19,.5); backdrop-filter:blur(3px); animation:fade .25s var(--ease) both; }
.modal__card{
  position:relative; width:100%; max-width:480px; max-height:90svh; overflow:auto;
  background:var(--card); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  padding:clamp(22px,3vw,32px); animation:rise .35s var(--ease) both;
}
.modal__close{ position:absolute; top:14px; right:16px; font-size:1.6rem; line-height:1; color:var(--ink-soft); width:34px; height:34px; border-radius:50%; }
.modal__close:hover{ background:var(--cream-deep); }
.modal__card h3{ font-family:var(--ff-display); font-weight:600; font-size:1.6rem; color:var(--espresso); margin:0 0 .3rem; }
.modal__sub{ color:var(--ink-soft); margin:0 0 1.2rem; }
.modal__tz{ font-size:.8rem; color:var(--ink-soft); margin:1rem 0; }
.modal__msg{ font-size:.88rem; font-weight:600; margin:.4rem 0 0; }
.modal__msg.is-err{ color:#9a3b2a; } .modal__msg.is-ok{ color:#4d5a2b; }

.pcal__header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.9rem; }
.pcal__month{ font-family:var(--ff-display); font-size:1.3rem; font-weight:600; color:var(--espresso); text-transform:uppercase; letter-spacing:.04em; }
.pcal__nav{ width:34px; height:34px; border-radius:50%; background:var(--cream-deep); color:var(--espresso); font-size:1.2rem; display:grid; place-items:center; transition:.2s; }
.pcal__nav:hover{ background:#e3d6bf; }
.pcal__nav:disabled{ opacity:.35; cursor:not-allowed; }
.pcal__weekdays{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; font-size:.7rem; text-transform:uppercase; color:var(--ink-soft); text-align:center; margin-bottom:6px; }
.pcal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.pcal__day{ aspect-ratio:1; border-radius:10px; display:grid; place-items:center; font-weight:600; font-size:.92rem; color:var(--ink); position:relative; }
.pcal__day--muted{ color:rgba(67,53,42,.3); }
.pcal__day--free{ background:var(--cream-deep); cursor:pointer; }
.pcal__day--free:hover{ background:var(--amber); color:var(--espresso); }
.pcal__day--free::after{ content:""; position:absolute; bottom:6px; left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:50%; background:var(--amber); }
.pcal__day.is-sel{ background:var(--amber); color:var(--espresso); }
.pcal__day.is-sel::after{ background:var(--espresso); }

.pslots{ display:flex; flex-wrap:wrap; gap:8px; margin-top:1rem; }
.pslot{ padding:.55em 1em; border-radius:var(--r-pill); background:var(--cream-deep); color:var(--espresso); font-weight:600; font-size:.9rem; transition:.2s; }
.pslot:hover{ background:#e3d6bf; }
.pslot.is-sel{ background:var(--amber); }

/* =========================================================
   ADMIN: CHECKBOXES DE PROMOCÓDIGOS
   ========================================================= */
.promo-formats{ display:flex; flex-wrap:wrap; gap:12px; }
.promo-chk{ display:flex; align-items:center; gap:6px; font-size:.9rem; font-weight:600; color:var(--ink); cursor:pointer; }
.promo-chk input[type="checkbox"]{ width:18px; height:18px; cursor:pointer; accent-color:var(--amber); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:860px){
  .side{
    position:fixed; left:0; top:0; z-index:70; transform:translateX(-100%);
    transition:transform .3s var(--ease); box-shadow:var(--shadow-lg);
  }
  .app.is-open .side{ transform:none; }
  .app__scrim{ position:fixed; inset:0; background:rgba(34,26,19,.45); z-index:60; border:0; }
  .topbar__burger{ display:flex; }
  .topbar__title{ display:block; }
}

/* =========================================================
   АНИМАЦИИ
   ========================================================= */
@keyframes rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition-duration:.01ms !important; } }