/* Общий фирменный стиль с лендингом МАТДРОИД. */
:root {
  --black: #17131c;
  --ink: #322341;
  --muted: #655371;
  --purple: #7425ef;
  --purple-dark: #5920b2;
  --purple-panel: #704b9b;
  --pink: #ae287b;
  --danger: #d62d47;
  --purple-light: #f0e7ff;
  --pink-light: #f9e6f1;
  --line: #d8c3e9;
  --ground: #e6d8f8;
  --surface: #fff;
  --nav-height: 80px;
  font-family: Inter, Arial, Helvetica, sans-serif;
}

body, .app-shell { background: var(--ground); }
.app-shell { min-height: 100dvh; }
.topbar { background: var(--black); border-color: #ffffff26; }
.brand { color: #f4eaff; }
.brand span:last-child { letter-spacing: -.3px; }
.brand-mark, .auth-logo { padding: 3px; background: #fff; box-shadow: none; }
.brand-mark { width: 40px; height: 40px; border-radius: 9px; }
.brand-mark img, .auth-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.auth-logo { width: 66px; height: 66px; border: 1px solid var(--line); border-radius: 13px; }
.user-chip { color: #d9cce6; }
.user-chip button { width: 32px; height: 32px; border-color: #704b9b; color: #f4eaff; background: #322341; }
.user-chip button:hover { background: var(--purple-dark); }
.page-heading h1, .auth-card h1 { color: var(--ink); }
.back-button { color: var(--purple-dark); background: var(--surface); }
.block-label, .eyebrow, .lesson-card-date { color: var(--purple-dark); }

.auth-card, .subject-card, .journal-card, .detail-block, .lesson-card,
.payment-card, .submission-card, .attendance-list, .add-lesson,
.choice-card, .mode-button { border-color: var(--line); background: var(--surface); }
.detail-block > p:not(.block-label), .submission-card > p,
.attendance-row b, .student-grade-row time, .student-grades time { color: var(--ink); }
.lesson-card:hover, .mode-button:hover { border-color: var(--purple); background: #fbf8ff; }
.empty-state { border-color: var(--purple-panel); background: #ffffff80; }
.section-title > span, .journal-heading > span, .pending-pill { color: var(--purple-dark); background: var(--purple-light); }
.card-action, .card-action.continue, .text-action, .consent-row button,
.policy-link, .install-link, .mode-button i { color: var(--purple-dark); }
.subject-card.violet { border-color: #c9a9fa; }
.subject-card.cyan { border-color: #e2aecf; }
.subject-card.orange { border-color: #ecb7c0; }
.subject-card.violet::after { background: var(--purple-light); }
.subject-card.cyan::after { background: var(--pink-light); }
.subject-card.orange::after { background: #fbe8ed; }
.subject-icon, .mode-button > span { color: var(--purple); background: var(--purple-light); }
.cyan .subject-icon { color: var(--pink); background: var(--pink-light); }
.orange .subject-icon { color: var(--danger); background: #fbe8ed; }
.cyan .card-action { color: var(--pink); }
.orange .card-action { color: #b3233a; }

.primary-button { color: #f9f2ff; background: var(--purple); box-shadow: 0 6px 14px #7425ef1c; }
.primary-button:hover:not(:disabled) { background: var(--purple-dark); }
.secondary-button, .payment-button { border-color: var(--line); color: var(--purple-dark); background: var(--purple-light); }
.secondary-button:hover:not(:disabled), .payment-button:hover:not(:disabled) { background: #e4ccff; }
button:disabled { cursor: wait; opacity: .6; }
button:focus-visible, input:focus-visible, textarea:focus-visible,
summary:focus-visible, a:focus-visible { outline-color: #e970bc; }
.calendar-header button, .answer-form input, .answer-form textarea,
.add-lesson input, .add-lesson textarea, .grade-form input, .grade-form textarea,
.auth-form input, .settings-card input:not([type="checkbox"]), .add-payment-month input {
  border-color: var(--line); color: var(--ink); background: #fff;
}
.auth-form input:focus, .answer-form input:focus, .answer-form textarea:focus,
.add-lesson input:focus, .add-lesson textarea:focus, .grade-form input:focus,
.grade-form textarea:focus, .settings-card input:focus {
  border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-light);
}
.answer-form label, .add-lesson label, .grade-form label,
.auth-form > label, .auth-form legend, .settings-card label:not(.delete-confirm),
.add-payment-month label, .payment-card h2 { color: var(--ink); }
.form-note, .payment-hint, .grid-note, .auth-lead, .choice-card > p:not(.eyebrow),
.mode-button small, .request-card p, .policy-text, .consent-row { color: var(--muted); }
.role-option input, .consent-row input { accent-color: var(--purple); }

.calendar-header button { color: var(--purple-dark); }
.calendar-weekdays { color: var(--muted); }
.calendar-day { color: var(--ink); }
.calendar-day.has-lesson { color: var(--purple-dark); background: var(--purple-light); }
.date-dot { background: var(--pink); box-shadow: 0 0 0 5px var(--pink-light); }
.video-link { color: var(--purple-dark); background: var(--purple-light); }
.homework { border-color: #e2aecf; background: #fff9fd; }
.file-input { position: relative; border-color: var(--purple-panel); color: var(--purple-dark) !important; cursor: pointer; background: #fff; }
.file-input:focus-within { outline: 3px solid #e970bc; outline-offset: 2px; }
.file-input small { color: var(--muted); line-height: 1.45; }
.file-link, .receipt-link { color: var(--purple-dark); background: var(--purple-light); }
.file-link:hover, .receipt-link:hover { color: var(--purple-dark); background: #e4ccff; }
.file-selection { margin: 0; padding: 10px 12px; border-left: 3px solid var(--pink); border-radius: 0 8px 8px 0; color: var(--ink); background: var(--pink-light); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.file-selection:empty, .upload-error:empty { display: none; }
.file-selection strong, .file-selection small, .file-selection-status { display: block; }
.file-selection small { margin: 3px 0; color: var(--muted); }
.file-selection-status { color: var(--pink); font-weight: 700; }
.file-count { display: block; font-weight: 700; }
.selected-file { display: flex; align-items: center; gap: 12px; padding-top: 10px; margin-top: 10px; border-top: 1px solid #e2aecf; }
.selected-file > div { flex: 1; min-width: 0; }
.remove-pdf { flex: 0 0 auto; min-height: 40px; padding: 8px 10px; border: 1px solid #ae287b; border-radius: 8px; color: var(--pink); background: #fff; font: inherit; cursor: pointer; }
.remove-pdf:disabled { opacity: .55; cursor: wait; }
.remove-pdf:focus-visible { outline: 3px solid #7425ef; outline-offset: 2px; }
.upload-error { margin: 0; color: #b3233a; font-size: 12px; line-height: 1.5; }
.grade-result { border-color: var(--line); background: var(--purple-light); }
.score-circle { color: var(--purple-dark); background: #e4ccff; }
.teacher-comment { border-left-color: var(--pink); }
.add-lesson summary { color: var(--purple-dark); }
.add-lesson summary span { background: var(--purple); }
.student-grades, .attendance-list, .payment-card, .table-wrap { border-color: var(--line); }
.student-grades .student-grade-row, .attendance-row, .payment-subject,
.request-card, .grade-form, .grade-table th, .grade-table td { border-color: #e9ddf3; }
.student-grades .student-grade-header, .grade-table thead th,
.grade-table thead th:first-child { color: var(--muted); background: var(--purple-light); }
.grade-table th:first-child { color: var(--ink); background: #fff; }
.grade-table td.scored, .grade-table td.submitted-cell,
.student-grades strong, .student-grades .student-grade-row strong { color: var(--purple-dark); background: var(--purple-light); }
.student-grades .student-grade-row .empty-score { color: var(--muted); background: #f5f1f8; }
.student-grades .student-grade-row .is-present { color: #157052; background: #e4f4ee; }
.student-grades .student-grade-row .is-absent { color: #b04c5a; background: #faeaed; }
.attendance-button { border-color: var(--line); color: var(--muted); background: #fbf8ff; }
.add-payment-month, .payment-request-form { border-color: var(--line); background: #f7f0ff; }
.danger-zone { border-color: #ecb7c0; background: #fff9fa; }
.danger-zone .block-label { color: #b3233a; }
.danger-button { border-color: #e7a3af; color: #b3233a; background: #fbe8ed; }
.danger-button:hover:not(:disabled) { border-color: var(--danger); background: #f8d9e0; }
.request-card > div:first-child { min-width: 0; }
.request-card h3 { overflow-wrap: anywhere; }
.request-card > .decline { flex-shrink: 0; max-width: 130px; min-height: 40px; padding: 8px 10px; border-radius: 9px; border-color: #e7a3af; color: #b3233a; background: #fbe8ed; font-size: 12px; font-weight: 700; }
.admin-user-hint { color: var(--muted); font-size: 13px; line-height: 1.5; }
.lesson-delete-actions { margin: 22px 0 10px; }
.lesson-delete-actions .decline { min-height: 44px; padding: 10px 16px; border-radius: 10px; border-color: #e7a3af; color: #b3233a; background: #fbe8ed; font-size: 13px; font-weight: 700; }
.lesson-delete-actions .decline:hover:not(:disabled) { background: #f8d9e0; border-color: var(--danger); }

.auth-screen { min-height: 100dvh; background: radial-gradient(ellipse at 90% 0, #5920b24d, transparent 55%), var(--black); }
.orb-one { background: #7425ef26; }
.orb-two { background: #ae287b26; }
.auth-card { background: #fcf8ff; box-shadow: 0 24px 80px #0004; }
.auth-card h1 { letter-spacing: -.7px; }
.auth-switch { background: var(--purple-light); }
.auth-switch button { color: var(--muted); }
.auth-switch button.active { color: #fff; background: var(--purple); box-shadow: none; }
.role-option { border-color: var(--line); color: var(--ink); }
.role-option small, .admin-hint, .admin-hint b { color: var(--muted); }

/* Навигация всегда снизу; контент и сообщения остаются выше неё. */
body:has(.admin-bottom-nav) { --nav-height: 120px; }
.app-shell:has(> .bottom-nav) { padding-bottom: calc(var(--nav-height) + 20px + env(safe-area-inset-bottom)); }
.course-content { padding-bottom: 0; }
.bottom-nav {
  min-height: var(--nav-height);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  gap: 6px; border-color: #704b9b; background: var(--black);
  box-shadow: 0 -6px 24px #17131c14;
}
.bottom-nav button { min-width: 0; min-height: 48px; border-radius: 10px; color: #d9cce6; line-height: 1.3; }
.bottom-nav button:hover { background: #322341; }
.bottom-nav button.active { color: #fff; background: var(--purple); }
.two-tab-nav, .student-home-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-bottom-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.admin-bottom-nav button { padding: 7px 2px; font-size: 11px; overflow-wrap: anywhere; }
.toast { transition: opacity .22s ease, transform .22s ease; }
body:has(.bottom-nav) .toast { bottom: calc(var(--nav-height) + 24px + env(safe-area-inset-bottom)); }

@media (min-width: 700px) {
  .app-shell { box-shadow: 0 0 80px #32234114; }
  body:has(.admin-bottom-nav) { --nav-height: 80px; }
  .admin-bottom-nav { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .admin-bottom-nav button { font-size: 10px; }
}
@media (max-width: 380px) {
  .topbar { gap: 8px; padding-inline: 12px; }
  .brand { gap: 6px; }
  .brand span:last-child { font-size: 12px; }
  .user-chip { gap: 5px; }
}