/* ═══════════════════════════════════════════════════════════
   SIMPEL-TEMA.CSS — Skandinavisk re-skin
   Overrides style.css uden at ændre HTML-struktur eller JS-hooks.
   Indlæses EFTER style.css så cascade vinder.
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Serif+Display&family=Outfit:wght@300;400;500;600&display=swap');

:root {
  /* Skandinavisk varm palette */
  --bg:       #f6f4ef;
  --bg2:      #ffffff;
  --bg3:      #ede9e0;
  --border:   #e2ddd1;
  --border2:  #cfc8b8;
  --text:     #2a2620;
  --muted:    #756f63;
  --muted2:   #a39d8f;
  --accent:   #3a5a4a;   /* dyb grøn */
  --accent2:  #2a4338;
  --green:    #3a5a4a;
  --red:      #b04a4a;
  --gold:     #9b7a3a;
  --purple:   #6b5a7a;
  --orange:   #c87a4a;
}

/* ── Fjern støj ─────────────────────────────── */
body::before { display: none !important; }
body { background: var(--bg) !important; color: var(--text) !important; }
.floating-formulas { display: none !important; }

/* ── NAV: roligere ───────────────────────────── */
nav {
  background: rgba(246,244,239,0.92) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  backdrop-filter: blur(20px) !important;
}
.nav-logo { color: var(--text) !important; letter-spacing: -0.4px !important; }
.nav-logo span { color: var(--accent) !important; font-style: italic !important; }
.nav-logo-badge {
  font-family: 'DM Mono', monospace !important;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
}
.nav-link { font-weight: 400 !important; }
.nav-link.active {
  color: var(--text) !important;
  background: var(--bg3) !important;
}
.nav-levels {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
}
.nav-level.active {
  background: var(--text) !important;
  color: var(--bg) !important;
}

/* ── HERO ─────────────────────────────────────── */
.hero h1 {
  font-family: 'DM Serif Display', serif !important;
  font-weight: 400 !important;
  letter-spacing: -1.2px !important;
}
.hero h1 .la, .hero h1 .lb, .hero h1 .lc {
  color: var(--accent) !important;
  font-style: italic !important;
}
.hero-badge {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  border-radius: 100px !important;
  padding: 6px 14px !important;
}
.hero-badge .dot { background: var(--accent) !important; }
.hero-sub { color: var(--muted) !important; }

.countdown {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.countdown-label {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.62rem !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}

/* ── NIVEAU-VALG: store rolige bokse ──────────── */
.level-grid, .niveau-grid, .levels-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 16px !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
}
.level-card, .niveau-card {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  padding: 36px 32px !important;
  box-shadow: none !important;
  transition: all .2s ease !important;
  position: relative !important;
  overflow: hidden !important;
}
.level-card:hover, .niveau-card:hover {
  border-color: var(--text) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(42,38,32,0.06) !important;
}
.level-card h2, .level-card h3, .niveau-card h2, .niveau-card h3 {
  font-family: 'DM Serif Display', serif !important;
  color: var(--text) !important;
  font-weight: 400 !important;
}
.level-badge, .niveau-badge {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.62rem !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* ── TOPIC GRID ───────────────────────────────── */
#topic-grid, .topics-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 12px !important;
}
.topic-card {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 24px 22px !important;
  box-shadow: none !important;
  transition: all .15s ease !important;
}
.topic-card:hover {
  border-color: var(--text) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(42,38,32,0.05) !important;
}
.topic-icon {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.82rem !important;
  background: var(--bg3) !important;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  display: inline-block !important;
  margin-bottom: 14px !important;
}
.topic-name {
  font-family: 'DM Serif Display', serif !important;
  font-size: 1.15rem !important;
  font-weight: 400 !important;
  color: var(--text) !important;
  letter-spacing: -0.2px !important;
  margin-bottom: 6px !important;
}
.topic-desc {
  color: var(--muted) !important;
  font-size: 0.86rem !important;
  line-height: 1.55 !important;
  margin-bottom: 16px !important;
}
.topic-arrow {
  font-family: 'DM Mono', monospace !important;
  color: var(--muted2) !important;
  position: absolute !important;
  top: 22px !important;
  right: 22px !important;
}
.topic-card:hover .topic-arrow { color: var(--text) !important; }
.topic-progress-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.topic-pbar-track {
  background: var(--bg3) !important;
  height: 4px !important;
  border-radius: 100px !important;
  overflow: hidden !important;
  flex: 1 !important;
}
.topic-pbar-fill {
  background: var(--text) !important;
  height: 100% !important;
}
.topic-pct {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.7rem !important;
  color: var(--muted) !important;
  letter-spacing: 0.5px !important;
}
.topic-solved {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.7rem !important;
  color: var(--muted) !important;
  margin-top: 8px !important;
  letter-spacing: 0.3px !important;
}
.topic-locked { opacity: 0.6 !important; }

/* ── KNAPPER ──────────────────────────────────── */
button, .btn, .cta, .primary-btn {
  font-family: 'Outfit', sans-serif !important;
  letter-spacing: 0.01em !important;
}
.cta, .primary-btn, button.primary, .btn-primary {
  background: var(--text) !important;
  color: var(--bg) !important;
  border: 1px solid var(--text) !important;
  border-radius: 10px !important;
  padding: 12px 22px !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  font-size: 0.94rem !important;
}
.cta:hover, .primary-btn:hover, button.primary:hover, .btn-primary:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}
.btn-secondary, .secondary-btn {
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
}

/* ── PANEL / OPGAVE ──────────────────────────── */
#panel, .panel {
  background: var(--bg) !important;
}
.panel-header, .opgave-header {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
}
#panel-label, .panel-label {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.65rem !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}
#panel-title, .panel-title {
  font-family: 'DM Serif Display', serif !important;
  font-weight: 400 !important;
  color: var(--text) !important;
  letter-spacing: -0.4px !important;
}
.panel-body, #panel-body {
  background: var(--bg) !important;
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  font-family: 'Outfit', sans-serif !important;
  color: var(--text) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(58,90,74,0.1) !important;
}

/* ── MODAL / OVERLAY ──────────────────────────── */
.modal, .modal-content, .overlay-content {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(42,38,32,0.12) !important;
}

/* ── LOGIN ────────────────────────────────────── */
.login-card, .auth-card, .login-container {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

/* ── NOTER ────────────────────────────────────── */
.noter-page, .noter-content {
  background: var(--bg) !important;
}
.noter-section, .note-card {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

/* ── DETALJER: roligere typografi ──────────────── */
h1, h2, h3, h4 {
  font-family: 'DM Serif Display', serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.3px !important;
}
.mono, code, kbd {
  font-family: 'DM Mono', monospace !important;
}

/* ── FJERN AGGRESSIVE GRADIENTER ──────────────── */
[style*="linear-gradient"]:not(.topic-pbar-fill) {
  background: var(--bg2) !important;
}
.topic-pbar-fill[style*="linear-gradient"] {
  background: var(--text) !important;
}

/* ── SCROLLBAR ────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

/* ═══════════════════════════════════════════════
   STRUKTUR-FORENKLINGER
   ═══════════════════════════════════════════════ */

/* Skjul de overflødige nav-links — kun logo + niveau-switcher behold */
nav .nav-links .nav-link[data-nav="forside"],
nav .nav-links .nav-link[data-nav="emner"],
nav .nav-links .nav-link[data-nav="noter"],
nav .nav-links .nav-link[data-nav="explore"],
nav .nav-links .nav-link[data-nav="resultater"],
nav .nav-links .nav-link[data-nav="info"],
nav .nav-links .nav-link[data-nav="eksamen"],
nav .nav-links .nav-link[data-nav="lynrunde"],
nav .nav-menu-toggle {
  display: none !important;
}
nav .nav-links .nav-link[title*="ulstil"] { display: none !important; }
nav .nav-links { gap: 8px !important; }

/* ── SIMPEL CHOICE GRID — 4 store valgbokse ── */
.simpel-choice-section {
  max-width: 1180px;
  margin: 40px auto 32px;
  padding: 0 32px;
}
.simpel-choice-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.simpel-choice-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -1px;
  margin: 0 0 8px;
  color: var(--text);
}
.simpel-choice-title em {
  font-style: italic;
  color: var(--accent);
}
.simpel-choice-sub {
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0 0 32px;
  max-width: 580px;
}
.simpel-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 1000px) {
  .simpel-choice-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .simpel-choice-grid { grid-template-columns: 1fr; }
}
.simpel-choice-tile {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px 28px 28px;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 200px;
  transition: transform .2s, border-color .2s, box-shadow .2s;
  font-family: inherit;
  color: var(--text);
  position: relative;
  overflow: hidden;
}
.simpel-choice-tile:hover {
  transform: translateY(-3px);
  border-color: var(--text);
  box-shadow: 0 14px 38px rgba(42,38,32,0.08);
}
.simpel-choice-tile .glyph {
  font-family: 'DM Mono', monospace;
  font-size: 1.7rem;
  color: var(--accent);
  margin-bottom: 14px;
  display: block;
}
.simpel-choice-tile .label {
  font-family: 'DM Serif Display', serif;
  font-size: 1.6rem;
  letter-spacing: -0.4px;
  margin: 0;
  line-height: 1.15;
}
.simpel-choice-tile .desc {
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.45;
  margin: 4px 0 0;
  max-width: 95%;
}
.simpel-choice-tile .arrow {
  position: absolute;
  top: 28px;
  right: 28px;
  font-family: 'DM Mono', monospace;
  color: var(--muted2);
  font-size: 1rem;
  transition: transform .2s, color .2s;
}
.simpel-choice-tile:hover .arrow {
  transform: translateX(4px);
  color: var(--accent);
}
.simpel-choice-tile[data-action="eksamen"] .glyph { color: var(--red); }
.simpel-choice-tile[data-action="lynrunde"] .glyph { color: var(--gold); }
.simpel-choice-tile[data-action="noter"] .glyph { color: var(--purple); }
.simpel-choice-tile[data-action="elev"] .glyph { color: var(--orange); }
.simpel-choice-tile[data-action="resultater"] .glyph { color: var(--green); }

/* Skjul den gamle landing-hero (vi har vores egen i stedet) */
.landing-hero { display: none !important; }

/* Behold dashboard, men forenkl */
.landing-dashboard-row {
  max-width: 1180px;
  margin: 0 auto 40px !important;
  padding: 0 32px;
  background: transparent !important;
  border: none !important;
}
.landing-dashboard-kicker {
  font-family: 'DM Mono', monospace !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
  color: var(--muted) !important;
}
.landing-dashboard-copy h2 {
  font-family: 'DM Serif Display', serif !important;
  letter-spacing: -0.5px !important;
}

/* ── TOPICS OVERLAY: roligere ── */
.topics-overlay { background: var(--bg) !important; }
.topics-overlay-header { border-bottom: 1px solid var(--border) !important; }
.topics-overlay-eyebrow {
  font-family: 'DM Mono', monospace !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
  color: var(--muted) !important;
}
.topics-overlay-title {
  font-family: 'DM Serif Display', serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.5px !important;
}
.panel-switcher {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 4px !important;
}
.panel-switch-btn.active {
  background: var(--text) !important;
  color: var(--bg) !important;
}
.topic-card {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  transition: border-color .15s, transform .15s !important;
}
.topic-card:hover {
  border-color: var(--text) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(42,38,32,0.06) !important;
}

/* ── TASK PANEL: roligere knapper ── */
.task-panel, .opgave-panel {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
.btn-secondary, .btn-ghost-old {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 8px !important;
  font-weight: 400 !important;
}
.btn-secondary:hover {
  border-color: var(--text) !important;
  background: var(--bg3) !important;
}
.btn-primary {
  background: var(--text) !important;
  color: var(--bg) !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  border: none !important;
}
.btn-primary:hover { background: var(--accent2) !important; background: var(--accent) !important; }

/* ── BOOST DASHBOARD (Elev-overblik widget) ── */
.boost-dashboard {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}
.boost-guide {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  border-radius: 14px !important;
}
.boost-kicker, .boost-eyebrow {
  color: var(--muted) !important;
  font-family: 'DM Mono', monospace !important;
}
.boost-ring {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
}
.boost-ring strong, .boost-ring b { color: var(--accent) !important; }
.boost-btn {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 8px !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}
.boost-btn:hover {
  border-color: var(--text) !important;
  background: var(--bg3) !important;
}
.boost-btn[data-boost-action="weaknesses"],
.boost-btn.primary,
.boost-start {
  background: var(--text) !important;
  color: var(--bg) !important;
  border: none !important;
}
.boost-level-link, .boost-dashboard a { color: var(--accent) !important; }
.boost-weak-item { background: var(--bg2) !important; border-color: var(--border) !important; }

/* Streak widget */
.streak-widget {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

/* Anbefalet-pille / pillstyle elementer i højre kolonne */
.boost-recommended, .recommendation-pill {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
}

/* ──────────────────────────────────────────────────────
   OPGAVE-UI (chips, knapper, formel-bokse)
   ────────────────────────────────────────────────────── */

/* Tag-chips (MELLEM, INTEGRAL, LET, FUNKTIONER osv.) */
.opgave-tag,
.opgave-tags .opgave-tag,
.topic-tag,
.tag-chip {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  font-family: 'DM Mono', monospace !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Formel-boks omkring opgavetekst (lyseblå baggrund i live-version) */
.opgave-formel,
.opg-formel,
.formel-display,
.math-block,
.math-display {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

/* Tjek-knap — gør den grøn primary */
.btn-tjek {
  background: var(--text) !important;
  color: var(--bg) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
}
.btn-tjek:hover {
  background: var(--accent) !important;
  color: var(--bg) !important;
}

/* Generer-knap */
.btn-gen {
  background: var(--text) !important;
  color: var(--bg) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
}
.btn-gen:hover {
  background: var(--accent) !important;
  transform: none !important;
}

/* Eksamenssimulator submit-knap */
.btn-sim-submit {
  background: var(--text) !important;
  color: var(--bg) !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
}
.btn-sim-submit:hover {
  background: var(--accent) !important;
  opacity: 1 !important;
}

/* Status-pills i delprøve (oversigt over spørgsmål 1-13) */
.sim-overview-dot,
.sim-question-dot {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-family: 'DM Mono', monospace !important;
  font-weight: 400 !important;
}
.sim-overview-dot.answered,
.sim-question-dot.answered {
  background: var(--text) !important;
  color: var(--bg) !important;
  border-color: var(--text) !important;
}

/* Stats-strip (RIGTIGE / FORKERTE / STRÆK / TID) */
.panel-stats,
.stats-strip {
  background: transparent !important;
}
.stat-icon, .stat-emoji { filter: none !important; }

/* LaTeX-tastaturet under svar-inputtet */
.math-keyboard,
.kb-row,
.keyboard-row {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
}
.math-keyboard button,
.kb-btn,
.keyboard-row button {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 6px !important;
  font-family: 'DM Mono', monospace !important;
}
.math-keyboard button:hover,
.kb-btn:hover {
  border-color: var(--text) !important;
  background: var(--bg3) !important;
}

/* Sub-opgave letter "a)", "b)" — accent grøn (var(--accent) er allerede grøn) */
.sim-delopg > div:first-child { color: var(--accent) !important; }

/* Mellemregning-panel (højre side) */
.mellemregning-panel,
.notes-panel,
.floating-notes {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(42,38,32,0.06) !important;
}

/* Filter-pills foroven på opgave-side (Mellem, 8 opgaver, 2 decimaler) */
.filter-pill,
.filter-chip,
.opgave-filter {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  color: var(--text) !important;
  font-weight: 400 !important;
}

/* Download PDF-knap — grøn accent */
button[onclick*="exportSessionPDF"],
.btn-download-pdf {
  background: var(--accent) !important;
  color: var(--bg) !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
}

/* ──────────────────────────────────────────────────────
   NYE OPGAVEVIEW (matcher mockup)
   ────────────────────────────────────────────────────── */
.opgave {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-areas:
    "head head"
    "eq side"
    "svar side"
    "actions side" !important;
  gap: 24px 28px !important;
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  padding: 28px 32px !important;
  margin-bottom: 24px !important;
}
@media (max-width: 1100px) {
  .opgave {
    grid-template-columns: 1fr !important;
    grid-template-areas: "head" "eq" "svar" "actions" "side" !important;
  }
}
.opgave-top, .opgave-body { display: contents !important; }
.task-head { grid-area: head !important; padding-bottom: 8px !important; border-bottom: 1px solid var(--border) !important; }
.task-equation-wrap { grid-area: eq !important; }
.opgave .svar-wrap { grid-area: svar !important; }
.opgave .task-side { grid-area: side !important; }
.opgave .task-actions { grid-area: actions !important; }

.task-meta-row { display:flex !important; align-items:center !important; gap:12px !important; margin-bottom:10px !important; }
.task-codepill {
  background: rgba(58,90,74,0.08) !important;
  color: var(--accent) !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 0.72rem !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}
.task-meta {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.65rem !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}
.task-title {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-size: 1.85rem !important;
  font-weight: 400 !important;
  color: var(--text) !important;
  line-height: 1.15 !important;
  margin-bottom: 6px !important;
}
.task-intro { color: var(--muted) !important; font-size: 0.95rem !important; line-height: 1.5 !important; }
.task-equation, .opgave .math-block {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 18px 20px !important;
  font-family: 'DM Mono', monospace !important;
}
.task-side {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 18px !important;
}
.task-side-head {
  display:flex !important; justify-content:space-between !important;
  font-family:'DM Mono',monospace !important; font-size:0.65rem !important;
  letter-spacing:1.5px !important; text-transform:uppercase !important;
  color:var(--muted) !important; margin-bottom:14px !important;
}
.task-side-head .hint { color: var(--muted2) !important; }
.math-keyboard {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.math-key-col { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.math-key-hdr {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.6rem !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--muted2) !important;
  margin-bottom: 2px !important;
}
.math-key-group { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 4px !important; }
.math-keyboard .mk {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 6px !important;
  padding: 8px 4px !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 0.78rem !important;
  cursor: pointer !important;
}
.math-keyboard .mk:hover { border-color: var(--text) !important; background: var(--bg3) !important; }
.task-actions {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}
.ta-btn {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  cursor: pointer !important;
  text-align: left !important;
  font-family: 'Outfit', sans-serif !important;
}
.ta-btn:hover { border-color: var(--text) !important; background: var(--bg3) !important; }
.ta-ico {
  width: 28px !important; height: 28px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 0.8rem !important;
  color: var(--muted) !important;
  flex-shrink: 0 !important;
}
.ta-text { display: flex !important; flex-direction: column !important; line-height: 1.2 !important; }
.ta-text b { font-size: 0.82rem !important; font-weight: 500 !important; color: var(--text) !important; }
.ta-text small { font-size: 0.66rem !important; color: var(--muted) !important; font-family: 'DM Mono', monospace !important; }
.format-hint {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 0.78rem !important;
  color: var(--muted) !important;
  margin-top: 10px !important;
}
.format-hint strong { color: var(--text) !important; font-weight: 500 !important; }

/* ── DUAL-MODE NOTES EDITOR ─────────────────────────────────────── */
.notes-mode-bar {
  display: flex;
  gap: 6px;
  padding: 6px 0 8px;
  border-bottom: 1px solid var(--border, #dde2ef);
  margin-bottom: 8px;
  flex-shrink: 0;
}
.notes-mode-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  font-size: 0.75rem;
  font-family: 'Outfit', sans-serif;
  border: 1px solid var(--border, #dde2ef);
  border-radius: 6px;
  background: var(--bg3, #f4f6f8);
  color: var(--muted, #5a6380);
  cursor: pointer;
  transition: all 0.12s;
}
.notes-mode-btn kbd {
  font-size: 0.6rem;
  background: var(--bg, #fff);
  border: 1px solid var(--border, #dde2ef);
  border-radius: 3px;
  padding: 1px 4px;
  color: var(--muted2, #8a93b0);
}
.notes-mode-btn:hover {
  background: var(--bg2, #fff);
  border-color: var(--accent, #3a5a4a);
  color: var(--accent, #3a5a4a);
}

/* Individual block wrapper */
.notes-block {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  border-radius: 8px;
  overflow: visible;
}
.notes-block-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 3px;
}
.notes-block-label {
  font-size: 0.58rem;
  font-family: 'DM Mono', monospace;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted2, #8a93b0);
  flex: 1;
}
.notes-block-label.math { color: var(--accent, #3a5a4a); }
.notes-block-delete {
  padding: 1px 6px;
  font-size: 0.7rem;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  color: var(--muted2, #8a93b0);
}
.notes-block-delete:hover {
  background: rgba(220,38,38,.08);
  color: #dc2626;
  border-color: rgba(220,38,38,.2);
}

/* Math block: MathLive field */
.notes-block-math math-field {
  width: 100%;
  min-height: 44px;
  font-size: 1.05rem;
  border: 1.5px solid var(--border, #dde2ef);
  border-radius: 8px;
  background: var(--bg2, #fff);
  color: var(--text, #1a1a1a);
  padding: 8px 12px;
  display: block;
  box-sizing: border-box;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.notes-block-math math-field:focus-within {
  border-color: var(--accent, #3a5a4a);
  box-shadow: 0 0 0 3px rgba(58,90,74,.10);
}

/* Text block: auto-growing textarea */
.notes-block-text textarea {
  width: 100%;
  min-height: 38px;
  font-size: 0.93rem;
  font-family: 'Outfit', sans-serif;
  line-height: 1.65;
  border: 1.5px solid var(--border, #dde2ef);
  border-radius: 8px;
  background: var(--bg2, #fff);
  padding: 8px 12px;
  resize: none;
  overflow: hidden;
  box-sizing: border-box;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.notes-block-text textarea:focus {
  outline: none;
  border-color: var(--accent, #3a5a4a);
  box-shadow: 0 0 0 3px rgba(58,90,74,.10);
}

/* Floating notes panel needs more height for the block editor */
.floating-notes-panel {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  min-height: 300px;
  max-height: calc(100vh - 120px);
}

/* Move up/down buttons for notes blocks */
.notes-block-move {
  padding: 1px 5px;
  font-size: 0.55rem;
  background: none;
  border: 1px solid var(--border, #dde2ef);
  border-radius: 4px;
  cursor: pointer;
  color: var(--muted, #5a6380);
  line-height: 1;
}
.notes-block-move:hover {
  background: var(--bg3, #f4f6f8);
  border-color: var(--accent, #3a5a4a);
  color: var(--accent, #3a5a4a);
}
.notes-block-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 3px;
}