/* ===========================
   ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ
=========================== */
:root {
    --bg-gradient: radial-gradient(circle at top, #0b1b2f 0%, #020712 55%, #000000 100%);
    --glass-bg: rgba(10, 22, 46, 0.82);
    --glass-border: rgba(158, 224, 255, 0.35);
    --glass-shadow: 0 20px 45px rgba(0, 0, 0, 0.85);

    --accent: #4cf1ff;
    --accent-soft: rgba(76, 241, 255, 0.16);
    --accent-sec: #ff70ea;

    --text-main: #f3fbff;
    --text-muted: #a1b6d0;
    --danger: #ff6b8b;
    --success: #3dff9f;

    --radius-lg: 24px;
    --radius-md: 14px;
    --radius-sm: 999px;

    --blur-strong: 22px;
    --blur-soft: 14px;

    --transition-fast: 0.18s ease-out;
    --transition-normal: 0.22s ease-out;
}

/* ===========================
   БАЗА
=========================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    padding: 18px;
    background: var(--bg-gradient);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text-main);
}


/* на очень узких экранах убираем жёсткий центринг по высоте */
@media (max-width: 480px) {
    body {
        align-items: flex-start;
        padding: 14px;
    }
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition-fast), opacity var(--transition-fast);
}
a:hover {
    color: #8af7ff;
}

/* ===========================
   ОСНОВНЫЕ КОНТЕЙНЕРЫ
=========================== */

.app,
.box {
    width: 100%;
    max-width: 520px;
    margin: auto;
    background: var(--glass-bg);
    border-radius: var(--radius-lg);
    padding: 22px 18px 20px;
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(var(--blur-strong));
    position: relative;
    overflow: hidden;
}

/* лёгкий неоновый ореол в углу */
.app::before,
.box::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(76,241,255,0.26), transparent 70%);
    top: -80px;
    right: -60px;
    pointer-events: none;
    opacity: 0.8;
}
.app::after,
.box::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255,112,234,0.15), transparent 70%);
    bottom: -70px;
    left: -40px;
    pointer-events: none;
}

.app > * ,
.box > * {
    position: relative;
    z-index: 1;
}

/* шире для тренажёра/дешборда на десктопе */
@media (min-width: 880px) {
    .app.trainer-layout,
    .app.dashboard-layout {
        max-width: 860px;
        padding: 26px 26px 22px;
    }
}

/* ===========================
   ТИПОГРАФИКА
=========================== */

h1 {
    margin: 0 0 10px;
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #f6fcff;
    text-shadow: 0 0 18px rgba(76,241,255,0.9);
}

h3 {
    margin: 14px 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: #e0f3ff;
}

.subtitle {
    font-size: 13px;
    text-align: center;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 18px;
}

/* подписи/надписи вверху */
.topbar-text {
    font-size: 13px;
    color: var(--text-muted);
}

/* ===========================
   КНОПКИ
=========================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: linear-gradient(120deg, rgba(76,241,255,0.08), rgba(255,112,234,0.08));
    color: var(--text-main);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition:
        background var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal),
        transform var(--transition-fast),
        color var(--transition-fast);
    text-decoration: none;
    backdrop-filter: blur(var(--blur-soft));
}

/* Основные CTA на форму/действие — часто с width:100% inline в коде */
.btn.primary {
    background: linear-gradient(135deg, #4cf1ff, #7b7dff);
    color: #020618;
    box-shadow: 0 0 22px rgba(76,241,255,0.45);
}

/* по умолчанию все .btn на 100% ширину для форм (совместимо с твоим кодом) */
.btn {
    width: 100%;
}

/* маленькие/строчные кнопки в шапке, списках и т.п. */
.topbar .btn,
.subject .btn,
.topbar a.btn,
.subject a.btn {
    width: auto;
    padding-inline: 14px;
    font-size: 13px;
}

/* вторичные/тёмные */
.btn.s {
    background: rgba(8, 26, 54, 0.95);
    color: #c6e3ff;
    border-color: rgba(121, 191, 255, 0.45);
}

/* опасные (удалить) — сейчас ты используешь тот же класс + inline background */
.btn.danger {
    background: rgba(120, 30, 60, 0.9);
    border-color: rgba(255, 107, 139, 0.5);
    color: #ffe7f0;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 20px rgba(76,241,255,0.45);
    border-color: rgba(176, 237, 255, 0.7);
}
.btn:active {
    transform: translateY(0);
    box-shadow: 0 0 8px rgba(76,241,255,0.3);
}

/* чтобы ссылочные .btn не подсвечивались как обычные ссылки */
a.btn:hover {
    color: inherit;
}

/* ===========================
   ФОРМЫ
=========================== */

label {
    display: block;
    font-size: 13px;
    color: #e0f3ff;
    margin-top: 10px;
    margin-bottom: 2px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="file"] {
    width: 100%;
    padding: 10px 11px;
    border-radius: 11px;
    border: 1px solid rgba(113, 177, 255, 0.6);
    background: rgba(3, 15, 33, 0.9);
    color: var(--text-main);
    font-size: 14px;
    outline: none;
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast),
        transform var(--transition-fast);
}

input[type="file"] {
    padding: 8px 10px;
    font-size: 13px;
}

input:focus {
    border-color: rgba(76, 241, 255, 0.9);
    box-shadow: 0 0 0 1px rgba(76, 241, 255, 0.5);
    background: rgba(5, 18, 40, 0.98);
    transform: translateY(-0.5px);
}

/* чекбоксы/радио в тестах */
input[type="checkbox"],
input[type="radio"] {
    accent-color: #4cf1ff;
}

/* ===========================
   СООБЩЕНИЯ/ОШИБКИ
=========================== */

.error {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 107, 139, 0.08);
    border: 1px solid rgba(255, 107, 139, 0.45);
    color: var(--danger);
    font-size: 13px;
}

/* ===========================
   ШАПКА / НАВИГАЦИЯ
=========================== */

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    gap: 10px;
    font-size: 13px;
    color: var(--text-muted);
}

.toplink {
    font-size: 13px;
    color: var(--accent);
}
.toplink:hover {
    opacity: 0.9;
}

/* ===========================
   СПИСОК ПРЕДМЕТОВ (dashboard.php)
=========================== */

.subject {
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(158, 224, 255, 0.4);
    background: radial-gradient(circle at top left, rgba(76,241,255,0.12), rgba(4,19,40,0.9));
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    box-shadow: 0 12px 26px rgba(0,0,0,0.75);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.subject:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(0,0,0,0.85);
    border-color: rgba(199, 243, 255, 0.8);
}

.subject-title {
    font-size: 15px;
    font-weight: 500;
    color: #f4fbff;
}
.subject-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ===========================
   КАРТОЧКИ ВОПРОСОВ (trainer.php)
=========================== */

.card {
    background: rgba(7, 20, 45, 0.92);
    border-radius: 18px;
    border: 1px solid rgba(142, 210, 255, 0.4);
    padding: 16px 14px;
    margin-top: 18px;
    box-shadow: 0 16px 32px rgba(0,0,0,0.85);
    backdrop-filter: blur(var(--blur-soft));
}

.card h2 {
    margin: 0 0 6px;
    font-size: 18px;
}

.card small,
.card-note {
    font-size: 12px;
    color: var(--text-muted);
}

/* Варианты ответов */
.option {
    border: 1px solid rgba(126, 188, 255, 0.6);
    padding: 9px 10px;
    border-radius: 11px;
    margin: 7px 0;
    background: rgba(3, 16, 38, 0.96);
    display: flex;
    gap: 8px;
    font-size: 14px;
    align-items: flex-start;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
    cursor: pointer;
}
.option input {
    margin-top: 3px;
    flex-shrink: 0;
}
.option:hover {
    border-color: rgba(76,241,255,0.9);
    box-shadow: 0 0 16px rgba(76,241,255,0.35);
    transform: translateY(-1px);
}

/* правильный/неправильный ответы */
.option.correct {
    border-color: var(--success);
    background: radial-gradient(circle at left, rgba(61,255,159,0.35), rgba(3,16,38,0.98));
    box-shadow: 0 0 18px rgba(61,255,159,0.4);
}
.option.wrong {
    border-color: var(--danger);
    background: radial-gradient(circle at left, rgba(255,107,139,0.25), rgba(3,16,38,0.98));
    box-shadow: 0 0 18px rgba(255,107,139,0.35);
}

/* ===========================
   ТАБЫ (Обучение / Тест / Экзамен)
=========================== */

.tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 16px;
    margin: 4px 3px;
    border-radius: 999px;
    font-size: 13px;
    color: var(--text-muted);
    background: rgba(5, 20, 44, 0.9);
    border: 1px solid rgba(122, 188, 255, 0.5);
    cursor: pointer;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}
.tab:hover {
    box-shadow: 0 0 15px rgba(76,241,255,0.4);
    transform: translateY(-1px);
}
.tab.act {
    background: linear-gradient(135deg, #4cf1ff, #7b7dff);
    color: #020618;
    border-color: transparent;
    box-shadow: 0 0 20px rgba(76,241,255,0.7);
}

/* ===========================
   МЕЛОЧИ
=========================== */

.text-center {
    text-align: center;
}

.muted {
    color: var(--text-muted);
    font-size: 13px;
}

/* ссылки снизу у форм логина/регистрации */
.auth-footer {
    margin-top: 12px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}
.auth-footer a {
    color: var(--accent);
}

/* для маленьких экранов чуть ужимаем всё */
@media (max-width: 400px) {
    .app,
    .box {
        padding: 18px 14px 16px;
        border-radius: 18px;
    }
    h1 {
        font-size: 22px;
    }
}
.notice {
    margin: 14px 0;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(255, 180, 0, 0.15);
    border: 1px solid rgba(255, 200, 0, 0.35);
    backdrop-filter: blur(12px);
    color: #ffe9a8;
    font-size: 14px;
    line-height: 1.35;
    box-shadow: 0 0 12px rgba(255, 200, 0, 0.25);
    text-align: center;
}
.notice b {
    color: #fffbe0;
}
.notice {
    margin: 12px 0 18px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255, 200, 0, 0.12);
    border: 1px solid rgba(255, 210, 0, 0.35);
    backdrop-filter: blur(10px);
    color: #ffe9a8;
    font-size: 13px;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    box-shadow: 0 0 12px rgba(255, 200, 0, 0.15);
}

.notice-text b {
    color: #fffbe0;
}

.notice-close {
    background: rgba(255, 210, 0, 0.25);
    border: 1px solid rgba(255, 210, 0, 0.4);
    color: #fffbe0;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s;
}

.notice-close:hover {
    background: rgba(255, 210, 0, 0.35);
    box-shadow: 0 0 6px rgba(255, 210, 0, 0.4);
}
/* ==== Telegram Banner ==== */
.tg-banner {
    margin-top: 22px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(0, 220, 255, 0.12);
    border: 1px solid rgba(0, 220, 255, 0.35);
    backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    box-shadow: 0 0 22px rgba(0, 220, 255, 0.25);
    animation: tgPulse 3s infinite ease-in-out;
    position: relative;
}

@keyframes tgPulse {
    0%   { box-shadow: 0 0 14px rgba(0, 220, 255, 0.25); }
    50%  { box-shadow: 0 0 26px rgba(0, 220, 255, 0.45); }
    100% { box-shadow: 0 0 14px rgba(0, 220, 255, 0.25); }
}

.tg-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.tg-icon {
    font-size: 28px;
}

.tg-text {
    font-size: 14px;
    color: #dffaff;
    line-height: 1.35;
}

.tg-btn {
    padding: 10px 16px;
    background: linear-gradient(90deg, #0af, #4ef);
    color: #00121a;
    font-weight: 600;
    border-radius: 14px;
    text-decoration: none;
    white-space: nowrap;
}

.tg-close {
    position: absolute;
    top: 8px;
    right: 10px;
    cursor: pointer;
    font-size: 16px;
    color: #bdeaff;
    opacity: 0.8;
}
.tg-close:hover {
    opacity: 1;
}
/* ==== Telegram Banner ==== */
.tg-banner {
    margin-top: 22px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(0, 220, 255, 0.12);
    border: 1px solid rgba(0, 220, 255, 0.35);
    backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    box-shadow: 0 0 22px rgba(0, 220, 255, 0.25);
    animation: tgPulse 3s infinite ease-in-out;
    position: relative;
}

@keyframes tgPulse {
    0%   { box-shadow: 0 0 14px rgba(0, 220, 255, 0.25); }
    50%  { box-shadow: 0 0 26px rgba(0, 220, 255, 0.45); }
    100% { box-shadow: 0 0 14px rgba(0, 220, 255, 0.25); }
}

.tg-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.tg-icon {
    font-size: 28px;
}

.tg-text {
    font-size: 14px;
    color: #dffaff;
    line-height: 1.35;
}

.tg-btn {
    padding: 10px 16px;
    background: linear-gradient(90deg, #0af, #4ef);
    color: #00121a;
    font-weight: 600;
    border-radius: 14px;
    text-decoration: none;
    white-space: nowrap;
}

.tg-close {
    position: absolute;
    top: 8px;
    right: 10px;
    cursor: pointer;
    font-size: 16px;
    color: #bdeaff;
    opacity: 0.8;
}
.tg-close:hover {
    opacity: 1;
}
/* ==== Telegram Banner ==== */
.tg-banner {
    margin-top: 22px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(0, 220, 255, 0.12);
    border: 1px solid rgba(0, 220, 255, 0.35);
    backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    box-shadow: 0 0 22px rgba(0, 220, 255, 0.25);
    animation: tgPulse 3s infinite ease-in-out;
    position: relative;
}

@keyframes tgPulse {
    0%   { box-shadow: 0 0 14px rgba(0, 220, 255, 0.25); }
    50%  { box-shadow: 0 0 26px rgba(0, 220, 255, 0.45); }
    100% { box-shadow: 0 0 14px rgba(0, 220, 255, 0.25); }
}

.tg-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.tg-icon {
    font-size: 28px;
}

.tg-text {
    font-size: 14px;
    color: #dffaff;
    line-height: 1.35;
}

.tg-btn {
    padding: 10px 16px;
    background: linear-gradient(90deg, #0af, #4ef);
    color: #00121a;
    font-weight: 600;
    border-radius: 14px;
    text-decoration: none;
    white-space: nowrap;
}

.tg-close {
    position: absolute;
    top: 8px;
    right: 10px;
    cursor: pointer;
    font-size: 16px;
    color: #bdeaff;
    opacity: 0.8;
}
.tg-close:hover {
    opacity: 1;
}
.subject {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 14px 16px;
    background: rgba(4,18,38,0.75);
    border-radius: 20px;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(128,190,255,0.18);

    margin-top: 14px;
    gap: 14px;
    transition: 0.25s;
}

.subject:hover {
    transform: translateY(-2px);
    border-color: rgba(78,255,245,0.5);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
.subject {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 14px 16px;
    background: rgba(4,18,38,0.75);
    border-radius: 20px;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(128,190,255,0.18);

    margin-top: 14px;
    gap: 14px;
    transition: 0.25s;
}

.subject:hover {
    transform: translateY(-2px);
    border-color: rgba(78,255,245,0.5);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
#scroll_fab {
    position: fixed;
    bottom: 22px;
    right: 22px;
    width: 48px;
    height: 48px;

    background: rgba(76,241,255,0.18);
    border: 1px solid rgba(76,241,255,0.45);
    backdrop-filter: blur(10px);

    border-radius: 50%;
    color: #c8f7ff;
    font-size: 26px;
    font-weight: bold;

    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    box-shadow: 0 0 14px rgba(76,241,255,0.25);
    transition: 0.25s;
    z-index: 9999;
    opacity: 0.55;        /* едва заметная */
}

#scroll_fab:hover {
    opacity: 1;
    transform: scale(1.12);
    box-shadow: 0 0 22px rgba(76,241,255,0.5);
}
/* Toast system (NEW, separate) */
.toast-layer{position:fixed;inset:0;z-index:99999;pointer-events:none;}
.toast-stack{position:absolute;display:flex;flex-direction:column;gap:10px;padding:14px;max-width:min(420px,calc(100vw - 28px));}
.toast-br{right:0;bottom:0;align-items:flex-end;}
.toast-bl{left:0;bottom:0;}
.toast-tr{right:0;top:0;align-items:flex-end;}
.toast-tl{left:0;top:0;}

.toast{
  pointer-events:auto;
  border-radius:18px;
  border:1px solid rgba(255,209,80,.30);
  background:
    radial-gradient(900px 240px at 65% 35%, rgba(255,217,102,.18), transparent 55%),
    radial-gradient(720px 240px at 25% 70%, rgba(0,240,255,.14), transparent 55%),
    rgba(3, 18, 34, 0.78);
  backdrop-filter: blur(14px);
  box-shadow: 0 0 18px rgba(0,220,255,.12), 0 0 30px rgba(255,209,80,.08);
  padding:12px;
  color:#eaf7ff;
  transform: translateY(8px);
  opacity:0;
  animation: toastIn .25s ease-out forwards;
}
@keyframes toastIn{to{transform:translateY(0);opacity:1;}}

.toast-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px;}
.toast-title{font-weight:900;font-size:14px;color:#fff;}
.toast-close{
  cursor:pointer;opacity:.85;font-size:16px;line-height:1;
  padding:2px 6px;border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.12);
}
.toast-close:hover{opacity:1;}
.toast-body{font-size:13px;line-height:1.45;color:rgba(230,250,255,.92);}
.toast a{color:#ffd97a;font-weight:800;text-decoration:none;}
.toast a:hover{text-decoration:underline;}