/* ==========================================================================
   UniOrganizer — Warm Minimalist Apple-Inspired Workspace Stylesheet
   ========================================================================== */

@property --value {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

:root {
  color-scheme: light;

  /* Warm Linen, Ivory & Alabaster Layered Surfaces (Apple / Craft / Things 3 aesthetic) */
  --bg-app: #f4f0e8;
  --bg-sidebar: rgba(235, 229, 217, 0.82);
  --bg-surface: #fffdf9;
  --bg-subtle: rgba(42, 37, 33, 0.045);
  --bg-input: #f7f3eb;
  --bg-hover: rgba(42, 37, 33, 0.07);

  /* Warm Salbei (Forest Sage) as primary calm brand accent */
  --bg-active: #39604e;
  --bg-active-hover: #2f5141;
  --text-active: #fffdf9;
  --brand-color: #39604e;

  /* Warm Espresso & Taupe Typography */
  --text-primary: #26211d;
  --text-secondary: #655c53;
  --text-muted: #948a7f;

  /* Ultra-Fine Translucent Hairline Borders (no harsh boxed-in lines) */
  --border-subtle: rgba(42, 37, 33, 0.075);
  --border-strong: rgba(42, 37, 33, 0.14);

  /* Subtle, Organic Accent Palette ("weniger ist mehr") */
  --accent-emerald: #336650;
  --accent-emerald-soft: #e3efe9;

  --accent-ocean: #385f82;
  --accent-ocean-soft: #e5eef6;
  --accent-indigo: #385f82;
  --accent-indigo-soft: #e5eef6;

  --accent-amber: #bd6834;
  --accent-amber-soft: #f7ece2;

  --accent-rose: #b04856;
  --accent-rose-soft: #f7e7e9;

  --accent-sky: #327086;
  --accent-sky-soft: #e4f1f5;

  --accent-sand: #756857;
  --accent-sand-soft: #ede7dc;

  /* Multi-layered Ambient Shadows with Subtle Top Highlight */
  --shadow-xs: 0 1px 2px rgba(38, 32, 26, 0.03), 0 6px 18px -4px rgba(38, 32, 26, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --shadow-sm: 0 2px 6px rgba(38, 32, 26, 0.04), 0 14px 32px -8px rgba(38, 32, 26, 0.085), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --shadow-lg: 0 32px 68px -14px rgba(28, 23, 19, 0.22), 0 6px 20px rgba(28, 23, 19, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);

  --radius-sm: 11px;
  --radius-md: 18px;
  --radius-lg: 24px;

  /* Native Apple Standard Typography (human & warm, no techy code font) */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "SF Pro Rounded", system-ui, sans-serif;
  --font-mono: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;

  /* Reusable SVG assets for custom checkboxes (modern-web-guidance: checkbox) */
  --icon-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'></polyline></svg>");
  --icon-dash: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'></line></svg>");
}

[data-theme="dark"] {
  color-scheme: dark;

  /* Warm Espresso / Walnut Night Mode (not pitch black) */
  --bg-app: #171513;
  --bg-sidebar: rgba(31, 28, 25, 0.88);
  --bg-surface: #231f1c;
  --bg-subtle: rgba(255, 248, 238, 0.055);
  --bg-input: #1c1916;
  --bg-hover: rgba(255, 248, 238, 0.085);

  --bg-active: #5a8c74;
  --bg-active-hover: #699c83;
  --text-active: #141210;
  --brand-color: #6ea389;

  --text-primary: #f2ece4;
  --text-secondary: #b5aba0;
  --text-muted: #857b70;

  --border-subtle: rgba(255, 248, 238, 0.075);
  --border-strong: rgba(255, 248, 238, 0.145);

  --accent-emerald: #6dc09b;
  --accent-emerald-soft: rgba(90, 168, 132, 0.16);

  --accent-ocean: #78a9d6;
  --accent-ocean-soft: rgba(94, 148, 198, 0.16);
  --accent-indigo: #78a9d6;
  --accent-indigo-soft: rgba(94, 148, 198, 0.16);

  --accent-amber: #e29663;
  --accent-amber-soft: rgba(217, 130, 75, 0.16);

  --accent-rose: #e07b89;
  --accent-rose-soft: rgba(209, 96, 112, 0.16);

  --accent-sky: #6dbbd4;
  --accent-sky-soft: rgba(86, 168, 194, 0.16);

  --accent-sand: #c2b39f;
  --accent-sand-soft: rgba(168, 150, 128, 0.16);

  --shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-sm: 0 12px 28px -6px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-lg: 0 28px 60px -12px rgba(0, 0, 0, 0.68), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  background-color: var(--bg-app);
  background-image:
    radial-gradient(at 12% 0%, rgba(57, 96, 78, 0.05) 0px, transparent 52%),
    radial-gradient(at 88% 8%, rgba(192, 108, 56, 0.04) 0px, transparent 48%);
  color: var(--text-primary);
  accent-color: var(--brand-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  letter-spacing: -0.011em;
}

.mono-text {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.text-muted { color: var(--text-muted); }
.text-emerald { color: var(--accent-emerald); }
.text-ocean { color: var(--accent-ocean); }
.text-rose { color: var(--accent-rose); }
.text-right { text-align: right; }

/* ==========================================================================
   App Layout & Warm Sidebar
   ========================================================================== */

.app-shell {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  min-height: 100dvh;
}

.sidebar {
  background: var(--bg-sidebar);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-right: 1px solid var(--border-subtle);
  padding: 1.4rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: sticky;
  top: 0;
  height: 100dvh;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  padding: 0.35rem 0.45rem;
  min-height: 38px;
}

.sidebar-semester-pill {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  padding: 0.35rem 0.78rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: var(--shadow-xs);
  transition: all 140ms ease;
}

.sidebar-semester-pill::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-color);
  display: inline-block;
  flex-shrink: 0;
}

.sidebar-section-label {
  font-size: 0.69rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 0 0.65rem;
  margin-bottom: -0.55rem;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.nav-item {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.89rem;
  font-weight: 500;
  padding: 0.55rem 0.65rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 0.68rem;
  cursor: pointer;
  text-align: left;
  transition: all 150ms ease;
}

.nav-item:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.nav-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all 150ms ease;
}

.nav-icon-sage { background: var(--accent-emerald-soft); color: var(--accent-emerald); }
.nav-icon-ocean { background: var(--accent-ocean-soft); color: var(--accent-ocean); }
.nav-icon-amber { background: var(--accent-amber-soft); color: var(--accent-amber); }
.nav-icon-rose { background: var(--accent-rose-soft); color: var(--accent-rose); }
.nav-icon-sand { background: var(--accent-sand-soft); color: var(--accent-sand); }

.nav-item.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  font-weight: 600;
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-xs);
}

.nav-badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.12rem 0.48rem;
  border-radius: 999px;
  background: var(--bg-subtle);
  color: var(--text-secondary);
}

.nav-item.active .nav-badge {
  background: var(--accent-emerald-soft);
  color: var(--accent-emerald);
}

.sidebar-progress-card {
  margin-top: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.95rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  box-shadow: var(--shadow-xs);
}

.sidebar-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.77rem;
  font-weight: 600;
  color: var(--text-primary);
}

.sidebar-progress-meta {
  display: flex;
  gap: 0.4rem;
  font-size: 0.73rem;
  color: var(--text-muted);
}

.linear-progress-track {
  height: 7px;
  background: var(--bg-subtle);
  border-radius: 999px;
  overflow: hidden;
}

.linear-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-emerald), #4d8a6d);
  border-radius: 999px;
  transition: width 320ms ease;
}

.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-subtle);
}

.sidebar-action-btn {
  width: 100%;
  justify-content: flex-start;
  font-size: 0.82rem;
}

.sidebar-legal-row {
  padding: 0.45rem 0.2rem 0.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-legal-link {
  appearance: none;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 0.69rem;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 140ms ease;
  padding: 0.2rem 0.4rem;
}

.sidebar-legal-link:hover {
  color: var(--text-primary);
}

.about-manifesto-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.25rem;
}

.about-coffee-box {
  background: linear-gradient(135deg, rgba(185, 74, 72, 0.08) 0%, rgba(180, 105, 14, 0.1) 100%);
  border: 1px solid rgba(185, 74, 72, 0.22);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.25rem;
}

.legal-text-link {
  color: var(--accent-ocean);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   Main Workspace & Surface Cards
   ========================================================================== */

.workspace-main {
  padding: 2.15rem 2.65rem 3.5rem;
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
}

[hidden],
.hub-view[hidden] {
  display: none !important;
}

.hub-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.hub-eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

.hub-title {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 650;
  letter-spacing: -0.028em;
  color: var(--text-primary);
  text-wrap: balance;
}

.hub-header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.surface-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

/* ==========================================================================
   Buttons & Inputs
   ========================================================================== */

.primary-btn,
.secondary-btn,
.ghost-btn,
.danger-btn {
  appearance: none;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.56rem 1rem;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  cursor: pointer;
  text-decoration: none;
  transition: all 150ms ease;
}

.primary-btn {
  background: var(--bg-active);
  color: var(--text-active);
  border: 1px solid var(--bg-active);
  box-shadow: 0 2px 6px rgba(57, 96, 78, 0.18);
}

.primary-btn:hover {
  background: var(--bg-active-hover);
  border-color: var(--bg-active-hover);
}

.secondary-btn {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}

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

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

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

.danger-btn {
  background: var(--accent-rose-soft);
  color: var(--accent-rose);
  border: 1px solid transparent;
}

.danger-btn:hover {
  border-color: var(--accent-rose);
}

.btn-sm {
  font-size: 0.77rem;
  padding: 0.36rem 0.7rem;
  border-radius: 8px;
}

.btn-pill-count {
  font-size: 0.7rem;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  color: inherit;
}

.icon-btn {
  appearance: none;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: all 140ms ease;
}

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

.text-link-btn {
  appearance: none;
  background: none;
  border: none;
  color: var(--brand-color);
  font-family: inherit;
  font-size: 0.81rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.28rem 0.5rem;
  border-radius: 7px;
}

.text-link-btn:hover {
  background: var(--accent-emerald-soft);
}

.minimal-input,
.minimal-select {
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.5rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-input);
  color: var(--text-primary);
  outline: none;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.minimal-input:focus,
.minimal-select:focus {
  background: var(--bg-surface);
  border-color: var(--brand-color);
}

/* ==========================================================================
   Progress Ring (modern-web-guidance: progress-ring)
   ========================================================================== */

progress.progress-ring::-webkit-progress-bar {
  display: none;
  background: none;
}
progress.progress-ring::-webkit-progress-value {
  display: none;
  background: none;
}
progress.progress-ring::-moz-progress-bar {
  display: none;
  background: none;
}
progress.progress-ring::slider-fill {
  display: none;
  background: none;
}

.progress-ring-wrapper {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

progress.progress-ring {
  --size: 74px;
  --thickness: 8px;
  --track-color: var(--bg-subtle);
  --fill-color: var(--accent-emerald);
  --value: attr(value type(<number>));
  width: var(--size);
  height: var(--size);
  appearance: none;
  -webkit-appearance: none;

  transition: --value 0s ease-in-out;
  @media (prefers-reduced-motion: no-preference) {
    transition-duration: 0.4s;
  }
  border-radius: 50%;

  background: conic-gradient(
    var(--fill-color) calc(var(--value) * 1%),
    var(--track-color) 0
  );

  /* MANDATORY: Clip the background to the border-area. */
  background-clip: border-area;
  border: var(--thickness) solid transparent;
  background-origin: border-box;

  @supports not (background-clip: border-area) {
    mask-image: radial-gradient(
      transparent calc(50% - var(--thickness)),
      black calc(50% - var(--thickness) + 0.5px)
    );
    -webkit-mask-image: radial-gradient(
      transparent calc(50% - var(--thickness)),
      black calc(50% - var(--thickness) + 0.5px)
    );
    border: 0;
  }
}

progress.progress-ring[value="100"] {
  --fill-color: #2b7a58;
}

.progress-ring-content {
  position: absolute;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.ring-percent {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* ==========================================================================
   Custom Checkboxes (modern-web-guidance: checkbox)
   ========================================================================== */

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-block-size: 44px;
  cursor: pointer;
  flex: 1;
}

.checkbox-custom {
  --checkbox-size: 1.25em;
  --checkbox-icon-size: 0.7em;

  appearance: none;
  display: inline-grid;
  place-content: center;
  inline-size: var(--checkbox-size);
  aspect-ratio: 1;
  margin: 0;
  border: 1.75px solid var(--border-strong);
  border-radius: 6px;
  color: var(--accent-emerald);
  background: var(--bg-surface);
  cursor: pointer;
  flex-shrink: 0;

  &::before {
    content: "";
    inline-size: var(--checkbox-icon-size);
    aspect-ratio: 1;
    background-color: currentColor;
    mask: var(--checkbox-icon) no-repeat center / contain;
    -webkit-mask: var(--checkbox-icon) no-repeat center / contain;
    scale: 0;

    @media (prefers-reduced-motion: no-preference) {
      transition: scale 150ms ease;
    }

    @media (forced-colors: active) {
      background-color: CanvasText;
    }
  }

  &:checked {
    --checkbox-icon: var(--icon-check);
    border-color: var(--accent-emerald);
    background-color: var(--accent-emerald-soft);
  }

  &:indeterminate {
    --checkbox-icon: var(--icon-dash);
  }

  &:is(:checked, :indeterminate)::before {
    scale: 1;
  }

  &:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
}

/* ==========================================================================
   Modular Widget Dashboard (Empty-First & Customizable)
   ========================================================================== */

.dashboard-empty-canvas {
  padding: 4.2rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 680px;
  margin: 2.5rem auto;
  border: 1.5px dashed var(--border-strong);
  background: var(--bg-surface);
}

.empty-canvas-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--accent-emerald-soft);
  color: var(--accent-emerald);
  display: grid;
  place-items: center;
  margin-bottom: 1.15rem;
}

.empty-canvas-title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.empty-canvas-desc {
  margin: 0.55rem 0 1.6rem;
  font-size: 0.92rem;
  color: var(--text-secondary);
  max-width: 480px;
  line-height: 1.55;
}

.empty-canvas-actions {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  justify-content: center;
}

.dashboard-widgets-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: stretch;
}

.widget-card {
  padding: 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  position: relative;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  box-sizing: border-box;
}

.widget-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border-strong);
}

.widget-span-4 {
  flex: 1 1 calc(33.333% - 1.25rem);
  min-width: min(100%, 280px);
}

.widget-span-6 {
  flex: 1 1 calc(50% - 1.25rem);
  min-width: min(100%, 380px);
}

.widget-span-12 {
  flex: 1 1 100%;
  width: 100%;
}

.widget-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.65rem;
}

.widget-title-group {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.widget-mini-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.widget-remove-btn {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-muted);
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 0.78rem;
  opacity: 0.55;
  transition: all 140ms ease;
}

.widget-remove-btn:hover {
  opacity: 1;
  background: var(--accent-rose-soft);
  color: var(--accent-rose);
}

.widget-kpi-body {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

/* Widget Gallery Modal Cards */
.widget-picker-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.83rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

.widget-picker-quick-btns {
  display: flex;
  gap: 0.35rem;
}

.widget-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.gallery-widget-item {
  padding: 1.05rem 1.15rem;
  border-radius: 15px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.85rem;
  transition: all 160ms ease;
}

.gallery-widget-item:hover {
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
}

.gallery-widget-item.is-active {
  background: color-mix(in oklab, var(--brand-color) 14%, var(--bg-surface));
  border-color: var(--brand-color);
  box-shadow: 0 0 0 1.5px var(--brand-color), 0 2px 10px color-mix(in oklab, var(--brand-color) 18%, transparent);
}

[data-theme="dark"] .gallery-widget-item.is-active {
  background: color-mix(in oklab, var(--brand-color) 22%, var(--bg-surface));
  border-color: var(--brand-color);
  box-shadow: 0 0 0 1.5px var(--brand-color), 0 2px 10px color-mix(in oklab, var(--brand-color) 25%, transparent);
}

.gallery-active-badge {
  font-size: 0.68rem;
  font-weight: 650;
  color: var(--brand-color);
  background: color-mix(in oklab, var(--brand-color) 18%, var(--bg-surface));
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  line-height: 1.2;
}

.gallery-widget-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.gallery-widget-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.gallery-widget-desc {
  margin: 0.2rem 0 0;
  font-size: 0.77rem;
  color: var(--text-secondary);
  line-height: 1.42;
}

.gallery-widget-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gallery-size-tag {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* ==========================================================================
   KPI & Shared List Styles (De-boxed Soft Inner Rows)
   ========================================================================== */

.kpi-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.kpi-value {
  font-size: 1.55rem;
  font-weight: 650;
  margin: 0.22rem 0 0.1rem;
  letter-spacing: -0.024em;
}

.kpi-subtext {
  margin: 0;
  font-size: 0.77rem;
  color: var(--text-muted);
}

.status-pill {
  font-size: 0.71rem;
  font-weight: 600;
  padding: 0.22rem 0.62rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.status-active {
  background: var(--accent-ocean-soft);
  color: var(--accent-ocean);
}

.status-passed {
  background: var(--accent-emerald-soft);
  color: var(--accent-emerald);
}

.status-failed {
  background: var(--accent-rose-soft);
  color: var(--accent-rose);
}

.status-planned,
.status-neutral {
  background: var(--accent-sand-soft);
  color: var(--accent-sand);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.section-title {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.section-subtitle {
  margin: 0.12rem 0 0;
  font-size: 0.77rem;
  color: var(--text-muted);
}

.compact-list {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
}

.compact-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.68rem 0.88rem;
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--bg-subtle);
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.compact-item:hover {
  background: var(--bg-surface);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-xs);
  transform: translateY(-1px);
}

.compact-item-main {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.compact-item-title {
  font-size: 0.86rem;
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compact-item-meta {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.quick-folders-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.quick-folder-btn {
  appearance: none;
  background: var(--bg-subtle);
  border: 1px solid transparent;
  border-radius: 13px;
  padding: 0.82rem 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text-primary);
  transition: all 150ms ease;
}

.quick-folder-btn:hover {
  background: var(--bg-surface);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-xs);
  transform: translateY(-1.5px);
}

/* ==========================================================================
   Modul-Übersicht Hub
   ========================================================================== */

.modules-summary-grid {
  display: grid;
  grid-template-columns: 1.45fr repeat(3, 1fr);
  gap: 1.05rem;
  margin-bottom: 1.25rem;
}

.module-stat-card {
  padding: 1.25rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1.15rem;
}

.module-stat-card-simple {
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stat-big {
  font-size: 1.7rem;
  font-weight: 650;
  letter-spacing: -0.025em;
  margin: 0.22rem 0 0.1rem;
}

.stat-meta {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.toolbar-card {
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.1rem;
  flex-wrap: wrap;
}

.filter-pills {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  flex-wrap: wrap;
  background: var(--bg-subtle);
  padding: 0.24rem;
  border-radius: 12px;
}

.filter-pill {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.79rem;
  font-weight: 500;
  padding: 0.36rem 0.78rem;
  border-radius: 9px;
  cursor: pointer;
  transition: all 140ms ease;
}

.filter-pill:hover {
  color: var(--text-primary);
}

.filter-pill.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(38, 32, 26, 0.08), 0 1px 1px rgba(38, 32, 26, 0.04);
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.table-container {
  overflow-x: auto;
}

.minimal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
}

.minimal-table th {
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
}

.minimal-table td {
  padding: 0.95rem 1.2rem;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.minimal-table tbody tr:last-child td {
  border-bottom: none;
}

.minimal-table tbody tr:hover {
  background: var(--bg-subtle);
}

.module-cell-title {
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.module-code-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 0.12rem 0.45rem;
  border-radius: 6px;
  background: var(--bg-subtle);
  color: var(--text-secondary);
}

.module-cell-notes {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.18rem;
}

.status-select-inline {
  font-family: inherit;
  font-size: 0.77rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--bg-subtle);
  color: var(--text-secondary);
}

.status-select-inline.is-active {
  background: var(--accent-ocean-soft);
  color: var(--accent-ocean);
}

.status-select-inline.is-passed {
  background: var(--accent-emerald-soft);
  color: var(--accent-emerald);
}

.status-select-inline.is-failed {
  background: var(--accent-rose-soft);
  color: var(--accent-rose);
}

.cp-badge {
  font-family: var(--font-mono);
  font-size: 0.79rem;
  font-weight: 600;
  padding: 0.22rem 0.58rem;
  border-radius: 8px;
  background: var(--bg-subtle);
  color: var(--text-primary);
}

/* ==========================================================================
   Kalender Hub — High-End Spacious Month Studio & Agenda Inspector
   (modern-web-guidance: size-aware-styling, content-based-styling)
   ========================================================================== */

.cal-segmented-nav {
  display: inline-flex;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 0.2rem;
  box-shadow: var(--shadow-xs);
  gap: 0.15rem;
}

.cal-seg-btn,
.cal-seg-today {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 140ms ease, color 140ms ease;
}

.cal-seg-btn {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  font-size: 1.05rem;
  line-height: 1;
}

.cal-seg-today {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  padding: 0.32rem 0.75rem;
}

.cal-seg-btn:hover,
.cal-seg-today:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 1.35rem;
  align-items: start;
}

.calendar-board {
  padding: 1.55rem 1.65rem;
  /* MANDATORY: You must first tell the browser which element is the container to be measured. */
  container-type: inline-size;
  container-name: calendar-board;
}

.calendar-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.3rem;
  flex-wrap: wrap;
}

.calendar-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.calendar-month-title {
  margin: 0;
  font-size: 1.38rem;
  font-weight: 650;
  letter-spacing: -0.026em;
  color: var(--text-primary);
}

.cal-month-summary-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.24rem 0.68rem;
  border-radius: 999px;
  background: var(--accent-emerald-soft);
  color: var(--accent-emerald);
}

.calendar-tags-filter-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cal-filter-track {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.cal-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  transition: all 140ms ease;
}

.cal-tag-pill.active {
  background-color: var(--tag-col, var(--brand-color)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--tag-col, var(--brand-color)) 40%, transparent);
  font-weight: 600;
}

.cal-tag-pill.active .cal-tag-dot {
  background-color: #ffffff !important;
}

.cal-tag-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  display: inline-block;
  flex-shrink: 0;
  transition: background-color 140ms ease;
}

.cal-tag-check {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  text-align: left;
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 0.35rem 0.6rem;
}

.calendar-weekdays span {
  padding-left: 0.35rem;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.cal-day {
  background: var(--bg-surface);
  min-height: 122px;
  padding: 0.3rem 0.4rem 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  cursor: pointer;
  position: relative;
  transition: background-color 100ms ease;
}

.cal-day:hover {
  background: color-mix(in srgb, var(--bg-surface) 93%, var(--text-primary));
}

[data-theme="dark"] .cal-day:hover {
  background: #252220;
}

.cal-day.is-outside {
  background: color-mix(in srgb, var(--bg-surface) 90%, var(--bg-canvas));
  opacity: 0.55;
}

[data-theme="dark"] .cal-day.is-outside {
  background: rgba(20, 18, 17, 0.6);
  opacity: 0.45;
}

.cal-day.is-outside .cal-day-num {
  opacity: 0.45;
}

.cal-day.is-today {
  background: linear-gradient(180deg, rgba(225, 29, 72, 0.04) 0%, var(--bg-surface) 80%);
}

.cal-day.is-selected {
  box-shadow: inset 0 0 0 2px var(--brand-color);
  z-index: 2;
}

/* Content-based styling on calendar day cells (modern-web-guidance: content-based-styling) */
/* MANDATORY: You must use the :has() selector on the container element to detect the presence of specific child content. */
.cal-day:has(.apple-cal-item, .apple-cal-badge, .cal-event-chip) .cal-day-num {
  font-weight: 600;
  color: var(--text-primary);
}

/* MANDATORY: When implementing a fallback for critical layouts, you must use @supports not selector(:has(*)) in your CSS to define a traditional class-based fallback (e.g., .has-image). */
@supports not selector(:has(*)) {
  .cal-day.has-events .cal-day-num {
    font-weight: 600;
    color: var(--text-primary);
  }
}

.cal-day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 22px;
  margin-bottom: 2px;
}

.cal-day-num {
  font-family: var(--font-sans);
  font-size: 0.83rem;
  font-weight: 500;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  border-radius: 999px;
  margin-left: auto;
  padding: 0 3px;
  font-variant-numeric: tabular-nums;
  transition: transform 100ms ease;
}

.cal-day.is-today .cal-day-num {
  background: #e11d48;
  color: #ffffff;
  font-weight: 700;
  width: 20px;
  height: 20px;
  padding: 0;
  box-shadow: 0 1px 4px rgba(225, 29, 72, 0.4);
}

.month-now-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--accent-rose);
  background: var(--accent-rose-soft);
  padding: 0.08rem 0.38rem;
  border-radius: 999px;
}

.month-now-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background-color: var(--accent-rose);
  display: inline-block;
  animation: pulse-dot 2s infinite ease-in-out;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.75); }
}

.cal-month-now-marker {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.15rem 0;
  padding: 0.05rem 0;
  position: relative;
  z-index: 2;
  user-select: none;
  pointer-events: none;
}

.now-marker-badge {
  font-family: var(--font-mono);
  font-size: 0.60rem;
  font-weight: 600;
  color: #ffffff;
  background-color: var(--accent-rose);
  padding: 0.06rem 0.34rem;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.2;
  box-shadow: 0 1px 4px rgba(225, 29, 72, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
}

.now-marker-dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background-color: #ffffff;
  display: inline-block;
  animation: pulse-dot 1.8s infinite ease-in-out;
}

.now-marker-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-rose) 0%, color-mix(in srgb, var(--accent-rose) 25%, transparent) 100%);
  border-radius: 999px;
}

.cal-day-quick-add {
  appearance: none;
  border: none;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  width: 18px;
  height: 18px;
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 120ms ease, transform 120ms ease, background-color 120ms ease, color 120ms ease;
}

.cal-day:hover .cal-day-quick-add,
.cal-day.is-selected .cal-day-quick-add {
  opacity: 1;
  transform: scale(1);
}

.cal-day-quick-add:hover {
  background: var(--bg-active);
  color: var(--text-active);
}

.cal-events-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
}

/* Apple-Calendar Style Event Rows */
.apple-cal-item {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 19px;
  padding: 0 3px;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
  transition: background 80ms ease;
  min-width: 0;
}

.apple-cal-item:hover {
  background: rgba(125, 125, 125, 0.12);
}

[data-theme="dark"] .apple-cal-item:hover {
  background: rgba(255, 255, 255, 0.10);
}

.apple-cal-bar {
  width: 3.5px;
  height: 11px;
  border-radius: 1.5px;
  flex-shrink: 0;
}

.apple-cal-circle {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.6px solid currentColor;
  flex-shrink: 0;
  background: transparent;
}

.apple-cal-title {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}

.apple-cal-time {
  font-size: 0.67rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: auto;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.apple-cal-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 19px;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 0.69rem;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  user-select: none;
  min-width: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.apple-cal-badge-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.apple-cal-more {
  font-size: 0.67rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 1px 4px;
  cursor: pointer;
  border-radius: 3px;
  width: fit-content;
  line-height: 1.2;
}

.apple-cal-more:hover {
  color: var(--text-primary);
  background: rgba(125, 125, 125, 0.12);
}

.cal-event-chip {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.22rem 0.48rem;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 0.32rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 3px solid currentColor;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.cal-chip-time {
  font-size: 0.66rem;
  opacity: 0.78;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.cal-chip-title {
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-more-chip {
  font-size: 0.69rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0.1rem 0.35rem;
}

/* Size-aware container query for the calendar board (modern-web-guidance: size-aware-styling) */
@supports (container-type: inline-size) {
  @container calendar-board (max-width: 680px) {
    .cal-day {
      min-height: 98px;
      padding: 0.42rem;
    }
    .cal-chip-time {
      display: none;
    }
    .cal-day-quick-add {
      display: none;
    }
  }
}

.cal-event-chip.cat-exam {
  background: var(--accent-rose-soft);
  color: var(--accent-rose);
}

.cal-event-chip.cat-deadline {
  background: var(--accent-amber-soft);
  color: var(--accent-amber);
}

.cal-event-chip.cat-lecture {
  background: var(--accent-ocean-soft);
  color: var(--accent-ocean);
}

.cal-event-chip.cat-seminar {
  background: var(--accent-emerald-soft);
  color: var(--accent-emerald);
}

/* Right Calendar Sidebar — Unified High-End Agenda Inspector */
.calendar-sidebar {
  position: sticky;
  top: 1.5rem;
}

.calendar-inspector-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.calendar-day-detail {
  padding: 1.45rem 1.45rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.cal-day-hero {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.cal-date-leaf {
  width: 52px;
  height: 54px;
  border-radius: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  flex-shrink: 0;
}

.cal-leaf-month {
  width: 100%;
  background: var(--bg-active);
  color: var(--text-active);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-align: center;
  padding: 0.16rem 0;
  text-transform: uppercase;
}

.cal-leaf-num {
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  margin: auto 0;
  font-variant-numeric: tabular-nums;
}

.cal-day-hero-text {
  flex: 1;
  min-width: 0;
}

.cal-day-hero-text .section-title {
  font-size: 1.02rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-add-day-btn {
  appearance: none;
  border: none;
  background: var(--accent-emerald-soft);
  color: var(--accent-emerald);
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 140ms ease;
}

.cal-add-day-btn:hover {
  background: var(--bg-active);
  color: var(--text-active);
  transform: translateY(-1px);
}

.cal-agenda-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cal-empty-day-box {
  background: var(--bg-subtle);
  border-radius: 14px;
  padding: 1.35rem 1.1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}

.cal-empty-day-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bg-surface);
  color: var(--text-muted);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-xs);
}

.cal-empty-day-text {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.cal-agenda-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.72rem 0.85rem;
  border-radius: 13px;
  background: var(--bg-subtle);
  border: 1px solid transparent;
  transition: all 150ms ease;
}

.cal-agenda-item:hover {
  background: var(--bg-surface);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-xs);
}

.cal-agenda-time {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 48px;
  text-align: right;
}

.cal-agenda-bar {
  width: 3.5px;
  align-self: stretch;
  border-radius: 999px;
  flex-shrink: 0;
}

.bar-exam { background: var(--accent-rose); }
.bar-deadline { background: var(--accent-amber); }
.bar-lecture { background: var(--accent-ocean); }
.bar-seminar { background: var(--accent-emerald); }

.cal-agenda-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cal-agenda-title {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-agenda-meta {
  font-size: 0.73rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.cal-agenda-del-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: all 140ms ease;
}

.cal-agenda-item:hover .cal-agenda-del-btn {
  opacity: 1;
}

.cal-agenda-del-btn:hover {
  background: var(--accent-rose-soft);
  color: var(--accent-rose);
}

.cal-inspector-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 0;
}

.calendar-upcoming-card {
  padding: 1.3rem 1.45rem 1.45rem;
  background: rgba(42, 37, 33, 0.018);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.cal-upcoming-head {
  margin-bottom: 0.1rem;
}

.cal-upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}

.cal-upcoming-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.62rem 0.75rem;
  border-radius: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 1px 2px rgba(38, 32, 26, 0.02);
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.cal-upcoming-item:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
}

.cal-upcoming-date-pill {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1.05;
}

.pill-exam { background: var(--accent-rose-soft); color: var(--accent-rose); }
.pill-deadline { background: var(--accent-amber-soft); color: var(--accent-amber); }
.pill-lecture { background: var(--accent-ocean-soft); color: var(--accent-ocean); }
.pill-seminar { background: var(--accent-emerald-soft); color: var(--accent-emerald); }

.cal-up-day {
  font-size: 0.86rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cal-up-month {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.cal-upcoming-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.cal-upcoming-title {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-upcoming-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* ==========================================================================
   Wochen To-Do Hub (Soft Surfaces & Content-Based Styling)
   ========================================================================== */

.week-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  padding: 0.22rem;
  border-radius: 12px;
  box-shadow: var(--shadow-xs);
}

.week-label {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0 0.55rem;
}

.week-summary-bar {
  padding: 1.2rem 1.45rem;
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.week-summary-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.86rem;
  font-weight: 600;
}

.week-filter-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

.week-board-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.05rem;
}

.day-column {
  padding: 1.15rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-height: 265px;
  transition: box-shadow 160ms ease, border-color 160ms ease;
}

.day-column.is-today-col {
  border-color: var(--brand-color);
  box-shadow: 0 0 0 1.5px var(--brand-color), var(--shadow-xs);
}

/* Content-based styling on day columns (modern-web-guidance: content-based-styling) */
.day-column:has(.todo-item-row) .day-col-header {
  border-bottom-color: var(--border-strong);
}

@supports not selector(:has(*)) {
  .day-column.has-todos .day-col-header {
    border-bottom-color: var(--border-strong);
  }
}

.day-col-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border-subtle);
}

.day-col-title {
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.day-col-date {
  font-size: 0.73rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.todo-items-list {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  flex: 1;
}

.day-empty-slot {
  margin: auto 0;
  padding: 1.2rem 0.5rem;
  text-align: center;
  font-size: 0.77rem;
  color: var(--text-muted);
  opacity: 0.75;
}

.todo-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.22rem 0.6rem;
  border-radius: 11px;
  border: 1px solid transparent;
  background: var(--bg-subtle);
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.todo-item-row:hover {
  background: var(--bg-surface);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-xs);
}

.todo-item-row.is-done {
  opacity: 0.65;
}

.todo-item-row.is-done .todo-text {
  text-decoration: line-through;
  color: var(--text-muted);
}

.todo-text-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.todo-text {
  font-size: 0.84rem;
  font-weight: 500;
  word-break: break-word;
}

.todo-tags-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.1rem;
}

.todo-tag {
  font-size: 0.67rem;
  padding: 0.08rem 0.42rem;
  border-radius: 6px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.todo-prio-high {
  background: var(--accent-rose-soft);
  color: var(--accent-rose);
}

.todo-row-del-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: all 130ms ease;
}

.todo-item-row:hover .todo-row-del-btn {
  opacity: 1;
}

.todo-row-del-btn:hover {
  background: var(--accent-rose-soft);
  color: var(--accent-rose);
}

.day-quick-add {
  display: flex;
  gap: 0.38rem;
  margin-top: auto;
  padding-top: 0.45rem;
}

.day-quick-input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 0.8rem;
  padding: 0.45rem 0.68rem;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--bg-subtle);
  color: var(--text-primary);
  transition: all 140ms ease;
}

.day-quick-input:focus {
  outline: none;
  background: var(--bg-surface);
  border-color: var(--brand-color);
  box-shadow: 0 0 0 3px rgba(57, 96, 78, 0.1);
}

.day-quick-submit {
  appearance: none;
  border: none;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 140ms ease;
}

.day-quick-submit:hover {
  background: var(--bg-active);
  color: var(--text-active);
}

/* ==========================================================================
   Ordner & Dateien Hub
   ========================================================================== */

.folder-toolbar {
  padding: 0.78rem 1.15rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.crumb-btn {
  appearance: none;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 0.3rem 0.55rem;
  border-radius: 7px;
  cursor: pointer;
}

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

.crumb-btn.is-current {
  color: var(--brand-color);
  font-weight: 600;
  background: var(--accent-emerald-soft);
}

.crumb-sep {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.folder-drop-hint-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 1.05rem;
  margin-bottom: 1.25rem;
  border-radius: var(--radius-md);
  border: 1.5px dashed var(--border-subtle);
  background: var(--bg-surface);
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.folder-drop-hint-bar.is-dragover,
#hub-folders.is-dragover .folder-drop-hint-bar {
  border-color: var(--brand-color);
  background: var(--accent-emerald-soft);
  box-shadow: 0 0 0 3px rgba(57, 96, 78, 0.12);
}

#hub-folders.is-dragover {
  outline: 2px dashed var(--brand-color);
  outline-offset: -4px;
}

.drop-hint-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.83rem;
  color: var(--text-secondary);
}

.drop-hint-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.drop-hint-text strong {
  color: var(--text-primary);
  font-weight: 600;
}

.folder-section {
  margin-bottom: 1.75rem;
}

.folder-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.folders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  gap: 1rem;
}

.folder-card {
  position: relative;
  padding: 1.25rem;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--fld-color, var(--brand-color)) 12%, var(--bg-surface));
  border: 1.5px solid color-mix(in srgb, var(--fld-color, var(--brand-color)) 32%, var(--border-subtle));
  border-top: 4px solid var(--fld-color, var(--brand-color));
  display: flex;
  flex-direction: column;
  gap: 0.78rem;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
  overflow: hidden;
}

.folder-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fld-color, var(--brand-color)) 20%, transparent) 0%, transparent 100%);
  pointer-events: none;
}

.folder-card:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--fld-color, var(--brand-color)) 18%, var(--bg-surface));
  border-color: color-mix(in srgb, var(--fld-color, var(--brand-color)) 55%, var(--border-subtle));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--fld-color, var(--brand-color)) 20%, transparent);
}

.folder-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.folder-card-top-right {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.folder-color-badge {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background-color: var(--fld-color, var(--brand-color));
  box-shadow: 0 0 0 2px var(--bg-surface);
}

.folder-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}

.folder-color-zinc { background: var(--accent-sand-soft); color: var(--accent-sand); }
.folder-color-indigo { background: var(--accent-ocean-soft); color: var(--accent-ocean); }
.folder-color-emerald { background: var(--accent-emerald-soft); color: var(--accent-emerald); }
.folder-color-amber { background: var(--accent-amber-soft); color: var(--accent-amber); }
.folder-color-rose { background: var(--accent-rose-soft); color: var(--accent-rose); }
.folder-color-sky { background: var(--accent-sky-soft); color: var(--accent-sky); }

.folder-card-title {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.folder-card-sub {
  margin: 0.16rem 0 0;
  font-size: 0.77rem;
  color: var(--text-muted);
  position: relative;
  z-index: 1;
}

.folder-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: 0.95rem;
}

.file-card {
  padding: 1.05rem 1.15rem;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.file-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
  transform: translateY(-1px);
}

.file-card-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  cursor: pointer;
  flex: 1;
}

.file-type-badge {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-subtle);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  text-transform: uppercase;
}

.file-info {
  min-width: 0;
  flex: 1;
}

.file-name {
  font-size: 0.88rem;
  font-weight: 550;
  line-height: 1.35;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.file-meta {
  font-size: 0.73rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-top: 0.18rem;
}

.empty-state {
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.empty-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.empty-desc {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ==========================================================================
   Redesigned Apple-Style Sheet Modals ("Ausfüll-Karten")
   (modern-web-guidance: light-dismiss-a-dialog,
    prevent-page-scroll-under-modal-dialog, required-field-feedback)
   ========================================================================== */

dialog:modal {
  /* MANDATORY: Prevent scroll gestures inside the modal (even when its content
     does not overflow) from chaining to the underlying page. */
  overscroll-behavior: contain;
}

dialog::backdrop {
  /* MANDATORY: ::backdrop defaults to overflow: visible (not a scroll container).
     Set overflow: hidden so it becomes a non-scrollable scroll container that
     honors overscroll-behavior. */
  overflow: hidden;
  overscroll-behavior: contain;
  background-color: rgba(32, 27, 23, 0.38);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.sheet-dialog {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  padding: 0;
  width: min(580px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2.5rem);
}

.sheet-wide {
  width: min(740px, calc(100vw - 2rem));
}

.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.35rem 1.5rem 1.15rem;
  border-bottom: 1px solid var(--border-subtle);
}

.sheet-header-left {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.sheet-icon-badge {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.badge-sage { background: var(--accent-emerald-soft); color: var(--accent-emerald); }
.badge-ocean { background: var(--accent-ocean-soft); color: var(--accent-ocean); }
.badge-amber { background: var(--accent-amber-soft); color: var(--accent-amber); }
.badge-rose { background: var(--accent-rose-soft); color: var(--accent-rose); }

.sheet-header h2 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.sheet-subtitle {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.sheet-close-btn {
  appearance: none;
  background: var(--bg-subtle);
  border: none;
  color: var(--text-secondary);
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 0.82rem;
  transition: all 140ms ease;
}

.sheet-close-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.sheet-body {
  padding: 1.35rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sheet-section {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.sheet-section-label {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

/* Interactive Status Choice Cards inside Module Sheet */
.status-choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.status-choice-card {
  appearance: none;
  background: var(--bg-input);
  border: 1.5px solid var(--border-subtle);
  border-radius: 12px;
  padding: 0.9rem 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all 140ms ease;
  position: relative;
  min-height: 76px;
  justify-content: space-between;
}

.status-choice-card:hover {
  background: var(--bg-surface);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.choice-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.choice-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.choice-dot.dot-ocean { background: #0284c7; }
.choice-dot.dot-sage { background: #10b981; }
.choice-dot.dot-rose { background: #e11d48; }
.choice-dot.dot-sand { background: #d97706; }

.choice-title {
  font-size: 1.02rem;
  font-weight: 650;
  color: var(--text-primary);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.choice-check {
  font-size: 0.72rem;
  font-weight: 700;
  display: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  place-items: center;
  line-height: 1;
  color: #fff;
}

.status-choice-card.is-selected .choice-check {
  display: inline-grid;
}

.status-choice-card.is-selected[data-tone="ocean"] {
  background: color-mix(in oklab, #0284c7 16%, var(--bg-surface));
  border-color: #0284c7;
  box-shadow: 0 0 0 1.5px #0284c7, var(--shadow-xs);
}
.status-choice-card.is-selected[data-tone="ocean"] .choice-check {
  background: #0284c7;
}

.status-choice-card.is-selected[data-tone="sage"] {
  background: color-mix(in oklab, #10b981 16%, var(--bg-surface));
  border-color: #10b981;
  box-shadow: 0 0 0 1.5px #10b981, var(--shadow-xs);
}
.status-choice-card.is-selected[data-tone="sage"] .choice-check {
  background: #10b981;
}

.status-choice-card.is-selected[data-tone="rose"] {
  background: color-mix(in oklab, #e11d48 16%, var(--bg-surface));
  border-color: #e11d48;
  box-shadow: 0 0 0 1.5px #e11d48, var(--shadow-xs);
}
.status-choice-card.is-selected[data-tone="rose"] .choice-check {
  background: #e11d48;
}

.status-choice-card.is-selected[data-tone="sand"] {
  background: color-mix(in oklab, #d97706 16%, var(--bg-surface));
  border-color: #d97706;
  box-shadow: 0 0 0 1.5px #d97706, var(--shadow-xs);
}
.status-choice-card.is-selected[data-tone="sand"] .choice-check {
  background: #d97706;
}

[data-theme="dark"] .status-choice-card.is-selected[data-tone="ocean"] {
  background: color-mix(in oklab, #0284c7 24%, var(--bg-surface));
}
[data-theme="dark"] .status-choice-card.is-selected[data-tone="sage"] {
  background: color-mix(in oklab, #10b981 24%, var(--bg-surface));
}
[data-theme="dark"] .status-choice-card.is-selected[data-tone="rose"] {
  background: color-mix(in oklab, #e11d48 24%, var(--bg-surface));
}
[data-theme="dark"] .status-choice-card.is-selected[data-tone="sand"] {
  background: color-mix(in oklab, #d97706 24%, var(--bg-surface));
}

/* Onboarding Segmented Progress Track (Clean Apple-Style, Zero Scrollbars) */
.onboarding-progress-track {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.6rem 0.65rem;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}

.onboarding-progress-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  cursor: pointer;
  min-width: 0;
}

.onboarding-progress-step::before {
  content: '';
  display: block;
  height: 4px;
  border-radius: 999px;
  background: var(--border-subtle);
  transition: all 200ms ease;
}

.onboarding-progress-step.active::before {
  background: var(--brand-color);
  box-shadow: 0 0 6px color-mix(in oklab, var(--brand-color) 40%, transparent);
}

.onboarding-progress-step.completed::before {
  background: var(--brand-color);
  opacity: 0.65;
}

.step-dot-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 150ms ease;
}

.onboarding-progress-step.active .step-dot-label {
  color: var(--brand-color);
  font-weight: 650;
}

.onboarding-progress-step.completed .step-dot-label {
  color: var(--text-secondary);
}

/* Module Wizard Navigation & Steps */
.module-wizard-nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.4rem 0.2rem;
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
}

.wizard-step-pill {
  appearance: none;
  border: none;
  background: var(--bg-subtle);
  color: var(--text-muted);
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 140ms ease;
}

.wizard-step-pill .step-num {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--border-subtle);
  color: var(--text-secondary);
  display: inline-grid;
  place-items: center;
  font-size: 0.68rem;
}

.wizard-step-pill.active {
  background: var(--brand-color);
  color: #ffffff;
}

.wizard-step-pill.active .step-num {
  background: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

.wizard-step-pill.completed {
  background: color-mix(in oklab, var(--brand-color) 16%, var(--bg-surface));
  color: var(--brand-color);
}

.wizard-step-divider {
  color: var(--text-muted);
  font-size: 0.8rem;
  opacity: 0.5;
}

.module-wizard-step {
  display: none;
}

.module-wizard-step.active {
  display: block;
  animation: fadeInStep 180ms ease;
}

.onboarding-wizard-step {
  display: none;
}

.onboarding-wizard-step.active {
  display: block;
  animation: fadeInStep 180ms ease;
}

.sheet-dialog.show-all-steps .module-wizard-step {
  display: block !important;
  margin-bottom: 1.25rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px dashed var(--border-subtle);
  animation: none;
}

.sheet-dialog.show-all-steps .module-wizard-step:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.sheet-dialog.show-all-steps .module-wizard-nav {
  display: none;
}

@keyframes fadeInStep {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* GoodNotes Integration Pill Button */
.goodnotes-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.12) 0%, rgba(56, 189, 248, 0.16) 100%);
  border: 1px solid rgba(2, 132, 199, 0.3);
  color: #0284c7;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: all 140ms ease;
}

.goodnotes-pill-btn:hover {
  background: #0284c7;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35);
  transform: translateY(-1px);
}

/* CP Quick Chips & Exam Type Pills */
.cp-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.cp-quick-chips,
.exam-type-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.chip-btn {
  appearance: none;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.77rem;
  font-weight: 500;
  padding: 0.36rem 0.72rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 140ms ease;
}

.chip-btn:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.chip-btn.active {
  background: var(--bg-active);
  color: var(--text-active);
  border-color: var(--bg-active);
}

.exam-type-pill {
  appearance: none;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.38rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 140ms ease;
}

.exam-type-pill:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.exam-type-pill.active {
  background: var(--tag-col, var(--brand-color)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--tag-col, var(--brand-color)) 40%, transparent);
  font-weight: 600;
}

.exam-type-pill.active .cal-tag-dot {
  background-color: #ffffff !important;
}

/* Color Swatch Selector for Folder Sheet */
.color-swatch-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.color-swatch-btn {
  appearance: none;
  background: var(--bg-input);
  border: 1.5px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0.5rem 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 140ms ease;
}

.color-swatch-btn.active {
  background: var(--bg-surface);
  border-color: var(--brand-color);
  box-shadow: var(--shadow-xs);
}

.swatch-circle {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  flex-shrink: 0;
}

.swatch-emerald { background: var(--accent-emerald); }
.swatch-indigo { background: var(--accent-ocean); }
.swatch-amber { background: var(--accent-amber); }
.swatch-rose { background: var(--accent-rose); }
.swatch-sky { background: var(--accent-sky); }
.swatch-zinc { background: var(--accent-sand); }

/* Sheet Grid Rows & Fields */
.sheet-row-main-side {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0.85rem;
}

.sheet-row-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.field label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.label-hint {
  font-weight: 400;
  color: var(--text-muted);
}

.field-micro-hint {
  font-size: 0.71rem;
  color: var(--text-muted);
}

.req-star {
  color: var(--accent-rose);
}

.field input,
.field select {
  font-family: inherit;
  font-size: 0.88rem;
  padding: 0.62rem 0.85rem;
  border-radius: 11px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-input);
  color: var(--text-primary);
  outline: none;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.field input:focus,
.field select:focus {
  background: var(--bg-surface);
  border-color: var(--brand-color);
  box-shadow: 0 0 0 3px rgba(57, 96, 78, 0.12);
}

.sheet-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.preview-body {
  min-height: 240px;
  max-height: 65dvh;
  overflow: auto;
  background: var(--bg-input);
  display: grid;
  place-items: center;
}

.preview-body img,
.preview-body iframe {
  max-width: 100%;
  border-radius: var(--radius-sm);
}

.preview-text-box {
  width: 100%;
  white-space: pre-wrap;
  font-family: var(--font-mono);
  font-size: 0.81rem;
  background: var(--bg-surface);
  padding: 1.1rem;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
}

/* Required Field Feedback (modern-web-guidance: required-field-feedback) */
.error-msg {
  display: none;
  color: #b83b3b;
  font-size: 0.78rem;
  margin-top: 0.15rem;
}

input:user-invalid,
input.user-invalid-fallback {
  border-color: #b83b3b;
  background-color: #fbf0f0;
  color: #2a2521;
}

input:user-invalid + .error-msg,
input.user-invalid-fallback + .error-msg {
  display: block;
}

.settings-reset-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 1.05rem;
  border-radius: 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  font-size: 0.84rem;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 1120px) {
  .modules-summary-grid,
  .week-board-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .calendar-layout {
    grid-template-columns: 1fr;
  }
  .widget-span-4,
  .widget-span-6 {
    flex: 1 1 calc(50% - 1.25rem);
    min-width: min(100%, 320px);
  }
}

@media (max-width: 780px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }
  .sidebar-nav {
    flex-direction: row;
    overflow-x: auto;
  }
  .workspace-main {
    padding: 1.25rem;
  }
  .modules-summary-grid,
  .week-board-grid,
  .sheet-row-main-side,
  .sheet-row-2,
  .widget-gallery-grid,
  .color-swatch-row {
    grid-template-columns: 1fr;
  }
  .status-choice-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .widget-span-4,
  .widget-span-6 {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* ==========================================================================
   iPadOS & macOS Standalone PWA Safe-Area & Touch Polish
   ========================================================================== */

@media (display-mode: standalone) {
  .sidebar {
    padding-top: max(1.4rem, env(safe-area-inset-top));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    padding-left: max(1.05rem, env(safe-area-inset-left));
  }
  .workspace-main {
    padding-top: max(2.2rem, env(safe-area-inset-top));
    padding-bottom: max(3.5rem, env(safe-area-inset-bottom));
    padding-right: max(2rem, env(safe-area-inset-right));
  }
}

/* ==========================================================================
   Cozy Upgrades: Widget Reordering, Focus Timer, Countdowns, Semester-Karten & Notes
   ========================================================================== */

.widget-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.widget-move-btn {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-muted);
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 0.76rem;
  opacity: 0.55;
  transition: all 140ms ease;
}

.widget-move-btn:hover {
  opacity: 1;
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.widget-card[draggable="true"] {
  cursor: grab;
}

.widget-card.is-dragging {
  opacity: 0.55;
  transform: scale(0.985);
}

.widget-card.is-drag-over {
  border-color: var(--brand-color);
  box-shadow: 0 0 0 2px rgba(57, 96, 78, 0.2);
}

/* Focus / Pomodoro Widget */
/* Focus / Pomodoro Widget */
.pomodoro-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  padding: 0.35rem 0 0.15rem;
  width: 100%;
}

.pomodoro-mode-pills {
  display: inline-flex;
  gap: 0.25rem;
  background: var(--bg-subtle);
  padding: 0.22rem;
  border-radius: 999px;
  flex-wrap: wrap;
  justify-content: center;
}

.pomo-mode-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 500;
  padding: 0.26rem 0.62rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 140ms ease;
}

.pomo-mode-btn:hover {
  color: var(--text-primary);
}

.pomo-mode-btn.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
  font-weight: 600;
}

.pomo-custom-row {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.pomo-custom-input {
  width: 58px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.22rem 0.35rem;
  border-radius: 7px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-primary);
  outline: none;
}

.pomo-custom-input:focus {
  border-color: var(--brand-color);
}

.pomodoro-time-display {
  font-size: 2.35rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  line-height: 1.05;
  margin: 0.1rem 0;
}

.pomo-progress-track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--bg-subtle);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

.pomo-progress-bar {
  height: 100%;
  background: var(--accent-emerald, #39604E);
  border-radius: 999px;
  transition: width 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pomodoro-controls {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

/* Exam & Deadline Countdown Widget */
.countdown-days-badge {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  letter-spacing: -0.01em;
}

.countdown-days-badge.is-urgent {
  background: color-mix(in oklab, #e11d48 18%, var(--bg-surface));
  color: #e11d48;
  border: 1px solid rgba(225, 29, 72, 0.35);
  box-shadow: 0 0 10px rgba(225, 29, 72, 0.15);
}

.countdown-days-badge.is-soon {
  background: color-mix(in oklab, #d97706 18%, var(--bg-surface));
  color: #d97706;
  border: 1px solid rgba(217, 119, 6, 0.3);
}

.countdown-days-badge.is-calm {
  background: color-mix(in oklab, #0284c7 15%, var(--bg-surface));
  color: #0284c7;
  border: 1px solid rgba(2, 132, 199, 0.25);
}

/* Apple Event Detail Sheet */
.cal-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.75rem 0.85rem;
  border-radius: 11px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  transition: background 140ms ease;
}

.cal-detail-row:hover {
  background: color-mix(in oklab, var(--bg-subtle) 60%, var(--bg-surface));
}

.cal-detail-icon {
  font-size: 1.25rem;
  line-height: 1.2;
  flex-shrink: 0;
  padding-top: 0.1rem;
}

.cal-detail-content {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex-grow: 1;
}

.cal-detail-label {
  font-size: 0.70rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.cal-detail-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}

.cal-detail-sub {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

/* Today Schedule Quick Add */
.today-todo-quick-row {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border-subtle);
}

.today-todo-quick-input {
  flex: 1;
  font-size: 0.82rem;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-primary);
  outline: none;
}

.today-todo-quick-input:focus {
  border-color: var(--brand-color);
}

/* Module View Toggle & Cozy Semester-Karten */
.view-mode-toggle {
  display: inline-flex;
  background: var(--bg-subtle);
  padding: 0.22rem;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
}

.view-mode-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.77rem;
  font-weight: 500;
  padding: 0.34rem 0.72rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 140ms ease;
}

.view-mode-btn.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}

.modules-cards-board {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.semester-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.semester-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.25rem;
}

.semester-group-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.semester-group-summary {
  font-size: 0.78rem;
  color: var(--text-secondary);
  background: var(--bg-subtle);
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
}

.semester-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
  gap: 0.9rem;
}

.module-cozy-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.85rem;
  box-shadow: var(--shadow-xs);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
  overflow: hidden;
  box-sizing: border-box;
  min-width: 0;
}

.module-cozy-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--border-strong);
}

.module-cozy-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.65rem;
  min-width: 0;
}

.module-cozy-name {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  word-break: break-word;
}

.module-cozy-sub {
  margin: 0.22rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.module-cozy-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.module-cozy-pill {
  font-size: 0.74rem;
  font-weight: 500;
  padding: 0.22rem 0.62rem;
  border-radius: 999px;
  background: var(--bg-subtle);
  border: 1px solid transparent;
  color: var(--text-secondary);
}

.module-cozy-pill.is-grade {
  background: var(--accent-emerald-soft);
  border-color: transparent;
  color: var(--accent-emerald);
  font-weight: 600;
}

.module-cozy-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  min-width: 0;
}

.module-cozy-footer .status-select-inline {
  max-width: 140px;
  text-overflow: ellipsis;
}

.module-cozy-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  margin-left: auto;
}

.module-cozy-actions .ghost-btn {
  font-size: 0.73rem;
  padding: 0.22rem 0.52rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.module-cozy-actions .text-rose {
  padding: 0.22rem 0.45rem;
  min-width: 24px;
  text-align: center;
}

/* Cozy Note Editor Textarea (modern-web-guidance: form-fields-automatically-fit-contents) */
.note-editor-textarea {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.65;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-input);
  color: var(--text-primary);
  outline: none;
  field-sizing: content;
  height: auto;
  width: 100%;
  min-block-size: 10lh;
  max-block-size: 24lh;
  resize: vertical;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.note-editor-textarea:focus {
  background: var(--bg-surface);
  border-color: var(--brand-color);
  box-shadow: 0 0 0 3px rgba(57, 96, 78, 0.12);
}

.preview-text-box {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* Recurring Calendar Indicator */
.cal-repeat-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.69rem;
  color: var(--brand-color);
  background: var(--accent-emerald-soft);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-weight: 600;
}

/* ==========================================================================
   Hub 6: Eigenes Notiz-System (Warm Apple Notes / Craft Paper Studio)
   ========================================================================== */

.notes-studio-layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 1.3rem;
  align-items: start;
}

.notes-sidebar-card {
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-height: calc(100dvh - 165px);
  position: sticky;
  top: 1.5rem;
}

.notes-sidebar-top {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border-subtle);
}

.notes-filter-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.notes-list-scroll {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  overflow-y: auto;
  padding-right: 0.15rem;
}

.note-list-item {
  appearance: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  background: var(--bg-subtle);
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 0.85rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  cursor: pointer;
  color: var(--text-primary);
  transition: all 150ms ease;
}

.note-list-item:hover {
  background: var(--bg-surface);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-xs);
  transform: translateY(-1px);
}

.note-list-item.is-selected {
  background: var(--bg-surface);
  border-color: var(--brand-color);
  box-shadow: 0 0 0 1px var(--brand-color), var(--shadow-xs);
}

.note-list-item-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

.note-list-item-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  flex-shrink: 0;
}

.note-item-del-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease;
}

.note-list-item:hover .note-item-del-btn,
.note-item-del-btn:focus-visible {
  opacity: 0.7;
}

.note-item-del-btn:hover {
  opacity: 1;
  background: rgba(225, 29, 72, 0.12);
  color: var(--accent-rose);
}

.note-list-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  word-break: break-word;
}

.note-list-snippet {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.42;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.note-list-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: 0.71rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.note-list-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.note-mini-tag {
  font-size: 0.68rem;
  font-weight: 500;
  padding: 0.12rem 0.48rem;
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--text-secondary);
}

.note-mini-tag.is-module {
  background: var(--accent-ocean-soft);
  color: var(--accent-ocean);
}

.note-mini-tag.is-cat {
  background: var(--accent-emerald-soft);
  color: var(--accent-emerald);
}

/* Right Note Studio Editor Card */
.notes-editor-card {
  padding: 1.75rem 2.1rem;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
  background: var(--bg-surface);
}

.notes-editor-card[data-paper-tint="default"],
.notes-editor-card[data-paper-tint="cream"] {
  background: var(--bg-surface);
}
.notes-editor-card[data-paper-tint="sage"] {
  background: linear-gradient(180deg, color-mix(in oklab, #4A6B53 10%, var(--bg-surface)) 0%, var(--bg-surface) 180px);
}
.notes-editor-card[data-paper-tint="ocean"],
.notes-editor-card[data-paper-tint="sky"] {
  background: linear-gradient(180deg, color-mix(in oklab, #3A6680 10%, var(--bg-surface)) 0%, var(--bg-surface) 180px);
}
.notes-editor-card[data-paper-tint="amber"],
.notes-editor-card[data-paper-tint="sand"] {
  background: linear-gradient(180deg, color-mix(in oklab, #B4690E 10%, var(--bg-surface)) 0%, var(--bg-surface) 180px);
}
.notes-editor-card[data-paper-tint="rose"] {
  background: linear-gradient(180deg, color-mix(in oklab, #B94A48 10%, var(--bg-surface)) 0%, var(--bg-surface) 180px);
}
.notes-editor-card[data-paper-tint="custom"] {
  background: linear-gradient(180deg, color-mix(in oklab, var(--paper-custom-tint, var(--brand-color)) 12%, var(--bg-surface)) 0%, var(--bg-surface) 180px);
}

.notes-editor-empty {
  margin: auto;
  text-align: center;
  max-width: 420px;
  padding: 2.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.notes-active-studio {
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  flex: 1;
}

.notes-studio-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.notes-title-input {
  flex: 1;
  min-width: 220px;
  font-family: var(--font-sans);
  font-size: 1.55rem;
  font-weight: 650;
  letter-spacing: -0.024em;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0.35rem 0.55rem;
  margin-left: -0.55rem;
  outline: none;
  transition: background-color 140ms ease, border-color 140ms ease;
}

.notes-title-input:hover {
  background: var(--bg-subtle);
}

.notes-title-input:focus {
  background: var(--bg-surface);
  border-color: var(--border-strong);
}

.notes-studio-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.notes-studio-actions button,
.notes-studio-actions .goodnotes-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

#togglePinNoteBtn.active {
  background: var(--accent-ocean-soft);
  color: var(--accent-ocean);
  border-color: rgba(2, 132, 199, 0.35);
  font-weight: 600;
}

.note-save-status {
  font-size: 0.75rem;
  color: var(--accent-emerald);
  background: var(--accent-emerald-soft);
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  font-weight: 500;
}

.notes-meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.55rem 0.75rem;
  border-radius: 13px;
  background: var(--bg-subtle);
  border: 1px solid transparent;
}

.notes-cat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.notes-links-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.notes-meta-select {
  field-sizing: content;
  max-inline-size: 28ch;
  font-size: 0.77rem;
  padding: 0.32rem 0.65rem;
  background: var(--bg-surface);
}

.note-tint-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding-left: 0.35rem;
  border-left: 1px solid var(--border-subtle);
}

.tint-dot {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  cursor: pointer;
  padding: 0;
  transition: transform 130ms ease, border-color 130ms ease;
}

.tint-dot:hover {
  transform: scale(1.12);
}

.tint-dot.active {
  border: 2px solid var(--text-primary);
  transform: scale(1.15);
}

.tint-default { background: #fbf9f5; }
.tint-sage { background: #cfe3d8; }
.tint-ocean { background: #cfe0ee; }
.tint-amber { background: #f2d9c5; }
.tint-rose { background: #f0d2d6; }

.notes-format-bar {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  flex-wrap: wrap;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border-subtle);
}

.format-bar-label {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-right: 0.15rem;
}

.format-chip-btn {
  appearance: none;
  background: var(--bg-subtle);
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.28rem 0.65rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 130ms ease;
}

.format-chip-btn:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-xs);
}

.notes-writing-area {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Auto-sizing Note Studio Paper Canvas (modern-web-guidance: form-fields-automatically-fit-contents) */
.notes-studio-textarea {
  field-sizing: content;
  height: auto;
  width: 100%;
  min-block-size: 16lh;
  max-block-size: 38lh;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  line-height: 1.76;
  color: var(--text-primary);
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0.35rem 0.1rem;
  outline: none;
  resize: vertical;
}

.notes-studio-textarea:focus {
  outline: none;
}

.notes-studio-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.76rem;
}

/* ==========================================================================
   Notes Redesign: Gallery Overview Grid & Systematic Focused Editor
   ========================================================================== */

.notes-gallery-view {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
}

.notes-gallery-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.15rem;
  flex-wrap: wrap;
}

.notes-gallery-toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  flex: 1;
}

.notes-gallery-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.notes-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(295px, 1fr));
  gap: 1.15rem;
}

.note-card-tile {
  position: relative;
  border-radius: var(--radius-md);
  padding: 1.25rem 1.35rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.85rem;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, background-color 150ms ease;
  min-height: 180px;
}

.note-card-tile:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.note-card-tile[data-paper-tint="sage"] {
  background: color-mix(in oklab, #4A6B53 10%, var(--bg-surface));
  border-color: color-mix(in oklab, #4A6B53 25%, var(--border-subtle));
}
.note-card-tile[data-paper-tint="ocean"],
.note-card-tile[data-paper-tint="sky"] {
  background: color-mix(in oklab, #3A6680 10%, var(--bg-surface));
  border-color: color-mix(in oklab, #3A6680 25%, var(--border-subtle));
}
.note-card-tile[data-paper-tint="amber"],
.note-card-tile[data-paper-tint="sand"] {
  background: color-mix(in oklab, #B4690E 10%, var(--bg-surface));
  border-color: color-mix(in oklab, #B4690E 25%, var(--border-subtle));
}
.note-card-tile[data-paper-tint="rose"] {
  background: color-mix(in oklab, #B94A48 10%, var(--bg-surface));
  border-color: color-mix(in oklab, #B94A48 25%, var(--border-subtle));
}
.note-card-tile[data-paper-tint="custom"] {
  background: color-mix(in oklab, var(--card-custom-tint, var(--brand-color)) 12%, var(--bg-surface));
  border-color: color-mix(in oklab, var(--card-custom-tint, var(--brand-color)) 30%, var(--border-subtle));
}

.note-tile-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

.note-tile-badges {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.note-tile-cat {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--bg-subtle);
  color: var(--text-secondary);
}

.note-tile-pill {
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: var(--bg-subtle);
  color: var(--text-muted);
}

.note-tile-pill.is-pinned {
  background: var(--accent-ocean-soft);
  color: var(--accent-ocean);
  font-weight: 600;
}

.note-tile-del-btn {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-muted);
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  transition: all 130ms ease;
}

.note-card-tile:hover .note-tile-del-btn {
  opacity: 1;
}

.note-tile-del-btn:hover {
  background: rgba(225, 29, 72, 0.14);
  color: var(--accent-rose);
  transform: scale(1.08);
}

.note-tile-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.note-tile-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.018em;
  color: var(--text-primary);
  line-height: 1.3;
}

.note-tile-title.is-empty {
  font-style: italic;
  color: var(--text-muted);
}

.note-tile-snippet {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.48;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.note-tile-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.73rem;
  color: var(--text-muted);
}

/* Focused Editor View */
.notes-focused-editor {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  width: 100%;
}

.notes-editor-nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.notes-system-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  flex-wrap: wrap;
  padding: 0.65rem 0.95rem;
  background: var(--bg-subtle);
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
}

.notes-toolbar-section {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.notes-toolbar-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 960px) {
  .notes-studio-layout {
    grid-template-columns: 1fr;
  }
  .notes-sidebar-card {
    position: static;
    max-height: 320px;
  }
}

/* ==========================================================================
   1. Same-Document View Transitions & Top-Layer Dialog Motion
      (modern-web-guidance: same-document-transitions, motion, animate-to-from-top-layer)
   ========================================================================== */

.hub-title:focus {
  outline: none;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 210ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Top-Layer Entry & Exit Animations with data-closing fallback */
:is(dialog[open], [popover]:popover-open):where(:not([data-closing])) {
  opacity: 1;
  transform: scale(1) translateY(0);

  @starting-style {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }

  &::backdrop {
    background-color: rgba(32, 27, 23, 0.38);

    @starting-style {
      background-color: transparent;
    }
  }
}

dialog,
[popover] {
  opacity: 0;
  transform: scale(0.96) translateY(8px);
  /* MANDATORY: transition display and overlay for top-layer elements */
  transition-property: opacity, transform, display, overlay;
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-behavior: allow-discrete;
}

dialog::backdrop,
[popover]::backdrop {
  background-color: rgba(32, 27, 23, 0);
  transition-property: background-color, display, overlay;
  transition-duration: 0.22s;
  transition-timing-function: ease-out;
  transition-behavior: allow-discrete;
}

@media (prefers-reduced-motion: reduce) {
  dialog,
  [popover] {
    transform: none;
    transition-duration: 0.1s;
  }

  @starting-style {
    dialog[open],
    [popover]:popover-open {
      transform: none;
    }
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   2. Sidebar Spotlight Trigger & Always-Accessible Pomodoro Focus Bar
   ========================================================================== */

.sidebar-spotlight-btn {
  appearance: none;
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 0.52rem 0.72rem;
  margin-bottom: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: all 140ms ease;
}

.sidebar-spotlight-btn:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.spotlight-btn-left {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
}

.spotlight-kbd {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.12rem 0.38rem;
  border-radius: 6px;
  background: var(--bg-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

.sidebar-pomo-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 0.72rem 0.85rem;
  margin-top: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.48rem;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  box-sizing: border-box;
}

.sidebar-pomo-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}

.sidebar-pomo-label {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.pomo-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--text-muted);
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

.pomo-status-dot.is-running {
  background: var(--brand-color);
  box-shadow: 0 0 0 3px var(--accent-emerald-soft);
}

.sidebar-pomo-presets {
  display: flex;
  width: 100%;
  gap: 0.16rem;
  background: var(--bg-subtle);
  padding: 0.16rem;
  border-radius: 8px;
  box-sizing: border-box;
}

.pomo-mini-preset {
  flex: 1;
  text-align: center;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.22rem 0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 120ms ease;
  white-space: nowrap;
  min-width: 0;
}

.pomo-mini-preset.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}

.sidebar-pomo-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.sidebar-pomo-time {
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.sidebar-pomo-btns {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.pomo-play-btn {
  appearance: none;
  border: none;
  background: var(--brand-color);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.73rem;
  font-weight: 600;
  padding: 0.28rem 0.68rem;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 130ms ease, transform 130ms ease;
}

.pomo-play-btn:hover {
  opacity: 0.92;
}

.pomo-reset-btn {
  appearance: none;
  border: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 130ms ease;
}

.pomo-reset-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Sidebar & Widget Pomodoro Progress Track & Bar */
.sidebar-pomo-progress-track {
  width: 100%;
  height: 4px;
  background: var(--bg-subtle);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 0.2rem;
}

.sidebar-pomo-progress-bar {
  height: 100%;
  background: var(--brand-color);
  border-radius: 999px;
  transition: width 300ms ease;
}

.pomodoro-progress-track {
  width: 100%;
  max-width: 260px;
  height: 6px;
  background: var(--bg-subtle);
  border-radius: 999px;
  overflow: hidden;
  margin: 0.2rem auto 0;
}

.pomodoro-progress-bar {
  height: 100%;
  background: var(--brand-color);
  border-radius: 999px;
  transition: width 300ms ease;
}

/* ==========================================================================
   3. Dashboard Quick-Links Bar (Moodle, Campus-Portal, Bib & Co.)
   ========================================================================== */

.quick-links-strip {
  padding: 0.68rem 1.05rem;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.quick-links-strip-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.quick-links-label {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-muted);
  padding-right: 0.45rem;
  border-right: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.quick-links-pills {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  flex-wrap: wrap;
}

.quick-link-pill-wrap {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  padding: 0.14rem 0.25rem 0.14rem 0.65rem;
  gap: 0.3rem;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.quick-link-pill-wrap:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
  background: var(--bg-surface);
}

.quick-link-anchor {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  text-decoration: none;
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 550;
  padding: 0.14rem 0.2rem;
}

.quick-link-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
  forced-color-adjust: none;
}

.quick-link-del-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.68rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease;
}

.quick-link-pill-wrap:hover .quick-link-del-btn {
  opacity: 1;
}

.quick-link-del-btn:hover {
  background: var(--accent-rose-soft);
  color: var(--accent-rose);
}

.quick-links-empty-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ==========================================================================
   4. Calendar Week Timetable View (Stundenplan Mo–So mit Stundenlinien)
   ========================================================================== */

.calendar-week-timetable {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: 0.95rem;
  overflow: hidden;
}

.timetable-scroll-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
}

.timetable-matrix {
  display: flex;
  flex-direction: column;
  min-width: 820px;
}

/* Header row with 8 columns (1 time gutter + 7 days) */
.tt-header-row {
  display: grid;
  grid-template-columns: 56px repeat(7, minmax(105px, 1fr));
  border-bottom: 2px solid var(--border-subtle);
  background: var(--bg-subtle);
}

.tt-head-cell {
  padding: 0.62rem 0.35rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  user-select: none;
  cursor: pointer;
  border-right: 1px solid var(--border-subtle);
  transition: background-color 140ms ease;
}

.tt-head-cell:last-child {
  border-right: none;
}

.tt-head-cell:hover {
  background: rgba(42, 37, 33, 0.04);
}

.tt-head-time-corner {
  cursor: default;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  justify-content: center;
  border-right: 1px solid var(--border-subtle);
}

.tt-head-dayname {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.tt-head-daynum {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
}

.tt-head-cell.is-today .tt-head-daynum {
  background: var(--brand-color);
  color: #ffffff;
}

.tt-head-cell.is-selected {
  background: rgba(57, 96, 78, 0.08);
}

/* Timetable Body (Time Rail + 7 Day Columns) */
.tt-body-row {
  display: grid;
  grid-template-columns: 56px repeat(7, minmax(105px, 1fr));
  position: relative;
}

/* Time rail on the left */
.tt-time-rail {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
  user-select: none;
}

.tt-time-slot-label {
  height: 56px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-right: 0.5rem;
  padding-top: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
  box-sizing: border-box;
}

/* Day columns */
.tt-day-col {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-subtle);
  position: relative;
  background: var(--bg-surface);
  transition: background-color 140ms ease;
}

.tt-day-col:last-child {
  border-right: none;
}

.tt-day-col.is-today {
  background: rgba(57, 96, 78, 0.025);
}

.tt-day-col.is-selected {
  background: rgba(57, 96, 78, 0.045);
}

/* Hourly slots with subtle dividing line & half-hour guide */
.tt-hour-slot {
  height: 56px;
  border-bottom: 1px solid var(--border-subtle);
  box-sizing: border-box;
  padding: 0.2rem 0.28rem;
  position: relative;
  transition: background-color 120ms ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  overflow: visible;
  background-image: linear-gradient(to bottom, transparent 27px, rgba(42, 37, 33, 0.035) 27px, rgba(42, 37, 33, 0.035) 28px, transparent 28px);
}

.tt-hour-slot:hover {
  background-color: rgba(42, 37, 33, 0.045);
}

.tt-hour-slot:hover::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brand-color);
  opacity: 0.5;
  pointer-events: none;
}

/* Live "Now" Time Indicator Line in Week Timetable */
.tt-now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--accent-rose);
  z-index: 10;
  pointer-events: none;
  display: flex;
  align-items: center;
}

.tt-now-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background-color: var(--accent-rose);
  position: absolute;
  left: -4px;
  box-shadow: 0 0 0 2px var(--bg-surface);
}

.tt-now-badge {
  position: absolute;
  right: 4px;
  top: -9px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  color: #ffffff;
  background-color: var(--accent-rose);
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

/* Event block inside timetable */
.tt-event-card {
  position: relative;
  z-index: 2;
  padding: 0.3rem 0.45rem;
  border-radius: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-left: 3.5px solid var(--brand-color);
  box-shadow: 0 1px 3px rgba(32, 26, 20, 0.05);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  cursor: pointer;
  transition: transform 130ms ease, box-shadow 130ms ease;
}

.tt-event-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(32, 26, 20, 0.09);
  border-color: var(--border-strong);
}

.tt-event-time {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.tt-event-title {
  font-size: 0.74rem;
  font-weight: 650;
  line-height: 1.2;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tt-event-loc {
  font-size: 0.64rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   5. Note Studio Read & Interactive Checklist Mode (#activeNoteReadView)
   ========================================================================== */

.notes-read-canvas {
  min-block-size: 16lh;
  padding: 0.5rem 0.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  font-size: 0.97rem;
  line-height: 1.72;
  color: var(--text-primary);
}

.note-read-h1 {
  margin: 0.4rem 0 0.1rem;
  font-size: 1.38rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.note-read-h2 {
  margin: 0.35rem 0 0.08rem;
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border-subtle);
}

.note-read-h3 {
  margin: 0.25rem 0 0.05rem;
  font-size: 1rem;
  font-weight: 650;
  color: var(--text-primary);
}

.note-read-p {
  margin: 0;
  color: var(--text-primary);
  white-space: pre-wrap;
}

.note-read-callout {
  padding: 0.78rem 1rem;
  border-radius: 12px;
  background: var(--accent-emerald-soft);
  border-left: 3.5px solid var(--brand-color);
  color: var(--text-primary);
  font-weight: 500;
}

.note-read-divider {
  border: none;
  height: 1px;
  background: var(--border-strong);
  margin: 0.45rem 0;
}

.note-read-bullet {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding-left: 0.25rem;
}

.note-read-bullet-dot {
  color: var(--brand-color);
  font-weight: 700;
}

.note-read-check-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.38rem 0.65rem;
  border-radius: 10px;
  background: var(--bg-subtle);
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: background-color 130ms ease, border-color 130ms ease;
}

.note-read-check-row:hover {
  background: var(--bg-surface);
  border-color: var(--border-subtle);
}

.note-read-check-row.is-checked {
  opacity: 0.68;
}

.note-read-check-row.is-checked .note-read-check-text {
  text-decoration: line-through;
  color: var(--text-muted);
}

.note-read-check-box {
  width: 18px;
  height: 18px;
  accent-color: var(--brand-color);
  cursor: pointer;
  flex-shrink: 0;
}

/* ==========================================================================
   6. Brand-Consistent Range Sliders & „Was-wäre-wenn“-Notenrechner
      (modern-web-guidance: slider)
   ========================================================================== */

input[type="range"].sim-grade-slider {
  --slider-track-size: 0.48rem;
  --slider-thumb-size: 1.2rem;
  --slider-track-radius: 999px;
  --slider-thumb-radius: 50%;
  --slider-track-color: var(--border-strong);
  --slider-fill-color: var(--brand-color);
  --slider-thumb-color: var(--slider-fill-color);
  --slider-direction: to right;

  &:dir(rtl) {
    --slider-direction: to left;
  }

  --attr-min: attr(min type(<number>), 1);
  --attr-max: attr(max type(<number>), 4);
  --control-value: attr(value type(<number>), 2);
  --slider-progress: calc(
    progress(var(--control-value), var(--attr-min), var(--attr-max)) * 100%
  );

  appearance: none;
  inline-size: 100%;
  block-size: 2.2rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

@supports not (opacity: progress(1, 0, 100)) {
  input[type="range"].sim-grade-slider {
    --slider-progress: calc(
      (var(--control-value) - var(--attr-min)) /
      (var(--attr-max) - var(--attr-min)) * 100%
    );
  }
}

/* WebKit/Blink (separate rule block per modern-web-guidance: slider) */
input[type="range"].sim-grade-slider::-webkit-slider-runnable-track {
  block-size: var(--slider-track-size);
  border: 0;
  border-radius: var(--slider-track-radius);
  background: linear-gradient(
    var(--slider-direction),
    var(--slider-fill-color) var(--slider-progress),
    var(--slider-track-color) var(--slider-progress)
  );
}

input[type="range"].sim-grade-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  inline-size: var(--slider-thumb-size);
  block-size: var(--slider-thumb-size);
  margin-block-start: calc(
    (var(--slider-track-size) - var(--slider-thumb-size)) / 2
  );
  border: 2px solid var(--bg-surface);
  border-radius: var(--slider-thumb-radius);
  background: var(--slider-thumb-color);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}

/* Firefox (separate rule block per modern-web-guidance: slider) */
input[type="range"].sim-grade-slider::-moz-range-track {
  block-size: var(--slider-track-size);
  border: 0;
  border-radius: var(--slider-track-radius);
  background: var(--slider-track-color);
}

input[type="range"].sim-grade-slider::-moz-range-progress {
  block-size: var(--slider-track-size);
  border-radius: var(--slider-track-radius);
  background: var(--slider-fill-color);
}

input[type="range"].sim-grade-slider::-moz-range-thumb {
  inline-size: var(--slider-thumb-size);
  block-size: var(--slider-thumb-size);
  border: 2px solid var(--bg-surface);
  border-radius: var(--slider-thumb-radius);
  background: var(--slider-thumb-color);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}

input[type="range"].sim-grade-slider:focus-visible {
  outline: 2px solid var(--slider-fill-color);
  outline-offset: 4px;
  border-radius: 8px;
}

.sim-summary-trio {
  display: grid;
  grid-template-columns: 1fr auto 1.35fr;
  align-items: center;
  gap: 1.1rem;
  padding: 1.25rem 1.4rem;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
}

.sim-card-col {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sim-card-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.sim-card-metric {
  font-size: 2.15rem;
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--text-primary);
}

.sim-card-sub {
  font-size: 0.77rem;
  color: var(--text-secondary);
}

.sim-card-arrow {
  color: var(--text-muted);
  display: grid;
  place-items: center;
  opacity: 0.7;
}

.sim-card-col.sim-card-target {
  padding: 0.85rem 1.15rem;
  border-radius: 14px;
  background: var(--accent-emerald-soft);
  border: 1px solid rgba(57, 96, 78, 0.22);
}

.sim-target-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.sim-delta-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--brand-color);
  border: 1px solid rgba(57, 96, 78, 0.25);
  box-shadow: 0 1px 2px rgba(32, 26, 20, 0.05);
}

.sim-delta-badge.is-better {
  background: var(--accent-emerald-soft);
  color: var(--accent-emerald);
  border-color: rgba(57, 96, 78, 0.35);
}

.sim-delta-badge.is-worse {
  background: var(--accent-amber-soft);
  color: var(--accent-amber);
  border-color: rgba(189, 104, 52, 0.35);
}

.sim-quick-presets-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.65rem 0.95rem;
  border-radius: 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
}

.sim-sliders-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 48dvh;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.sim-slider-card {
  padding: 0.95rem 1.15rem;
  border-radius: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 1px 3px rgba(32, 26, 20, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.sim-slider-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
}

.sim-slider-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.sim-slider-card-title {
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.sim-slider-card-meta {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.sim-grade-pill {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 750;
  padding: 0.22rem 0.68rem;
  border-radius: 10px;
  background: var(--accent-emerald-soft);
  color: var(--brand-color);
  border: 1px solid rgba(57, 96, 78, 0.2);
}

.sim-slider-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.sim-slider-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sim-scale-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: -0.25rem;
  padding: 0 0.15rem;
}

.sim-grade-output {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 750;
  color: var(--brand-color);
  min-width: 2.4rem;
  text-align: right;
}

/* ==========================================================================
   Zielnoten-Rechner („Was brauche ich für eine 1,X?“) Styles
   ========================================================================== */

.sim-target-section {
  padding: 1.25rem 1.4rem;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.sim-target-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.sim-target-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.sim-target-badge-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--brand-color) 12%, var(--bg-surface));
  color: var(--brand-color);
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  border: 1px solid color-mix(in oklab, var(--brand-color) 25%, transparent);
}

.sim-target-title {
  font-size: 1.02rem;
  font-weight: 750;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0;
}

.sim-target-subtitle {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin: 0.2rem 0 0 0;
  line-height: 1.4;
}

.sim-target-scope-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.sim-scope-label {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.sim-scope-select {
  font-size: 0.8rem;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
}

.sim-target-controls-row {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  padding: 0.85rem 1.1rem;
  background: var(--bg-subtle);
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
}

.sim-target-input-block {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.sim-input-label {
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--text-primary);
  white-space: nowrap;
}

.sim-input-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.sim-input-prefix {
  position: absolute;
  left: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-muted);
  pointer-events: none;
}

.sim-gpa-input {
  width: 96px;
  height: 38px;
  padding-left: 1.85rem;
  padding-right: 0.5rem;
  font-size: 1.12rem;
  font-weight: 750;
  border-radius: 9px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-primary);
  text-align: center;
}

.sim-target-chips-block {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  flex: 1;
}

.sim-chips-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sim-target-chips {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.sim-target-chips .chip-btn.is-active {
  background: var(--brand-color);
  color: #ffffff;
  border-color: var(--brand-color);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.sim-target-result-card {
  padding: 1.15rem 1.3rem;
  border-radius: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  transition: all 180ms ease;
}

.sim-result-main-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
}

.sim-result-kpi-col {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 140px;
}

.sim-result-kpi-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.sim-result-kpi-number {
  font-size: 2.3rem;
  font-weight: 850;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--brand-color);
}

.sim-result-kpi-sub {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.sim-result-status-col {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sim-result-status-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  border: 1px solid transparent;
}

.sim-result-status-badge.is-hard {
  background: var(--accent-rose-soft);
  color: var(--accent-rose);
  border-color: rgba(225, 29, 72, 0.25);
}

.sim-result-status-badge.is-medium {
  background: var(--accent-amber-soft);
  color: var(--accent-amber);
  border-color: rgba(217, 119, 6, 0.25);
}

.sim-result-status-badge.is-easy {
  background: var(--accent-emerald-soft);
  color: var(--accent-emerald);
  border-color: rgba(57, 96, 78, 0.25);
}

.sim-result-status-badge.is-safe {
  background: var(--accent-ocean-soft);
  color: var(--accent-ocean);
  border-color: rgba(37, 99, 235, 0.25);
}

.sim-result-status-badge.is-warning {
  background: var(--accent-rose-soft);
  color: var(--accent-rose);
  border-color: rgba(225, 29, 72, 0.3);
}

.sim-result-status-badge.is-success {
  background: var(--accent-emerald-soft);
  color: var(--accent-emerald);
  border-color: rgba(57, 96, 78, 0.3);
}

.sim-result-status-badge.is-normal {
  background: var(--bg-subtle);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

.sim-result-status-text {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-secondary);
  margin: 0;
}

.sim-result-status-text strong {
  color: var(--text-primary);
}

.sim-result-action-col {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.sim-section-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.5rem 0 0.25rem 0;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.sim-section-divider::before,
.sim-section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

.sim-dash-target-pill {
  display: inline-block;
  font-size: 0.77rem;
  padding: 0.22rem 0.58rem;
  border-radius: 8px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  margin-top: 0.35rem;
}

@media (max-width: 768px) {
  .sim-result-main-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .sim-result-action-col {
    justify-content: stretch;
  }
  .sim-result-action-col button {
    width: 100%;
  }
  .sim-target-controls-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   7. Custom Colors, contrast-color() & color-mix() in Oklab
      (modern-web-guidance: color, contrast-color)
   ========================================================================== */

.swatch-circle,
.tint-dot,
.color-picker-well {
  /* Use forced-color-adjust: none only where color is essential information */
  forced-color-adjust: none;
}

.custom-color-badge {
  --badge-bg: #39604e;
  background-color: var(--badge-bg);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.18rem 0.58rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* Recommended Relative Color Syntax (RCS) fallback (modern-web-guidance: contrast-color) */
@supports (color: oklch(from red l c h)) {
  .custom-color-badge {
    --threshold: 0.623;
    --l: max(0, sign(var(--threshold) - l));
    color: oklch(from var(--badge-bg) var(--l) 0 h);
  }
}

/* MANDATORY: Dynamic contrasting color via contrast-color() */
@supports (color: contrast-color(red)) {
  .custom-color-badge {
    color: contrast-color(var(--badge-bg));
  }
}

/* Soft dynamic surface tint via color-mix(in oklab) (modern-web-guidance: color) */
.custom-color-soft-surface {
  background-color: color-mix(in oklab, var(--custom-hex, #39604e), var(--bg-surface) 85%);
  border-color: color-mix(in oklab, var(--custom-hex, #39604e), var(--bg-surface) 68%);
}

.sheet-section-header-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.btn-xs {
  font-size: 0.73rem;
  padding: 0.2rem 0.52rem;
}

.custom-tint-dots-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
}

.tint-add-custom-btn {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px dashed var(--border-strong);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 130ms ease;
}

.tint-add-custom-btn:hover {
  border-color: var(--brand-color);
  color: var(--brand-color);
  transform: scale(1.1);
}

.custom-color-creator-box {
  padding: 1rem 1.1rem;
  border-radius: 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.custom-color-form-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.color-picker-well {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.65rem;
  border-radius: 11px;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  cursor: pointer;
}

.color-picker-well input[type="color"] {
  appearance: none;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.color-picker-hex {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.custom-color-suggestions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.custom-colors-saved-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.saved-color-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.5rem 0.32rem 0.65rem;
  border-radius: 999px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  font-size: 0.78rem;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(32, 26, 20, 0.04);
}

.saved-color-del {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 0.2rem;
  font-size: 0.72rem;
  line-height: 1;
}

.saved-color-del:hover {
  color: var(--accent-rose);
}

.color-swatch-pick-btn {
  appearance: none;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0.45rem 0.65rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 550;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 140ms ease;
}

.color-swatch-pick-btn:hover {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}

.color-swatch-pick-btn.is-selected,
.color-swatch-btn.is-selected {
  border-color: var(--brand-color) !important;
  background: var(--bg-surface) !important;
  box-shadow: 0 0 0 2px var(--brand-color), var(--shadow-xs) !important;
}

/* ==========================================================================
   8. Modul-Steckbrief (#moduleProfileDialog) & Spotlight (#spotlightDialog)
   ========================================================================== */

.profile-header-pills {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  margin-bottom: 0.25rem;
  flex-wrap: wrap;
}

.profile-meta-strip {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  padding: 0.25rem 0;
}

.profile-quick-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  padding: 0.75rem 0.9rem;
  border-radius: 13px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
}

.profile-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.95rem;
}

.profile-bundle-card {
  padding: 1.05rem 1.15rem;
  border-radius: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 1px 3px rgba(32, 26, 20, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.profile-bundle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.42rem;
  border-bottom: 1px solid var(--border-subtle);
}

.profile-bundle-title {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 650;
  color: var(--text-primary);
}

.profile-bundle-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.profile-bundle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.62rem;
  border-radius: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 130ms ease, transform 130ms ease;
}

.profile-bundle-item:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

/* Spotlight Dialog (Cmd + K) */
.spotlight-dialog {
  width: min(620px, calc(100vw - 2rem));
  overflow: hidden;
}

.spotlight-search-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.95rem 1.2rem;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
}

.spotlight-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  color: var(--text-primary);
  outline: none;
}

.spotlight-results-scroll {
  max-height: 56dvh;
  overflow-y: auto;
  padding: 0.75rem 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.spotlight-group {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.spotlight-group-label {
  font-size: 0.69rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 0 0.45rem;
}

.spotlight-item-btn {
  appearance: none;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  padding: 0.55rem 0.7rem;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-family: inherit;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.spotlight-item-btn:hover,
.spotlight-item-btn:focus-visible {
  background: var(--bg-subtle);
  border-color: var(--border-subtle);
  outline: none;
}

.spotlight-item-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.spotlight-item-title {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spotlight-item-sub {
  font-size: 0.74rem;
  color: var(--text-muted);
}

@media (max-width: 780px) {
  .profile-grid-2,
  .sim-summary-banner {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   17. Demo Mode Banner, Onboarding Tour & PWA Install Card
   ========================================================================== */

.demo-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.15rem;
  margin-bottom: 0.95rem;
  border-radius: 14px;
  background: color-mix(in oklab, var(--accent-amber) 12%, var(--bg-surface));
  border: 1px solid color-mix(in oklab, var(--accent-amber) 32%, var(--border-subtle));
  box-shadow: var(--shadow-xs);
  flex-wrap: wrap;
}

.demo-banner-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.demo-banner-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
}

.demo-banner-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.84rem;
}

.demo-banner-text strong {
  color: var(--text-primary);
  font-weight: 600;
}

.demo-banner-text span {
  color: var(--text-secondary);
  font-size: 0.78rem;
}

.demo-banner-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

/* Onboarding Dialog */
.onboarding-dialog {
  max-width: 540px;
  width: 92vw;
  padding: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-lg), 0 24px 48px -12px rgba(0, 0, 0, 0.25);
}

.onboarding-card {
  padding: 2rem 2rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: var(--bg-surface);
}

.onboarding-hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.onboarding-badge {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: color-mix(in oklab, var(--brand-color) 16%, var(--bg-subtle));
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  box-shadow: var(--shadow-xs);
}

.onboarding-heading {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
}

.onboarding-sub {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
  max-width: 420px;
}

.onboarding-steps-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.onboarding-degree-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-top: 0.4rem;
}

.degree-chip {
  appearance: none;
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-subtle);
  border-radius: 12px;
  padding: 0.65rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  cursor: pointer;
  transition: all 130ms ease;
  font-family: inherit;
  color: var(--text-secondary);
}

.degree-chip strong {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
}

.degree-chip span {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.degree-chip:hover {
  border-color: var(--brand-color);
  background: var(--bg-surface);
}

.degree-chip.active {
  border-color: var(--brand-color);
  background: color-mix(in oklab, var(--brand-color) 12%, var(--bg-surface));
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand-color) 25%, transparent);
}

.degree-chip.active strong {
  color: var(--brand-color);
}

.degree-chip.active span {
  color: var(--brand-color);
  font-weight: 600;
}

.onboarding-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

/* PWA Platform Cards */
.pwa-install-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pwa-platform-card {
  padding: 0.95rem 1.05rem;
  border-radius: 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.pwa-platform-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--text-primary);
}

.pwa-platform-icon {
  font-size: 1.15rem;
}

.pwa-platform-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

/* ==========================================================================
   18. Print & PDF Styling for Notes & Study Sheets
   ========================================================================== */

@media print {
  body {
    background: #ffffff !important;
    color: #111111 !important;
    font-size: 11pt !important;
  }

  .sidebar,
  .hub-header,
  .notes-editor-nav-bar,
  .notes-system-toolbar,
  .sheet-dialog,
  .quick-links-strip,
  .demo-banner,
  .sidebar-pomo-card,
  #notesFormatBar,
  .hub-header-actions {
    display: none !important;
  }

  .app-shell {
    display: block !important;
  }

  .workspace-main {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .hub-view {
    display: block !important;
  }

  .notes-editor-card {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .notes-title-input {
    font-size: 22pt !important;
    border: none !important;
    padding: 0 0 10pt 0 !important;
    color: #000000 !important;
  }

  .notes-studio-textarea {
    display: none !important;
  }

  .notes-read-canvas {
    display: block !important;
    padding: 0 !important;
  }

  .note-read-check-row {
    break-inside: avoid;
  }

  @page {
    margin: 2cm;
  }
}