@import url("/css/fonts.css");

/* =========================================================================
   Clever Me — дизайн-система «playful».
   Токены и формы взяты из макета clever-des.html (тема playful).

   Заголовочный шрифт макета (Fredoka) не имеет кириллицы — ни в бандле,
   ни у Google. Поэтому весь UI набран Nunito (он тоже из макета, круглый,
   с кириллицей и ₴), а Fredoka оставлена только для латинского логотипа.
   ========================================================================= */

:root {
  /* Палитра playful */
  --c-bg: #FFF6E3;
  --c-bg2: #FFFFFF;
  --c-primary: #2E9BE0;
  --c-primary-d: #1C77B8;
  --c-accent: #FF8A5B;
  --c-accent-d: #D96B41;
  --c-yellow: #FFC53D;
  --c-yellow-d: #D9A32B;
  --c-green: #4FC08A;
  --c-green-d: #3A9A6C;
  --c-purple: #A98BEA;
  --c-pink: #F49BC1;
  --c-red: #EF6B6B;
  --c-red-d: #C85252;
  --c-ink: #2B3440;
  --c-muted: #7C889A;
  --c-line: #EFE6D2;
  --c-soft: #FFFBF0;

  /* Радиусы */
  --r-pill: 999px;
  --r-sm: 12px;
  --r-btn: 18px;
  --r-card: 22px;
  --r-lg: 32px;

  /* Тени. Фирменная черта макета — жёсткая «игрушечная» подложка снизу. */
  --sh-soft: 0 2px 10px rgba(0, 0, 0, .05);
  --sh-card: 0 4px 0 rgba(0, 0, 0, .06), var(--sh-soft);
  --sh-lift: 0 12px 34px rgba(0, 0, 0, .12);
  --sh-modal: 0 30px 70px rgba(30, 40, 60, .24);

  --font-ui: 'Nunito', system-ui, -apple-system, sans-serif;
  --font-logo: 'Fredoka', 'Nunito', sans-serif;

  /* Совместимость со старой разметкой (style.css) */
  --primary: var(--c-primary);
  --accent: var(--c-accent);
  --text-main: var(--c-ink);
  --text-secondary: var(--c-muted);
  --border: var(--c-line);
}

* { box-sizing: border-box; }

/* Атрибут hidden працює лише доти, доки елементу не задано авторський display:
   .btn{display:inline-flex} перебиває браузерне [hidden]{display:none}, і el.hidden
   = true нічого не ховає. Тримаємо явне правило, щоб на це не наступали знову. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 .6rem;
  font-weight: 800;
  color: var(--c-ink);
  line-height: 1.2;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }

a { color: var(--c-primary-d); }

p { line-height: 1.55; }

.as-muted, .text-muted { color: var(--c-muted); }

.text-gradient {
  background: linear-gradient(120deg, var(--c-primary) 0%, var(--c-accent) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Раскладка ---------- */

.dashboard-grid {
  display: grid;
  grid-template-columns: 272px 1fr;
  gap: 1.5rem;
  min-height: 100vh;
  padding: 1.25rem;
}

.container { padding: .5rem .5rem 3rem; }

/* ---------- Сайдбар ---------- */

.sidebar {
  position: sticky;
  top: 1.25rem;
  align-self: start;
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  padding: 1.5rem 1.25rem;
  background: var(--c-bg2);
  border: 2px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.5rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-logo);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--c-ink);
  text-decoration: none;
}

.logo::before {
  content: "";
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--c-soft) url("/img/cat-face.webp") center/86% no-repeat;
  border: 2px solid var(--c-line);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem 1rem;
  margin-bottom: .35rem;
  color: var(--c-ink);
  text-decoration: none;
  font-weight: 700;
  border-radius: var(--r-sm);
  transition: background .15s, color .15s, transform .1s;
}

.nav-link i { width: 22px; text-align: center; color: var(--c-muted); }

.nav-link:hover { background: var(--c-soft); }
.nav-link:hover i { color: var(--c-primary); }

.nav-link.active {
  background: var(--c-primary);
  color: #fff;
  box-shadow: 0 4px 0 var(--c-primary-d);
}

.nav-link.active i { color: #fff; }

/* ---------- Карточки ---------- */

.glass-card {
  padding: 1.4rem;
  background: var(--c-bg2);
  border: 2px solid var(--c-line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
}

.card-soft { background: var(--c-soft); }

/* Акцентные карточки — цветная заливка «в стиле макета» */
.card-accent  { background: linear-gradient(160deg, #FFF3EC, var(--c-bg2)); }
.card-primary { background: linear-gradient(160deg, #EAF5FD, var(--c-bg2)); }
.card-green   { background: linear-gradient(160deg, #E9F8F1, var(--c-bg2)); }

/* ---------- Кнопки ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.5rem;
  border: none;
  border-radius: var(--r-btn);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform .08s, box-shadow .08s, filter .15s;
}

/* Нажатие «утапливает» кнопку в её жёсткую тень — эффект из макета */
.btn:active { transform: translateY(3px); box-shadow: none !important; }

.btn:disabled, .btn.is-disabled {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
}

.btn-primary {
  background: var(--c-primary);
  color: #fff;
  box-shadow: 0 5px 0 var(--c-primary-d);
}

.btn-primary:hover { filter: brightness(1.05); }

.btn-secondary {
  background: var(--c-bg2);
  color: var(--c-ink);
  border: 2px solid var(--c-line);
  box-shadow: 0 5px 0 rgba(0, 0, 0, .06);
}

.btn-secondary:hover { background: var(--c-soft); }

.btn-accent  { background: var(--c-accent); color: #fff; box-shadow: 0 5px 0 var(--c-accent-d); }
.btn-yellow  { background: var(--c-yellow); color: var(--c-ink); box-shadow: 0 5px 0 var(--c-yellow-d); }
.btn-green   { background: var(--c-green); color: #fff; box-shadow: 0 5px 0 var(--c-green-d); }
.btn-danger  { background: var(--c-red); color: #fff; box-shadow: 0 5px 0 var(--c-red-d); }

.btn-sm { padding: .5rem 1rem; font-size: .875rem; border-radius: var(--r-sm); box-shadow: 0 4px 0 rgba(0, 0, 0, .1); }
.btn-block { display: flex; width: 100%; }

/* Инструментальная кнопка (панель урока) */
.tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-bg2);
  color: var(--c-ink);
  font-size: 1rem;
  cursor: pointer;
  transition: transform .08s, background .15s;
}

.tool-btn:hover { background: var(--c-soft); }
.tool-btn:active { transform: translateY(2px); }
.tool-btn.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* ---------- Формы ---------- */

.form-group { margin-bottom: 1.1rem; }

.form-label {
  display: block;
  margin-bottom: .4rem;
  font-size: .9rem;
  font-weight: 700;
  color: var(--c-muted);
}

.form-control {
  width: 100%;
  padding: .85rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-ink);
  background: var(--c-soft);
  border: 2px solid var(--c-line);
  border-radius: var(--r-sm);
  transition: border-color .15s, box-shadow .15s;
}

.form-control:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 4px rgba(46, 155, 224, .15);
}

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237C889A'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 18px;
  padding-right: 2.4rem;
}

textarea.form-control { min-height: 96px; resize: vertical; line-height: 1.5; }

/* ---------- Плашки, бейджи, статусы ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .75rem;
  border-radius: var(--r-pill);
  font-size: .8rem;
  font-weight: 800;
  background: var(--c-soft);
  border: 2px solid var(--c-line);
  color: var(--c-ink);
  white-space: nowrap;
}

.badge-primary { background: #EAF5FD; border-color: #CCE6F8; color: var(--c-primary-d); }
.badge-green   { background: #E9F8F1; border-color: #C8EEDC; color: var(--c-green-d); }
.badge-yellow  { background: #FFF4D9; border-color: #FBE3AC; color: #9A7413; }
.badge-accent  { background: #FFF0E9; border-color: #FFD6C3; color: var(--c-accent-d); }
.badge-red     { background: #FDEBEB; border-color: #F7CFCF; color: var(--c-red-d); }
.badge-muted   { color: var(--c-muted); }

/* ---------- Плитки-показатели ---------- */

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

.stat-tile {
  padding: 1.1rem;
  text-align: center;
  background: var(--c-bg2);
  border: 2px solid var(--c-line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
}

.stat-tile .stat-icon { font-size: 1.6rem; line-height: 1; }
.stat-tile .stat-value { font-size: 1.9rem; font-weight: 800; margin-top: .35rem; }
.stat-tile .stat-label { font-size: .8rem; font-weight: 700; color: var(--c-muted); margin-top: .15rem; }

/* ---------- Полоса прогресса ---------- */

.progress {
  height: 14px;
  background: var(--c-soft);
  border: 2px solid var(--c-line);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.progress > span {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--c-yellow), var(--c-accent));
  transition: width .4s ease;
}

.progress.progress-green > span { background: linear-gradient(90deg, var(--c-green), #7BD3AC); }

/* ---------- Кот-маскот ---------- */

.cat-hero {
  width: 100%;
  max-width: 260px;
  border-radius: 28px;
  animation: cmFloat 4s ease-in-out infinite;
}

@keyframes cmFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ---------- Подвал сайдбара ---------- */

.sidebar-foot { margin-top: 1.5rem; padding-top: 1rem; border-top: 2px solid var(--c-line); }

.user-chip {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem;
  margin-bottom: .75rem;
  background: var(--c-soft);
  border-radius: var(--r-sm);
}

.user-chip-avatar {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-weight: 800;
}

.user-chip-text { display: flex; flex-direction: column; overflow: hidden; }
.user-chip-text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip-text small { font-size: .78rem; color: var(--c-muted); }

.lang-switch { display: flex; gap: .6rem; padding: 0 .5rem .75rem; }
.lang-switch a { font-size: 1.4rem; text-decoration: none; opacity: .45; transition: opacity .15s, transform .1s; }
.lang-switch a:hover { transform: scale(1.1); }
.lang-switch a.active { opacity: 1; }

.nav-link-danger { color: var(--c-red-d); }
.nav-link-danger i { color: var(--c-red-d); }
.nav-link-danger:hover { background: #FDEBEB; }

/* ---------- Герой (приветствие + маскот) ---------- */

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(150deg, var(--c-soft), var(--c-bg2) 60%);
}

.hero-text { min-width: 0; }
.hero-text p { margin: 0; }
.hero-next { color: var(--c-primary-d); }
.hero .cat-hero { flex: none; max-width: 190px; }

/* ---------- Секции ---------- */

.section { margin-top: 2rem; }
.section > h2 { display: flex; align-items: center; gap: .55rem; margin-bottom: 1rem; }
.section > h2 i { color: var(--c-primary); }

/* ---------- Карточка питомца ---------- */

.pet-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin: 1.5rem 0;
  text-decoration: none;
  color: inherit;
  transition: transform .12s, box-shadow .12s;
}

.pet-card:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0, 0, 0, .06), var(--sh-lift); }

.pet-emoji { font-size: 3.25rem; line-height: 1; }
.pet-body { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: .35rem; }
.pet-body b { font-size: 1.05rem; }
.pet-meals { text-align: center; display: flex; flex-direction: column; gap: .15rem; }
.pet-meals b { font-size: 1.5rem; color: var(--c-green-d); }
.pet-shop-link { color: var(--c-primary-d); font-weight: 800; }

/* ---------- Шапка страницы ---------- */

.page-head { margin-bottom: 1.25rem; }
.page-head p { margin: 0; }

/* ---------- Щоденник ---------- */

.diary { display: grid; gap: 1rem; margin-top: 1.5rem; }

.diary-entry { display: flex; flex-direction: column; gap: 1rem; }

.diary-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--c-line);
}

.diary-date {
  flex: none;
  width: 66px;
  padding: .45rem;
  text-align: center;
  border-radius: var(--r-sm);
  background: var(--c-primary);
  color: #fff;
  line-height: 1.15;
}

.diary-date b { display: block; font-size: 1.1rem; }
.diary-date small { font-size: .72rem; opacity: .85; }

.diary-title { flex: 1; min-width: 160px; }
.diary-title h3 { margin: 0 0 .15rem; }
.diary-title span { font-size: .88rem; }
.diary-title i { margin-right: .3rem; }

.diary-badges { display: flex; gap: .4rem; flex-wrap: wrap; }

.diary-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
}

.diary-block {
  padding: .9rem 1rem;
  background: var(--c-soft);
  border: 2px solid var(--c-line);
  border-radius: var(--r-sm);
}

.diary-block p { margin: 0 0 .4rem; font-size: .92rem; }
.diary-block p:last-child { margin-bottom: 0; }

.diary-block-label {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .5rem;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.diary-hw {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: .35rem;
}

.diary-hw a { font-weight: 800; text-decoration: none; }
.diary-hw a:hover { text-decoration: underline; }
.diary-hw-fb { font-size: .88rem; }

/* ---------- Карточки уроков ---------- */

.lesson-list { display: grid; gap: 1rem; }

.lesson-card {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}

.lesson-icon {
  flex: none;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: #EAF5FD;
  color: var(--c-primary);
  font-size: 1.35rem;
}

.lesson-body { flex: 1; min-width: 180px; }
.lesson-body h3 { margin: 0 0 .3rem; }
.lesson-meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .88rem; }
.lesson-meta i { margin-right: .3rem; }

/* ---------- Расписание учителя ---------- */

.sched-card { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.sched-card > .btn { align-self: flex-start; }

.sched-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  flex-wrap: wrap;
}

.sched-head h3 { margin: .25rem 0 .2rem; }
.sched-time { font-weight: 800; color: var(--c-primary-d); }
.sched-head .as-muted { font-size: .9rem; }
.sched-head i { margin-right: .3rem; }

.sched-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.tool-btn-danger { color: var(--c-red-d); }
.tool-btn-danger:hover { background: #FDEBEB; }

.sched-rating { margin: 0; }
.sched-rating em { color: var(--c-ink); }

.sched-att {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  width: 100%;
  padding: .75rem 1rem;
  background: var(--c-soft);
  border: 2px solid var(--c-line);
  border-radius: var(--r-sm);
}

.sched-att .as-muted { font-size: .85rem; }
.sched-att-form { display: inline-flex; gap: .4rem; flex-wrap: wrap; margin: 0; }

.sched-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  width: 100%;
}

.note-block {
  padding: .9rem 1rem;
  background: var(--c-soft);
  border: 2px solid var(--c-line);
  border-radius: var(--r-sm);
}

.note-block p { margin: 0; font-size: .92rem; line-height: 1.5; }

/* Приватная заметка — визуально отделена: её ученик не видит */
.note-block-private { background: #FFF4D9; border-color: #FBE3AC; }
.note-block-private .diary-block-label { color: #9A7413; }

/* ---------- Настройки ---------- */

.settings-col { display: grid; gap: 1rem; max-width: 620px; }

.settings-col h3 {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
}

.settings-col h3 i { color: var(--c-primary); }

.profile-card { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.profile-card h3 { margin: 0 0 .2rem; }
.profile-card p { margin: 0 0 .5rem; }

.profile-avatar {
  flex: none;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-size: 1.9rem;
  font-weight: 800;
  box-shadow: 0 4px 0 var(--c-primary-d);
}

.switch-row {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: 1rem;
  cursor: pointer;
}

.switch-row input { width: 22px; height: 22px; flex: none; margin-top: .1rem; accent-color: var(--c-primary); cursor: pointer; }
.switch-row span { display: flex; flex-direction: column; }
.switch-row small { font-size: .85rem; }

/* ---------- Кот: стадия, магазин, лента корма ---------- */

.pet-stage-card {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.pet-stage {
  position: relative;
  flex: none;
  width: 140px;
  height: 140px;
  display: grid;
  place-items: center;
}

.pet-avatar { width: 118px; height: 118px; position: relative; z-index: 1; }

.pet-slot { position: absolute; line-height: 1; }
.pet-slot-item { font-size: 1.9rem; z-index: 2; }

.pet-mood {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  background: var(--c-bg2);
  border: 2px solid var(--c-line);
  border-radius: 50%;
}

.pet-stage-body { flex: 1; min-width: 220px; }
.pet-stage-body h2 { margin-bottom: .2rem; }
.pet-stage-body p { margin: 0 0 .7rem; }

.pet-food-count { font-size: 1.05rem; margin-bottom: .45rem; }
.pet-food-count b { font-size: 1.5rem; color: var(--c-green-d); }

.pet-worn { margin-top: .7rem !important; font-size: .9rem; }
.pet-worn span { font-size: 1.2rem; }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 1rem;
}

.shop-item { padding: 1.1rem; text-align: center; }
.shop-item.is-equipped { border-color: var(--c-primary); }
.shop-item form { margin: 0; }

.shop-emoji { font-size: 2.6rem; line-height: 1; margin-bottom: .5rem; }
.shop-name { font-weight: 700; margin-bottom: .2rem; }
.shop-cost { font-weight: 800; color: var(--c-green-d); margin-bottom: .75rem; }
.shop-owned { margin-top: .45rem; font-size: .76rem; font-weight: 700; color: var(--c-green-d); }

/* Лента (журнал корма и подобные списки) */
.feed { list-style: none; margin: 0; padding: 0; }

.feed li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--c-line);
}

.feed li:last-child { border-bottom: none; }
.feed-plus { color: var(--c-green-d); }
.feed-minus { color: var(--c-red-d); }

/* ---------- Домашние задания ---------- */

.hw-list { display: grid; gap: 1rem; }

.hw-card { display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; }
.hw-card > .btn { align-self: flex-start; }

.hw-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  flex-wrap: wrap;
}

.hw-head h3 { margin: 0 0 .2rem; }
.hw-head span.as-muted { font-size: .88rem; }
.hw-head i { margin-right: .3rem; }

.hw-desc { margin: 0; line-height: 1.55; }

.hw-block {
  width: 100%;
  padding: .9rem 1rem;
  background: var(--c-soft);
  border: 2px solid var(--c-line);
  border-radius: var(--r-sm);
}

.hw-block p { margin: 0 0 .35rem; }
.hw-block p:last-child { margin-bottom: 0; }

.hw-block-warn { background: #FFF4D9; border-color: #FBE3AC; }
.hw-block-ok { background: #E9F8F1; border-color: #C8EEDC; }

.hw-grade { font-size: 1.3rem; font-weight: 800; color: var(--c-green-d); }

/* ---------- Действия в модалке ---------- */

.modal-actions {
  display: flex;
  gap: .75rem;
  justify-content: flex-end;
  margin-top: 1.25rem;
}

/* ---------- Таблицы ---------- */

.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-weight: 600;
}

thead th {
  padding: .75rem 1rem;
  text-align: left;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-muted);
  border-bottom: 2px solid var(--c-line);
  white-space: nowrap;
}

tbody td {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--c-line);
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--c-soft); }

/* ---------- Модальные окна ---------- */

.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: auto;
  padding: 1rem;
  background: rgba(43, 52, 64, .5);
  align-items: center;
  justify-content: center;
}

.modal[style*="display: flex"], .modal.open { display: flex !important; }

.modal-content {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 520px;
  padding: 1.75rem;
  background: var(--c-bg2);
  border: 2px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-modal);
  animation: modalIn .25s ease-out;
}

@keyframes modalIn {
  from { transform: translateY(-16px) scale(.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

/* ---------- Оповещения ---------- */

.alert {
  padding: .9rem 1.1rem;
  margin-bottom: 1rem;
  border-radius: var(--r-sm);
  border: 2px solid var(--c-line);
  background: var(--c-soft);
  font-weight: 700;
}

.alert-success { background: #E9F8F1; border-color: #C8EEDC; color: var(--c-green-d); }
.alert-error   { background: #FDEBEB; border-color: #F7CFCF; color: var(--c-red-d); }
.alert-warn    { background: #FFF4D9; border-color: #FBE3AC; color: #9A7413; }

/* ---------- Пустое состояние ---------- */

.empty-state {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--c-muted);
}

.empty-state .empty-emoji { font-size: 2.5rem; display: block; margin-bottom: .5rem; }

/* ---------- Оценка звёздами (M6) ---------- */

.stars-ro { color: var(--c-yellow); font-size: 1.1rem; letter-spacing: 2px; }
.stars-ro .empty { color: var(--c-line); }

/* ---------- Мобильная шапка (скрыта на десктопе) ---------- */

.mobile-header { display: none; }
.burger-btn { display: none; }
.mobile-only { display: none; }

/* =========================================================================
   Адаптив
   ========================================================================= */

@media (max-width: 900px) {
  .dashboard-grid { grid-template-columns: 1fr; gap: 0; padding: 0; }

  .mobile-header {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 62px;
    z-index: 2000;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    background: var(--c-bg2);
    border-bottom: 2px solid var(--c-line);
  }

  .mobile-header .logo { font-size: 1.15rem; }

  .burger-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    background: var(--c-soft);
    border: 2px solid var(--c-line);
    border-radius: var(--r-sm);
    color: var(--c-ink);
    font-size: 1.2rem;
    cursor: pointer;
  }

  /* Сайдбар превращается в выдвижную панель */
  .sidebar {
    position: fixed;
    top: 62px;
    left: -284px;
    width: 280px;
    height: calc(100vh - 62px);
    max-height: none;
    z-index: 1500;
    border: none;
    border-right: 2px solid var(--c-line);
    border-radius: 0;
    box-shadow: none;
    transition: left .25s ease;
  }

  .sidebar.active { left: 0; box-shadow: var(--sh-lift); }
  .sidebar .sidebar-header { display: none !important; }

  .container { padding: 5.5rem 1rem 3rem; }

  .glass-card { padding: 1.1rem; border-radius: 18px; }

  .desktop-only { display: none !important; }
  .mobile-only { display: block !important; }

  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .75rem; }

  /* Герой: маскот уходит под текст, а не рядом */
  .hero { flex-direction: column-reverse; text-align: center; }
  .hero .cat-hero { max-width: 150px; }

  .pet-card { gap: .9rem; }
  .pet-emoji { font-size: 2.5rem; }
  .pet-meals { text-align: left; flex-direction: row; align-items: center; gap: .5rem; flex-wrap: wrap; }

  .lesson-card .btn { width: 100%; }
  .section { margin-top: 1.5rem; }

  /* Таблицы разворачиваются в карточки: <td data-label="Заголовок"> */
  table, thead, tbody, th, td, tr { display: block; }

  thead tr { position: absolute; left: -9999px; }

  tbody tr {
    margin-bottom: 1rem;
    padding: .5rem 1rem;
    background: var(--c-bg2);
    border: 2px solid var(--c-line);
    border-radius: var(--r-card);
    box-shadow: var(--sh-card);
  }

  tbody tr:hover { background: var(--c-bg2); }

  tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 0;
    text-align: right;
    border-bottom: 1px solid var(--c-line);
  }

  tbody td::before {
    content: attr(data-label);
    flex: none;
    font-size: .8rem;
    font-weight: 800;
    color: var(--c-muted);
    text-align: left;
  }

  tbody td:last-child { border-bottom: none; }
  tbody td:empty { display: none; }
}

@media (max-width: 480px) {
  h1 { font-size: 1.45rem; }
  .btn { padding: .75rem 1.15rem; }
  .stat-tile .stat-value { font-size: 1.5rem; }
}

/* Уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =========================================================================
   Общие страницы: вход/пароль/политика, «Всі учні», проверка устройств
   ========================================================================= */

/* ---------- Центрированные страницы без сайдбара ---------- */

.auth-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  padding: 1.75rem;
}

.auth-card-wide { max-width: 720px; }

.auth-head { text-align: center; margin-bottom: 1.25rem; }
.auth-head h1 { margin: .6rem 0 .2rem; }
.auth-head h2 { margin: .6rem 0 .2rem; }
.auth-head p { margin: 0; font-size: .92rem; }

.auth-logo { justify-content: center; }

.auth-cat {
  display: block;
  width: 128px;
  max-width: 60%;
  margin: 0 auto;
  animation: cmFloat 4s ease-in-out infinite;
}

.lang-switch-center { justify-content: center; padding: 0 0 1rem; }

.auth-links { margin: 1rem 0 0; text-align: center; font-size: .9rem; }
.auth-links a { font-weight: 800; text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }
.auth-links + .auth-links { margin-top: .45rem; }

/* Согласие на обработку данных (регистрация) */
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}

.consent-row input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: .15rem;
  accent-color: var(--c-primary);
  cursor: pointer;
}

.consent-row label {
  margin: 0;
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--c-muted);
}

/* Политика конфиденциальности */
.policy-card h3 { margin-top: 1.5rem; }
.policy-card p { margin: 0; }
.policy-strong { font-weight: 800; }

/* ---------- «Всі учні» ---------- */

.as-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.as-search { max-width: 360px; }
.as-low { color: var(--c-red-d); font-weight: 800; }
.as-inactive td { opacity: .55; }
.as-name { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.as-email { display: block; font-size: .8rem; }

@media (min-width: 901px) {
  .table-as { min-width: 880px; }
}

/* ---------- Проверка устройств ---------- */

.dc-row { margin-bottom: 1.4rem; }
.dc-row:last-child { margin-bottom: 0; }

.dc-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .55rem;
  font-weight: 800;
}

.dc-label i { color: var(--c-primary); }

.dc-status {
  margin-left: auto;
  padding: .3rem .75rem;
  border-radius: var(--r-pill);
  border: 2px solid var(--c-line);
  background: var(--c-soft);
  color: var(--c-muted);
  font-size: .8rem;
  font-weight: 800;
  white-space: nowrap;
}

.dc-status.ok { background: #E9F8F1; border-color: #C8EEDC; color: var(--c-green-d); }
.dc-status.fail { background: #FDEBEB; border-color: #F7CFCF; color: var(--c-red-d); }

#dc-preview {
  width: 100%;
  max-height: 260px;
  background: var(--c-soft);
  border: 2px solid var(--c-line);
  border-radius: var(--r-sm);
  object-fit: cover;
  transform: scaleX(-1);
}

.dc-meter {
  height: 14px;
  background: var(--c-soft);
  border: 2px solid var(--c-line);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.dc-meter > div {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--c-green), var(--c-yellow), var(--c-red));
  transition: width .06s linear;
}

.dc-select { margin-top: .6rem; }
.dc-net-detail { font-size: .85rem; }
.dc-summary { margin: 1rem 0 0; }