/* Component system layer: aliases preserve existing markup while documenting the canonical classes. */
    .c-card,
    .card,
    .slot-day,
    .empty,
    .notice {
      --component-card-padding: 12px;
      --component-card-radius: var(--radius-2xl);
      --component-card-border: var(--glass-border);
      --component-card-background: linear-gradient(145deg, rgba(31, 44, 70, 0.76), rgba(5, 10, 24, 0.8)), var(--glass-soft);
      --component-card-shadow: var(--shadow-md), var(--shadow-inset);
    }

    .c-card {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      overflow: hidden;
      border: 1px solid var(--component-card-border);
      border-radius: var(--component-card-radius);
      padding: var(--component-card-padding);
      background: var(--component-card-background);
      color: var(--text-primary);
      text-align: left;
      box-shadow: var(--component-card-shadow);
    }

    .c-card--glass,
    .glass {
      --component-card-radius: 30px;
      --component-card-border: var(--border-default);
      --component-card-background: linear-gradient(145deg, rgba(35, 52, 88, 0.68), rgba(6, 12, 28, 0.72)), var(--surface-primary);
      --component-card-shadow: var(--shadow-lg), var(--shadow-inset);
      backdrop-filter: var(--glass-blur-lg) var(--glass-saturation);
      -webkit-backdrop-filter: var(--glass-blur-lg) var(--glass-saturation);
    }

    .c-card--elevated {
      --component-card-background: var(--surface-elevated);
      --component-card-shadow: var(--shadow-lg), var(--shadow-inset);
    }

    .c-card--interactive,
    .card[data-instructor],
    .card[data-school] {
      cursor: pointer;
      transition: transform var(--duration-fast) var(--easing-standard), border-color var(--duration-normal) var(--easing-standard), background var(--duration-normal) var(--easing-standard);
    }

    .c-stat-card,
    .stat {
      --component-card-padding: 13px 12px;
      --component-card-radius: var(--radius-2xl);
      --component-card-border: rgba(225, 240, 255, 0.24);
      --component-card-background: rgba(5, 12, 28, 0.76);
      --component-card-shadow: var(--shadow-inset);
    }

    .c-button,
    .button,
    .tiny-button,
    .filter,
    .language-option,
    .segment,
    .nav,
    .menu-row {
      --component-button-height: var(--control-height-lg);
      --component-button-radius: var(--radius-pill);
      --component-button-padding-x: 18px;
      --component-button-transition: transform var(--duration-fast) var(--easing-standard), background var(--duration-normal) var(--easing-standard), border-color var(--duration-normal) var(--easing-standard), box-shadow var(--duration-normal) var(--easing-standard), opacity var(--duration-fast) var(--easing-standard);
      min-width: 0;
      transition: var(--component-button-transition);
    }

    .c-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: var(--component-button-height);
      border-radius: var(--component-button-radius);
      padding: 0 var(--component-button-padding-x);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(229, 238, 248, 0.9)), #eef5fb;
      color: var(--text-on-accent);
      font-weight: var(--font-weight-semibold);
      text-align: center;
      overflow-wrap: anywhere;
      box-shadow: 0 10px 24px rgba(30, 64, 112, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.88);
    }

    .c-button--secondary,
    .button.secondary,
    .filter,
    .tiny-button,
    .segment,
    .menu-row {
      border: 1px solid rgba(225, 240, 255, 0.34);
      background: rgba(8, 16, 35, 0.86);
      color: rgba(248, 251, 255, 0.94);
      font-weight: var(--font-weight-bold);
      box-shadow: var(--shadow-inset);
    }

    .c-button--ghost {
      border: 1px solid transparent;
      background: transparent;
      color: var(--text-secondary);
      box-shadow: none;
    }

    .c-button--danger,
    .button.danger,
    .tiny-button.danger {
      background: rgba(122, 39, 54, 0.72);
      color: #ffe3e7;
    }

    .c-button--success {
      border-color: rgba(143, 246, 208, 0.36);
      background: rgba(29, 119, 94, 0.6);
      color: #e8fff6;
    }

    .c-button--sm,
    .tiny-button,
    .filter {
      --component-button-height: var(--control-height-sm);
      --component-button-padding-x: 14px;
    }

    .c-button--lg {
      --component-button-height: var(--control-height-lg);
      --component-button-padding-x: 20px;
    }

    .c-icon-button,
    .icon-button,
    .back-button,
    .ai-back-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: var(--touch-target-min);
      min-height: var(--touch-target-min);
      transition: var(--component-button-transition, transform var(--duration-fast) var(--easing-standard), background var(--duration-normal) var(--easing-standard), border-color var(--duration-normal) var(--easing-standard), box-shadow var(--duration-normal) var(--easing-standard));
    }

    .c-field,
    .field,
    .select,
    .search,
    textarea {
      --component-field-border: rgba(225, 240, 255, 0.3);
      --component-field-radius: var(--radius-xl);
      --component-field-background: rgba(3, 9, 22, 0.86);
      --component-field-placeholder: rgba(236, 243, 255, 0.6);
      transition: border-color var(--duration-normal) var(--easing-standard), background var(--duration-normal) var(--easing-standard), box-shadow var(--duration-normal) var(--easing-standard);
    }

    .c-field {
      width: 100%;
      min-height: 46px;
      border: 1px solid var(--component-field-border);
      border-radius: var(--component-field-radius);
      padding: 0 14px;
      background: var(--component-field-background);
      color: var(--text-primary);
      box-shadow: var(--shadow-inset);
    }

    .c-field::placeholder {
      color: var(--component-field-placeholder);
    }

    .c-field:focus,
    .field:focus,
    .select:focus,
    .search:focus {
      border-color: var(--border-focus);
      box-shadow: var(--shadow-focus), var(--shadow-inset);
    }

    .c-field[aria-invalid="true"],
    .field[aria-invalid="true"] {
      border-color: rgba(255, 154, 168, 0.62);
      background: rgba(62, 17, 29, 0.48);
    }

    .c-badge,
    .c-status-badge,
    .status-chip,
    .pill,
    .meta span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-pill);
      font-size: var(--font-size-caption);
      line-height: 1;
      max-width: 100%;
    }

    .c-status-badge--success,
    .status-chip.good,
    .pill.good {
      border-color: rgba(143, 246, 208, 0.38);
      background: rgba(36, 122, 101, 0.42);
      color: #d9fff2;
    }

    .c-section-header,
    .section-head,
    .card-top,
    .slot-head,
    .profile-row {
      display: flex;
      justify-content: space-between;
      gap: var(--space-3);
      min-width: 0;
    }

    .c-empty-state,
    .empty,
    .notice {
      color: var(--text-secondary);
      line-height: var(--line-height-normal);
    }

    .c-toast,
    .toast {
      transition: opacity var(--duration-normal) var(--easing-standard), transform var(--duration-normal) var(--easing-standard), border-color var(--duration-normal) var(--easing-standard);
    }

    .c-modal,
    .c-bottom-sheet {
      border: 1px solid var(--glass-border);
      background: var(--surface-elevated);
      color: var(--text-primary);
      box-shadow: var(--shadow-lg), var(--shadow-inset);
      backdrop-filter: var(--glass-blur-lg) var(--glass-saturation);
      -webkit-backdrop-filter: var(--glass-blur-lg) var(--glass-saturation);
    }

    .c-modal {
      border-radius: var(--radius-2xl);
    }

    .c-bottom-sheet {
      border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
      padding-bottom: env(safe-area-inset-bottom);
    }

    .c-progress {
      width: 100%;
      height: 8px;
      overflow: hidden;
      border-radius: var(--radius-pill);
      background: var(--surface-secondary);
    }

    .c-progress__bar {
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    }

    .c-avatar,
    .hero-avatar,
    .hero-avatar-fallback,
    .topbar-logo {
      border-radius: var(--radius-round);
      object-fit: cover;
    }

    .c-skeleton {
      min-height: 1em;
      border-radius: var(--radius-md);
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
      background-size: 220% 100%;
      animation: skeletonLoading 1.2s var(--easing-standard) infinite;
    }

    @keyframes skeletonLoading {
      from { background-position: 100% 0; }
      to { background-position: -120% 0; }
    }


    @media (max-width: 370px) {
      .slot-grid,
      .stats,
      .coordinate-grid,
      .button-grid {
        grid-template-columns: 1fr;
      }

      .home-hero .stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

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

      .toolbar {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 430px) {
      .hero-row,
      .card-top,
      .section-head,
      .slot-head,
      .profile-row {
        flex-wrap: wrap;
      }

      .mini-row {
        grid-template-columns: 1fr;
      }

      .top-actions {
        gap: 5px;
      }

      .brand-with-logo {
        gap: 8px;
      }

      .topbar-logo {
        width: var(--touch-target-min);
        height: var(--control-height-md);
      }

      .icon-button {
        width: 34px;
        height: 34px;
        border-radius: 12px;
      }

      .app-grid {
        gap: 12px 7px;
      }

      .app-icon-tile {
        --icon-size: 70px;
        border-radius: 21px;
      }

      .widget-grid {
        grid-template-columns: 1fr;
      }

      .app-widget {
        border-radius: 22px;
        padding: 14px;
      }

      .mini-row > .action-row {
        justify-content: flex-start;
      }

      .mini-row > .button-grid {
        min-width: 0;
        width: 100%;
      }

      .action-row {
        justify-content: stretch;
      }

      .action-row .button,
      .action-row .tiny-button {
        flex: 1 1 min(180px, 100%);
      }

      .map-toolbar {
        grid-template-columns: 1fr;
        align-items: stretch;
      }

      .bottom-nav {
        padding-right: 10px;
        padding-left: 10px;
      }

      .nav-inner {
        gap: 4px;
        padding: 7px;
      }

      .nav {
        min-height: 58px;
        font-size: 12px;
      }

      .nav-icon,
      .nav-icon svg {
        width: 23px;
        height: 23px;
      }

    }
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
      }
    }

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

    .instructor-action-grid .path-card {
      min-height: 118px;
      border-radius: 30px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.035)),
        rgba(7, 14, 32, 0.66);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .cascade-screen {
      border-color: rgba(142, 204, 255, 0.34);
      box-shadow: var(--shadow-card), 0 0 0 1px rgba(95, 166, 255, 0.08) inset;
    }

    @media (max-width: 380px) {
      .instructor-action-grid {
        grid-template-columns: 1fr;
      }
    }