@import url('tokens.css');

/* ===========================================================
   App-wide app shell — Online Kurs Plattform
   =========================================================== */

html, body, #root {
  height: 100%;
  margin: 0;
}
body {
  background: var(--bg);
  color: var(--fg-2);
  font-family: var(--font-serif);
  overflow-x: hidden;
}

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
a { color: inherit; text-decoration: none; }

/* ----------- THEME: sand (default) vs ink (dark) ----------- */
body.theme-ink {
  --bg:           #14100e;
  --bg-elevated:  #1c1714;
  --bg-card:      #22191488;
  --fg-1:         var(--sand-50);
  --fg-2:         var(--sand-100);
  --fg-3:         var(--sand-300);
  --fg-4:         var(--ink-300);
  --border:       #3a302b;
  --border-soft:  #2a2421;
  --border-strong:var(--sand-300);
}

/* ============= LOGIN / AUTH ============================ */
.auth-shell {
  position: fixed; inset: 0;
  display: grid; grid-template-columns: 1.05fr 1fr;
  background: var(--bg);
}
.auth-art {
  position: relative; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(24,19,17,0.45) 0%, rgba(24,19,17,0.78) 100%),
    url('https://images.unsplash.com/photo-1499209974431-9dddcece7f88?w=1800&q=80&auto=format') center/cover no-repeat;
  color: var(--sand-50);
  padding: 72px 80px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.auth-brand { display: flex; align-items: center; gap: 14px; }
.auth-brand .name { font-family: var(--font-serif); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: var(--sand-50); }
.auth-brand .sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sand-300); margin-top: 4px; }
.auth-quote { max-width: 460px; }
.auth-quote .eb { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-300); margin-bottom: 22px; }
.auth-quote h1 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 56px; line-height: 1.05; letter-spacing: -0.022em;
  color: var(--sand-50); margin: 0; text-wrap: balance;
}
.auth-quote h1 em { font-style: italic; color: var(--gold-300); }
.auth-quote p { font-family: var(--font-serif); font-size: 17px; line-height: 1.6; color: var(--sand-100); margin-top: 22px; max-width: 420px; }
.auth-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sand-300); display: flex; gap: 24px; }

.auth-form-wrap {
  display: flex; align-items: center; justify-content: center;
  padding: 64px;
  background: var(--bg);
}
.auth-form { width: 100%; max-width: 420px; }
.auth-form .eb { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 16px; }
.auth-form h2 { font-family: var(--font-serif); font-weight: 400; font-size: 38px; line-height: 1.1; letter-spacing: -0.022em; color: var(--fg-1); margin: 0 0 12px; }
.auth-form .lead { font-family: var(--font-serif); font-size: 17px; line-height: 1.55; color: var(--fg-2); margin: 0 0 36px; }

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); }
.field input {
  font-family: var(--font-serif); font-size: 16px;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg-1);
  outline: none;
  transition: border-color 140ms;
  box-shadow: var(--shadow-inset);
}
.field input:focus { border-color: var(--burgundy-500); }
.field-row { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-serif); font-size: 14px; color: var(--fg-3); margin-top: -6px; margin-bottom: 22px; }
.field-row a { color: var(--burgundy-500); border-bottom: 1px solid var(--border); padding-bottom: 2px; }
.field-row label { display: flex; align-items: center; gap: 8px; cursor: pointer; }

.checkbox {
  width: 18px; height: 18px; border: 1px solid var(--border-strong);
  border-radius: 4px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-elevated);
}
.checkbox.on { background: var(--burgundy-500); border-color: var(--burgundy-500); color: var(--sand-50); }

.btn {
  font-family: var(--font-serif); font-weight: 500; font-size: 15px;
  padding: 14px 22px; border-radius: 10px; border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: all 220ms var(--ease-out);
  background: transparent; color: var(--fg-1);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--burgundy-500); color: var(--sand-50); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--burgundy-600); }
.btn-ghost { border-color: var(--border); }
.btn-ghost:hover { background: var(--sand-100); }
body.theme-ink .btn-ghost:hover { background: var(--bg-elevated); }
.btn-link { background: transparent; padding: 6px 0; color: var(--burgundy-500); border-bottom: 1px solid var(--border); border-radius: 0; }
.btn-block { width: 100%; }
.btn-icon { padding: 10px; border-radius: 8px; }
.btn-danger { background: var(--burgundy-500); color: var(--sand-50); }
.btn-gold { background: var(--gold-500); color: var(--ink-900); }
.btn-sm { padding: 8px 14px; font-size: 13px; }

.divider {
  display: flex; align-items: center; gap: 16px; margin: 28px 0;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3);
}
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.auth-footer { font-family: var(--font-serif); font-size: 14px; color: var(--fg-3); margin-top: 28px; text-align: center; }
.auth-footer a { color: var(--burgundy-500); border-bottom: 1px solid var(--border); padding-bottom: 2px; }

/* 2FA code grid */
.code-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 20px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.code-grid input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 20px;
  padding: 12px 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg-1);
  outline: none;
  appearance: textfield;
  -moz-appearance: textfield;
}
.code-grid input:focus { border-color: var(--burgundy-500); box-shadow: 0 0 0 3px rgba(122,42,29,0.08); }

/* Kompaktere Darstellung in der Auth-Form (Login) */
.auth-form .code-grid { gap: 6px; margin-bottom: 24px; }
.auth-form .code-grid input { font-size: 18px; padding: 10px 0; border-radius: 6px; }

/* ============= APP SHELL ============================ */
.app-shell {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
  background: var(--bg);
}
.app-sidebar {
  background: var(--bg);
  border-right: 1px solid var(--border-soft);
  padding: 28px 20px 28px 24px;
  display: flex; flex-direction: column;
  position: sticky; top: 0;
  height: 100vh;
  overflow-y: auto;
}
.app-sidebar.dark {
  background: var(--ink-900);
  color: var(--sand-50);
  border-right-color: #2a2018;
}
.app-sidebar.dark .nav-item { color: var(--sand-200); }
.app-sidebar.dark .nav-item:hover { background: rgba(251,247,241,0.06); color: var(--sand-50); }
.app-sidebar.dark .nav-item.active { background: var(--burgundy-500); color: var(--sand-50); }
.app-sidebar.dark .nav-section-label { color: var(--sand-300); }
.app-sidebar.dark .sb-brand .name { color: var(--sand-50); }
.app-sidebar.dark .sb-brand .sub { color: var(--sand-300); }
.app-sidebar.dark .sb-user { background: rgba(251,247,241,0.05); border-color: rgba(251,247,241,0.1); }
.app-sidebar.dark .sb-user .name { color: var(--sand-50); }

.sb-brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 24px; }
.sb-brand .mark { width: 32px; height: 32px; }
.sb-brand .name { font-family: var(--font-serif); font-size: 18px; font-weight: 500; color: var(--ink-900); letter-spacing: -0.01em; }
.sb-brand .sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); margin-top: 2px; }

.nav-section { margin-bottom: 22px; }
.nav-section-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-3); padding: 0 8px 10px;
}
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 8px;
  font-family: var(--font-serif); font-size: 15px;
  color: var(--fg-2); cursor: pointer;
  transition: background 140ms, color 140ms;
  margin-bottom: 2px;
}
.nav-item:hover { background: var(--sand-100); color: var(--ink-900); }
.nav-item.active {
  background: var(--burgundy-500); color: var(--sand-50);
}
.nav-item.active .nav-icon { color: var(--sand-50); }
.nav-icon { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; }
.nav-badge {
  margin-left: auto; font-family: var(--font-mono); font-size: 10px;
  background: var(--burgundy-100); color: var(--burgundy-500);
  padding: 2px 8px; border-radius: 999px; letter-spacing: 0.06em;
}
.nav-item.active .nav-badge { background: rgba(251,247,241,0.18); color: var(--sand-50); }

.sb-user {
  margin-top: auto;
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--sand-100);
  border: 1px solid var(--border-soft);
}
.sb-user .avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: url('https://images.unsplash.com/photo-1521252659862-eec69941b071?w=200&q=80&auto=format') center/cover;
  filter: saturate(0.85) sepia(0.08);
  flex-shrink: 0;
}
.sb-user .name { font-family: var(--font-serif); font-weight: 500; font-size: 14px; color: var(--ink-900); }
.sb-user .email { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--fg-3); margin-top: 2px; }
.sb-user .meta { flex: 1; min-width: 0; overflow: hidden; }
.sb-user .meta .name, .sb-user .meta .email { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============= MAIN CONTENT ============================ */
.app-main {
  min-height: 100vh;
  background: var(--bg);
  position: relative;
}
.app-topbar {
  display: flex; align-items: center; gap: 24px;
  padding: 22px 48px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg);
  position: sticky; top: 0; z-index: 5;
}
.crumbs { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); display: flex; gap: 10px; align-items: center; }
.crumbs .sep { opacity: 0.5; }
.crumbs .now { color: var(--fg-1); }
.topbar-search {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; min-width: 280px;
  background: var(--sand-100); border: 1px solid transparent; border-radius: 8px;
  color: var(--fg-3);
}
body.theme-ink .topbar-search { background: var(--bg-elevated); border-color: var(--border-soft); }
.topbar-search input { background: transparent; border: none; outline: none; font-family: var(--font-serif); font-size: 14px; color: var(--fg-1); flex: 1; }
.topbar-search .kbd { font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--fg-3); }
.topbar-actions { display: flex; gap: 6px; align-items: center; }
.icon-btn {
  width: 36px; height: 36px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  color: var(--fg-2); cursor: pointer;
  transition: 140ms;
}
.icon-btn:hover { background: var(--sand-100); color: var(--ink-900); }
body.theme-ink .icon-btn:hover { background: var(--bg-elevated); color: var(--fg-1); }
.icon-btn.has-badge { position: relative; }
.icon-btn.has-badge::after {
  content: ''; position: absolute; top: 8px; right: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--burgundy-500);
  border: 2px solid var(--bg);
}

.role-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--sage-100); color: var(--sage-700);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
}
.role-pill.admin { background: rgba(122,42,29,0.12); color: var(--burgundy-500); }

.app-page { padding: 40px 48px 80px; }
.app-page.tight { padding: 28px 48px 48px; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.page-head .eb { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 12px; }
.page-head h1 { font-family: var(--font-serif); font-weight: 400; font-size: 44px; line-height: 1.08; letter-spacing: -0.022em; color: var(--fg-1); margin: 0; text-wrap: balance; }
.page-head h1 em { font-style: italic; color: var(--burgundy-500); }
.page-head .sub { font-family: var(--font-serif); font-size: 17px; line-height: 1.55; color: var(--fg-2); margin-top: 12px; max-width: 640px; text-wrap: pretty; }
.page-head .actions { display: flex; gap: 10px; }

/* ============= CARDS / SURFACES ============================ */
.card {
  background: var(--bg-elevated);
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
body.theme-ink .card { background: var(--bg-elevated); border-color: var(--border-soft); box-shadow: none; }
.card.padded { padding: 28px 28px 24px; }

/* ============= COURSE CARDS (CUSTOMER) ============================ */
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}
.course-card {
  background: var(--bg-elevated);
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border-soft);
  cursor: pointer;
  transition: 220ms var(--ease-out);
  display: flex; flex-direction: column;
}
.course-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.course-card .cover {
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
}
.course-card .cover img { width: 100%; height: 100%; object-fit: cover; transition: 420ms; filter: saturate(0.92); }
.course-card:hover .cover img { transform: scale(1.02); }
.course-card .cover-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(24,19,17,0) 40%, rgba(24,19,17,0.6) 100%);
}
.course-card .cover-tag {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  background: rgba(251,247,241,0.92); color: var(--ink-900);
  padding: 5px 10px; border-radius: 4px;
}
.course-card .cover-tag.brand { background: var(--burgundy-500); color: var(--sand-50); }
.course-card .cover-tag.gold { background: var(--gold-500); color: var(--ink-900); }
.course-card .cc-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.course-card .cc-eb { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; }
.course-card h3 { font-family: var(--font-serif); font-weight: 500; font-size: 22px; line-height: 1.18; color: var(--fg-1); margin: 0 0 8px; letter-spacing: -0.01em; }
.course-card .desc { font-family: var(--font-serif); font-size: 14px; line-height: 1.55; color: var(--fg-3); margin: 0 0 18px; flex: 1; text-wrap: pretty; }
.course-card .cc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.course-card .cc-foot .meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); }

/* progress visualizations */
.pv-bar { display: flex; flex-direction: column; gap: 6px; flex: 1; max-width: 180px; }
.pv-bar .track { height: 4px; background: var(--ink-100); border-radius: 2px; overflow: hidden; }
body.theme-ink .pv-bar .track { background: var(--ink-700); }
.pv-bar .fill { height: 100%; background: var(--burgundy-500); border-radius: 2px; transition: width 420ms var(--ease-out); }
.pv-bar .pct { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--fg-3); }

.pv-checks { display: flex; align-items: center; gap: 6px; }
.pv-checks .dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--ink-200); background: transparent; }
body.theme-ink .pv-checks .dot { border-color: var(--ink-700); }
.pv-checks .dot.done { background: var(--burgundy-500); border-color: var(--burgundy-500); }
.pv-checks .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--fg-3); margin-left: 8px; }

.pv-path { display: flex; align-items: center; gap: 4px; flex: 1; }
.pv-path .seg { height: 2px; flex: 1; background: var(--ink-100); border-radius: 2px; }
body.theme-ink .pv-path .seg { background: var(--ink-700); }
.pv-path .seg.done { background: var(--burgundy-500); }
.pv-path .node {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid var(--ink-200); background: var(--bg-elevated);
  display: inline-flex; align-items: center; justify-content: center; font-size: 8px;
  flex-shrink: 0;
}
body.theme-ink .pv-path .node { border-color: var(--ink-700); }
.pv-path .node.done { background: var(--burgundy-500); border-color: var(--burgundy-500); color: var(--sand-50); }
.pv-path .node.now { border-color: var(--burgundy-500); border-width: 2px; box-shadow: 0 0 0 3px rgba(122,42,29,0.16); }

.pv-streak { display: flex; align-items: center; gap: 8px; }
.pv-streak .flame { font-family: var(--font-serif); font-size: 18px; color: var(--gold-500); }
.pv-streak .num { font-family: var(--font-serif); font-size: 22px; font-weight: 500; color: var(--fg-1); letter-spacing: -0.02em; }
.pv-streak .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }

/* mixed = small bar + checkmark count + streak chip */
.pv-mixed { display: flex; align-items: center; gap: 14px; flex: 1; }
.pv-mixed .mini-bar { flex: 1; height: 3px; background: var(--ink-100); border-radius: 2px; min-width: 80px; max-width: 140px; }
body.theme-ink .pv-mixed .mini-bar { background: var(--ink-700); }
.pv-mixed .mini-bar > div { height: 100%; background: var(--burgundy-500); border-radius: 2px; }
.pv-mixed .check-count { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--fg-3); }

/* HERO continue card on dashboard */
.hero-continue {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 0;
  background: var(--ink-900); color: var(--sand-50);
  border-radius: 16px; overflow: hidden;
  margin-bottom: 36px;
}
.hero-continue .hc-body { padding: 40px 44px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.hero-continue .hc-eb { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-300); }
.hero-continue h2 { font-family: var(--font-serif); font-weight: 400; font-size: 36px; line-height: 1.1; letter-spacing: -0.022em; color: var(--sand-50); margin: 12px 0 14px; text-wrap: balance; }
.hero-continue h2 em { font-style: italic; color: var(--gold-300); }
.hero-continue .hc-meta { font-family: var(--font-serif); font-size: 14px; color: var(--sand-200); margin: 0; }
.hero-continue .hc-meta em { font-style: italic; color: var(--sand-100); }
.hero-continue .hc-cta { display: flex; gap: 12px; align-items: center; margin-top: 20px; }
.hero-continue .hc-art {
  background: linear-gradient(180deg, rgba(24,19,17,0) 0%, rgba(24,19,17,0.4) 100%),
              url('https://images.unsplash.com/photo-1518622358385-8ea7d0794bf6?w=900&q=80&auto=format') center/cover;
  position: relative; min-height: 280px;
}
.hero-continue .hc-art .play {
  position: absolute; bottom: 32px; right: 32px;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--gold-500); color: var(--ink-900);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; border: none; cursor: pointer;
  box-shadow: var(--shadow-md);
}

/* small progress section on hero */
.hero-continue .hc-progress { display: flex; align-items: center; gap: 16px; }
.hero-continue .hc-progress .track { flex: 1; height: 3px; background: rgba(251,247,241,0.15); border-radius: 2px; overflow: hidden; max-width: 320px; }
.hero-continue .hc-progress .fill { height: 100%; background: var(--gold-500); }
.hero-continue .hc-progress .pct { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--gold-300); }

/* ============= DASHBOARD STATS ============================ */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 36px; }
.stat {
  background: var(--bg-elevated);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid var(--border-soft);
}
.stat .eb { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; }
.stat .num { font-family: var(--font-serif); font-weight: 400; font-size: 38px; line-height: 1; letter-spacing: -0.022em; color: var(--fg-1); }
.stat .num em { font-style: normal; color: var(--burgundy-500); }
.stat .delta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--sage-500); margin-top: 8px; }
.stat .delta.down { color: var(--burgundy-500); }

/* ============= COURSE DETAIL ============================ */
.course-hero {
  background: var(--ink-900); color: var(--sand-50);
  border-radius: 16px; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1.1fr;
  margin-bottom: 32px;
}
.course-hero .ch-body { padding: 48px; display: flex; flex-direction: column; gap: 20px; justify-content: center; }
.course-hero .ch-eb { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-300); }
.course-hero h1 { font-family: var(--font-serif); font-weight: 400; font-size: 46px; line-height: 1.06; letter-spacing: -0.022em; color: var(--sand-50); margin: 0; text-wrap: balance; }
.course-hero h1 em { font-style: italic; color: var(--gold-300); }
.course-hero p { font-family: var(--font-serif); font-size: 17px; line-height: 1.55; color: var(--sand-200); margin: 0; max-width: 480px; text-wrap: pretty; }
.course-hero .ch-meta { display: flex; gap: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand-300); }
.course-hero .ch-cta { display: flex; gap: 12px; }
.course-hero .ch-art {
  background-size: cover; background-position: center;
  position: relative; min-height: 380px;
}
.course-hero .ch-art::after { content:''; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(24,19,17,0) 0%, rgba(24,19,17,0.4) 100%); }

.module-list { list-style: none; padding: 0; margin: 0; }
.module-row {
  display: grid; grid-template-columns: 60px 1fr 220px 110px;
  gap: 28px; align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: 220ms var(--ease-out);
}
.module-row:first-child { border-top: 1px solid var(--border); }
.module-row:hover { padding-left: 8px; }
.module-row .mn { font-family: var(--font-serif); font-size: 32px; color: var(--burgundy-500); letter-spacing: -0.02em; }
.module-row .mt { font-family: var(--font-serif); font-weight: 500; font-size: 19px; color: var(--fg-1); margin: 0 0 4px; }
.module-row .md { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); }
.module-row .arrow { font-family: var(--font-mono); font-size: 22px; color: var(--ink-300); text-align: right; transition: 220ms; }
.module-row:hover .arrow { color: var(--burgundy-500); transform: translateX(6px); }

.lesson-list { list-style: none; padding: 0; margin: 0; }
.lesson-row {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  transition: 140ms;
}
.lesson-row:hover { padding-left: 10px; }
.lesson-row .lstate {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-elevated);
  flex-shrink: 0;
}
.lesson-row .lstate.done { background: var(--burgundy-500); border-color: var(--burgundy-500); color: var(--sand-50); }
.lesson-row .lstate.current { border-color: var(--burgundy-500); border-width: 2px; }
.lesson-row .ltype {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-3); width: 64px; flex-shrink: 0;
}
.lesson-row .ltitle { font-family: var(--font-serif); font-size: 16px; color: var(--fg-1); flex: 1; }
.lesson-row .ldur { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.08em; }

/* ============= LESSON PLAYER ============================ */
.player-shell {
  position: fixed; inset: 0;
  background: var(--ink-900); color: var(--sand-50);
  display: grid; grid-template-rows: auto 1fr;
  z-index: 60;
}
.player-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 32px;
  border-bottom: 1px solid #2a201a;
}
.player-top .ptl { display: flex; align-items: center; gap: 18px; }
.player-top .ptl .crumbs-dark { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sand-300); }
.player-top .ptl .crumbs-dark .now { color: var(--sand-50); }
.player-top .ptr { display: flex; gap: 8px; align-items: center; }
.player-top .icon-btn { color: var(--sand-200); }
.player-top .icon-btn:hover { background: rgba(251,247,241,0.08); color: var(--sand-50); }

.player-body {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 320px;
  overflow: hidden;
}
@media (max-width: 1280px) {
  .player-body { grid-template-columns: 240px minmax(0, 1fr); }
  .player-side { display: none; }
}

.player-modules {
  border-right: 1px solid #2a201a;
  overflow-y: auto;
  padding: 24px 0;
}
.player-modules h4 {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--sand-300); margin: 0 24px 14px;
}
.player-modules .mod {
  font-family: var(--font-serif); font-weight: 500; font-size: 14px;
  color: var(--sand-200); margin: 18px 24px 10px;
  display: flex; align-items: baseline; gap: 8px;
}
.player-modules .mod .mn { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--gold-300); }
.player-lesson {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 24px;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: 140ms;
}
.player-lesson:hover { background: rgba(251,247,241,0.04); }
.player-lesson.current { border-left-color: var(--gold-500); background: rgba(168,134,54,0.06); }
.player-lesson .ls {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid #4a3a30;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.player-lesson.done .ls { background: var(--burgundy-500); border-color: var(--burgundy-500); }
.player-lesson .ll { font-family: var(--font-serif); font-size: 14px; color: var(--sand-200); flex: 1; line-height: 1.3; }
.player-lesson.current .ll { color: var(--sand-50); }
.player-lesson .ld { font-family: var(--font-mono); font-size: 10px; color: var(--sand-300); letter-spacing: 0.08em; }

/* center video */
.player-center {
  display: flex; flex-direction: column;
  overflow-y: auto;
  min-width: 0;
}
.player-video {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  min-height: 320px;
  background: #000;
  overflow: hidden;
  flex: 0 0 auto;
}
.player-video img {
  width: 100%; height: 100%; object-fit: cover; opacity: 0.6;
}
.player-video .center-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--gold-500); color: var(--ink-900);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; border: none; cursor: pointer;
  box-shadow: var(--shadow-lg);
}
.player-video .watermark {
  position: absolute; top: 24px; right: 28px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(251,247,241,0.5); pointer-events: none;
}
.player-video .watermark .em { color: var(--gold-300); }

.player-controls {
  padding: 14px 32px;
  display: flex; align-items: center; gap: 18px;
  border-bottom: 1px solid #2a201a;
}
.player-controls .scrub { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.player-controls .bar { height: 3px; background: rgba(251,247,241,0.15); border-radius: 2px; overflow: hidden; cursor: pointer; }
.player-controls .bar > div { height: 100%; background: var(--gold-500); border-radius: 2px; transition: width 220ms; }
.player-controls .times { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--sand-300); }
.player-controls .pc-btn { background: transparent; border: none; color: var(--sand-200); cursor: pointer; padding: 6px; display: inline-flex; }
.player-controls .pc-btn:hover { color: var(--sand-50); }
.player-controls .pc-btn.play { width: 44px; height: 44px; border-radius: 50%; background: var(--sand-50); color: var(--ink-900); display: inline-flex; align-items: center; justify-content: center; }

.player-info { padding: 28px 32px; max-width: 720px; }
.player-info .eb { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-300); margin-bottom: 12px; }
.player-info h1 { font-family: var(--font-serif); font-weight: 400; font-size: 32px; line-height: 1.1; letter-spacing: -0.022em; color: var(--sand-50); margin: 0 0 16px; text-wrap: balance; }
.player-info p { font-family: var(--font-serif); font-size: 16px; line-height: 1.65; color: var(--sand-200); margin: 0 0 16px; text-wrap: pretty; }
.player-info .reflection {
  margin-top: 28px; padding: 24px;
  border-left: 2px solid var(--gold-500);
  background: rgba(168,134,54,0.06);
  border-radius: 0 8px 8px 0;
}
.player-info .reflection .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-300); margin-bottom: 8px; }
.player-info .reflection p { font-family: var(--font-serif); font-style: italic; font-size: 19px; line-height: 1.4; color: var(--sand-50); margin: 0; }

.player-side {
  border-left: 1px solid #2a201a;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.player-tabs { display: flex; border-bottom: 1px solid #2a201a; padding: 0 24px; }
.player-tab {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sand-300); padding: 14px 0; margin-right: 24px;
  cursor: pointer; border-bottom: 2px solid transparent;
  background: transparent; border-left: none; border-right: none; border-top: none;
}
.player-tab.active { color: var(--sand-50); border-bottom-color: var(--gold-500); }
.player-side-body { padding: 24px; overflow-y: auto; flex: 1; }
.notes-input {
  width: 100%; min-height: 360px;
  background: rgba(251,247,241,0.04);
  border: 1px solid #2a201a;
  border-radius: 8px;
  padding: 16px;
  font-family: var(--font-serif); font-size: 15px; line-height: 1.6;
  color: var(--sand-100); resize: vertical;
  outline: none;
}
.notes-input:focus { border-color: var(--gold-500); }
.notes-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--sand-300); margin-top: 10px; display: flex; justify-content: space-between; }
.resource-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #2a201a;
}
.resource-row .ico {
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(251,247,241,0.06);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gold-300);
  flex-shrink: 0;
}
.resource-row .body { flex: 1; }
.resource-row .name { font-family: var(--font-serif); font-size: 14px; color: var(--sand-50); margin: 0; }
.resource-row .meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--sand-300); margin-top: 2px; }

/* ============= JOURNAL ============================ */
.journal-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px; }
.journal-prompts .card { padding: 22px; cursor: pointer; transition: 220ms; margin-bottom: 14px; }
.journal-prompts .card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.journal-prompts .card.active { background: var(--burgundy-500); color: var(--sand-50); border-color: var(--burgundy-500); }
.journal-prompts .card.active h4 { color: var(--sand-50); }
.journal-prompts .card.active .meta { color: var(--sand-200); }
.journal-prompts .card .meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; }
.journal-prompts .card h4 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 19px; line-height: 1.3; color: var(--fg-1); margin: 0; text-wrap: balance; }

.journal-edit { padding: 32px; min-height: 540px; display: flex; flex-direction: column; }
.journal-edit .je-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--burgundy-500); margin-bottom: 14px; }
.journal-edit h2 { font-family: var(--font-serif); font-weight: 400; font-style: italic; font-size: 28px; line-height: 1.2; color: var(--fg-1); margin: 0 0 24px; text-wrap: balance; }
.journal-edit textarea {
  flex: 1; width: 100%;
  font-family: var(--font-serif); font-size: 17px; line-height: 1.65;
  background: transparent; border: none; outline: none; resize: none;
  color: var(--fg-1);
}
.journal-edit .je-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 18px; border-top: 1px solid var(--border-soft); margin-top: 24px; }
.journal-edit .je-foot .word-count { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--fg-3); }

.journal-history { margin-top: 36px; }
.history-row {
  display: grid; grid-template-columns: 100px 80px 1fr 80px; gap: 24px; align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer; transition: 140ms;
}
.history-row:hover { padding-left: 8px; }
.history-row .date { font-family: var(--font-serif); font-weight: 500; font-size: 16px; color: var(--burgundy-500); }
.history-row .day { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--fg-3); margin-left: 6px; }
.history-row .mood { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); }
.history-row .preview { font-family: var(--font-serif); font-size: 15px; line-height: 1.5; color: var(--fg-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ============= PROFILE ============================ */
.profile-grid { display: grid; grid-template-columns: 320px 1fr; gap: 40px; }
.profile-side .avatar-big {
  width: 120px; height: 120px; border-radius: 50%;
  background: url('https://images.unsplash.com/photo-1521252659862-eec69941b071?w=400&q=80&auto=format') center/cover;
  filter: saturate(0.85) sepia(0.08);
  margin-bottom: 20px;
}
.profile-side .pname { font-family: var(--font-serif); font-weight: 400; font-size: 32px; letter-spacing: -0.022em; color: var(--fg-1); margin: 0 0 4px; }
.profile-side .pmeta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.profile-side ul { list-style: none; padding: 0; margin: 24px 0 0; }
.profile-side li { font-family: var(--font-serif); font-size: 14px; color: var(--fg-2); padding: 10px 0; border-bottom: 1px solid var(--border-soft); display: flex; justify-content: space-between; }
.profile-side li .lbl { color: var(--fg-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }

.section-block { margin-bottom: 40px; }
.section-block h3 { font-family: var(--font-serif); font-weight: 500; font-size: 22px; color: var(--fg-1); margin: 0 0 6px; letter-spacing: -0.01em; }
.section-block .desc { font-family: var(--font-serif); font-size: 14px; color: var(--fg-3); margin: 0 0 18px; }

.toggle-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 18px 0; border-bottom: 1px solid var(--border-soft);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-row .body { flex: 1; }
.toggle-row .ttl { font-family: var(--font-serif); font-weight: 500; font-size: 16px; color: var(--fg-1); margin: 0 0 4px; }
.toggle-row .desc { font-family: var(--font-serif); font-size: 14px; color: var(--fg-3); margin: 0; }

.toggle {
  width: 42px; height: 24px;
  border-radius: 999px;
  background: var(--ink-200);
  position: relative; cursor: pointer; flex-shrink: 0;
  transition: 220ms;
}
body.theme-ink .toggle { background: var(--ink-700); }
.toggle::after {
  content: ''; position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg-elevated);
  transition: 220ms;
  box-shadow: var(--shadow-xs);
}
.toggle.on { background: var(--burgundy-500); }
.toggle.on::after { left: 20px; background: var(--sand-50); }

/* ============= TABLES ============================ */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
}
.tbl th {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-3); font-weight: 500;
  background: var(--sand-100);
}
body.theme-ink .tbl th { background: var(--bg-elevated); }
.tbl td { font-family: var(--font-serif); font-size: 14px; color: var(--fg-2); }
.tbl tr { transition: 140ms; }
.tbl tr:hover td { background: var(--sand-50); }
body.theme-ink .tbl tr:hover td { background: rgba(251,247,241,0.03); }
.tbl .pname { font-family: var(--font-serif); font-weight: 500; font-size: 14px; color: var(--fg-1); }
.tbl .pemail { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--fg-3); }
.tbl .row-avatar {
  width: 32px; height: 32px; border-radius: 50%; background-size: cover; background-position: center;
  filter: saturate(0.85) sepia(0.08);
  display: inline-block; vertical-align: middle; margin-right: 12px;
}

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
}
.pill-active { background: var(--sage-100); color: var(--sage-700); }
.pill-paused { background: var(--ink-100); color: var(--ink-700); }
body.theme-ink .pill-paused { background: rgba(251,247,241,0.08); color: var(--sand-200); }
.pill-trial { background: rgba(168,134,54,0.16); color: var(--gold-500); }
.pill-blocked { background: rgba(122,42,29,0.14); color: var(--burgundy-500); }
.pill-paid { background: var(--sage-100); color: var(--sage-700); }
.pill-overdue { background: rgba(122,42,29,0.14); color: var(--burgundy-500); }
.pill-refund { background: var(--ink-100); color: var(--ink-700); }
.pill-published { background: var(--sage-100); color: var(--sage-700); }
.pill-draft { background: var(--ink-100); color: var(--ink-700); }
body.theme-ink .pill-draft { background: rgba(251,247,241,0.08); color: var(--sand-200); }
.pill-flag { background: rgba(168,134,54,0.16); color: var(--gold-500); }

/* ============= FILTERS ============================ */
.filter-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.filter-row .seg {
  display: flex; gap: 4px;
  padding: 4px;
  background: var(--sand-100);
  border-radius: 8px;
}
body.theme-ink .filter-row .seg { background: var(--bg-elevated); border: 1px solid var(--border-soft); }
.filter-row .seg button {
  background: transparent; border: none; padding: 6px 14px;
  border-radius: 6px;
  font-family: var(--font-serif); font-size: 13px; color: var(--fg-2);
  cursor: pointer;
}
.filter-row .seg button.on { background: var(--bg-elevated); color: var(--fg-1); box-shadow: var(--shadow-xs); }
body.theme-ink .filter-row .seg button.on { background: var(--ink-700); color: var(--sand-50); box-shadow: none; }
.filter-row .search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  flex: 1; max-width: 360px;
  color: var(--fg-3);
}
.filter-row .search input { background: transparent; border: none; outline: none; font-family: var(--font-serif); font-size: 14px; color: var(--fg-1); flex: 1; }

/* ============= ADMIN: TWO-COL LAYOUT ============================ */
.split-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; }
.split-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

/* ============= SECURITY ============================ */
.shield-card {
  background: var(--ink-900); color: var(--sand-50);
  border-radius: 16px; padding: 36px;
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
  margin-bottom: 32px;
  position: relative; overflow: hidden;
}
.shield-card::before {
  content: ''; position: absolute; top: -40px; right: -40px;
  width: 280px; height: 280px;
  background: var(--burgundy-500);
  border-radius: 50%;
  opacity: 0.4; filter: blur(60px);
}
.shield-card .sc-eb { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-300); margin-bottom: 12px; }
.shield-card h2 { font-family: var(--font-serif); font-weight: 400; font-size: 38px; line-height: 1.05; letter-spacing: -0.022em; color: var(--sand-50); margin: 0 0 12px; text-wrap: balance; position: relative; }
.shield-card p { font-family: var(--font-serif); font-size: 16px; line-height: 1.55; color: var(--sand-200); margin: 0; max-width: 560px; position: relative; text-wrap: pretty; }
.shield-card .score { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.shield-card .score .ring {
  width: 140px; height: 140px; border-radius: 50%;
  background: conic-gradient(var(--gold-500) 0% 92%, rgba(251,247,241,0.1) 92% 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.shield-card .score .ring::before {
  content: ''; position: absolute; inset: 8px; border-radius: 50%; background: var(--ink-900);
}
.shield-card .score .num { position: relative; font-family: var(--font-serif); font-size: 44px; font-weight: 400; letter-spacing: -0.022em; color: var(--sand-50); }
.shield-card .score .num em { font-style: normal; font-size: 22px; color: var(--sand-300); margin-left: 2px; }
.shield-card .score .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--gold-300); }

.log-row {
  display: grid; grid-template-columns: 90px 1fr 200px 120px 80px;
  gap: 18px; align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-serif); font-size: 13px; color: var(--fg-2);
}
.log-row .time { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--fg-3); }
.log-row .who { font-weight: 500; color: var(--fg-1); }
.log-row .ip { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.04em; }

/* ============= COURSE EDITOR ============================ */
.editor-shell { display: grid; grid-template-columns: 280px 1fr; gap: 28px; }
.module-panel { padding: 0; }
.module-panel .mp-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer; transition: 140ms;
  font-family: var(--font-serif); font-size: 14px; color: var(--fg-2);
}
.module-panel .mp-row:hover { background: var(--sand-100); }
body.theme-ink .module-panel .mp-row:hover { background: rgba(251,247,241,0.04); }
.module-panel .mp-row.active { background: var(--burgundy-500); color: var(--sand-50); }
.module-panel .mp-row.active .mn { color: var(--gold-300); }
.module-panel .mp-row .mn { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--fg-3); }
.module-panel .mp-row .grip { color: var(--fg-3); cursor: grab; }
.module-panel .mp-add {
  padding: 14px 18px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--burgundy-500); cursor: pointer; border-top: 1px dashed var(--border);
  display: flex; align-items: center; gap: 8px;
}
.editor-canvas { padding: 0; }
.editor-canvas .lesson-edit-row {
  display: grid; grid-template-columns: 36px 1fr 110px 90px 40px;
  gap: 16px; align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border-soft);
}
.editor-canvas .lesson-edit-row:hover { background: var(--sand-100); }
body.theme-ink .editor-canvas .lesson-edit-row:hover { background: rgba(251,247,241,0.04); }
.editor-canvas .lesson-edit-row .grip { color: var(--fg-3); cursor: grab; display: inline-flex; }
.editor-canvas .lesson-edit-row .name { font-family: var(--font-serif); font-size: 15px; color: var(--fg-1); }
.editor-canvas .lesson-edit-row .name .meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--fg-3); margin-top: 2px; }
.editor-canvas .lesson-edit-row .type-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--sand-100); color: var(--ink-700);
  padding: 4px 8px; border-radius: 4px; text-align: center;
}
body.theme-ink .editor-canvas .lesson-edit-row .type-tag { background: rgba(251,247,241,0.08); color: var(--sand-200); }
.editor-canvas .lesson-edit-row .type-tag.video { background: rgba(122,42,29,0.12); color: var(--burgundy-500); }
.editor-canvas .lesson-edit-row .type-tag.audio { background: rgba(168,134,54,0.16); color: var(--gold-500); }
.editor-canvas .lesson-edit-row .type-tag.text { background: var(--sage-100); color: var(--sage-700); }
.editor-canvas .lesson-edit-row .type-tag.pdf { background: rgba(122,42,29,0.06); color: var(--burgundy-500); }

/* ============= UPLOAD DROPZONE ============================ */
.dropzone {
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  background: var(--sand-100);
}
body.theme-ink .dropzone { background: rgba(251,247,241,0.03); }
.dropzone .icn { color: var(--burgundy-500); margin-bottom: 12px; display: inline-flex; }
.dropzone h4 { font-family: var(--font-serif); font-weight: 500; font-size: 18px; color: var(--fg-1); margin: 0 0 6px; }
.dropzone p { font-family: var(--font-serif); font-size: 14px; color: var(--fg-3); margin: 0 0 16px; }

/* ============= STATS / CHARTS ============================ */
.spark {
  height: 120px; width: 100%;
  display: flex; align-items: flex-end;
  gap: 4px;
}
.spark .b { flex: 1; background: var(--burgundy-500); border-radius: 2px 2px 0 0; opacity: 0.85; transition: 220ms; }
.spark .b:hover { opacity: 1; }
.spark .b.muted { background: var(--ink-200); opacity: 1; }
body.theme-ink .spark .b.muted { background: var(--ink-700); }

.donut { position: relative; width: 160px; height: 160px; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut .center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center;
}
.donut .center .num { font-family: var(--font-serif); font-size: 32px; font-weight: 400; letter-spacing: -0.022em; color: var(--fg-1); }
.donut .center .lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); margin-top: 2px; }

.legend { display: flex; flex-direction: column; gap: 10px; }
.legend .lg-row { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--fg-2); }
.legend .lg-row .sw { width: 12px; height: 12px; border-radius: 3px; }
.legend .lg-row .v { margin-left: auto; color: var(--fg-3); }

/* ============= EMAIL TEMPLATES PREVIEW ============================ */
.email-list {
  display: grid; grid-template-columns: 280px 1fr; gap: 0;
  border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden;
  background: var(--bg-elevated);
}
.email-list .left { border-right: 1px solid var(--border-soft); }
.email-list .e-row {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer; transition: 140ms;
}
.email-list .e-row:hover { background: var(--sand-100); }
body.theme-ink .email-list .e-row:hover { background: rgba(251,247,241,0.04); }
.email-list .e-row.active { background: var(--sand-100); border-left: 2px solid var(--burgundy-500); padding-left: 16px; }
body.theme-ink .email-list .e-row.active { background: rgba(122,42,29,0.12); }
.email-list .e-row .subj { font-family: var(--font-serif); font-weight: 500; font-size: 14px; color: var(--fg-1); margin: 0 0 4px; }
.email-list .e-row .meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.email-preview { padding: 36px 44px; min-height: 460px; }
.email-preview .from-line { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--fg-3); margin-bottom: 8px; }
.email-preview h1 { font-family: var(--font-serif); font-weight: 400; font-size: 28px; line-height: 1.2; color: var(--fg-1); margin: 0 0 24px; letter-spacing: -0.022em; }
.email-preview p { font-family: var(--font-serif); font-size: 16px; line-height: 1.65; color: var(--fg-2); margin: 0 0 16px; max-width: 540px; }

/* ============= MISC ============================ */
.empty {
  text-align: center; padding: 80px 20px;
  color: var(--fg-3);
}
.empty h3 { font-family: var(--font-serif); font-weight: 400; font-size: 24px; color: var(--fg-1); margin: 0 0 8px; }

.tag {
  display: inline-block; padding: 3px 8px;
  background: var(--sand-100); color: var(--ink-700);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: 4px;
}
body.theme-ink .tag { background: rgba(251,247,241,0.08); color: var(--sand-200); }

/* a hairline divider helper */
.hr { height: 1px; background: var(--border-soft); margin: 24px 0; border: 0; }

/* small labels */
.kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); }

/* placeholder image */
.placeholder-img {
  background: linear-gradient(135deg, var(--sand-200) 0%, var(--sand-100) 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-300);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
}

/* ============= HAMBURGER BUTTON ============================ */
.hamburger {
  display: none;
  width: 36px; height: 36px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: transparent;
  align-items: center; justify-content: center;
  cursor: pointer; color: var(--fg-2);
  flex-shrink: 0;
}
.hamburger:hover { background: var(--sand-100); }

/* sidebar overlay backdrop */
.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(24,19,17,0.5);
  z-index: 49;
}
.sidebar-backdrop.visible { display: block; }

/* ============= RESPONSIVE ============================ */

/*
 * Breakpoints:
 * ≤ 1024px  — Hamburger + Sidebar-Overlay (Tablet & Handy quer & hoch)
 * ≤ 768px   — Handy hochkant: engere Layouts, kleinere Schriften
 * Landscape (max-height 500px) — Handy quer: Auth-Seite, kompakte Darstellung
 * ≤ 420px   — Sehr kleines Handy
 */

/* --- Hamburger & Sidebar-Overlay ab 1024px (deckt alle Handys in beiden Lagen ab) --- */
@media (max-width: 1024px) {
  /* Sidebar wird zum Slide-in-Overlay */
  .app-shell { grid-template-columns: 1fr; }

  .app-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 272px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 280ms cubic-bezier(0.22,1,0.36,1);
    box-shadow: none;
    height: 100dvh;
    overflow-y: auto;
  }
  .app-sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 40px rgba(24,19,17,0.22);
  }

  .hamburger { display: inline-flex; }

  .app-topbar { padding: 14px 20px; gap: 12px; }
  .topbar-search { display: none; }

  .app-page { padding: 24px 20px 60px; }
  .app-page.tight { padding: 18px 20px 40px; }

  /* Layouts */
  .split-2 { grid-template-columns: 1fr; gap: 20px; }
  .split-3 { grid-template-columns: 1fr 1fr; gap: 14px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 24px; }
  .profile-grid { grid-template-columns: 1fr; gap: 20px; }
  .editor-shell { grid-template-columns: 1fr; }
  .module-panel { display: none; }

  /* Hero-Cards */
  .hero-continue { grid-template-columns: 1fr; }
  .hero-continue .hc-art { display: none; }
  .hero-continue .hc-body { padding: 28px 24px; }

  .course-hero { grid-template-columns: 1fr; }
  .course-hero .ch-art { display: none; }
  .course-hero .ch-body { padding: 28px 24px; }

  /* Auth — position:fixed aufheben, body darf scrollen */
  html, body { height: auto; min-height: 100%; }
  .auth-shell {
    position: relative;
    inset: auto;
    display: block;
    min-height: 100svh;
    overflow-y: visible;
  }
  .auth-art { display: none; }
  .auth-form-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 52px 28px 48px;
    min-height: 100svh;
    box-sizing: border-box;
  }

  /* Shield */
  .shield-card { grid-template-columns: 1fr; padding: 28px 24px; }
  .shield-card .score { flex-direction: row; justify-content: flex-start; gap: 20px; }

  /* Tabellen */
  .tbl th, .tbl td { padding: 10px 14px; }
  .log-row { grid-template-columns: 70px 1fr 80px; }
  .log-row .ip { display: none; }

  /* Module */
  .module-row { grid-template-columns: 40px 1fr 60px; gap: 14px; }
  .module-row .md { display: none; }

  /* Player */
  .player-body { grid-template-columns: 1fr; }
  .player-modules { display: none; }
  .player-side { display: none; }
  .player-top { padding: 12px 16px; }
  .player-controls { padding: 10px 16px; }
  .player-info { padding: 20px 16px; }
  .player-info h1 { font-size: 24px; }
}

/* --- Handy hochkant (≤ 768px) — engere Darstellung --- */
@media (max-width: 768px) {
  .app-topbar { padding: 12px 14px; }
  .app-page { padding: 18px 14px 60px; }
  .app-page.tight { padding: 14px 14px 40px; }

  .page-head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 20px; }
  .page-head h1 { font-size: 28px; }
  .page-head .actions { width: 100%; }

  .stat-grid { gap: 10px; }
  .stat .num { font-size: 26px; }
  .split-3 { grid-template-columns: 1fr; }

  .course-grid { grid-template-columns: 1fr; }
  .course-hero .ch-body { padding: 22px 18px; }
  .course-hero h1 { font-size: 26px; }
  .hero-continue .hc-body { padding: 22px 18px; }

  .card.padded { padding: 16px 14px; }
  .card { overflow-x: auto; }
  .tbl th, .tbl td { white-space: nowrap; }

  .filter-row { flex-direction: column; align-items: stretch; }
  .filter-row .search { max-width: 100%; }

  .shield-card h2 { font-size: 24px; }
  .shield-card .score .ring { width: 90px; height: 90px; }
  .shield-card .score .num { font-size: 28px; }

  .code-grid { gap: 5px; }
  .code-grid input { font-size: 16px; padding: 10px 0; border-radius: 6px; }
  .auth-form .code-grid { gap: 4px; }
  .auth-form .code-grid input { font-size: 15px; padding: 9px 0; }

  .auth-form-wrap { padding: 36px 20px; }
  .auth-form h2 { font-size: 30px; }
}

/* --- Handy quer (landscape, Höhe ≤ 500px) --- */
@media (max-height: 500px) and (orientation: landscape) {
  /* Auth-Seite: kompakt, body scrollt */
  html, body { height: auto; }
  .auth-shell {
    position: relative;
    inset: auto;
    display: block;
    min-height: auto;
    overflow-y: visible;
  }
  .auth-form-wrap {
    min-height: auto;
    padding: 28px 32px 36px;
    align-items: flex-start;
  }
  .auth-form { max-width: 400px; margin: 0 auto; }
  .auth-form h2 { font-size: 24px; margin-bottom: 6px; }
  .auth-form .lead { font-size: 14px; margin-bottom: 16px; }
  .field { margin-bottom: 10px; }
  .field input { padding: 10px 14px; font-size: 14px; }
  .btn { padding: 11px 18px; }

  /* App-Shell quer: kompaktere Abstände */
  .app-page { padding: 12px 16px 40px; }
  .app-topbar { padding: 8px 16px; }
  .app-sidebar { height: 100dvh; overflow-y: auto; }
}

/* --- Sehr kleines Handy (≤ 390px) --- */
@media (max-width: 390px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat .num { font-size: 22px; }
  .page-head h1 { font-size: 24px; }
  .btn { font-size: 13px; padding: 11px 14px; }
  .btn-sm { padding: 7px 11px; font-size: 12px; }
}