/* ══════════════════════════════════════════════
   ТЁМНАЯ ТЕМА (по умолчанию)
══════════════════════════════════════════════ */
:root,
[data-theme="dark"] {
  --bg: #07080c;
  --surface: #10131b;
  --surface2: #171c27;
  --border: rgba(166,177,204,0.18);
  --accent: #b7d8d4;
  --accent2: #b8abce;
  --text: #f5f7ff;
  --muted: #a2a9bc;
  --success: #4ade80;
  --error: #f87171;
  --warning: #fbbf24;

  --glass-fill: rgba(8, 11, 18, 0.88);
  --glass-fill-strong: rgba(6, 9, 16, 0.94);
  --glass-stroke: rgba(255, 255, 255, 0.08);
  --glass-stroke-soft: rgba(255, 255, 255, 0.05);
  --glass-inner: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(255, 255, 255, 0.02);
  --glass-shadow: 0 14px 28px rgba(4, 7, 16, 0.44);
  --glass-blur: 14px;

  --glow-accent: rgba(183,216,212,0.12);
  --glow-accent2: rgba(184,171,206,0.10);
}

/* ══════════════════════════════════════════════
   ПЛАВНЫЕ ПЕРЕХОДЫ
══════════════════════════════════════════════ */
*, *::before, *::after {
  transition-property: background-color, border-color, box-shadow, opacity, transform;
  transition-duration: 0s;
  transition-timing-function: ease;
}

a, button, .nav-item, .stat-card, .transcription-card, .quiz-card,
.transcript-card, .question-card, .option, .btn-primary, .btn-secondary,
.btn-submit, .btn-start, .btn-next, .btn-yandex, .copy-btn, .tab-btn,
.dropzone, .mobile-nav-item {
  transition-duration: 0.2s;
}

/* ══════════════════════════════════════════════
   ДЕКОРАТИВНЫЙ ФОН (цветы)
══════════════════════════════════════════════ */
.bg::before,
.bg::after {
  content: '';
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  filter: saturate(112%) drop-shadow(0 12px 24px rgba(7, 11, 24, 0.42));
}

.bg::before {
  width: clamp(136px, 16vw, 240px);
  height: clamp(136px, 16vw, 240px);
  left: clamp(8px, 2vw, 26px);
  bottom: clamp(8px, 2vw, 34px);
  opacity: 0.23;
  background-image: url('design-concepts/assets/flowers/flower-9.png');
}

.bg::after {
  width: clamp(128px, 14vw, 220px);
  height: clamp(128px, 14vw, 220px);
  right: clamp(4px, 1.8vw, 22px);
  top: clamp(40px, 12vh, 110px);
  opacity: 0.2;
  background-image: url('design-concepts/assets/flowers/flower-16.png');
}

/* ══════════════════════════════════════════════
   GLASSMORPHISM
══════════════════════════════════════════════ */
[data-theme="dark"] .right,
[data-theme="dark"] .sidebar,
[data-theme="dark"] .mobile-nav,
[data-theme="dark"] .mobile-header,
[data-theme="dark"] .card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .transcription-card,
[data-theme="dark"] .quiz-card,
[data-theme="dark"] .transcript-card,
[data-theme="dark"] .question-card,
[data-theme="dark"] .results-card,
[data-theme="dark"] .dropzone,
[data-theme="dark"] .copy-btn,
[data-theme="dark"] .btn-secondary {
  background: var(--glass-fill-strong) !important;
  border-color: var(--glass-stroke) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(108%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(108%);
  box-shadow: var(--glass-inner), var(--glass-shadow);
}

[data-theme="dark"] .stat-card::before,
[data-theme="dark"] .transcription-card::before,
[data-theme="dark"] .quiz-card::before,
[data-theme="dark"] .transcript-card::before,
[data-theme="dark"] .question-card::before,
[data-theme="dark"] .results-card::before,
[data-theme="dark"] .dropzone::before,
[data-theme="dark"] .card::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.008) 24%, transparent 52%);
  opacity: 0.34;
}

[data-theme="dark"] .input {
  background: rgba(8, 12, 20, 0.72) !important;
  border-color: var(--glass-stroke-soft) !important;
}
[data-theme="dark"] .input:focus { border-color: rgba(183,216,212,0.54) !important; }

/* ══════════════════════════════════════════════
   ЭФФЕКТЫ HOVER НА КАРТОЧКАХ
══════════════════════════════════════════════ */
.stat-card,
.transcription-card,
.quiz-card,
.transcript-card {
  position: relative;
}

.stat-card:hover {
  border-color: rgba(183,216,212,0.22) !important;
  box-shadow: var(--glass-inner), 0 14px 28px rgba(4, 7, 16, 0.44), 0 0 20px var(--glow-accent) !important;
  transform: translateY(-2px);
}

.transcription-card:hover {
  border-color: rgba(183,216,212,0.22) !important;
  box-shadow: var(--glass-inner), 0 8px 24px rgba(4, 7, 16, 0.44), 0 0 16px var(--glow-accent) !important;
}

.quiz-card:hover {
  border-color: rgba(184,171,206,0.22) !important;
  box-shadow: var(--glass-inner), 0 8px 24px rgba(4, 7, 16, 0.44), 0 0 16px var(--glow-accent2) !important;
  transform: translateY(-3px);
}

/* ══════════════════════════════════════════════
   КНОПКИ
══════════════════════════════════════════════ */
.btn-primary,
.btn-submit,
.btn-start,
.btn-next,
.btn-yandex {
  color: #0d1218 !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: linear-gradient(145deg, rgba(183,216,212,0.88), rgba(184,171,206,0.72)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 8px 20px rgba(6,10,18,0.34) !important;
}

.btn-primary:hover,
.btn-submit:hover:not(:disabled),
.btn-start:hover,
.btn-next:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 12px 28px rgba(183,216,212,0.2) !important;
}

.btn-primary:active,
.btn-submit:active,
.btn-start:active,
.btn-next:active {
  transform: translateY(0);
}

/* ══════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════ */
.sidebar {
  border-right-color: var(--glass-stroke) !important;
}

.nav-item.active {
  background: rgba(183,216,212,0.10) !important;
  box-shadow: inset 3px 0 0 var(--accent);
}

.avatar {
  box-shadow: 0 2px 8px rgba(183,216,212,0.2);
}

/* ══════════════════════════════════════════════
   STAT CARDS — АКЦЕНТНЫЕ ПОЛОСКИ
══════════════════════════════════════════════ */
.stat-card {
  overflow: hidden;
}

.stat-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  opacity: 0.6;
  border-radius: 16px 16px 0 0;
}

/* ══════════════════════════════════════════════
   СКРОЛЛБАР
══════════════════════════════════════════════ */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(166,177,204,0.2);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(166,177,204,0.35);
}

/* ══════════════════════════════════════════════
   SELECTION
══════════════════════════════════════════════ */
::selection {
  background: rgba(183,216,212,0.25);
  color: var(--text);
}

/* ══════════════════════════════════════════════
   РАЗНОЕ
══════════════════════════════════════════════ */
.nav-item.nav-disabled {
  opacity: 0.42;
  pointer-events: none;
  cursor: default;
}

.mobile-nav-item {
  font-size: 11px !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

@media (max-width: 768px) {
  .bg::after { display: none; }
  .bg::before { opacity: 0.16; left: -4px; bottom: 12px; }
}