:root{
  --bg:#f4f6f7; --surface:#ffffff; --surface-2:#eef2f3; --text:#16242a; --muted:#5c7079;
  --line:#dbe3e6; --primary:#0d6e6e; --primary-d:#0a5757; --accent:#c9822a;
  --good:#1f9d55; --good-bg:#e6f6ec; --again:#d64545; --again-bg:#fbe9e9;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 6px 24px rgba(0,0,0,.06);
  --radius:16px; --maxw:1040px;
}
:root[data-theme="dark"]{
  --bg:#0e1618; --surface:#152227; --surface-2:#1c2d33; --text:#e7eef0; --muted:#8ea6ae;
  --line:#26383f; --primary:#3fb6ac; --primary-d:#2f9088; --accent:#e0a75a;
  --good:#3bcb7f; --good-bg:#123023; --again:#f16b6b; --again-bg:#341717;
  --shadow:0 1px 3px rgba(0,0,0,.3),0 8px 30px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased; padding-bottom:60px;
}
h1,h2,h3{margin:0 0 .4em}
a{color:var(--primary)}
.muted{color:var(--muted)}
.hidden{display:none !important}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:20; background:var(--surface);
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; border-bottom:1px solid var(--line);
  padding-top:calc(10px + env(safe-area-inset-top));
}
.brand{display:flex; align-items:center; gap:12px}
.logo{font-size:30px}
.topbar h1{font-size:19px; margin:0; letter-spacing:-.01em}
.subtitle{font-size:12px; color:var(--muted)}
.icon-btn{background:var(--surface-2); border:1px solid var(--line); border-radius:10px; font-size:18px; width:40px; height:40px; cursor:pointer; color:var(--text)}

/* Tabs */
.tabs{
  position:sticky; top:61px; z-index:19; display:flex; gap:4px; overflow-x:auto;
  background:var(--bg); padding:10px 12px; border-bottom:1px solid var(--line);
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  white-space:nowrap; border:1px solid var(--line); background:var(--surface);
  color:var(--muted); padding:8px 14px; border-radius:999px; font-size:14px; font-weight:600;
  cursor:pointer; transition:.15s;
}
.tab.active{background:var(--primary); color:#fff; border-color:var(--primary)}

main{max-width:var(--maxw); margin:0 auto; padding:18px 14px}
.view{display:none; animation:fade .25s}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1}}

.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.panel h2{font-size:20px}

/* Setup */
.setup-block{margin:20px 0}
.setup-label{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:10px}
.cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px}
.cat-chip{display:flex; align-items:center; gap:9px; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:10px 12px; cursor:pointer; font-size:14px; user-select:none}
.cat-chip input{accent-color:var(--primary); width:17px; height:17px}
.cat-chip .cnt{margin-left:auto; font-size:12px; color:var(--muted); background:var(--surface); padding:1px 8px; border-radius:999px}
.cat-quick{margin-top:8px; display:flex; gap:8px}
.mini-btn{background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:6px 12px; font-size:13px; cursor:pointer; color:var(--text); font-weight:600}
.mini-btn.danger{color:var(--again); border-color:var(--again)}
.mode-options{display:flex; flex-direction:column; gap:8px}
.radio{display:flex; gap:10px; align-items:flex-start; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:11px 14px; cursor:pointer; font-size:14px}
.radio input{accent-color:var(--primary); margin-top:3px}
.switch-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 2px; font-size:14px}
.switch-row select{background:var(--surface-2); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:6px 10px; font-size:14px}
.primary-btn{background:var(--primary); color:#fff; border:none; border-radius:12px; padding:12px 20px; font-size:15px; font-weight:700; cursor:pointer; transition:.15s}
.primary-btn:hover{background:var(--primary-d)}
.primary-btn.big{width:100%; padding:15px; font-size:16px}
.setup-stats{margin-top:14px; text-align:center; font-size:14px; color:var(--muted)}

/* Session */
.session-head{display:flex; align-items:center; gap:12px; margin-bottom:16px}
.progress-wrap{flex:1; height:8px; background:var(--surface-2); border-radius:999px; overflow:hidden}
.progress-bar{height:100%; width:0; background:var(--primary); transition:width .3s}
.counter{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; min-width:52px; text-align:right}

.flashcard{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:28px 24px 46px; min-height:320px; cursor:pointer;
  display:flex; flex-direction:column;
}
.card-cat{font-size:12px; font-weight:700; color:var(--primary); text-transform:uppercase; letter-spacing:.04em; margin-bottom:16px}
.card-face{flex:1}
.card-front{font-size:21px; font-weight:600; line-height:1.4; display:flex; align-items:center}
.card-back{font-size:16px; line-height:1.6}
.card-back h4{margin:.2em 0 .5em; color:var(--primary)}
.card-back ul{margin:.4em 0; padding-left:1.2em}
.card-back li{margin:.25em 0}
.card-back strong{color:var(--text); font-weight:700}
.card-back .divider{height:1px; background:var(--line); margin:14px 0}
.card-back .q-recall{font-size:14px; color:var(--muted); font-style:italic; margin-bottom:6px}
.flip-hint{position:absolute; bottom:16px; left:0; right:0; text-align:center; font-size:12px; color:var(--muted)}

.card-actions{margin-top:16px}
.card-actions.two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grade-btn{border:none; border-radius:12px; padding:16px; font-size:16px; font-weight:700; cursor:pointer}
.grade-btn.again{background:var(--again-bg); color:var(--again)}
.grade-btn.good{background:var(--good-bg); color:var(--good)}
.grade-btn:active{transform:scale(.97)}

.done-panel{text-align:center}
.done-emoji{font-size:52px}

/* Reference lists */
.search-bar{margin-bottom:14px}
.search-bar input{width:100%; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:13px 16px; font-size:15px; color:var(--text)}
.ref-list{display:flex; flex-direction:column; gap:10px}
.ref-item{background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow)}
.ref-head{display:flex; align-items:center; gap:12px; padding:15px 18px; cursor:pointer}
.ref-badge{background:var(--primary); color:#fff; font-weight:700; font-size:13px; padding:4px 10px; border-radius:8px; white-space:nowrap}
.ref-title{font-weight:600; font-size:15px}
.ref-sub{font-size:12.5px; color:var(--muted)}
.ref-arrow{margin-left:auto; color:var(--muted); transition:.2s}
.ref-item.open .ref-arrow{transform:rotate(90deg)}
.ref-body{display:none; padding:0 18px 18px; font-size:14px}
.ref-item.open .ref-body{display:block}
.ref-body dl{margin:0}
.ref-body dt{font-weight:700; color:var(--primary); font-size:12.5px; text-transform:uppercase; letter-spacing:.03em; margin-top:12px}
.ref-body dd{margin:2px 0 0}
.ref-body .merke{background:var(--surface-2); border-left:3px solid var(--accent); padding:8px 12px; border-radius:8px; margin-top:12px; font-size:13.5px}
.ref-body ul{margin:.3em 0; padding-left:1.2em}

/* Recht */
.recht-section{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px; margin-bottom:14px; box-shadow:var(--shadow)}
.recht-section h2{font-size:18px; color:var(--primary)}
.recht-section h3{font-size:15px; margin-top:18px}
.vorsorge-grid{display:grid; grid-template-columns:1fr; gap:12px; margin-top:10px}
.vorsorge-card{border:1px solid var(--line); border-radius:12px; padding:14px; background:var(--surface-2)}
.vorsorge-card h4{margin:0 0 6px; color:var(--primary)}
.vorsorge-card .lbl{font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; margin-top:8px}
.pill-list{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.pill{background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:3px 10px; font-size:12.5px}
.anhang-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin-top:10px}
.law-card{border:1px solid var(--line); border-radius:12px; padding:14px; background:var(--surface); margin-bottom:10px}
.law-card .law-kurz{display:inline-block; background:var(--primary); color:#fff; font-weight:700; font-size:12px; padding:2px 9px; border-radius:7px}
.law-card .law-name{font-size:12.5px; color:var(--muted); margin-left:8px}
.law-card .merke{background:var(--surface-2); border-left:3px solid var(--accent); padding:7px 11px; border-radius:8px; margin-top:8px; font-size:13px}

/* Stats */
.stat-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin:14px 0 24px}
.stat-card{background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:16px; text-align:center}
.stat-num{font-size:30px; font-weight:800; color:var(--primary); font-variant-numeric:tabular-nums}
.stat-lbl{font-size:12.5px; color:var(--muted); margin-top:2px}
.cat-prog-row{margin:10px 0}
.cat-prog-row .cp-top{display:flex; justify-content:space-between; font-size:13.5px; margin-bottom:4px}
.cp-bar{height:9px; background:var(--surface-2); border-radius:999px; overflow:hidden}
.cp-fill{height:100%; background:var(--good)}
.danger-zone{margin-top:24px; padding-top:16px; border-top:1px solid var(--line)}

.foot{max-width:var(--maxw); margin:24px auto 0; padding:16px 14px; font-size:12px; color:var(--muted); text-align:center; border-top:1px solid var(--line)}

.loading{text-align:center; padding:40px; color:var(--muted)}

@media(max-width:520px){
  .card-front{font-size:19px}
  .topbar h1{font-size:17px}
}