/* RECALL — App-Styles. Mobile-first, iPad-Zwei-Spalten, Touch-griffig. */

#app { min-height: 100%; }

/* ---------- Icon-System (SVG-Glyphen, erben currentColor) ---------- */
.ico-svg { display: inline-flex; align-items: center; justify-content: center; line-height: 0; flex: 0 0 auto; }
.ico-svg svg { width: 1em; height: 1em; display: block; }
.brand-lockup { display: inline-flex; align-items: center; gap: .5rem; justify-content: center; }
.brand-arc { color: var(--c-ember); font-size: 2.4rem; }
.allclear-ico { font-size: 3.4rem; color: var(--c-ink-ghost); }
.hc-ico { font-size: 1.4rem; color: var(--c-success); }
.pill-ico { font-size: .9em; }
.pill.done { color: var(--c-success); gap: .3em; }
/* Buttons mit Icon+Text */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; }
.btn .ico-svg { font-size: 1.15em; }

/* Paper-Substrat: warmer Vignetten-Gradient (compositor-frei via background) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--c-desk-2), transparent 60%),
    var(--c-desk);
}
/* Feiner Papier-Grain — macht „warmes Papier" fühlbar statt flach (Vanilla, kein Asset) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="auto"] body::after { opacity: .045; }

/* ---------- generische Bausteine ---------- */
.btn {
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  border: none; cursor: pointer; color: var(--c-accent-ink);
  background: var(--c-accent); border-radius: var(--r-btn);
  padding: var(--sp-4) var(--sp-6); min-height: 56px;
  background-image: linear-gradient(180deg, var(--c-accent-hi), var(--c-accent));
  box-shadow: var(--sh-3), inset 0 1px 0 oklch(100% 0 0 / .28);
  transition: transform var(--dur-tap) var(--ease-out), box-shadow var(--dur-tap) var(--ease-out), filter var(--dur-tap);
  width: 100%; letter-spacing: .01em;
}
.btn:active { transform: translateY(1px) scale(.995); box-shadow: var(--sh-1), inset 0 1px 0 oklch(100% 0 0 / .28); filter: brightness(.97); }
.btn.ghost { background: var(--c-surface); background-image: none; color: var(--c-ink);
  box-shadow: var(--sh-1), var(--hl-top); border: 1px solid var(--c-edge); }
.btn.ghost:active { box-shadow: var(--sh-inset); }
.btn:disabled { opacity: .5; pointer-events: none; }

.field { width: 100%; }
.field label { display: block; font-size: var(--t-label); text-transform: uppercase;
  letter-spacing: .08em; color: var(--c-ink-soft); font-weight: 700; margin: 0 0 var(--sp-2) var(--sp-1); }
.field input, .field select {
  width: 100%; font-family: var(--font-body); font-size: 1.05rem;
  padding: var(--sp-4); border-radius: var(--r-btn); min-height: 54px;
  border: 2px solid var(--c-paper-edge); background: var(--c-paper); color: var(--c-ink);
  transition: border-color var(--dur-tap);
}
.field input:focus, .field select:focus { outline: none; border-color: var(--c-accent); }

.card-surface {
  background: var(--c-paper); border: 1px solid var(--c-paper-edge);
  border-radius: var(--r-card); box-shadow: var(--sh-card);
}

.pill { display: inline-flex; align-items: center; gap: .35em; font-weight: 700;
  font-size: var(--t-label); padding: .3em .7em; border-radius: var(--r-pill);
  background: var(--c-desk-2); color: var(--c-ink-soft); }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + var(--safe-b) + 1rem);
  transform: translate(-50%, 200%); z-index: 100;
  background: var(--c-ink); color: var(--c-paper); padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill); font-weight: 600; box-shadow: var(--sh-pop);
  transition: transform .35s var(--ease-spring); max-width: 90vw;
}
.toast.show { transform: translate(-50%, 0); }
.toast.err { background: var(--c-again-d); }

/* ---------- Auth / Onboarding ---------- */
.auth-wrap { min-height: 100dvh; display: flex; flex-direction: column;
  justify-content: center; align-items: center; padding: var(--sp-6);
  padding-top: calc(var(--safe-t) + var(--sp-6)); max-width: 460px; margin: 0 auto; }
.brand-mark { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 1.6rem + 3vw, 3.4rem);
  line-height: .95; letter-spacing: var(--track-tight); text-align: center; color: var(--c-ink); }
.brand-sub { text-align: center; color: var(--c-ink-soft); font-size: 1.15rem;
  margin: var(--sp-3) 0 var(--sp-8); font-weight: 500; }
.auth-card { width: 100%; padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
.auth-switch { text-align: center; color: var(--c-ink-soft); margin-top: var(--sp-4); }
.auth-switch button { background: none; border: none; color: var(--c-accent);
  font-weight: 700; cursor: pointer; font-size: 1rem; }
.divider { display: flex; align-items: center; gap: var(--sp-3); color: var(--c-ink-faint);
  font-size: var(--t-label); margin: var(--sp-2) 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--c-paper-edge); }

/* ---------- App-Shell ---------- */
.shell { min-height: 100dvh; padding-bottom: calc(var(--tabbar-h) + var(--safe-b)); }
.screen { max-width: 720px; margin: 0 auto; padding: var(--sp-5);
  padding-top: calc(var(--safe-t) + var(--sp-5)); }
.screen-title { font-family: var(--font-display); font-weight: 800; font-size: var(--t-h1);
  letter-spacing: -.02em; margin: 0 0 var(--sp-5); }

/* Tab-Bar — mobile bottom */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  height: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  display: flex; background: oklch(99% .006 85 / .92); backdrop-filter: blur(12px);
  border-top: 1px solid var(--c-paper-edge);
}
[data-theme="auto"] .tabbar { background: oklch(26% .02 270 / .9); }
.tabbar button { flex: 1; background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: var(--c-ink-faint); font-size: .68rem; font-weight: 700;
  font-family: var(--font-body); padding: 0; min-height: 48px; transition: color var(--dur-tap); }
.tabbar button .ico { font-size: 1.5rem; line-height: 1; transition: transform var(--dur-tap) var(--ease-spring); }
.tabbar button.active { color: var(--c-accent); }
.tabbar button.active .ico { transform: translateY(-2px) scale(1.12); }

/* ---------- Skeletons ---------- */
.skel-wrap { display: flex; flex-direction: column; gap: var(--sp-4); }
.skel { border-radius: var(--r-tile); background:
  linear-gradient(100deg, var(--c-surface-2) 30%, var(--c-surface) 50%, var(--c-surface-2) 70%);
  background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.skel.s-status { height: 44px; border-radius: var(--r-pill); }
.skel.s-title { height: 34px; width: 60%; }
.skel.s-hero { height: 150px; }
.skel.s-cta { height: 64px; border-radius: var(--r-btn); }
.skel.s-row { height: 110px; }
.skel.s-grid { height: 96px; }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* ---------- Today ---------- */
.section-h { font-family: var(--font-display); font-size: var(--t-h2); margin: var(--sp-6) 0 var(--sp-3); }

/* Persistente Top-Status-Leiste */
.status-bar { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.status-streak, .status-xp { display: inline-flex; align-items: center; gap: .3em;
  background: var(--c-surface); border: 1px solid var(--c-edge); border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-3); box-shadow: var(--sh-1); }
.status-streak .sb-num, .status-streak .sb-ico { color: var(--c-streak); }
.status-xp .sb-num, .status-xp .sb-ico { color: var(--c-xp); }
.sb-num { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; }
.sb-ico { font-size: 1.1rem; }
.status-streak.lit .sb-ico { animation: flamepulse 2.2s ease-in-out infinite; }
@keyframes flamepulse { 0%,100% { transform: scale(1) rotate(-2deg);} 50% { transform: scale(1.1) rotate(2deg);} }
.status-level { flex: 1; display: inline-flex; align-items: center; gap: var(--sp-2);
  background: linear-gradient(120deg, var(--c-accent-wash), transparent);
  border: 1px solid var(--c-edge); border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-3);
  box-shadow: var(--sh-1); justify-content: center; }
.lvl-badge { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: .9rem; color: var(--c-on-accent);
  background: linear-gradient(160deg, var(--c-level), var(--c-level-d)); box-shadow: var(--sh-1); }
.lvl-name { font-weight: 700; color: var(--c-ink-soft); font-size: .9rem; }

.greet { font-size: var(--t-h2); color: var(--c-ink-soft); margin-bottom: var(--sp-5); }

/* Hero-Bühne: Tagesziel-Ring + CTA */
.goal-hero { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-6) var(--sp-5);
  box-shadow: var(--sh-hero); margin-bottom: var(--sp-4); position: relative; overflow: hidden; }
.goal-hero.hit { border-color: var(--c-level); }
.goal-hero.hit::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 18% 30%, var(--c-level) 0, transparent 45%); opacity: .12; }
.goal-ring-box { flex: 0 0 auto; }
.goal-ring { width: 118px; height: 118px; }
.goal-ring circle { fill: none; stroke-width: 11; stroke-linecap: round; }
.goal-ring .bg { stroke: var(--c-base-sunken); }
.goal-ring .fg { stroke: url(#goalgrad); transition: stroke-dashoffset .9s var(--ease-out);
  transform: rotate(-90deg); transform-origin: 50% 50%; }
.goal-info { min-width: 0; }
.goal-info h3 { margin: 0; font-family: var(--font-display); font-size: 1.5rem; }
.goal-info > p { margin: var(--sp-1) 0 var(--sp-3); color: var(--c-ink-soft); }

/* Due-Counts als farbcodierte Dots */
.due-dots { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.due-dot { display: inline-flex; align-items: center; gap: .35em; font-size: .9rem; }
.due-dot .dot { width: 9px; height: 9px; border-radius: 50%; }
.due-dot.learn .dot { background: var(--c-hard); }
.due-dot.review .dot { background: var(--c-accent); }
.due-dot.new .dot { background: var(--c-good); }
.due-dot .dd-n { font-family: var(--font-display); font-weight: 800; }
.due-dot .dd-l { color: var(--c-ink-faint); }
.due-dot.zero { opacity: .4; }

.start-cta { font-size: 1.3rem; min-height: 68px; }
.hero-clear { display: flex; align-items: center; gap: var(--sp-2); justify-content: center;
  color: var(--c-ink-soft); font-weight: 600; padding: var(--sp-3); }
.hero-clear .hc-emoji { font-size: 1.4rem; }
.allclear { text-align: center; padding: var(--sp-12) var(--sp-4); }
.allclear .emoji { font-size: 4rem; }
.allclear .allclear-ico svg { width: 1em; height: 1em; }
.allclear h2 { font-family: var(--font-display); margin: var(--sp-4) 0 var(--sp-2); }
.allclear p { color: var(--c-ink-soft); }

/* ---------- Decks (Bento) ---------- */
.deck-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
.deck-card { padding: var(--sp-5); position: relative; overflow: hidden; cursor: pointer;
  transition: transform var(--dur-tap) var(--ease-out); }
.deck-card:active { transform: scale(.98); }
.deck-card h3 { font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 var(--sp-3); padding-right: 64px; }
.deck-card .mastery-ring { position: absolute; top: var(--sp-4); right: var(--sp-4); width: 52px; height: 52px; }
.deck-card .mastery-ring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.deck-card .mastery-ring .bg { stroke: var(--c-desk-2); }
.deck-card .mastery-ring .fg { stroke: var(--c-success); transform: rotate(-90deg); transform-origin: 50% 50%; }
.deck-card .mastery-ring text { font-family: var(--font-display); font-weight: 800; font-size: 15px; fill: var(--c-ink); }
.deck-meta { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.deck-meta .pill.due { background: var(--c-accent); color: var(--c-on-accent); }
.deck-meta .pill.newp { background: oklch(68% .17 152 / .18); color: var(--c-good-base); }
.deck-card .deckbtn { margin-top: var(--sp-4); min-height: 48px; font-size: 1rem; }

/* Bento: Hero-Deck breit + Lichtkante, Tier-getönte Mastery-Ringe */
.deck-hero { box-shadow: var(--sh-hero); margin-bottom: var(--sp-4); padding: var(--sp-6) var(--sp-5); }
.deck-hero h3 { font-size: 1.7rem; }
.deck-hero .mastery-ring { width: 64px; height: 64px; }
.pill.tier { background: var(--c-base-sunken); color: var(--c-ink-soft); }
.pill.tier.t1 { background: oklch(74% .14 70 / .2); color: var(--c-hard-base); }
.pill.tier.t2 { background: oklch(66% .145 234 / .2); color: var(--c-easy-base); }
.pill.tier.t3 { background: oklch(72% .17 92 / .22); color: var(--c-level-d); }
.deck-card.t1 .mastery-ring .fg { stroke: var(--c-hard); }
.deck-card.t2 .mastery-ring .fg { stroke: var(--c-easy); }
.deck-card.t3 .mastery-ring .fg { stroke: var(--c-level); }
.deck-card { animation: deckrise .4s var(--ease-out) both; }
@keyframes deckrise { from { opacity: 0; transform: translateY(10px); } }

.import-fab { position: fixed; right: var(--sp-5); bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--sp-4));
  z-index: 40; width: auto; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-pill);
  box-shadow: var(--sh-pop), 0 4px 0 0 var(--c-accent-d, oklch(46% .19 264)); }

/* ---------- Import sheet ---------- */
.sheet-backdrop { position: fixed; inset: 0; z-index: 200; background: oklch(20% .02 265 / .5);
  display: flex; align-items: flex-end; justify-content: center; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.sheet { background: var(--c-paper); border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  width: 100%; max-width: 560px; padding: var(--sp-6); padding-bottom: calc(var(--safe-b) + var(--sp-6));
  box-shadow: var(--sh-pop); animation: slideup .35s var(--ease-spring); max-height: 88dvh; overflow-y: auto; }
@keyframes slideup { from { transform: translateY(100%); } }
.sheet h2 { font-family: var(--font-display); margin: 0 0 var(--sp-4); }
.dropzone { border: 2.5px dashed var(--c-paper-edge); border-radius: var(--r-card);
  padding: var(--sp-10) var(--sp-4); text-align: center; color: var(--c-ink-soft);
  transition: border-color var(--dur-tap), background var(--dur-tap); cursor: pointer; }
.dropzone.over { border-color: var(--c-accent); background: oklch(58% .21 264 / .06); }
.dropzone .big { font-size: 2.8rem; color: var(--c-accent); margin-bottom: var(--sp-2); }
.dropzone .big svg { width: 1em; height: 1em; }
.sheet h2.with-ico { display: flex; align-items: center; gap: .4em; }
.sheet h2.with-ico .ico-svg { color: var(--c-success); }
.import-progress { text-align: center; padding: var(--sp-6) 0; }
.import-progress .spin { width: 48px; height: 48px; border: 4px solid var(--c-desk-2);
  border-top-color: var(--c-accent); border-radius: 50%; margin: 0 auto var(--sp-4);
  animation: rot 1s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.sample-card { border: 1px solid var(--c-paper-edge); border-radius: var(--r-btn); padding: var(--sp-4);
  margin: var(--sp-4) 0; background: var(--c-desk); max-height: 200px; overflow: hidden; }

/* ---------- Stats / Heatmap ---------- */
.level-hero { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5);
  box-shadow: var(--sh-hero); margin-bottom: var(--sp-5); }
.lh-badge { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; color: var(--c-on-accent);
  background: linear-gradient(160deg, var(--c-level), var(--c-level-d));
  box-shadow: var(--sh-2), inset 0 1px 0 oklch(100% 0 0 / .4); }
.lh-body { flex: 1; min-width: 0; }
.lh-name { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; }
.lh-bar { height: 10px; border-radius: var(--r-pill); background: var(--c-base-sunken); overflow: hidden;
  margin: var(--sp-2) 0; box-shadow: var(--sh-inset); }
.lvl-bar-fill { display: block; height: 100%; width: 0; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--c-level), var(--c-xp)); transition: width .9s var(--ease-out); }
.lh-sub { font-size: var(--t-label); color: var(--c-ink-soft); font-weight: 600; }

.ach-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.ach { background: var(--c-surface); border: 1px solid var(--c-edge); border-radius: var(--r-tile);
  padding: var(--sp-4); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  box-shadow: var(--sh-1); text-align: center; }
.ach-ico { font-size: 2rem; color: var(--c-ink-ghost); }
.ach.done .ach-ico { color: var(--c-ember); }
.ach-name { font-weight: 700; font-size: .85rem; }
.ach.done { border-color: var(--c-level); }
.ach-badge { color: var(--c-success); font-weight: 800; font-size: 1.1rem; }
.ach-prog { width: 100%; height: 6px; border-radius: var(--r-pill); background: var(--c-base-sunken); overflow: hidden; }
.ach-prog span { display: block; height: 100%; background: var(--c-accent); border-radius: var(--r-pill); }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.stat-box { padding: var(--sp-5); text-align: center; }
.stat-box .v { font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1; }
.stat-box .k { color: var(--c-ink-soft); font-size: var(--t-label); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 700; margin-top: var(--sp-2); }
.heatmap { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; padding: var(--sp-5); }
.heat-cell { aspect-ratio: 1; border-radius: 3px; background: var(--heat-0); }
.heat-cell.l1 { background: var(--heat-1); }
.heat-cell.l2 { background: var(--heat-2); }
.heat-cell.l3 { background: var(--heat-3); }
.heat-cell.l4 { background: var(--heat-4); }

/* ---------- Profile ---------- */
.profile-row { display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--c-paper-edge); }
.profile-row:last-child { border-bottom: none; }
.profile-row .lbl { font-weight: 600; }
.toggle { width: 52px; height: 30px; border-radius: var(--r-pill); background: var(--c-desk-2);
  border: none; position: relative; cursor: pointer; transition: background var(--dur-tap); flex: 0 0 auto; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  border-radius: 50%; background: #fff; box-shadow: var(--sh-sm); transition: transform var(--dur-tap) var(--ease-spring); }
.toggle.on { background: var(--c-success); }
.toggle.on::after { transform: translateX(22px); }

/* ---------- iPad / Desktop ---------- */
@media (min-width: 1024px) {
  .shell { display: grid; grid-template-columns: 88px 1fr; padding-bottom: 0; }
  .tabbar { position: sticky; top: 0; left: 0; height: 100dvh; width: 88px;
    flex-direction: column; justify-content: center; gap: var(--sp-2); border-top: none;
    border-right: 1px solid var(--c-paper-edge); padding-top: var(--safe-t); }
  .tabbar button { flex: 0 0 auto; padding: var(--sp-3) 0; }
  .screen { max-width: 860px; padding-top: var(--sp-8); }
  .deck-grid { grid-template-columns: 1fr 1fr; }
  .import-fab { bottom: var(--sp-8); }
}