:root {
    --ink: #14161A;
    --paper: #f7f0d1;
    --paper-dim: #e8deb4;
    --moss: #2A2D33;
    --moss-light: #61666D;
    --gold: #00A4E4;
    --gold-text: #FFFFFF;
    --burnt-orange: #FF6B1A; /* bright orange */
    --heading: #000000;
    --green: #9FCF67;
    --clay: #C0392B;
    --ink-text: #14161A;
  }
  * { box-sizing: border-box; }
  html, body {
    margin: 0; padding: 0;
    background: #FFFFFF;
    x-font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  }
  #app { max-width: 640px; margin: 0 auto; padding-bottom: 60px; }
  header { padding: 28px 20px 24px; border-bottom: 1px solid var(--moss); }
  header .row { display: flex; justify-content: space-between; align-items: center; }
  .header-title { display: flex; align-items: center; gap: 12px; }
  .tag { color: var(--moss-light); font-size: 0.75rem; font-family: monospace; display: flex; align-items: center; gap: 6px; }
  .tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; }
  header p { color: var(--moss-light); font-size: 0.9rem; margin: 12px 0 0; }

  .card { background: var(--paper); border-radius: 10px; padding: 16px; }
  .info-strip { margin: 20px 20px 0; font-size: 0.8rem; color: var(--moss-light); }
  .info-strip strong { color: var(--ink-text); }
  .info-strip a { color: var(--ink-text); font-weight: 600; text-decoration: underline; }

  .status-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px 0; }
  .filter-row { display: flex; gap: 8px; margin: 14px 20px 0; }
  .filter-row select {
    flex: 1; padding: 9px 10px; border-radius: 6px; border: 1px solid var(--paper-dim);
    background: var(--paper); font-size: 0.85rem; color: var(--ink-text);
  }
  .status-text { color: var(--moss-light); font-size: 0.75rem; font-family: monospace; }
  .refresh-btn {
    color: var(--heading); border: 1px solid var(--moss-light); background: transparent;
    font-size: 0.75rem; padding: 4px 12px; border-radius: 6px; cursor: pointer;
  }

  .token-box { margin: 16px 20px 0; }
  .token-box p { color: var(--ink-text); font-size: 0.9rem; margin: 0 0 8px; }
  .token-row { display: flex; gap: 8px; }
  .token-row input {
    flex: 1; padding: 10px 12px; border-radius: 6px; border: none;
    background: var(--paper-dim); font-family: monospace; font-size: 0.9rem;
  }
  .load-btn {
    background: var(--gold); color: var(--gold-text); border: none; font-weight: 600;
    padding: 10px 18px; border-radius: 6px; cursor: pointer; font-size: 0.9rem;
  }
  .error-detail {
    margin-top: 10px; font-size: 0.75rem; color: var(--clay); font-family: monospace;
    word-break: break-all;
  }

  .day-block { margin: 24px 20px 0; }
  .day-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
  .day-header h2 { color: var(--heading); font-size: 1.05rem; margin: 0; font-weight: 600; }
  .day-header .date { color: var(--moss-light); font-size: 0.75rem; font-family: monospace; }

  .class-row {
    display: flex; align-items: center; gap: 16px; padding: 14px 4px;
    border-bottom: 1px solid var(--paper-dim);
  }
  .class-row:last-child { border-bottom: none; }
  .class-time { width: 64px; flex-shrink: 0; text-align: right; font-family: monospace; font-size: 0.9rem; color: var(--ink-text); }
  .class-main { flex: 1; min-width: 0; }
  .class-type { font-size: 1.05rem; color: var(--ink-text); font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .class-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
  .location-badge {
    display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
    font-size: 0.68rem; font-weight: 700; color: #FFFFFF; letter-spacing: 0.01em;
  }
  .class-sub { font-size: 0.75rem; color: var(--moss-light); margin-top: 2px; }
  .book-link {
    background: var(--burnt-orange); color: #fff !important; text-decoration: none;
    padding: 8px 14px !important; border-radius: 6px; font-size: 0.85rem; font-weight: 600; flex-shrink: 0;
  }
  .full-label { color: var(--moss-light); font-size: 0.75rem; font-family: monospace; flex-shrink: 0; }

  .skeleton { border-radius: 10px; height: 80px; background: var(--paper-dim); opacity: 0.4; margin: 24px 20px 0; }
  .empty-msg { margin: 24px 20px 0; padding: 16px; background: var(--paper); color: var(--moss-light); border-radius: 10px; font-size: 0.9rem; }