/* ═════════════════════════════════════════════════════════════════════
   DEJTO — Production Dark Theme & Design System
   ═════════════════════════════════════════════════════════════════════ */

@import url('fonts.css');

/* ── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #120e1e;
  --bg-darker: #0d0917;
  --sidebar-bg: #120e1e;
  --sidebar-width: 230px;
  
  --surface: #201833;
  --surface-hover: #271d3d;
  --surface-sunken: #181226;
  
  --card-bg: #201833;
  --card-border: #362854;
  --card-border-hover: #63439b;
  --card-border-dashed: #453266;
  
  --accent: #7850dc;
  --accent-strong: #6842b5;
  --accent-soft: rgba(120, 80, 220, 0.15);
  --accent-glow: rgba(120, 80, 220, 0.25);
  --accent-active: #5b3b9b;
  --accent-border: #8453cc;
  --accent-gradient: linear-gradient(135deg, #7c4ee4 0%, #6638c9 100%);
  --hero-purple: #51367d;
  
  --ink: #ffffff;
  --ink-muted: #9e8eb8;
  --ink-subtle: #796b94;
  --line: #2b1f44;
  
  --pill-bg: #251c38;
  --pill-border: #3c2c5c;
  --pill-active-bg: #5b3b9b;
  --pill-active-border: #7850dc;
  
  --gold: #ffc54d;
  --streak-yellow: #facc15;
  --green: #34d399;
  --green-strong: #059669;
  --green-bg: rgba(52, 211, 153, 0.15);
  --red: #f87171;
  --red-strong: #dc2626;
  --red-bg: rgba(248, 113, 113, 0.15);

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-card: 18px;
  --r-banner: 20px;
  --r-pill: 999px;

  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
}

html, body {
  background-color: var(--bg) !important;
  color: var(--ink) !important;
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

input {
  font-family: inherit;
}

/* ── App Layout ───────────────────────────────────────────────── */
.platform-layout {
  display: flex;
  min-height: 100vh;
  background-color: var(--bg);
}

/* ── Left Sidebar ─────────────────────────────────────────────── */
.platform-sidebar {
  width: var(--sidebar-width);
  background-color: var(--sidebar-bg);
  border-right: 1px solid var(--line);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 24px 16px 20px;
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.platform-brand {
  padding: 4px 12px 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.brand-text {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.platform-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  color: var(--ink-muted);
  font-size: 0.92rem;
  font-weight: 600;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
  cursor: pointer;
}

.nav-item .nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke-width: 2;
  transition: transform 0.2s;
}

.nav-item:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
}

.nav-item.active {
  background: var(--accent-active);
  border-color: var(--accent-border);
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(120, 80, 220, 0.35);
}

.nav-item.active .nav-icon {
  transform: scale(1.05);
}

.platform-sidebar-bottom {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-sunken);
}

/* ── Main Area ────────────────────────────────────────────────── */
.platform-main {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-width: 0;
  padding: 24px 36px 60px;
  display: flex;
  flex-direction: column;
}

.main-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  min-height: 38px;
}

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

.gems-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  margin-left: auto;
}

.gems-icon {
  font-size: 1.05rem;
}

.back-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  padding: 6px 16px;
  border-radius: var(--r-pill);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.2s;
}

.back-pill-btn:hover {
  background: var(--surface-hover);
  border-color: var(--accent);
}

/* ── Headings ─────────────────────────────────────────────────── */
.page-title {
  font-size: 2.15rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.2;
}

.page-subtitle {
  font-size: 0.95rem;
  color: var(--ink-muted);
  margin-bottom: 24px;
}

/* ── Dashboard Grid ───────────────────────────────────────────── */
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: start;
}

.dashboard-main {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

/* ── Hero Continue Banner (Bílá nemoc) ────────────────────────── */
.continue-banner {
  background: var(--accent-gradient);
  border-radius: var(--r-banner);
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(104, 66, 181, 0.45);
  transition: transform 0.2s, box-shadow 0.2s;
}

.continue-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(104, 66, 181, 0.6);
}

.continue-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.continue-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.15);
  padding: 4px;
  flex-shrink: 0;
}

.continue-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.continue-label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.continue-title {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}

.continue-meta {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 2px;
}

.continue-play {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
  backdrop-filter: blur(8px);
}

.continue-banner:hover .continue-play {
  background: rgba(255, 255, 255, 0.4);
  transform: scale(1.08);
}

.continue-play svg {
  width: 22px;
  height: 22px;
  fill: #ffffff;
  margin-left: 3px;
}

/* ── Section Headers ──────────────────────────────────────────── */
.content-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-headline {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.section-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all 0.2s;
}

.section-action-btn:hover {
  color: var(--ink);
  border-color: var(--accent);
}

/* ── Subjects Cards Row ───────────────────────────────────────── */
.subjects-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 160px));
  gap: 16px;
}

.subject-tile-card {
  aspect-ratio: 1 / 1;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  text-align: center;
}

.subject-tile-card:hover {
  border-color: var(--card-border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.subject-tile-card.dashed {
  background: var(--surface-sunken);
  border: 2px dashed var(--card-border-dashed);
}

.subject-tile-card.dashed:hover {
  border-color: var(--accent);
}

.subject-tile-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-bottom: 8px;
  transition: transform 0.2s;
}

.subject-tile-card:hover .subject-tile-img {
  transform: scale(1.06);
}

.subject-tile-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
}

.subject-badge-top {
  position: absolute;
  top: 10px;
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  color: var(--ink-muted);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-pill);
}

.plus-icon-pill {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: rgba(120, 80, 220, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 6px;
}

/* ── Materials Horizontal Row ─────────────────────────────────── */
.materials-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.material-chip-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.material-chip-card:hover {
  border-color: var(--card-border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.material-chip-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--surface-sunken);
}

.material-chip-info {
  flex: 1;
  min-width: 0;
}

.material-chip-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.material-chip-author {
  font-size: 0.8rem;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.material-chip-arrow {
  color: var(--ink-subtle);
  font-size: 1rem;
  flex-shrink: 0;
  transition: transform 0.2s, color 0.2s;
}

.material-chip-card:hover .material-chip-arrow {
  color: var(--ink);
  transform: translateX(3px);
}

/* ── Dashboard Right Widgets ──────────────────────────────────── */
.dashboard-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.widget-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  padding: 20px 20px 18px;
  position: relative;
}

.widget-head-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 4px;
}

.widget-value-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 12px;
}

.widget-big-number {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}

.widget-subtext {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
}

.widget-gear-icon {
  position: absolute;
  top: 16px;
  right: 18px;
  color: var(--ink-subtle);
  cursor: pointer;
  transition: color 0.2s;
}

.widget-gear-icon:hover {
  color: var(--ink);
}

.streak-card-content {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.streak-flame {
  font-size: 2.2rem;
  line-height: 1;
}

.streak-bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 4px;
}

.streak-bar-dash {
  height: 5px;
  border-radius: 999px;
  background: #362a52;
}

.streak-bar-dash.active {
  background: var(--streak-yellow);
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.4);
}

.countdown-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.calendar-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.invite-content {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.invite-icon-wrap {
  font-size: 1.8rem;
  line-height: 1;
}

.btn-purple {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #6c44b5;
  color: var(--ink);
  padding: 10px 16px;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 0.88rem;
  transition: all 0.2s;
  cursor: pointer;
}

.btn-purple:hover {
  background: #7c4ee4;
  box-shadow: 0 4px 14px rgba(108, 68, 181, 0.4);
}

/* ── Český jazyk Hub (New Screenshot 1) ───────────────────────── */
.hub-featured-card {
  background: var(--hero-purple);
  border-radius: var(--r-banner);
  padding: 28px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.hub-featured-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.hub-featured-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 4px;
}

.hub-featured-desc {
  font-size: 0.95rem;
  color: #d8cde9;
  margin-bottom: 18px;
}

.hub-featured-link {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hub-featured-mascot {
  width: 110px;
  height: 110px;
  object-fit: contain;
  flex-shrink: 0;
}

.hub-2col-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.hub-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.hub-card:hover {
  border-color: var(--card-border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.hub-card-mascot {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex-shrink: 0;
}

.hub-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 3px;
}

.hub-card-desc {
  font-size: 0.8rem;
  color: var(--ink-muted);
  line-height: 1.4;
}

.hub-card-badge {
  display: inline-block;
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  color: var(--ink-muted);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  margin-top: 4px;
}

/* ── Search & Filters Bar (Rozbory / Otázky) ──────────────────── */
.search-filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.search-input-pill {
  flex: 1;
  min-width: 240px;
  position: relative;
}

.search-input-pill input {
  width: 100%;
  background: #201735;
  border: 1px solid var(--card-border);
  border-radius: var(--r-pill);
  padding: 10px 18px 10px 42px;
  color: var(--ink);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
}

.search-input-pill input:focus {
  border-color: var(--accent);
}

.search-input-pill input::placeholder {
  color: var(--ink-subtle);
}

.search-input-pill .search-icon-inside {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-muted);
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.filter-pill-btn {
  padding: 8px 18px;
  border-radius: var(--r-pill);
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  color: var(--ink-muted);
  cursor: pointer;
  transition: all 0.2s;
}

.filter-pill-btn:hover {
  color: var(--ink);
  border-color: var(--accent);
}

.filter-pill-btn.active {
  background: var(--pill-active-bg);
  border-color: var(--pill-active-border);
  color: var(--ink);
}

.items-counter-label {
  font-size: 0.82rem;
  color: var(--ink-muted);
  margin-bottom: 16px;
  font-weight: 500;
}

/* ── Rozbory 2-Column Grid (Screenshot 3 & New Screenshot 2) ───── */
.books-2col-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.book-item-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}

.book-item-card:hover {
  border-color: var(--card-border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.book-item-avatar {
  width: 50px;
  height: 50px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface-sunken);
}

.book-item-info {
  flex: 1;
  min-width: 0;
  padding-right: 36px;
}

.book-item-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.book-item-author {
  font-size: 0.82rem;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.book-bookmark-btn {
  position: absolute;
  top: 14px;
  right: 18px;
  color: var(--ink-subtle);
  padding: 4px;
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
}

.book-bookmark-btn:hover {
  color: var(--ink);
  transform: scale(1.1);
}

.book-bookmark-btn.active {
  color: var(--gold);
}

.book-arrow-btn {
  position: absolute;
  bottom: 14px;
  right: 18px;
  color: var(--ink-subtle);
  transition: transform 0.2s, color 0.2s;
}

.book-item-card:hover .book-arrow-btn {
  color: var(--ink);
  transform: translateX(3px);
}

/* ── Fullscreen Quiz View (New Screenshots 3 & 4) ─────────────── */
.quiz-fullscreen {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 0;
}

.quiz-top-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 36px;
}

.quiz-back-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}

.quiz-back-circle:hover {
  background: var(--surface-hover);
  border-color: var(--accent);
}

.quiz-title-tag {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  flex-shrink: 0;
}

.quiz-progress-track {
  flex: 1;
  height: 6px;
  background: #362854;
  border-radius: 999px;
  overflow: hidden;
  margin: 0 8px;
}

.quiz-progress-thumb {
  height: 100%;
  background: #8453cc;
  border-radius: 999px;
  transition: width 0.3s ease;
}

.quiz-counter-tag {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink-muted);
  flex-shrink: 0;
}

.quiz-streak-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  flex-shrink: 0;
}

.quiz-sound-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Speech Bubble & Mascot Row ───────────────────────────────── */
.quiz-speech-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-bottom: 40px;
}

.quiz-speech-bubble {
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--r-banner);
  padding: 24px 32px;
  position: relative;
  flex: 1;
  max-width: 580px;
}

.quiz-speech-bubble::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid var(--surface);
}

.quiz-bubble-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-muted);
  margin-bottom: 6px;
}

.quiz-bubble-question {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.35;
}

.quiz-mascot-avatar {
  width: 140px;
  height: 140px;
  object-fit: contain;
  flex-shrink: 0;
  animation: floatMascot 3s ease-in-out infinite;
}

@keyframes floatMascot {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ── 2x2 Answer Grid ──────────────────────────────────────────── */
.quiz-answers-2x2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 760px;
  margin: 0 auto;
}

.quiz-answer-card {
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  border-radius: var(--r-card);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  min-height: 80px;
}

.quiz-answer-card:hover:not(.disabled) {
  border-color: var(--accent);
  background: var(--surface-hover);
  transform: translateY(-2px);
}

.quiz-answer-num {
  width: 26px;
  height: 26px;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--ink-muted);
  flex-shrink: 0;
}

.quiz-answer-text {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  flex: 1;
}

.quiz-answer-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* Correct state */
.quiz-answer-card.correct {
  border-color: var(--green) !important;
  background: var(--green-bg) !important;
}

.quiz-answer-card.correct .quiz-answer-icon {
  color: var(--green);
}

/* Wrong state */
.quiz-answer-card.wrong {
  border-color: var(--red) !important;
  background: var(--red-bg) !important;
}

.quiz-answer-card.wrong .quiz-answer-icon {
  color: var(--red);
}

.quiz-answer-card.disabled {
  pointer-events: none;
}

/* ── Procvičování 5-Card Subject Row (Screenshot 4) ───────────── */
.practice-subjects-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.practice-subject-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  padding: 28px 16px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.practice-subject-card:hover {
  border-color: var(--card-border-hover);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.practice-subject-art {
  width: 90px;
  height: 90px;
  object-fit: contain;
  margin-bottom: 16px;
  transition: transform 0.2s;
}

.practice-subject-card:hover .practice-subject-art {
  transform: scale(1.08);
}

.practice-subject-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}

.practice-subject-count {
  font-size: 0.8rem;
  color: var(--ink-muted);
}

/* ── Procvičování Subject Header & Modes (Screenshot 5) ───────── */
.practice-header-card {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}

.practice-header-art {
  width: 72px;
  height: 72px;
  object-fit: contain;
  flex-shrink: 0;
}

.practice-modes-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.practice-mode-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.practice-mode-card:hover {
  border-color: var(--card-border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.practice-mode-art {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex-shrink: 0;
}

.practice-mode-info {
  flex: 1;
  min-width: 0;
}

.practice-mode-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 3px;
  line-height: 1.3;
}

.practice-mode-desc {
  font-size: 0.78rem;
  color: var(--ink-muted);
  line-height: 1.4;
}

.practice-mode-arrow {
  color: var(--ink-subtle);
  transition: transform 0.2s, color 0.2s;
}

.practice-mode-card:hover .practice-mode-arrow {
  color: var(--ink);
  transform: translateX(3px);
}

/* ── Practice 3-Column Grid (Screenshot 5) ────────────────────── */
.practice-3col-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.practice-book-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}

.practice-book-card:hover {
  border-color: var(--card-border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.practice-book-avatar {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--surface-sunken);
}

.practice-book-info {
  flex: 1;
  min-width: 0;
  padding-right: 20px;
}

.practice-book-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.practice-book-author {
  font-size: 0.78rem;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}

.practice-questions-badge {
  display: inline-block;
  background: #332454;
  color: #baa2e6;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--r-pill);
}

.practice-book-arrow {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-subtle);
  transition: transform 0.2s, color 0.2s;
}

.practice-book-card:hover .practice-book-arrow {
  color: var(--ink);
  transform: translate(3px, -50%);
}

/* ── Study Page Layout (Reading view) ─────────────────────────── */
.study-layout-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.study-nav-sidebar {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  padding: 16px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  position: sticky;
  top: 24px;
}

.study-group-header {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 10px 8px 4px;
}

.study-chapter-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all 0.2s;
}

.study-chapter-link:hover {
  background: var(--surface-hover);
  color: var(--ink);
}

.study-chapter-link.active {
  background: rgba(120, 80, 220, 0.25);
  color: var(--ink);
  font-weight: 700;
}

.chapter-check-badge {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  flex-shrink: 0;
}

.chapter-check-badge.done {
  background: var(--green);
  border-color: var(--green);
  color: var(--ink);
}

.study-reader-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  padding: 32px 36px;
  line-height: 1.75;
}

.study-reader-card h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 20px;
}

.study-reader-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin: 24px 0 10px;
}

.study-reader-card p {
  color: #e5def5;
  margin-bottom: 16px;
  font-size: 0.98rem;
}

.study-reader-card strong {
  color: var(--ink);
  font-weight: 700;
}

.study-reader-card ul, .study-reader-card ol {
  margin: 12px 0 18px 24px;
  color: #e5def5;
}

.study-reader-card li {
  margin-bottom: 8px;
}

/* ── Flashcard 3D Interactive ─────────────────────────────────── */
.fc-stage {
  max-width: 520px;
  margin: 0 auto;
  perspective: 1200px;
}

.fc-card-3d {
  width: 100%;
  aspect-ratio: 16 / 10;
  position: relative;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.fc-card-3d.flipped {
  transform: rotateY(180deg);
}

.fc-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--r-banner);
  border: 2px solid var(--card-border);
  background: var(--card-bg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.fc-back {
  background: #2b1f48;
  border-color: var(--accent);
  transform: rotateY(180deg);
}

.fc-tag-label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 12px;
}

.fc-text-large {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.5;
}

.fc-buttons-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.btn-rate-no {
  background: rgba(248, 113, 113, 0.2);
  border: 1px solid var(--red);
  color: #fca5a5;
  padding: 10px 24px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-rate-no:hover {
  background: var(--red);
  color: var(--ink);
}

.btn-rate-yes {
  background: rgba(52, 211, 153, 0.2);
  border: 1px solid var(--green);
  color: #6ee7b7;
  padding: 10px 24px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-rate-yes:hover {
  background: var(--green);
  color: var(--ink);
}

/* ── Modal Dialog (New Screenshot 5) ──────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.quiz-exit-modal {
  background: var(--surface-sunken);
  border: 1px solid #48346b;
  border-radius: var(--r-banner);
  padding: 32px 36px 28px;
  width: 100%;
  max-width: 440px;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

.quiz-exit-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 6px;
}

.quiz-exit-desc {
  font-size: 0.88rem;
  color: var(--ink-muted);
  margin-bottom: 24px;
}

.quiz-exit-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.btn-modal-continue {
  flex: 1;
  background: #7c4ee4;
  color: var(--ink);
  padding: 12px 20px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-modal-continue:hover {
  background: #8b5cf6;
}

.btn-modal-exit {
  flex: 1;
  background: #4a3570;
  color: var(--ink);
  padding: 12px 20px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-modal-exit:hover {
  background: #5b418a;
}

/* ── Mobile Hamburger & Navigation ────────────────────────────── */
.mobile-header {
  display: none;
  background: var(--sidebar-bg);
  border-bottom: 1px solid var(--line);
  padding: 14px 20px;
  align-items: center;
  justify-content: space-between;
}

.mobile-menu-btn {
  font-size: 1.4rem;
  color: var(--ink);
  cursor: pointer;
}

@media (max-width: 992px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  
  .practice-subjects-row {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }
  
  .practice-modes-row {
    grid-template-columns: 1fr;
  }
  
  .practice-3col-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hub-2col-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .platform-sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  
  .platform-sidebar.open {
    transform: translateX(0);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
  }
  
  .mobile-header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 90;
  }
  
  .platform-main {
    margin-left: 0;
    padding: 20px 16px 40px;
  }
  
  .books-2col-grid, .practice-3col-grid {
    grid-template-columns: 1fr;
  }

  .quiz-answers-2x2 {
    grid-template-columns: 1fr;
  }
  
  .study-layout-grid {
    grid-template-columns: 1fr;
  }
  
  .page-title {
    font-size: 1.65rem;
  }
  
  .continue-banner {
    padding: 18px 20px;
  }

  .quiz-speech-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .quiz-speech-bubble::after {
    display: none;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   SETTINGS VIEW & SUB-TABS (Screenshots 3, 4, 5)
   ═════════════════════════════════════════════════════════════════════ */
.settings-container {
  max-width: 860px;
  margin: 0 auto;
}

.settings-tabs-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 24px;
  margin-bottom: 8px;
  scrollbar-width: none;
}
.settings-tabs-bar::-webkit-scrollbar { display: none; }

.settings-tab-btn {
  padding: 8px 18px;
  background: var(--surface);
  border: 1px solid var(--card-border);
  color: var(--ink-secondary);
  border-radius: 9999px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.settings-tab-btn:hover {
  background: var(--card-hover);
  color: var(--ink);
}

.settings-tab-btn.active {
  background: var(--pill-active);
  color: var(--ink);
  border-color: var(--accent);
}

.settings-section-card {
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--r-banner);
  padding: 28px 32px;
  margin-bottom: 24px;
}

.settings-section-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.settings-header-icon {
  width: 40px;
  height: 40px;
  background: rgba(120, 80, 220, 0.2);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}

.settings-header-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}

.settings-header-desc {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin-top: 3px;
}

/* Inner profile card */
.settings-profile-inner {
  background: rgba(18, 14, 30, 0.5);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  padding: 24px;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  align-items: center;
  margin-bottom: 28px;
}

.settings-avatar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.settings-avatar-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.05);
}

.btn-change-avatar {
  background: var(--pill-active);
  color: var(--ink);
  border: 1px solid var(--accent);
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.settings-fields-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-input-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-secondary);
  margin-bottom: 6px;
}

.settings-input-group input,
.settings-input-group select {
  width: 100%;
  padding: 10px 14px;
  background: var(--surface-sunken);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  color: var(--ink);
  font-size: 0.92rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}

.settings-input-group input:focus,
.settings-input-group select:focus {
  border-color: var(--accent);
}

.settings-input-hint {
  font-size: 0.75rem;
  color: var(--ink-muted);
  margin-top: 4px;
}

.btn-save-profile {
  align-self: flex-start;
  background: var(--pill-active);
  color: var(--ink);
  border: none;
  padding: 8px 20px;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
}
.btn-save-profile:hover { opacity: 0.9; }

/* School type */
.settings-sublabel {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 4px;
}
.settings-subdesc {
  font-size: 0.82rem;
  color: var(--ink-muted);
  margin-bottom: 12px;
}

.settings-school-pills {
  display: flex;
  gap: 10px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.settings-school-pill {
  padding: 10px 20px;
  background: var(--surface-sunken);
  border: 1px solid var(--card-border);
  border-radius: 9999px;
  color: var(--ink-secondary);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.settings-school-pill.active {
  background: var(--pill-active);
  color: var(--ink);
  border-color: var(--accent);
}

/* Subject selection pills */
.settings-subject-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.settings-subject-pill {
  padding: 9px 18px;
  background: var(--surface-sunken);
  border: 1px solid var(--card-border);
  border-radius: 9999px;
  color: var(--ink-secondary);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.settings-subject-pill.active {
  background: var(--pill-active);
  color: var(--ink);
  border-color: var(--accent);
}

.settings-subject-pill .pill-tag {
  font-size: 0.72rem;
  color: var(--ink-muted);
}
.settings-subject-pill.active .pill-tag {
  color: #d8c9ff;
}

/* Appearance theme cards */
.settings-themes-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.settings-theme-card {
  background: var(--surface-sunken);
  border: 2px solid var(--card-border);
  border-radius: var(--r-card);
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.settings-theme-card.active {
  border-color: var(--accent);
}

.theme-card-preview {
  height: 60px;
  border-radius: 8px;
  background: #ffffff;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
}
.theme-card-preview.dark { background: #120e1e; }
.theme-card-preview.system {
  background: linear-gradient(135deg, #ffffff 50%, #120e1e 50%);
}

.theme-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
}

.theme-card-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.settings-theme-card.active .theme-card-radio {
  background: var(--accent);
  border-color: var(--accent);
}
.settings-theme-card.active .theme-card-radio::after {
  content: '✓';
  font-size: 11px;
  color: var(--ink);
}

/* Settings account table */
.settings-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.settings-account-row:last-child { border-bottom: none; }

.settings-acc-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.settings-acc-label {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
}
.settings-acc-sub {
  font-size: 0.82rem;
  color: var(--ink-muted);
}

.btn-acc-action {
  background: var(--pill-active);
  color: var(--ink);
  border: none;
  padding: 8px 18px;
  border-radius: 9999px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-acc-action.btn-logout {
  background: rgba(220, 50, 50, 0.2);
  border: 1px solid rgba(220, 50, 50, 0.4);
  color: #ff8080;
}
.btn-acc-action.btn-logout:hover {
  background: rgba(220, 50, 50, 0.35);
}

/* ═════════════════════════════════════════════════════════════════════
   AUTH MODAL & REGISTRATION WIZARD
   ═════════════════════════════════════════════════════════════════════ */
.auth-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 7, 18, 0.85);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.auth-modal-card {
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--r-banner);
  width: 100%;
  max-width: 500px;
  padding: 32px 36px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}

.auth-modal-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--card-border);
  padding-bottom: 12px;
}

.auth-tab-btn {
  background: none;
  border: none;
  color: var(--ink-muted);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
}

.auth-tab-btn.active {
  color: var(--ink);
  background: var(--pill-active);
}

.auth-form-group {
  margin-bottom: 16px;
}

.auth-form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-secondary);
  margin-bottom: 6px;
}

.auth-form-group input,
.auth-form-group select {
  width: 100%;
  padding: 12px 16px;
  background: var(--surface-sunken);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  color: var(--ink);
  font-size: 0.95rem;
  outline: none;
  box-sizing: border-box;
}

.auth-form-group input:focus,
.auth-form-group select:focus {
  border-color: var(--accent);
}

.btn-auth-submit {
  width: 100%;
  padding: 14px;
  background: var(--accent);
  color: var(--ink);
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  margin-top: 16px;
  transition: opacity 0.2s;
}
.btn-auth-submit:hover { opacity: 0.9; }

.auth-error-msg {
  background: rgba(220, 60, 60, 0.15);
  border: 1px solid rgba(220, 60, 60, 0.4);
  color: #ff9999;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-bottom: 16px;
}


/* ═════════════════════════════════════════════════════════════════════
   ROZBOR KNIHY / ZÁPIS — SCREENSHOT-ACCURATE REDESIGN
   ═════════════════════════════════════════════════════════════════════ */
.study-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.study-mode-segmented {
  display: inline-flex;
  background: var(--surface-sunken);
  border: 1px solid var(--card-border);
  padding: 4px;
  border-radius: var(--r-pill);
  gap: 4px;
}

.study-mode-btn {
  padding: 9px 20px;
  border-radius: var(--r-pill);
  border: none;
  background: none;
  color: #c7bfdb;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.study-mode-btn:hover {
  color: var(--ink);
}

.study-mode-btn.active {
  background: var(--pill-active);
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(120, 80, 220, 0.4);
}

.btn-download-pdf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--pill-active);
  color: var(--ink);
  border: none;
  padding: 10px 22px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(120, 80, 220, 0.35);
  transition: transform 0.2s, opacity 0.2s;
}

.btn-download-pdf:hover {
  transform: translateY(-1px);
  opacity: 0.95;
}

/* Chapter Selector Filter Card */
.study-chapter-selector-card {
  background: var(--surface-sunken);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 18px 24px;
  margin-bottom: 24px;
}

.study-cs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  margin-bottom: 14px;
}

.study-cs-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
}

.study-cs-counter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #a79bbb;
}

.study-cs-pills-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.study-filter-pill {
  background: var(--surface-sunken);
  border: 1px solid var(--card-border);
  color: #d1c8e6;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.study-filter-pill:hover {
  color: var(--ink);
  border-color: rgba(120, 80, 220, 0.4);
}

.study-filter-pill.active {
  background: var(--pill-active);
  border-color: var(--accent);
  color: var(--ink);
  font-weight: 700;
}

/* Two-column layout */
.study-content-grid {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  transition: grid-template-columns 0.3s;
}

.study-content-grid.sidebar-collapsed {
  grid-template-columns: 48px minmax(0, 1fr);
}

/* Left Sidebar */
.study-sidebar-pane {
  background: var(--surface-sunken);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 18px 14px;
  position: sticky;
  top: 24px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

.study-sidebar-collapsed-content {
  display: none;
}

.study-content-grid.sidebar-collapsed .study-sidebar-pane {
  padding: 12px 6px;
  text-align: center;
}

.study-content-grid.sidebar-collapsed .study-sidebar-full-content {
  display: none;
}

.study-content-grid.sidebar-collapsed .study-sidebar-collapsed-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.study-sidebar-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 6px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 16px;
}

.study-sidebar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ink);
}

.study-collapse-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-sunken);
  border: 1px solid var(--card-border);
  color: #c7bfdb;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
}

.study-collapse-btn:hover {
  background: var(--accent);
  color: var(--ink);
}

.study-group-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8c81a6;
  padding: 14px 10px 6px;
}

.study-ch-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #c2b8d8;
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: 3px;
  line-height: 1.35;
}

.study-ch-pill:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
}

.study-ch-pill.active {
  background: var(--pill-active);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(120, 80, 220, 0.35);
}

.study-ch-index {
  font-size: 0.8rem;
  opacity: 0.75;
  font-feature-settings: "tnum";
  min-width: 20px;
}

.study-ch-text {
  flex: 1;
}

.study-ch-readmark {
  font-size: 0.75rem;
  color: #86efac;
}

/* Right Main Article Card */
.study-article-pane {
  background: var(--surface-sunken);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  padding: 38px 44px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

@media (max-width: 820px) {
  .study-content-grid {
    grid-template-columns: 1fr;
  }
  .study-article-pane {
    padding: 24px 20px;
  }
}

.study-article-category {
  font-size: 0.85rem;
  font-weight: 700;
  color: #a79bbb;
  margin-bottom: 8px;
}

.study-article-title {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 24px 0;
  line-height: 1.25;
}

.study-article-body {
  font-size: 1rem;
  line-height: 1.75;
  color: #ded8ee;
}

.study-article-body p {
  margin-bottom: 18px;
}

.study-article-body strong {
  color: var(--ink);
  font-weight: 700;
}

.study-article-body h3 {
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--ink);
  margin: 28px 0 12px;
}

.study-article-body ul {
  margin: 12px 0 20px 24px;
  padding: 0;
}

.study-article-body li {
  margin-bottom: 10px;
}

.study-article-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  margin-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
  gap: 12px;
}

/* Print layout for PDF export */
@media print {
  body, html, #app {
    background: #ffffff !important;
    color: #111827 !important;
  }
  .platform-sidebar, .mobile-header, .main-topbar, .btn-top-back, .study-top-row, .study-chapter-selector-card, .study-sidebar-pane, .study-article-footer {
    display: none !important;
  }
  .study-content-grid {
    display: block !important;
  }
  .study-article-pane {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: #111827 !important;
  }
  .study-article-title {
    color: #111827 !important;
  }
  .study-article-body {
    color: #1f2937 !important;
    font-size: 11pt !important;
    line-height: 1.6 !important;
  }
  .study-article-body strong {
    color: #000000 !important;
  }
}

/* Panda identity and finished study interactions */
:root {
  --bg: #131019;
  --bg-darker: #100d15;
  --sidebar-bg: #16121e;
  --surface: #211b2e;
  --surface-hover: #2b233b;
  --surface-sunken: #191420;
  --card-bg: #211b2e;
  --card-border: #382e48;
  --ink-muted: #b1a5c2;
  --ink-subtle: #9b8eae;
  --accent: #9e78ef;
  --accent-active: #65449b;
  --accent-gradient: linear-gradient(115deg, #8053d1, #6240a2);
  --line: #32283f;
}
html { scroll-padding-top: 80px; }
button, a, input, select, [tabindex] { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #c9acff; outline-offset: 4px; }
button:disabled { cursor: default; }
.platform-sidebar { background: var(--sidebar-bg); border-right-color: var(--line); }
.brand-text { letter-spacing: -.06em; }
.platform-brand::before { content:''; width:8px; height:25px; border-radius:5px; background:#ffa957; transform:rotate(15deg); }
.nav-item.active { box-shadow:none; }
.platform-main { max-width: 1800px; }
.main-topbar { margin-bottom: 12px; }
.topbar-left::after { content:'Tvůj prostor pro velké pochopení.'; font-size:.75rem; color:var(--ink-muted); }
.eyebrow { display:block; font-size:.67rem; font-weight:700; letter-spacing:.16em; color:#c5b0e8; margin-bottom:12px; }
.dashboard-intro { position:relative; padding: 18px 230px 28px 0; min-height:210px; }
.dashboard-intro .page-title { font-size:clamp(1.9rem, 3vw, 2.8rem); line-height:1.2; letter-spacing:-.045em; margin-bottom:14px; font-weight:700; }
.dashboard-intro .page-subtitle { font-size:.88rem; margin-bottom:0; }
.dashboard-intro > img { position:absolute; right:26px; bottom:12px; width:190px; height:215px; object-fit:contain; filter:drop-shadow(0 14px 22px #0003); }
.continue-banner { background:var(--accent-gradient); box-shadow:none; min-height:122px; }
.subject-tile-card { transition:transform .2s, border-color .2s, background .2s; }
.subject-tile-card:hover, .practice-subject-card:hover { transform:translateY(-4px); background:var(--surface-hover); border-color:var(--accent); }
.subject-tile-img { width:96px; height:104px; object-fit:contain; }
.practice-subject-img { width:120px; height:130px; object-fit:contain; }
.subject-header-avatar { object-fit:contain; }
.hub-hero-banner { background:linear-gradient(110deg, #332341, #4f326d); cursor:default; }
.hub-hero-title { line-height:1.2; margin-bottom:12px; }
.hub-hero-mascot { width:155px; height:165px; object-fit:contain; }
.hub-mode-card { width:100%; text-align:left; font-family:inherit; color:var(--ink); }
.hub-mode-mascot { object-fit:contain; }
.practice-tip { display:flex; gap:14px; align-items:center; padding:18px 22px; border:1px solid var(--card-border); background:var(--surface); border-radius:16px; color:var(--ink-muted); font-size:.84rem; }
.practice-tip > span { color:#ffbb78; font-size:1.5rem; }
.quiz-fullscreen { max-width:920px; padding:12px 0 30px; }
.quiz-top-bar { gap:14px; margin-bottom:38px; }
.quiz-title-tag { min-width:0; flex-shrink:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:240px; }
.quiz-progress-track { min-width:45px; background:var(--card-border); height:8px; }
.quiz-progress-thumb { background:#b697f1; }
.quiz-speech-row { margin-bottom:26px; gap:26px; }
.quiz-speech-bubble { padding:28px 30px; max-width:none; }
.quiz-bubble-label { font-size:.65rem; letter-spacing:.12em; margin-bottom:14px; }
.quiz-bubble-question { font-size:clamp(1.2rem, 2vw, 1.65rem); line-height:1.5; font-weight:600; outline:none; }
.quiz-mascot-avatar { width:160px; height:180px; animation:none; filter:drop-shadow(0 12px 20px #0002); }
.quiz-answers-2x2 { max-width:none; gap:12px; }
.quiz-answer-card { width:100%; text-align:left; padding:19px; min-height:88px; border-width:1px; border-bottom-width:3px; }
.quiz-answer-text { font-size:.92rem; font-weight:500; line-height:1.6; overflow-wrap:anywhere; }
.quiz-answer-card.disabled { opacity:1; }
.quiz-answer-card.correct { border-color:#65d6a2!important; }
.quiz-answer-card.wrong { border-color:#ef9d9d!important; }
.quiz-answer-card.disabled:not(.correct):not(.wrong) { opacity:.55; }
.quiz-answer-num { width:28px; height:28px; border:1px solid var(--line); font-size:.72rem; }
.quiz-feedback:empty { display:none; }
.quiz-feedback { display:flex; align-items:center; gap:24px; margin-top:24px; padding:22px; border:1px solid var(--card-border); border-radius:16px; background:var(--surface-sunken); }
.feedback-copy { flex:1; min-width:0; font-size:.86rem; }
.feedback-copy strong { font-size:.95rem; }
.feedback-copy p { color:var(--ink-muted); margin-top:8px; line-height:1.7; }
.feedback-copy.is-correct strong { color:var(--green); }
.feedback-copy.is-wrong strong { color:#f6b2a3; }
.quiz-next { width:auto!important; flex-shrink:0; display:flex; align-items:center; gap:10px; padding:13px 20px; }
.quiz-bottom { display:flex; gap:16px; justify-content:space-between; margin-top:24px; font-size:.68rem; color:var(--ink-muted); }
.quiz-sound-circle[aria-pressed="false"] { opacity:.45; }
.quiz-finish-card { max-width:800px; margin:16px auto; padding:32px; text-align:center; background:var(--surface); border:1px solid var(--card-border); border-radius:24px; }
.quiz-finish-card h1 { font-size:1.9rem; letter-spacing:-.04em; margin-bottom:8px; }
.quiz-finish-card > p { color:var(--ink-muted); }
.finish-mascot { display:block; width:150px; height:170px; object-fit:contain; margin:0 auto 14px; }
.result-stats { display:grid; grid-template-columns:repeat(3,1fr); margin:28px 0; padding:22px 0; border-block:1px solid var(--line); }
.result-stats > div + div { border-left:1px solid var(--line); }
.result-stats strong { display:block; font-size:1.5rem; }
.result-stats span { display:block; font-size:.73rem; color:var(--ink-muted); margin-top:6px; }
.finish-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }
.finish-actions .btn-purple { width:auto; padding:12px 22px; }
.mistake-review { text-align:left; margin-top:32px; }
.mistake-review h2 { font-size:1rem; margin-bottom:16px; }
.mistake-review article { padding:18px 0; border-top:1px solid var(--line); }
.mistake-review h3 { font-size:.9rem; margin-bottom:10px; }
.mistake-review p { font-size:.8rem; color:var(--ink-muted); margin-top:6px; }
.mistake-review .correct-answer { color:var(--green); }
.perfect-note { margin-top:24px; font-size:.85rem; }
.exit-mascot { height:110px; object-fit:contain; margin-bottom:16px; }
.empty-state { padding:48px 20px; text-align:center; max-width:660px; margin:auto; }
.empty-state img { display:block; width:160px; height:180px; object-fit:contain; margin:0 auto 20px; }
.empty-state h1,.empty-state h2 { margin-bottom:14px; }
.empty-state p { color:var(--ink-muted); margin-bottom:24px; }
.empty-state button { width:auto; margin:8px; padding:12px 22px; }
.loading-state { text-align:center; padding:100px 20px; color:var(--ink-muted); }
.flashcard-stage { max-width:680px; margin:32px auto; }
.flashcard-surface { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; width:100%; min-height:280px; padding:32px; border-radius:24px; border:1px solid var(--card-border); background:var(--surface); box-shadow:0 10px 0 var(--surface-sunken); }
.flashcard-question { font-size:1.35rem; line-height:1.6; font-weight:600; }
.flashcard-hint { font-size:.75rem; color:var(--ink-muted); }
.flashcard-answer:not(:empty) { padding:24px; margin-top:24px; border-radius:16px; background:var(--green-bg); text-align:center; }
.flashcard-answer p { color:var(--ink); font-weight:600; font-size:1.1rem; }
.fc-buttons-row button:disabled { opacity:.35; }
.app-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:10000; max-width:calc(100vw - 32px); padding:16px 24px; border-radius:14px; border:1px solid var(--green); background:var(--surface); color:var(--ink); box-shadow:var(--shadow-lg); font-size:.85rem; }
.app-toast.error { border-color:var(--red); }
.avatar-options { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:24px 0; }
.avatar-options button { padding:10px; border-radius:14px; border:1px solid var(--card-border); background:var(--surface-sunken); }
.avatar-options button:hover { border-color:var(--accent); }
.avatar-options img { display:block; height:86px; width:100%; object-fit:contain; }
.avatar-options span { display:block; margin-top:8px; font-size:.7rem; }
.quiz-exit-modal { max-height:90dvh; overflow-y:auto; }
[data-theme="light"] {
  --bg:#f7f4fa; --bg-darker:#eee8f4; --sidebar-bg:#fff;
  --surface:#fff; --surface-hover:#f0e9f8; --surface-sunken:#f1eaf7;
  --card-bg:#fff; --card-border:#ded3e9; --line:#e3d9ed;
  --ink:#2a1f3c; --ink-muted:#6e5c83; --ink-subtle:#766687;
  --pill-bg:#efe7f8; --pill-border:#ddd0ec; --green:#19754d; --red:#b43838;
}
/* Legacy components use the same foreground token as the new views. */
[data-theme="light"] :is(.brand-text,.page-title,.section-headline,.subject-tile-title,.subject-header-name,.practice-subject-title,.practice-book-title,.book-card-title,.quiz-title-tag,.quiz-bubble-question,.quiz-answer-text,.quiz-back-circle,.settings-header-title,.settings-tab-btn,.settings-input-group input,.settings-school-pill,.settings-theme-card,.study-book-title,.fc-text-large,.stat-value,.card-title,.material-chip-title,.practice-book-by,.settings-header-icon) { color:var(--ink); }
[data-theme="light"] .hub-mode-title { color:var(--ink); }
[data-theme="light"] .nav-item:hover { color:var(--ink); background:var(--surface-hover); }
[data-theme="light"] .hub-hero-banner :is(.hub-hero-title,.hub-hero-desc,.eyebrow) { color: var(--ink); }
.btn-purple, .btn-modal-continue, .btn-landing-cta { color: var(--ink); background:var(--accent-gradient); }
[data-theme="light"] .eyebrow { color:#7954ac; }
[data-reduce-motion="1"] *, [data-reduce-motion="1"] *::before, [data-reduce-motion="1"] *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media(max-width:1100px) {
  .dashboard-intro { padding-right:180px; }
  .dashboard-intro > img { width:155px; height:185px; right:0; }
  .practice-subjects-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:768px) {
  .platform-main { padding:16px 18px 40px; }
  .mobile-header { background:var(--sidebar-bg); border-bottom:1px solid var(--line); }
  .mobile-header .platform-brand { padding:0; }
  .mobile-menu-btn { min-width:44px; min-height:44px; display:grid; place-items:center; }
  .platform-sidebar.open { top:70px; width:260px; max-height:calc(100dvh - 70px); }
  .main-topbar { margin-bottom:12px; }
  .topbar-left::after { font-size:.65rem; max-width:150px; }
  .dashboard-intro { min-height:190px; padding:12px 115px 24px 0; }
  .dashboard-intro .page-title { font-size:1.65rem; }
  .dashboard-intro > img { width:115px; height:148px; bottom:30px; right:-5px; }
  .dashboard-intro .page-subtitle { font-size:.76rem; }
  .dashboard-intro .eyebrow { font-size:.55rem; letter-spacing:.1em; }
  .subjects-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .subject-tile-card { min-width:0; }
  .continue-banner { padding:18px; }
  .continue-meta { font-size:.68rem; }
  .continue-avatar { width:46px; height:46px; }
  .continue-left { gap:12px; min-width:0; }
  .continue-play { width:36px; height:36px; flex-shrink:0; }
  .quiz-top-bar { flex-wrap:wrap; gap:10px; margin-bottom:24px; }
  .quiz-title-tag { flex:1; max-width:none; font-size:.82rem; }
  .quiz-progress-track { flex-basis:100%; order:5; margin:4px 0 0; }
  .quiz-speech-row { flex-direction:row; align-items:center; text-align:left; gap:12px; }
  .quiz-speech-bubble { padding:20px; }
  .quiz-bubble-label { font-size:.55rem; margin-bottom:10px; }
  .quiz-bubble-question { font-size:1.08rem; line-height:1.5; }
  .quiz-mascot-avatar { width:80px; height:110px; }
  .quiz-answers-2x2 { grid-template-columns:1fr; }
  .quiz-answer-card { min-height:68px; padding:15px; gap:12px; }
  .quiz-feedback { align-items:stretch; flex-direction:column; gap:16px; padding:18px; }
  .quiz-next { justify-content:center; width:100%!important; }
  .quiz-bottom { flex-direction:column; gap:6px; }
  .quiz-finish-card { padding:24px 18px; }
  .result-stats strong { font-size:1.2rem; }
  .finish-actions { flex-direction:column; }
  .hub-hero-banner { padding:24px; gap:10px; }
  .hub-hero-mascot { width:100px; height:130px; }
  .hub-hero-title { font-size:1.6rem; }
  .practice-subjects-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .practice-subject-card { min-width:0; }
  .flashcard-surface { padding:24px; }
  .flashcard-question { font-size:1.1rem; }
  .fc-buttons-row { flex-direction:column; gap:10px; }
  .settings-tabs-bar { overflow-x:auto; justify-content:flex-start; }
}
.grid-empty { grid-column:1/-1; padding:32px; text-align:center; color:var(--ink-muted); border:1px dashed var(--card-border); border-radius:16px; font-size:.85rem; }
.daily-progress { margin-top:16px; font-size:.72rem; color:var(--ink-muted); }
.daily-progress progress { display:block; width:100%; height:6px; margin-top:9px; border:0; border-radius:10px; overflow:hidden; accent-color:#ffbd72; }
.daily-progress progress::-webkit-progress-bar { background:var(--card-border); }
.daily-progress progress::-webkit-progress-value { background:#ffbd72; border-radius:10px; }
:root { --ink-secondary:var(--ink-muted); --pill-active:var(--accent-strong); }
.settings-profile-inner { background:var(--surface-sunken); }
.settings-theme-card { background:var(--surface-sunken); }
:is(.btn-purple,.btn-modal-continue,.btn-save-profile,.btn-landing-cta,.nav-item.active,.continue-title,.continue-label,.continue-meta,.continue-play,.hub-hero-title,.hub-hero-desc,.hub-hero-link,.btn-rate-yes,.btn-modal-quit) { color:#fff; }
:is(.settings-school-pill.active,.settings-subject-pill.active) { color:#fff; background:var(--accent-strong); }
.settings-avatar-img { object-fit:contain; border-radius:18px; }
@media(max-width:600px) { .settings-section-card {padding:22px 18px;} .settings-profile-inner {grid-template-columns:1fr; padding:18px;} .settings-avatar-col {flex-direction:row; justify-content:center;} .settings-fields-col {min-width:0;} .settings-input-group input {min-width:0;} }

:root { --card-hover:var(--surface-hover); }
[data-theme="light"] :is(.settings-school-pill.active,.settings-subject-pill.active,.settings-tab-btn.active,.btn-change-avatar) { color:#fff; }
.btn-change-avatar {color:#fff; background:var(--accent-strong);}
@media(max-width:820px) {
  .study-article-pane {order:1;scroll-margin-top:85px;}
  .study-sidebar-pane {order:2;}
  .study-article-footer, .study-article-footer > div {flex-wrap:wrap;gap:10px;}
}

/* Dashboard summary: independent cards with a consistent visual rhythm. */
.dashboard-side {
  display:flex;
  flex-direction:column;
  gap:20px;
  align-self:start;
  min-width:0;
}
.dashboard-side .widget-card {
  padding:24px;
  border-radius:20px;
  background:linear-gradient(145deg,var(--surface),var(--surface-sunken));
  box-shadow:0 5px 20px #0000000d;
  overflow:hidden;
}
.dashboard-side .widget-head-label {font-size:.65rem;letter-spacing:.1em;font-weight:600;margin-bottom:10px;}
.streak-head {display:flex;align-items:center;gap:16px;}
.streak-flame, .calendar-icon-wrap, .invite-icon-wrap {
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;flex:0 0 48px;border-radius:15px;font-size:1.5rem;
}
.streak-flame {background:#ffac6120;border:1px solid #ffb47425;}
.calendar-icon-wrap {background:#ae8ae51a;border:1px solid #ae8ae525;}
.invite-icon-wrap {background:#e3a7da16;border:1px solid #e3a7da25;}
.dashboard-side .widget-value-row {margin:0;gap:8px;}
.dashboard-side .widget-big-number {font-size:2rem;font-weight:700;letter-spacing:-.05em;}
.dashboard-side .widget-subtext {font-size:.8rem;font-weight:500;color:var(--ink-muted);}
.dashboard-side .daily-progress {margin-top:22px;padding-top:18px;border-top:1px solid var(--line);}
.dashboard-side .daily-progress span {font-size:.72rem;}
.daily-progress progress {appearance:none;-webkit-appearance:none;background:var(--card-border);color:#ffbd72;}
.daily-progress progress::-moz-progress-bar {background:#ffbd72;border-radius:10px;}
.widget-countdown .countdown-content {gap:16px;padding-right:12px;min-height:70px;}
.widget-gear-icon {top:13px;right:13px;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;}
.widget-gear-icon .nav-icon {width:15px;height:15px;}
.widget-gear-icon:hover {background:var(--surface-hover);}
.widget-invite .invite-content {gap:14px;margin-bottom:22px;}
.invite-title {font-size:1rem;font-weight:600;line-height:1.45;margin-bottom:8px;letter-spacing:-.02em;}
.invite-description {font-size:.75rem;line-height:1.7;color:var(--ink-muted);}
.widget-invite .btn-purple {padding:12px 14px;font-size:.8rem;background:var(--accent-soft);border:1px solid var(--accent-border);color:var(--ink);box-shadow:none;}
.widget-invite .btn-purple:hover {background:var(--accent-active);color:#fff;}
.section-action-btn {flex-shrink:0;white-space:nowrap;}
.section-action-btn .nav-icon {width:16px;height:16px;flex-shrink:0;}

/* Material listings use these class names in the actual rendered markup. */
.books-filter-bar {display:flex;align-items:center;gap:16px;margin:22px 0 18px;flex-wrap:wrap;}
.books-filter-bar .search-input-pill {min-width:220px;}
.search-input-pill input {background:var(--surface);height:46px;}
.filter-pills-row {display:flex;align-items:center;gap:8px;flex-shrink:0;}
.books-count-label {font-size:.76rem;color:var(--ink-muted);margin-bottom:16px;}
.book-card-2col {display:flex;align-items:center;gap:8px;min-width:0;padding:16px;background:var(--surface);border:1px solid var(--card-border);border-radius:16px;transition:border-color .2s,background .2s;}
.book-card-2col:hover {border-color:var(--accent);background:var(--surface-hover);}
.book-card-click-area {display:flex;align-items:center;gap:16px;flex:1;min-width:0;cursor:pointer;align-self:stretch;}
.book-card-avatar {display:block;width:66px;height:70px;flex:0 0 66px;object-fit:contain;}
.book-card-info {min-width:0;}
.book-card-title {font-size:.92rem;font-weight:600;line-height:1.5;overflow-wrap:anywhere;margin-bottom:4px;}
.book-card-by {font-size:.74rem;line-height:1.5;color:var(--ink-muted);}
.book-card-bookmark-btn {width:34px;height:38px;flex:0 0 34px;display:grid;place-items:center;border-radius:10px;color:var(--ink-muted);}
.book-card-bookmark-btn:hover,.book-card-bookmark-btn.active {background:var(--accent-soft);color:var(--accent);}
.book-card-arrow {display:grid;place-items:center;width:20px;flex:0 0 20px;color:var(--ink-muted);cursor:pointer;}
.hub-hero-banner {display:flex;align-items:center;justify-content:space-between;gap:24px;padding:32px 36px;border-radius:22px;margin:16px 0 24px;}
.hub-hero-left {min-width:0;}
.hub-hero-title {font-size:2rem;font-weight:700;letter-spacing:-.04em;color:#fff;}
.hub-hero-desc {font-size:.88rem;line-height:1.8;color:#e1d5ef;max-width:520px;}
.hub-hero-banner .eyebrow {color:#d1bce9;}
.hub-mode-card {display:flex;align-items:center;gap:20px;padding:24px;background:var(--surface);border:1px solid var(--card-border);border-radius:18px;transition:border-color .2s,background .2s;}
.hub-mode-card:hover {border-color:var(--accent);background:var(--surface-hover);}
.hub-mode-mascot {display:block;width:76px;height:86px;flex:0 0 76px;object-fit:contain;}
.hub-mode-content {flex:1;min-width:0;}
.hub-mode-title {font-size:1rem;font-weight:600;line-height:1.5;margin-bottom:6px;}
.hub-mode-desc {font-size:.78rem;color:var(--ink-muted);line-height:1.7;}
.hub-mode-card > svg {flex-shrink:0;}
[data-theme="light"] .hub-hero-banner :is(.hub-hero-title,.hub-hero-desc,.eyebrow) {color:#fff;}
@media(max-width:1100px) and (min-width:769px) {
  .dashboard-grid {grid-template-columns:minmax(0,1fr) 270px;gap:24px;}
  .dashboard-side .widget-card {padding:20px;}
  .hub-mode-card {gap:14px;padding:20px;}
  .hub-mode-mascot {width:60px;height:70px;flex-basis:60px;}
}
@media(max-width:768px) {
  .dashboard-side {gap:16px;margin-top:8px;}
  .dashboard-side .widget-card {padding:24px;}
  .books-filter-bar {align-items:stretch;gap:12px;}
  .books-filter-bar .search-input-pill {min-width:0;flex-basis:100%;}
  .book-card-2col {padding:14px;gap:4px;}
  .book-card-click-area {gap:12px;}
  .book-card-avatar {width:52px;height:60px;flex-basis:52px;}
  .book-card-title {font-size:.85rem;}
  .book-card-bookmark-btn {width:30px;flex-basis:30px;}
  .hub-hero-banner {padding:24px;gap:16px;}
  .hub-hero-title {font-size:1.6rem;}
  .hub-hero-desc {font-size:.78rem;}
  .hub-mode-card {padding:20px;gap:16px;}
  .hub-mode-mascot {width:60px;height:70px;flex-basis:60px;}
}

/* Practice subject heading: keep the mascot inside a compact introduction. */
.subject-header-row {display:flex;align-items:center;gap:24px;position:relative;isolation:isolate;padding:26px 30px;margin:16px 0 24px;border:1px solid var(--card-border);border-radius:22px;background:linear-gradient(115deg,var(--surface),var(--surface-sunken));min-width:0;}
.subject-header-row > div {min-width:0;max-width:650px;padding-right:28px;}
.subject-header-avatar {display:block;width:110px;height:116px;max-width:110px;object-fit:contain;flex:0 0 110px;}
.subject-header-name {font-size:clamp(1.6rem,2.5vw,2.15rem);font-weight:700;line-height:1.25;letter-spacing:-.04em;margin-bottom:10px;}
.subject-header-subtitle {font-size:.84rem;color:var(--ink-muted);line-height:1.8;margin:0;}
.practice-book-content {flex:1;min-width:0;}
.practice-book-by {font-size:.74rem;color:var(--ink-muted);line-height:1.5;margin:5px 0 10px;}
.practice-book-badge {display:inline-flex;align-items:center;font-size:.65rem;font-weight:500;color:var(--ink-muted);border:1px solid var(--card-border);border-radius:20px;padding:3px 9px;background:var(--surface-sunken);}
@media(max-width:768px) {
 .subject-header-row {padding:22px 18px;gap:16px;margin-block:14px 22px;}
 .subject-header-avatar {width:74px;height:84px;max-width:74px;flex-basis:74px;}
 .subject-header-row > div {padding-right:10px;}
 .subject-header-name {font-size:1.4rem;margin-bottom:6px;}
 .subject-header-subtitle {font-size:.74rem;line-height:1.6;}
}

/* Subscription, access and the daily overview share the existing purple palette. */
.dashboard-side{gap:22px;align-self:start}
.dashboard-side .widget-card{padding:26px;border-radius:24px;box-shadow:0 8px 28px #00000012;overflow:hidden;position:relative}
.dashboard-side .widget-card:before{content:'';position:absolute;left:26px;right:26px;top:0;height:2px;background:linear-gradient(90deg,transparent,#b99bea77,transparent)}
.dashboard-side .widget-streak{background:radial-gradient(ellipse at 100% 0,#ffae5e12,transparent 60%),var(--card-bg,var(--surface))}
.dashboard-side .widget-countdown{background:radial-gradient(ellipse at 100% 0,#ae90ed18,transparent 65%),var(--card-bg,var(--surface))}
.dashboard-side .widget-invite{background:radial-gradient(ellipse at 100% 0,#ed9bc712,transparent 65%),var(--card-bg,var(--surface))}
.dashboard-side .widget-big-number{font-size:2.65rem;line-height:1.1}
.dashboard-side .widget-head-label{font-size:.65rem;letter-spacing:.1em;line-height:1.5;margin-bottom:12px}
.dashboard-side .streak-flame,.dashboard-side .calendar-icon-wrap,.dashboard-side .invite-icon-wrap{width:48px;height:48px;min-width:48px;border-radius:16px;background:#a482db15;display:grid;place-items:center;font-size:25px}
.dashboard-side .streak-head,.dashboard-side .countdown-content,.dashboard-side .invite-content{align-items:start;gap:16px}
.dashboard-side .daily-progress{margin-top:22px;padding-top:18px}
.dashboard-side .daily-progress progress{height:7px;border-radius:8px}
.countdown-edit{width:100%;display:flex;align-items:center;gap:9px;margin-top:23px;padding:12px 0 0;border:0;border-top:1px solid var(--line);color:var(--ink-muted);background:transparent;font:600 .74rem inherit;cursor:pointer;text-align:left}
.countdown-edit svg{width:18px;height:18px;flex-shrink:0}.countdown-edit span{flex:1}.countdown-edit:hover{color:var(--ink)}
.countdown-edit:focus-visible{outline:2px solid #ba97ff;outline-offset:5px;border-radius:4px}
.dashboard-side .invite-title{font-size:1.05rem;line-height:1.45;margin:0 0 10px}.dashboard-side .invite-description{font-size:.76rem;line-height:1.85;margin:0;color:var(--ink-muted)}
.dashboard-side .widget-invite .btn-purple{margin-top:24px;font-size:.78rem;min-height:46px;border-radius:14px}
.access-banner{display:flex;align-items:center;gap:16px;padding:20px 24px;margin:0 0 30px;border:1px solid #b18ae44d;border-radius:20px;background:linear-gradient(115deg,#a77ae61a,#edb97508)}
.access-banner>span{font-size:28px;color:#f4be77}.access-banner>div{flex:1}.access-banner strong{font-size:.95rem}.access-banner p{font-size:.8rem;color:var(--ink-muted);margin:5px 0 0;line-height:1.6}.access-banner button{flex-shrink:0}
.billing-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;max-width:1100px;margin-top:34px;align-items:start}
.billing-plan,.billing-state{border:1px solid var(--card-border);border-radius:28px;padding:36px;background:var(--card-bg,var(--surface));min-width:0}
.billing-plan{background:radial-gradient(ellipse at 100% 0,#bd90ef22,transparent 65%),var(--card-bg,var(--surface))}
.plan-badge{display:inline-block;color:#bf9eea;background:#ab7ae718;border:1px solid #ab7ae735;padding:7px 12px;border-radius:30px;font-size:.66rem;letter-spacing:.07em;font-weight:700}
.billing-plan h2{font-size:2.2rem;letter-spacing:-.05em;margin:22px 0 4px}.plan-price{font-size:2.8rem;font-weight:750;letter-spacing:-.06em}.plan-price span{font-size:.9rem;font-weight:500;letter-spacing:0;color:var(--ink-muted)}
.billing-plan ul{padding:0;list-style:none;line-height:1.9;font-size:.87rem;margin:26px 0}.billing-plan li:before{content:'✓';color:#9ed7b6;margin-right:12px}.billing-plan p{font-size:.8rem;color:var(--ink-muted);line-height:1.85}.billing-plan small{display:block;margin-top:16px;color:var(--ink-muted);font-size:.72rem}.billing-plan>.btn-purple{width:100%;margin-top:20px}
.recurring-consent{display:flex;align-items:flex-start;gap:12px;font-size:.78rem;line-height:1.7;margin-top:22px}.recurring-consent input{accent-color:#9e76db;margin-top:4px;width:18px;height:18px;flex-shrink:0}.billing-notice{padding:16px;border:1px solid #e7be6d44;background:#e7be6d0a;border-radius:14px;font-size:.8rem;line-height:1.75;color:var(--ink-muted)}
.billing-state>img{display:block;margin:0 auto 24px;object-fit:contain}.billing-state h2{font-size:1.4rem;margin-top:10px}.billing-state dl{margin:24px 0}.billing-state dl>div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.8rem}.billing-state dt{color:var(--ink-muted)}.billing-state dd{margin:0;text-align:right}.billing-state button{width:100%;margin:6px 0}.billing-state p,#billing-return{font-size:.8rem;color:var(--ink-muted);line-height:1.8}#billing-error{color:#efb0ae;font-size:.8rem;margin-top:12px}
button:disabled{cursor:default;opacity:.5}.invite-dialog p{font-size:.87rem;line-height:1.9;color:var(--ink-muted)}.invite-slot{display:grid;gap:12px;margin:20px 0;padding:18px;border:1px solid var(--card-border);border-radius:16px}.invite-slot input{width:100%;box-sizing:border-box;background:var(--bg);border:1px solid var(--card-border);padding:10px;color:var(--ink);border-radius:10px}
.admin-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:30px 0}.admin-stats article{padding:22px;background:var(--card-bg,var(--surface));border:1px solid var(--card-border);border-radius:20px;display:flex;flex-direction:column;gap:6px}.admin-stats strong{font-size:2rem}.admin-stats span{font-size:.8rem;color:var(--ink-muted)}
.admin-search{display:flex;gap:12px;margin:24px 0}.admin-search input{flex:1;min-width:0}.admin-search input,.admin-user input{padding:12px 14px;background:var(--bg);color:var(--ink);border:1px solid var(--card-border);border-radius:12px;font:inherit;font-size:.8rem}.admin-user{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:26px;margin:16px 0;border:1px solid var(--card-border);border-radius:22px;background:var(--card-bg,var(--surface));overflow-wrap:anywhere}.admin-user h2{font-size:1.1rem;margin:0}.admin-user p{font-size:.8rem;line-height:1.8;color:var(--ink-muted)}.admin-user small{font-size:.7rem;color:var(--ink-muted)}.admin-user form{display:flex;flex-direction:column;gap:12px}.admin-user label{display:grid;gap:6px;font-size:.75rem}.admin-user form>div{display:flex;gap:10px;flex-wrap:wrap}.admin-user button{font-size:.75rem}.admin-pagination{display:flex;gap:16px;align-items:center;justify-content:center;margin:24px}.admin-audit{font-size:.75rem;color:var(--ink-muted);line-height:1.8;margin:30px 0;overflow-wrap:anywhere}
@media(max-width:1000px){.billing-layout{gap:18px}.billing-plan,.billing-state{padding:26px}.dashboard-side{gap:20px}}
@media(max-width:680px){.access-banner{flex-wrap:wrap;padding:18px;gap:12px}.access-banner>div{min-width:200px}.access-banner button{width:100%}.billing-layout{grid-template-columns:1fr}.billing-plan,.billing-state{padding:24px;border-radius:22px}.plan-price{font-size:2.5rem}.billing-plan h2{font-size:1.9rem}.admin-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-user{grid-template-columns:1fr;padding:20px;gap:20px}.dashboard-side .widget-card{padding:24px}}
@media print{html:not([data-pdf-allowed="true"]) body>*{display:none!important}html:not([data-pdf-allowed="true"]) body:after{content:'PDF výpisky jsou dostupné až po zaplacení předplatného.';display:block;color:#111;padding:30px}}
.admin-search>.btn-purple{width:auto;flex:0 0 auto;min-width:110px}.admin-search>input{width:0}.countdown-edit{font-family:inherit;font-size:.74rem;font-weight:600}

/* An existing subscriber only needs the account summary and management actions. */
.billing-layout.billing-layout--current{grid-template-columns:minmax(0,760px);justify-content:center}.billing-layout--current .billing-state{width:100%;box-sizing:border-box}.confirmation-mark{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 20px;border-radius:50%;background:rgba(141,218,172,.16);color:#9ce6b8;font-size:32px}.checkout-confirmation{width:min(520px,calc(100vw - 40px));box-sizing:border-box}.checkout-confirmation p{line-height:1.7;color:var(--ink-muted)}.checkout-confirmation .btn-purple{width:100%;margin-top:20px}

.forgot-password-link{display:block;margin:16px 0;text-align:center;color:#c9a5f2;font-size:.85rem}.admissions-soon{position:relative;max-width:900px;margin:24px auto;padding:clamp(28px,6vw,64px) 24px;text-align:center;border:1px solid var(--card-border);border-radius:32px;background:radial-gradient(ellipse at 50% 0,rgba(142,88,210,.13),transparent 65%)}.admissions-soon>img{display:block;width:160px;height:160px;object-fit:contain;margin:0 auto 28px}.admissions-soon h1{font-size:clamp(30px,4vw,48px);line-height:1.25;letter-spacing:-.035em;margin:22px 0}.admissions-soon>p{max-width:610px;margin:0 auto 26px;color:var(--ink-muted);line-height:1.8}.admissions-preview{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:28px 0}.admissions-preview>span{padding:12px 18px;background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px}.admissions-preview small{display:block;font-size:11px;color:var(--ink-muted);margin-top:4px}.admissions-soon>.btn-purple{min-height:48px}.mail-admin-settings{padding:24px;border:1px solid var(--card-border);border-radius:20px;margin:24px 0}.mail-admin-settings button{margin:10px 10px 0 0}

/* Membership: the active access is the focus, with relevant details only. */
.billing-layout.billing-layout--current{grid-template-columns:minmax(0,1fr);max-width:1100px;justify-content:stretch}.membership-card{min-width:0;box-sizing:border-box;border:1px solid var(--card-border);border-radius:28px;background:radial-gradient(ellipse at 95% 0,#9e6cd91c,transparent 55%),var(--card-bg,var(--surface));overflow:hidden;padding:30px}.membership-hero{display:flex;justify-content:space-between;align-items:center;gap:26px}.membership-hero>div{max-width:620px;min-width:0}.membership-status{font-size:9px;font-weight:650;letter-spacing:.13em;color:#cbb1e7;display:flex;align-items:center;gap:8px}.membership-status i{width:6px;height:6px;border-radius:50%;background:#a7d9ba;box-shadow:0 0 0 4px #a7d9ba10}.membership-hero h2{font-size:clamp(24px,2.4vw,34px);letter-spacing:-.045em;line-height:1.3;margin:14px 0 10px}.membership-hero p{font-size:12px;color:var(--ink-muted);line-height:1.9;margin:0}.membership-hero>img{width:125px;height:125px;object-fit:contain;flex:none}.membership-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:27px 0 20px}.membership-features article{display:flex;align-items:center;gap:12px;padding:16px 13px;border:1px solid var(--line);border-radius:15px;background:#ffffff02;min-width:0}.membership-features article>span{color:#c5a1e7;font-size:23px;flex:none}.membership-features article>div{flex:1;min-width:0}.membership-features strong{display:block;font-size:11px;line-height:1.6;font-weight:600}.membership-features small{display:block;font-size:9px;line-height:1.8;color:var(--ink-muted);margin-top:3px}.membership-features b{font-size:14px;color:#a5d6b9;font-weight:500}.membership-features a{font-size:22px;color:#d9bbf5;text-decoration:none;padding:3px}.membership-feature-ai{background:linear-gradient(135deg,#7a4eab18,transparent)!important}.membership-details{display:flex;flex-wrap:wrap;gap:18px 35px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:20px 0}.membership-details>div{display:flex;flex-direction:column;gap:7px}.membership-details span{font-size:10px;color:var(--ink-muted)}.membership-details strong{font-size:12px;font-weight:550}.membership-note{color:var(--ink-muted);font-size:10px;line-height:1.9;margin:16px 0 0}.membership-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:22px}.membership-actions .btn-purple,.membership-actions .back-pill-btn{width:auto;min-height:42px;text-decoration:none;font-size:11px;padding:11px 18px;text-align:center}.membership-actions .membership-refresh{margin-left:auto}.membership-card #billing-return:empty{display:none}.membership-upgrades{max-width:1100px;margin:38px 0 0}.membership-section-heading h2{font-size:24px;letter-spacing:-.04em;margin:10px 0}.membership-section-heading p{font-size:12px;line-height:1.8;color:var(--ink-muted);margin:0}.membership-section-heading .eyebrow{font-size:9px}.membership-offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:22px}.membership-offer{border:1px solid var(--card-border);border-radius:22px;background:var(--card-bg,var(--surface));padding:25px;min-width:0}.membership-offer--plus{background:radial-gradient(ellipse at 100% 0,#a777d922,transparent 70%),var(--card-bg,var(--surface));border-color:#9a70c166}.membership-offer-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.membership-icon{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;background:#a570cd16;border:1px solid #b181d72b;color:#d0acf1;font-size:20px}.membership-offer .plan-badge{font-size:8px;padding:6px 9px;letter-spacing:.05em}.membership-offer h3{font-size:20px;font-weight:650;margin:20px 0 14px;letter-spacing:-.03em}.membership-offer-price{font-size:34px;font-weight:700;letter-spacing:-.05em;line-height:1.4}.membership-offer-price small{font-size:11px;font-weight:400;letter-spacing:0;color:var(--ink-muted)}.membership-offer ul{padding:18px 0 0;list-style:none;border-top:1px solid var(--line);margin:20px 0;font-size:11px;line-height:1.8;color:var(--ink-muted)}.membership-offer li{margin:8px 0;display:block}.membership-offer li:before{content:'✓';color:#a7d9ba;margin-right:10px}.membership-offer li strong{color:var(--ink);font-weight:550}.membership-offer>button{width:100%;font-size:11px;padding:12px 18px;min-height:44px}.membership-offer>button:disabled{opacity:.55;cursor:default}.profile-membership{display:flex;align-items:center;gap:15px;padding-top:12px}.profile-membership .membership-icon{width:48px;height:48px;font-size:25px}.profile-membership .eyebrow{font-size:9px}.profile-membership h3{font-size:19px;letter-spacing:-.03em;margin:8px 0 5px}.profile-membership p{font-size:11px;color:var(--ink-muted);line-height:1.8;margin:0}.membership-pills{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}.membership-pills>span{font-size:10px;color:#c9b5dd;background:#8f5bb615;border:1px solid #9c73bd26;padding:8px 11px;border-radius:10px}.membership-card :focus-visible,.membership-upgrades :focus-visible{outline:2px solid #d1a5f0;outline-offset:3px}
@media(max-width:1050px){.membership-features{grid-template-columns:1fr}.membership-features article{padding:13px 16px}.membership-features strong{font-size:12px}.membership-features small{font-size:10px}.membership-features article>div{display:flex;justify-content:space-between;gap:14px;align-items:center}.membership-features small{margin:0;text-align:right}}
@media(max-width:680px){.membership-card{padding:22px 18px;border-radius:22px}.membership-hero{align-items:flex-start;gap:10px}.membership-hero>img{height:75px;width:75px}.membership-status{font-size:8px;line-height:1.8;letter-spacing:.08em}.membership-hero h2{font-size:23px}.membership-hero p{font-size:11px}.membership-features{margin-top:22px}.membership-features article>div{display:block}.membership-features small{text-align:left;margin-top:3px;font-size:10px}.membership-actions{gap:9px}.membership-actions .btn-purple,.membership-actions .back-pill-btn{width:100%;box-sizing:border-box;margin:0}.membership-details{gap:16px 24px}.membership-offers{grid-template-columns:1fr}.membership-offer{padding:22px}.membership-section-heading h2{font-size:23px}.profile-membership h3{font-size:17px}.membership-pills>span{font-size:9px}.membership-hero h2{overflow-wrap:anywhere}}

.admin-gift-panel{margin:28px 0;padding:28px;border:1px solid var(--card-border);border-radius:24px;background:radial-gradient(ellipse at 100% 0,#9f75d31a,transparent 55%),var(--card-bg,var(--surface))}.admin-gift-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.admin-gift-heading .eyebrow{font-size:9px}.admin-gift-heading h2{font-size:24px;letter-spacing:-.04em;margin:10px 0}.admin-gift-heading p{font-size:12px;line-height:1.8;color:var(--ink-muted);margin:0}.admin-gift-heading>span{font-size:42px;color:#cfa6f0;padding:15px;background:#a276c815;border:1px solid #a276c833;border-radius:20px}#admin-gift-form{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 14px;margin-top:27px}#admin-gift-form>label{display:grid;gap:9px;font-size:11px;color:var(--ink-muted);grid-column:span 2}#admin-gift-form .admin-gift-label,#admin-gift-form .admin-gift-plan{grid-column:span 3}#admin-gift-form input,#admin-gift-form select{width:100%;min-width:0;min-height:45px;box-sizing:border-box;padding:11px 13px;background:#17111f;border:1px solid #513b61;border-radius:11px;color:#f6efff;font:inherit;font-size:12px}#admin-gift-form input:focus,#admin-gift-form select:focus{outline:2px solid #b58bd8;outline-offset:2px}.admin-gift-submit{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:25px}.admin-gift-submit p{font-size:10px;color:var(--ink-muted);line-height:1.9;max-width:600px;margin:0}.admin-gift-submit .btn-purple{flex:none;width:auto;font-size:12px;padding:12px 20px}#admin-gift-error{grid-column:1/-1;font-size:12px;color:#f1aab5;margin:0}.admin-gift-list{display:grid;gap:14px;margin-top:25px}.admin-gift-item{border:1px solid var(--line);border-radius:16px;padding:20px;background:#15101d30}.admin-gift-item-title{display:flex;justify-content:space-between;align-items:center;gap:15px}.admin-gift-item-title>strong{font-size:14px;overflow-wrap:anywhere}.admin-gift-tag{font-size:9px;color:var(--ink-muted);border:1px solid var(--line);border-radius:20px;padding:5px 9px;white-space:nowrap}.admin-gift-tag.is-active{color:#b7e2c6;background:#79c39b13;border-color:#79c39b44}.admin-gift-meta{display:flex;gap:8px 18px;flex-wrap:wrap;font-size:10px;color:var(--ink-muted);margin:13px 0}.admin-gift-link{display:flex;gap:8px}.admin-gift-link>input{flex:1;min-width:0;background:#15101d;border:1px solid #45344e;border-radius:9px;padding:10px 12px;color:#c8b7db;font:inherit;font-size:10px}.admin-gift-link .back-pill-btn{flex:none;font-size:10px;padding:10px 14px}.admin-gift-item>small,.admin-gift-empty{display:block;font-size:10px;color:var(--ink-muted);line-height:1.8;margin:12px 0 0}.admin-gift-panel :focus-visible{outline:2px solid #c9a2e9;outline-offset:3px}@media(max-width:680px){.admin-gift-panel{padding:23px 18px}.admin-gift-heading h2{font-size:23px}.admin-gift-heading>span{display:none}#admin-gift-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}#admin-gift-form>label{grid-column:span 1}#admin-gift-form .admin-gift-label,#admin-gift-form .admin-gift-plan{grid-column:1/-1}.admin-gift-submit{display:block}.admin-gift-submit .btn-purple{width:100%;margin-top:17px}.admin-gift-item{padding:16px}.admin-gift-link{flex-wrap:wrap}.admin-gift-link>input{flex-basis:100%}.admin-gift-link .back-pill-btn{flex:1}.admin-gift-item-title>strong{font-size:13px}}

/* A compact account overview with clear dates and actions. */
.membership-route .page-title{font-size:clamp(26px,3vw,36px);margin-top:10px;margin-bottom:10px}
.membership-route .page-subtitle{font-size:13px;margin-bottom:24px}
.membership-route .billing-layout--current{max-width:980px}
.membership-route .membership-card{padding:24px;border-radius:22px}
.membership-route .membership-hero h2{font-size:clamp(23px,2.4vw,30px);margin:10px 0}
.membership-route .membership-hero>img{width:90px;height:90px}
.membership-route .membership-features{margin:22px 0 16px}
.membership-route .membership-features article{padding:14px 12px}
.membership-route .membership-details{border-bottom:0;padding:16px 0 0;margin:16px 0 0;gap:12px 28px}
.membership-route .membership-actions{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.membership-route .membership-note{margin-top:12px;font-size:10px;max-width:720px}
.membership-route .membership-card--admin .membership-features{grid-template-columns:1fr 1fr}
.membership-route .membership-card--admin .membership-feature-ai{grid-column:1/-1}
.membership-route .membership-card--admin .membership-feature-ai small{font-size:12px;color:var(--ink)}
.membership-route .membership-upgrades{max-width:980px}
.expired-home{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:clamp(25px,5vw,60px);border:1px solid var(--card-border);border-radius:28px;background:radial-gradient(ellipse at 90% 10%,#9d68ce20,transparent 70%),var(--card-bg);max-width:1100px;margin:30px auto 0;box-sizing:border-box}
.expired-home-copy{max-width:610px}.expired-home h1{font-size:clamp(28px,3.5vw,44px);line-height:1.25;letter-spacing:-.04em;margin:20px 0}.expired-home p{font-size:14px;line-height:1.9;color:var(--ink-muted);margin-bottom:25px}.expired-home .btn-purple{width:auto;padding:14px 23px}.expired-home small{display:block;font-size:10px;line-height:1.8;color:var(--ink-muted);margin-top:16px}.expired-home>img{width:clamp(140px,20vw,260px);height:auto;object-fit:contain}.expired-home-footer{max-width:1100px;margin:22px auto;display:flex;justify-content:space-between;gap:15px;color:var(--ink-muted);font-size:12px}.expired-home-footer a{color:var(--purple-light)}
.access-expired #sidebar .nav-item[data-route]:not([data-route='/dashboard']):not([data-route='/predplatne']):not([data-route='/nastaveni']):not([data-route='/profil']){opacity:.35;cursor:not-allowed}
@media(max-width:680px){.membership-route .membership-card{padding:20px 16px}.membership-route .membership-hero>img{width:65px;height:65px}.membership-route .membership-card--admin .membership-features{grid-template-columns:1fr}.membership-route .membership-card--admin .membership-feature-ai{grid-column:auto}.expired-home{flex-direction:column-reverse;align-items:flex-start;margin-top:12px;gap:10px}.expired-home>img{width:130px;align-self:center}.expired-home h1{font-size:29px}.expired-home .btn-purple{width:100%}.expired-home-footer{flex-direction:column;font-size:11px}}

/* Membership is a page, not a stack of framed windows. */
.membership-route .billing-layout--current{display:block;max-width:1100px}
.membership-route .membership-card{padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.membership-route .membership-hero{padding:12px 0 25px;border-bottom:1px solid var(--line)}
.membership-route .membership-hero>img{height:110px;width:110px}
.membership-route .membership-features,.membership-route .membership-card--admin .membership-features{grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;margin:0;padding:25px 0;border-bottom:1px solid var(--line)}
.membership-route .membership-features article{padding:0;border:0;border-radius:0;background:none!important;box-shadow:none;align-items:flex-start}
.membership-route .membership-card--admin .membership-feature-ai{grid-column:auto}
.membership-route .membership-features strong{font-size:13px}.membership-route .membership-features small{font-size:11px}
.membership-route .membership-details{padding:22px 0;margin:0;border:0;gap:20px 45px}
.membership-route .membership-details>div{min-width:160px}.membership-route .membership-details strong{font-size:15px}
.membership-route .membership-actions{border-top:0;margin:0;padding-top:18px}
.membership-route .membership-upgrades{max-width:1100px;padding-top:30px;border-top:1px solid var(--line);margin-top:35px}
.membership-route .membership-offers{gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.membership-route .membership-offer,.membership-route .membership-offer--plus{border:0;border-radius:0;background:none;padding:25px 30px 25px 0;box-shadow:none}
.membership-route .membership-offer+.membership-offer{border-left:1px solid var(--line);padding:25px 0 25px 30px}
.membership-route .membership-offer ul{border:0;padding-top:0;margin:15px 0 22px}
.membership-route .membership-offer-top .membership-icon{border:0;background:none;padding:0;width:auto}
@media(max-width:760px){.membership-route .membership-features,.membership-route .membership-card--admin .membership-features{grid-template-columns:1fr;gap:22px}.membership-route .membership-hero>img{width:75px;height:75px}.membership-route .membership-offer,.membership-route .membership-offer+.membership-offer{padding:24px 0;border-left:0}.membership-route .membership-offer+.membership-offer{border-top:1px solid var(--line)}.membership-route .membership-offers{grid-template-columns:1fr}}
.admin-cancel-dialog{max-height:85svh;overflow:auto;text-align:left;max-width:560px!important}.admin-cancel-dialog h2{font-size:25px}.admin-cancel-dialog>label{display:block;margin:16px 0;font-size:13px;line-height:1.7}.admin-cancel-dialog label small{display:block;color:var(--ink-muted);margin-left:25px;font-size:11px}.admin-cancel-dialog textarea{display:block;width:100%;box-sizing:border-box;min-height:85px;margin-top:8px;background:var(--bg);color:var(--ink);border:1px solid var(--line);padding:12px;border-radius:10px;font:inherit}.admin-cancel-dialog p{font-size:12px;line-height:1.8}.admin-cancel-dialog [role=alert]{color:#f2acb7}.admin-cancel-actions{display:flex;justify-content:space-between;gap:15px}.admin-cancel-actions button{width:auto!important}.admin-cancel-subscription{margin-top:12px;border-color:#b97b8277;color:#e6a6af}

/* The membership view keeps the plan, allowance and next step in one readable column. */
.membership-route .view-content{width:min(100%,1000px);margin-inline:auto}
.membership-route .page-title{font-size:clamp(30px,3vw,42px);line-height:1.15;margin:10px 0 8px}
.membership-route .page-subtitle{font-size:14px;line-height:1.6;margin:0}
.membership-route .billing-layout--current{max-width:none;margin-top:28px}
.membership-route .membership-card--v2{padding:0;border:1px solid var(--card-border);border-radius:24px;background:radial-gradient(ellipse at 100% 0,rgba(131,82,190,.18),transparent 52%),var(--surface);box-shadow:0 18px 50px rgba(0,0,0,.15);overflow:hidden}
.membership-route .membership-main{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:20px;align-items:center;padding:30px 34px 26px}
.membership-route .membership-main-copy{min-width:0}
.membership-route .membership-status{font-size:10px;letter-spacing:.14em}
.membership-route .membership-status--inactive i{background:var(--red);box-shadow:0 0 0 4px var(--red-bg)}
.membership-route .membership-main h2{font-size:clamp(27px,3vw,38px);line-height:1.17;letter-spacing:-.045em;margin:14px 0 10px}
.membership-route .membership-main p{max-width:580px;color:var(--ink-muted);font-size:14px;line-height:1.7}
.membership-route .membership-main-art img{display:block;width:100%;height:auto;object-fit:contain}
.membership-route .membership-quick-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.membership-route .membership-quick-actions a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;width:auto;padding:9px 16px;border-radius:11px;text-decoration:none;font-size:12px;font-weight:600}
.membership-route .membership-quick-actions .back-pill-btn{background:transparent;border:1px solid var(--card-border);color:var(--ink)}
.membership-route .membership-snapshot{display:grid;grid-template-columns:minmax(230px,.9fr) minmax(0,1.35fr);margin:0 34px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.membership-route .membership-ai-meter,.membership-route .membership-included{min-width:0;padding:20px 0}
.membership-route .membership-ai-meter{padding-right:28px;border-right:1px solid var(--line)}
.membership-route .membership-ai-meter>span,.membership-route .membership-included>span,.membership-route .membership-term>span{display:block;color:#cbb1e7;font-size:10px;font-weight:650;letter-spacing:.13em}
.membership-route .membership-ai-meter strong{display:block;margin:7px 0 9px;font-size:36px;font-weight:700;line-height:1.15;letter-spacing:-.04em}
.membership-route .membership-ai-meter strong small{font-size:13px;font-weight:500;letter-spacing:0;color:var(--ink-muted)}
.membership-route .membership-ai-meter>small{display:block;margin-top:8px;color:var(--ink-muted);font-size:10px}
.membership-route .membership-meter-track{height:6px;border-radius:99px;overflow:hidden;background:var(--surface-sunken)}
.membership-route .membership-meter-track>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#9b68ea,#c598f3)}
.membership-route .membership-included{padding-left:28px}
.membership-route .membership-included>div{display:grid;grid-template-columns:1fr 1fr;gap:9px 22px;margin-top:13px}
.membership-route .membership-included>div>span{font-size:11px;line-height:1.5;color:var(--ink-muted)}
.membership-route .membership-included .is-included{color:var(--ink)}
.membership-route .membership-included .is-included::first-letter{color:#a7d9ba}
.membership-route .membership-term{display:flex;align-items:center;gap:28px;padding:17px 34px;border-bottom:1px solid var(--line)}
.membership-route .membership-term>span{flex:0 0 175px}
.membership-route .membership-term>div{display:flex;flex-wrap:wrap;gap:10px 35px}
.membership-route .membership-term p{display:flex;align-items:baseline;gap:9px;margin:0;font-size:11px;color:var(--ink-muted)}
.membership-route .membership-term strong{font-size:12px;font-weight:650;color:var(--ink)}
.membership-route .membership-alert{margin:0;padding:13px 34px;border-bottom:1px solid var(--line);font-size:11px;color:var(--ink-muted)}
.membership-route .membership-actions{display:flex;align-items:center;gap:10px;margin:0;padding:14px 34px;border:0}
.membership-route .membership-actions .back-pill-btn{display:inline-flex;align-items:center;width:auto;min-height:36px;padding:8px 12px;border-radius:9px;font-size:10px;text-decoration:none}
.membership-route .membership-refresh{margin-left:auto;padding:8px 0;border:0;background:none;color:var(--ink-muted);font:inherit;font-size:10px;cursor:pointer}
.membership-route .membership-refresh:hover{color:var(--ink)}
.membership-route .membership-card--v2 #billing-return{margin:0 34px 16px;font-size:11px}
.membership-route .membership-upgrades{max-width:none;margin:31px 0 0;padding:0;border:0}
.membership-route .membership-section-heading h2{font-size:23px;line-height:1.25;margin:7px 0}
.membership-route .membership-section-heading p{font-size:12px;line-height:1.6}
.membership-route .membership-offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px;border:0}
.membership-route .membership-offer,.membership-route .membership-offer--plus,.membership-route .membership-offer+.membership-offer{display:flex;flex-direction:column;min-width:0;padding:20px 22px;border:1px solid var(--card-border);border-radius:18px;background:var(--surface);box-shadow:none}
.membership-route .membership-offer--plus{background:radial-gradient(ellipse at 100% 0,rgba(151,101,216,.17),transparent 68%),var(--surface);border-color:#8055aa}
.membership-route .membership-offer-top .membership-icon{width:30px;height:30px;font-size:19px}
.membership-route .membership-offer .plan-badge{font-size:9px;letter-spacing:.04em}
.membership-route .membership-offer h3{font-size:17px;line-height:1.25;margin:12px 0 5px}
.membership-route .membership-offer-price{font-size:28px;line-height:1.2}
.membership-route .membership-offer-price small{font-size:10px}
.membership-route .membership-offer-summary{font-size:11px;color:var(--ink-muted);line-height:1.6;margin:10px 0 15px}
.membership-route .membership-offer-details{display:flex;flex-wrap:wrap;gap:6px 12px;margin:0 0 18px}
.membership-route .membership-offer-details span{font-size:10px;color:var(--ink-muted)}
.membership-route .membership-offer-details span::before{content:'✓';margin-right:6px;color:#a7d9ba}
.membership-route .membership-offer>button{margin-top:auto;min-height:39px;padding:9px 13px;border-radius:10px;font-size:11px}
.membership-route .membership-note{margin:12px 0 0;font-size:10px;line-height:1.6}
@media(max-width:760px){
  .membership-route .view-content{width:100%}
  .membership-route .billing-layout--current{margin-top:20px}
  .membership-route .membership-card--v2{border-radius:18px}
  .membership-route .membership-main{grid-template-columns:minmax(0,1fr) 78px;gap:5px;padding:22px 18px 20px}
  .membership-route .membership-main h2{font-size:25px}
  .membership-route .membership-main p{font-size:12px}
  .membership-route .membership-quick-actions a{font-size:11px;min-height:36px}
  .membership-route .membership-snapshot{grid-template-columns:1fr;margin:0 18px}
  .membership-route .membership-ai-meter{padding:18px 0;border-right:0;border-bottom:1px solid var(--line)}
  .membership-route .membership-included{padding:17px 0}
  .membership-route .membership-term{display:block;padding:17px 18px}
  .membership-route .membership-term>div{margin-top:10px}
  .membership-route .membership-actions{padding:12px 18px;flex-wrap:wrap}
  .membership-route .membership-refresh{margin-left:0}
  .membership-route .membership-offers{grid-template-columns:1fr}
  .membership-route .membership-offer,.membership-route .membership-offer--plus,.membership-route .membership-offer+.membership-offer{padding:18px}
}