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

    :root {
      --blue:      #1a56c4;
      --blue-lt:   #e8effe;
      --blue-dk:   #0f3a87;
      --green:     #14532d;
      --green-bg:  #d1fae5;
      --red:       #991b1b;
      --red-bg:    #fee2e2;
      --gray-1:    #f8f9fa;
      --gray-2:    #e9ecef;
      --gray-3:    #ced4da;
      --text-muted:#4f5866;
      --gray-8:    #212529;
      --radius:    8px;
      --shadow:    0 2px 8px rgba(0,0,0,.10);
      --focus-ring:0 0 0 3px rgba(26,86,196,.45);
    }

    body {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
    }

    .skip-link {
      position: absolute;
      top: -100%;
      left: 1rem;
      background: var(--blue-dk);
      color: #fff;
      padding: .5rem 1.25rem;
      border-radius: 0 0 var(--radius) var(--radius);
      font-weight: 700;
      font-size: .95rem;
      text-decoration: none;
      z-index: 9999;
      transition: top .1s;
    }
    .skip-link:focus { top: 0; outline: 3px solid #fff; outline-offset: 2px; }

    .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;
    }

    :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
    :focus:not(:focus-visible) { outline: none; }

    .startup-screen {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, var(--blue-dk) 0%, var(--blue) 100%);
    }
    .startup-card {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0,0,0,.25);
      padding: 2.5rem;
      width: 100%;
      max-width: 360px;
      text-align: center;
    }
    .startup-card .icon { font-size: 2.5rem; display: block; margin-bottom: .75rem; }
    .startup-card h1 { font-size: 1.2rem; font-weight: 700; color: var(--blue-dk); margin-bottom: .3rem; }
    .startup-card p { font-size: .9rem; color: var(--text-muted); margin-bottom: 1.25rem; }
    .startup-error {
      margin-top: 1rem;
      padding: .65rem .9rem;
      background: var(--red-bg);
      border: 1.5px solid #fca5a5;
      border-radius: 6px;
      color: var(--red);
      font-size: .88rem;
      font-weight: 500;
      text-align: left;
    }
    .btn-retry {
      margin-top: 1rem;
      background: var(--blue);
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: .55rem 1.25rem;
      font-size: .95rem;
      font-weight: 700;
      cursor: pointer;
      transition: background .15s;
    }
    .btn-retry:hover { background: var(--blue-dk); }
    .btn-retry:focus-visible { outline: 3px solid var(--blue-dk); outline-offset: 3px; }

    .app-header {
      background: var(--blue-lt);
      color: #fff;
      padding: 0 1.5rem;
      display: flex;
      align-items: center;
      gap: 1rem;
      height: 56px;
      box-shadow: 0 2px 6px rgba(0,0,0,.25);
    }
    .app-header h1 { font-size: 1.1rem; font-weight: 600; flex: 1; }

    .main { display: grid; grid-template-columns: 380px 1fr; height: calc(100vh - 56px); overflow: hidden; }
    .panel-left  { border-right: 1px solid var(--gray-2); background: #fff; display: flex; flex-direction: column; overflow: hidden; }
    .panel-right { overflow-y: auto; padding: 1.25rem; }

    .search-bar { padding: 1rem; border-bottom: 1px solid var(--gray-2); }
    .search-wrap { display: flex; gap: .5rem; }
    .search-input {
      flex: 1;
      border: 1.5px solid var(--gray-3);
      border-radius: 6px;
      padding: .5rem .75rem;
      font-size: .95rem;
      color: var(--gray-8);
      transition: border-color .15s;
    }
    .search-input:focus-visible { border-color: var(--blue); box-shadow: var(--focus-ring); outline: none; }
    .btn-search {
      background: var(--blue);
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: .5rem 1rem;
      cursor: pointer;
      font-weight: 600;
      font-size: .9rem;
      transition: background .15s;
    }
    .btn-search:hover { background: var(--blue-dk); }
    .btn-search:disabled { opacity: .65; cursor: not-allowed; }
    .btn-search:focus-visible { outline: 3px solid var(--blue-dk); outline-offset: 2px; }
    .filter-row { display: flex; gap: .5rem; margin-top: .6rem; }
    .filter-select {
      flex: 1;
      min-width: 0;
      border: 1.5px solid var(--gray-3);
      border-radius: 6px;
      padding: .38rem .5rem;
      font-size: .85rem;
      color: var(--gray-8);
      background: #fff;
    }
    .filter-select:focus-visible { border-color: var(--blue); box-shadow: var(--focus-ring); outline: none; }

    .course-list { flex: 1; overflow-y: auto; list-style: none; }
    .course-count {
      padding: .5rem 1rem;
      font-size: .82rem;
      color: var(--text-muted);
      background: var(--gray-1);
      border-bottom: 1px solid var(--gray-2);
    }
    .course-item {
      padding: .85rem 1rem;
      border-bottom: 1px solid var(--gray-2);
      cursor: pointer;
      transition: background .1s;
    }
    .course-item:hover { background: var(--blue-lt); }
    .course-item[aria-selected="true"] { background: var(--blue-lt); border-left: 3px solid var(--blue); }
    .course-item:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; background: var(--blue-lt); }
    .course-number { font-size: .78rem; font-weight: 700; color: var(--blue-dk); text-transform: uppercase; margin-bottom: .15rem; }
    .course-name { font-weight: 600; font-size: .95rem; line-height: 1.3; }
    .course-meta { font-size: .82rem; color: var(--text-muted); margin-top: .25rem; }

    .state-msg { padding: 3rem 1.5rem; text-align: center; color: var(--text-muted); }
    .state-msg .icon { font-size: 2.5rem; margin-bottom: .75rem; }
    .state-msg p { font-size: .9rem; line-height: 1.5; }
    .spinner {
      display: inline-block;
      width: 28px; height: 28px;
      border: 3px solid var(--gray-2);
      border-top-color: var(--blue);
      border-radius: 50%;
      animation: spin .7s linear infinite;
      margin-bottom: .75rem;
    }
    .spinner-lg { width: 40px; height: 40px; border-width: 4px; margin: 0 auto 1rem; }
    @keyframes spin { to { transform: rotate(360deg); } }

    .error-banner {
      margin: .75rem 1rem;
      padding: .65rem .9rem;
      background: var(--red-bg);
      border: 1.5px solid #fca5a5;
      border-radius: 6px;
      color: var(--red);
      font-size: .88rem;
      font-weight: 500;
    }

    .course-detail-header {
      background: #fff;
      border: 1px solid var(--gray-2);
      border-radius: var(--radius);
      padding: 1.25rem 1.5rem;
      margin-bottom: 1rem;
      box-shadow: var(--shadow);
    }
    .detail-number { font-size: .8rem; font-weight: 700; color: var(--blue-dk); text-transform: uppercase; margin-bottom: .3rem; }
    .detail-name { font-size: 1.3rem; font-weight: 700; margin-bottom: .75rem; }
    .detail-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: .3rem;
      padding: .25rem .6rem;
      border-radius: 999px;
      font-size: .82rem;
      font-weight: 600;
    }
    .badge-blue  { background: var(--blue-lt); color: var(--blue-dk); }
    .badge-gray  { background: var(--gray-2);  color: var(--gray-8); }
    .badge-green { background: var(--green-bg); color: var(--green); }

    .reserve-toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
    .type-chips { display: flex; gap: .35rem; flex-wrap: wrap; flex: 1; }
    .type-chip {
      padding: .3rem .7rem;
      border-radius: 999px;
      font-size: .82rem;
      font-weight: 600;
      border: 1.5px solid var(--gray-3);
      background: #fff;
      color: var(--text-muted);
      cursor: pointer;
      transition: all .12s;
      white-space: nowrap;
    }
    .type-chip:hover { border-color: var(--blue); color: var(--blue); }
    .type-chip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
    .type-chip:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
    .sort-select {
      border: 1.5px solid var(--gray-3);
      border-radius: 6px;
      padding: .3rem .5rem;
      font-size: .82rem;
      color: var(--gray-8);
      background: #fff;
    }
    .sort-select:focus-visible { border-color: var(--blue); box-shadow: var(--focus-ring); outline: none; }

    .type-group-header {
      font-size: .85rem;
      font-weight: 700;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: .05em;
      padding: .5rem 0 .3rem;
      border-bottom: 1px solid var(--gray-2);
      margin-bottom: .4rem;
      margin-top: .6rem;
    }
    .type-group-header:first-child { margin-top: 0; }

    .reserve-grid { display: flex; flex-direction: column; gap: .6rem; list-style: none; }
    .reserve-card {
      background: #fff;
      border: 1px solid var(--gray-2);
      border-radius: var(--radius);
      padding: 1rem 1.25rem;
      box-shadow: var(--shadow);
      display: grid;
      grid-template-columns: 1fr auto;
      gap: .5rem .75rem;
      align-items: start;
    }
    .reserve-title  { font-weight: 600; font-size: .95rem; grid-column: 1; }
    .reserve-author { font-size: .85rem; color: var(--text-muted); grid-column: 1; }
    .reserve-call   {
      font-size: .82rem; font-family: monospace;
      background: var(--gray-1); border: 1px solid var(--gray-2);
      border-radius: 4px; padding: .1rem .4rem;
      grid-column: 1; display: inline-block; margin-top: .25rem;
    }
    .status-pill {
      grid-column: 2; grid-row: 1 / 3; align-self: center;
      padding: .28rem .75rem; border-radius: 999px;
      font-size: .78rem; font-weight: 700; white-space: nowrap;
    }
    .status-available   { background: var(--green-bg); color: var(--green); }
    .status-unavailable { background: var(--red-bg);   color: var(--red); }
    .status-other       { background: var(--gray-2);   color: var(--gray-8); }
    .reserve-extra { font-size: .82rem; color: var(--text-muted); grid-column: 1 / 3; margin-top: .25rem; }
    .reserve-links { grid-column: 1 / 3; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
    .reserve-link {
      display: inline-flex;
      align-items: center;
      gap: .3rem;
      padding: .28rem .7rem;
      background: var(--blue-lt);
      color: var(--blue-dk);
      border: 1px solid #c7d9f8;
      border-radius: 999px;
      font-size: .82rem;
      font-weight: 600;
      text-decoration: none;
      transition: background .12s, border-color .12s;
    }
    .reserve-link:hover { background: #d4e4fc; border-color: var(--blue); }
    .reserve-link:focus-visible { outline: 3px solid var(--blue-dk); outline-offset: 2px; }

    @media (max-width: 760px) {
      .main { grid-template-columns: 1fr; height: auto; overflow: visible; }
      .panel-left  { height: calc(100vh - 56px); }
      .panel-right { display: none; padding: 1rem; }
      .main.detail-open .panel-left  { display: none; }
      .main.detail-open .panel-right { display: block; min-height: calc(100vh - 56px); }
    }
    .btn-back {
      display: none !important;
      align-items: center;
      gap: .4rem;
      background: none;
      border: 1.5px solid var(--gray-3);
      border-radius: 6px;
      padding: .4rem .85rem;
      font-size: .88rem;
      font-weight: 600;
      color: var(--blue-dk);
      cursor: pointer;
      margin-bottom: 1rem;
      transition: background .12s;
    }
    .btn-back:hover { background: var(--blue-lt); }
    .btn-back:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
    @media (max-width: 760px) { .btn-back { display: inline-flex !important; } }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    }