:root {
  /* Farben */
  --bg: #EAE1CC;
  --bg-soft: #F1E9D8;
  --surface: #FAF5EA;
  --surface-alt: #F0E8D6;
  --ink: #382F24;
  --ink-soft: #7A7061;
  --ink-faint: #A69C8B;
  --line: #DDD0B0;
  --sage: #7E9070;
  --sage-dark: #5C6F51;
  --sage-tint: #E3E9DC;
  --clay: #BE8C57;
  --clay-dark: #9A6C39;
  --clay-tint: #F2E4CC;
  --rust: #A65F49;
  --rust-tint: #F2DED7;
  --dusk: #6E85A0;
  --dusk-tint: #E2E7EE;
  --plum: #8C6B87;
  --plum-tint: #EBE0E7;
  --shadow-sm: 0 2px 8px rgba(56,47,36,0.06);
  --shadow-md: 0 10px 30px rgba(56,47,36,0.10);
  --radius: 20px;

  /* TYPOGRAFIE SYSTEM - EINHEITLICH */
  /* Haupttitel (Page Headings) */
  --fs-h1: 32px;
  --fw-h1: 600;
  --ff-h1: 'Fraunces', serif;

  /* Sektion-Überschriften */
  --fs-h2: 20px;
  --fw-h2: 600;
  --ff-h2: 'Fraunces', serif;

  /* Unter-Überschriften */
  --fs-h3: 18px;
  --fw-h3: 600;
  --ff-h3: 'Fraunces', serif;

  /* Eyebrow/Label oben */
  --fs-eyebrow: 11px;
  --fw-eyebrow: 500;
  --ff-eyebrow: 'IBM Plex Mono', monospace;
  --ls-eyebrow: 1.5px;

  /* Standard Körpertext */
  --fs-body: 14px;
  --fw-body: 400;
  --ff-body: 'Karla', sans-serif;

  /* Kleine Labels/Tags */
  --fs-small: 12px;
  --fw-small: 600;

  /* Sehr klein (Mono) */
  --fs-micro: 10.5px;
  --ff-micro: 'IBM Plex Mono', monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 800px at 90% -10%, rgba(190,140,87,0.07), transparent 60%),
    radial-gradient(1000px 700px at -10% 110%, rgba(126,144,112,0.08), transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: 'Karla', sans-serif;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--clay-tint); }
button { font-family: inherit; }
.app { display: flex; min-height: 100vh; }
/* Sidebar */
.sidebar {
  width: 230px;
  flex-shrink: 0;
  background: var(--surface-alt);
  border-right: 1px solid var(--line);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.brand {
  font-family: 'Fraunces', serif !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: 32px !important;
  color: var(--ink) !important;
  padding: 8px 0 20px 0 !important;
  letter-spacing: -0.3px !important;
  line-height: 1 !important;
  margin: 0 !important;
}
.brand span { color: var(--sage-dark); font-style: normal; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--ink-soft);
  font-weight: 700;
  font-size: var(--fs-body);
  transition: background .15s ease, color .15s ease, transform .1s ease;
  border: 1px solid transparent;
  user-select: none;
}
.nav-item:hover { background: var(--bg-soft); color: var(--ink); }
.nav-item.active {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.nav-item .ico { width: 20px; height: 20px; flex-shrink: 0; color: var(--ink-faint); }
.nav-item.active .ico { color: var(--clay-dark); }
.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  width: 4px;
  height: 22px;
  border-radius: 0 4px 4px 0;
  background: var(--sage);
  transform: translateX(-16px);
}
.sidebar-foot {
  margin-top: auto;
  padding: 14px 14px 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink-faint);
  border-top: 1px dashed var(--line);
}
/* Lernuhr */
.lernuhr-widget {
  margin-top: 20px;
  padding: 16px 14px 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: box-shadow .2s ease;
}
.lernuhr-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--clay-dark);
  font-weight: 600;
  text-align: center;
}
.lernuhr-clock { position: relative; width: 124px; height: 124px; }
.lernuhr-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.lernuhr-track { fill: none; stroke: var(--bg-soft); stroke-width: 7; }
.lernuhr-progress {
  fill: none;
  stroke: var(--sage);
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear, stroke .3s ease;
}
.lernuhr-time {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 21px;
  color: var(--ink);
  letter-spacing: .5px;
}
.lernuhr-widget.running { box-shadow: 0 0 0 3px var(--sage-tint), var(--shadow-sm); }
.lernuhr-widget.done .lernuhr-progress { stroke: var(--rust); }
.lernuhr-widget.done .lernuhr-time { color: var(--rust); animation: lernuhrPulse 1s ease-in-out infinite; }
@keyframes lernuhrPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.lernuhr-controls { display: flex; align-items: center; gap: 10px; }
.lernuhr-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--sage);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, transform .1s ease;
}
.lernuhr-btn:hover { background: var(--sage-dark); }
.lernuhr-btn:active { transform: scale(.92); }
.lernuhr-btn.ghost { background: var(--bg-soft); color: var(--ink-soft); width: 32px; height: 32px; font-size: 14px; }
.lernuhr-btn.ghost:hover { background: var(--surface-alt); color: var(--ink); }
.lernuhr-presets { display: flex; gap: 6px; }
.lernuhr-preset-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 4px 9px;
  border-radius: 20px;
  font-size: 10.5px;
  cursor: pointer;
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
  transition: background .15s ease, color .15s ease;
}
.lernuhr-preset-btn:hover { background: var(--bg-soft); }
.lernuhr-preset-btn.active { background: var(--ink); color: var(--surface); border-color: var(--ink); }
/* Main / common */
.main {
  flex: 1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 34px clamp(28px, 4vw, 70px) 60px !important;
}
.main > .view { width: min(100%, 1450px) !important; margin: 0 auto !important; }
.view { display: none; animation: fadeIn .25s ease; }
.view.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.view-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 26px;
  flex-wrap: wrap;
  gap: 10px;
}
.view-head > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 0;
}
#view-calendar .view-head {
  flex-direction: column !important;
}
.view-title {
  font-family: var(--ff-h1);
  font-weight: var(--fw-h1);
  font-size: var(--fs-h1);
  margin: 0;
}
.view-sub {
  color: var(--ink-soft);
  font-size: var(--fs-eyebrow);
  margin-top: 4px;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-eyebrow);
  font-family: var(--ff-eyebrow);
}
.eyebrow {
  font-family: var(--ff-eyebrow);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--clay-dark);
  font-weight: var(--fw-eyebrow);
}
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 22px; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sage);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: var(--fs-body);
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.btn:hover { background: var(--sage-dark); }
.btn:active { transform: scale(.97); }
.btn.ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); }
.btn.ghost:hover { background: var(--bg-soft); color: var(--ink); }
.btn.danger { background: transparent; color: var(--rust); border: 1px solid var(--rust-tint); }
.btn.danger:hover { background: var(--rust-tint); }
.btn.small { padding: 7px 12px; font-size: 12.5px; border-radius: 8px; }
.icon-btn { background: none; border: none; cursor: pointer; color: var(--ink-faint); padding: 6px; border-radius: 8px; display: flex; align-items: center; }
.icon-btn:hover { background: var(--bg-soft); color: var(--rust); }
input[type=text], input[type=date], input[type=time], input[type=number], textarea, select {
  font-family: var(--ff-body);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 13px;
  font-size: var(--fs-body);
  color: var(--ink);
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}
input[type=text]:focus, input[type=date]:focus, input[type=time]:focus, input[type=number]:focus, textarea:focus, select:focus { border-color: var(--sage); background: var(--surface); }
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
label.chk-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); font-weight: 600; cursor: pointer; }
label.chk-label input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--sage); cursor: pointer; }
.empty { text-align: center; padding: 34px 16px; color: var(--ink-soft); }
.empty .emoji { font-size: 30px; display: block; margin-bottom: 10px; }
.empty.compact { padding: 16px 10px; font-size: 13px; }
.empty.compact .emoji { font-size: 22px; margin-bottom: 6px; }
.card-head-row { display: flex; align-items: center; justify-content: space-between; }
.card-head-row .link-btn { background: none; border: none; cursor: pointer; color: var(--sage-dark); font-size: 12px; font-weight: 700; font-family: 'IBM Plex Mono', monospace; }
.card-head-row .link-btn:hover { text-decoration: underline; }
/* Basic lists / stats */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.stat-num {
  font-family: var(--ff-h1);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
}
.stat-label {
  color: var(--ink-soft);
  font-size: var(--fs-small);
  font-weight: var(--fw-small);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
}
.dash-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
.dash-grid-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.mini-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mini-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  background: var(--bg-soft);
  font-size: var(--fs-body);
}
.mini-row .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); flex-shrink: 0; }
.mini-check { width: 17px; height: 17px; border-radius: 5px; border: 2px solid var(--ink-faint); cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all .15s ease; }
.mini-check.done { background: var(--sage); border-color: var(--sage); }
.mini-check.done::after { content: "✓"; color: #fff; font-size: 10px; font-weight: 700; }
/* Dashboard */
#view-dashboard { --dash-cream: #faf5ea; --dash-cream-soft: #f3ecdd; --dash-cream-deep: #eee4cf; }
.dash-new-head { margin-bottom: 24px; }
.dash-new-head .view-title { margin-top: 5px; }
.dash-new-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.dash-new-stat { min-height: 112px; display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.dash-stat-icon { width: 45px; height: 45px; flex: 0 0 45px; display: grid; place-items: center; border-radius: 14px; background: var(--sage-tint); color: var(--sage-dark); font-size: 19px; font-weight: 700; }
.dash-stat-icon.sage { background: var(--sage-tint); color: var(--sage-dark); }
.dash-stat-number {
  font-family: var(--ff-h1);
  font-size: 27px;
  line-height: 1.05;
  font-weight: 600;
  color: var(--ink);
}
.dash-stat-next { font-size: 17px; }
.dash-stat-title {
  font-size: var(--fs-small);
  font-weight: var(--fw-small);
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
}
.dash-stat-small {
  margin-top: 3px;
  color: var(--ink-faint);
  font-size: var(--fs-micro);
  font-family: var(--ff-eyebrow);
}
.dash-stat-progress { width: 100%; height: 5px; margin-top: 7px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; }
.dash-stat-progress div { height: 100%; border-radius: inherit; background: var(--sage); }
.dash-new-card { background: var(--surface); border: 1px solid var(--line); border-radius: 19px; padding: 20px; box-shadow: var(--shadow-sm); min-width: 0; }
.dash-section-title {
  font-family: var(--ff-h2);
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  color: var(--ink);
}
.dash-section-date {
  color: var(--ink-soft);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  margin-top: 3px;
  margin-bottom: 15px;
  text-transform: uppercase;
  font-weight: var(--fw-eyebrow);
  font-family: var(--ff-eyebrow);
}
.dash-card-title {
  font-family: var(--ff-h2);
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  color: var(--ink);
  margin: 0 0 7px 0;
}
.dash-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.dash-card-header .link-btn, #view-dashboard .link-btn {
  border: 0;
  background: none;
  color: var(--sage-dark);
  cursor: pointer;
  font-size: var(--fs-micro);
  font-weight: 700;
  font-family: var(--ff-eyebrow);
  letter-spacing: var(--ls-eyebrow);
}
.dash-new-main-grid { display: grid; grid-template-columns: minmax(230px,.78fr) minmax(300px,1.05fr) minmax(300px,1fr); gap: 16px; align-items: stretch; }
.dash-today-inner { display: flex; flex-direction: column; gap: 10px; }
.dash-sub-card { padding: 14px; border-radius: 13px; background: var(--bg-soft); border: 1px solid rgba(221,208,176,.6); }
.dash-sub-card .mini-list { margin-top: 9px; }
.dash-sub-card .mini-row { background: transparent; padding: 6px 0; }
.dash-today-tasks { margin-top: 9px; display: flex; flex-direction: column; gap: 5px; }
.dash-today-task { display: flex; align-items: center; gap: 8px; min-height: 28px; font-size: 12px; }
.dash-today-task small { margin-left: auto; color: var(--clay-dark); }
.dash-add-link { border: 0; background: none; color: var(--sage-dark); font-weight: 700; font-size: 11.5px; cursor: pointer; padding: 9px 0 0; }
.dash-task-tabs {
  display: flex;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}
.dash-task-tabs span {
  padding: 8px 2px;
  font-size: var(--fs-small);
  font-weight: var(--fw-small);
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  font-family: var(--ff-eyebrow);
}
.dash-task-tabs span.active { color: var(--sage-dark); border-bottom: 2px solid var(--sage); }
.dash-task-list { min-height: 190px; }
#view-dashboard .dash-task-list .mini-row { background: transparent; border-bottom: 1px solid var(--bg-soft); border-radius: 0; padding: 9px 2px; }
.dash-inline-add { display: grid; grid-template-columns: 1fr 34px; gap: 6px; margin-top: 10px; }
.dash-inline-add input { width: 100%; padding: 8px 10px; font-size: 11.5px; }
.dash-inline-add button { border: 0; border-radius: 9px; background: var(--sage); color: white; cursor: pointer; font-size: 18px; }
.dash-new-bottom-grid { display: grid; grid-template-columns: 1.15fr .8fr 1fr; gap: 16px; margin-top: 16px; }
.dash-learning-progress { display: flex; align-items: center; gap: 22px; margin-top: 18px; }
.dash-progress-circle { width: 120px; height: 120px; flex: 0 0 120px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--sage) var(--dash-progress,0%), var(--bg-soft) 0); }
.dash-progress-circle-inner { width: 96px; height: 96px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--surface); text-align: center; }
.dash-progress-circle-inner strong { font-family: 'Fraunces', serif; font-size: 20px; }
.dash-progress-circle-inner span { margin-top: 3px; font-size: 9.5px; color: var(--ink-faint); }
.dash-progress-info { flex: 1; min-width: 0; }
.dash-progress-info strong { display: block; margin: 7px 0 9px; font-family: 'Fraunces', serif; font-size: 17px; }
.dash-progress-info small { color: var(--ink-faint); font-size: 10.5px; }
.dash-progress-line { width: 100%; height: 6px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; margin-bottom: 8px; }
.dash-progress-line div { height: 100%; background: var(--sage); border-radius: inherit; }
.dash-card-flash { position: relative; overflow: hidden; }
.dash-flash-number { margin-top: 25px; max-width: 65%; font-family: 'Fraunces', serif; font-size: 25px; line-height: 1.2; }
.dash-flash-visual { position: absolute; right: 25px; bottom: 24px; transform: rotate(-10deg); font-size: 72px; color: var(--clay); opacity: .35; }
#view-dashboard .week-bars { height: 155px; margin-top: 12px; }
html:not(.dark) #view-dashboard .week-bar-track { background: #f1e8d7; }
html.dark #view-dashboard .week-bar-track { background: var(--bg-soft); }
.dash-motivation { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 16px; padding: 14px 20px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(90deg,var(--sage-tint),var(--surface)); color: var(--ink-soft); font-size: 11.5px; }
/* Mini calendar */
.mini-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mini-cal-nav h3 {
  font-family: var(--ff-h3);
  font-size: var(--fs-h3);
  margin: 0;
  text-transform: capitalize;
  font-weight: var(--fw-h3);
}
.mini-cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.mini-cal-dow {
  text-align: center;
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--ink-faint);
  padding-bottom: 4px;
  font-family: var(--ff-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
}
.mini-cal-day {
  aspect-ratio: 1;
  border-radius: 7px;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--fs-body);
  color: var(--ink);
  position: relative;
  background: var(--bg-soft);
  transition: background .15s ease;
}
.mini-cal-day.blank { background: transparent; cursor: default; }
.mini-cal-day:hover:not(.blank) { background: var(--sage-tint); }
.mini-cal-day.today { border-color: var(--clay); font-weight: 700; }
.mini-cal-day .evt-dots { bottom: 3px; }
.mini-cal-day .evt-dot { width: 4px; height: 4px; }
html:not(.dark) .dash-calendar-card .mini-cal-day { background: #f4ecde; border-radius: 8px; }
html.dark .dash-calendar-card .mini-cal-day { background: var(--bg-soft); border-radius: 8px; }
.dash-calendar-card .mini-cal-day.today { background: var(--sage); color: #fff; border-color: var(--sage); }
.dash-calendar-card .mini-cal-day.today .evt-dot { background: #fff; }
.dash-calendar-card .mini-cal-nav { margin-top: 2px; margin-bottom: 12px; }
/* Notes */
.notes-layout { display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: start; }
.notes-list { display: flex; flex-direction: column; gap: 8px; }
.note-item { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.note-item:hover { border-color: var(--sage); }
.note-item.active { background: var(--sage-tint); border-color: var(--sage); }
.note-item h4 {
  margin: 0 0 3px;
  font-size: var(--fs-h3);
  font-family: var(--ff-h3);
  font-weight: var(--fw-h3);
}
.note-item p {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.note-item .note-folder-tag { display: inline-block; margin-top: 6px; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; font-family: 'IBM Plex Mono', monospace; background: var(--sage-tint); color: var(--sage-dark); }
.note-editor textarea { width: 100%; min-height: 360px; resize: vertical; line-height: 1.6; }
.note-title-input {
  width: 100%;
  font-family: var(--ff-h1);
  font-size: 22px;
  font-weight: var(--fw-h1);
  padding: 8px 12px;
  margin-bottom: 10px;
}
.note-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; }
.note-meta { font-size: 11.5px; color: var(--ink-faint); font-family: 'IBM Plex Mono', monospace; }
.note-folder-select { font-size: 12.5px; padding: 7px 10px; }
.note-list-tools { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 12px; }
.note-list-tools input { grid-column: 1/-1; width: 100%; }
.note-word-count { text-align: right; font: 10px 'IBM Plex Mono'; color: var(--ink-faint); margin-top: 6px; }
.favorite-btn { font-size: 18px; }
.favorite-btn.active { color: #c9a227; }
/* Calendar */
.cal-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 10px; flex-wrap: wrap; }
.cal-view-switch { display: flex; gap: 6px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 4px; }
.cal-view-btn { background: transparent; border: none; color: var(--ink-soft); padding: 6px 12px; border-radius: 7px; font-size: 12px; font-weight: 700; cursor: pointer; }
.cal-view-btn.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.cal-legend-item { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-soft); font-weight: 600; }
.cal-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cal-legend-dot.abgabe, .evt-dot.abgabe { background: var(--rust); }
.cal-legend-dot.vorlesung, .evt-dot.vorlesung, .evt-dot.kurs { background: var(--sage-dark); }
.cal-legend-dot.uebung, .evt-dot.uebung { background: var(--sage); }
.cal-legend-dot.seminar, .evt-dot.seminar { background: var(--dusk); }
.cal-legend-dot.klausur, .evt-dot.klausur, .evt-dot.test { background: var(--clay-dark); }
.cal-legend-dot.praktikum, .evt-dot.praktikum { background: var(--plum); }
.cal-legend-dot.lerngruppe, .evt-dot.lerngruppe { background: var(--clay); }
.cal-legend-dot.termin, .evt-dot.termin { background: var(--ink-faint); }
.cal-nav h3 {
  font-family: var(--ff-h2);
  font-size: var(--fs-h2);
  margin: 0;
  text-transform: capitalize;
  font-weight: var(--fw-h2);
}
.cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; }
.cal-dow {
  text-align: center;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink-faint);
  padding-bottom: 6px;
  font-family: var(--ff-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
}
.cal-day {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--fs-body);
  color: var(--ink);
  position: relative;
  background: var(--bg-soft);
  transition: background .15s ease;
}
.cal-day.blank { background: transparent; cursor: default; }
.cal-day:hover:not(.blank) { background: var(--sage-tint); }
.cal-day.today { border-color: var(--clay); font-weight: 700; }
.cal-day.selected { background: var(--sage); color: #fff; }
.evt-dots { position: absolute; bottom: 6px; display: flex; gap: 3px; }
.evt-dot { border-radius: 50%; background: var(--ink-faint); }
.cal-day .evt-dot { width: 5px; height: 5px; }
.cal-day.selected .evt-dot { background: #fff; }
.cal-day-count { position: absolute; top: 5px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--clay); color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cal-day.selected .cal-day-count { background: #fff; color: var(--sage-dark); }
.day-panel h4 {
  font-family: var(--ff-h3);
  margin: 0 0 12px;
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
}
.event-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.event-form input, .event-form select { width: 100%; }
.event-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  background: var(--bg-soft);
  border-radius: 9px;
  margin-bottom: 7px;
  font-size: var(--fs-body);
}
.event-row .time {
  font-family: var(--ff-eyebrow);
  font-size: var(--fs-micro);
  color: var(--clay-dark);
  font-weight: 600;
}
.event-row .txt { flex: 1; }
.event-row .txt small {
  display: block;
  color: var(--ink-soft);
  font-size: var(--fs-micro);
  margin-top: 2px;
}
.event-row .recur-ico { color: var(--ink-faint); font-size: 12px; }
.evt-type-tag { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 20px; font-family: 'IBM Plex Mono', monospace; flex-shrink: 0; }
.evt-type-tag.abgabe { background: var(--rust-tint); color: var(--rust); }
.evt-type-tag.vorlesung, .evt-type-tag.kurs { background: var(--sage-tint); color: var(--sage-dark); }
.evt-type-tag.uebung { background: var(--sage-tint); color: var(--sage); }
.evt-type-tag.seminar { background: var(--dusk-tint); color: var(--dusk); }
.evt-type-tag.klausur, .evt-type-tag.test { background: var(--clay-tint); color: var(--clay-dark); }
.evt-type-tag.praktikum { background: var(--plum-tint); color: var(--plum); }
.evt-type-tag.lerngruppe { background: var(--clay-tint); color: var(--clay); }
.evt-type-tag.termin { background: var(--bg-soft); color: var(--ink-soft); border: 1px solid var(--line); }
.upcoming-title {
  margin: 22px 0 10px;
  font-size: var(--fs-small);
  font-weight: var(--fw-small);
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  font-family: var(--ff-eyebrow);
}
.day-events-empty { padding: 12px; border-radius: 9px; background: var(--bg-soft); color: var(--ink-soft); font-size: 13px; text-align: center; }
/* Week view */
.week-grid { display: grid; grid-template-columns: 44px repeat(7,1fr); gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.week-head { display: grid; grid-template-columns: 44px repeat(7,1fr); border-bottom: 1px solid var(--line); }
.week-head-cell {
  padding: 8px 4px;
  text-align: center;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink-soft);
  border-left: 1px solid var(--line);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
}
.week-head-cell:first-child { border-left: none; }
.week-head-cell.today { color: var(--clay-dark); }
.week-head-cell .wd-num {
  font-family: var(--ff-h3);
  font-size: 16px;
  display: block;
  margin-top: 2px;
  font-weight: var(--fw-h3);
}
.week-hour-label { font-size: 9.5px; color: var(--ink-faint); text-align: right; padding-right: 5px; font-family: 'IBM Plex Mono', monospace; position: relative; top: -6px; }
.week-hour-row { display: contents; }
.week-col { border-left: 1px solid var(--line); border-top: 1px solid var(--bg-soft); min-height: 38px; position: relative; cursor: pointer; }
.week-col:hover { background: var(--bg-soft); }
.week-evt { position: absolute; left: 2px; right: 2px; border-radius: 6px; padding: 2px 5px; font-size: 10.5px; font-weight: 700; color: #fff; overflow: hidden; line-height: 1.25; cursor: pointer; z-index: 2; }
.week-evt.abgabe { background: var(--rust); }
.week-evt.vorlesung { background: var(--sage-dark); }
.week-evt.uebung { background: var(--sage); }
.week-evt.seminar { background: var(--dusk); }
.week-evt.klausur { background: var(--clay-dark); }
.week-evt.praktikum { background: var(--plum); }
.week-evt.lerngruppe { background: var(--clay); }
.week-evt.termin { background: var(--ink-faint); }
.week-allday-row { display: grid; grid-template-columns: 44px repeat(7,1fr); border-bottom: 1px solid var(--line); min-height: 26px; }
.week-allday-cell { border-left: 1px solid var(--line); padding: 2px; display: flex; flex-direction: column; gap: 2px; }
.week-allday-cell:first-child { border-left: none; }
.week-allday-chip { background: var(--bg-soft); border-radius: 5px; padding: 2px 5px; font-size: 9.5px; font-weight: 700; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Calendar redesign additions */
#view-calendar .lr-cal-layout { width: 100% !important; grid-template-columns: minmax(0,1fr) 300px !important; }
html:not(.dark) #view-calendar { --lr-cal-surface: #faf4e9 !important; --lr-cal-soft: #f3ebdd !important; }
html:not(.dark) #view-calendar .lr-cal-main,
html:not(.dark) #view-calendar .lr-cal-side,
html:not(.dark) #view-calendar .lr-cal-toolbar,
html:not(.dark) #view-calendar .lr-cal-dow-row,
html:not(.dark) #view-calendar .lr-cal-month-grid,
html:not(.dark) #view-calendar .lr-cal-legend { background: #faf4e9 !important; }
html:not(.dark) #view-calendar .lr-cal-day { background: #fcf7ee !important; }
html:not(.dark) #view-calendar .lr-cal-day.other-month { background: #f6efe3 !important; }
html:not(.dark) #view-calendar .lr-cal-day:hover { background: #f3ecdf !important; }
html:not(.dark) #view-calendar .lr-time-scroll,
html:not(.dark) #view-calendar .lr-time-grid,
html:not(.dark) #view-calendar .lr-time-corner,
html:not(.dark) #view-calendar .lr-time-day-head,
html:not(.dark) #view-calendar .lr-time-label,
html:not(.dark) #view-calendar .lr-time-slot { background: #fcf7ee !important; }
html.dark #view-calendar .lr-time-corner,
html.dark #view-calendar .lr-time-day-head,
html.dark #view-calendar .lr-time-label,
html.dark #view-calendar .lr-time-slot { background: var(--bg-soft) !important; }
#view-calendar #cal-week-wrap, #view-calendar #cal-day-wrap { height: auto !important; min-height: 0 !important; overflow: visible !important; }
#view-calendar #cal-week-wrap .lr-time-scroll, #view-calendar #cal-day-wrap .lr-time-scroll { height: auto !important; min-height: 0 !important; overflow: visible !important; }
#view-calendar #cal-week-wrap .lr-time-grid, #view-calendar #cal-day-wrap .lr-time-grid { height: auto !important; grid-template-rows: 40px repeat(24,42px) !important; }
#view-calendar .lr-time-label { font-size: 9px !important; padding-top: 8px !important; }
#view-calendar .lr-time-event { min-height: 24px !important; padding: 4px 6px !important; font-size: 8.5px !important; }
/* Flashcards */
.fc-head { display: flex; gap: 10px; margin-bottom: 18px; }
.folder-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.folder-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--line); color: var(--ink-soft); padding: 6px 13px; border-radius: 20px; font-size: 12.5px; cursor: pointer; font-weight: 600; transition: background .15s ease, color .15s ease; }
.folder-chip:hover { background: var(--bg-soft); }
.folder-chip.active { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.folder-chip .del-x { opacity: 0; transition: opacity .15s ease; font-size: 10px; }
.folder-chip:hover .del-x { opacity: .7; }
.folder-chip .del-x:hover { opacity: 1 !important; color: var(--rust); }
.folder-add { display: flex; gap: 8px; margin-bottom: 18px; }
.folder-add input { flex: 1; max-width: 240px; }
.fc-create-form { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 10px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px dashed var(--line); }
.fc-create-form input, .fc-create-form select { width: 100%; }
.fc-manage-list { display: flex; flex-direction: column; gap: 10px; }
.fc-row { display: grid; grid-template-columns: 1fr 30px 1fr 130px 34px; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.fc-row .divider { text-align: center; color: var(--ink-faint); font-size: 18px; }
.fc-row input { width: 100%; }
.fc-mode-switch { display: flex; gap: 10px; background: var(--surface-alt); border: 1px solid var(--line); border-radius: 16px; padding: 8px; margin-bottom: 24px; }
.fc-mode-btn-item { flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px; background: transparent; border: 1px solid transparent; color: var(--ink-soft); padding: 14px 16px; border-radius: 11px; font-size: 15px; cursor: pointer; font-weight: 700; transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.fc-mode-ico { width: 19px; height: 19px; flex-shrink: 0; }
.fc-mode-btn-item:hover { background: var(--bg-soft); color: var(--ink); }
.fc-mode-btn-item.active { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.fc-mode-btn-item[data-mode="game"].active, .fc-mode-btn-item[data-mode="game"].active .fc-mode-ico { color: var(--sage-dark); }
.fc-tools-row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
#view-cards #fc-manage-wrap { display: flex; flex-direction: column; gap: 16px; }
#view-cards .fc-tools-row { order: 1; width: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 !important; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); }
#view-cards .fc-tools-row .fc-search, #view-cards .fc-tools-row input[type="search"], #view-cards .fc-tools-row .search-input { margin-left: auto; }
#view-cards .fc-create-form { order: 2; display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 220px auto !important; gap: 14px !important; align-items: end; margin: 0 !important; padding: 20px 18px !important; border: 1px solid var(--line) !important; border-radius: 16px !important; background: var(--surface); box-shadow: var(--shadow-sm); }
#view-cards .fc-create-form input, #view-cards .fc-create-form select { width: 100%; }
#view-cards .fc-create-form .btn { min-height: 42px; justify-content: center; white-space: nowrap; }
#view-cards #fc-folder-chips { order: 3; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 !important; padding: 0 4px; }
#view-cards .folder-add { order: 4; display: flex; align-items: center; gap: 8px; margin: 0 !important; padding: 0 4px 4px; }
#view-cards .folder-add input { max-width: 220px; }
#view-cards #fc-manage-list { order: 5; display: flex; flex-direction: column; gap: 10px; margin-top: 2px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); }
#view-cards .fc-row { display: grid !important; grid-template-columns: minmax(0,1fr) 36px minmax(0,1fr) 190px 36px !important; gap: 12px !important; align-items: center; padding: 10px 12px !important; }
#view-cards .fc-row .divider { display: flex !important; align-items: center; justify-content: center; }
#view-cards .fc-row select { width: 100%; }
/* Study mode */
.study-wrap { display: flex; flex-direction: column; align-items: center; padding: 20px 0; }
.flip-card { width: 100%; max-width: 460px; height: 260px; perspective: 1200px; cursor: pointer; margin-bottom: 20px; }
.flip-inner { position: relative; width: 100%; height: 100%; transition: transform .5s cubic-bezier(.4,.2,.2,1); transform-style: preserve-3d; will-change: transform; }
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 18px; border: 1px solid var(--line); box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; text-align: center; padding: 30px; font-family: 'Fraunces', serif; font-size: 24px; font-weight: 600; }
.flip-front { background: var(--surface); }
.flip-back { background: var(--sage-tint); transform: rotateY(180deg); color: var(--sage-dark); }
.flip-hint { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--ink-faint); position: absolute; bottom: 10px; right: 14px; text-transform: uppercase; letter-spacing: 1px; }
.study-progress { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--ink-soft); }
.study-counter { display: flex; align-items: center; gap: 18px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--ink-soft); margin-bottom: 16px; }
.study-counter .correct { color: var(--sage-dark); font-weight: 700; }
.study-counter .wrong { color: var(--rust); font-weight: 700; }
.study-rate-row { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; justify-content: center; }
.btn.wrong-btn { background: var(--rust); }
.btn.wrong-btn:hover { background: #8a4d3a; }
.btn.correct-btn { background: var(--sage); }
.btn.correct-btn:hover { background: var(--sage-dark); }
.study-finish { text-align: center; padding: 36px 10px 10px; }
.study-finish .big-num { font-family: 'Fraunces', serif; font-size: 46px; font-weight: 600; line-height: 1; }
.study-finish .big-num .of { font-size: 22px; color: var(--ink-faint); font-weight: 500; }
.study-finish p { color: var(--ink-soft); margin: 8px 0 0; }
.study-finish-actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.study-kbd-hint { margin-top: 12px; font-size: 11px; color: var(--ink-faint); font-family: 'IBM Plex Mono', monospace; text-align: center; }
.study-kbd-hint kbd { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; font-family: inherit; }
.study-key-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.study-key-hint { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--ink-faint); }
.study-progress-track { width: 100%; max-width: 460px; height: 5px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; margin-bottom: 20px; }
.study-progress-fill { height: 100%; border-radius: 999px; background: var(--sage); transition: width .25s ease; }
/* Game mode */
.game-topbar { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 460px; margin-bottom: 12px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--ink-soft); }
.game-lives { display: flex; gap: 4px; }
.game-lives .heart { font-size: 16px; color: var(--rust); }
.game-lives .heart.lost { opacity: .2; }
.game-score { font-weight: 700; color: var(--ink); }
.game-streak { color: var(--clay-dark); font-weight: 700; }
.game-timerbar-track { width: 100%; max-width: 460px; height: 6px; border-radius: 6px; background: var(--bg-soft); overflow: hidden; margin-bottom: 22px; }
.game-timerbar-fill { height: 100%; background: var(--sage); border-radius: 6px; transition: width 1s linear, background .3s ease; }
.game-timerbar-fill.warn { background: var(--rust); }
.game-question-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-md); padding: 34px 26px; text-align: center; font-family: 'Fraunces', serif; font-weight: 600; font-size: 22px; margin-bottom: 22px; width: 100%; max-width: 460px; }
.game-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 460px; }
.game-option-btn { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; padding: 14px 12px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; transition: background .15s ease, border-color .15s ease, transform .1s ease; font-family: 'Karla', sans-serif; }
.game-option-btn:hover:not(:disabled) { background: var(--sage-tint); border-color: var(--sage); }
.game-option-btn:active:not(:disabled) { transform: scale(.97); }
.game-option-btn:disabled { cursor: default; }
.game-option-btn.correct { background: var(--sage); color: #fff; border-color: var(--sage); }
.game-option-btn.wrong { background: var(--rust); color: #fff; border-color: var(--rust); }
.game-over { text-align: center; padding: 30px 10px 10px; }
.game-over .big-num { font-family: 'Fraunces', serif; font-size: 46px; font-weight: 600; line-height: 1; }
.game-high { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--ink-faint); margin-top: 6px; }
.game-high.new { color: var(--clay-dark); font-weight: 700; }
.game-option-num { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--ink-soft); }
/* Documents */
.doc-upload-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.doc-row { display: flex; align-items: center; gap: 12px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; margin-bottom: 9px; }
.doc-row select { padding: 7px 10px; font-size: 12.5px; }
.doc-icon { width: 30px !important; height: 30px !important; border-radius: 7px !important; background: var(--clay-tint); color: var(--clay-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 8.5px !important; font-weight: 700; font-family: 'IBM Plex Mono', monospace; }
.doc-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-meta { font-size: 11.5px; color: var(--ink-faint); font-family: 'IBM Plex Mono', monospace; margin-top: 2px; }
.storage-meter { font: 11px 'IBM Plex Mono'; color: var(--ink-faint); padding: 8px 2px 14px; }
#view-docs .card { padding: 24px !important; }
#view-docs #lr-doc-clean-toolbar { width: 100% !important; display: flex !important; flex-direction: column !important; gap: 16px !important; margin: 0 0 18px !important; }
#view-docs #lr-doc-clean-top { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 38px !important; width: 100% !important; }
#view-docs #lr-doc-clean-top #doc-folder-chips { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; width: auto !important; margin: 0 !important; }
#view-docs #lr-doc-clean-top #doc-folder-chips .folder-chip { width: auto !important; min-width: 0 !important; flex: 0 0 auto !important; margin: 0 !important; padding: 6px 13px !important; white-space: nowrap !important; }
#view-docs #lr-doc-clean-top .folder-add { display: flex !important; align-items: center !important; gap: 7px !important; margin: 0 0 0 6px !important; }
#view-docs #lr-doc-clean-top .folder-add input { width: 190px !important; max-width: 190px !important; height: 31px !important; min-height: 31px !important; padding: 5px 9px !important; font-size: 11px !important; border-radius: 9px !important; }
#view-docs #lr-doc-clean-top .folder-add button { height: 31px !important; min-height: 31px !important; padding: 0 10px !important; font-size: 10.5px !important; border-radius: 8px !important; }
#view-docs #lr-doc-clean-bottom { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 9px !important; width: 100% !important; }
#view-docs #lr-doc-clean-bottom #lr-doc-search { width: 260px !important; min-width: 260px !important; max-width: 260px !important; height: 34px !important; flex: 0 0 260px !important; margin: 0 !important; padding: 6px 10px !important; font-size: 11.5px !important; }
#view-docs #lr-doc-clean-upload { width: auto !important; height: 32px !important; min-height: 32px !important; padding: 0 11px !important; border-radius: 8px !important; font-size: 11px !important; white-space: nowrap !important; margin: 0 !important; }
#view-docs #doc-folder-chips .del-x { display: inline-block !important; margin-left: 4px !important; font-size: 8px !important; }
#view-docs #doc-list { margin-top: 4px !important; }
#view-docs .lr-doc-row { grid-template-columns: 34px minmax(180px,1fr) 160px auto !important; gap: 11px !important; padding: 12px 14px !important; min-height: 66px !important; }
#view-docs .lr-doc-actions { display: flex !important; align-items: center !important; gap: 5px !important; width: auto !important; }
#view-docs .lr-doc-action-btn { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: 8px !important; cursor: pointer !important; line-height: 1 !important; }
#view-docs .lr-doc-action-btn svg { width: 15px !important; height: 15px !important; display: block !important; stroke: currentColor !important; }
#view-docs .lr-doc-svg-icon { width: 15px !important; height: 15px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--ink) !important; }
#view-docs .lr-doc-action-btn:hover { background: var(--sage-tint) !important; border-color: var(--sage) !important; color: var(--sage-dark) !important; }
#view-docs .lr-doc-action-btn.danger:hover { background: var(--rust-tint) !important; border-color: var(--rust) !important; color: var(--rust) !important; }
/* To-do / workspace */
.todo-add { display: flex; gap: 8px; margin-bottom: 18px; }
.todo-add input[type=text] { flex: 1; }
.filters { display: flex; gap: 8px; margin-bottom: 16px; }
.filter-btn { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); padding: 6px 14px; border-radius: 20px; font-size: 12.5px; cursor: pointer; font-weight: 600; }
.filter-btn.active { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.todo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.todo-row { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.checkbox { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--ink-faint); cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all .15s ease; }
.checkbox.done { background: var(--sage); border-color: var(--sage); }
.checkbox.done::after { content: "✓"; color: #fff; font-size: 12px; font-weight: 700; }
.todo-text { flex: 1; font-size: 14.5px; }
.todo-text.done { text-decoration: line-through; color: var(--ink-faint); }
.tag { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; font-family: 'IBM Plex Mono', monospace; }
.tag.niedrig { background: var(--sage-tint); color: var(--sage-dark); }
.tag.mittel { background: var(--clay-tint); color: var(--clay-dark); }
.tag.hoch { background: var(--rust-tint); color: var(--rust); }
.workspace-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.workspace-tabs, .workspace-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.workspace-tab, .view-kind-btn { border: 1px solid transparent; background: transparent; color: var(--ink-soft); padding: 8px 11px; border-radius: 9px; font-weight: 700; font-size: 12.5px; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.workspace-tab:hover, .view-kind-btn:hover { background: var(--bg-soft); color: var(--ink); }
.workspace-tab.active, .view-kind-btn.active { background: var(--surface-alt); border-color: var(--line); color: var(--ink); box-shadow: var(--shadow-sm); }
.workspace-filter { padding: 8px 10px !important; font-size: 12px !important; min-width: 120px; }
.range-note { font-size: 11.5px; color: var(--ink-faint); margin: 0 0 12px; }
#view-todo .workspace-bar { display: flex !important; align-items: center !important; width: 100% !important; }
#view-todo .workspace-tools { display: flex !important; align-items: center !important; gap: 6px !important; margin-left: 0 !important; }
#view-todo #todo-view-buttons-right { display: flex !important; align-items: center !important; gap: 5px !important; margin-left: auto !important; }
#view-todo .view-kind-btn { flex: 0 0 auto !important; }
/* Task database / board */
.db-shell { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); }
.db-table { width: 100%; border-collapse: collapse; min-width: 900px; }
.db-table th { padding: 10px 12px; text-align: left; font-size: 10.5px; letter-spacing: .04em; color: var(--ink-faint); font-family: 'IBM Plex Mono', monospace; border-bottom: 1px solid var(--line); background: var(--surface-alt); white-space: nowrap; }
.db-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 13px; }
.db-table tr:last-child td { border-bottom: none; }
.db-table tbody tr:hover { background: var(--bg-soft); }
.db-title-cell { display: flex; align-items: center; gap: 9px; font-weight: 700; min-width: 220px; }
.db-check { width: 18px; height: 18px; border: 1.5px solid var(--ink-faint); border-radius: 5px; background: transparent; cursor: pointer; display: grid; place-items: center; flex: 0 0 auto; color: #fff; padding: 0; }
.db-check.done { background: var(--sage); border-color: var(--sage); }
.db-check.done::after { content: '✓'; font-size: 11px; font-weight: 800; }
.db-deadline { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; white-space: nowrap; }
.db-deadline.overdue { color: var(--rust); font-weight: 700; }
.db-progress { display: flex; align-items: center; gap: 8px; min-width: 125px; }
.db-progress-track { height: 6px; border-radius: 999px; background: var(--bg-soft); width: 74px; overflow: hidden; border: 1px solid var(--line); }
.db-progress-fill { height: 100%; background: var(--sage); border-radius: 999px; transition: width .2s ease; }
.db-progress-num { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--ink-soft); min-width: 32px; }
.db-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; background: var(--bg-soft); font-size: 11px; font-weight: 700; white-space: nowrap; }
.db-chip.status-bearbeitung { background: var(--dusk-tint); color: var(--dusk); }
.db-chip.status-erledigt { background: var(--sage-tint); color: var(--sage-dark); }
.db-chip.status-geplant { background: var(--surface-alt); color: var(--ink-soft); }
.db-actions { display: flex; gap: 3px; justify-content: flex-end; }
.db-new-row { width: 100%; border: 0; border-top: 1px solid var(--line); background: transparent; padding: 11px 13px; text-align: left; color: var(--ink-soft); font-weight: 700; cursor: pointer; }
.db-new-row:hover { background: var(--bg-soft); color: var(--ink); }
.board-grid { display: grid; grid-template-columns: repeat(4,minmax(210px,1fr)); gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.board-col { background: var(--surface-alt); border: 1px solid var(--line); border-radius: 16px; padding: 10px; min-height: 240px; }
.board-col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; font-size: 12px; font-weight: 800; }
.board-count { background: var(--surface); border: 1px solid var(--line); padding: 2px 7px; border-radius: 999px; font-size: 10px; color: var(--ink-soft); }
.task-board-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 11px; margin-bottom: 8px; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .15s ease, border-color .15s ease; }
.task-board-card:hover { transform: translateY(-1px); border-color: var(--sage); }
.task-board-title { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.task-board-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 10.5px; color: var(--ink-soft); }
/* Modules */
.module-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 14px; }
.module-card { border: 1px solid var(--line); border-radius: 17px; overflow: hidden; background: var(--surface); cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; text-align: left; color: var(--ink); padding: 0; }
.module-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--sage); }
.module-cover { height: 132px; display: flex; align-items: center; justify-content: center; font-size: 54px; background: linear-gradient(135deg,var(--sage-tint),var(--clay-tint)); position: relative; overflow: hidden; }
.module-cover img { width: 100%; height: 100%; object-fit: cover; }
.module-body { padding: 13px 14px; }
.module-title { font-family: 'Fraunces', serif; font-size: 17px; font-weight: 650; margin-bottom: 5px; }
.module-sub { font-size: 11.5px; color: var(--ink-soft); display: flex; justify-content: space-between; gap: 8px; }
.module-add-card { min-height: 214px; border: 1px dashed var(--line); background: transparent; display: grid; place-items: center; color: var(--ink-soft); font-weight: 700; }
.module-add-card:hover { background: var(--bg-soft); }
.module-detail-head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.module-detail-ico { width: 62px; height: 62px; border-radius: 15px; display: grid; place-items: center; background: var(--sage-tint); font-size: 34px; overflow: hidden; flex: 0 0 auto; }
.module-detail-ico img { width: 100%; height: 100%; object-fit: cover; }
.module-related-list { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.module-related-row { display: flex; align-items: center; gap: 8px; padding: 9px; background: var(--bg-soft); border-radius: 9px; font-size: 12.5px; }
.editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.editor-grid .wide { grid-column: 1/-1; }
.editor-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.editor-grid input, .editor-grid select { width: 100%; }
.modal:has(.lr-module-center) { width: min(94vw,1380px) !important; max-width: 1380px !important; height: min(90vh,920px) !important; max-height: 90vh !important; padding: 26px !important; overflow: auto !important; }
.lr-module-center { width: 100%; min-width: 0; }
.lr-module-center .module-detail-head { margin-bottom: 0; }
.lr-module-center .module-detail-head h3 { margin: 3px 0 0; font-family: 'Fraunces', serif; font-size: 27px; }
.lr-module-center-sub { margin-top: 5px; color: var(--ink-soft); font-size: 12px; }
.lr-module-central-card .module-body { display: flex; flex-direction: column; gap: 8px; }
.lr-module-card-counts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 5px; color: var(--ink-faint); font: 9.5px 'IBM Plex Mono', monospace; }
.lr-module-stats { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; margin: 20px 0; }
.lr-module-stats button { min-height: 82px; padding: 14px 8px; border: 1px solid var(--line); border-radius: 13px; background: var(--bg-soft); color: var(--ink); cursor: pointer; }
.lr-module-stats button:hover { border-color: var(--sage); background: var(--sage-tint); }
.lr-module-stats strong { display: block; margin-bottom: 5px; font-family: 'Fraunces', serif; font-size: 27px; }
.lr-module-stats span { color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.lr-module-content-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.lr-module-section { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.lr-module-section-wide { grid-column: 1/-1; }
.lr-module-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.lr-module-section-head h4 { margin: 3px 0 0; font-size: 16px; }
.lr-module-list { display: flex; flex-direction: column; }
.lr-module-row { min-height: 41px; display: flex; align-items: center; gap: 9px; padding: 8px 3px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.lr-module-row:last-child { border-bottom: 0; }
.lr-module-row > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-module-row small { color: var(--ink-faint); font: 9.5px 'IBM Plex Mono', monospace; white-space: nowrap; }
.lr-module-empty { padding: 12px 2px; color: var(--ink-faint); font-size: 11.5px; }
.lr-module-event-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--ink-faint); }
.lr-type-vorlesung { background: #4CAF50; color: white; font-weight: 600; }
.lr-type-uebung { background: #2196F3; color: white; font-weight: 600; }
.lr-type-seminar { background: #9C27B0; color: white; font-weight: 600; }
.lr-type-klausur { background: #FF5252; color: white; font-weight: 600; }
.lr-type-abgabe { background: #FFA726; color: white; font-weight: 600; }
.lr-type-praktikum { background: #00ACC1; color: white; font-weight: 600; }
.lr-type-lerngruppe { background: #AB47BC; color: white; font-weight: 600; }
.lr-type-termin { background: #78909C; color: white; font-weight: 600; }
.lr-module-actions { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
/* Planner / statistics */
.week-bars, .large-week-chart { height: 150px; display: flex; align-items: flex-end; justify-content: space-around; gap: 8px; margin-top: 14px; }
.week-bar { height: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-width: 24px; }
.week-bar-track { height: 105px; width: 100%; max-width: 34px; background: var(--bg-soft); border-radius: 8px; display: flex; align-items: flex-end; overflow: hidden; }
.week-bar-track div { width: 100%; background: var(--sage); border-radius: 8px 8px 0 0; }
.week-bar-value, .week-bar span { font: 9px 'IBM Plex Mono'; color: var(--ink-faint); }
.planner-layout { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: start; }
.planner-form { display: flex; flex-direction: column; gap: 10px; }
.planner-form input, .planner-form select { width: 100%; }
.plan-card { padding: 14px; border-radius: 12px; background: var(--bg-soft); margin-top: 10px; }
.plan-card small { display: block; color: var(--ink-soft); margin-top: 3px; }
.plan-tasks { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.plan-tasks div { display: grid; grid-template-columns: 50px 1fr auto; gap: 8px; font-size: 12px; padding: 6px; background: var(--surface); border-radius: 7px; }
.plan-tasks span, .plan-tasks strong { font-family: 'IBM Plex Mono'; font-size: 10px; }
.subject-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.due-summary { font-family: 'Fraunces'; font-size: 25px; margin-top: 14px; }
/* Modal / toast */
.modal-backdrop { position: fixed; inset: 0; background: rgba(30,25,20,.45); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1000; }
.modal-backdrop[hidden] { display: none; }
.modal { width: min(520px,100%); max-height: 90vh; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-md); }
.modal h2 { font-family: 'Fraunces'; margin-top: 0; }
.modal-form { display: flex; flex-direction: column; gap: 12px; }
.modal-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.modal-form input, .modal-form textarea, .modal-form select { width: 100%; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.toast-wrap { position: fixed; right: 20px; bottom: 20px; z-index: 1100; display: flex; flex-direction: column; gap: 8px; }
.toast { transform: translateY(10px); opacity: 0; background: var(--ink); color: var(--surface); padding: 11px 15px; border-radius: 10px; box-shadow: var(--shadow-md); transition: .2s; }
.toast.show { transform: none; opacity: 1; }
.toast.error { background: var(--rust); }
/* Theme switch / PWA */
.theme-switch {
  width: calc(100% - 8px);
  margin: 0 4px 14px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font: 700 11.5px 'Karla', sans-serif;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .1s ease;
}
.theme-switch:hover { background: var(--bg-soft); color: var(--ink); border-color: var(--sage); }
.theme-switch:active { transform: scale(.98); }
.theme-switch:focus-visible { outline: 3px solid var(--sage-tint); outline-offset: 2px; }
.theme-switch-track { position: relative; width: 52px; height: 28px; flex-shrink: 0; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 7px; color: var(--ink-faint); font-size: 13px; transition: background .25s ease, border-color .25s ease; }
.theme-switch-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: 0 2px 6px rgba(56,47,36,.20); transition: transform .25s cubic-bezier(.4,.2,.2,1), background .25s ease; }
.theme-switch-sun, .theme-switch-moon { position: relative; z-index: 1; line-height: 1; }
.theme-switch-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pwa-install-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink-soft); font-family: 'Karla', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-sm); transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease; }
.pwa-install-btn:hover { background: var(--sage-tint); color: var(--sage-dark); border-color: var(--sage); }
.pwa-install-btn:active { transform: scale(.98); }
.pwa-install-btn[hidden] { display: none !important; }
/* Dark mode */
html.dark {
  --bg: #0d1511;
  --bg-soft: #151b18;
  --surface: #1b2520;
  --surface-alt: #12171a;
  --ink: #e8ebe7;
  --ink-soft: #a8b0a6;
  --ink-faint: #6b7268;
  --line: #2a3530;
  --sage: #5fb371;
  --sage-dark: #3a7f52;
  --sage-tint: #1d3f2d;
  --clay: #c89d5f;
  --clay-dark: #8b6a3d;
  --clay-tint: #2a2318;
  --rust: #b87565;
  --rust-tint: #3d241f;
  --dusk: #5b8ab8;
  --dusk-tint: #1f2d3f;
  --plum: #9b7b96;
  --plum-tint: #2a1f2a;
  --shadow-sm: 0 2px 8px rgba(13,21,17,0.3);
  --shadow-md: 0 10px 30px rgba(13,21,17,0.5);
}
html.dark body { background: var(--bg); }
html.dark .theme-switch-track { background: #20231f; border-color: #555b50; }
html.dark .theme-switch-thumb { transform: translateX(24px); background: #ebe3d2; }
html.dark .theme-switch-moon { color: #f1d58a; }
html:not(.dark) .theme-switch-sun { color: var(--clay-dark); }
html.dark .dash-calendar-card .mini-cal-day { background: var(--bg-soft); }
html.dark .db-shell, html.dark .module-card, html.dark .task-board-card { background: var(--surface); }
html.dark .board-col { background: var(--surface-alt); }
html.dark #view-calendar { --lr-cal-surface: var(--surface) !important; --lr-cal-soft: var(--bg-soft) !important; }
html.dark #view-calendar .lr-cal-main,
html.dark #view-calendar .lr-cal-side,
html.dark #view-calendar .lr-cal-toolbar,
html.dark #view-calendar .lr-cal-dow-row,
html.dark #view-calendar .lr-cal-month-grid,
html.dark #view-calendar .lr-cal-legend { background: var(--surface) !important; }
html.dark #view-calendar .lr-cal-day { background: var(--bg-soft) !important; }
html.dark #view-calendar .lr-cal-day.other-month { background: var(--bg) !important; }
html.dark #view-calendar .lr-cal-day:hover { background: var(--surface-alt) !important; }
html.dark #view-calendar .lr-cal-day.today { background: var(--sage-tint) !important; color: var(--ink) !important; }
html.dark #view-calendar .lr-time-slot { background: var(--bg-soft) !important; }
html.dark #view-calendar .lr-time-slot.today { background: var(--sage-tint) !important; }
html.dark .week-bar-track { background: var(--bg-soft); }
html.dark .dash-calendar-card .mini-cal-day { background: var(--bg-soft); }
/* Responsive */
@media (max-width: 1150px) {
  .dash-new-stats { grid-template-columns: repeat(2,1fr); }
  .dash-new-main-grid { grid-template-columns: 1fr 1fr; }
  .dash-calendar-card { grid-column: 1/-1; }
  .dash-new-bottom-grid { grid-template-columns: 1fr 1fr; }
  .dash-new-bottom-grid > :last-child { grid-column: 1/-1; }
}
@media (max-width: 1100px) {
  .main { padding: 28px 28px 50px !important; }
}
@media (max-width: 1024px) {
  .dash-grid, .cal-layout, .notes-layout, .planner-layout { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  #view-cards .fc-create-form { grid-template-columns: 1fr 1fr !important; }
  #view-cards .fc-create-form .btn, #view-cards .fc-create-form select { width: 100%; }
  #view-cards .fc-row { grid-template-columns: 1fr 32px 1fr 160px 32px !important; }
}
@media (max-width: 950px) {
  #view-docs .lr-doc-row { grid-template-columns: 36px 1fr auto !important; }
}
@media (max-width: 900px) {
  .modal:has(.lr-module-center) { width: 96vw !important; height: 92vh !important; max-height: 92vh !important; padding: 20px !important; }
  .lr-module-stats { grid-template-columns: repeat(3,1fr); }
  .lr-module-content-grid { grid-template-columns: 1fr; }
  .lr-module-section-wide { grid-column: auto; }
}
@media (max-width: 760px) {
  .main { padding: 18px 16px 40px !important; }
  #view-calendar .lr-cal-layout { grid-template-columns: 1fr !important; }
  .workspace-tools { width: 100%; }
  .workspace-filter { flex: 1; min-width: 120px; }
  .editor-grid { grid-template-columns: 1fr; }
  .editor-grid .wide { grid-column: auto; }
  .board-grid { grid-template-columns: repeat(4,230px); }
  .module-grid { grid-template-columns: 1fr; }
  .dash-new-stats, .dash-new-main-grid, .dash-new-bottom-grid { grid-template-columns: 1fr; }
  .dash-calendar-card, .dash-new-bottom-grid > :last-child { grid-column: auto; }
  .dash-learning-progress { align-items: flex-start; }
  .dash-progress-circle { width: 100px; height: 100px; flex-basis: 100px; }
  .dash-progress-circle-inner { width: 80px; height: 80px; }
  .dash-motivation { flex-direction: column; align-items: flex-start; }
  #view-todo .workspace-bar { flex-wrap: wrap !important; gap: 8px !important; }
  #view-todo #todo-view-buttons-right { margin-left: auto !important; }
}
@media (max-width: 700px) {
  #view-cards .fc-tools-row { align-items: stretch; }
  #view-cards .fc-tools-row .fc-search, #view-cards .fc-tools-row input[type="search"], #view-cards .fc-tools-row .search-input { width: 100%; margin-left: 0; }
  #view-cards .fc-create-form { grid-template-columns: 1fr !important; }
  #view-cards .folder-add { flex-direction: column; align-items: stretch; }
  #view-cards .folder-add input { max-width: none; width: 100%; }
  #view-cards .fc-row { grid-template-columns: 1fr !important; }
  #view-cards .fc-row .divider { display: none !important; }
  #view-docs #lr-doc-clean-top { flex-wrap: wrap !important; gap: 14px !important; }
  #view-docs #lr-doc-clean-top .folder-add { margin-left: 4px !important; }
  #view-docs #lr-doc-clean-bottom { flex-wrap: wrap !important; }
}
@media (max-width: 640px) {
  .app { flex-direction: column; }
  .sidebar { width: 100%; flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 10px 12px; gap: 6px; align-items: center; }
  .brand { display: none; }
  .nav-item { flex-direction: column; gap: 4px; padding: 9px 11px; font-size: 10px; white-space: nowrap; flex-shrink: 0; }
  .nav-item .ico { width: 19px; height: 19px; }
  .nav-item.active::before, .sidebar-foot { display: none; }
  .lernuhr-widget { margin: 0; flex-shrink: 0; flex-direction: row; padding: 7px 12px; gap: 8px; border-radius: 14px; }
  .lernuhr-label, .lernuhr-presets { display: none; }
  .lernuhr-clock { width: 38px; height: 38px; }
  .lernuhr-time { font-size: 11px; }
  .lernuhr-controls { gap: 5px; }
  .lernuhr-btn { width: 26px; height: 26px; font-size: 10px; }
  .lernuhr-btn.ghost { width: 22px; height: 22px; font-size: 11px; }
  .view-title { font-size: 25px; }
  .stat-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .fc-mode-switch { flex-direction: column; }
  .fc-mode-btn-item { justify-content: flex-start; }
  .game-options-grid { grid-template-columns: 1fr; }
  .doc-row, .doc-upload-row { flex-wrap: wrap; }
  .week-grid, .week-head, .week-allday-row { grid-template-columns: 32px repeat(7,1fr); }
  .week-head-cell { font-size: 9.5px; padding: 6px 2px; }
  .week-head-cell .wd-num { font-size: 13px; }
  .note-list-tools { grid-template-columns: 1fr; }
  .note-list-tools input { grid-column: auto; }
  .modal { padding: 18px; }
  .week-bars { height: 120px; }
  .theme-switch { width: auto; margin: 0 2px 0 0; padding: 7px; border-radius: 12px; flex-shrink: 0; order: -1; }
  .theme-switch-label { display: none; }
  .theme-switch-track { width: 46px; height: 26px; padding: 0 6px; }
  .theme-switch-thumb { width: 18px; height: 18px; }
  html.dark .theme-switch-thumb { transform: translateX(20px); }
  .pwa-install-btn { width: auto; flex-shrink: 0; margin: 0; padding: 8px 10px; }
  .pwa-install-btn span:last-child { display: none; }
  .modal:has(.lr-module-center) { width: 100% !important; height: 94vh !important; max-height: 94vh !important; border-radius: 16px !important; padding: 16px !important; }
  .lr-module-stats { grid-template-columns: repeat(2,1fr); }
}
/* ============================================================
   LERNPLAN – MANUELLE TAGESPLANUNG
============================================================ */
#view-planner .planner-manual-layout{
  display:grid;
  grid-template-columns:minmax(280px,360px) minmax(0,1fr);
  gap:18px;
  align-items:start;
}
#view-planner .planner-entry-card{position:sticky;top:24px;}
#view-planner .planner-manual-form{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:14px;
}
#view-planner .planner-manual-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:var(--ink-soft);
  font-size:12px;
  font-weight:700;
}
#view-planner .planner-manual-form input,
#view-planner .planner-manual-form textarea{width:100%;}
#view-planner .planner-manual-form textarea{
  resize:vertical;
  min-height:92px;
  font-family:'Karla',sans-serif;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 13px;
  font-size:14px;
  color:var(--ink);
  outline:none;
}
#view-planner .planner-manual-form textarea:focus{
  border-color:var(--sage);
  background:var(--surface);
}
#view-planner .planner-form-actions{display:flex;gap:8px;flex-wrap:wrap;}
#view-planner .planner-list-head{gap:14px;margin-bottom:14px;}
#view-planner .planner-list-sub{margin-top:3px;color:var(--ink-faint);font-size:11px;}
#view-planner .planner-day-group{margin-top:14px;}
#view-planner .planner-day-group:first-child{margin-top:0;}
#view-planner .planner-day-title{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:0 2px 8px;
  border-bottom:1px solid var(--line);
}
#view-planner .planner-day-title strong{
  font-family:'Fraunces',serif;
  font-size:17px;
  font-weight:600;
}
#view-planner .planner-day-title span{
  color:var(--ink-faint);
  font:10px 'IBM Plex Mono',monospace;
}
#view-planner .planner-entry{
  display:grid;
  grid-template-columns:24px minmax(0,1fr) auto;
  gap:11px;
  align-items:start;
  padding:12px 3px;
  border-bottom:1px solid var(--bg-soft);
}
#view-planner .planner-entry:last-child{border-bottom:0;}
#view-planner .planner-entry-check{
  width:20px;
  height:20px;
  margin-top:1px;
  padding:0;
  border:1.5px solid var(--ink-faint);
  border-radius:6px;
  background:transparent;
  color:#fff;
  cursor:pointer;
}
#view-planner .planner-entry-check.done{background:var(--sage);border-color:var(--sage);}
#view-planner .planner-entry-check.done::after{content:'✓';font-size:11px;font-weight:800;}
#view-planner .planner-entry-main{min-width:0;}
#view-planner .planner-entry-title{font-weight:700;font-size:14px;}
#view-planner .planner-entry.done .planner-entry-title{text-decoration:line-through;color:var(--ink-faint);}
#view-planner .planner-entry-details{
  margin-top:4px;
  color:var(--ink-soft);
  font-size:12px;
  line-height:1.45;
  white-space:pre-wrap;
}
#view-planner .planner-entry-meta{margin-top:6px;color:var(--clay-dark);font:10px 'IBM Plex Mono',monospace;}
#view-planner .planner-entry-actions{display:flex;gap:3px;}
#view-planner .planner-empty{padding:34px 16px;text-align:center;color:var(--ink-soft);}
@media(max-width:900px){
  #view-planner .planner-manual-layout{grid-template-columns:1fr;}
  #view-planner .planner-entry-card{position:static;}
}
@media(max-width:640px){
  #view-planner .planner-entry{grid-template-columns:22px minmax(0,1fr);}
  #view-planner .planner-entry-actions{grid-column:2;justify-content:flex-start;}
  #view-planner .planner-list-head{align-items:flex-start;flex-direction:column;}
}
/* ============================================================
   DASHBOARD – REDUZIERTE VERSION
   Entfernt:
   - Notizen oben
   - Lernfortschritt unten
   - Karteikarten unten
   - Diese Woche unten
============================================================ */
/* NOTIZEN-KARTE OBEN AUSBLENDEN */
#view-dashboard .dash-new-stats .dash-new-stat:nth-child(2){
  display:none !important;
}
/* OBERE KARTEN AUF 3 GLEICH GROSSE SPALTEN VERTEILEN */
#view-dashboard .dash-new-stats{
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
}
/* KOMPLETTE UNTERE REIHE ENTFERNEN */
#view-dashboard .dash-new-bottom-grid{
  display:none !important;
}
/* MOTIVATION ETWAS NÄHER AN DEN HAUPTBEREICH */
#view-dashboard .dash-motivation{
  margin-top:16px !important;
}
/* TABLET */
@media(max-width:1150px){
  #view-dashboard .dash-new-stats{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }
}
/* HANDY */
@media(max-width:760px){
  #view-dashboard .dash-new-stats{
    grid-template-columns:1fr !important;
  }
}
/* ============================================================
   DASHBOARD – LERNPLAN + DEADLINE + KALENDER-MARKIERUNGEN
============================================================ */
/* ============================================================
   LERNPLAN-VORSCHAU
============================================================ */
#view-dashboard .dash-plan-card{
  min-width:0;
}
#view-dashboard .dash-plan-preview{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-top:10px;
}
#view-dashboard .dash-plan-empty{
  min-height:185px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--ink-soft);
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px;
}
#view-dashboard .dash-plan-empty-icon{
  width:45px;
  height:45px;
  display:grid;
  place-items:center;
  margin-bottom:10px;
  border-radius:13px;
  background:var(--sage-tint);
  color:var(--sage-dark);
  font-size:19px;
}
#view-dashboard .dash-plan-empty strong{
  color:var(--ink);
  font-family:'Fraunces',serif;
  font-size:16px;
  margin-bottom:4px;
}
#view-dashboard .dash-plan-empty span{
  font-size:11.5px;
}
#view-dashboard .dash-plan-item{
  display:grid;
  grid-template-columns:
    52px
    minmax(0,1fr)
    auto;
  align-items:center;
  gap:11px;
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--bg-soft);
}
#view-dashboard .dash-plan-date{
  text-align:center;
  padding-right:10px;
  border-right:1px solid var(--line);
}
#view-dashboard .dash-plan-date strong{
  display:block;
  font-family:'Fraunces',serif;
  font-size:19px;
  line-height:1;
}
#view-dashboard .dash-plan-date span{
  display:block;
  margin-top:3px;
  color:var(--ink-faint);
  font:9px 'IBM Plex Mono',monospace;
  text-transform:uppercase;
}
#view-dashboard .dash-plan-info{
  min-width:0;
}
#view-dashboard .dash-plan-info strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12.5px;
}
#view-dashboard .dash-plan-info small{
  display:block;
  margin-top:4px;
  color:var(--ink-soft);
  font-size:10.5px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#view-dashboard .dash-plan-time{
  color:var(--sage-dark);
  font:10px 'IBM Plex Mono',monospace;
  white-space:nowrap;
}
/* ============================================================
   NÄCHSTE DEADLINE – BREITE LEISTE UNTEN
============================================================ */
#view-dashboard .dash-deadline-bar{
  width:100%;
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:16px;
  padding:15px 18px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow-sm);
}
#view-dashboard .dash-deadline-icon{
  width:46px;
  height:46px;
  flex:0 0 46px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:var(--sage-tint);
  color:var(--sage-dark);
  font-size:20px;
  font-weight:700;
}
#view-dashboard .dash-deadline-content{
  flex:1;
  min-width:0;
}
#view-dashboard .dash-deadline-title{
  margin-top:3px;
  font-family:'Fraunces',serif;
  font-size:17px;
  font-weight:600;
  color:var(--ink);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#view-dashboard .dash-deadline-meta{
  margin-top:3px;
  color:var(--ink-soft);
  font-size:11px;
}
#view-dashboard .dash-deadline-open{
  flex:0 0 auto;
  border:0;
  background:transparent;
  color:var(--sage-dark);
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  padding:8px 4px;
}
#view-dashboard .dash-deadline-open:hover{
  text-decoration:underline;
}
/* Dringende Deadline */
#view-dashboard .dash-deadline-bar.urgent{
  border-color:rgba(166,95,73,.35);
}
#view-dashboard .dash-deadline-bar.urgent .dash-deadline-icon{
  background:var(--rust-tint);
  color:var(--rust);
}
/* ============================================================
   MINI-KALENDER – MARKIERUNGEN
============================================================ */
#view-dashboard .mini-cal-day{
  position:relative;
}
#view-dashboard .dash-cal-markers{
  position:absolute;
  left:50%;
  bottom:4px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  pointer-events:none;
}
#view-dashboard .dash-cal-marker{
  width:4px;
  height:4px;
  border-radius:50%;
}
#view-dashboard .dash-cal-marker.event{
  background:var(--clay);
}
#view-dashboard .dash-cal-marker.task{
  background:var(--sage-dark);
}
#view-dashboard .dash-cal-marker.plan{
  background:var(--dusk);
}
#view-dashboard .mini-cal-day.today .dash-cal-marker{
  background:#fff;
}
/* ============================================================
   RESPONSIVE
============================================================ */
@media(max-width:760px){
  #view-dashboard .dash-deadline-bar{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  #view-dashboard .dash-deadline-open{
    width:100%;
    padding-left:61px;
    text-align:left;
  }
  #view-dashboard .dash-plan-item{
    grid-template-columns:
      46px
      minmax(0,1fr);
  }
  #view-dashboard .dash-plan-time{
    grid-column:2;
  }
}
/* Heute Button - stylish */
.lr-cal-today {
  background: linear-gradient(135deg, #4CAF50, #45a049) !important;
  color: white !important;
  border: 2px solid #4CAF50 !important;
  font-weight: 700 !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3) !important;
}

.lr-cal-today:hover {
  background: linear-gradient(135deg, #45a049, #3d8b40) !important;
  box-shadow: 0 6px 12px rgba(76, 175, 80, 0.5) !important;
  transform: translateY(-2px) !important;
}

.lr-cal-today:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3) !important;
}