/* ======================================================
   TestBot — дизайн идентичен claude_bot/webapp/frontend
   ====================================================== */

:root {
  --bg-color:     #060608;
  --text:         #ffffff;
  --hint:         rgba(255,255,255,0.75);
  --secondary:    rgba(255,255,255,0.08);
  --radius:       14px;
  --nav-height:   64px;
  --safe-top:     env(safe-area-inset-top, 0px);
  --safe-bottom:  env(safe-area-inset-bottom, 0px);

  /* Apple Liquid Glass */
  --glass-bg:     rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.32);
  --glass-shine:  rgba(255,255,255,0.18);
  --glass-blur:   blur(3px) saturate(1.6) brightness(1.10);
  --glass-shadow:
    0 1px 0 rgba(255,255,255,0.55) inset,
    0 -1px 0 rgba(0,0,0,0.10) inset,
    0 8px 32px rgba(0,0,0,0.20);

  /* Header/Nav */
  --nav-bg:       rgba(255,255,255,0.04);
  --header-bg:    rgba(255,255,255,0.04);

  /* Accent (совместимость) */
  --accent:       #90b8ff;
  --accent-dim:   rgba(144,184,255,0.15);
  --accent-hover: #a5c8ff;

  /* Status */
  --green:  #34d399;
  --yellow: #fbbf24;
  --red:    #f87171;
}

/* ---- LIGHT THEME ---- */
body.theme-light {
  --bg-color:     #ffffff;
  --text:         #0a0a0a;
  --hint:         rgba(0,0,0,0.55);
  --secondary:    rgba(0,0,0,0.06);
  --glass-bg:     rgba(0,0,0,0.04);
  --glass-border: rgba(0,0,0,0.18);
  --glass-shadow: 0 1px 0 rgba(255,255,255,0.80) inset, 0 -1px 0 rgba(0,0,0,0.08) inset, 0 4px 24px rgba(0,0,0,0.10);
  --nav-bg:       rgba(0,0,0,0.04);
  --header-bg:    rgba(0,0,0,0.04);
  --green:  #059669;
  --yellow: #d97706;
  --red:    #dc2626;
  --accent: #1a2a8f;
}

/* ---- DARK GRAY THEME ---- */
body.theme-darkgray {
  --bg-color:     #2a2a2e;
  --text:         #e0ddd8;
  --hint:         rgba(224,221,216,0.65);
  --secondary:    rgba(224,221,216,0.08);
  --glass-bg:     rgba(255,255,255,0.05);
  --glass-border: rgba(255,255,255,0.18);
  --glass-shadow: 0 1px 0 rgba(255,255,255,0.30) inset, 0 -1px 0 rgba(0,0,0,0.15) inset, 0 6px 24px rgba(0,0,0,0.25);
  --nav-bg:       rgba(255,255,255,0.05);
  --header-bg:    rgba(255,255,255,0.05);
  --green:  #34d399;
  --yellow: #fbbf24;
  --red:    #f87171;
  --accent: #b0ada8;
}
body.theme-darkgray {
  background: #2a2a2e !important;
}

/* ---- BEIGE THEME — Liquid Glass ---- */
body.theme-beige {
  --bg-color:     #faf8f5;
  --text:         #5a5550;
  --hint:         rgba(58,53,48,0.55);
  --secondary:    rgba(58,53,48,0.07);
  --glass-bg:     rgba(255,255,255,0.55);
  --glass-border: rgba(255,255,255,0.70);
  --glass-shadow:
    0 1px 0 rgba(255,255,255,0.90) inset,
    0 -1px 0 rgba(0,0,0,0.04) inset,
    0 4px 24px rgba(58,53,48,0.08);
  --glass-blur:   blur(20px) saturate(1.4) brightness(1.05);
  --nav-bg:       rgba(255,255,255,0.50);
  --header-bg:    rgba(255,255,255,0.50);
  --green:  #059669;
  --yellow: #d97706;
  --red:    #dc2626;
  --accent: #4a4a4a;
}
body.theme-beige {
  background: #f3eee7 !important;
}

/* ---- RESET & BASE ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif;
  font-weight: 500;
  background: #000 !important;
  color: var(--text);
  min-height: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}
html {
  background: #000;
}
body.theme-light {
  background: #ffffff !important;
}


a { color: inherit; text-decoration: none; }
code {
  font-family: ui-monospace, monospace;
  background: rgba(255,255,255,0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: .85em;
}
body.theme-light code { background: rgba(255,255,255,0.1); }

/* ---- HEADER ---- */
.page-header {
  position: fixed;
  top: var(--safe-top);
  left: 0; right: 0;
  z-index: 100;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--glass-border);
}
.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.logo {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -.4px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #90b8ff 0%, #1a2a8f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.header-nav {
  display: flex;
  gap: 4px;
  flex: 1;
}
.nav-link {
  padding: 6px 14px;
  border-radius: 10px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--hint);
  transition: background .15s, color .15s;
}
.nav-link:hover, .nav-link.active {
  background: var(--glass-bg);
  color: var(--text);
}
.header-user {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-size: .85rem;
}
.user-badge {
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--accent-dim);
  color: #90b8ff;
  font-size: .78rem;
  font-weight: 600;
}
.user-badge.teacher { background: rgba(52,211,153,0.15); color: var(--green); }
.user-name { color: var(--hint); }
.logout-btn {
  color: rgba(255,255,255,0.4);
  font-size: .82rem;
  transition: color .15s;
}
.logout-btn:hover { color: var(--red); }
body.theme-light .logout-btn { color: rgba(255,255,255,0.4); }

/* ---- BOTTOM NAV ---- */
.bottom-nav {
  position: fixed;
  bottom: var(--safe-bottom);
  left: 0; right: 0;
  z-index: 100;
  display: flex;
  background: var(--nav-bg);
  border-top: 1px solid var(--glass-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  color: rgba(255,255,255,0.38);
  gap: 4px;
  font-size: .7rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: color .15s;
}
.nav-btn svg { width: 22px; height: 22px; fill: currentColor; }
.nav-btn.active, .nav-btn:hover { color: #90b8ff; }
.nav-btn svg,
.nav-btn svg path { fill: url(#icon-grad) !important; }
body.theme-light .nav-btn { color: rgba(255,255,255,0.38); }
body.theme-light .nav-btn.active { color: #90b8ff; }

/* ---- MAIN CONTENT ---- */
.main-content {
  padding-top: calc(56px + var(--safe-top));
  padding-bottom: 20px;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}
.main-content.no-header { padding-top: 0; }

/* Залогиненный режим: body не скролится, контент скролится между панелями */
body.logged-in {
  height: 100%;
  overflow: hidden;
}
body.logged-in .main-content {
  position: fixed;
  top: calc(56px + var(--safe-top));
  left: 0; right: 0;
  bottom: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  min-height: unset;
  padding-bottom: 20px;
  z-index: 1;
}

/* ---- PAGE INNER ---- */
.page-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 64px 20px 24px;
}

/* ---- FLASH ---- */
.flash-container {
  max-width: 960px;
  margin: 0 auto 0;
  padding: 0 20px;
}
.flash {
  padding: 12px 18px;
  border-radius: var(--radius);
  margin-bottom: 10px;
  font-size: .9rem;
  border: 1px solid;
}
.flash-success { background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.3); color: var(--green); }
.flash-error   { background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.3); color: var(--red); }
.flash-info    { background: var(--accent-dim); border-color: rgba(91,108,247,0.3); color: #90b8ff; }

/* ---- LENS CARD / GLASS CARD — Liquid Glass ---- */
.lens-card, .glass-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius);
  box-shadow:
    0 2px 0 rgba(255,255,255,0.75) inset,
    0 -2px 0 rgba(255,255,255,0.55) inset,
    1px 0 0 rgba(255,255,255,0.10) inset,
    -1px 0 0 rgba(255,255,255,0.06) inset,
    0 8px 32px rgba(0,0,0,0.30),
    0 2px 6px rgba(0,0,0,0.18);
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: transform .15s, box-shadow .2s;
}
/* Полоска света сверху */
.lens-card::after, .glass-card::after {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.85) 25%,
    rgba(255,255,255,1.00) 50%,
    rgba(255,255,255,0.85) 75%,
    transparent);
  pointer-events: none;
}
/* Верхний свет глубины */
.lens-card::before, .glass-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, transparent 100%);
  border-radius: inherit;
  pointer-events: none;
}
.lens-card:hover, .glass-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 2px 0 rgba(255,255,255,0.85) inset,
    0 -1px 0 rgba(0,0,0,0.22) inset,
    0 14px 40px rgba(0,0,0,0.35),
    0 2px 8px rgba(0,0,0,0.20);
}

/* ---- BUTTONS ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 12px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .15s;
  text-decoration: none;
  line-height: 1;
}
.btn:active { transform: none; }
.btn-full { width: 100%; }
.btn-lg { padding: 14px 28px; font-size: 1rem; }
.btn-sm { padding: 7px 14px; font-size: .82rem; }
.btn-xs { padding: 4px 10px; font-size: .78rem; }

/* ---- FIELDS ---- */
.field { margin-bottom: 16px; }
.field-label {
  display: block;
  font-size: .83rem;
  font-weight: 500;
  color: var(--hint);
  margin-bottom: 6px;
}
.required { color: var(--red); }
.field-input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--text);
  font-size: .92rem;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
  -webkit-appearance: none;
}
.field-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(144,184,255,0.15);
}
.field-input::placeholder { color: rgba(255,255,255,0.28); }
body.theme-light .field-input { background: rgba(255,255,255,0.06); color: #fff; }
body.theme-light .field-input::placeholder { color: rgba(255,255,255,0.28); }
.field-textarea { min-height: 100px; resize: vertical; }

/* ---- AUTH PAGES ---- */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.auth-card { max-width: 400px; width: 100%; }

/* Перетаскиваемое окно */
.draggable-window {
  position: relative;
  background: transparent !important;
  cursor: default;
  user-select: none;
}
body.theme-light .draggable-window {
  background: transparent !important;
}

/* Заголовочная полоска — зона для перетаскивания */
.auth-window-bar {
  height: 18px;
  margin: -20px -20px 16px;
  cursor: move;
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
body.theme-light .auth-window-bar { border-bottom-color: rgba(255,255,255,0.07); }

/* Кружки macOS */
.light {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 1px 3px rgba(0,0,0,0.35);
}
.light-red    { background: #ff5f57; }
.light-yellow { background: #ffbd2e; }
.light-green  { background: #28c940; }
.auth-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 6px; }
.auth-sub { font-size: .88rem; color: var(--hint); margin-bottom: 20px; line-height: 1.5; }
.auth-form { margin-top: 20px; }
.auth-link { text-align: center; margin-top: 16px; font-size: .88rem; color: var(--hint); }
.auth-link a { color: #90b8ff; text-decoration: underline; }

/* Role tabs */
.role-tabs {
  display: flex;
  background: transparent;
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
}
.role-tab {
  flex: 1;
  padding: 9px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--hint);
  font-family: inherit;
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.role-tab.active {
  background: var(--glass-bg);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ---- PAGE HERO ---- */
.page-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.page-title { font-size: 1.6rem; font-weight: 700; letter-spacing: -.5px; }
.page-sub { font-size: .9rem; color: var(--hint); margin-top: 4px; }
.section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--hint);
  margin: 24px 0 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: .82rem;
}

/* ---- LANDING ---- */
.landing { min-height: 100vh; display: flex; flex-direction: column; }
.landing-hero {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px 40px;
  background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(144,184,255,0.15), transparent);
}
.landing-glass {
  text-align: center;
  max-width: 480px;
}
.landing-title {
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-weight: 800;
  letter-spacing: -1px;
  background: linear-gradient(180deg, #90b8ff 0%, #1a2a8f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px;
}
.landing-sub { font-size: 1.1rem; color: var(--hint); margin-bottom: 32px; }
.landing-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.landing-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  padding: 0 20px 40px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}
.feature-card {
  text-align: center;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.38) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.60) inset,
    0 -1px 0 rgba(0,0,0,0.12) inset,
    0 6px 24px rgba(0,0,0,0.22) !important;
  cursor: default;
}
.feature-card:hover {
  background: rgba(255,255,255,0.06) !important;
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.70) inset,
    0 -1px 0 rgba(0,0,0,0.12) inset,
    0 12px 36px rgba(0,0,0,0.28) !important;
}
/* Убираем specular-градиент с карточек-линз */
.feature-card::before {
  content: none !important;
}
.feature-card::after {
  content: none !important;
}

.feature-icon {
  width: 52px; height: 52px;
  background: rgba(144,184,255,0.12);
  border: 1px solid rgba(144,184,255,0.25);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.feature-icon svg { width: 26px; height: 26px; fill: #90b8ff; }
.feature-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 6px; }
.feature-card p { font-size: .88rem; color: var(--hint); line-height: 1.5; }

/* ---- STATS ROW ---- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.stat-card {
  text-align: center;
  padding: 18px 12px;
}
.stat-card.stat-link { cursor: pointer; transition: background .15s; }
.stat-card.stat-link:hover { background: rgba(255,255,255,0.04); }
.stat-val { font-size: 2rem; font-weight: 700; color: #90b8ff; }
.stat-label { font-size: .8rem; color: var(--hint); margin-top: 4px; }

/* ---- TEST CARDS ---- */
.tests-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.test-card { display: flex; flex-direction: column; gap: 10px; }
.test-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.test-card-name { font-size: 1rem; font-weight: 600; }
.test-card-meta { font-size: .83rem; color: var(--hint); }
.test-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }

.badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 20px;
  font-size: .72rem; font-weight: 600;
  flex-shrink: 0;
}
.badge-new  { background: var(--accent-dim); color: #90b8ff; }
.badge-done { background: rgba(52,211,153,0.12); color: var(--green); }
.badge-info { background: transparent; color: var(--hint); }

/* ---- STUDENTS TABLE ---- */
.students-table, .results-table { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th {
  text-align: left;
  padding: 10px 14px;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--hint);
  border-bottom: 1px solid var(--glass-border);
}
td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
body.theme-light td { border-bottom-color: rgba(255,255,255,0.04); }
tr:last-child td { border-bottom: none; }

.row-good td:last-child { color: var(--green); }
.row-mid  td:last-child { color: var(--yellow); }
.row-bad  td:last-child { color: var(--red); }

/* Mini bar */
.mini-bar {
  display: flex; align-items: center; gap: 8px;
  min-width: 100px;
}
.mini-bar-fill {
  height: 4px; border-radius: 2px;
  background: var(--accent);
  transition: width .3s;
  flex: 1;
}
.mini-bar span { font-size: .82rem; min-width: 34px; text-align: right; }

/* ---- FILTERS ---- */
.filters { margin-bottom: 20px; }
.filters-form { display: flex; gap: 16px; flex-wrap: wrap; }
.filters-form .field { margin: 0; min-width: 200px; flex: 1; }

/* ---- TEST PAGE ---- */
.timer {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.1em;
  color: var(--green);
}
.timer-warning {
  color: var(--red);
  animation: timer-pulse 1s ease-in-out infinite;
}
.timer-expired {
  color: var(--red);
}
@keyframes timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.test-progress-bar {
  height: 4px;
  background: transparent;
  border-radius: 2px;
  margin-bottom: 20px;
  overflow: hidden;
}
.test-progress-fill {
  height: 100%;
  background: linear-gradient(180deg, #90b8ff, #1a2a8f);
  border-radius: 2px;
  transition: width .3s ease;
}

.question-card { margin-bottom: 16px; }
.question-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.q-num { font-weight: 600; font-size: .9rem; }
.status-answered { color: var(--hint); font-size: .82rem; }
.status-pending  { color: rgba(255,255,255,0.55); font-size: .82rem; }
.status-correct  { color: var(--green); font-size: .82rem; }
.status-wrong    { color: var(--red); font-size: .82rem; }

.question-text {
  font-size: .95rem;
  line-height: 1.6;
  margin-bottom: 14px;
  color: var(--text);
}
.question-file { margin-bottom: 14px; }
.file-placeholder {
  display: flex; align-items: center; gap: 10px;
  padding: 14px;
  background: transparent;
  border-radius: 10px;
  border: 1px dashed var(--glass-border);
  font-size: .85rem;
  color: var(--hint);
}
.file-placeholder svg { width: 24px; height: 24px; fill: currentColor; flex-shrink: 0; }
.file-placeholder-small {
  font-size: .82rem; color: var(--hint);
  font-style: italic; margin-bottom: 10px;
}

.answer-area {
  display: flex; gap: 10px; align-items: center;
}
.answer-input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--text);
  font-size: .92rem;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.answer-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(144,184,255,0.15);
}
body.theme-light .answer-input { background: rgba(255,255,255,0.06); color: #fff; }

.answer-feedback { margin-top: 10px; font-size: .88rem; min-height: 20px; }
.feedback-correct { color: var(--green); font-weight: 500; }
.feedback-wrong   { color: var(--red); font-weight: 500; }

.test-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 20px; flex-wrap: wrap; gap: 12px;
  font-size: .9rem; color: var(--hint);
}

/* ---- RESULTS ---- */
.results-summary {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.results-circle {
  position: relative;
  flex-shrink: 0;
}
.results-circle svg { width: 120px; height: 120px; }
.results-pct {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.6rem;
  font-weight: 700;
}
.results-stats { display: flex; gap: 24px; flex-wrap: wrap; }
.result-stat { text-align: center; }
.stat-number { display: block; font-size: 2rem; font-weight: 700; }
.stat-number.correct { color: var(--green); }
.stat-number.wrong   { color: var(--red); }
.stat-label { font-size: .8rem; color: var(--hint); margin-top: 2px; }

.results-list { display: flex; flex-direction: column; gap: 12px; }
.result-item { border-left: 3px solid transparent; }
.result-correct { border-left-color: var(--green); }
.result-wrong   { border-left-color: var(--red); }
.result-item-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.result-icon { font-size: 1.1rem; font-weight: 700; }
.result-correct .result-icon { color: var(--green); }
.result-wrong   .result-icon { color: var(--red); }
.result-question { font-size: .9rem; margin-bottom: 8px; color: var(--hint); }
.result-answers { display: flex; gap: 20px; font-size: .88rem; flex-wrap: wrap; }
.your-answer   { color: var(--hint); }
.correct-answer { color: var(--green); }

.results-footer { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; }

/* Solution details */
.solution-details {
  margin-top: 12px;
  border-top: 1px solid var(--glass-border);
  padding-top: 10px;
}
.solution-details summary {
  cursor: pointer;
  font-size: .85rem;
  color: var(--hint);
  user-select: none;
}
.solution-body {
  margin-top: 8px;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--text);
}

/* ---- PROFILE ---- */
.profile-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 640px) {
  .profile-grid { grid-template-columns: 1fr; }
}
.profile-info { text-align: center; }
.profile-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(180deg, #90b8ff 0%, #1a2a8f 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; font-weight: 700;
  margin: 0 auto 12px;
  color: var(--text);
}
.profile-name { font-size: 1.2rem; font-weight: 700; }
.profile-role { font-size: .85rem; color: var(--hint); margin: 4px 0 12px; }
.profile-login { font-size: .82rem; color: rgba(255,255,255,0.55); margin-bottom: 4px; }
.profile-siteid { font-size: .82rem; color: rgba(255,255,255,0.65); margin-bottom: 16px; }
.profile-detail {
  display: flex; justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--glass-border);
  font-size: .88rem;
}
.detail-label { color: var(--hint); }
.profile-forms { display: flex; flex-direction: column; gap: 16px; }
.card-title { font-size: 1rem; font-weight: 600; margin-bottom: 14px; }

/* Theme picker */
.theme-picker {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.theme-swatch {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 2px solid transparent; border-radius: 12px;
  padding: 8px 12px; cursor: pointer; transition: border-color .2s;
}
.theme-swatch span {
  width: 48px; height: 48px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.1rem;
}
.theme-swatch small {
  font-size: 0.75rem; color: var(--hint);
}
.theme-swatch.active {
  border-color: var(--accent);
}
.theme-swatch:hover {
  border-color: var(--hint);
}

.results-table-inner { font-size: .88rem; }

/* ---- ADD TEST ---- */
.question-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 20px; flex-wrap: wrap; gap: 12px;
}
.nav-hint { font-size: .85rem; color: var(--hint); }
.info-card { margin-top: 16px; font-size: .88rem; color: var(--hint); line-height: 1.7; }
.info-card ol { padding-left: 20px; }

/* ---- ANSWERS PAGE ---- */
.variant-tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 12px; margin-bottom: 20px;
}
.variant-tab {
  padding: 8px 16px; border-radius: 10px;
  font-size: .88rem; font-weight: 500;
  background: transparent;
  color: var(--hint);
  transition: background .15s, color .15s;
}
.variant-tab:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.variant-tab.active { background: var(--accent-dim); color: #90b8ff; }

.answers-list { display: flex; flex-direction: column; gap: 12px; }
.answer-item { }
.answer-item-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.correct-badge {
  background: rgba(52,211,153,0.12);
  color: var(--green);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: .82rem;
  font-weight: 600;
}

/* ---- EMPTY STATE ---- */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--hint);
}
.empty-icon { width: 48px; height: 48px; fill: currentColor; opacity: .3; margin: 0 auto 12px; }

/* ---- INTEGRAL BACKGROUND ---- */
#bg-integrals {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: transparent;
}

/* ---- THEME TOGGLE ---- */
#theme-toggle {
  position: fixed;
  top: calc(var(--safe-top) + 10px);
  right: 14px;
  z-index: 200;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  width: 36px; height: 36px;
  cursor: pointer;
  color: var(--hint);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
  padding: 0;
  font-size: 16px;
}
#theme-toggle:hover { background: rgba(255,255,255,0.1); }
body.theme-light #theme-toggle:hover { background: rgba(255,255,255,0.14); }

/* ======================================================
   APPLE LIQUID GLASS
   ====================================================== */


/* ---- Кнопки — Liquid Glass ---- */
.btn {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.75) inset,
    0 -2px 0 rgba(255,255,255,0.55) inset,
    1px 0 0 rgba(255,255,255,0.10) inset,
    -1px 0 0 rgba(255,255,255,0.06) inset,
    0 6px 24px rgba(0,0,0,0.25),
    0 2px 6px rgba(0,0,0,0.15);
  transition: transform .45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .15s, background .15s;
}

/* Бегущий световой блик при hover */
.btn::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 55%; height: 100%;
  background: linear-gradient(105deg,
    transparent,
    rgba(255,255,255,0.35),
    transparent);
  transition: left .45s ease;
  pointer-events: none;
  z-index: 1;
}
.btn:hover::before { left: -120%; }/* блик отключён */

/* Верхний specular-блик */
.btn::after {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.80) 40%,
    rgba(255,255,255,0.95) 50%,
    rgba(255,255,255,0.80) 60%,
    transparent);
  pointer-events: none;
}

.btn:hover {
  background: rgba(255,255,255,0.08);
  box-shadow:
    0 2px 0 rgba(255,255,255,0.85) inset,
    0 -1px 0 rgba(0,0,0,0.22) inset,
    1px 0 0 rgba(255,255,255,0.14) inset,
    0 10px 32px rgba(0,0,0,0.30),
    0 2px 8px rgba(0,0,0,0.18);
}

/* Primary — только синеватая рамка */
.btn-primary {
  background: transparent;
  border-color: rgba(144,184,255,0.50);
  box-shadow:
    0 1.5px 0 rgba(255,255,255,0.60) inset,
    0 -1px 0 rgba(0,0,0,0.18) inset,
    0 4px 20px rgba(144,184,255,0.20),
    0 1px 3px rgba(0,0,0,0.18);
}
.btn-primary:hover {
  background: transparent;
  border-color: rgba(144,184,255,0.65);
  box-shadow:
    0 1.5px 0 rgba(255,255,255,0.70) inset,
    0 -1px 0 rgba(0,0,0,0.18) inset,
    0 8px 30px rgba(144,184,255,0.30),
    0 1px 4px rgba(0,0,0,0.20);
}

/* Ghost — такое же синее свечение как primary */
.btn-ghost {
  background: transparent;
  border-color: rgba(144,184,255,0.50);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.60) inset,
    0 -1px 0 rgba(0,0,0,0.18) inset,
    0 4px 20px rgba(144,184,255,0.20),
    0 1px 3px rgba(0,0,0,0.18);
}
.btn-ghost:hover {
  background: transparent;
  border-color: rgba(144,184,255,0.65);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.70) inset,
    0 -1px 0 rgba(0,0,0,0.18) inset,
    0 8px 30px rgba(144,184,255,0.35),
    0 1px 4px rgba(0,0,0,0.20);
}

/* Danger — красноватая рамка */
.btn-danger {
  background: transparent;
  border-color: rgba(248,113,113,0.40);
  box-shadow:
    0 1.5px 0 rgba(255,255,255,0.40) inset,
    0 -1px 0 rgba(0,0,0,0.15) inset,
    0 4px 16px rgba(248,113,113,0.18);
}
.btn-danger:hover {
  background: transparent;
}

/* ---- Поля ввода ---- */
.field-input, .answer-input {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 2px 8px rgba(0,0,0,0.20) inset;
}
.field-input:focus, .answer-input:focus {
  background: rgba(255,255,255,0.04);
  border-color: rgba(144,184,255,0.60);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 2px 8px rgba(0,0,0,0.15) inset,
    0 0 0 3px rgba(144,184,255,0.18),
    0 0 20px rgba(144,184,255,0.15);
}
body.theme-light .field-input,
body.theme-light .answer-input {
  background: transparent;
  border-color: rgba(255,255,255,0.20);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 2px 8px rgba(0,0,0,0.20) inset;
}

/* ---- Шапка ---- */
.page-header {
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset;
}

/* ---- Нижняя навигация ---- */
.bottom-nav {
  background: rgba(255,255,255,0.04);
  border-top: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 -1px 0 rgba(255,255,255,0.10) inset;
}

/* ---- Аватар ---- */
.profile-avatar {
  background: rgba(144,184,255,0.10);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow:
    0 2px 0 rgba(255,255,255,0.55) inset,
    0 -2px 0 rgba(0,0,0,0.25) inset,
    0 12px 40px rgba(91,108,247,0.40),
    0 2px 8px rgba(0,0,0,0.35);
}

/* ---- Бейджи ---- */
.badge {
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 2px 8px rgba(0,0,0,0.20);
}

/* ---- Flash ---- */
.flash {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 4px 20px rgba(0,0,0,0.22);
}

/* ---- Кнопка темы ---- */
#theme-toggle {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow:
    0 2px 0 rgba(255,255,255,0.28) inset,
    0 -1px 0 rgba(0,0,0,0.18) inset,
    0 8px 24px rgba(0,0,0,0.35);
}
#theme-toggle:hover {
  background: rgba(255,255,255,0.08);
}
body.theme-light #theme-toggle {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.22);
}

/* ======================================================
   СИНЕВАТО-ЧЁРНЫЙ ГРАДИЕНТ — все цветные (фиолет/синий) тексты
   ====================================================== */

/* Утилита */
.grad-text,
.logo,
.landing-title,
.stat-val,
.auth-link a,
.variant-tab.active,
.badge-new,
.flash-info {
  background: linear-gradient(180deg, #90b8ff 0%, #1a2a8f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Иконки навбара — SVG не поддерживает gradient text, меняем цвет напрямую */
.nav-btn.active,
.nav-btn:hover { color: #90b8ff; }

/* Бейдж ученика */
.user-badge:not(.teacher) {
  color: transparent;
  background-image: linear-gradient(180deg, #90b8ff 0%, #1a2a8f 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Акцентные ссылки в nav */
.nav-link.active,
.nav-link:hover {
  background-image: none;
  -webkit-text-fill-color: unset;
  color: var(--text);
}

/* Flash-info текст */
.flash-info {
  display: block;
}

/* Светлая тема — нейтральный акцент вместо синего */
body.theme-light .logo,
body.theme-light .landing-title,
body.theme-light .stat-val,
body.theme-light .auth-link a,
body.theme-light .variant-tab.active,
body.theme-light .badge-new,
body.theme-light .user-badge:not(.teacher) {
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
  color: #1a2a8f;
}
body.theme-light .nav-btn.active,
body.theme-light .nav-btn:hover { color: #1a2a8f; }
body.theme-light .field-input:focus,
body.theme-light .answer-input:focus {
  border-color: rgba(0,0,0,0.35);
  box-shadow: 0 1px 0 rgba(255,255,255,0.50) inset, 0 2px 8px rgba(0,0,0,0.08) inset, 0 0 0 3px rgba(0,0,0,0.08);
}
body.theme-light .profile-avatar {
  background: rgba(26,42,143,0.08);
  border-color: rgba(0,0,0,0.15);
  box-shadow: 0 2px 0 rgba(255,255,255,0.55) inset, 0 -2px 0 rgba(0,0,0,0.08) inset, 0 12px 40px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.08);
}
body.theme-light .feature-icon svg { fill: #1a2a8f; }
body.theme-light .feature-icon {
  background: rgba(26,42,143,0.06);
  border-color: rgba(26,42,143,0.15);
}

/* ---- Светлая тема — без синего свечения ---- */
body.theme-light .btn {
  color: #0a0a0a;
  border-color: rgba(0,0,0,0.25);
  box-shadow: 0 1px 0 rgba(255,255,255,0.80) inset, 0 -1px 0 rgba(0,0,0,0.08) inset, 0 4px 16px rgba(0,0,0,0.08);
}
body.theme-light .btn-primary,
body.theme-light .btn-ghost {
  border-color: rgba(0,0,0,0.30);
  box-shadow: 0 1px 0 rgba(255,255,255,0.80) inset, 0 -1px 0 rgba(0,0,0,0.08) inset, 0 4px 16px rgba(0,0,0,0.08);
}
body.theme-light .btn-primary:hover,
body.theme-light .btn-ghost:hover {
  border-color: rgba(0,0,0,0.40);
  box-shadow: 0 1px 0 rgba(255,255,255,0.80) inset, 0 -1px 0 rgba(0,0,0,0.08) inset, 0 6px 20px rgba(0,0,0,0.12);
}
body.theme-light .btn-danger {
  border-color: rgba(220,38,38,0.40);
  color: #dc2626;
  box-shadow: 0 1px 0 rgba(255,255,255,0.80) inset, 0 4px 16px rgba(220,38,38,0.10);
}
body.theme-light .glass-card {
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 1px 0 rgba(255,255,255,0.90) inset, 0 4px 24px rgba(0,0,0,0.08);
}
body.theme-light .lens-card {
  border-color: rgba(0,0,0,0.15);
  box-shadow: 0 1px 0 rgba(255,255,255,0.90) inset, 0 4px 24px rgba(0,0,0,0.08);
}

/* ---- Тёмно-серая тема — без синего свечения ---- */
body.theme-darkgray .btn {
  border-color: rgba(224,221,216,0.20);
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 -1px 0 rgba(0,0,0,0.15) inset, 0 4px 16px rgba(0,0,0,0.20);
}
body.theme-darkgray .btn-primary,
body.theme-darkgray .btn-ghost {
  border-color: rgba(224,221,216,0.30);
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 -1px 0 rgba(0,0,0,0.15) inset, 0 4px 16px rgba(0,0,0,0.20);
}
body.theme-darkgray .btn-primary:hover,
body.theme-darkgray .btn-ghost:hover {
  border-color: rgba(224,221,216,0.45);
  box-shadow: 0 1px 0 rgba(255,255,255,0.20) inset, 0 -1px 0 rgba(0,0,0,0.15) inset, 0 6px 20px rgba(0,0,0,0.25);
}
body.theme-darkgray .btn-danger {
  border-color: rgba(248,113,113,0.40);
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 4px 16px rgba(248,113,113,0.12);
}

/* ---- Бежевая тема — Liquid Glass кнопки ---- */
body.theme-beige .btn {
  color: #5a5550;
  background: rgba(255,255,255,0.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1.5px solid rgba(255,255,255,0.60);
  border-top-color: rgba(255,255,255,0.80);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.85) inset,
    0 -1px 0 rgba(0,0,0,0.04) inset,
    0 4px 14px rgba(80,60,40,0.08);
}
body.theme-beige .btn-primary,
body.theme-beige .btn-ghost {
  border-color: rgba(255,255,255,0.65);
  border-top-color: rgba(255,255,255,0.85);
}
body.theme-beige .btn-primary:hover,
body.theme-beige .btn-ghost:hover {
  background: rgba(255,255,255,0.50);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.90) inset,
    0 -1px 0 rgba(0,0,0,0.04) inset,
    0 6px 20px rgba(80,60,40,0.12);
}
body.theme-beige .btn-danger {
  border-color: rgba(220,38,38,0.25);
  color: #dc2626;
  box-shadow: 0 1px 0 rgba(255,255,255,0.90) inset, 0 4px 16px rgba(220,38,38,0.06);
}
body.theme-beige .glass-card,
body.theme-beige .lens-card {
  background: rgba(255,255,255,0.40);
  -webkit-backdrop-filter: blur(24px) saturate(1.6) brightness(1.08);
  backdrop-filter: blur(24px) saturate(1.6) brightness(1.08);
  border: 1.5px solid rgba(255,255,255,0.65);
  border-top-color: rgba(255,255,255,0.85);
  box-shadow:
    0 1.5px 0 rgba(255,255,255,0.90) inset,
    0 -1px 0 rgba(0,0,0,0.04) inset,
    0 8px 32px rgba(80,60,40,0.10),
    0 2px 4px rgba(0,0,0,0.06);
}
body.theme-beige .glass-card:hover,
body.theme-beige .lens-card:hover {
  background: rgba(255,255,255,0.48);
  box-shadow:
    0 1.5px 0 rgba(255,255,255,0.95) inset,
    0 -1px 0 rgba(0,0,0,0.04) inset,
    0 14px 44px rgba(80,60,40,0.14),
    0 2px 6px rgba(0,0,0,0.07);
}

/* ---- Тёмно-серая: нейтральные акценты вместо синего ---- */
body.theme-darkgray .logo,
body.theme-darkgray .landing-title,
body.theme-darkgray .stat-val,
body.theme-darkgray .auth-link a,
body.theme-darkgray .variant-tab.active,
body.theme-darkgray .badge-new,
body.theme-darkgray .user-badge:not(.teacher) {
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
  color: #e0ddd8;
}
body.theme-darkgray .nav-btn.active,
body.theme-darkgray .nav-btn:hover { color: #e0ddd8; }
body.theme-darkgray .feature-icon svg { fill: #e0ddd8; }
body.theme-darkgray .feature-icon {
  background: rgba(176,173,168,0.10);
  border-color: rgba(176,173,168,0.20);
}
body.theme-darkgray .field-input:focus,
body.theme-darkgray .answer-input:focus {
  border-color: rgba(176,173,168,0.50);
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 2px 8px rgba(0,0,0,0.15) inset, 0 0 0 3px rgba(176,173,168,0.15);
}
body.theme-darkgray .profile-avatar {
  background: rgba(176,173,168,0.10);
  box-shadow: 0 2px 0 rgba(255,255,255,0.20) inset, 0 -2px 0 rgba(0,0,0,0.20) inset, 0 12px 40px rgba(0,0,0,0.30), 0 2px 8px rgba(0,0,0,0.25);
}
body.theme-darkgray .page-header {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
body.theme-darkgray .landing-sub { color: var(--hint); }

/* ---- Бежевая: нейтральные акценты вместо синего ---- */
body.theme-beige .logo,
body.theme-beige .landing-title,
body.theme-beige .stat-val,
body.theme-beige .auth-link a,
body.theme-beige .variant-tab.active,
body.theme-beige .badge-new,
body.theme-beige .user-badge:not(.teacher) {
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
  color: #4a4a4a;
}
body.theme-beige .nav-btn.active,
body.theme-beige .nav-btn:hover { color: #8b6f47; }
body.theme-beige .feature-icon svg { fill: #4a4a4a; }
body.theme-beige .feature-icon {
  background: rgba(74,74,74,0.08);
  border-color: rgba(74,74,74,0.18);
}
body.theme-beige .profile-avatar {
  background: rgba(74,74,74,0.10);
  border-color: rgba(58,53,48,0.20);
  box-shadow: 0 2px 0 rgba(255,255,255,0.55) inset, 0 -2px 0 rgba(0,0,0,0.08) inset, 0 12px 40px rgba(58,53,48,0.12), 0 2px 8px rgba(0,0,0,0.08);
}
body.theme-beige .page-header {
  background: rgba(255,255,255,0.35);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  border-color: rgba(255,255,255,0.55);
  box-shadow: 0 1px 0 rgba(255,255,255,0.70) inset, 0 4px 16px rgba(80,60,40,0.06);
}
body.theme-beige .field-input,
body.theme-beige .answer-input {
  background: rgba(255,255,255,0.40);
  border-color: rgba(255,255,255,0.65);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.80) inset,
    0 2px 6px rgba(0,0,0,0.04) inset;
}
body.theme-beige .field-input:focus,
body.theme-beige .answer-input:focus {
  background: rgba(255,255,255,0.55);
  border-color: rgba(255,255,255,0.85);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.90) inset,
    0 2px 6px rgba(0,0,0,0.03) inset,
    0 0 0 3px rgba(58,53,48,0.06);
}

/* Убираем синий радиальный градиент лендинга в не-чёрных темах */
body.theme-light .landing-hero::before,
body.theme-darkgray .landing-hero::before,
body.theme-beige .landing-hero::before {
  background: none;
}

/* ---- FILE UPLOAD ---- */
.field-hint { font-size: .78rem; color: rgba(255,255,255,0.35); font-weight: 400; }
body.theme-light .field-hint { color: rgba(255,255,255,0.35); }

.file-drop-zone {
  border: 1px dashed rgba(255,255,255,0.20);
  border-radius: 10px;
  transition: border-color .15s, background .15s;
  overflow: hidden;
}
.file-drop-zone.drag-over {
  border-color: rgba(74,114,255,0.60);
  background: rgba(74,114,255,0.08);
}
body.theme-light .file-drop-zone { border-color: rgba(255,255,255,0.20); }

.file-input-hidden { display: none; }

.file-drop-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  color: rgba(255,255,255,0.45);
  font-size: .88rem;
  transition: color .15s;
}
.file-drop-label:hover { color: rgba(255,255,255,0.75); }
body.theme-light .file-drop-label { color: rgba(255,255,255,0.45); }
body.theme-light .file-drop-label:hover { color: rgba(255,255,255,0.75); }

/* Изображение в вопросе */
.question-img {
  max-width: 100%;
  max-height: 400px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  display: block;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  .header-nav { display: none; }
  .header-user .user-name { display: none; }
  .page-title { font-size: 1.3rem; }
  .landing-title { font-size: 2.2rem; }
  .results-summary { justify-content: center; }
  .tests-grid { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: repeat(3, 1fr); }
  .answer-area { flex-direction: column; align-items: stretch; }
}
@media (max-width: 480px) {
  .filters-form { flex-direction: column; }
}

/* ======================================================
   MODAL OVERLAY
   ====================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.modal-window {
  transform: translateY(10px) scale(0.97);
  transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
  width: 100%;
}
.modal-overlay.open .modal-window {
  transform: translateY(0) scale(1);
}

/* Плашка с macOS-кружками как зона перетаскивания */
.modal-drag-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: -20px -20px 16px;
  padding: 10px 14px;
  cursor: move;
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.modal-drag-bar .light { cursor: pointer; }
.modal-drag-bar .light:hover { filter: brightness(1.3); }

/* Сообщение об ошибке внутри модалки */
.modal-error {
  display: none;
  background: rgba(248,113,113,0.12);
  border: 1px solid rgba(248,113,113,0.30);
  color: var(--red);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: .88rem;
  margin-bottom: 14px;
}

/* ======================================================
   LIQUID GLASS — backdrop-filter + усиленные полосы
   ====================================================== */

/* Все стеклянные карточки */
.lens-card, .glass-card {
  backdrop-filter: blur(16px) saturate(1.6) brightness(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.6) brightness(1.08);
  background: rgba(255,255,255,0.04);
  /* Верхняя белая полоса + нижняя белая полоса */
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18),
    0 2px 0 rgba(255,255,255,0.82) inset,
    0 -2px 0 rgba(255,255,255,0.64) inset,
    1px 0 0 rgba(255,255,255,0.10) inset,
    -1px 0 0 rgba(255,255,255,0.06) inset,
    0 12px 40px rgba(0,0,0,0.28),
    0 2px 8px rgba(0,0,0,0.18);
}

/* Кнопки — Liquid Glass с backdrop-filter */
.btn {
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  user-select: none;
  -webkit-user-select: none;
  /* Верхняя и нижняя полосы */
  box-shadow:
    0 1px 0 rgba(255,255,255,0.42) inset,
    0 -1px 0 rgba(255,255,255,0.62) inset,
    0 8px 28px rgba(0,0,0,0.28),
    0 2px 6px rgba(0,0,0,0.16);
}

/* Шапка и нижний nav — тоже стекло */
.page-header {
  backdrop-filter: blur(20px) saturate(1.8) brightness(1.06);
  -webkit-backdrop-filter: blur(20px) saturate(1.8) brightness(1.06);
  box-shadow:
    0 -1px 0 rgba(255,255,255,0.70) inset,
    0 1px 0 rgba(255,255,255,0.14) inset,
    0 4px 20px rgba(0,0,0,0.22);
}
.bottom-nav {
  backdrop-filter: blur(20px) saturate(1.8) brightness(1.06);
  -webkit-backdrop-filter: blur(20px) saturate(1.8) brightness(1.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.70) inset,
    0 -1px 0 rgba(255,255,255,0.10) inset,
    0 -4px 20px rgba(0,0,0,0.22);
}

/* Кнопка переключения темы — вписана в header-inner */
.header-inner #theme-toggle {
  position: static;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  margin-left: auto;
}

/* ======================================================
   LIQUID PRESS — растяжение + матовая волна-ripple
   ====================================================== */

/* Нет выделения текста на всех интерактивных элементах */
a, button, .btn, .nav-btn, .nav-link, .role-tab, .variant-tab,
.logout-btn, .logo, .stat-card, .test-card, label,
#theme-toggle, .bottom-nav, .page-header {
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ---- TEACHER SEARCH ---- */
.teacher-search-wrap { position: relative; }
.teacher-search-input { cursor: text; }

.teacher-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 300;
  background: rgba(18,18,24,0.92);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.12) inset;
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 4px;
}
.teacher-dropdown.open { display: block; }

.teacher-option {
  padding: 10px 14px;
  font-size: .9rem;
  color: var(--hint);
  cursor: pointer;
  border-radius: 8px;
  transition: background .1s, color .1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.teacher-option:hover {
  background: rgba(144,184,255,0.12);
  color: var(--text);
}
.teacher-option.selected {
  background: rgba(144,184,255,0.18);
  color: var(--accent);
  font-weight: 600;
}

body.theme-light .teacher-dropdown {
  background: rgba(255,255,255,0.96);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 1px 0 rgba(255,255,255,0.80) inset;
}
body.theme-light .teacher-option { color: rgba(0,0,0,0.55); }
body.theme-light .teacher-option:hover { background: rgba(26,42,143,0.08); color: #0a0a0a; }
body.theme-light .teacher-option.selected { background: rgba(26,42,143,0.12); color: #1a2a8f; }

/* Растяжение — держится пока зажато, возвращается пружиной при отпускании */
@keyframes liq-shimmer {
  0%   { left: -130%; opacity: 0; }
  12%  { opacity: 1; }
  70%  { left: 130%; opacity: 1; }
  85%  { opacity: 0; }
  100% { left: -130%; opacity: 0; }
}

.is-pressing {
  transform: scale(1.18) !important;
  transform-origin: center center !important;
  transition: transform .55s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow .15s, background .15s !important;
  background: rgba(255,255,255,0.14) !important;
}
.is-pressing::before {
  display: block !important;
  transition: none !important;
  width: 65% !important;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255,255,255,0.06) 25%,
    rgba(255,255,255,0.55) 47%,
    rgba(210,228,255,0.80) 50%,
    rgba(255,255,255,0.55) 53%,
    rgba(255,255,255,0.06) 75%,
    transparent 100%) !important;
  animation: liq-shimmer 1.6s ease-in-out infinite !important;
  z-index: 2 !important;
}