/* ===== Greige Theme ===== */
* { box-sizing: border-box; }
:root{
  --bg: #f6f4f0;
  --panel: #ffffff;
  --ink: #2b2b2b;
  --muted: #6b7280;
  --line: #e7e2da;
  --brand: #3d5a80;
  --brand-weak: #cdd8e6;
  --ok: #1b9e77;
  --danger: #b23b3b;
  --radius: 14px;
  --shadow: 0 6px 20px rgba(0,0,0,.06);
}
html, body { height: 100%; }
body {
  margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink); background: var(--bg);
}

/* Topbar */
.topbar {
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(8px);
  background: rgba(246,244,240,.8);
  border-bottom: 1px solid var(--line);
  padding: 14px 18px; display: flex; gap: 12px; align-items: center;
}
.tabs { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.tabs button {
  appearance: none; border: 1px solid var(--line); background: var(--panel);
  color: var(--ink); padding: 8px 14px; border-radius: 999px; cursor: pointer;
  box-shadow: var(--shadow); transition: transform .06s ease;
}
.tabs button:hover { transform: translateY(-1px); }
.tabs button.active { border-color: var(--brand); background: var(--brand-weak); color: var(--brand); }
.starsbox {
  margin-left: 8px; padding: 6px 10px; border: 1px solid var(--line); background: var(--panel);
  border-radius: 999px; box-shadow: var(--shadow); font-weight: 600;
}

main { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
.hint, .subtle { color: var(--muted); }

/* Tabs */
.tab { display: none; opacity: 0; transition: opacity .2s ease; }
.tab.active { display: block; opacity: 1; }

/* Generic UI */
.row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 16px; }
input, button, select, textarea {
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow);
}
button { cursor: pointer; }
button.secondary { background: #f3f5f9; }
button.danger { background: #f9ecec; border-color: #f4d3d3; color: #7c2d2d; }
input::placeholder, textarea::placeholder { color: var(--muted); }
textarea { width: 100%; resize: vertical; }

/* Cards & Lists */
.card, .panel, .task, .plan-item {
  border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius);
  padding: 12px; box-shadow: var(--shadow);
}
.list { display: grid; gap: 10px; margin: 12px 0 16px; }
.task, .plan-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* Home */
.home-hero { display:flex; align-items:center; justify-content:space-between; }
.greet { font-size: 22px; font-weight: 700; }
.home-stats { display:flex; gap:10px; align-items:center; }
.pill { padding: 8px 12px; border:1px solid var(--line); border-radius:999px; background:#fff; box-shadow: var(--shadow); }

.grid-quick { display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin: 16px 0; }
.tile { text-align:left; padding:16px; border-radius:16px; border:1px solid var(--line); background:#fff; transition: transform .1s ease; }
.tile:hover { transform: translateY(-2px); }
.tile span { color: var(--muted); font-size: .9rem; display:block; margin-top:6px; }

.home-panels { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) {
  .grid-quick { grid-template-columns: 1fr 1fr; }
  .home-panels { grid-template-columns: 1fr; }
}

/* Linktree */
.split { display:grid; grid-template-columns: 300px 1fr; gap:16px; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }
.tree { border:1px solid var(--line); border-radius:var(--radius); padding:8px; background:#fff; box-shadow: var(--shadow); }
.tree details { margin-left: 10px; }
.tree summary { cursor: pointer; font-weight: 600; }

/* Footer */
.footer {
  text-align:center; padding:16px; font-size:0.9rem; color:var(--muted);
}

/* Quiz */
.quiz.hidden { display:none; }

/* Rewards */
.reward { display:flex; justify-content:space-between; align-items:center; }

/* Calendar Items */
.plan-item.study { border-left: 6px solid #3d5a80; }
.plan-item.paper { border-left: 6px solid #f59e0b; }
.plan-item.talk { border-left: 6px solid #10b981; }
.plan-item.exam { border-left: 6px solid #ef4444; }
/* ===== Notes: Layout & Typografie ===== */
:root { --notes-size: 1rem; }

.notes-header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.notes-toolbar { display:flex; gap:8px; flex-wrap:wrap; }

.notes-wrap {
  position: relative;
  min-height: 420px;
}
#notes-editor, #notes-preview {
  width: 100%;
  min-height: 420px;
  font-size: var(--notes-size);
  line-height: 1.6;
}
#notes-editor {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* „Prose“-Stil für Vorschau */
.prose { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.prose h1 { font-size: 1.8em; margin: .7em 0 .3em; font-weight: 800; }
.prose h2 { font-size: 1.4em; margin: .7em 0 .3em; font-weight: 700; }
.prose h3 { font-size: 1.2em; margin: .6em 0 .2em; font-weight: 700; }
.prose p  { margin: .5em 0; }
.prose strong { font-weight: 700; }
.prose em { font-style: italic; }
.prose ul, .prose ol { margin: .5em 0 .5em 1.2em; }
.prose li { margin: .25em 0; }
.prose blockquote {
  border-left: 4px solid var(--line);
  padding-left: 10px; color: var(--muted);
}
.prose hr { border: none; border-top: 1px solid var(--line); margin: 1em 0; }

/* Vollbild */
.notes-fullscreen #notes-panel {
  position: fixed; inset: 60px 20px 20px 20px; z-index: 50;
  max-width: unset; width: auto;
}
.notes-fullscreen .topbar { z-index: 60; }

/* Panel ohne Hintergrund für Sticker */
.panel-stickers {
  background: none;
  box-shadow: none;
  padding: 0;
}

/* Album-Layout */
.stickers-album {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding: 10px;
}

.stickers-album .sticker {
  height: 130px; /* größer */
  width: auto;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.15));
  transform: rotate(calc(var(--rotate, 0) * 1deg));
}

/* Optional: leichte Versetzung für "chaotisches" Album-Feeling */
.stickers-album .sticker:nth-child(odd) {
  --rotate: -3;
}
.stickers-album .sticker:nth-child(even) {
  --rotate: 2;
}

@media (max-width:700px){
  .stickers-album .sticker { height: 100px; }
}

.badge {
  display:inline-block; padding:2px 8px; border-radius:999px; font-size:.8rem;
  background:#f3f5f9; border:1px solid var(--line); color:var(--muted);
}

/* kompaktere Liste für die Home-Vorschau */
.list.compact .task {
  padding: 8px 10px;
}
.list.compact .badge {
  margin-left: 6px;
}
.list.compact .task { padding: 8px 10px; }
.list.compact .badge { margin-left: 6px; }

.star-badge{
  display:inline-block;
  padding:2px 6px;
  border-radius:999px;
  background:#fff7d1;
  border:1px solid #f1e2a2;
  font-size:.8rem;
  margin-left:6px;
}
.task.done .star-badge{ opacity:.5; }
/* Pomodoro */
.pomodoro-time{
  font-size: 42px; font-weight: 800; letter-spacing: 1px;
  padding: 8px 0;
}

/* Stats */
.stats-grid{
  display:grid; gap:12px; grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px){
  .stats-grid{ grid-template-columns: 1fr; }
}

/* --- Sticker: kompakt rechts neben Pomodoro --- */
#stickers-inline{
  /* kleines 2er-Grid wie Stickeralbum */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  justify-items: center;
  align-items: end;
  padding: 8px 4px;
  /* verhindert, dass große Bilder die Spalte sprengen */
  max-width: 100%;
}

#stickers-inline .sticker{
  display: block;
  height: 128px !important;   /* fixe Höhe */
  width: auto !important;
  max-width: 100% !important;  /* falls ein Bild sehr breit ist */
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.12));
  transform: rotate(var(--wiggle, 0deg));
}

/* leicht versetzt, damit's wie geklebt wirkt */
#stickers-inline .sticker:nth-child(odd){ --wiggle: -1.2deg; }
#stickers-inline .sticker:nth-child(even){ --wiggle: 1.2deg; }

/* auf kleineren Screens etwas kleiner */
@media (max-width: 700px){
  #stickers-inline .sticker{ height: 100px !important; }
}