/* ============================================================
   LiteMath — основные стили приложения.

   Раньше этот CSS лежал прямо в resources/views/layouts/app.blade.php
   одним блоком <style> на 19,5 КБ. Он уходил в КАЖДЫЙ HTML-ответ
   заново: браузеру нечего было кешировать, и лишние 19,5 КБ ехали
   по сети на каждый переход между страницами.

   Теперь это отдельный файл. Подключается в макете с меткой версии
   (?v=время_изменения_файла), поэтому после деплоя браузер подтянет
   новую редакцию, а между деплоями будет брать из кеша.

   Правится здесь, а не в шаблоне.
   ============================================================ */

:root {
    /* Премиум-техно: глубокий фон, стекло, свечение (ТЁМНАЯ — по умолчанию) */
    --bg:        #0d1117;       /* почти чёрный сине-графит */
    --bg-2:      #131a24;
    --surface:   rgba(255,255,255,.045);   /* стеклянная карточка */
    --surface-2: rgba(255,255,255,.07);
    --popover:   #1a2030;       /* плотный фон выпадающих меню */
    --glass-brd: rgba(255,255,255,.10);     /* граница стекла */
    --glass-hi:  rgba(255,255,255,.16);

    --text:      #e8ecf3;       /* основной текст — почти белый */
    --text-soft: #9aa4b5;       /* вторичный */
    --text-faint:#5f6b7e;

    --accent:    #5b8cff;       /* электрик-синий — главный акцент */
    --accent-2:  #38bdf8;       /* голубое свечение */
    --violet:    #8b7cff;
    --mint:      #34d399;       /* успех */
    --amber:     #fbbf24;       /* внимание */
    --rose:      #fb7185;       /* ошибка/доработка */

    --r:    16px;
    --r-sm: 10px;
    --r-md: 14px;
    --glow: 0 0 0 1px var(--glass-brd), 0 8px 30px rgba(0,0,0,.35);
    --glow-accent: 0 0 24px rgba(91,140,255,.35);
    --header-bg: rgba(13,17,23,.6);
}

/* СВЕТЛАЯ ТЕМА — чистый дневной режим, те же акценты */
html[data-theme="light"] {
    --bg:        #f4f6fb;       /* мягкий светлый фон */
    --bg-2:      #e9edf6;
    --surface:   #ffffff;       /* белые карточки */
    --surface-2: #f0f3f9;
    --popover:   #ffffff;       /* плотный фон выпадающих меню */
    --glass-brd: rgba(15,23,42,.12);
    --glass-hi:  rgba(15,23,42,.22);

    --text:      #16202e;       /* почти чёрный текст */
    --text-soft: #54637a;
    --text-faint:#8a98ab;

    --accent:    #2f6bff;       /* чуть глубже синий — контраст на белом */
    --accent-2:  #0ea5e9;
    --violet:    #7c5cff;
    --mint:      #0d9f6e;
    --amber:     #c98a04;
    --rose:      #e11d48;

    --glow: 0 0 0 1px var(--glass-brd), 0 8px 24px rgba(15,23,42,.08);
    --glow-accent: 0 0 20px rgba(47,107,255,.22);
    --header-bg: rgba(244,246,251,.75);
}

/* Кнопка переключения темы */
.theme-toggle {
    background: var(--surface); border: 1px solid var(--glass-brd);
    color: var(--text); width: 38px; height: 38px; border-radius: 10px;
    cursor: pointer; font-size: 1.05rem; display: inline-flex;
    align-items: center; justify-content: center; transition: all .15s ease; padding: 0;
}
.theme-toggle:hover { border-color: var(--glass-hi); background: var(--surface-2); }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary::marker { content: ''; }
.more-menu summary::-webkit-details-marker { display: none; }
.more-menu summary::marker { content: ''; }
.more-block summary::-webkit-details-marker { display: none; }
.more-block summary::marker { content: ''; }
.more-block summary:hover { color: var(--text); }
.more-menu summary:hover { color: var(--text); }
.more-menu > div a:hover { color: var(--text); background: var(--surface-2); }

* { box-sizing: border-box; }

body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text-soft);
    margin: 0;
    line-height: 1.7;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    /* Атмосферный фон: мягкие световые пятна */
    background-image:
        radial-gradient(900px 500px at 12% -8%, rgba(91,140,255,.14), transparent 60%),
        radial-gradient(800px 500px at 100% 0%, rgba(56,189,248,.10), transparent 55%),
        radial-gradient(700px 600px at 50% 120%, rgba(139,124,255,.08), transparent 60%);
    background-attachment: fixed;
    min-height: 100vh;
}

.wrap { max-width: 1000px; margin: 0 auto; padding: 0 1.5rem; }

h1, h2, h3, h4 { font-family: 'Inter Tight', system-ui, sans-serif; color: var(--text); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
h1 { font-size: 2.4rem; margin: .2rem 0 .5rem; }
h2 { font-size: 1.65rem; margin: 2rem 0 .8rem; }
h3 { font-size: 1.25rem; margin: 1.3rem 0 .5rem; }
h4 { font-size: 1.08rem; margin: 1rem 0 .4rem; }
p { line-height: 1.7; }
a { color: var(--accent); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--accent-2); }

.eyebrow { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--accent); margin-bottom: .4rem; }

/* Стеклянная шапка */
.site-header { background: var(--header-bg); backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid var(--glass-brd); position: sticky; top: 0; z-index: 50; }
.site-header .wrap { display: flex; align-items: center; gap: 1.8rem; height: 66px; }
/* Бренд не сжимается и не переносится: раньше при переполнении меню
   он сдавливался и «Мой кабинет» вставало в две строки. */
.brand { font-family: 'Inter Tight'; font-weight: 700; font-size: 1.2rem; color: var(--text); display: flex; align-items: center; gap: .6rem; letter-spacing: -.01em; flex: 0 0 auto; white-space: nowrap; }
.brand:hover { color: var(--text); }
.brand:hover .mark { box-shadow: 0 0 28px rgba(91,140,255,.5); }
.brand .mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(140deg, var(--accent), var(--accent-2)); color: #06101f; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; font-weight: 800; box-shadow: var(--glow-accent); }
/* Перенос оставлен запасным вариантом на узких окнах: сами меню
   разбиты на разделы «Ещё ▾», поэтому в норме всё влезает в строку.
   Прокрутку вбок здесь ставить НЕЛЬЗЯ: overflow-x на флекс-контейнере
   обрезает и по вертикали, и выпадающие разделы оказались бы срезаны.
   На мобильных прокрутка есть — там ниже в медиазапросе выпадашки
   переведены в position: fixed. */
nav.main { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; min-width: 0; }
nav.main a { color: var(--text-soft); font-weight: 600; font-size: .9rem; padding: .25rem 0; position: relative; white-space: nowrap; flex: 0 0 auto; }
nav.main a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -3px; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 2px; transition: right .25s ease; }
nav.main a:hover { color: var(--text); }
nav.main a:hover::after { right: 0; }
.nav-right { margin-left: auto; }

main.wrap { padding-top: 2.4rem; padding-bottom: 4rem; animation: rise .5s cubic-bezier(.2,.7,.3,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Кнопки */
button, .btn {
    font-family: 'Inter', sans-serif; font-size: .9rem; font-weight: 600;
    background: linear-gradient(135deg, var(--accent), #4a7cf0); color: #fff; border: 0;
    padding: .68rem 1.5rem; border-radius: var(--r-sm); cursor: pointer;
    text-decoration: none; display: inline-block; letter-spacing: .01em;
    transition: all .25s cubic-bezier(.2,.7,.3,1); box-shadow: 0 4px 14px rgba(91,140,255,.3);
}
button:hover, .btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(91,140,255,.45); }
.btn-secondary { background: linear-gradient(135deg, var(--amber), #f59e0b); color: #1a1205; box-shadow: 0 4px 14px rgba(251,191,36,.3); }
.btn-secondary:hover { box-shadow: 0 8px 24px rgba(251,191,36,.45); color: #1a1205; }
.btn-outline { background: transparent; border: 1px solid var(--accent); color: var(--accent); box-shadow: none; font-weight: 600; }
.btn-outline:hover { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 8px 24px rgba(91,140,255,.35); }
.btn-ghost { background: transparent; color: var(--text-soft); border: 1px solid var(--glass-brd); box-shadow: none; }
.btn-ghost:hover { background: var(--surface); color: var(--text); box-shadow: none; transform: none; }
.btn-sm { padding: .4rem .9rem; font-size: .82rem; }

/* Стеклянные карточки */
.card { position: relative; background: var(--surface); border: 1px solid var(--glass-brd); border-radius: var(--r); padding: 1.8rem 2rem; margin-bottom: 1.4rem; backdrop-filter: blur(12px); box-shadow: var(--glow); transition: all .3s cubic-bezier(.2,.7,.3,1); }
.card.hoverable:hover { transform: translateY(-3px); border-color: var(--glass-hi); background: var(--surface-2); box-shadow: 0 0 0 1px var(--glass-hi), 0 16px 44px rgba(0,0,0,.45); }

/* Формы */
label { display: block; margin: .9rem 0 .35rem; font-weight: 600; font-size: .88rem; color: var(--text); }
input, select, textarea {
    width: 100%; padding: .65rem .85rem; border: 1px solid var(--glass-brd);
    border-radius: var(--r-sm); font-family: inherit; font-size: .95rem;
    background: rgba(255,255,255,.04); color: var(--text); transition: all .2s ease;
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91,140,255,.2); background: rgba(255,255,255,.06); }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--accent); }
select option { background: var(--bg-2); color: var(--text); }

/* Таблицы */
table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--glass-brd); border-radius: var(--r); overflow: hidden; margin: 1.2rem 0; backdrop-filter: blur(12px); }
thead { background: rgba(255,255,255,.05); }
th { padding: .9rem 1.1rem; text-align: left; font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); }
td { padding: .85rem 1.1rem; border-bottom: 1px solid var(--glass-brd); color: var(--text-soft); font-size: .94rem; }
tr:hover td { background: rgba(255,255,255,.03); color: var(--text); }
tr:last-child td { border-bottom: 0; }

/* Семантические блоки */
.definition { background: rgba(91,140,255,.08); border: 1px solid rgba(91,140,255,.25); border-left: 3px solid var(--accent); border-radius: var(--r-sm); padding: 1.3rem 1.6rem; margin: 1.3rem 0; }
.definition strong { color: var(--accent-2); font-weight: 700; }
.tip { background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.25); border-left: 3px solid var(--mint); border-radius: var(--r-sm); padding: 1.2rem 1.6rem; margin: 1.3rem 0; }
.answer-box { background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.35); border-radius: var(--r-sm); padding: 1.3rem 1.8rem; margin: 1.3rem 0; text-align: center; }
.answer-box strong, .answer-box h4 { color: var(--amber); font-weight: 700; }

/* Шаг решения */
.step { display: flex; gap: 1.2rem; margin-bottom: 1.3rem; padding: 1.3rem 1.5rem; background: var(--surface); border: 1px solid var(--glass-brd); border-radius: var(--r-sm); }
.step-number { width: 38px; height: 38px; min-width: 38px; display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--accent), var(--accent-2)); color: #06101f; border-radius: 10px; font-weight: 800; font-size: 1.05rem; }
.step-content h5 { color: var(--text); margin: 0 0 .3rem; font-weight: 700; }
.step-content p { margin: 0; font-size: .94rem; line-height: 1.6; }

/* Уведомления */
.status, .warning, .error-box { padding: .9rem 1.3rem; border-radius: var(--r-sm); margin-bottom: 1.4rem; font-size: .94rem; border: 1px solid; backdrop-filter: blur(8px); }
.status { background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.3); color: var(--mint); }
.warning { background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.3); color: var(--amber); }
.error-box { background: rgba(251,113,133,.1); border-color: rgba(251,113,133,.3); color: var(--rose); }
.error { color: var(--rose); font-size: .86rem; margin-top: .2rem; }

/* Бейджи */
.badge { display: inline-block; font-size: .68rem; font-weight: 700; padding: .2rem .65rem; border-radius: 100px; letter-spacing: .06em; text-transform: uppercase; border: 1px solid transparent; }
.badge-success { background: rgba(52,211,153,.14); color: var(--mint); border-color: rgba(52,211,153,.3); }
.badge-warn { background: rgba(251,191,36,.14); color: var(--amber); border-color: rgba(251,191,36,.3); }
.badge-info { background: rgba(91,140,255,.14); color: var(--accent); border-color: rgba(91,140,255,.3); }
.badge-orange { background: rgba(251,191,36,.14); color: var(--amber); border-color: rgba(251,191,36,.3); }

.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin: 1.3rem 0; }
.rule { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--glass-brd) 30%, var(--glass-brd) 70%, transparent); margin: 2rem 0; }

/* Сетка плашек-инструментов */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .9rem; margin: 1.2rem 0 1.8rem; }
.tool-tile { display: flex; flex-direction: column; gap: .25rem; padding: 1.1rem 1.2rem; background: var(--surface); border: 1px solid var(--glass-brd); border-radius: var(--r-sm); text-decoration: none; transition: all .25s cubic-bezier(.2,.7,.3,1); backdrop-filter: blur(10px); }
.tool-tile:hover { transform: translateY(-3px); border-color: var(--glass-hi); background: var(--surface-2); box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.tool-tile .t-title { font-family: 'Inter Tight'; font-weight: 700; color: var(--text); font-size: 1rem; }
.tool-tile .t-desc { font-size: .82rem; color: var(--text-faint); line-height: 1.4; }

/* Счётчики-метрики */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.6rem; }
.metric { padding: 1.3rem 1.4rem; background: var(--surface); border: 1px solid var(--glass-brd); border-radius: var(--r); backdrop-filter: blur(12px); }
.metric .m-value { font-family: 'Inter Tight'; font-size: 2.3rem; font-weight: 700; line-height: 1; }
.metric .m-label { font-size: .82rem; color: var(--text-faint); margin-top: .3rem; text-transform: uppercase; letter-spacing: .08em; }

/* ── Палитра в разметке: переиспользуемые утилиты ── */
/* Цвет текста токеном — вместо инлайнового color:var(--…) */
.c-accent { color: var(--accent); }
.c-mint   { color: var(--mint); }
.c-amber  { color: var(--amber); }
.c-violet { color: var(--violet); }
.c-rose   { color: var(--rose); }
.c-soft   { color: var(--text-soft); }
.c-faint  { color: var(--text-faint); }
.c-ink    { color: var(--text); }

/* Цветные варианты метрик — тон под смысл */
.metric-mint   { background: rgba(52,211,153,.10); border-color: rgba(52,211,153,.30); }
.metric-amber  { background: rgba(251,191,36,.10); border-color: rgba(251,191,36,.30); }
.metric-accent { background: rgba(91,140,255,.10); border-color: rgba(91,140,255,.30); }
.metric-mint   .m-value { color: var(--mint); }
.metric-amber  .m-value { color: var(--amber); }
.metric-accent .m-value { color: var(--accent); }

/* Лёгкая панель (легче .card) + цветной акцент слева */
.panel { background: var(--surface); border: 1px solid var(--glass-brd); border-radius: var(--r-sm); padding: 1rem 1.2rem; margin-bottom: 1.3rem; backdrop-filter: blur(8px); }
.panel-accent { border-left: 4px solid var(--accent); }
.panel-violet { border-left: 4px solid var(--violet); }
.panel-mint   { border-left: 4px solid var(--mint); }
.panel-amber  { border-left: 4px solid var(--amber); }
.panel-rose   { border-left: 4px solid var(--rose); }

/* Закреплённая навигация по разделам ученика (кабинет учителя) */
.student-nav { position: sticky; top: 66px; z-index: 40; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .6rem 0; margin-bottom: 1.4rem; background: var(--bg); }
.student-nav .sn-name { font-weight: 700; color: var(--text); margin-right: .3rem; }
.student-nav .sn-spacer { flex: 1 1 auto; }
@media (max-width: 768px) { .student-nav .sn-spacer { display: none; } }

/* KaTeX: читаемый размер, аккуратный перенос */
/* Формулы: полный контраст на любом фоне (приглушённый цвет текста
   на тёмной теме сливал две линии «=» в одну — читалось как минус)
   и умещение на узких экранах без горизонтальной прокрутки. */
.katex { font-size: 1.08em; color: var(--text); }
.katex-display { margin: .8rem 0; overflow-x: auto; overflow-y: hidden; padding: .2rem 0; }
.katex-display > .katex { white-space: normal; }
.katex .mrel, .katex .mbin { color: var(--text); }
@media (max-width: 640px) {
    .katex { font-size: 1em; }
    .katex-display { font-size: .94em; }
    .tex-table { display: block; overflow-x: auto; max-width: 100%; }
}
@media (max-width: 420px) {
    .katex { font-size: .92em; }
    .katex-display { font-size: .88em; }
}
.tex-table { border-collapse: collapse; margin: .6rem 0; }
.tex-table td { border: 1px solid var(--glass-brd); padding: .3rem .65rem; }
.tex-list { margin: .45rem 0 .45rem 1.25rem; padding: 0; }
.tex-list li { margin: .22rem 0; }

/* Подвал */
.site-footer { border-top: 1px solid var(--glass-brd); background: var(--header-bg); backdrop-filter: blur(12px); padding: 1.8rem 0; margin-top: 2.5rem; }
.site-footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.powered { font-size: .88rem; color: var(--text-soft); }
.powered strong { color: var(--text); font-weight: 600; }

@media (max-width: 768px) {
    .site-header .wrap { gap: 1rem; }
    nav.main { gap: 1.1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding-bottom: .2rem; }
    nav.main a { white-space: nowrap; }
    /* «Ещё»: на мобильном overflow-x у nav обрезал absolute-выпадашку —
       выносим её из потока прокрутки и прижимаем к правому краю экрана. */
    nav.main { position: static; }
    .more-menu { position: static !important; }
    .more-menu[open] > div {
        position: fixed; left: auto; right: 12px; top: 60px;
        min-width: 220px; max-width: calc(100vw - 24px);
        max-height: 70vh; overflow-y: auto;
    }
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.35rem; }
    .card { padding: 1.3rem; }
    .two-column { grid-template-columns: 1fr; gap: 1.2rem; }
    .wrap { padding: 0 1.1rem; }
    .metric .m-value { font-size: 2rem; }
}
@media (max-width: 420px) {
    .tool-grid { grid-template-columns: 1fr 1fr; }
    .metric-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   Обёртка интерактивных виджетов тетради (.lm-trainer).

   Тренажёры приходят со своими цветами (тёмная палитра автора).
   Здесь они переопределяются переменными приложения, поэтому виджет
   подхватывает и светлую, и тёмную тему. !important нужен потому,
   что автор объявляет переменные на #id — по обычным правилам
   специфичности перебить их нельзя.

   Раньше эти правила жили в partials/trainer_theme.blade.php, и его
   надо было не забыть подключить на каждой странице с виджетом. На
   учительской «Разбор темы» про это забыли — виджеты там ломались.
   Теперь правила всегда на месте: они ни на что не влияют, пока на
   странице нет .lm-trainer.
   ============================================================ */

.lm-trainer > div[id] {
    --lm-bg: var(--surface) !important;
    --lm-card: var(--surface-2) !important;
    --lm-card2: var(--surface) !important;
    --lm-border: var(--glass-brd) !important;
    --lm-text: var(--text) !important;
    --lm-text2: var(--text-soft) !important;
    --lm-blue: var(--accent) !important;
    --lm-blue-deep: var(--accent) !important;
    --lm-orange: var(--amber) !important;
    --lm-ok: var(--mint) !important;
    --lm-bad: var(--rose) !important;
    max-width: 100% !important;
}
/* Рамка вместо «карточки в карточке» — фон уже даёт страница. */
.lm-trainer > div[id] { border: 1px solid var(--glass-brd); }
.lm-trainer svg text { fill: var(--text); }