/* ═══════════════════════════════════════════════════════════════
   MarkLine Design System v3 — Sidebar Layout
   Font: Plus Jakarta Sans
   Palette: oklch purple + red
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables — Light ──────────────────────────────────────── */
:root {
  --purple:        oklch(0.44 0.24 282);
  --purple-mid:    oklch(0.55 0.22 282);
  --purple-light:  oklch(0.93 0.05 282);
  --purple-faint:  oklch(0.975 0.012 282);
  --red:           oklch(0.55 0.22 18);
  --red-light:     oklch(0.93 0.08 18);
  --green:         oklch(0.52 0.17 145);
  --green-light:   oklch(0.93 0.06 145);
  --amber:         oklch(0.62 0.18 80);
  --amber-light:   oklch(0.94 0.06 80);

  --bg-page:   oklch(0.975 0.012 282);
  --bg-card:   #ffffff;
  --bg-input:  #ffffff;
  --bg-muted:  oklch(0.93 0.05 282);

  --text-dark:  oklch(0.18 0.02 282);
  --text-mid:   oklch(0.48 0.04 282);
  --text-muted: oklch(0.68 0.025 282);
  --text-main:  var(--text-dark); /* alias for legacy templates */

  --border:     oklch(0.9 0.02 282);
  --border-focus: oklch(0.44 0.24 282);

  --shadow-sm:  0 2px 12px oklch(0.44 0.24 282 / 0.06);
  --shadow-md:  0 8px 32px oklch(0.44 0.24 282 / 0.13);
  --shadow-lg:  0 16px 48px oklch(0.44 0.24 282 / 0.18);

  --sidebar-w:      240px;
  --sidebar-w-sm:   72px;
  --topbar-h:       64px;

  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill:999px;

  /* Easings */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);   /* Apple-like, упругий, быстрый */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);    /* Material, для двусторонних */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Лёгкая пружина для тапов */
  --transition: 0.18s var(--ease-out);
  --transition-fast: 0.12s var(--ease-out);
  --transition-slow: 0.32s var(--ease-out);

  /* Bootstrap compat */
  --bs-body-font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  --bs-body-bg:   var(--bg-page);
  --bs-body-color:var(--text-dark);
  --bs-primary:   oklch(0.44 0.24 282);
  --bs-danger:    oklch(0.55 0.22 18);
  --bs-link-color:var(--purple);
  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius-sm);
}

/* ── Variables — Dark ───────────────────────────────────────── */
[data-theme="dark"] {
  --bg-page:   oklch(0.13 0.04 282);
  --bg-card:   oklch(0.18 0.04 282);
  --bg-input:  oklch(0.22 0.04 282);
  --bg-muted:  oklch(0.22 0.05 282);

  --text-dark:  oklch(0.94 0.02 282);
  --text-mid:   oklch(0.75 0.04 282);
  --text-muted: oklch(0.58 0.03 282);

  --border:     oklch(0.28 0.05 282);
  --border-focus: oklch(0.65 0.20 282);

  --shadow-sm:  0 2px 12px rgba(0,0,0,0.35);
  --shadow-md:  0 8px 32px rgba(0,0,0,0.45);
  --shadow-lg:  0 16px 48px rgba(0,0,0,0.55);

  --purple-faint: oklch(0.18 0.04 282);
  --purple-light: oklch(0.25 0.07 282);
}

/* ── Base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 15px;
  background: var(--bg-page);
  color: var(--text-dark);
  min-height: 100vh;
  display: flex;
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition), color var(--transition);
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-dark);
}
a { color: var(--purple); transition: color var(--transition); }
a:hover { color: var(--red); }

body { animation: pageFadeIn 0.25s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════════════════════ */
.mh-sidebar {
  width: var(--sidebar-w);
  height: 100vh;
  flex-shrink: 0;
  position: fixed;
  top: 0; left: 0;
  background: linear-gradient(160deg,
    oklch(0.38 0.26 295) 0%,
    oklch(0.32 0.22 275) 55%,
    oklch(0.28 0.18 260) 100%);
  display: flex;
  flex-direction: column;
  z-index: 1040;
  transition: width 0.3s cubic-bezier(0.4,0,0.2,1), transform 0.3s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}

/* Decorative orbs */
.sidebar-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.sidebar-orb--1 {
  width: 180px; height: 180px;
  top: -60px; right: -60px;
  background: oklch(1 0 0 / 0.05);
}
.sidebar-orb--2 {
  width: 110px; height: 110px;
  bottom: 80px; left: -30px;
  background: oklch(1 0 0 / 0.04);
}

/* Logo area */
.sidebar-logo {
  position: relative;
  padding: 18px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid oklch(1 0 0 / 0.10);
  flex-shrink: 0;
  gap: 8px;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-width: 0;
  flex: 1;
}
.sidebar-brand-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
  background: linear-gradient(135deg, oklch(0.7 0.22 18), oklch(0.5 0.24 18));
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 900; color: #fff;
  box-shadow: 0 4px 12px oklch(0.55 0.22 18 / 0.45);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.sidebar-brand-text {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  transition: opacity 0.2s, width 0.3s;
}
.sidebar-brand-name {
  color: #fff;
  font-weight: 800; font-size: 17px;
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-brand-sub {
  color: oklch(0.8 0.08 282);
  font-size: 11px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-collapse-btn {
  position: absolute; top: 10px; right: 12px;
  width: 28px; height: 28px;
  border-radius: 8px; border: none;
  background: oklch(1 0 0 / 0.10);
  color: rgba(255,255,255,0.70);
  cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition);
}
.sidebar-collapse-btn:hover {
  background: oklch(1 0 0 / 0.20);
  color: #fff;
}

/* Nav */
.sidebar-nav {
  flex: 1;
  padding: 14px 12px;
  display: flex; flex-direction: column; gap: 3px;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

.sidebar-section-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: oklch(0.65 0.07 282);
  padding: 14px 14px 4px;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  text-decoration: none;
  font-size: 14px; font-weight: 500;
  color: oklch(0.80 0.06 282);
  transition: all 0.18s;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar-link:hover {
  background: oklch(1 0 0 / 0.09);
  color: #fff;
}
.sidebar-link.active {
  background: oklch(1 0 0 / 0.16);
  color: #fff;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.14);
}
.sidebar-link-icon {
  font-size: 16px;
  width: 20px; text-align: center;
  flex-shrink: 0;
}
.sidebar-link-label {
  transition: opacity 0.2s;
}

/* ── Collapsed sidebar ──────────────────────────────────────── */
body.sidebar-collapsed .mh-sidebar { width: var(--sidebar-w-sm); }
body.sidebar-collapsed .sidebar-brand-text,
body.sidebar-collapsed .sidebar-link-label,
body.sidebar-collapsed .sidebar-section-label { opacity: 0; width: 0; overflow: hidden; pointer-events: none; }

/* Collapsed: всё выровнено по одной оси — 48px колонка по центру 72px сайдбара */
body.sidebar-collapsed .sidebar-logo {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 0 !important;
  gap: 6px !important;
}
body.sidebar-collapsed .sidebar-brand {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex: none !important;
  width: 48px !important;
  margin: 0 auto !important;
  min-width: 0 !important;
  gap: 0 !important;
}
body.sidebar-collapsed .sidebar-brand-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  flex-shrink: 0 !important;
  margin: 0 auto !important;
}
body.sidebar-collapsed .sidebar-brand-text {
  display: none !important;
}
body.sidebar-collapsed .sidebar-collapse-btn {
  position: static !important;
  width: 30px !important;
  height: 30px !important;
  margin: 0 auto !important;
  transform: scaleX(-1) !important;
}

/* Nav links: та же 48px колонка */
body.sidebar-collapsed .sidebar-nav { padding: 14px 0; }
body.sidebar-collapsed .sidebar-link {
  justify-content: center;
  padding: 11px 0;
  gap: 0;
  width: 48px;
  margin: 0 auto;
  border-radius: 12px;
}
body.sidebar-collapsed .sidebar-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

body.sidebar-collapsed .mh-main { margin-left: var(--sidebar-w-sm); }

/* ── Mobile sidebar ─────────────────────────────────────────── */
@media (max-width: 991px) {
  .mh-sidebar {
    transform: translateX(calc(-100% - 28px));
    width: var(--sidebar-w);
  }
  body.sidebar-open .mh-sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-backdrop { display: block; }
  .mh-main { margin-left: 0 !important; }
}

.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1039;
  backdrop-filter: blur(2px);
}

/* ══════════════════════════════════════════════════════════════
   MAIN AREA
══════════════════════════════════════════════════════════════ */
.mh-main {
  flex: 1;
  display: flex; flex-direction: column;
  min-width: 0;
  margin-left: var(--sidebar-w);
  transition: margin-left 0.3s cubic-bezier(0.4,0,0.2,1);
  min-height: 100vh;
}

/* ── Topbar ─────────────────────────────────────────────────── */
.mh-topbar {
  height: var(--topbar-h);
  flex-shrink: 0;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 28px; gap: 16px;
  position: sticky; top: 0; z-index: 100;
  transition: background var(--transition), border-color var(--transition);
}
.topbar-burger {
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent; color: var(--text-mid);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 20px;
  transition: all var(--transition); flex-shrink: 0;
}
.topbar-burger:hover { background: var(--bg-muted); color: var(--text-dark); }

.topbar-title { flex: 1; min-width: 0; }
.topbar-heading {
  font-size: 17px; font-weight: 800;
  color: var(--text-dark); margin: 0; line-height: 1.2;
  letter-spacing: -0.01em;
}
.topbar-sub {
  font-size: 12px; color: var(--text-muted);
  margin: 2px 0 0; font-weight: 500;
}

.topbar-actions {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.topbar-icon-btn {
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--purple-faint);
  color: var(--text-mid);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 17px; text-decoration: none;
  transition: all var(--transition); position: relative;
}
.topbar-icon-btn:hover { background: var(--bg-muted); color: var(--purple); }

/* Theme toggle icons */
.theme-icon-sun  { display: none; }
.theme-icon-moon { display: block; }
[data-theme="dark"] .theme-icon-sun  { display: block; }
[data-theme="dark"] .theme-icon-moon { display: none; }

.topbar-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  font-size: 11px; font-weight: 700; line-height: 1;
  color: #fff; background: var(--red);
  border: 2px solid var(--bg-card);
  display: inline-flex; align-items: center; justify-content: center;
}
.topbar-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--red));
  color: #fff; font-size: 14px; font-weight: 700;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.topbar-avatar:hover { transform: scale(1.05); }

/* ── Content ─────────────────────────────────────────────────── */
.mh-content {
  flex: 1;
  padding: 24px 20px;
  width: 100%;
}
body:not(.page-tests) .mh-content {
  max-width: none;
}
body.page-tests .mh-content {
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .mh-content { padding: 20px 16px; }
}

/* ── Auth wrapper (unauthenticated pages) ───────────────────── */
.auth-wrapper {
  min-height: 100vh;
  width: 100%;
  flex: 1;
  display: flex; flex-direction: column;
  align-items: stretch; justify-content: center;
  padding: 24px;
  background: var(--bg-page);
}

/* ══════════════════════════════════════════════════════════════
   COMPONENTS
══════════════════════════════════════════════════════════════ */

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition),
              transform 0.18s var(--ease-out),
              background var(--transition);
  will-change: transform;
}
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: 15px;
  padding: 1rem 1.25rem;
  color: var(--text-dark);
}
.card-body { color: var(--text-dark); }
.hover-lift:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-3px); cursor: pointer; }

.stat-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}
.stat-card:hover { box-shadow: var(--shadow-md); }

/* Hero gradient banner */
.hero-card {
  background: linear-gradient(135deg, var(--purple) 0%, oklch(0.38 0.26 295) 100%);
  border-radius: var(--radius-xl) !important;
  border: none !important;
  color: #fff; position: relative; overflow: hidden;
}
.hero-card::before {
  content: ''; position: absolute;
  top: -40%; right: -10%; width: 260px; height: 260px;
  background: radial-gradient(circle, oklch(1 0 0 / 0.06) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 600; letter-spacing: -0.01em;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition),
              border-color var(--transition),
              box-shadow var(--transition),
              transform 0.12s var(--ease-out),
              color var(--transition);
  will-change: transform;
}
.btn:active { transform: scale(0.97) !important; transition: transform 0.06s var(--ease-out); }
a, button { -webkit-tap-highlight-color: transparent; }
.btn-primary {
  background: var(--purple); border-color: var(--purple); color: #fff;
  box-shadow: 0 2px 12px oklch(0.44 0.24 282 / 0.30);
}
.btn-primary:hover {
  background: var(--purple-mid); border-color: var(--purple-mid); color: #fff;
  box-shadow: 0 4px 20px oklch(0.44 0.24 282 / 0.40);
  transform: translateY(-1px);
}
.btn-danger {
  background: var(--red); border-color: var(--red); color: #fff;
  box-shadow: 0 2px 12px oklch(0.55 0.22 18 / 0.28);
}
.btn-danger:hover {
  background: oklch(0.48 0.22 18); border-color: oklch(0.48 0.22 18); color: #fff;
  transform: translateY(-1px);
}
.btn-success {
  background: var(--green); border-color: var(--green); color: #fff;
}
.btn-success:hover {
  background: oklch(0.46 0.17 145); border-color: oklch(0.46 0.17 145); color: #fff;
  transform: translateY(-1px);
}
.btn-outline-primary { border-color: var(--purple); color: var(--purple); }
.btn-outline-primary:hover { background: var(--purple); color: #fff; transform: translateY(-1px); }
.btn-outline-secondary { border-color: var(--border); color: var(--text-mid); }
.btn-outline-secondary:hover { background: var(--bg-muted); color: var(--text-dark); border-color: var(--border); }
.btn-outline-danger { border-color: var(--red); color: var(--red); }
.btn-outline-danger:hover { background: var(--red); color: #fff; }
.btn-outline-success { border-color: var(--green); color: var(--green); }
.btn-outline-success:hover { background: var(--green); color: #fff; }

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 600; border-radius: var(--radius-pill);
  padding: 3px 10px; font-size: 12px; letter-spacing: 0.01em;
}
.badge.bg-primary  { background: var(--purple) !important; }
.badge.bg-danger   { background: var(--red) !important; }
.badge.bg-success  { background: var(--green) !important; }
.badge.bg-warning  { background: var(--amber) !important; color: #fff !important; }
.badge.bg-secondary { background: var(--text-muted) !important; }
.badge.bg-light {
  background: var(--purple-light) !important;
  color: var(--purple) !important;
  border: 1px solid var(--border);
}

/* ── Forms ──────────────────────────────────────────────────── */
.form-control, .form-select {
  border-color: var(--border);
  border-radius: var(--radius-sm);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 14px; padding: 0.55rem 0.85rem;
  color: var(--text-dark); background: var(--bg-input);
  transition: border-color var(--transition), box-shadow var(--transition),
              background var(--transition);
}
.form-control:focus, .form-select:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px oklch(0.44 0.24 282 / 0.13);
  color: var(--text-dark); background: var(--bg-input);
}
.form-control::placeholder { color: var(--text-muted); }
.form-label { font-weight: 600; font-size: 14px; color: var(--text-dark); margin-bottom: 6px; }
.form-text { color: var(--text-muted); font-size: 12px; }
.input-group-text { background: var(--bg-muted); border-color: var(--border); color: var(--purple); }
.form-check-input:checked { background-color: var(--purple); border-color: var(--purple); }
.form-check-input:focus { box-shadow: 0 0 0 3px oklch(0.44 0.24 282 / 0.15); border-color: var(--purple-mid); }

/* ── Tables ─────────────────────────────────────────────────── */
.table {
  color: var(--text-dark); font-size: 14px;
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border);
}
.table thead th {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted); border-bottom: 1px solid var(--border) !important;
  padding: 12px 16px; white-space: nowrap;
  background: var(--bg-muted);
}
.table tbody td { padding: 12px 16px; border-color: var(--border) !important; }
.table-hover tbody tr:hover td { background: var(--purple-faint) !important; }

/* ── Alerts ─────────────────────────────────────────────────── */
.alert { border-radius: var(--radius-md); border: none; font-size: 14px; padding: 14px 18px; }
.alert-info    { background: oklch(0.93 0.04 230); color: oklch(0.30 0.12 230); }
.alert-warning { background: var(--amber-light); color: oklch(0.38 0.14 80); }
.alert-danger  { background: var(--red-light); color: oklch(0.38 0.18 18); }
.alert-success { background: var(--green-light); color: oklch(0.30 0.12 145); }
[data-theme="dark"] .alert-info    { background: oklch(0.22 0.08 230); color: oklch(0.78 0.12 230); }
[data-theme="dark"] .alert-warning { background: oklch(0.22 0.08 80);  color: oklch(0.82 0.14 80); }
[data-theme="dark"] .alert-danger  { background: oklch(0.22 0.08 18);  color: oklch(0.82 0.14 18); }
[data-theme="dark"] .alert-success { background: oklch(0.22 0.08 145); color: oklch(0.80 0.12 145); }

/* ── Progress ───────────────────────────────────────────────── */
.progress { background: var(--purple-light); border-radius: var(--radius-pill); height: 8px; }
.progress-bar { background: var(--purple); border-radius: var(--radius-pill); transition: width 0.6s cubic-bezier(0.4,0,0.2,1) !important; }
.progress-bar.bg-success { background: var(--green) !important; }
.progress-bar.bg-danger  { background: var(--red) !important; }

/* ── Pagination ─────────────────────────────────────────────── */
.page-link { border-radius: 8px !important; border-color: var(--border); color: var(--purple); background: var(--bg-card); }
.page-link:hover { background: var(--bg-muted); color: var(--purple); }
.page-item.active .page-link { background: var(--purple); border-color: var(--purple); color: #fff; }

/* ── Modal ──────────────────────────────────────────────────── */
.modal-content { border: none; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-lg); background: var(--bg-card); }
.modal-header { border-bottom: 1px solid var(--border); color: var(--text-dark); }
.modal-footer { border-top: 1px solid var(--border); }

/* ── List group ─────────────────────────────────────────────── */
.list-group-item { border-color: var(--border); color: var(--text-dark); background: var(--bg-card); }
.list-group-item-action:hover { background: var(--bg-muted); color: var(--text-dark); }

/* ── Dropdowns ──────────────────────────────────────────────── */
.dropdown-menu {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: 6px;
}
.dropdown-item { color: var(--text-dark); border-radius: 8px; padding: 8px 14px; font-size: 14px; font-weight: 500; }
.dropdown-item:hover { background: var(--bg-muted); color: var(--purple); }
.dropdown-item.text-danger { color: var(--red) !important; }
.dropdown-item.text-danger:hover { background: var(--red-light); }
.dropdown-header { color: var(--text-muted); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.dropdown-divider { border-color: var(--border); }

/* ── Answer options ─────────────────────────────────────────── */
.answer-option {
  cursor: pointer;
  border: 2px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--bg-card); color: var(--text-dark);
  transition: all var(--transition); user-select: none;
}
.answer-option:hover { border-color: var(--purple-mid) !important; background: var(--purple-faint); transform: translateX(3px); }
.answer-option:has(input:checked),
.answer-option.is-selected {
  border-color: var(--purple) !important;
  background: var(--purple-faint) !important;
  box-shadow: 0 0 0 3px oklch(0.44 0.24 282 / 0.12);
}

/* ── Admin sidebar links ────────────────────────────────────── */
.admin-sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: var(--radius-sm);
  color: var(--text-muted); font-weight: 500; font-size: 14px;
  text-decoration: none; transition: all var(--transition);
}
.admin-sidebar-link:hover { background: var(--bg-muted); color: var(--purple); }
.admin-sidebar-link.active { background: var(--purple-light); color: var(--purple); font-weight: 700; }
[data-theme="dark"] .admin-sidebar-link.active { background: var(--bg-muted); }

/* ── Question nav ───────────────────────────────────────────── */
.q-nav-btn { width: 36px; height: 36px; padding: 0; font-size: 13px; font-weight: 600; border-radius: var(--radius-sm) !important; }
.q-nav-btn:hover { transform: scale(1.1); }
.q-nav-btn.btn-success { background: var(--green); border-color: transparent; }
.q-nav-btn.btn-primary { background: var(--purple); border-color: transparent; }

/* ── Timer ──────────────────────────────────────────────────── */
#timer { font-variant-numeric: tabular-nums; font-weight: 700; border-radius: 8px !important; padding: 5px 12px !important; }
#timer.urgent { background: var(--red) !important; animation: timerPulse 1s ease infinite; color: #fff !important; }
@keyframes timerPulse { 0%,100%{opacity:1} 50%{opacity:0.75} }

/* ── Score ring ─────────────────────────────────────────────── */
.score-ring-container { position: relative; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; }
.score-ring-container svg { position: absolute; top:0; left:0; transform: rotate(-90deg); }
.score-ring-bg  { stroke: rgba(255,255,255,0.20); }
.score-ring-fg  { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(0.4,0,0.2,1); }
.score-ring-text { font-size: 1.5rem; font-weight: 700; color: #fff; }

/* ── Status dot ─────────────────────────────────────────────── */
.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; animation:pulseDot 2s infinite; }
.status-dot.green { background:var(--green); }
@keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.3)} }

/* ── Empty state ────────────────────────────────────────────── */
.empty-state { padding: 3.5rem 1.5rem; text-align: center; color: var(--text-muted); }
.empty-state i { font-size: 2.5rem; color: var(--border); display: block; margin-bottom: 1rem; }

/* ── Animations ─────────────────────────────────────────────── */
.animate-up { opacity: 0; transform: translateY(18px); animation: slideUp 0.4s ease forwards; }
@keyframes slideUp { to { opacity:1; transform:translateY(0); } }
.animate-up:nth-child(1){animation-delay:.05s}
.animate-up:nth-child(2){animation-delay:.10s}
.animate-up:nth-child(3){animation-delay:.15s}
.animate-up:nth-child(4){animation-delay:.20s}
.animate-up:nth-child(5){animation-delay:.25s}
.animate-up:nth-child(6){animation-delay:.30s}
.reveal { opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Toast ──────────────────────────────────────────────────── */
#toast-container { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.app-toast { pointer-events:all; background:var(--bg-card); border-radius:14px; box-shadow:var(--shadow-lg); border:1px solid var(--border); padding:14px 20px; min-width:280px; max-width:420px; display:flex; align-items:center; gap:12px; font-weight:600; font-size:14px; opacity:0; color:var(--text-dark); }
.app-toast.app-toast--success { border-left:4px solid var(--green); }
.app-toast.app-toast--success i { color:var(--green); }
.app-toast.app-toast--danger  { border-left:4px solid var(--red); }
.app-toast.app-toast--danger i { color:var(--red); }
.app-toast.app-toast--warning { border-left:4px solid var(--amber); }
.app-toast.app-toast--warning i { color:var(--amber); }
.app-toast--enter { animation:toastIn .5s cubic-bezier(.22,1,.36,1) forwards; }
.app-toast--exit  { animation:toastOut .4s cubic-bezier(.55,0,1,.45) forwards; }
@keyframes toastIn  { from{transform:translateY(70px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes toastOut { from{transform:translateY(0);opacity:1} to{transform:translateY(-60px);opacity:0} }
.app-toast-close { margin-left:auto; background:none; border:none; cursor:pointer; font-size:1.1rem; color:inherit; opacity:.4; padding:0 0 0 8px; transition:opacity .15s; }
.app-toast-close:hover { opacity:.85; }

/* ── Utilities ──────────────────────────────────────────────── */
.text-purple   { color: var(--purple) !important; }
.text-muted    { color: var(--text-muted) !important; }
.text-dark     { color: var(--text-dark) !important; }
.text-body     { color: var(--text-dark) !important; }
.text-black    { color: var(--text-dark) !important; }
.text-secondary{ color: var(--text-muted) !important; }
.bg-muted, .bg-light { background: var(--bg-muted) !important; }
.bg-white      { background: var(--bg-card) !important; }
.border-color  { border-color: var(--border) !important; }
.cursor-pointer { cursor: pointer; }

/* Bootstrap table-light override — иначе в тёмной теме чёрный текст на светлом фоне */
.table > thead.table-light > tr > th,
.table-light,
.table-light > th,
.table-light > td {
  --bs-table-color: var(--text-muted);
  --bs-table-bg: var(--bg-muted);
  --bs-table-border-color: var(--border);
  color: var(--text-muted) !important;
  background-color: var(--bg-muted) !important;
}

/* Bootstrap badge bg-warning text-dark — в тёмной теме text-dark становится светлым,
   что нечитаемо на жёлтом. Принудительно тёмный текст для badge.bg-warning */
[data-theme="dark"] .badge.bg-warning.text-dark,
.badge.bg-warning.text-dark {
  color: oklch(0.25 0.08 80) !important;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 576px) {
  .table { font-size: 12px; }
  .btn-sm { font-size: 12px; }
  .card-body { padding: 1rem; }
}

/* Mobile topbar — compact */
@media (max-width: 991px) {
  .mh-topbar { padding: 0 14px; gap: 10px; }
  .topbar-heading { font-size: 15px; }
  /* Keep only MarkLine, no page-title on small screens (handled in template) */
}

/* Very small screens */
@media (max-width: 400px) {
  .topbar-actions { gap: 4px; }
  .topbar-icon-btn { width: 34px; height: 34px; font-size: 15px; }
  .topbar-avatar { width: 32px; height: 32px; font-size: 13px; }
  .mh-content { padding: 16px 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   MarkLine Design System v4 — Premium (light + dark)
   Layered on top of v3. Later rules win on equal specificity.
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens: LIGHT ──────────────────────────────────────────── */
:root{
  --purple-bright: oklch(0.60 0.20 286);
  --blue:          oklch(0.55 0.15 245);
  --blue-light:    oklch(0.93 0.04 245);
  --accent:        var(--purple);
  --accent-grad:   linear-gradient(135deg, oklch(0.48 0.24 286), oklch(0.58 0.22 296));
  --glow:          oklch(0.50 0.22 288 / .32);

  --bg-elevated:   oklch(0.985 0.008 282);
  --bg-glow-1:     oklch(0.72 0.13 292 / .16);
  --bg-glow-2:     oklch(0.78 0.11 345 / .10);
  --border-soft:   oklch(0.945 0.012 282);

  --ic-purple-bg: oklch(0.945 0.045 286); --ic-purple-fg: oklch(0.48 0.22 286);
  --ic-green-bg:  oklch(0.945 0.06 150);  --ic-green-fg:  oklch(0.50 0.15 150);
  --ic-blue-bg:   oklch(0.945 0.05 245);  --ic-blue-fg:   oklch(0.50 0.15 245);
  --ic-amber-bg:  oklch(0.95 0.07 78);    --ic-amber-fg:  oklch(0.55 0.14 68);

  --sidebar-bg:     linear-gradient(188deg, oklch(0.40 0.23 288) 0%, oklch(0.31 0.17 280) 62%, oklch(0.27 0.14 274) 100%);
  --sidebar-border: oklch(1 0 0 / .10);
  --sidebar-gap:    14px;

  --shadow-sm: 0 1px 2px oklch(0.3 0.1 282 / .05), 0 8px 24px -12px oklch(0.44 0.24 282 / .14);
  --shadow-md: 0 2px 8px -3px oklch(0.3 0.1 282 / .10), 0 18px 42px -18px oklch(0.44 0.24 282 / .22);

  --sidebar-w: 250px;
  --topbar-h:  54px;
  --radius-md: 15px;
  --radius-lg: 20px;
  --radius-xl: 26px;
}

/* ── Tokens: DARK (premium Вариант 3) ───────────────────────── */
[data-theme="dark"]{
  --purple:        oklch(0.63 0.20 289);
  --purple-mid:    oklch(0.70 0.18 293);
  --purple-bright: oklch(0.75 0.17 294);
  --accent-grad:   linear-gradient(135deg, oklch(0.60 0.21 290), oklch(0.52 0.22 304));
  --glow:          oklch(0.62 0.20 291 / .5);

  --bg-page:     oklch(0.155 0.028 286);
  --bg-card:     oklch(0.205 0.034 286);
  --bg-elevated: oklch(0.245 0.038 286);
  --bg-input:    oklch(0.235 0.036 286);
  --bg-muted:    oklch(0.255 0.038 286);
  --bg-glow-1:   oklch(0.45 0.18 292 / .28);
  --bg-glow-2:   oklch(0.42 0.15 335 / .16);
  --border:      oklch(0.30 0.035 286);
  --border-soft: oklch(0.255 0.03 286);

  --ic-purple-bg: oklch(0.32 0.10 290); --ic-purple-fg: oklch(0.76 0.17 294);
  --ic-green-bg:  oklch(0.30 0.09 158); --ic-green-fg:  oklch(0.76 0.16 158);
  --ic-blue-bg:   oklch(0.30 0.08 238); --ic-blue-fg:   oklch(0.74 0.14 238);
  --ic-amber-bg:  oklch(0.34 0.09 78);  --ic-amber-fg:  oklch(0.83 0.15 78);

  --sidebar-bg:     linear-gradient(190deg, oklch(0.225 0.045 289), oklch(0.152 0.03 289));
  --sidebar-border: oklch(1 0 0 / .07);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.6);
  --shadow-md: 0 2px 10px -3px rgba(0,0,0,.5), 0 22px 48px -18px rgba(0,0,0,.72);
}

/* ── Body: premium depth glows ──────────────────────────────── */
body{
  font-size: 15px;
  background:
    radial-gradient(900px 540px at 84% -10%, var(--bg-glow-1), transparent 60%),
    radial-gradient(760px 520px at -8% 110%, var(--bg-glow-2), transparent 55%),
    var(--bg-page);
  background-attachment: fixed;
}

/* ── Floating sidebar ───────────────────────────────────────── */
.mh-sidebar{
  background: var(--sidebar-bg);
  margin: var(--sidebar-gap);
  height: calc(100vh - 28px);
  border-radius: var(--radius-xl);
  border: 1px solid var(--sidebar-border);
  box-shadow: 0 34px 64px -34px rgba(0,0,0,.6), inset 0 1px 0 oklch(1 0 0 / .12);
}
.mh-main{ margin-left: calc(var(--sidebar-w) + 28px); }
body.sidebar-collapsed .mh-main{ margin-left: calc(var(--sidebar-w-sm) + 28px); }

.sidebar-brand-icon{ border-radius: 13px; }
.sidebar-section-label{ color: oklch(0.74 0.06 286); font-size: 10.5px; letter-spacing: .09em; padding: 15px 14px 5px; }
.sidebar-link{ font-weight: 600; color: oklch(0.83 0.045 286); border-radius: 13px; padding: 11px 13px; }
.sidebar-link:hover{ background: oklch(1 0 0 / .10); }
.sidebar-link.active{
  background: linear-gradient(100deg, oklch(1 0 0 / .22), oklch(1 0 0 / .11));
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.55), inset 0 0 0 1px oklch(1 0 0 / .18);
}
.sidebar-link-icon{ font-size: 20px; width: 22px; }
.sidebar-link-icon i{ font-size: 20px; }
.sidebar-link-badge{ margin-left: auto; }

/* ── Topbar: frosted, borderless, blends into page ──────────── */
.mh-topbar{
  height: var(--topbar-h);
  background: oklch(0.985 0.006 285 / 0.70);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: none;
  padding: 0 30px;
}
[data-theme="dark"] .mh-topbar{
  background: oklch(0.155 0.028 286 / 0.55);
}
.topbar-heading{ font-size: 17px; }
.topbar-search{
  flex: 1; max-width: 380px; display: flex; align-items: center; gap: 9px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 6px 12px; color: var(--text-muted);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.topbar-search:focus-within{ border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--glow); }
.topbar-search i{ font-size: 16px; }
.topbar-search input{ border: none; background: none; outline: none; color: var(--text-dark); font-family: inherit; font-size: 13px; width: 100%; }
.topbar-search kbd{ margin-left: auto; flex-shrink: 0; white-space: nowrap; font-size: 10px; line-height: 1.4; background: var(--bg-muted); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; color: var(--text-muted); font-family: inherit; }
.topbar-search input{ min-width: 0; }
.topbar-icon-btn{ width: 36px; height: 36px; border-radius: 10px; background: var(--bg-card); font-size: 17px; }
.topbar-icon-btn:hover{ background: var(--bg-muted); color: var(--purple); border-color: var(--border); }
.topbar-avatar{ width: 36px; height: 36px; border-radius: 10px; background: var(--accent-grad); }
@media (max-width: 991px){ .topbar-search{ display: none; } }

/* ── Content width — fill available space on wide screens ───── */
body:not(.page-tests) .mh-content{ max-width: none; margin: 0; padding: 26px 34px 42px; }
@media (max-width: 768px){ body:not(.page-tests) .mh-content{ padding: 18px 14px 30px; } }

/* ── Cards elevated ─────────────────────────────────────────── */
.card{ border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm); }
.hover-lift{ transition: box-shadow var(--transition), transform .18s var(--ease-out), border-color var(--transition); }
.hover-lift:hover{ box-shadow: var(--shadow-md) !important; transform: translateY(-4px); border-color: oklch(0.44 0.24 282 / .35) !important; }
[data-theme="dark"] .hover-lift:hover{ border-color: var(--purple) !important; }

/* ═══ Reusable premium components ═══════════════════════════════ */

/* Icon chip */
.mh-ic{ display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; flex-shrink: 0; }
.mh-ic.ic-purple{ background: var(--ic-purple-bg); color: var(--ic-purple-fg); }
.mh-ic.ic-green { background: var(--ic-green-bg);  color: var(--ic-green-fg); }
.mh-ic.ic-blue  { background: var(--ic-blue-bg);   color: var(--ic-blue-fg); }
.mh-ic.ic-amber { background: var(--ic-amber-bg);  color: var(--ic-amber-fg); }

/* Section head */
.mh-section-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.mh-section-head h3{ font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 9px; margin: 0; }
.mh-section-head h3 i{ font-size: 20px; color: var(--purple-bright); }
.mh-section-head .mh-link{ font-size: 13px; color: var(--purple-bright); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; white-space: nowrap; }
.mh-section-head .mh-link:hover{ gap: 7px; }

/* Hero (gradient) */
.mh-hero{ position: relative; overflow: hidden; border-radius: var(--radius-xl); padding: 26px 30px; margin-bottom: 18px; color: #fff;
  background: linear-gradient(112deg, oklch(0.42 0.22 288) 0%, oklch(0.40 0.20 300) 46%, oklch(0.44 0.20 336) 100%);
  box-shadow: 0 26px 60px -30px oklch(0.44 0.22 300 / .8); border: 1px solid oklch(1 0 0 / .12); }
[data-theme="dark"] .mh-hero{ background: linear-gradient(112deg, oklch(0.32 0.13 290) 0%, oklch(0.28 0.11 302) 46%, oklch(0.27 0.10 334) 100%); border-color: oklch(0.42 0.10 292); }
.mh-hero::after{ content:""; position:absolute; width:360px; height:360px; border-radius:50%; top:-180px; right:-30px; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 66%); pointer-events:none; }
.mh-hero-row{ display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative; z-index: 1; flex-wrap: wrap; }
.mh-hero h2{ font-size: 27px; font-weight: 800; color: #fff; margin: 0; letter-spacing: -.02em; }
.mh-hero p{ color: rgba(255,255,255,.85); font-size: 14px; margin: 6px 0 0; font-weight: 500; max-width: 480px; }
.mh-chips{ display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.mh-chip{ display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.22); color: #fff; font-weight: 600; font-size: 12.5px; padding: 7px 13px; border-radius: 999px; }
.mh-chip i{ font-size: 16px; }
.mh-chip .fire{ color: oklch(0.85 0.16 55); }
.mh-hero-cta{ display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; background: #fff; color: oklch(0.40 0.20 292); font-weight: 800; font-size: 14px; padding: 12px 22px; border-radius: 13px; border: none; cursor: pointer; box-shadow: 0 14px 30px -12px rgba(0,0,0,.5); text-decoration: none; transition: transform .12s var(--ease-out); }
.mh-hero-cta:hover{ transform: translateY(-2px); color: oklch(0.40 0.20 292); }

/* Progress ring (hero) */
.mh-ring{ position: relative; width: 128px; height: 128px; flex-shrink: 0; }
.mh-ring svg{ transform: rotate(-90deg); }
.mh-ring .r-bg{ fill: none; stroke: rgba(255,255,255,.2); stroke-width: 12; }
.mh-ring .r-fg{ fill: none; stroke: #fff; stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--ease-out); }
.mh-ring-txt{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mh-ring-txt b{ font-size: 29px; font-weight: 800; color: #fff; line-height: 1; }
.mh-ring-txt span{ font-size: 11px; color: rgba(255,255,255,.8); font-weight: 600; margin-top: 3px; }

/* KPI grid */
.mh-kpis{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.mh-kpi{ background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-sm); transition: transform .18s var(--ease-out), border-color var(--transition); }
.mh-kpi:hover{ transform: translateY(-4px); border-color: oklch(0.44 0.24 282 / .4); }
[data-theme="dark"] .mh-kpi:hover{ border-color: var(--purple); }
.mh-kpi-top{ display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.mh-kpi .mh-ic{ width: 46px; height: 46px; font-size: 23px; }
.mh-kpi-trend{ margin-left: auto; font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px; border-radius: 999px; }
.mh-kpi-trend.up{ background: var(--ic-green-bg); color: var(--ic-green-fg); }
.mh-kpi-trend.flat{ background: var(--bg-muted); color: var(--text-muted); }
.mh-kpi-val{ font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--text-dark); }
.mh-kpi-val small{ font-size: 16px; color: var(--text-muted); font-weight: 700; }
.mh-kpi-lbl{ font-size: 12.5px; color: var(--text-muted); font-weight: 600; margin-top: 6px; }

/* Bento layout */
.mh-bento{ display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; }
.mh-bento.equal{ grid-template-columns: 1fr 1fr; }
@media (max-width: 991px){ .mh-bento, .mh-bento.equal{ grid-template-columns: 1fr; } }
.mh-kpis.cols-2{ grid-template-columns: repeat(2,1fr); }
@media (max-width: 767px){ .mh-kpis{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 420px){ .mh-kpis{ grid-template-columns: 1fr; } }

/* Test row (active tests / lists) */
.mh-testrow{ display: flex; align-items: center; gap: 14px; padding: 13px; border-radius: var(--radius-md); margin-bottom: 11px; background: var(--bg-elevated); border: 1px solid var(--border-soft); transition: transform .16s var(--ease-out), border-color var(--transition); }
.mh-testrow:last-child{ margin-bottom: 0; }
.mh-testrow:hover{ transform: translateX(3px); border-color: oklch(0.44 0.24 282 / .4); }
[data-theme="dark"] .mh-testrow:hover{ border-color: var(--purple); }
.mh-testrow .mh-ic{ width: 48px; height: 48px; font-size: 24px; }
.mh-testrow-info{ min-width: 0; flex: 1; }
.mh-testrow-name{ font-weight: 700; font-size: 14.5px; color: var(--text-dark); }
.mh-testrow-meta{ font-size: 12.5px; color: var(--text-muted); margin-top: 4px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.mh-testrow-meta i{ font-size: 14px; vertical-align: -2px; margin-right: 3px; }
.mh-testrow-meta .dl{ color: oklch(0.62 0.19 32); font-weight: 700; }
[data-theme="dark"] .mh-testrow-meta .dl{ color: oklch(0.78 0.16 45); }

/* Small pill button */
.btn-pill{ display: inline-flex; align-items: center; gap: 6px; background: var(--accent-grad); color: #fff; font-weight: 700; font-size: 13px; padding: 10px 18px; border-radius: 12px; border: none; cursor: pointer; white-space: nowrap; box-shadow: 0 10px 22px -12px var(--glow); text-decoration: none; transition: transform .12s var(--ease-out), filter .16s; }
.btn-pill:hover{ transform: translateY(-1px); filter: brightness(1.06); color: #fff; }
.btn-pill i{ font-size: 15px; }

/* Quick access grid */
.mh-quick{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mh-quick a{ border: 1px solid var(--border-soft); background: var(--bg-elevated); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; transition: transform .16s var(--ease-out), border-color var(--transition); }
.mh-quick a:hover{ transform: translateY(-3px); border-color: oklch(0.44 0.24 282 / .4); }
[data-theme="dark"] .mh-quick a:hover{ border-color: var(--purple); }
.mh-quick .mh-ic{ width: 42px; height: 42px; font-size: 20px; }
.mh-quick .q-title{ font-weight: 700; font-size: 14px; color: var(--text-dark); }

/* Weekly activity mini-chart */
.mh-chart{ display: flex; align-items: flex-end; gap: 12px; height: 150px; padding: 8px 4px 0; }
.mh-chart .bar-wrap{ flex: 1; display: flex; flex-direction: column; align-items: center; gap: 9px; height: 100%; }
.mh-chart .bar-track{ flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.mh-chart .bar{ width: 62%; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, var(--purple-bright), oklch(0.42 0.18 292)); min-height: 8px; }
.mh-chart .bar.today{ background: linear-gradient(180deg, oklch(0.82 0.16 55), oklch(0.62 0.2 30)); box-shadow: 0 0 18px -2px oklch(0.7 0.18 45 / .6); }
.mh-chart .bar.muted{ background: var(--bg-muted); }
.mh-chart .bar-lbl{ font-size: 11px; color: var(--text-muted); font-weight: 600; }
.mh-chart-legend{ display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); font-size: 12.5px; color: var(--text-muted); }
.mh-chart-legend b{ color: var(--text-dark); font-size: 15px; }

/* Result list rows */
.mh-reslist .row-item{ display: flex; align-items: center; gap: 13px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.mh-reslist .row-item:last-child{ border-bottom: none; }
.mh-reslist .r-ic{ width: 34px; height: 34px; border-radius: 10px; background: var(--bg-muted); display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--text-muted); flex-shrink: 0; }
.mh-reslist .r-name{ font-weight: 600; font-size: 13.5px; flex: 1; color: var(--text-dark); min-width: 0; }
.mh-reslist .r-date{ font-size: 12px; color: var(--text-muted); }
.mh-score{ font-weight: 800; font-size: 13.5px; padding: 4px 11px; border-radius: 9px; }
.mh-score.ok{ background: var(--ic-green-bg); color: var(--ic-green-fg); }
.mh-score.no{ background: var(--ic-amber-bg); color: var(--ic-amber-fg); }
.mh-score.new{ background: var(--ic-purple-bg); color: var(--ic-purple-fg); }

/* Empty state refined */
.empty-state i{ color: var(--purple-bright); opacity: .5; }
.empty-state .empty-lottie{ width: 132px; height: 132px; margin: 0 auto 6px; }

/* ── Sidebar: мягкие размытые глоу-пятна вместо резких кругов ── */
.sidebar-orb { border-radius: 50%; filter: blur(34px); pointer-events: none; }
.sidebar-orb--1 {
  width: 320px; height: 320px; top: -120px; right: -130px;
  background: radial-gradient(circle, oklch(0.72 0.17 300 / .22), transparent 70%);
}
.sidebar-orb--2 {
  width: 260px; height: 260px; bottom: 10px; left: -120px;
  background: radial-gradient(circle, oklch(0.66 0.19 338 / .16), transparent 70%);
}

/* ── Плавные переходы между страницами (skill: barba-js → нативный View Transitions API) ── */
@view-transition { navigation: auto; }
::view-transition-old(root){ animation: mh-vt-out .20s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root){ animation: mh-vt-in .30s cubic-bezier(.16,1,.3,1) both; }
@keyframes mh-vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes mh-vt-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce){
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root){ animation: none; }
}

/* Extra icon-chip colors */
:root{
  --ic-red-bg:  oklch(0.95 0.06 22); --ic-red-fg:  oklch(0.52 0.20 22);
  --ic-gray-bg: oklch(0.955 0.008 282); --ic-gray-fg: var(--text-muted);
}
[data-theme="dark"]{
  --ic-red-bg:  oklch(0.32 0.10 24); --ic-red-fg:  oklch(0.74 0.18 28);
  --ic-gray-bg: oklch(0.26 0.03 286); --ic-gray-fg: var(--text-muted);
}
.mh-ic.ic-red { background: var(--ic-red-bg);  color: var(--ic-red-fg); }
.mh-ic.ic-gray{ background: var(--ic-gray-bg); color: var(--ic-gray-fg); }

/* Status badges (theme-aware) */
.mh-badge{ display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 11.5px; padding: 4px 11px; border-radius: 999px; letter-spacing: .01em; }
.mh-badge i{ font-size: 13px; }
.mh-badge.ok     { background: var(--ic-green-bg);  color: var(--ic-green-fg); }
.mh-badge.pass   { background: var(--ic-purple-bg); color: var(--ic-purple-fg); }
.mh-badge.fail   { background: var(--ic-red-bg);    color: var(--ic-red-fg); }
.mh-badge.wait   { background: var(--ic-amber-bg);  color: var(--ic-amber-fg); }
.mh-badge.info   { background: var(--ic-blue-bg);   color: var(--ic-blue-fg); }
.mh-badge.neutral{ background: var(--bg-muted);     color: var(--text-muted); }
.mh-badge .status-dot{ width: 6px; height: 6px; }

/* Page header (back + title + action) */
.mh-page-head{ display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.mh-page-head .ph-left{ display: flex; align-items: center; gap: 14px; min-width: 0; }
.mh-back{ width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-mid); display: inline-flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; transition: all var(--transition); }
.mh-back:hover{ background: var(--bg-muted); color: var(--purple); }
.mh-page-head h1{ font-size: 22px; font-weight: 800; margin: 0; letter-spacing: -.02em; }
.mh-page-head .sub{ font-size: 13px; color: var(--text-muted); font-weight: 500; margin-top: 1px; }

/* Test card (list) */
.mh-test-card{ display: flex; align-items: center; gap: 18px; background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: var(--radius-lg); padding: 18px 22px; box-shadow: var(--shadow-sm); transition: transform .16s var(--ease-out), box-shadow var(--transition); }
.mh-test-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.mh-test-card.s-available{ border-left-color: var(--ic-green-fg); }
.mh-test-card.s-passed  { border-left-color: var(--purple); }
.mh-test-card.s-failed  { border-left-color: var(--ic-red-fg); }
.mh-test-card.s-pending { border-left-color: var(--ic-amber-fg); }
.mh-test-card.s-deadline{ border-left-color: var(--border); }
.mh-test-card .tc-ic{ width: 56px; height: 56px; border-radius: 16px; font-size: 28px; }
.mh-test-card .tc-body{ flex: 1; min-width: 0; }
.mh-test-card .tc-title{ font-weight: 800; font-size: 16px; color: var(--text-dark); margin: 7px 0 3px; letter-spacing: -.01em; }
.mh-test-card .tc-desc{ font-size: 13px; color: var(--text-muted); margin-bottom: 9px; }
.mh-test-meta{ display: flex; flex-wrap: wrap; gap: 16px; font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
.mh-test-meta i{ margin-right: 4px; color: var(--purple-bright); vertical-align: -1px; font-size: 14px; }
.mh-test-meta .dl{ color: oklch(0.58 0.18 32); font-weight: 600; }
[data-theme="dark"] .mh-test-meta .dl{ color: oklch(0.78 0.16 40); }
.mh-test-meta .dl i{ color: inherit; }
.tc-action{ flex-shrink: 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tc-score{ font-weight: 800; font-size: 22px; line-height: 1; }
.tc-score.ok{ color: var(--ic-green-fg); }
.tc-score.pass{ color: var(--purple-bright); }
.tc-score.no{ color: var(--ic-red-fg); }
@media (max-width: 640px){
  .mh-test-card{ flex-wrap: wrap; }
  .mh-test-card .tc-ic{ width: 46px; height: 46px; font-size: 23px; }
  .tc-action{ width: 100%; flex-direction: row; justify-content: flex-end; }
}

/* Result score banner */
.mh-result-banner{ position: relative; overflow: hidden; border-radius: var(--radius-xl); padding: 26px 30px; margin-bottom: 22px; color: #fff; box-shadow: var(--shadow-md); }
.mh-result-banner.pass{ background: linear-gradient(112deg, oklch(0.58 0.15 155), oklch(0.5 0.13 168)); }
.mh-result-banner.fail{ background: linear-gradient(112deg, oklch(0.58 0.20 22), oklch(0.5 0.19 8)); }
.mh-result-banner .rb-row{ display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.mh-result-banner h2{ font-size: 24px; font-weight: 800; color: #fff; margin: 0; }
.mh-result-banner p{ color: rgba(255,255,255,.85); font-size: 13.5px; margin: 6px 0 0; font-weight: 500; }
.mh-result-banner .rb-info{ flex: 1; min-width: 0; }

/* Question review */
.mh-q-review{ border-left: 4px solid var(--border) !important; }
.mh-q-review.ok  { border-left-color: var(--ic-green-fg) !important; }
.mh-q-review.bad { border-left-color: var(--ic-red-fg) !important; }
.mh-q-review.skip{ border-left-color: var(--text-muted) !important; }
.ans-opt{ display: flex; align-items: center; gap: 9px; padding: 10px 13px; border-radius: 12px; font-size: 13.5px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-dark); }
.ans-opt i{ font-size: 17px; flex-shrink: 0; }
.ans-opt.ok { background: var(--ic-green-bg); color: var(--ic-green-fg); border-color: transparent; font-weight: 600; }
.ans-opt.ok i{ color: var(--ic-green-fg); }
.ans-opt.bad{ background: var(--ic-red-bg); color: var(--ic-red-fg); border-color: transparent; }
.ans-opt.bad i{ color: var(--ic-red-fg); }
.ans-opt .mine{ margin-left: auto; font-size: 11.5px; opacity: .75; white-space: nowrap; }
.mh-explain{ margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--ic-blue-bg); color: var(--ic-blue-fg); font-size: 13px; display: flex; gap: 9px; align-items: flex-start; }
.mh-explain i{ font-size: 18px; flex-shrink: 0; margin-top: 1px; }