* { box-sizing: border-box; }
    body { background: #F9FAFB; font-family: 'Segoe UI', sans-serif; min-height: 100vh; }

    /* ── Top bar ── */
    #topbar { background:#2C2D3F;color:white;padding:0 1.5rem;height:60px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,0.2); }
    #topbar .brand { display:flex;align-items:center;gap:0.75rem; }
    #topbar h1 { font-size:1.15rem;font-weight:600;margin:0; }
    #topbar .subtitle { font-size:0.75rem;color:#9CA3AF;margin:0; }

    /* ── Avatars ── */
    .inst-avatar { width:42px;height:42px;border-radius:50%;background:#EF4444;color:white;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.85rem;flex-shrink:0; }

    /* ── Screens ── */
    .screen { display:none; }
    .screen.active { display:block; }
    #screen-login { min-height:calc(100vh - 60px);display:none;align-items:center;justify-content:center;padding:2rem; }
    #screen-login.active { display:flex; }
    .login-card { width:100%;max-width:420px; }

    /* ── Tabs ── */
    .nav-tabs .nav-link { color:#6c757d;cursor:pointer;border:none;background:transparent;white-space:nowrap; }
    .nav-tabs .nav-link.active { color:#EF4444!important;background:white!important;border:none!important;border-bottom:2px solid #EF4444!important; }
    .nav-tabs .nav-link:hover:not(.active) { color:#EF4444; }
    .nav-tabs { flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch; }
    .nav-tabs::-webkit-scrollbar { display:none; }

    /* ── Course cards ── */
    .course-card { border-left:4px solid #e5e7eb;transition:all 0.15s;cursor:pointer; }
    .course-card:hover { box-shadow:0 2px 10px rgba(0,0,0,0.1);border-left-color:#EF4444; }
    .course-card.has-books { border-left-color:#22c55e; }
    .course-card.no-books  { border-left-color:#f59e0b; }
    .course-card.no-text   { border-left-color:#7c3aed; }

    /* ── Book list ── */
    .book-item { border-left:3px solid #e5e7eb;padding-left:0.75rem;margin-bottom:0.5rem; }
    .book-item.required    { border-left-color:#EF4444; }
    .book-item.recommended { border-left-color:#3b82f6; }

    /* ── Search ── */
    #course-search:focus { border-color:#EF4444;box-shadow:0 0 0 0.2rem rgba(239,68,68,0.15); }

    /* ── Term sidebar ── */
    #term-sidebar { min-width:190px;max-width:210px;flex-shrink:0; }
    .term-btn { display:block;width:100%;text-align:left;padding:0.5rem 0.85rem;border-radius:0.4rem;border:none;background:transparent;cursor:pointer;color:#374151;font-size:0.875rem;transition:all 0.15s;margin-bottom:2px; }
    .term-btn:hover { background:#F3F4F6; }
    .term-btn.active { background:#FEE2E2;color:#EF4444;font-weight:600; }
    .term-btn .tbadge { float:right;margin-top:2px;font-size:0.7rem;padding:0.2em 0.5em;border-radius:999px;background:#e5e7eb;color:#374151; }
    .term-btn.active .tbadge { background:#EF4444;color:white; }

    /* ── Stats ── */
    .stat-box { background:white;border-radius:0.5rem;padding:1rem;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,0.06); }
    .stat-box .stat-num { font-size:1.75rem;font-weight:700;color:#EF4444;line-height:1; }
    .stat-box .stat-lbl { font-size:0.75rem;color:#6b7280;margin-top:0.25rem; }

    /* ── Detail overlay ── */
    #screen-course { display:none; }
    #screen-course.active { display:block; }

    .no-results { padding:3rem 1rem;text-align:center;color:#9CA3AF; }

    @media (max-width:767px) {
      #topbar { padding:0 1rem; }
      #topbar h1 { font-size:1rem; }
      #term-sidebar { display:none; }
      #term-select-mobile { display:block!important; }
    }
  .btn-purple { color:#7c3aed;border:1px solid #7c3aed;background:transparent; }
  .btn-purple:hover, .btn-purple:focus { background:#7c3aed;color:white;border-color:#7c3aed; }
  .btn-purple:active { background:#6d28d9;color:white;border-color:#6d28d9; }
  /* Material type toggle */
  .type-toggle { display:flex; gap:8px; }
  .type-toggle input[type="radio"] { position:absolute; opacity:0; pointer-events:none; }
  .type-toggle label { flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
    padding:9px 14px; border-radius:8px; font-size:.82rem; font-weight:600; cursor:pointer;
    border:2px solid transparent; transition:all .15s; user-select:none; }
  .type-toggle label.lbl-book { background:#eef2ff; color:#4338ca; border-color:#c7d2fe; }
  .type-toggle label.lbl-book:hover { background:#e0e7ff; border-color:#a5b4fc; }
  .type-toggle input#type-book:checked + label.lbl-book { background:#4f46e5; color:#fff; border-color:#4f46e5; box-shadow:0 2px 8px rgba(79,70,229,.35); }
  .type-toggle label.lbl-material { background:#fffbeb; color:#92400e; border-color:#fde68a; }
  .type-toggle label.lbl-material:hover { background:#fef3c7; border-color:#fcd34d; }
  .type-toggle input#type-material:checked + label.lbl-material { background:#d97706; color:#fff; border-color:#d97706; box-shadow:0 2px 8px rgba(217,119,6,.35); }
  /* OTP login */
  .otp-input { font-size:1.6rem;letter-spacing:.35em;text-align:center;font-weight:700;padding:12px 13px; }
  .btn-otp-submit { width:100%;background:#EF4444;color:#fff;border:none;border-radius:8px;padding:13px;font-weight:700;font-size:.9rem;cursor:pointer;transition:background .12s;display:flex;align-items:center;justify-content:center;gap:8px; }
  .btn-otp-submit:hover { background:#dc2626; }
  .btn-otp-submit:disabled { opacity:.65;cursor:not-allowed; }
  .btn-otp-back { background:none;border:none;color:#6b7280;font-size:.8rem;cursor:pointer;padding:0;text-decoration:underline; }
  .btn-otp-back:hover { color:#374151; }
  .otp-sent-banner { background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:12px 14px;margin-bottom:18px;display:flex;align-items:center;gap:10px; }
  .otp-dev-notice { background:#fffbeb;border:1px solid #fde68a;border-radius:7px;padding:10px 13px;margin-bottom:18px;font-size:.78rem;color:#92400e;display:flex;gap:8px;align-items:flex-start; }
  @keyframes spin { to { transform:rotate(360deg); } }