::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 3px; }
    .dark ::-webkit-scrollbar-thumb { background: #475569; }

    .spinner {
      border: 3px solid rgba(59, 130, 246, 0.2);
      border-top-color: #3b82f6;
      border-radius: 50%;
      width: 36px; height: 36px;
      animation: spin 0.7s linear infinite;
    }
    .spinner-sm {
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: #fff;
      border-radius: 50%;
      width: 18px; height: 18px;
      animation: spin 0.65s linear infinite;
      display: inline-block;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    .btn-loading {
      position: relative;
      pointer-events: none;
      opacity: 0.85;
    }
    .btn-loading .btn-text { visibility: hidden; }
    .btn-loading .btn-spinner {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
    .animate-fade-in { animation: fadeIn 0.2s ease-out; }
    .animate-slide-up { animation: slideUp 0.25s ease-out; }

    /* Page sections – hash router toggles visibility */
    .page-section { display: none; }
    .page-section.active {
      display: block;
      animation: fadeIn 0.2s ease-out;
    }

    /* Sidebar collapse helpers */
    #student-sidebar.collapsed { width: 5rem; }
    #student-sidebar.collapsed .nav-label,
    #student-sidebar.collapsed .sidebar-brand-text,
    #student-sidebar.collapsed .nav-label-wrap { display: none; }
    #main-content.sidebar-collapsed { margin-left: 5rem; }
    @media (min-width: 1024px) {
      #main-content { margin-left: 16rem; transition: margin-left 0.2s ease; }
      #main-content.sidebar-collapsed { margin-left: 5rem; }
    }

    /* Mobile bottom nav safe area */
    .pb-safe { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }

    #more-sheet {
      transition: transform 0.25s ease-out;
    }

    /* Focus rings */
    input:focus, select:focus, textarea:focus, button:focus-visible {
      outline: none;
    }
    input:focus, select:focus, textarea:focus {
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }

    /* Bottom nav active indicator */
    .bottom-nav-item.active,
    #bottom-nav-more-btn.active-more {
      color: #2563eb;
    }
    .dark .bottom-nav-item.active,
    .dark #bottom-nav-more-btn.active-more {
      color: #60a5fa;
    }

    /* Skeleton pulse */
    .skeleton {
      background: linear-gradient(90deg, rgba(148,163,184,0.15) 25%, rgba(148,163,184,0.28) 50%, rgba(148,163,184,0.15) 75%);
      background-size: 200% 100%;
      animation: skeleton 1.2s ease-in-out infinite;
      border-radius: 0.75rem;
    }
    .dark .skeleton {
      background: linear-gradient(90deg, rgba(71,85,105,0.35) 25%, rgba(71,85,105,0.55) 50%, rgba(71,85,105,0.35) 75%);
      background-size: 200% 100%;
    }
    @keyframes skeleton {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    /* Reload button spin */
    .is-spinning i, .is-spinning [data-lucide] {
      animation: spin 0.7s linear infinite;
    }

    /* Card hover polish */
    .hover-lift {
      transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    }
    .hover-lift:hover {
      transform: translateY(-1px);
    }

    /* Nav link active bar on desktop */
    #student-sidebar a.nav-link.active {
      position: relative;
    }
    #student-sidebar:not(.collapsed) a.nav-link.active::before {
      content: '';
      position: absolute;
      left: 0;
      top: 20%;
      bottom: 20%;
      width: 3px;
      border-radius: 0 3px 3px 0;
      background: #2563eb;
    }

    /* Reduce motion */
    @media (prefers-reduced-motion: reduce) {
      .page-section.active,
      .animate-fade-in,
      .animate-slide-up,
      .skeleton,
      .is-spinning i {
        animation: none !important;
      }
    }

    #topic-content {
        line-height: 2;
    }
    #topic-content ul {
        list-style-type: disc !important;
        padding-left: 15px !important;
    }
    #topic-content ol, #topic-obj {
        list-style-type: decimal;
        padding-left: 15px !important;
    }
    #topic-content h1, #topic-content h2,
    #topic-content h3, #topic-content h4,
    #topic-content p strong {
        margin-top: 20px;
    }