:root{
  --bg:#ffffff; --fg:#1f2328; --muted:#6b7280; --line:#ececec;
  --card:#fafafa; --hover:#f4f4f4; --accent:#2f3437; --accent-soft:#eef1f2;
  --radius:14px; --side:280px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Sidebar ---------- */
.sidebar{
  position:fixed; top:0; left:0; width:var(--side); height:100vh; overflow-y:auto;
  border-right:1px solid var(--line); background:#fcfcfc; padding:26px 20px 20px;
  display:flex; flex-direction:column; gap:18px;
}
.brand .eyebrow{margin:0 0 8px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.brand h1{margin:0 0 6px;font-size:20px;font-weight:650;line-height:1.25;letter-spacing:-.01em;hyphens:auto}
.brand .exam{margin:0;font-size:13px;color:var(--muted)}
nav{display:flex;flex-direction:column;gap:2px}
.nav-group{margin-top:14px}
.nav-group-title{
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  padding:6px 10px 4px;
}
.nav-link{
  display:block;padding:7px 10px;border-radius:9px;text-decoration:none;color:var(--fg);
  font-size:14.5px;transition:background .12s ease;cursor:pointer;
}
.nav-link:hover{background:var(--hover)}
.nav-link.active{background:var(--accent-soft);font-weight:600}
.side-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:11.5px}

/* ---------- Main ---------- */
.main{margin-left:var(--side);padding:52px 40px 80px;max-width:920px}
.menu-toggle{
  display:none;position:fixed;top:14px;left:14px;z-index:30;
  border:1px solid var(--line);background:#fff;border-radius:9px;width:40px;height:40px;
  font-size:18px;cursor:pointer;
}

/* ---------- Markdown ---------- */
.markdown{font-size:15.5px;color:#24292f}
.markdown h1{font-size:26px;font-weight:650;letter-spacing:-.01em;margin:.2em 0 .6em;padding-bottom:.3em;border-bottom:1px solid var(--line)}
.markdown h2{font-size:20px;font-weight:640;margin:1.6em 0 .5em;padding-bottom:.25em;border-bottom:1px solid var(--line)}
.markdown h3{font-size:17px;font-weight:640;margin:1.4em 0 .4em}
.markdown h4{font-size:15px;font-weight:640;margin:1.2em 0 .3em}
.markdown p{margin:.6em 0}
.markdown ul,.markdown ol{margin:.5em 0;padding-left:1.4em}
.markdown li{margin:.25em 0}
.markdown a{color:#0969da;text-decoration:none}
.markdown a:hover{text-decoration:underline}
.markdown code{background:var(--accent-soft);padding:.12em .4em;border-radius:6px;font-size:.9em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.markdown pre{background:#f6f8fa;border:1px solid var(--line);border-radius:10px;padding:14px 16px;overflow-x:auto}
.markdown pre code{background:none;padding:0}
.markdown blockquote{margin:.8em 0;padding:.2em 1em;border-left:3px solid #d9d9d9;color:var(--muted)}
.markdown table{border-collapse:collapse;width:100%;margin:1em 0;font-size:13.8px;display:block;overflow-x:auto}
.markdown th,.markdown td{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
.markdown th{background:#f6f8fa;font-weight:640}
.markdown tr:nth-child(even) td{background:#fbfbfb}
.markdown hr{border:none;border-top:1px solid var(--line);margin:1.6em 0}
.markdown strong{font-weight:640}
.math-display{margin:1em 0;padding:8px 4px;overflow-x:auto;overflow-y:hidden}
.math-display .katex-display{margin:0}
.markdown .katex{font-size:1.05em}
.card-face .katex,.card-face .katex-display{font-size:1em}

/* ---------- Karteikarten ---------- */
.cards{max-width:680px;margin:0 auto}
.cards-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:12px;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{border:none;background:#fff;padding:7px 14px;font-size:13.5px;cursor:pointer;color:var(--muted)}
.seg button.active{background:var(--accent);color:#fff}
.cards-actions{display:flex;align-items:center;gap:12px}
.cards-actions #shuffleBtn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px 12px;font-size:13.5px;cursor:pointer}
.counter{font-size:13px;color:var(--muted);min-width:52px;text-align:right}
.card{
  border:1px solid var(--line);border-radius:18px;background:var(--card);
  min-height:280px;padding:30px 28px;cursor:pointer;display:flex;flex-direction:column;
  gap:14px;transition:border-color .15s ease,box-shadow .15s ease;
}
.card:hover{border-color:#dcdcdc;box-shadow:0 2px 14px rgba(0,0,0,.03)}
.card-cat{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.card-face{font-size:17px;line-height:1.55;flex:1}
.card-face.answer{font-size:15px;line-height:1.6}
.card-face strong{font-weight:650}
.card-face code{background:var(--accent-soft);padding:.1em .35em;border-radius:5px;font-size:.9em}
.card-hint{font-size:12.5px;color:var(--muted);text-align:center}
.cards-nav{display:flex;justify-content:center;gap:10px;margin-top:20px}
.cards-nav button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 18px;font-size:14px;cursor:pointer}
.cards-nav button:hover{background:var(--hover)}
.cards-nav #flipBtn{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  .menu-toggle{display:block}
  .sidebar{transform:translateX(-100%);transition:transform .2s ease;z-index:20;box-shadow:0 0 40px rgba(0,0,0,.08)}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0;padding:64px 20px 60px}
}