/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-duration: initial;
      --tw-animation-delay: 0s;
      --tw-animation-direction: normal;
      --tw-animation-duration: initial;
      --tw-animation-fill-mode: none;
      --tw-animation-iteration-count: 1;
      --tw-enter-blur: 0;
      --tw-enter-opacity: 1;
      --tw-enter-rotate: 0;
      --tw-enter-scale: 1;
      --tw-enter-translate-x: 0;
      --tw-enter-translate-y: 0;
      --tw-exit-blur: 0;
      --tw-exit-opacity: 1;
      --tw-exit-rotate: 0;
      --tw-exit-scale: 1;
      --tw-exit-translate-x: 0;
      --tw-exit-translate-y: 0;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
    --color-black: #000;
    --spacing: .25rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-2xl: 42rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --leading-relaxed: 1.625;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    --animate-spin: spin 1s linear infinite;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --color-background: var(--bg-base);
    --color-foreground: var(--text-primary);
    --color-card: var(--bg-elevated);
    --color-card-foreground: var(--text-primary);
    --color-primary: var(--coral);
    --color-primary-foreground: #fff;
    --color-coral-hover: var(--coral-hover);
    --color-secondary: var(--bg-elevated);
    --color-secondary-foreground: var(--text-primary);
    --color-muted: var(--bg-subtle);
    --color-muted-foreground: var(--text-secondary);
    --color-accent: var(--bg-subtle);
    --color-accent-foreground: var(--text-primary);
    --color-destructive: var(--danger);
    --color-destructive-foreground: #fff;
    --color-coral-soft: var(--coral-soft);
    --color-border: var(--border);
    --color-input: var(--border);
    --color-ring: var(--coral);
  }
}

@layer base {
  *, :before, :after {
    box-sizing: border-box;
  }
}

.collapse {
  visibility: collapse;
}

.visible {
  visibility: visible;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.relative {
  position: relative;
}

.inset-0 {
  inset: 0;
}

.top-1\/2 {
  top: 50%;
}

.top-4 {
  top: calc(var(--spacing) * 4);
}

.right-1 {
  right: var(--spacing);
}

.right-4 {
  right: calc(var(--spacing) * 4);
}

.left-1\/2 {
  left: 50%;
}

.z-50 {
  z-index: 50;
}

.container {
  width: 100%;
}

@media (min-width: 40rem) {
  .container {
    max-width: 40rem;
  }
}

@media (min-width: 48rem) {
  .container {
    max-width: 48rem;
  }
}

@media (min-width: 64rem) {
  .container {
    max-width: 64rem;
  }
}

@media (min-width: 80rem) {
  .container {
    max-width: 80rem;
  }
}

@media (min-width: 96rem) {
  .container {
    max-width: 96rem;
  }
}

.m-0 {
  margin: 0;
}

.mx-auto {
  margin-inline: auto;
}

.mt-1 {
  margin-top: var(--spacing);
}

.mt-2 {
  margin-top: calc(var(--spacing) * 2);
}

.mt-3 {
  margin-top: calc(var(--spacing) * 3);
}

.mt-5 {
  margin-top: calc(var(--spacing) * 5);
}

.mt-6 {
  margin-top: calc(var(--spacing) * 6);
}

.-mr-0\.5 {
  margin-right: calc(var(--spacing) * -.5);
}

.mb-1\.5 {
  margin-bottom: calc(var(--spacing) * 1.5);
}

.mb-2 {
  margin-bottom: calc(var(--spacing) * 2);
}

.mb-4 {
  margin-bottom: calc(var(--spacing) * 4);
}

.mb-6 {
  margin-bottom: calc(var(--spacing) * 6);
}

.mb-8 {
  margin-bottom: calc(var(--spacing) * 8);
}

.ml-0\.5 {
  margin-left: calc(var(--spacing) * .5);
}

.block {
  display: block;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.size-3 {
  width: calc(var(--spacing) * 3);
  height: calc(var(--spacing) * 3);
}

.size-3\.5 {
  width: calc(var(--spacing) * 3.5);
  height: calc(var(--spacing) * 3.5);
}

.size-4 {
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
}

.size-5 {
  width: calc(var(--spacing) * 5);
  height: calc(var(--spacing) * 5);
}

.size-6 {
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
}

.size-7 {
  width: calc(var(--spacing) * 7);
  height: calc(var(--spacing) * 7);
}

.h-8 {
  height: calc(var(--spacing) * 8);
}

.h-9 {
  height: calc(var(--spacing) * 9);
}

.h-10 {
  height: calc(var(--spacing) * 10);
}

.h-11 {
  height: calc(var(--spacing) * 11);
}

.max-h-96 {
  max-height: calc(var(--spacing) * 96);
}

.min-h-svh {
  min-height: 100svh;
}

.w-10 {
  width: calc(var(--spacing) * 10);
}

.w-full {
  width: 100%;
}

.max-w-2xl {
  max-width: var(--container-2xl);
}

.max-w-full {
  max-width: 100%;
}

.max-w-md {
  max-width: var(--container-md);
}

.max-w-sm {
  max-width: var(--container-sm);
}

.flex-1 {
  flex: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.-translate-x-1\/2 {
  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

.-translate-y-1\/2 {
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

.transform {
  transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
}

.animate-spin {
  animation: var(--animate-spin);
}

.cursor-pointer {
  cursor: pointer;
}

.list-none {
  list-style-type: none;
}

.appearance-none {
  appearance: none;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.gap-0\.5 {
  gap: calc(var(--spacing) * .5);
}

.gap-1 {
  gap: var(--spacing);
}

.gap-1\.5 {
  gap: calc(var(--spacing) * 1.5);
}

.gap-2 {
  gap: calc(var(--spacing) * 2);
}

.gap-3 {
  gap: calc(var(--spacing) * 3);
}

.gap-4 {
  gap: calc(var(--spacing) * 4);
}

.gap-6 {
  gap: calc(var(--spacing) * 6);
}

.gap-8 {
  gap: calc(var(--spacing) * 8);
}

.self-start {
  align-self: flex-start;
}

.truncate {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

.rounded-full {
  border-radius: 3.40282e38px;
}

.rounded-lg {
  border-radius: var(--radius-lg);
}

.rounded-md {
  border-radius: var(--radius-md);
}

.rounded-sm {
  border-radius: var(--radius-sm);
}

.border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}

.border-0 {
  border-style: var(--tw-border-style);
  border-width: 0;
}

.border-t {
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
}

.border-black\/10 {
  border-color: #0000001a;
}

@supports (color: color-mix(in lab, red, red)) {
  .border-black\/10 {
    border-color: color-mix(in oklab, var(--color-black) 10%, transparent);
  }
}

.border-border {
  border-color: var(--color-border);
}

.border-input {
  border-color: var(--color-input);
}

.border-transparent {
  border-color: #0000;
}

.bg-\[rgba\(43\,41\,38\,0\.35\)\] {
  background-color: #2b292659;
}

.bg-accent {
  background-color: var(--color-accent);
}

.bg-background {
  background-color: var(--color-background);
}

.bg-card {
  background-color: var(--color-card);
}

.bg-coral-soft {
  background-color: var(--color-coral-soft);
}

.bg-destructive {
  background-color: var(--color-destructive);
}

.bg-muted {
  background-color: var(--color-muted);
}

.bg-primary {
  background-color: var(--color-primary);
}

.bg-secondary {
  background-color: var(--color-secondary);
}

.bg-transparent {
  background-color: #0000;
}

.p-0 {
  padding: 0;
}

.p-1 {
  padding: var(--spacing);
}

.p-3 {
  padding: calc(var(--spacing) * 3);
}

.p-6 {
  padding: calc(var(--spacing) * 6);
}

.p-8 {
  padding: calc(var(--spacing) * 8);
}

.px-2 {
  padding-inline: calc(var(--spacing) * 2);
}

.px-3 {
  padding-inline: calc(var(--spacing) * 3);
}

.px-4 {
  padding-inline: calc(var(--spacing) * 4);
}

.px-6 {
  padding-inline: calc(var(--spacing) * 6);
}

.py-0\.5 {
  padding-block: calc(var(--spacing) * .5);
}

.py-1\.5 {
  padding-block: calc(var(--spacing) * 1.5);
}

.py-2 {
  padding-block: calc(var(--spacing) * 2);
}

.py-12 {
  padding-block: calc(var(--spacing) * 12);
}

.pt-8 {
  padding-top: calc(var(--spacing) * 8);
}

.pl-0 {
  padding-left: 0;
}

.text-center {
  text-align: center;
}

.text-2xl {
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
}

.text-base {
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
}

.text-lg {
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
}

.text-sm {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}

.text-xs {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
}

.leading-relaxed {
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
}

.font-medium {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}

.font-semibold {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}

.whitespace-nowrap {
  white-space: nowrap;
}

.text-\[var\(--coral-text\)\] {
  color: var(--coral-text);
}

.text-card-foreground {
  color: var(--color-card-foreground);
}

.text-destructive {
  color: var(--color-destructive);
}

.text-destructive-foreground {
  color: var(--color-destructive-foreground);
}

.text-foreground {
  color: var(--color-foreground);
}

.text-muted-foreground {
  color: var(--color-muted-foreground);
}

.text-primary-foreground {
  color: var(--color-primary-foreground);
}

.text-secondary-foreground {
  color: var(--color-secondary-foreground);
}

.italic {
  font-style: italic;
}

.opacity-0 {
  opacity: 0;
}

.opacity-60 {
  opacity: .6;
}

.opacity-70 {
  opacity: .7;
}

.opacity-100 {
  opacity: 1;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.shadow-\[var\(--shadow-md\)\] {
  --tw-shadow: var(--shadow-md);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.shadow-sm {
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.ring-2 {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.ring-ring {
  --tw-ring-color: var(--color-ring);
}

.ring-offset-1 {
  --tw-ring-offset-width: 1px;
  --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}

.filter {
  filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}

.transition-colors {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.transition-transform {
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.duration-150 {
  --tw-duration: .15s;
  transition-duration: .15s;
}

.outline-none {
  --tw-outline-style: none;
  outline-style: none;
}

.running {
  animation-play-state: running;
}

.group-focus-within\:opacity-100:is(:where(.group):focus-within *) {
  opacity: 1;
}

@media (hover: hover) {
  .group-hover\:opacity-100:is(:where(.group):hover *) {
    opacity: 1;
  }
}

.placeholder\:text-\[var\(--text-tertiary\)\]::placeholder {
  color: var(--text-tertiary);
}

.first\:border-t-0:first-child {
  border-top-style: var(--tw-border-style);
  border-top-width: 0;
}

.first\:pt-0:first-child {
  padding-top: 0;
}

@media (hover: hover) {
  .hover\:bg-\[var\(--coral-soft\)\]:hover {
    background-color: var(--coral-soft);
  }

  .hover\:bg-accent:hover {
    background-color: var(--color-accent);
  }

  .hover\:bg-background:hover {
    background-color: var(--color-background);
  }

  .hover\:bg-coral-hover:hover {
    background-color: var(--color-coral-hover);
  }

  .hover\:bg-muted:hover {
    background-color: var(--color-muted);
  }

  .hover\:text-accent-foreground:hover {
    color: var(--color-accent-foreground);
  }

  .hover\:text-destructive:hover {
    color: var(--color-destructive);
  }

  .hover\:text-foreground:hover {
    color: var(--color-foreground);
  }

  .hover\:opacity-90:hover {
    opacity: .9;
  }

  .hover\:opacity-100:hover {
    opacity: 1;
  }
}

.focus\:border-ring:focus {
  border-color: var(--color-ring);
}

.focus\:ring-\[3px\]:focus {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.focus\:ring-coral-soft:focus {
  --tw-ring-color: var(--color-coral-soft);
}

.focus\:outline-none:focus {
  --tw-outline-style: none;
  outline-style: none;
}

.focus-visible\:opacity-100:focus-visible {
  opacity: 1;
}

.focus-visible\:ring-2:focus-visible {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.focus-visible\:ring-ring\/40:focus-visible {
  --tw-ring-color: var(--color-ring);
}

@supports (color: color-mix(in lab, red, red)) {
  .focus-visible\:ring-ring\/40:focus-visible {
    --tw-ring-color: color-mix(in oklab, var(--color-ring) 40%, transparent);
  }
}

.focus-visible\:ring-ring\/50:focus-visible {
  --tw-ring-color: var(--color-ring);
}

@supports (color: color-mix(in lab, red, red)) {
  .focus-visible\:ring-ring\/50:focus-visible {
    --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
  }
}

.focus-visible\:outline-none:focus-visible {
  --tw-outline-style: none;
  outline-style: none;
}

.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:opacity-40:disabled {
  opacity: .4;
}

.disabled\:opacity-60:disabled {
  opacity: .6;
}

.aria-invalid\:border-destructive[aria-invalid="true"] {
  border-color: var(--color-destructive);
}

.aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
  --tw-ring-color: var(--color-destructive);
}

@supports (color: color-mix(in lab, red, red)) {
  .aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
    --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
  }
}

.data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
}

.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}

.data-\[state\=open\]\:animate-in[data-state="open"] {
  animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
}

.data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}

.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}

@media (prefers-reduced-motion: reduce) {
  .motion-reduce\:transition-none {
    transition-property: none;
  }
}

@media (min-width: 40rem) {
  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-end {
    align-items: flex-end;
  }

  .sm\:justify-end {
    justify-content: flex-end;
  }
}

.\[\&_\[data-icon\]\]\:text-\[var\(--danger\)\] [data-icon] {
  color: var(--danger);
}

.\[\&_\[data-icon\]\]\:text-\[var\(--success\)\] [data-icon] {
  color: var(--success);
}

@property --tw-animation-delay {
  syntax: "*";
  inherits: false;
  initial-value: 0s;
}

@property --tw-animation-direction {
  syntax: "*";
  inherits: false;
  initial-value: normal;
}

@property --tw-animation-duration {
  syntax: "*";
  inherits: false
}

@property --tw-animation-fill-mode {
  syntax: "*";
  inherits: false;
  initial-value: none;
}

@property --tw-animation-iteration-count {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-exit-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-exit-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

[data-sonner-toaster] {
  pointer-events: auto;
}

:root {
  --bg-base: #faf9f7;
  --bg-subtle: #f3f1ee;
  --bg-elevated: #fff;
  --border: #e8e5e0;
  --border-strong: #d8d4ce;
  --text-primary: #2b2926;
  --text-secondary: #6b6660;
  --text-tertiary: #9b958d;
  --coral: #f0603e;
  --coral-hover: #db4e2d;
  --coral-soft: #fbe7e0;
  --coral-text: #c4432a;
  --success: #4a9e6f;
  --warning: #d89a3e;
  --danger: #cc4b37;
  --info: #3e7ca6;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Consolas, monospace;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 15px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px #2b29260d;
  --shadow-md: 0 2px 8px #2b292614;
  color-scheme: light;
  color: var(--text-primary);
  background: var(--bg-base);
  font: var(--text-base) / 1.5 var(--font-sans);
  font-synthesis: none;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#root {
  box-sizing: border-box;
  flex-direction: column;
  min-height: 100svh;
  display: flex;
}

body {
  margin: 0;
}

h1, h2, h3 {
  font-family: var(--font-sans);
  color: var(--text-primary);
  font-weight: 600;
}

h1 {
  font-size: var(--text-2xl);
  margin: 0 0 var(--space-1);
}

h2 {
  font-size: var(--text-xl);
  margin: 0 0 var(--space-2);
}

p {
  margin: 0;
}

code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  color: var(--text-primary);
  padding: 2px 6px;
  display: inline-flex;
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes enter {
  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0),var(--tw-enter-translate-y, 0),0)scale3d(var(--tw-enter-scale, 1),var(--tw-enter-scale, 1),var(--tw-enter-scale, 1))rotate(var(--tw-enter-rotate, 0));
    filter: blur(var(--tw-enter-blur, 0));
  }
}

@keyframes exit {
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0),var(--tw-exit-translate-y, 0),0)scale3d(var(--tw-exit-scale, 1),var(--tw-exit-scale, 1),var(--tw-exit-scale, 1))rotate(var(--tw-exit-rotate, 0));
    filter: blur(var(--tw-exit-blur, 0));
  }
}
@font-face{font-display:block;font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(/assets/KaTeX_AMS-Regular-BQhdFMY1.woff2) format("woff2"),url(/assets/KaTeX_AMS-Regular-DMm9YOAa.woff) format("woff"),url(/assets/KaTeX_AMS-Regular-DRggAlZN.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Caligraphic-Bold-Dq_IR9rO.woff2) format("woff2"),url(/assets/KaTeX_Caligraphic-Bold-BEiXGLvX.woff) format("woff"),url(/assets/KaTeX_Caligraphic-Bold-ATXxdsX0.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Caligraphic-Regular-Di6jR-x-.woff2) format("woff2"),url(/assets/KaTeX_Caligraphic-Regular-CTRA-rTL.woff) format("woff"),url(/assets/KaTeX_Caligraphic-Regular-wX97UBjC.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Fraktur-Bold-CL6g_b3V.woff2) format("woff2"),url(/assets/KaTeX_Fraktur-Bold-BsDP51OF.woff) format("woff"),url(/assets/KaTeX_Fraktur-Bold-BdnERNNW.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Fraktur-Regular-CTYiF6lA.woff2) format("woff2"),url(/assets/KaTeX_Fraktur-Regular-Dxdc4cR9.woff) format("woff"),url(/assets/KaTeX_Fraktur-Regular-CB_wures.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Main-Bold-Cx986IdX.woff2) format("woff2"),url(/assets/KaTeX_Main-Bold-Jm3AIy58.woff) format("woff"),url(/assets/KaTeX_Main-Bold-waoOVXN0.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(/assets/KaTeX_Main-BoldItalic-DxDJ3AOS.woff2) format("woff2"),url(/assets/KaTeX_Main-BoldItalic-SpSLRI95.woff) format("woff"),url(/assets/KaTeX_Main-BoldItalic-DzxPMmG6.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(/assets/KaTeX_Main-Italic-NWA7e6Wa.woff2) format("woff2"),url(/assets/KaTeX_Main-Italic-BMLOBm91.woff) format("woff"),url(/assets/KaTeX_Main-Italic-3WenGoN9.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Main-Regular-B22Nviop.woff2) format("woff2"),url(/assets/KaTeX_Main-Regular-Dr94JaBh.woff) format("woff"),url(/assets/KaTeX_Main-Regular-ypZvNtVU.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(/assets/KaTeX_Math-BoldItalic-CZnvNsCZ.woff2) format("woff2"),url(/assets/KaTeX_Math-BoldItalic-iY-2wyZ7.woff) format("woff"),url(/assets/KaTeX_Math-BoldItalic-B3XSjfu4.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(/assets/KaTeX_Math-Italic-t53AETM-.woff2) format("woff2"),url(/assets/KaTeX_Math-Italic-DA0__PXp.woff) format("woff"),url(/assets/KaTeX_Math-Italic-flOr_0UB.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(/assets/KaTeX_SansSerif-Bold-D1sUS0GD.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Bold-DbIhKOiC.woff) format("woff"),url(/assets/KaTeX_SansSerif-Bold-CFMepnvq.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(/assets/KaTeX_SansSerif-Italic-C3H0VqGB.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Italic-DN2j7dab.woff) format("woff"),url(/assets/KaTeX_SansSerif-Italic-YYjJ1zSn.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(/assets/KaTeX_SansSerif-Regular-DDBCnlJ7.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Regular-CS6fqUqJ.woff) format("woff"),url(/assets/KaTeX_SansSerif-Regular-BNo7hRIc.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Script-Regular-D3wIWfF6.woff2) format("woff2"),url(/assets/KaTeX_Script-Regular-D5yQViql.woff) format("woff"),url(/assets/KaTeX_Script-Regular-C5JkGWo-.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size1-Regular-mCD8mA8B.woff2) format("woff2"),url(/assets/KaTeX_Size1-Regular-C195tn64.woff) format("woff"),url(/assets/KaTeX_Size1-Regular-Dbsnue_I.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size2-Regular-Dy4dx90m.woff2) format("woff2"),url(/assets/KaTeX_Size2-Regular-oD1tc_U0.woff) format("woff"),url(/assets/KaTeX_Size2-Regular-B7gKUWhC.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(data:font/woff2;base64,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) format("woff2"),url(/assets/KaTeX_Size3-Regular-CTq5MqoE.woff) format("woff"),url(/assets/KaTeX_Size3-Regular-DgpXs0kz.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size4-Regular-Dl5lxZxV.woff2) format("woff2"),url(/assets/KaTeX_Size4-Regular-BF-4gkZK.woff) format("woff"),url(/assets/KaTeX_Size4-Regular-DWFBv043.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Typewriter-Regular-CO6r4hn1.woff2) format("woff2"),url(/assets/KaTeX_Typewriter-Regular-C0xS9mPB.woff) format("woff"),url(/assets/KaTeX_Typewriter-Regular-D3Ib7_Hf.ttf) format("truetype")}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;position:relative;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.16.47"}.katex .katex-mathml{border:0;-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.newline{display:block}.katex .base{position:relative;white-space:nowrap;width:-webkit-min-content;width:-moz-min-content;width:min-content}.katex .base,.katex .strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathboldfrak,.katex .textboldfrak{font-family:KaTeX_Fraktur;font-weight:700}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .mathsfit,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .hbox{width:100%}.katex .hbox,.katex .thinbox{display:inline-flex;flex-direction:row}.katex .thinbox{max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline,.katex .hline,.katex .mfrac .frac-line,.katex .overline .overline-line,.katex .rule,.katex .underline .underline-line{min-height:1px}.katex .mspace{display:inline-block}.katex .smash{display:inline;line-height:0}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.inner,.katex .llap>.inner,.katex .rlap>.inner{position:absolute}.katex .clap>.fix,.katex .llap>.fix,.katex .rlap>.fix{display:inline-block}.katex .llap>.inner{right:0}.katex .clap>.inner,.katex .rlap>.inner{left:0}.katex .clap>.inner>span{margin-left:-50%;margin-right:50%}.katex .rule{border:0 solid;display:inline-block;position:relative}.katex .hline,.katex .overline .overline-line,.katex .underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.root{margin-left:.2777777778em;margin-right:-.5555555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .sizing.reset-size2.size1{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .sizing.reset-size2.size3{font-size:1.1666666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .sizing.reset-size2.size4{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .sizing.reset-size2.size6{font-size:1.6666666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .sizing.reset-size2.size10{font-size:3.4566666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .sizing.reset-size2.size11{font-size:4.1466666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .sizing.reset-size3.size1{font-size:.7142857143em}.katex .fontsize-ensurer.reset-size3.size2,.katex .sizing.reset-size3.size2{font-size:.8571428571em}.katex .fontsize-ensurer.reset-size3.size3,.katex .sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .sizing.reset-size3.size4{font-size:1.1428571429em}.katex .fontsize-ensurer.reset-size3.size5,.katex .sizing.reset-size3.size5{font-size:1.2857142857em}.katex .fontsize-ensurer.reset-size3.size6,.katex .sizing.reset-size3.size6{font-size:1.4285714286em}.katex .fontsize-ensurer.reset-size3.size7,.katex .sizing.reset-size3.size7{font-size:1.7142857143em}.katex .fontsize-ensurer.reset-size3.size8,.katex .sizing.reset-size3.size8{font-size:2.0571428571em}.katex .fontsize-ensurer.reset-size3.size9,.katex .sizing.reset-size3.size9{font-size:2.4685714286em}.katex .fontsize-ensurer.reset-size3.size10,.katex .sizing.reset-size3.size10{font-size:2.9628571429em}.katex .fontsize-ensurer.reset-size3.size11,.katex .sizing.reset-size3.size11{font-size:3.5542857143em}.katex .fontsize-ensurer.reset-size4.size1,.katex .sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .sizing.reset-size5.size1{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .sizing.reset-size5.size2{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .sizing.reset-size5.size3{font-size:.7777777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .sizing.reset-size5.size4{font-size:.8888888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .sizing.reset-size5.size6{font-size:1.1111111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .sizing.reset-size5.size7{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .sizing.reset-size5.size10{font-size:2.3044444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .sizing.reset-size5.size11{font-size:2.7644444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .sizing.reset-size7.size1{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .sizing.reset-size7.size3{font-size:.5833333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .sizing.reset-size7.size4{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .sizing.reset-size7.size6{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .sizing.reset-size7.size10{font-size:1.7283333333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .sizing.reset-size7.size11{font-size:2.0733333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .sizing.reset-size8.size1{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .sizing.reset-size8.size2{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .sizing.reset-size8.size3{font-size:.4861111111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .sizing.reset-size8.size4{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .sizing.reset-size8.size6{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .sizing.reset-size8.size7{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .sizing.reset-size8.size10{font-size:1.4402777778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .sizing.reset-size8.size11{font-size:1.7277777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .sizing.reset-size9.size1{font-size:.2893518519em}.katex .fontsize-ensurer.reset-size9.size2,.katex .sizing.reset-size9.size2{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .sizing.reset-size9.size3{font-size:.4050925926em}.katex .fontsize-ensurer.reset-size9.size4,.katex .sizing.reset-size9.size4{font-size:.462962963em}.katex .fontsize-ensurer.reset-size9.size5,.katex .sizing.reset-size9.size5{font-size:.5208333333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .sizing.reset-size9.size6{font-size:.5787037037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .sizing.reset-size9.size7{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .sizing.reset-size9.size8{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .sizing.reset-size9.size10{font-size:1.2002314815em}.katex .fontsize-ensurer.reset-size9.size11,.katex .sizing.reset-size9.size11{font-size:1.4398148148em}.katex .fontsize-ensurer.reset-size10.size1,.katex .sizing.reset-size10.size1{font-size:.2410800386em}.katex .fontsize-ensurer.reset-size10.size2,.katex .sizing.reset-size10.size2{font-size:.2892960463em}.katex .fontsize-ensurer.reset-size10.size3,.katex .sizing.reset-size10.size3{font-size:.337512054em}.katex .fontsize-ensurer.reset-size10.size4,.katex .sizing.reset-size10.size4{font-size:.3857280617em}.katex .fontsize-ensurer.reset-size10.size5,.katex .sizing.reset-size10.size5{font-size:.4339440694em}.katex .fontsize-ensurer.reset-size10.size6,.katex .sizing.reset-size10.size6{font-size:.4821600771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .sizing.reset-size10.size7{font-size:.5785920926em}.katex .fontsize-ensurer.reset-size10.size8,.katex .sizing.reset-size10.size8{font-size:.6943105111em}.katex .fontsize-ensurer.reset-size10.size9,.katex .sizing.reset-size10.size9{font-size:.8331726133em}.katex .fontsize-ensurer.reset-size10.size10,.katex .sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .sizing.reset-size10.size11{font-size:1.1996142719em}.katex .fontsize-ensurer.reset-size11.size1,.katex .sizing.reset-size11.size1{font-size:.2009646302em}.katex .fontsize-ensurer.reset-size11.size2,.katex .sizing.reset-size11.size2{font-size:.2411575563em}.katex .fontsize-ensurer.reset-size11.size3,.katex .sizing.reset-size11.size3{font-size:.2813504823em}.katex .fontsize-ensurer.reset-size11.size4,.katex .sizing.reset-size11.size4{font-size:.3215434084em}.katex .fontsize-ensurer.reset-size11.size5,.katex .sizing.reset-size11.size5{font-size:.3617363344em}.katex .fontsize-ensurer.reset-size11.size6,.katex .sizing.reset-size11.size6{font-size:.4019292605em}.katex .fontsize-ensurer.reset-size11.size7,.katex .sizing.reset-size11.size7{font-size:.4823151125em}.katex .fontsize-ensurer.reset-size11.size8,.katex .sizing.reset-size11.size8{font-size:.578778135em}.katex .fontsize-ensurer.reset-size11.size9,.katex .sizing.reset-size11.size9{font-size:.6945337621em}.katex .fontsize-ensurer.reset-size11.size10,.katex .sizing.reset-size11.size10{font-size:.8336012862em}.katex .fontsize-ensurer.reset-size11.size11,.katex .sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .accent .accent-body{position:relative}.katex .accent .accent-body:not(.accent-full){width:0}.katex .overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex svg{fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .stretchy:after,.katex .stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}
.inspector {
  position: relative;
  flex-shrink: 0;
  /* Fängt den Fall ab, dass eine auf einem breiten Bildschirm gespeicherte Breite später
     in einem schmaleren Fenster geladen wird — sonst liefe das Layout über. */
  max-width: 100%;
  background: var(--bg-subtle);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Sanfter Übergang beim Vollbild-Umschalten; beim manuellen Ziehen (--resizing)
     ausgeschaltet, sonst hinkt die Breite dem Mauszeiger tweenend hinterher. */
  transition: width 0.2s ease;
}

.inspector--resizing {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .inspector {
    transition: none;
  }
}

/* Ziehbarer Rand an der linken Kante (UI-5). Breiter Hit-Bereich (6px), aber optisch
   dezent — erst bei Hover/Ziehen sichtbar, überlappt bewusst leicht die Border. */
.inspector-resize-handle {
  position: absolute;
  left: -3px;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 2;
  background: transparent;
  touch-action: none;
}

.inspector-resize-handle:hover {
  background: var(--border-strong);
}

.inspector-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border);
}

.inspector-header-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.inspector-board-title {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.inspector-fullscreen-toggle {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  appearance: none;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.inspector-fullscreen-toggle:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.inspector-fullscreen-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--coral-soft);
}

/* Schwebender Wiedereinblenden-Knopf bei eingeklappter Leiste — Spiegelbild von
   .sidebar-expand-btn (Sidebar.css). position:fixed, weil die Leiste dann gar nicht
   mehr im DOM steht (siehe Inspector.tsx, collapsed-Zweig). */
.inspector-expand-btn {
  position: fixed;
  right: var(--space-3);
  top: var(--space-3);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  appearance: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.inspector-expand-btn:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.inspector-expand-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--coral-soft);
}

@media (prefers-reduced-motion: reduce) {
  .inspector-fullscreen-toggle {
    transition: none;
  }
}

.inspector-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.inspector-anchor {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  word-break: break-all;
}

/* Tab-Leiste: ruhige Text-Labels, aktiver Tab mit Coral-Unterstrich (DESIGN.md). */
.inspector-tabs {
  display: flex;
  gap: var(--space-2);
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--border);
}

.inspector-tab {
  appearance: none;
  background: none;
  border: none;
  padding: var(--space-3) var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.inspector-tab:hover {
  color: var(--text-primary);
}

.inspector-tab--active {
  color: var(--coral-text);
  border-bottom-color: var(--coral);
  font-weight: 500;
}

/* Container des eingebetteten PageEditors (Content-Tab). Der Editor bringt eine eigene
   .affine-page-viewport mit height:100% + eigenem Scroll mit. */
.inspector-doc {
  flex: 1;
  min-height: 0;
  background: var(--bg-elevated);
  overflow: hidden;

  /* BlockSuites Dokument-Container ist für eine Vollseiten-Ansicht ausgelegt: 96px
     Seitenpolsterung und max-width 944px (gemessen). In der schmalen Seitenleiste bliebe
     davon kaum Platz für den Text. Beides hängt an BlockSuites eigenen Theme-Variablen —
     die sind der vorgesehene Hebel, kein Überschreiben fremder Regeln. */
  --affine-editor-width: 100%;
  --affine-editor-side-padding: 0px;
}

/* Etwas Luft zwischen Tab-Leiste und erster Karte (der Container selbst hat oben 0). */
.inspector-doc .affine-page-root-block-container {
  padding-top: var(--space-3);
}

.inspector-doc page-editor {
  display: block;
  height: 100%;
}

/* Kopfzeile innerhalb JEDER Note-Karte: Tags + Lern-Schalter. Ruhig gehalten
   (--bg-subtle, dünne Trennlinie) — sie begleitet den Text, konkurriert nicht mit ihm
   (DESIGN.md). Der Host-<div> kommt aus NoteCardHeaders.tsx. */
.note-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.note-card-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.note-learn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Schalter im Stil eines Switches: Zustand nicht NUR über Farbe, sondern auch über die
   Position des Knopfes erkennbar (Accessibility). */
.note-learn-switch {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: none;
  background: none;
  padding: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
}

.note-learn-switch:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.note-learn-switch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--coral-soft);
  border-radius: var(--radius-sm);
}

.note-learn-track {
  width: 30px;
  height: 18px;
  border-radius: 9px;
  background: var(--border-strong);
  position: relative;
  transition: background-color 0.15s ease;
}

.note-learn-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg-elevated);
  transition: transform 0.15s ease;
}

.note-learn-switch--on {
  color: var(--text-primary);
}

.note-learn-switch--on .note-learn-track {
  background: var(--coral);
}

.note-learn-switch--on .note-learn-thumb {
  transform: translateX(12px);
}

@media (prefers-reduced-motion: reduce) {
  .note-learn-track,
  .note-learn-thumb {
    transition: none;
  }
}

/* Notes als abgegrenzte Karten statt durchgehendem Fließtext.
   Der Page-Root rendert alle Notes des Boards als direkte Geschwister untereinander;
   ohne diese Regeln verschmelzen sie optisch zu einem einzigen Textblock.
   BlockSuite-Blöcke leben im Light DOM (BlockComponent = ShadowlessElement), sind also
   von außen per Element-Selektor erreichbar — gleiches Muster wie in
   BlockSuiteBoard.css für den Canvas. Bewusst NICHT in @layer: BlockSuites Theme
   injiziert ungelayerte globale Resets, die jede gelayerte Regel schlagen würden
   (siehe Kommentar in src/index.css). */
.inspector-doc affine-note {
  display: block;
  /* Nahezu volle Containerbreite; die schmale Gasse verhindert nur, dass der Rahmen an
     der Bildlaufleiste klebt. */
  margin: 0 var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  /* Horizontal bewusst OHNE Polsterung, damit die Kopfzeile die volle Kartenbreite
     einnimmt; den Textabstand setzt .affine-note-block-container weiter unten.
     BEWUSST kein overflow:hidden — das würde die Tag-Vorschlagsliste abschneiden. */
  padding: 0 0 var(--space-2);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Abstand zwischen Kartenrand und Text. Nötig, weil die Absätze selbst KEINEN
   Seitenabstand haben (nachgemessen: padding 0) — die früheren 96px kamen allein vom
   äußeren Dokument-Container, der oben auf 0 gesetzt ist. */
.inspector-doc affine-note .affine-note-block-container {
  padding: 0 var(--space-4);
}

/* Aktive Note (Auswahl auf dem Canvas oder Sprung aus dem Kontext-Tab). Wird per DOM
   gesetzt, siehe ACTIVE_NOTE_CLASS in Inspector.tsx. */
.inspector-doc affine-note.mimir-note--active {
  border-color: var(--coral);
  box-shadow: 0 0 0 2px var(--coral-soft);
}

@media (prefers-reduced-motion: reduce) {
  .inspector-doc affine-note {
    transition: none;
  }
}

/* Panel für Lernen-/Quellen-Tab. position:relative, damit der Quellen-Such-Overlay
   (position:absolute inset:0) darin eingespannt ist. */
.inspector-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-6);
  position: relative;
}

.learn {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Board-weite Aktion, immer ganz oben im Lernen-Tab (UI-5: ex-Headerleiste/-Floating-
   Button) — bewusst die einzige Primär-Aktion des Tabs (DESIGN.md: sparsam), daher
   ist "Zum Lernen hinzufügen" darunter sekundär. */
.learn-cta {
  width: 100%;
}

.learn-empty {
  padding: var(--space-6);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* Kurzes Rubrik-Etikett („Dieses Board", „Verlauf") — Versalien sind hier okay, weil es
   ein zwei-Wort-Marker ist. Für ganze SÄTZE bewusst NICHT verwenden: eine Frage in
   Grossbuchstaben liest sich wie Geschrei (siehe .learn-question). */
.learn-field-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}

/* Direkte Ansprache an den Nutzer („Wie gut erinnerst du dich?") — normale Schreibung,
   etwas grösser, damit die eigentliche Handlungsaufforderung nicht wie Kleingedrucktes
   zwischen den Rubrik-Etiketten untergeht. */
.learn-question {
  font-size: var(--text-sm);
  color: var(--text-primary);
}

/* „Verlauf ●●●●●" in EINER Zeile statt Label über Punkten — eine Stapel-Ebene weniger. */
.learn-history-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.learn-history-row .learn-field-label {
  margin-bottom: 0;
}

.learn-new {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.learn-input {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font: var(--text-sm) / 1.5 var(--font-sans);
  color: var(--text-primary);
  resize: vertical;
}

.learn-input:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 2px var(--coral-soft);
}

/* Kartenliste */
.learn-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.learn-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.learn-item-text {
  min-width: 0;
}

.learn-item-front {
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: 500;
}

.learn-item-back {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: 2px;
}

.learn-item-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Fälligkeit als Badge — gleiche Bauform wie die übrigen Badges dieser Oberfläche
   (.learn-state-badge im Lernen-Tab, .lernuebersicht-semester-due in der Übersicht).
   Neutral bewusst auf --bg-elevated statt --bg-subtle: die Note-Kopfzeile, auf der das
   Badge sitzt, IST bereits --bg-subtle — ein gleichfarbiges Badge wäre unsichtbar. */
.learn-due {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px var(--space-2);
  white-space: nowrap;
}

/* Fällig = das eine, was gerade Aufmerksamkeit verdient. Coral gefüllt und ohne Rahmen,
   weil der Farbkontrast allein schon trägt; font-weight bleibt bei 500 statt 600 — mit
   Füllung wären beide Betonungen zusammen zu laut. */
.learn-due--now {
  color: var(--coral-text);
  background: var(--coral-soft);
  border-color: transparent;
  font-weight: 500;
}

.learn-del {
  appearance: none;
  border: none;
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: 1;
  padding: 2px;
}

.learn-del:hover {
  color: var(--danger);
}

/* Review-Modus */
.learn-review-progress {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.learn-card-face {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.learn-face-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}

.learn-face-text {
  font-size: var(--text-base);
  color: var(--text-primary);
  white-space: pre-wrap;
}

/* ---- Die zwei Ebenen im Lernen-Tab (LearnTab.tsx) ----
   Board-Ebene oben, Note-Ebene darunter — durch Weissraum und eine leise Trennlinie
   geschieden, damit klar ist, worauf sich welcher Knopf bezieht. */
.learn-board-block,
.learn-note-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* KEIN align-items:flex-start — das schrumpfte die Chip-Grid auf Mindestbreite
     zusammen (eine 159px-Spalte in einer 532px-Leiste). Elemente, die NICHT über die
     volle Breite laufen sollen, setzen stattdessen selbst align-self. */
}

.learn-board-block > .btn-primary,
.learn-board-block > .btn-secondary,
.learn-note-block > .btn-secondary,
.learn-note-block > .btn-ghost {
  align-self: flex-start;
}

/* Eyebrow + Zustands-Etikett in einer Zeile, statt das Etikett allein auf eine eigene
   Zeile zu setzen — spart eine Stapel-Ebene im ohnehin langen Tab. */
.learn-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.learn-block-head .learn-field-label {
  margin-bottom: 0;
}

.learn-block-head-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.learn-note-block {
  border-top: 1px solid var(--border);
  padding-top: var(--space-4);
  margin-top: var(--space-2);
}

.learn-board-summary {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* FSRS-Zustand als eigenes Etikett — bewusst getrennt von den Zahlen-Chips, weil er
   etwas anderes aussagt als jeder einzelne Wert. */
.learn-state-badge {
  align-self: flex-start;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
}

.learn-panel-practice-note {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-2);
}

.learn-grades {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  width: 100%;
}

/* Die vier Knöpfe lesen sich als SKALA, nicht als „einer besonders + drei neutral":
   jeder trägt links einen Farbpunkt in der Reihenfolge Rot→Orange→Blau→Grün. Das ist
   dieselbe Skala wie die Balken der Lernübersicht (rating-distribution.tsx), damit
   Bewerten und Auswerten dieselbe Sprache sprechen. Flächen bleiben neutral —
   DESIGN.md: „Farbe ist sparsam". Vorher war NUR „Nochmal" eingefärbt, wodurch er
   zwischen drei identisch grauen Knöpfen wie vorausgewählt wirkte. */
.learn-grade {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: var(--text-sm);
  cursor: pointer;
  text-align: left;
}

.learn-grade:hover {
  background: var(--bg-subtle);
}

.learn-grade-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.learn-grade-label::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--grade-dot, var(--border-strong));
}

.learn-grade--again {
  --grade-dot: var(--danger);
}

.learn-grade--hard {
  --grade-dot: var(--warning);
}

.learn-grade--good {
  --grade-dot: var(--info);
}

.learn-grade--easy {
  --grade-dot: var(--success);
}

/* Wann die Note nach dieser Bewertung wieder drankommt (previewIntervals in fsrs.ts).
   Macht die Wahl konkret statt abstrakt. Im Übe-Modus bewusst nicht gerendert — dort
   verschiebt sich der Rhythmus ja nicht. */
.learn-grade-interval {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  padding-left: calc(8px + var(--space-2));
}

/* KI-Vorschlag im LearnSession-Grading (Phase 11) — hervorgehoben, aber nicht
   vorausgewählt: der Klick bleibt die einzige Bestätigung. */
.learn-grade--suggested {
  border-color: var(--coral);
  box-shadow: 0 0 0 2px var(--coral-soft);
}

/* ---- Lern-Session-Panel (LearnSessionPanel.tsx) ----
   Ehemals LearnSession.css / eigenständiges Overlay-Popup — jetzt normaler In-Flow-
   Inhalt des Lernen-Tabs, deshalb ohne Overlay/Modal-Hülle (kein position:fixed, kein
   z-index, keine eigene max-width/Zentrierung). */
.learn-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.learn-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.learn-panel-header h2 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.learn-panel-progress {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}

.learn-panel-status {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.learn-panel-status--error {
  color: var(--danger);
}

/* Modus-Wahl beim Session-Start */
.learn-panel-mode-select {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.learn-panel-mode-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
}

.learn-panel-mode-option:hover {
  border-color: var(--coral);
  background: var(--coral-soft);
}

.learn-panel-mode-option-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.learn-panel-mode-option-desc {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* Frage-Karte */
.learn-panel-question {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.learn-panel-question-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.learn-panel-mode-badge {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-tertiary);
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  white-space: nowrap;
}

.learn-panel-question-text {
  font-weight: 500;
  font-size: var(--text-base);
}

.learn-panel-answer {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-primary);
  resize: vertical;
}

.learn-panel-answer:disabled {
  background: var(--bg-subtle);
  color: var(--text-secondary);
}

.learn-panel-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.learn-panel-actions-spacer {
  flex: 1;
}

/* "Deine Antwort"-Echo — zeigt die eigene Antwort während/nach der Bewertung erneut,
   sonst verschwindet sie beim Übergang zum Feedback spurlos. */
.learn-panel-answer-echo {
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}

.learn-panel-answer-echo-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-bottom: var(--space-1);
}

.learn-panel-answer-echo-text {
  font-size: var(--text-sm);
  color: var(--text-primary);
  white-space: pre-wrap;
}

/* Verdict-Badge — auf einen Blick, vor dem Fließtext */
.learn-panel-verdict {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  width: fit-content;
}

.learn-panel-verdict--correct {
  background: color-mix(in srgb, var(--success) 15%, transparent);
  color: var(--success);
}

.learn-panel-verdict--partial {
  background: color-mix(in srgb, var(--warning) 15%, transparent);
  color: var(--warning);
}

.learn-panel-verdict--incorrect {
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  color: var(--danger);
}

.learn-panel-reasoning-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-bottom: var(--space-1);
}

/* Ergänzungs-Kästen — bewusst vom neutralen "Warum"-Fließtext optisch abgesetzt, statt
   als lose Liste im selben Absatz (das war der Grund, warum Frage/Antwort/Ergänzung
   bisher schwer auseinanderzuhalten waren). */
.learn-panel-callout {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
}

.learn-panel-callout-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
}

.learn-panel-callout-label svg {
  width: 13px;
  height: 13px;
}

.learn-panel-callout ul {
  margin: 0;
  padding-left: var(--space-4);
}

.learn-panel-callout--missed {
  background: color-mix(in srgb, var(--warning) 12%, transparent);
}

.learn-panel-callout--missed .learn-panel-callout-label {
  color: var(--warning);
}

.learn-panel-callout--misconception {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.learn-panel-callout--misconception .learn-panel-callout-label {
  color: var(--danger);
}

.learn-panel-truth {
  padding: var(--space-4);
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
}

.learn-panel-truth-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}

/* ---- Quellen-Tab (Phase 7) ---- */
.src {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.src-link {
  color: var(--coral-text);
}

.src-error {
  color: var(--danger);
  font-size: var(--text-sm);
}

.src-muted {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.src-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.src-item {
  padding: var(--space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.src-item-title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.src-item-meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}

.src-item-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* Kontext-Tab (Verlinkt/Ähnlich/Karten): macht .src-item zu einem nativen, klickbaren
   Button (Sprung zur Zielnote) statt einer reinen Anzeige-Karte. */
.src-item.ctx-clickable {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.src-item.ctx-clickable:hover {
  background: var(--bg-subtle);
}

/* Zwischenüberschrift je Tag-Gruppe in „Verlinkt" — hebt sich von .meta-section-label ab. */
.ctx-group-heading {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-3);
  margin-bottom: var(--space-1);
}

.src-action {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  font-size: var(--text-xs);
  color: var(--coral-text);
  cursor: pointer;
}

.src-action:hover {
  text-decoration: underline;
}

.src-action--remove {
  color: var(--text-tertiary);
}

.src-action--remove:hover {
  color: var(--danger);
}

/* Such-Dialog: leichtes Overlay über dem Panel */
.src-search-overlay {
  position: absolute;
  inset: 0;
  background: rgba(43, 41, 38, 0.15);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  z-index: 10;
}

.src-search {
  width: 100%;
  max-width: 320px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.src-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: 320px;
  overflow-y: auto;
}

.src-result {
  text-align: left;
  appearance: none;
  border: none;
  background: none;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.src-result:hover {
  background: var(--bg-subtle);
}

/* Ephemerer PDF-Viewer: füllt das Panel */
.src-pdf {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
}

.src-pdf-close {
  align-self: flex-start;
}

.src-pdf-frame {
  flex: 1;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* ---- Quellen & Attribute (Phase 8): Tags + Attribute + Quellen ---- */
.meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.meta-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.meta-section-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}

.meta-muted {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

/* Tags: neutrale, warm-graue Badges (DESIGN.md: Coral ist der einzige Akzent) */
.tag-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* .tag-badge / .tag-badge-x entfernt (UI-3): Tags werden jetzt ausschließlich über
   <TagPill> (components/ui/tag-pill.tsx) dargestellt. */

.tag-add-btn {
  appearance: none;
  border: 1px dashed var(--border-strong);
  background: none;
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: pointer;
}

.tag-add-btn:hover {
  color: var(--text-primary);
  border-color: var(--text-tertiary);
}

.tag-add {
  position: relative;
}

.tag-input {
  background: var(--bg-elevated);
  border: 1px solid var(--coral);
  box-shadow: 0 0 0 2px var(--coral-soft);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-primary);
  width: 8rem;
  outline: none;
}

.tag-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 15;
  min-width: 10rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  padding: var(--space-1);
}

.tag-suggestion {
  text-align: left;
  appearance: none;
  border: none;
  background: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-primary);
  cursor: pointer;
}

.tag-suggestion:hover {
  background: var(--bg-subtle);
}

.tag-suggestion--new {
  color: var(--text-secondary);
  font-style: italic;
}

/* Attribute: dynamisch gerendert, ein Feld je attribute_defs-Zeile */
.attr-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.attr-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.attr-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.attr-input {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-primary);
  max-width: 60%;
}

.attr-input:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 2px var(--coral-soft);
}

.attr-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--coral);
}

/* Ephemerer PDF-Viewer als Overlay über dem ganzen Panel */
.src-pdf-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

.src-pdf-close {
  align-self: flex-start;
}

/* ---- FSRS-Lern-Zustand als Stat-Chips (Lernen-Tab, pro Note) ----
   Ersetzt die frühere reine Textzeile ("fällig · Wiederholung · Stabilität 1.3 d ·
   Reps 1 · Lapses 0") — dieselben Zahlen, aber scannbar statt einem Fließtext-Wurm. */
.learn-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-2);
}

.learn-stat-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-width: 0;
}

.learn-stat-chip svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--text-tertiary);
}

.learn-stat-chip-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.learn-stat-chip-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-tertiary);
}

.learn-stat-chip-value {
  font-size: var(--text-sm);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.learn-stat-chip--due svg,
.learn-stat-chip--due .learn-stat-chip-value {
  color: var(--coral-text);
}

.learn-stat-chip--due {
  border-color: var(--coral-soft);
}

.learn-stat-chip--lapses svg,
.learn-stat-chip--lapses .learn-stat-chip-value {
  color: var(--danger);
}

/* ---- Bewertungsverlauf (node_review_events) ---- */
.review-history {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.review-history-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.review-history-dot--again {
  background: var(--danger);
}

.review-history-dot--hard {
  background: var(--warning);
}

.review-history-dot--good {
  background: var(--success);
  opacity: 0.75;
}

.review-history-dot--easy {
  background: var(--success);
}

/* "Erklär's mir" — immer Nochmal, per Konstruktion, nicht per Bewertung: Ring statt
   Füllung, damit "wusste es wirklich nicht" optisch von einem echten Fehlversuch
   unterscheidbar bleibt. */
.review-history-dot--reveal {
  background: transparent;
  border: 1.5px solid var(--danger);
  width: 6px;
  height: 6px;
}

.review-history-empty {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.review-history-overflow {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* ---- RichText (LaTeX + Code, siehe src/components/ui/rich-text.tsx) ----
   Basistypografie an --font-sans/--text-sm angelehnt (passt in den Fließtext-Kontext
   des Lernen-Tabs), Code-Block-Theme handgebaut auf den Design-Tokens statt eines
   generischen highlight.js-Themes, damit es zur warm-neutralen Palette passt. */
.rich-text {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: inherit;
}

.rich-text p {
  margin: 0 0 var(--space-2);
}

.rich-text p:last-child {
  margin-bottom: 0;
}

.rich-text code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-subtle);
  border-radius: 4px;
  padding: 1px 5px;
  display: inline;
}

.rich-text pre {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  overflow-x: auto;
  margin: var(--space-2) 0;
}

.rich-text pre code {
  background: none;
  padding: 0;
  font-size: var(--text-xs);
  line-height: 1.5;
}

.rich-text .katex {
  font-size: 1em;
}

/* Minimales hljs-Token-Set, an die Palette angelehnt statt eines fertigen Themes. */
.rich-text .hljs-keyword,
.rich-text .hljs-built_in {
  color: var(--coral-text);
}

.rich-text .hljs-string,
.rich-text .hljs-attr {
  color: var(--success);
}

.rich-text .hljs-comment {
  color: var(--text-tertiary);
  font-style: italic;
}

.rich-text .hljs-number,
.rich-text .hljs-literal {
  color: var(--warning);
}

.rich-text .hljs-title,
.rich-text .hljs-function {
  color: var(--text-primary);
  font-weight: 600;
}

/* ---- Aufgaben-Tab (AufgabenTab.tsx) ----
   .task-tab bekommt kein eigenes Layout-Grundgerüst — .learn-field-label/.learn-empty
   werden bewusst mitgenutzt (gleiche Rubrik-Optik wie die anderen Board-Level-Tabs). */
.task-tab {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.task-summary {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Kartenliste — 1:1 von .learn-list/.learn-item übernommen. list-style/padding/margin
   zurückgesetzt: das Projekt fährt bewusst ohne Tailwind-Preflight (siehe index.css),
   ein rohes <ul> behält sonst den UA-Standardeinzug (padding-inline-start: 40px). */
.task-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Eine Zeile: Checkbox, Titel (schrumpft mit Ellipsis), Datum, Löschen. Datum
   (natives <input type="date">, ~119px Mindestbreite, gemessen) und Checkbox bleiben
   fix, nur der Titel gibt nach — bei sehr schmaler Leiste (Resize-Minimum 280px, siehe
   useInspectorWidth.ts) wird der Titel entsprechend kurz. */
.task-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.task-checkbox {
  /* flex:none statt nur flex-shrink:0 — BlockSuite setzt global (ungelayert)
     "input { flex: 1 0 0% }"; mit flex-basis:0% ignoriert der Flex-Algorithmus die
     width-Angabe komplett, wodurch die Checkbox auf ~204px wuchs (gemessen). flex:none
     setzt auch flex-basis zurück auf auto, erst dann greift width wieder. */
  flex: none;
  width: 16px;
  height: 16px;
  accent-color: var(--coral);
  cursor: pointer;
}

.task-title {
  flex: 1;
  /* Nie ganz auf 0 schrumpfen (bei Resize-Minimum 280px sonst unsichtbar) — Rest per
     Ellipsis abgeschnitten, aber immer ein paar Zeichen lesbar. */
  min-width: 28px;
  font-size: var(--text-sm);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}

/* Erledigt: gedämpft + durchgestrichen, statt die Zeile ganz verschwinden zu lassen —
   bleibt als kurzer Beleg "das war schon fertig" sichtbar, wandert aber ans Listenende
   (siehe AufgabenTab.tsx Sortierung). */
.task-item--done .task-title {
  color: var(--text-tertiary);
  text-decoration: line-through;
}

.task-title-input {
  flex: 1;
  min-width: 0;
}

.task-date {
  /* Selbes flex-basis-Problem wie .task-checkbox — flex:none statt nur flex-shrink. */
  flex: none;
  /* Ohne Kalender-Icon (s.u.) reserviert Chrome trotzdem seine Standardbreite (~119px)
     für das Feld — width:auto lässt es auf die tatsächlichen Datumssegmente schrumpfen,
     padding gibt nur noch etwas Luft links/rechts statt Platz für das Icon. */
  width: auto;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  cursor: pointer;
}

.task-date::-webkit-calendar-picker-indicator {
  display: none;
}

.task-date:hover,
.task-date:focus-visible {
  border-color: var(--border);
  background: var(--bg-subtle);
  outline: none;
}
/* .learn-panel-* selbst ist bereits breiten-agnostisch (Inspector.css) — hier nur der
   Seiten-Rahmen: zentriert, mit Lesebreite begrenzt, damit Fragen/Antworten auf breiten
   (Desktop-Kurzsprung) Bildschirmen nicht über die volle Breite auseinandergezogen werden. */
.learn-session-page {
  /* width:100% ist nötig, NICHT redundant: .app-layout-main ist ein Flex-Container, und
     `margin: 0 auto` auf einem Flex-Item hebelt das Strecken aus — ohne die Breite
     schrumpft die Seite auf Inhaltsbreite (gemessen: 504px statt 640px). */
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}

@media (max-width: 768px) {
  .learn-session-page {
    padding: var(--space-4);
  }
}
.trash-page {
  padding: var(--space-8);
  max-width: 40rem;
}

.trash-empty {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  margin-top: var(--space-4);
}

.trash-list {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.trash-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.trash-item-title {
  font-size: var(--text-base);
  color: var(--text-primary);
}

.trash-item-actions {
  display: flex;
  gap: var(--space-2);
}
.lernuebersicht-page {
  padding: var(--space-8) var(--space-12);
}

.lernuebersicht-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

.lernuebersicht-empty {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  margin-top: var(--space-4);
}

.lernuebersicht-semester {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.lernuebersicht-semester-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.lernuebersicht-semester-title {
  flex: 0 1 auto;
  max-width: 16rem;
  min-width: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Nimmt den verbleibenden Platz zwischen Titel und Aktionen ein — deshalb hier statt
   als eigene Zeile unter dem Header. */
.lernuebersicht-semester-header-bar {
  flex: 1;
  min-width: 120px;
}

.lernuebersicht-semester-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.lernuebersicht-boards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.lernuebersicht-board-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
}

.lernuebersicht-board-title {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lernuebersicht-board-title:hover {
  color: var(--coral-text);
}

.lernuebersicht-board-learn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--coral-text);
  background: var(--coral-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  text-decoration: none;
  white-space: nowrap;
}

.lernuebersicht-board-learn:hover {
  background: var(--coral-soft);
  color: var(--coral-hover);
}

/* Steht etwas an, ist das die primäre Aktion der Zeile — deshalb gefüllt statt zart.
   Ohne Fälliges bleibt der Üben-Knopf bewusst leise. */
.lernuebersicht-board-learn--due {
  background: var(--coral);
  color: #fff;
}

.lernuebersicht-board-learn--due:hover {
  background: var(--coral-hover);
  color: #fff;
}

.lernuebersicht-semester-due {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--coral-text);
  background: var(--coral-soft);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  white-space: nowrap;
}

.lernuebersicht-add-board {
  max-width: 11rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.lernuebersicht-add-board:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 2px var(--coral-soft);
}

/* Schlüssel zum Farbcode der Balken — leise gehalten (tertiärer Text, kleine Punkte),
   weil er nur beim ersten Blick gebraucht wird und danach nicht mit den Daten
   konkurrieren soll. */
.rating-legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.rating-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.rating-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* ---- Bewertungs-Verteilung als Balken (RatingDistribution) ---- */
.rating-distribution-bar {
  display: flex;
  width: 100%;
  height: 28px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}

.lernuebersicht-board-row .rating-distribution-bar {
  flex: 0 0 220px;
  width: 220px;
}

.rating-distribution-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  transition: width 0.2s ease;
}

/* ---- Mobile (siehe src/hooks/useIsMobile.ts — gleicher 768px-Breakpoint) ----
   Ohne Sidebar ist diese Seite auf Mobile das Zuhause der App (RootRoute redirected
   dorthin) — Zeilen brechen um statt zu clippen, weniger Rand-Padding. */
@media (max-width: 768px) {
  .lernuebersicht-page {
    padding: var(--space-4);
  }

  .lernuebersicht-semester-header {
    flex-wrap: wrap;
  }

  .lernuebersicht-semester-title {
    max-width: none;
  }

  .lernuebersicht-semester-header-bar {
    flex: 1 1 100%;
    order: 3;
  }

  .lernuebersicht-board-row {
    flex-wrap: wrap;
  }

  .lernuebersicht-board-row .rating-distribution-bar {
    flex: 1 1 100%;
    width: auto;
    order: 3;
  }
}
.aufgabenuebersicht-page {
  padding: var(--space-8) var(--space-12);
}

.aufgabenuebersicht-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

.aufgabenuebersicht-space {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.aufgabenuebersicht-space-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.aufgabenuebersicht-board {
  padding: var(--space-4);
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.aufgabenuebersicht-board-title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aufgabenuebersicht-board-title:hover {
  color: var(--coral-text);
}

/* ---- Mobile (siehe src/hooks/useIsMobile.ts — gleicher 768px-Breakpoint) ---- */
@media (max-width: 768px) {
  .aufgabenuebersicht-page {
    padding: var(--space-4);
  }
}
.sidebar {
  position: relative;
  flex-shrink: 0;
  /* Fängt den Fall ab, dass eine auf einem breiten Bildschirm gespeicherte Breite später
     in einem schmaleren Fenster geladen wird — sonst liefe das Layout über (siehe
     Inspector.css, gleiches Muster). */
  max-width: 100%;
  background: var(--bg-subtle);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100svh;
  /* Beim manuellen Ziehen ausgeschaltet (--resizing), sonst hinkt jeder Zwischenwert der
     Maus tweenend hinterher statt ihr direkt zu folgen. */
  transition: width 0.2s ease;
}

.sidebar--resizing {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .sidebar {
    transition: none;
  }
}

/* Ziehbarer Rand an der rechten Kante — Spiegelbild von .inspector-resize-handle. */
.sidebar-resize-handle {
  position: absolute;
  right: -3px;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 2;
  background: transparent;
  touch-action: none;
}

.sidebar-resize-handle:hover {
  background: var(--border-strong);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-4) var(--space-2);
}

/* Ein-/Ausblenden-Knopf — 1:1 Optik von .inspector-fullscreen-toggle übernommen. */
.sidebar-collapse-btn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  appearance: none;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-collapse-btn:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.sidebar-collapse-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--coral-soft);
}

/* Schwebender Wiedereinblenden-Knopf bei eingeklappter Leiste — position:fixed, weil die
   Leiste selbst dann gar nicht mehr im DOM steht (siehe Sidebar.tsx, collapsed-Zweig). */
.sidebar-expand-btn {
  position: fixed;
  left: var(--space-3);
  top: var(--space-3);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  appearance: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-expand-btn:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.sidebar-expand-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--coral-soft);
}

.sidebar-brand {
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--text-primary);
}

.sidebar-add-space {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
}

.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2) var(--space-4) var(--space-4);
}

.sidebar-space {
  margin-bottom: var(--space-6);
}

.sidebar-space-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) 0;
}

.sidebar-space-title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  cursor: default;
}

.sidebar-add-board {
  font-size: var(--text-sm);
  line-height: 1;
  padding: 2px var(--space-2);
  opacity: 0;
  transition: opacity 0.1s ease;
}

.sidebar-space-header:hover .sidebar-add-board {
  opacity: 1;
}

.sidebar-boards {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-1);
}

.sidebar-board {
  display: block;
  /* flex:1 + min-width:0: die Zeile füllt die volle Breite des Sidebar-Zeilenwrappers
     (statt nur textbreit zu sein), min-width:0 erlaubt dem Text trotzdem zu schrumpfen,
     damit die Ellipsis unten greifen kann. */
  flex: 1;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  /* Fester Platz für die UI-2-Hover-Icons (rechts) — IMMER reserviert, nicht nur bei
     Hover, damit die Zeile beim Ein-/Ausblenden der Icons nicht springt. */
  padding-right: 3.75rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-board:hover {
  background: var(--bg-elevated);
}

.sidebar-board--active {
  background: var(--coral-soft);
  color: var(--coral-text);
  font-weight: 500;
  position: relative;
}

.sidebar-board--active::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--coral);
  border-radius: 2px;
}

.sidebar-empty {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  padding: var(--space-2) var(--space-3);
}

.sidebar-empty--boards {
  font-style: italic;
}

.sidebar-empty--error {
  color: var(--danger);
}

.sidebar-edit-input {
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--coral);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-1);
  background: var(--bg-elevated);
  color: var(--text-primary);
  width: 100%;
}

.sidebar-edit-input--board {
  text-transform: none;
  font-weight: 400;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
}

.sidebar-footer {
  padding: var(--space-4);
  border-top: 1px solid var(--border);
}

/* Gemeinsame Klasse für alle Footer-Links (Lernübersicht/Einstellungen/Papierkorb) —
   vorher war dieselbe Regel für settings/trash dupliziert; bei der Ergänzung eines
   dritten Links gleich zusammengelegt. */
.sidebar-footer-link {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.sidebar-footer-link:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.sidebar-footer-link--active {
  color: var(--coral-text);
  font-weight: 500;
}
.mobile-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
}

.mobile-top-bar-brand {
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--text-primary);
  text-decoration: none;
}

.mobile-top-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.mobile-top-bar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: transparent;
  border: none;
}

.mobile-top-bar-icon:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.mobile-top-bar-icon--active {
  color: var(--coral-text);
}
/* Gemeinsame Button-Stile für die App-Shell (Sidebar, Board-Header, Papierkorb).
   Siehe DESIGN.md > Komponenten-Prinzipien: pro Screen möglichst nur eine
   primäre (Coral-)Aktion, Rest sekundär/ghost. */

.btn-primary,
.btn-secondary,
.btn-danger,
.btn-ghost {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--coral);
  color: white;
}

.btn-primary:hover {
  background: var(--coral-hover);
}

.btn-secondary {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background: var(--bg-subtle);
}

.btn-danger {
  background: var(--danger);
  color: white;
}

.btn-danger:hover {
  opacity: 0.9;
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--bg-subtle);
}
.app-layout {
  display: flex;
  height: 100svh;
  width: 100%;
}

/* Mobile-Modifier (siehe useIsMobile.ts): Top-Bar statt Seitenspalte, Hauptbereich
   nimmt darunter die volle Breite ein. */
.app-layout--mobile {
  flex-direction: column;
  height: auto;
  min-height: 100svh;
}

.app-layout-main {
  flex: 1;
  min-width: 0;
  background: var(--bg-base);
  display: flex;
  flex-direction: column;
}

.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-8);
  color: var(--text-secondary);
}

.empty-state h1 {
  color: var(--text-primary);
}