@import "../brand/css/asuite-theme.css";
@import "../brand/css/asuite-components.css";

/* === Tokens / Global Variables === */
:root {
  --font-family-ui: var(--asuite-font-family-ui);
  --font-family-mono: var(--asuite-font-family-mono);
  --font-stack: var(--font-family-ui);
  font-family: var(--font-stack);

  /* Typography scale */
  /* Primary knobs: --font-family-ui, --font-family-mono, --font-size-base (in px, e.g. 12) */
  --font-size-base: var(--asuite-font-size-base);
  --font-scale: calc(var(--font-size-base) / 16);
  --font-size-caption-xs: calc(0.75rem * var(--font-scale));
  --font-size-caption: calc(0.8rem * var(--font-scale));
  --font-size-label-sm: calc(0.85rem * var(--font-scale));
  --font-size-body-xs: calc(0.9rem * var(--font-scale));
  --font-size-body-sm: calc(0.95rem * var(--font-scale));
  --font-size-body: calc(1rem * var(--font-scale));
  --font-size-body-lg: calc(1.1rem * var(--font-scale));
  --font-size-title-sm: calc(1.35rem * var(--font-scale));
  --font-size-title-md: calc(1.5rem * var(--font-scale));
  --font-size-title-lg: calc(1.6rem * var(--font-scale));
  --font-size-display: calc(2.25rem * var(--font-scale));
  --font-size-ui-sm: calc(14px * var(--font-scale));
  --font-size-body-mobile: calc(15px * var(--font-scale));
  --font-size-body-mobile-sm: calc(14.5px * var(--font-scale));
  --font-size-em-sm: calc(0.8em * var(--font-scale));
  --font-size-em-md: calc(0.85em * var(--font-scale));
  --font-size-em-lg: calc(0.92em * var(--font-scale));

  /* Spacing scale */
  --space-2xs: 0.2rem;
  --space-xs: 0.35rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;

  --font-size-fluid-hero: clamp(calc(2.25rem * var(--font-scale)), calc(4vw * var(--font-scale)), calc(3rem * var(--font-scale)));
  --font-size-fluid-display: clamp(calc(2rem * var(--font-scale)), calc(3.6vw * var(--font-scale)), calc(2.55rem * var(--font-scale)));
  --font-size-fluid-heading-xl: clamp(calc(1.75rem * var(--font-scale)), calc(3vw * var(--font-scale)), calc(2.4rem * var(--font-scale)));
  --font-size-fluid-heading-lg: clamp(calc(1.25rem * var(--font-scale)), calc(3vw * var(--font-scale)), calc(1.5rem * var(--font-scale)));
  --font-size-fluid-title: clamp(calc(1.2rem * var(--font-scale)), calc(3vw * var(--font-scale)), calc(1.5rem * var(--font-scale)));
  --font-size-fluid-subheading: clamp(calc(1.1rem * var(--font-scale)), calc(2.5vw * var(--font-scale)), calc(1.4rem * var(--font-scale)));
  --font-size-fluid-body-lg: clamp(calc(1.08rem * var(--font-scale)), calc(2vw * var(--font-scale)), calc(1.35rem * var(--font-scale)));
  --font-size-fluid-body-sm: clamp(calc(0.95rem * var(--font-scale)), calc(3.8vw * var(--font-scale)), calc(1.1rem * var(--font-scale)));
  --font-size-fluid-caption: clamp(calc(0.8rem * var(--font-scale)), calc(2vw * var(--font-scale)), calc(1rem * var(--font-scale)));

  /* Heading multipliers based on body size */
  --heading-base-size: var(--font-size-body);

  --icon-btn-scale: 1;
  --icon-btn-size: calc(2.5rem * var(--icon-btn-scale));
  --icon-btn-font-size: calc(var(--font-size-body-lg) * var(--icon-btn-scale));
  --icon-btn-radius: calc(var(--radius-md) * var(--icon-btn-scale));

  --page-inline: clamp(1.5rem, 5vw, 5rem);
  --page-padding-top: 2rem;
  --page-padding-bottom: 3rem;

  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-card: 18px;
  --radius-large: 24px;
  --radius-pill: 999px;

  --foldout-padding: 1.15rem 1.3rem;
  --foldout-font-size: var(--font-size-body);
  --foldout-summary-size: var(--font-size-body);

  /* Motion */
  --motion-duration-fast: 0.12s;
  --motion-duration-mid: 0.15s;
  --motion-duration-base: 0.2s;
  --motion-duration-slow: 0.3s;
  --motion-ease-standard: ease;
  --transition-surface: border-color var(--motion-duration-base) var(--motion-ease-standard), box-shadow var(--motion-duration-base) var(--motion-ease-standard), transform var(--motion-duration-base) var(--motion-ease-standard);
  --transition-control: transform var(--motion-duration-base) var(--motion-ease-standard), border-color var(--motion-duration-base) var(--motion-ease-standard), color var(--motion-duration-base) var(--motion-ease-standard), background var(--motion-duration-base) var(--motion-ease-standard);
  --transition-transform: transform var(--motion-duration-base) var(--motion-ease-standard);
  --transition-transform-border-fast: transform var(--motion-duration-fast) var(--motion-ease-standard), border-color var(--motion-duration-fast) var(--motion-ease-standard);
  --transition-fade-fast: opacity var(--motion-duration-fast) var(--motion-ease-standard), transform var(--motion-duration-fast) var(--motion-ease-standard);
  --transition-fade: opacity var(--motion-duration-mid) var(--motion-ease-standard), transform var(--motion-duration-mid) var(--motion-ease-standard);
  --transition-opacity: opacity var(--motion-duration-base) var(--motion-ease-standard);

  /* Layering */
  --z-base: 0;
  --z-content: 1;
  --z-raised: 2;
}

/* === Base === */
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-stack);
  font-size: var(--font-size-body);
  padding:
    calc(var(--page-padding-top) + env(safe-area-inset-top, 0px))
    calc(var(--page-inline) + env(safe-area-inset-right, 0px))
    calc(var(--page-padding-bottom) + env(safe-area-inset-bottom, 0px))
    calc(var(--page-inline) + env(safe-area-inset-left, 0px));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: rgb(var(--rgb-body-bg));
  color: rgb(var(--rgb-text));
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--recipe-body-gradient);
  pointer-events: none;
  z-index: var(--z-base);
}
h1 { font-size: calc(var(--heading-base-size) * 2); }
h2 { font-size: calc(var(--heading-base-size) * 1.5); }
h3 { font-size: calc(var(--heading-base-size) * 1.25); }
h4 { font-size: calc(var(--heading-base-size) * 1.125); }
h5 { font-size: calc(var(--heading-base-size) * 1); }
h6 { font-size: calc(var(--heading-base-size) * 0.875); }
a {
  text-decoration: none;
  color: rgb(var(--rgb-accent));
}
a:hover,
a:focus-visible {
  color: rgb(var(--rgb-accent-hover));
  outline: none;
}

/* === Form Fields === */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
textarea,
select {
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  color: rgb(var(--rgb-text));
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  font: inherit;
  box-shadow: var(--field-shadow);
  transition: var(--transition-surface);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  background: var(--field-bg-focus);
  border-color: var(--field-border-focus);
  box-shadow: 0 0 0 2px rgb(var(--rgb-accent) / var(--alpha-28)), var(--field-shadow);
}
input::placeholder,
textarea::placeholder {
  color: var(--field-placeholder);
}
input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
select {
  appearance: none;
  background-image: var(--effect-select-chevron);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px 8px;
  padding-right: 2.2rem;
}
select option,
select optgroup {
  background: rgb(var(--rgb-surface-base));
  color: rgb(var(--rgb-text));
}

.brand-accent {
  color: rgb(var(--rgb-accent));
}
.muted-note {
  color: rgb(var(--rgb-muted));
  font-size: var(--font-size-body-sm);
}
.table-empty {
  text-align: center;
  color: rgb(var(--rgb-muted));
  padding: 1.2rem 0.6rem;
}

/* === Tables (generic) === */
.table-wrap {
  width: 100%;
  max-height: clamp(240px, 40vh, 360px);
  overflow: auto;
  border-radius: var(--radius-md);
  border: 1px solid rgb(var(--rgb-white) / var(--alpha-08));
  background: rgb(var(--rgb-surface-base) / var(--alpha-95));
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-body-xs);
  border-radius: 0.9rem;
  overflow: hidden;
  background: rgb(var(--rgb-surface-base) / var(--alpha-80));
}
.data-table th,
.data-table td {
  padding: 0.55rem 0.6rem;
  text-align: left;
  border-bottom: 1px solid rgb(var(--rgb-surface-base));
  vertical-align: top;
}
.data-table thead th {
  font-size: var(--font-size-caption-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--rgb-muted));
  background: rgb(var(--rgb-surface-base) / var(--alpha-92));
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 20;
  cursor: default;
}
.data-table thead th:first-child {
  border-top-left-radius: 0.9rem;
}
.data-table thead th:last-child {
  border-top-right-radius: 0.9rem;
}
.data-table tbody tr:hover {
  background: rgb(var(--rgb-surface-base) / var(--alpha-85));
}
.data-table th[data-sort-key] {
  cursor: pointer;
  user-select: none;
  padding-right: 1.4rem;
  position: relative;
}
.data-table th[data-sort-key]::after {
  content: "▾";
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-40%);
  font-size: var(--font-size-caption-xs);
  line-height: 1;
  opacity: 0;
  transition: var(--transition-fade-fast);
}
.data-table th[data-sort-key]:hover::after {
  opacity: 0.35;
}
.data-table th[data-sort-key].is-sorted[data-sort-dir="asc"]::after {
  opacity: 0.9;
  transform: translateY(-40%) rotate(180deg);
}
.data-table th[data-sort-key].is-sorted[data-sort-dir="desc"]::after {
  opacity: 0.9;
  transform: translateY(-40%) rotate(0deg);
}
.table-actions {
  text-align: right;
  width: 1%;
  white-space: nowrap;
}

/* Upload-Tabellen: schmalere Spalten + Ellipsis */
[data-section="uploads"] .data-table {
  table-layout: fixed;
}
[data-section="uploads"] .data-table th,
[data-section="uploads"] .data-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-section="uploads"] .data-table th:nth-child(1),
[data-section="uploads"] .data-table td:nth-child(1) {
  width: 40%;
  min-width: 150px;
}
[data-section="uploads"] .data-table th:nth-child(2),
[data-section="uploads"] .data-table td:nth-child(2) {
  width: 22%;
}
[data-section="uploads"] .data-table th:nth-child(3),
[data-section="uploads"] .data-table td:nth-child(3) {
  width: 18%;
}
[data-section="uploads"] .data-table th:last-child,
[data-section="uploads"] .data-table td:last-child {
  width: 70px;
}
[data-section="uploads"] .data-table select {
  max-width: 12rem;
}
.table-cell-muted {
  color: rgb(var(--rgb-muted));
}
.site-brand:hover .brand-accent,
.site-brand:focus-visible .brand-accent {
  color: rgb(var(--rgb-accent-hover));
}
.site-brand:hover,
.site-brand:focus-visible {
  color: rgb(var(--rgb-accent-hover));
  outline: none;
}
/* === Hub / Startseite === */
.hub {
  position: relative;
  z-index: var(--z-content);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  flex: 1;
}
.site-header {
  width: 100%;
  margin-bottom: 1.5rem;
  padding-block: 0.3rem;
}
.site-header-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  min-height: var(--icon-btn-size);
}
.header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}
.header-actions-items {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}
.site-brand {
  color: rgb(var(--rgb-text));
  font-size: clamp(0.72rem, 3.8vw, var(--font-size-body));
  letter-spacing: 0.08em;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.user-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.header-settings-icon,
.header-overview-icon,
.user-menu-icon {
  width: 1.3rem;
  height: 1.3rem;
  display: block;
}
.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: var(--surface-panel);
  border: 1px solid rgb(var(--rgb-panel-border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-frame);
  overflow: visible;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: var(--transition-fade);
  z-index: 10;
}
.user-menu-dropdown::before {
  content: "";
  position: absolute;
  top: -0.45rem;
  left: 0;
  right: 0;
  height: 0.45rem;
}
.user-menu:hover .user-menu-dropdown,
.user-menu:focus-within .user-menu-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.user-menu-item {
  width: 100%;
  min-height: 3rem;
  justify-content: flex-start;
  text-align: left;
  padding: 0.85rem 1rem;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgb(var(--rgb-text));
  transform: none;
}

.user-menu-item + .user-menu-item {
  border-top: 1px solid rgb(var(--rgb-panel-border));
}

.user-menu-item:first-child {
  border-top-left-radius: calc(var(--radius-lg) - 1px);
  border-top-right-radius: calc(var(--radius-lg) - 1px);
}

.user-menu-item:last-child {
  border-bottom-left-radius: calc(var(--radius-lg) - 1px);
  border-bottom-right-radius: calc(var(--radius-lg) - 1px);
}

.user-menu-item:hover,
.user-menu-item:focus-visible {
  background: rgb(var(--rgb-accent) / var(--alpha-14));
  border-color: transparent;
  color: rgb(var(--rgb-accent-hover));
  transform: none;
  outline: none;
  box-shadow: inset 0 0 0 1px rgb(var(--rgb-accent) / var(--alpha-18));
}

@media (max-width: 980px) {
  .site-header-inner {
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-md);
  }

  .header-actions {
    flex: 0 0 auto;
    justify-content: flex-end;
  }

  .header-user-meta {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .user-email {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 540px) {
  .header-hamburger {
    display: inline-flex;
  }
  .header-actions {
    position: relative;
  }
  .header-actions-items {
    display: none;
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    flex-direction: row;
    gap: 0.35rem;
    padding: 0.35rem;
    background: var(--surface-panel);
    border: 1px solid rgb(var(--rgb-panel-border));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-frame);
    z-index: 100;
  }
  .header-actions-items.is-open {
    display: inline-flex;
  }
}
.user-menu-item:focus-visible {
  box-shadow:
    inset 0 0 0 1px rgb(var(--rgb-accent) / var(--alpha-24)),
    inset 0 0 0 2px rgb(var(--rgb-accent) / var(--alpha-22));
}
.hub-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  opacity: 1;
}
.app-section {
  gap: 0.9rem;
}
.hub-section.app-section .project-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 240px));
  justify-content: flex-start;
}
.hub-dashboard {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.hub-section .project-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.hub-section-title {
  margin: 0;
  font-size: var(--font-size-body);
  letter-spacing: 0.08em;
  font-weight: 600;
  color: rgb(var(--rgb-text));
}

/* Shared frame utility for foldouts, legends and tile cards */
:is(.foldout, .legend, .mc-topic-card, .mc-question-card) {
  border: 1px solid var(--surface-frame-border, rgb(var(--rgb-panel-border)));
  border-radius: var(--surface-frame-radius, var(--radius-card));
  background: var(--surface-frame-bg, var(--surface-panel));
  box-shadow: var(--surface-frame-shadow, var(--shadow-frame));
}
:is(.foldout, .legend) {
  --surface-frame-border: rgb(var(--rgb-panel-border));
  --surface-frame-radius: var(--radius-card);
  --surface-frame-bg: var(--foldout-bg);
  --surface-frame-shadow: var(--shadow-frame);
}
:is(.mc-topic-card, .mc-question-card) {
  --surface-frame-radius: var(--radius-lg);
  --surface-frame-shadow: inset 0 0 0 1px rgb(var(--rgb-white) / var(--alpha-02));
}
.foldout {
  padding: var(--foldout-padding);
  font-size: var(--foldout-font-size);
  transition: var(--transition-surface);
}
.foldout[open] {
  background: var(--foldout-bg-open);
  box-shadow: var(--shadow-frame-strong);
}
.foldout > summary {
  cursor: pointer;
  color: rgb(var(--rgb-text));
  font-size: var(--foldout-summary-size);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0;
}
.foldout-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  color: rgb(var(--rgb-text));
  font-size: var(--foldout-summary-size);
  font-weight: 600;
  letter-spacing: 0.03em;
}
summary.foldout-summary {
  list-style: none;
  cursor: pointer;
}
summary.foldout-summary::-webkit-details-marker {
  display: none;
}
summary.foldout-summary::marker {
  content: "";
}
summary.foldout-summary:focus-visible {
  outline: 2px solid rgb(var(--rgb-accent));
  outline-offset: 4px;
}
.foldout-summary h2 {
  margin: 0;
  font-size: inherit;
  color: inherit;
}
.foldout-summary.is-toggle {
  cursor: pointer;
  user-select: none;
}
.foldout-indicator {
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgb(var(--rgb-panel-border));
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--rgb-accent));
  transition: var(--transition-control);
}
.foldout-indicator::before {
  content: "▾";
  font-size: var(--font-size-body);
  transition: var(--transition-transform);
}
details[open] > summary .foldout-indicator::before {
  transform: rotate(180deg);
}
.foldout-summary.is-toggle[aria-expanded="true"] .foldout-indicator::before {
  transform: rotate(180deg);
}
.foldout-panel {
  border-radius: var(--radius-card);
  border: 1px solid rgb(var(--rgb-panel-border));
  background: var(--surface-panel);
  box-shadow: var(--shadow-frame);
  transition: var(--transition-surface);
}
.foldout-panel:hover,
.foldout-panel:focus-within {
  border-color: rgb(var(--rgb-accent) / var(--alpha-60));
  box-shadow: var(--shadow-frame-strong);
}
.foldout-panel .foldout-summary {
  background: transparent;
  padding: 1.15rem 1.3rem;
  border-bottom: 1px solid rgb(var(--rgb-panel-border));
}
.foldout-panel .foldout-summary.is-toggle:hover,
.foldout-panel .foldout-summary.is-toggle:focus-visible {
  color: rgb(var(--rgb-accent-hover));
}
.foldout-panel .foldout-indicator {
  border-color: rgb(var(--rgb-panel-border));
  background: transparent;
}
.foldout-panel:hover .foldout-indicator,
.foldout-panel:focus-within .foldout-indicator {
  border-color: rgb(var(--rgb-accent) / var(--alpha-60));
  color: rgb(var(--rgb-accent-hover));
}

/* === Cards === */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-xl);
}

/* === Exam Countdown === */
.exam-section {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  opacity: 1;
  margin-top: 0;
}
.exam-card {
  background: var(--surface-panel);
  border: 1px solid rgb(var(--rgb-panel-border));
  border-radius: var(--radius-card);
  padding: 1rem 1.1rem;
  width: 100%;
  box-shadow: var(--shadow-frame);
  display: grid;
  grid-auto-rows: 1fr auto auto;
  gap: var(--space-xs);
  align-content: stretch;
  cursor: pointer;
  transition: var(--transition-surface);
  min-height: var(--exam-height, 140px);
}
.exam-count {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-weight: 700;
}
.exam-days {
  font-size: calc(var(--exam-day-size, clamp(2rem, 5vw, 2.8rem)) * var(--font-scale));
  color: rgb(var(--rgb-accent-hover));
  line-height: 1;
}
.exam-days-label {
  color: rgb(var(--rgb-muted));
  font-size: var(--font-size-body-sm);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.exam-module {
  font-size: calc(var(--exam-module-size, 1.05rem) * var(--font-scale));
  font-weight: 600;
  color: rgb(var(--rgb-text));
}
.exam-date {
  justify-self: start;
}
.exam-card:hover,
.exam-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgb(var(--rgb-accent) / var(--alpha-60));
  box-shadow:
    inset 0 0 0 1px rgb(var(--rgb-accent)),
    0 35px 65px -55px rgb(var(--rgb-surface-base));
  outline: none;
}
.exam-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  width: 100%;
  align-items: stretch;
  justify-content: flex-start;
}
.exam-list .exam-card {
  flex: 1 1 180px;
  max-width: 300px;
}
.exam-list .exam-card:nth-child(1) {
  flex-basis: 320px;
  --exam-height: 140px;
  --exam-day-size: clamp(2.6rem, 5.4vw, 3.3rem);
  --exam-module-size: 1.2rem;
}
.exam-list .exam-card:nth-child(2) {
  flex-basis: 250px;
  --exam-height: 125px;
  --exam-day-size: clamp(2.2rem, 5vw, 2.9rem);
  --exam-module-size: 1.05rem;
}
.exam-list .exam-card:nth-child(3) {
  flex-basis: 210px;
  --exam-height: 112px;
  --exam-day-size: clamp(1.9rem, 4.4vw, 2.35rem);
  --exam-module-size: 0.9rem;
}
.exam-list .exam-card:nth-child(n + 4) {
  flex-basis: 180px;
  --exam-height: 100px;
  --exam-day-size: clamp(1.6rem, 3.8vw, 2.05rem);
  --exam-module-size: 0.82rem;
}
.exam-placeholder {
  color: rgb(var(--rgb-muted));
  font-size: var(--font-size-body-sm);
  padding: 1rem 1.1rem;
  border: 1px dashed rgb(var(--rgb-panel-border));
  border-radius: var(--radius-lg);
  background: var(--surface-panel-soft);
}

/* === Lernplan === */
.plan-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  opacity: 1;
  margin-top: 0;
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
.plan-preview {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: stretch;
  cursor: pointer;
}
.plan-card {
  background: var(--surface-panel);
  border: 1px solid rgb(var(--rgb-panel-border));
  border-radius: var(--radius-card);
  padding: 0.85rem 0.95rem;
  box-shadow: var(--shadow-frame);
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  cursor: pointer;
  transition: var(--transition-surface);
}
.plan-today {
  border-color: rgb(var(--rgb-accent) / var(--alpha-60));
  box-shadow:
    inset 0 0 0 1px rgb(var(--rgb-accent)),
    0 40px 70px -60px rgb(var(--rgb-surface-base));
}
.plan-card:hover,
.plan-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgb(var(--rgb-accent) / var(--alpha-60));
  box-shadow:
    inset 0 0 0 1px rgb(var(--rgb-accent)),
    0 45px 80px -60px rgb(var(--rgb-surface-base));
  outline: none;
}
.plan-upcoming {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.plan-next {
  background: var(--surface-panel);
}
.plan-day-label {
  color: rgb(var(--rgb-muted));
  font-size: var(--font-size-body-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.plan-day-value {
  font-size: var(--font-size-body);
  font-weight: 600;
  color: rgb(var(--rgb-text));
}
.plan-today .plan-day-value {
  font-size: var(--font-size-display);
}
.plan-day-note {
  color: rgb(var(--rgb-warning));
  font-size: var(--font-size-body-xs);
}
.plan-placeholder {
  border: 1px dashed rgb(var(--rgb-panel-border));
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
  background: var(--surface-panel-soft);
  color: rgb(var(--rgb-muted));
  font-size: var(--font-size-body-sm);
}
.plan-placeholder p {
  margin: 0.2rem 0;
}
.plan-placeholder a {
  color: rgb(var(--rgb-accent));
}
.project-card,
.module-card {
  background: var(--surface-panel);
  border: 1px solid rgb(var(--rgb-panel-border));
  border-radius: var(--radius-card);
  padding: 1.5rem 1.5rem 0.75rem;
  box-shadow: var(--shadow-frame);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: var(--transition-surface);
}
.project-card {
  position: relative;
  overflow: hidden;
  min-height: 180px;
}
.project-card > :not(.project-icon) {
  position: relative;
  z-index: var(--z-content);
}
.project-icon {
  position: absolute;
  right: -18px;
  bottom: -14px;
  width: 150px;
  height: 150px;
  color: rgb(var(--rgb-white));
  opacity: 0.6;
  transform: translate(0, 0) scale(0.92);
  transition: transform var(--motion-duration-slow) var(--motion-ease-standard), color var(--motion-duration-slow) var(--motion-ease-standard), opacity var(--motion-duration-slow) var(--motion-ease-standard);
  pointer-events: none;
  z-index: var(--z-base);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.project-card[data-href]:hover .project-icon,
.project-card[data-href]:focus-visible .project-icon,
.project-card.app-more-toggle:hover .project-icon,
.project-card.app-more-toggle:focus-visible .project-icon {
  color: rgb(var(--rgb-accent));
  opacity: 0.9;
  transform: translate(-14px, -10px) scale(1.08);
}
.project-card.app-more-toggle {
  cursor: pointer;
  will-change: transform;
}
.project-card.app-more-toggle.is-expanded {
  order: 999;
}
.project-card[data-app-more-item] {
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  filter: blur(2px);
  pointer-events: none;
  will-change: opacity, transform, filter;
  transition:
    opacity 240ms var(--motion-ease-standard),
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 320ms var(--motion-ease-standard),
    border-color var(--motion-duration-base) var(--motion-ease-standard),
    box-shadow var(--motion-duration-base) var(--motion-ease-standard);
  transition-delay: var(--app-more-stagger, 0ms);
}
.project-card[data-app-more-item].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  pointer-events: auto;
}
.project-card .icon-more {
  right: -26px;
  bottom: -24px;
  width: auto;
  height: auto;
  font-size: clamp(4.2rem, 8vw, 5.6rem);
  font-weight: 300;
  line-height: 1;
  opacity: 0.46;
  color: rgb(var(--rgb-muted));
  stroke: none;
}
/* === Status Messages === */
.status {
  display: block;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgb(var(--rgb-panel-border));
  background: var(--surface-panel-soft);
  color: rgb(var(--rgb-text));
  font-size: var(--font-size-body-sm);
  margin-top: var(--space-sm);
}
.status.is-success {
  border-color: rgb(var(--rgb-success) / var(--alpha-55));
  background: rgb(var(--rgb-success) / var(--alpha-12));
  color: rgb(var(--rgb-success));
}
.status.is-error {
  border-color: rgb(var(--rgb-danger) / var(--alpha-60));
  background: rgb(var(--rgb-danger) / var(--alpha-12));
  color: rgb(var(--rgb-danger));
}
.status.is-info {
  border-color: rgb(var(--rgb-accent) / var(--alpha-35));
  background: rgb(var(--rgb-accent) / var(--alpha-12));
  color: rgb(var(--rgb-text));
}
.project-card[data-href],
.module-card {
  cursor: pointer;
}
.project-card[data-href]:hover,
.project-card.app-more-toggle:hover,
.module-card:hover {
  transform: translateY(-4px);
  border-color: rgb(var(--rgb-accent) / var(--alpha-60));
  box-shadow:
    inset 0 0 0 1px rgb(var(--rgb-accent)),
    0 45px 80px -60px rgb(var(--rgb-surface-base));
}
.project-card[data-href]:focus-visible,
.project-card.app-more-toggle:focus-visible,
.module-card:focus-visible {
  outline: 2px solid rgb(var(--rgb-accent));
  outline-offset: 4px;
}
.project-card h2 {
  margin: 0;
  font-size: var(--font-size-title-lg);
  color: rgb(var(--rgb-text));
}

/* === Navigation Bars === */
.app-nav-bar {
  --app-nav-link-max-width: min(78vw, 920px);
  --app-nav-btn-size: var(--icon-btn-size);
  --app-nav-inline-padding: 0.6rem;
  --app-nav-gap: var(--space-md);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.45rem var(--app-nav-inline-padding);
  border: 1px solid rgb(var(--rgb-panel-border));
  border-radius: var(--radius-md);
  background: rgb(var(--rgb-surface-base));
  box-shadow: inset 0 0 0 1px rgb(var(--rgb-accent) / var(--alpha-08));
}
.app-nav-bar > :first-child {
  flex: 0 0 var(--app-nav-btn-size);
  margin-right: var(--app-nav-gap);
  z-index: var(--z-raised);
}
.app-nav-bar > :last-child {
  flex: 0 0 var(--app-nav-btn-size);
  margin-left: var(--app-nav-gap);
  z-index: var(--z-raised);
}
.app-nav-bar > :nth-child(2) {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(
    var(--app-nav-link-max-width),
    max(0px, calc(100% - ((var(--app-nav-inline-padding) + var(--app-nav-btn-size) + var(--app-nav-gap)) * 2)))
  );
  min-width: 0;
  z-index: var(--z-content);
}
.app-nav-center {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  width: 100%;
}
.app-nav-title,
.app-nav-title-link {
  color: rgb(var(--rgb-muted));
  text-decoration: none;
  font-size: var(--font-size-label-sm);
  font-weight: 500;
  opacity: 0.78;
  width: min(100%, var(--app-nav-link-max-width));
  margin-inline: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  display: block;
}
.app-nav-title-link {
  transition: color 0.18s var(--motion-ease-standard), opacity 0.18s var(--motion-ease-standard), text-decoration-color 0.18s var(--motion-ease-standard);
}
.app-nav-title-link:hover,
.app-nav-title-link:focus-visible {
  color: rgb(var(--rgb-accent));
  opacity: 0.95;
  text-decoration: underline;
  text-decoration-color: rgb(var(--rgb-accent) / var(--alpha-60));
  outline: none;
}
.app-nav-title-link.is-disabled {
  opacity: 0.5;
  text-decoration: none;
  pointer-events: none;
}
.icon-btn.app-nav-btn {
  --icon-btn-hover-transform: none;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.icon-btn.app-nav-btn:hover,
.icon-btn.app-nav-btn:focus-visible {
  border-color: rgb(var(--rgb-panel-border));
  background: var(--surface-panel);
  color: rgb(var(--rgb-accent-hover));
}
.icon-btn.app-nav-btn:disabled,
.icon-btn.app-nav-btn:disabled:hover,
.icon-btn.app-nav-btn:disabled:focus-visible {
  cursor: not-allowed;
  opacity: 0.42;
  color: rgb(var(--rgb-muted));
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transform: none;
}
@media (max-width: 760px) {
  .app-nav-bar {
    --app-nav-inline-padding: 0.5rem;
    --app-nav-gap: var(--space-sm);
    padding: 0.4rem var(--app-nav-inline-padding);
  }
  .app-nav-center {
    gap: 0;
  }
  .app-nav-title,
  .app-nav-title-link {
    font-size: var(--font-size-label-sm);
  }
}

/* === Modal (global) === */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgb(var(--rgb-surface-base) / var(--alpha-80));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(0.75rem, 2vh, 1.5rem) 1.5rem;
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-opacity);
}
.modal-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.modal {
  position: relative;
  width: min(920px, calc(100vw - 3rem));
  background: rgb(var(--rgb-surface-base));
  border: 1px solid rgb(var(--rgb-panel-border));
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px -30px rgb(var(--rgb-surface-base));
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: 1.5rem;
}
.restart-confirm-modal {
  width: min(560px, calc(100vw - 3rem));
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-lg);
}
.modal-header h2 {
  margin: 0;
  font-size: var(--font-size-title-sm);
}
.modal-close {
  background: transparent;
  border: none;
  color: rgb(var(--rgb-text));
  font-size: var(--font-size-title-md);
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
}
.modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.modal-hint {
  margin: 0;
  font-size: var(--font-size-body-xs);
  color: rgb(var(--rgb-muted));
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

/* === Cards Tempo (hub) === */
.cards-tempo-section {
  margin-top: 0;
  padding: 0;
  background: transparent;
  border: none;
}
.cards-tempo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}
.cards-tempo-grid {
  margin-top: var(--space-lg);
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
  background: transparent;
}
.cards-tempo-grid .tempo-card {
  flex: 1 1 140px;
  min-width: 140px;
  max-width: 260px;
  background: var(--surface-panel);
  border: 1px solid rgb(var(--rgb-panel-border));
  border-radius: var(--radius-xl);
  padding: 1rem 1.1rem 1.2rem;
  cursor: pointer;
  transition: var(--transition-transform-border-fast);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: stretch;
}
.cards-tempo-grid .tempo-card:hover,
.cards-tempo-grid .tempo-card:focus-visible {
  border-color: rgb(var(--rgb-accent));
  transform: translateY(-2px);
  outline: none;
}
.cards-tempo-grid .gauge {
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: visible;
}
.cards-tempo-grid .gauge svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* gauge visuals (shared with Karten-Übersicht) */
.cards-tempo-grid .gauge-arc {
  fill: none;
  stroke-width: 18;
  stroke-linecap: round;
}
.cards-tempo-grid .gauge-track {
  stroke: rgb(var(--rgb-panel-border));
}
.cards-tempo-grid .gauge-progress {
  filter: drop-shadow(0 0 6px rgb(var(--rgb-success) / var(--alpha-35)));
  stroke-linecap: round;
}
.cards-tempo-grid .gauge-pointer {
  color: rgb(var(--rgb-accent));
  fill: currentColor;
  filter: drop-shadow(0 0 6px rgb(var(--rgb-accent) / var(--alpha-55)));
}
.cards-tempo-grid .tempo-title {
  margin-top: var(--space-xs);
  font-weight: 700;
  text-align: center;
}
.modal-button {
  border: 1px solid rgb(var(--rgb-panel-border));
  background: var(--surface-panel);
  color: rgb(var(--rgb-text));
  padding: 0.6rem 1.15rem;
  border-radius: var(--radius-md);
  font: inherit;
  cursor: pointer;
  transition: var(--transition-control);
}
.modal-button:hover,
.modal-button:focus-visible {
  border-color: rgb(var(--rgb-accent) / var(--alpha-60));
  color: rgb(var(--rgb-accent-hover));
  outline: none;
  transform: translateY(-1px);
}
.modal-button.primary {
  border-color: rgb(var(--rgb-accent) / var(--alpha-60));
  background: rgb(var(--rgb-accent));
  color: rgb(var(--rgb-surface-base));
  font-weight: 600;
}
.modal-button.primary:hover,
.modal-button.primary:focus-visible {
  background: rgb(var(--rgb-accent-hover));
  border-color: rgb(var(--rgb-accent-hover));
  color: rgb(var(--rgb-surface-base));
}
body.modal-open {
  overflow: hidden;
  isolation: isolate;
}
.plan-modal {
  width: min(640px, 100%);
  gap: var(--space-md);
}
.plan-modal-body {
  gap: 0.9rem;
}
.plan-modal-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-height: 60vh;
  overflow: auto;
  padding-right: 0.25rem;
}
.plan-modal-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(220px, 1fr);
  align-items: center;
  gap: var(--space-md);
}
.plan-modal-date {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  color: rgb(var(--rgb-text));
  font-weight: 600;
}
.plan-modal-note {
  font-size: var(--font-size-body-xs);
  color: rgb(var(--rgb-warning));
}
.plan-modal select {
  width: 100%;
}
.icon-btn {
  --icon-btn-hover-transform: translateY(-1px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-btn-size);
  height: var(--icon-btn-size);
  border-radius: var(--icon-btn-radius);
  border: 1px solid rgb(var(--rgb-panel-border));
  background: var(--surface-panel);
  color: rgb(var(--rgb-accent));
  font-size: var(--icon-btn-font-size);
  cursor: pointer;
  transition: var(--transition-control);
  transform: none;
  position: relative;
}
.header-hamburger {
  display: none;
}
.icon-btn:hover,
.icon-btn:focus-visible {
  transform: var(--icon-btn-hover-transform, translateY(-1px));
  border-color: rgb(var(--rgb-accent) / var(--alpha-60));
  color: rgb(var(--rgb-accent-hover));
  outline: none;
}
.user-menu .icon-btn:hover,
.user-menu .icon-btn:focus-visible {
  background: rgb(var(--rgb-accent));
  color: rgb(var(--rgb-surface-base));
  border-color: rgb(var(--rgb-accent-hover));
}
.icon-btn[aria-pressed="true"] {
  border-color: rgb(var(--rgb-success) / var(--alpha-55));
  color: rgb(var(--rgb-success));
  background: rgb(var(--rgb-success) / var(--alpha-12));
}
.icon-btn.no-lift {
  --icon-btn-hover-transform: none;
}

/* Floating tooltips (JS-enhanced) */
.floating-tooltip {
  position: fixed;
  z-index: 9999;
  background: rgb(var(--rgb-surface-base));
  color: rgb(var(--rgb-text));
  padding: 0.35rem 0.55rem;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-caption);
  line-height: 1.25;
  white-space: nowrap;
  border: 1px solid rgb(var(--rgb-surface-base));
  box-shadow: 0 6px 18px rgb(var(--rgb-black) / var(--alpha-24));
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: var(--transition-fade-fast);
}
.floating-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 900px), (hover: none), (pointer: coarse) {
  .floating-tooltip {
    display: none !important;
  }
}

/* --- Global Page Loader --- */
.page-loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2147483647;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-duration-mid) var(--motion-ease-standard);
}
.page-loader.is-active {
  opacity: 1;
  pointer-events: all;
}
.page-loader-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgb(var(--rgb-white) / var(--alpha-18));
  border-top-color: rgb(var(--rgb-accent));
  animation: page-loader-spin 0.8s linear infinite;
}
@keyframes page-loader-spin {
  to {
    transform: rotate(360deg);
  }
}
/* === Module / Folien Layout === */
.modules-page {
  position: relative;
  z-index: var(--z-content);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  align-items: stretch;
}
.page-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.page-subline {
  margin: 0;
  color: rgb(var(--rgb-muted));
  line-height: 1.5;
}
.page-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--font-size-body-sm);
  color: rgb(var(--rgb-muted));
  margin-top: var(--space-sm);
}
.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-xl);
  grid-auto-flow: row;
  width: 100%;
}
@media (max-width: 900px) {
  .modules-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .plan-preview {
    grid-template-columns: minmax(0, 1fr);
  }
  .plan-modal-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .module-card.is-expanded {
    grid-column: span 1;
  }
}
@media (orientation: landscape) and (min-width: 1100px) {
  .app-section .project-card {
    min-height: 158px;
    padding: 1.15rem 1.1rem 0.75rem;
  }
  .app-section .project-card h2 {
    font-size: var(--font-size-title-sm);
  }
  .app-section .project-icon {
    width: 130px;
    height: 130px;
  }
  .hub-dashboard {
    --hub-card-height: 66px;
    --hub-card-height-featured: 104px;
    --hub-col-leading: 24%;
    --hub-col-trailing: 40%;
    display: grid;
    grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
  }
  .hub-dashboard > .hub-section {
    min-width: 0;
  }
  .hub-dashboard .cards-tempo-grid {
    margin-top: var(--space-sm);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 0.9rem;
  }
  .hub-dashboard .cards-tempo-grid .tempo-card {
    min-width: 0;
    max-width: none;
    min-height: 134px;
    padding: 0.85rem 0.9rem 0.9rem;
  }
  .hub-dashboard .cards-tempo-grid .tempo-title {
    margin-top: var(--space-2xs);
    font-size: var(--font-size-body-sm);
  }
  .hub-dashboard .exam-list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.55rem;
  }
  .hub-dashboard .exam-list .exam-card:nth-child(n),
  .hub-dashboard .plan-card {
    height: var(--hub-card-height);
    min-height: var(--hub-card-height);
  }
  .hub-dashboard .exam-list .exam-card:nth-child(n) {
    flex: 0 0 auto;
    max-width: none;
    padding: 0.55rem 0.7rem;
    display: grid;
    grid-template-columns: var(--hub-col-leading) minmax(0, 1fr) var(--hub-col-trailing);
    grid-template-areas: "count module date";
    align-items: center;
    row-gap: 0;
    column-gap: 0.55rem;
    --exam-height: var(--hub-card-height);
    --exam-day-size: clamp(1.22rem, 1.58vw, 1.48rem);
    --exam-module-size: 0.92rem;
    overflow: hidden;
  }
  .hub-dashboard .exam-list .exam-card:first-child,
  .hub-dashboard .plan-today {
    height: var(--hub-card-height-featured);
    min-height: var(--hub-card-height-featured);
    padding-top: var(--space-sm);
    padding-bottom: 0.5rem;
  }
  .hub-dashboard .exam-list .exam-card:first-child {
    --exam-height: var(--hub-card-height-featured);
    --exam-day-size: clamp(1.8rem, 2.2vw, 2.25rem);
    --exam-module-size: 1.1rem;
  }
  .hub-dashboard .plan-preview {
    grid-template-columns: minmax(0, 1fr);
  }
  .hub-dashboard .plan-card {
    padding: 0.55rem 0.7rem;
    display: grid;
    grid-template-columns: var(--hub-col-leading) minmax(0, 1fr) var(--hub-col-trailing);
    grid-template-areas: "label value note";
    row-gap: 0;
    column-gap: 0.55rem;
    align-items: center;
    align-content: center;
    overflow: hidden;
  }
  .hub-dashboard .plan-upcoming {
    gap: 0.55rem;
  }
  .hub-dashboard .plan-card .plan-day-label {
    grid-area: label;
    font-size: var(--font-size-caption-xs);
    line-height: 1;
    white-space: nowrap;
  }
  .hub-dashboard .plan-card .plan-day-value {
    grid-area: value;
    font-size: var(--font-size-title-sm);
    line-height: 1.04;
    font-weight: 700;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hub-dashboard .plan-card .plan-day-note {
    grid-area: note;
    margin: 0;
    font-size: var(--font-size-caption-xs);
    line-height: 1;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    justify-self: start;
    width: 100%;
    text-align: left;
  }
  .hub-dashboard .exam-list .exam-module {
    grid-area: module;
    line-height: 1.05;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hub-dashboard .exam-list .exam-count {
    grid-area: count;
    gap: var(--space-xs);
    align-self: center;
  }
  .hub-dashboard .exam-list .exam-days-label {
    font-size: var(--font-size-caption-xs);
  }
  .hub-dashboard .exam-list .exam-card:first-child .exam-days-label {
    font-size: var(--font-size-body);
  }
  .hub-dashboard .exam-list .exam-date {
    grid-area: date;
    justify-self: start;
    align-self: center;
    min-height: 0;
    padding: 0;
    font-size: var(--font-size-caption-xs);
    line-height: 1.05;
    color: rgb(var(--rgb-muted));
    font-weight: 500;
    white-space: nowrap;
    min-width: 0;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hub-dashboard .plan-today .plan-day-value {
    font-size: var(--font-size-display);
    line-height: 1;
  }
  .hub-dashboard .plan-today {
    grid-template-columns: var(--hub-col-leading) minmax(0, 1fr);
    grid-template-areas: "label value";
    column-gap: 0.45rem;
    border-color: rgb(var(--rgb-panel-border));
    box-shadow: var(--shadow-frame);
  }
  .hub-dashboard .plan-today:hover,
  .hub-dashboard .plan-today:focus-visible {
    border-color: rgb(var(--rgb-panel-border));
    box-shadow: var(--shadow-frame);
  }
  .hub-dashboard .plan-today .plan-day-label {
    font-size: var(--font-size-body-sm);
  }
}
@media (orientation: landscape) and (min-width: 1100px) and (max-width: 1320px) {
  .hub-dashboard {
    --hub-col-leading: clamp(7.4rem, 29%, 8.2rem);
    --hub-col-trailing: 37%;
  }
  .hub-dashboard .exam-list .exam-card:nth-child(n),
  .hub-dashboard .plan-card {
    height: auto;
    min-height: 82px;
  }
  .hub-dashboard .exam-list .exam-card:nth-child(n) {
    grid-template-columns: var(--hub-col-leading) minmax(0, 1fr);
    grid-template-areas:
      "count module"
      "date date";
    column-gap: 0.65rem;
    row-gap: 0.22rem;
  }
  .hub-dashboard .plan-card {
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas:
      "label value"
      "note note";
    column-gap: 0.7rem;
    row-gap: 0.26rem;
  }
  .hub-dashboard .plan-card .plan-day-value,
  .hub-dashboard .plan-card .plan-day-note {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }
  .hub-dashboard .exam-list .exam-module {
    font-size: var(--font-size-body);
    line-height: 1.1;
  }
  .hub-dashboard .exam-list .exam-date {
    font-size: var(--font-size-caption-xs);
    line-height: 1.1;
    letter-spacing: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }
  .hub-dashboard .exam-list .exam-date,
  .hub-dashboard .plan-card .plan-day-note {
    width: auto;
  }
  .hub-dashboard .exam-list .exam-card:first-child {
    --exam-day-size: clamp(1.35rem, 1.58vw, 1.65rem);
    min-height: 104px;
  }
  .hub-dashboard .plan-card .plan-day-value {
    font-size: var(--font-size-body-lg);
  }
  .hub-dashboard .plan-today .plan-day-value {
    font-size: var(--font-size-title-lg);
  }
  .hub-dashboard .plan-today {
    min-height: 104px;
  }
  .hub-dashboard .plan-today .plan-day-note {
    display: none;
  }
}
.legend {
  margin-top: var(--space-lg);
  padding: var(--foldout-padding);
  font-size: var(--foldout-font-size);
}
.legend summary {
  cursor: pointer;
  color: rgb(var(--rgb-muted));
  font-size: var(--foldout-summary-size);
  font-weight: 600;
  letter-spacing: 0.03em;
}
.legend[open] {
  background: var(--foldout-bg-open);
}
.legend ul {
  margin: var(--space-sm) 0 0;
  padding: 0;
  color: rgb(var(--rgb-muted));
  display: grid;
  gap: 0.4rem;
}
.legend li {
  list-style: none;
}
.legend li strong {
  color: rgb(var(--rgb-text));
  font-weight: 600;
}
.legend-label {
  color: rgb(var(--rgb-muted));
}
.legend-chip {
  display: inline-block;
  width: 48px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: rgb(var(--rgb-surface-base));
  box-shadow: inset 0 0 0 1px rgb(var(--rgb-surface-base));
}
.legend-high {
  background: var(--recipe-progress-fill);
}
.legend-mid {
  background: rgb(var(--rgb-warning));
}
.legend-low {
  background: rgb(var(--rgb-warning));
}
.legend-start {
  background: rgb(var(--rgb-danger));
}
.module-card.is-expanded {
  grid-column: 1 / -1;
  transform: translateY(-6px) scale(1.01);
  border-color: rgb(var(--rgb-accent) / var(--alpha-60));
  box-shadow:
    inset 0 0 0 1px rgb(var(--rgb-accent)),
    0 55px 100px -60px rgb(var(--rgb-surface-base));
  order: -1;
  z-index: var(--z-raised);
  position: relative;
}
.module-card.is-dimmed {
  opacity: 0.55;
  filter: saturate(0.6);
}
.module-head {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: center;
  text-align: center;
}
.module-title {
  margin: 0;
  font-size: var(--font-size-title-md);
  color: rgb(var(--rgb-text));
}
.module-status {
  margin: 0;
  color: rgb(var(--rgb-muted));
  font-size: var(--font-size-body-sm);
}
.progress-chip {
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgb(var(--rgb-surface-base));
  font-size: var(--font-size-body-xs);
  color: rgb(var(--rgb-accent));
}
.progress-track {
  width: 100%;
  height: 12px;
  border-radius: var(--radius-pill);
  background: rgb(var(--rgb-surface-base));
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--recipe-progress-fill);
  width: 0%;
  transition: width 0.4s var(--motion-ease-standard);
}
.module-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--font-size-body-xs);
  color: rgb(var(--rgb-muted));
}
.module-toggle {
  border: none;
  background: rgb(var(--rgb-surface-base));
  border-radius: var(--radius-md);
  color: rgb(var(--rgb-text));
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font: inherit;
  transition: background var(--motion-duration-base) var(--motion-ease-standard), transform var(--motion-duration-base) var(--motion-ease-standard);
}
.module-toggle:hover,
.module-toggle:focus-visible {
  outline: none;
  transform: translateY(-1px);
}
.module-details {
  display: none;
  flex-direction: column;
  gap: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgb(var(--rgb-surface-base));
}
.module-details.is-open {
  display: flex;
}

/* === Cards / Tiles === */
.mc-topic-card,
.mc-question-card {
  padding: 1rem;
  transition: var(--transition-transform-border-fast);
}
.mc-topic-card:hover,
.mc-topic-card:focus-visible,
.mc-question-card:hover,
.mc-question-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgb(var(--rgb-accent) / var(--alpha-60));
  box-shadow: 0 10px 30px rgb(var(--rgb-surface-base) / var(--alpha-35));
  outline: none;
}
@media (max-width: 640px) {
  :root {
    --page-inline: 1.6rem;
    --page-padding-top: 1.5rem;
    --page-padding-bottom: 2rem;
  }
  body {
    font-size: var(--font-size-body-mobile);
  }
  .project-card,
  .module-card {
    padding: 1.5rem;
  }
  .hub-section.app-section .project-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 420px) {
  :root {
    --page-inline: 1.1rem;
  }
  body {
    font-size: var(--font-size-body-mobile-sm);
  }
}