:root{
  --bg:#0b0d12;
  --panel:#0f1320;
  --panel2:#0c101a;
  --bg-accent-green: rgba(65,209,159,.06);
  --ok-soft: rgba(65,209,159,.18);
  --card-bg: rgba(12,16,26,.55);
  --tag-bg: rgba(255,255,255,.02);
  --list-item-bg: rgba(12,16,26,.45);
  --border:rgba(255,255,255,.10);
  --muted:rgba(255,255,255,.65);
  --text:rgba(255,255,255,.92);
  --accent:#7aa2ff;
  --warn:#ffb020;
  --danger:#ff5d5d;
  --ok:#41d19f;
  --shadow: 0 16px 40px rgba(0,0,0,.45);
  --radius:18px;
}

/* Light theme variables: applied when body has class `light` */
body.light{
  --bg: #f3eae0; /* light beige base */
  --panel: #fbf7f3;
  --panel2: #fffaf7;
  --bg-accent-green: rgba(65,209,159,.06);
  --ok-soft: rgba(65,209,159,.10);
  --card-bg: rgba(255,255,255,.85);
  --tag-bg: rgba(0,0,0,.04);
  --list-item-bg: rgba(255,255,255,.85);
  --border: rgba(0,0,0,.06);
  --muted: rgba(20,20,20,.6);
  --text: rgba(20,20,20,.92);
  --accent: #7aa2ff;
  --warn: #ffb020;
  --danger: #ff5d5d;
  --ok: #41d19f;
  --shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* Gray theme variables: applied when body has class `gray` */
body.gray{
  --bg: #3a3a3a;
  --panel: #4a4a4a;
  --panel2: #525252;
  --bg-accent-green: rgba(65,209,159,.06);
  --ok-soft: rgba(65,209,159,.10);
  --card-bg: rgba(70,70,70,.90);
  --tag-bg: rgba(255,255,255,.06);
  --list-item-bg: rgba(70,70,70,.90);
  --border: rgba(255,255,255,.12);
  --muted: rgba(220,220,220,.65);
  --text: rgba(240,240,240,.92);
  --accent: #7aa2ff;
  --warn: #ffb020;
  --danger: #ff5d5d;
  --ok: #41d19f;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  background: radial-gradient(1200px 700px at 20% 0%, rgba(122,162,255,.20), transparent 55%),
              radial-gradient(900px 600px at 80% 10%, var(--bg-accent-green), transparent 60%),
              var(--bg);
  font-family: ui-sans-serif, system-ui, -apple-system, "PingFang TC", "Noto Sans TC", sans-serif;
}

/* smooth theme transition */
body, .modal-card, .page-top, .card{ transition: background 280ms ease, color 180ms ease, border-color 180ms ease; }

.topbar{
  height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  border-bottom:1px solid var(--border);
  background: rgba(11,13,18,.72);
  backdrop-filter: blur(10px);
  position:fixed; 
  top:0; 
  left:0;
  right:0;
  z-index:100;
  flex-wrap: nowrap;
}

.topbar-left, .topbar-right{ display:flex; align-items:center; gap:10px; flex-shrink: 0; }
.topbar-left{ flex-shrink: 1; min-width: 0; }
.site-title{ 
  color:var(--text); 
  font-size:16px; 
  font-weight:600; 
  white-space:nowrap;
}
.label{ color:var(--muted); font-size:12px; }
.term{ display:flex; align-items:center; gap:8px; flex-shrink: 0; }

.app{ padding:14px; padding-top:68px; }

.page{ display:none; }
.page.active{ display:block; }

.page-top{
  margin-bottom:10px;
  padding:12px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(15,19,32,.62);
  box-shadow: var(--shadow);
}

.search-row{ margin-bottom:10px; }
.filter-row{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}

/* Filter toggle button (hidden by default, shown on mobile) */
.filter-toggle {
  display: none;
}

/* Floating action button (hidden by default, shown on mobile) */
.float-toggle {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  color: white;
  font-size: 24px;
  cursor: pointer;
  z-index: 100;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.float-toggle:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0,0,0,.4);
}

.float-toggle:active {
  transform: scale(0.95);
}

.float-toggle-icon {
  font-size: 24px;
  line-height: 1;
}

.float-toggle-text {
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

/* Floating panel for mobile view */
.float-panel {
  display: none;
  position: fixed;
  top: 70px;
  right: 0;
  width: 90%;
  max-width: 400px;
  height: calc(100vh - 90px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px 0 0 16px;
  box-shadow: -4px 0 20px rgba(0,0,0,.3);
  z-index: 101;
  flex-direction: column;
  animation: slideIn 0.3s ease;
}

.float-panel.show {
  display: flex;
}

.float-panel-large {
  width: 95%;
  max-width: 800px;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.float-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}

.float-panel-body {
  flex: 1;
  overflow: auto;
  padding: 12px;
}

.spacer{ flex:1; }
.tiny{ color:var(--muted); font-size:12px; }

.layout{
  display:grid;
  /* Two-column layout: main content + rightbar (sidebar removed) */
  grid-template-columns: 1fr 320px;
  gap:12px;
  height: calc(100vh - 54px - 14px - 14px - 120px);
}

.layout.p2{
  grid-template-columns: 1fr 320px;
}

/* P2 content area: allow children to grow/shrink and scroll */
.layout.p2 .content{ min-height:0; }

/* Schedule container: fill vertical space and enable scrolling */
.schedule-wrap{ flex:1; overflow:auto; min-height:0; padding-right:6px; }
/* Stable scrollbar gutter with thin, visible scrollbar */
.schedule-wrap{ scrollbar-gutter: stable both-edges; }
.schedule-wrap::-webkit-scrollbar{ width:10px; }
.schedule-wrap::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.06); border-radius:8px; border:2px solid transparent; background-clip: padding-box; }

/* Sorted list view: scrollable container */
.sorted{ flex:1; overflow:auto; }

.sidebar, .content, .rightbar{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow:hidden;
}

/* Rightbar: column flex layout for scrollable saved list */
.rightbar{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.sidebar, .rightbar{ padding:12px; }
.content{ padding:12px; display:flex; flex-direction:column; min-height:0; }

.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:10px;
}

.panel-title{ font-weight:700; letter-spacing:.2px; }
.credit{ display:flex; align-items:baseline; gap:8px; }
.credit-num{ font-size:20px; font-weight:800; }

.input, .select{
  height:38px;
  border-radius: 12px;
  border:1px solid var(--border);
  background: rgba(12,16,26,.75);
  color: var(--text);
  padding: 0 12px;
  outline:none;
}

.input{ width:100%; }
.select{ min-width:160px; }

.btn{
  height:38px;
  padding:0 12px;
  border-radius: 12px;
  border:1px solid var(--border);
  background: rgba(12,16,26,.75);
  color: var(--text);
  cursor:pointer;
}
.btn:hover{ border-color: rgba(122,162,255,.6); }
.btn-primary{
  border-color: rgba(122,162,255,.7);
  background: rgba(122,162,255,.18);
}
.btn-warn{
  border-color: rgba(255,176,32,.6);
  background: rgba(255,176,32,.14);
}
.btn-sm{ height:32px; border-radius:10px; padding:0 10px; font-size:12px; }

.list{ display:flex; flex-direction:column; gap:8px; }
.list .item{
  padding:10px 10px;
  border-radius: 12px;
  border:1px solid var(--border);
  background: var(--list-item-bg);
  cursor:pointer;
  color: var(--muted);
}
.list .item.active{
  color: var(--text);
  border-color: rgba(122,162,255,.55);
  background: rgba(122,162,255,.12);
}

.cards{ display:flex; flex-direction:column; gap:10px; overflow:auto; flex:1; padding-right:6px; }
.card{
  border:1px solid var(--border);
  border-radius: 16px;
  padding:12px;
  background: var(--card-bg);
  cursor:pointer;
  position:relative;
}
.card.added{
  /* Blue accent for saved courses (avoids green background overlap) */
  border-color: rgba(122,162,255,.55);
  background: rgba(122,162,255,.10);
}
.card .title{
  font-weight:800;
  line-height:1.2;
  margin-bottom:8px;
}
.card .meta{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.tag{
  font-size:12px;
  color: var(--muted);
  padding:4px 8px;
  border:1px solid var(--border);
  border-radius: 999px;
  background: var(--tag-bg);
}
.tag.program-tag{
  background: rgba(122,162,255,.12);
  border-color: rgba(122,162,255,.25);
  color: var(--accent);
  font-weight: 500;
}
.tag.eng-tag{
  background: rgba(255,93,93,.12);
  border-color: rgba(255,93,93,.25);
  color: var(--danger);
  font-weight: 500;
}
.card .small{ color: var(--muted); font-size:12px; }
.card .actions{
  display:flex; gap:8px; margin-top:10px;
}
.card .actions .btn{ height:32px; }

.pager{
  display:flex; align-items:center; justify-content:center;
  gap:10px; margin-top:12px;
}
.pager-info{ color: var(--muted); font-size:12px; }

.right-actions{ display:flex; gap:8px; margin:10px 0; }

.saved{ display:flex; flex-direction:column; gap:10px; }
.rightbar .saved{ flex:1; overflow:auto; min-height:0; padding-right:6px; }
.saved .saved-item{
  border:1px solid var(--border);
  border-radius: 16px;
  padding:10px;
  background: rgba(12,16,26,.55);
  cursor:pointer;
  position:relative;
}
.saved .saved-item.active{
  border-color: rgba(122,162,255,.55);
  background: rgba(122,162,255,.10);
}
.saved .x{
  position:absolute;
  right:8px; top:8px;
  height:26px; width:26px;
  border-radius:10px;
  display:grid; place-items:center;
  border:1px solid var(--border);
  background: rgba(0,0,0,.18);
  cursor:pointer;
}
.saved .name{ font-weight:800; margin-bottom:6px; }
.saved .line{ color: var(--muted); font-size:12px; }

.notice{
  display:flex; gap:10px; align-items:flex-start;
  border:1px solid rgba(255,93,93,.35);
  background: rgba(255,93,93,.12);
  border-radius: 16px;
  padding:10px;
  margin:10px 0;
}
.notice.hidden{ display:none; }
.notice-icon{ font-size:20px; }
.notice-title{ font-weight:800; }
.notice-text{ color: rgba(255,255,255,.85); font-size:13px; margin-top:2px; }

.toggle{ display:flex; align-items:center; gap:8px; color: var(--muted); font-size:12px; }

.schedule-wrap{ width:100%; }
.table{
  width:100%;
  border-collapse: collapse;
  table-layout: fixed;
  border-radius: 16px;
  overflow:hidden;
  border:1px solid var(--border);
}
.table tbody{
  position: relative;
}
.table th, .table td{
  border:1px solid var(--border);
  vertical-align: top;
}
.table th{
  padding:8px;
  font-size:12px;
  color: var(--muted);
  background: rgba(0,0,0,.12);
}
.timecell{
  padding:10px 8px;
  font-size:12px;
  color: var(--muted);
  background: rgba(0,0,0,.10);
}
.slotcell{
  padding:6px;
  min-height:64px;
  /* fixed height to prevent table row resizing when pills are added/removed
     reduced to fit more rows on screen */
  height:72px;
  max-height:72px;
  overflow:auto;
  cursor: pointer;
  pointer-events: auto;
}
.slotcell.has-conflict{
  outline: 2px solid rgba(255,93,93,.65);
  outline-offset:-2px;
  background: rgba(255,93,93,.08);
}
.slotcell.slot-selected{
  background: rgba(122,162,255,.06);
  outline: 2px solid rgba(122,162,255,.12);
}
.coursepill{
  border:1px solid var(--border);
  border-radius: 10px;
  padding:6px;
  margin-bottom:4px;
  background: rgba(12,16,26,.55);
  box-sizing:border-box;
  word-break:break-word;
  font-size:12px;
}
.coursepill .pname{ font-weight:800; font-size:11px; margin-bottom:3px; }
.coursepill.conflict{
  border-color: rgba(255,93,93,.55);
  background: rgba(255,93,93,.10);
}
.coursepill .pname{ font-weight:800; font-size:12px; margin-bottom:4px; }
.coursepill .pinfo{ color: var(--muted); font-size:11px; }

.coursepill-span{
  position: absolute;
  z-index: 10;
  pointer-events: auto;
  width: calc(100% / 7 - 8px);
  margin: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(122,162,255,.15);
  border: 1px solid rgba(122,162,255,.35);
}

.sorted{ display:flex; flex-direction:column; gap:10px; }
.sorted.hidden{ display:none; }
.sorted .row{
  border:1px solid var(--border);
  border-radius: 16px;
  padding:10px;
  background: rgba(12,16,26,.55);
}
.sorted .row .rtitle{ font-weight:800; margin-bottom:6px; }
.sorted .row .rmeta{ color: var(--muted); font-size:12px; }

.modal.hidden{ display:none; }
.modal{
  position:fixed; inset:0; z-index:200;
}
.modal-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
}
.modal-card{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%,-50%);
  width: min(900px, calc(100vw - 20px));
  max-height: min(80vh, 680px);
  border:1px solid var(--border);
  border-radius: 18px;
  background: rgba(15,19,32,.92);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modal-backdrop{ z-index:200; pointer-events: none; }
.modal-card{ z-index:210; pointer-events:auto; }
.slotcell-btn{
  height:18px;
  padding:1px 4px;
  font-size:10px;
  border-radius:4px;
  border:1px solid var(--border);
  background: rgba(12,16,26,.06);
  color:var(--text);
  cursor:pointer;
  display:block;
  width:100%;
  pointer-events:auto;
}
.slotcell-btn.active{
  background: rgba(122,162,255,.18);
  border-color: rgba(122,162,255,.8);
  box-shadow: 0 4px 12px rgba(122,162,255,.12);
  color: var(--text);
  position:relative;
}
.slotcell-btn{ position:relative; }
.slotcell-btn.active::after{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
}
.modal-title{ font-weight:900; }
.modal-body{
  padding:12px;
  overflow:auto;
  max-height: calc(80vh - 54px);
  color: rgba(255,255,255,.90);
}

/* Light-theme overrides for elements that used hard-coded dark rgba colors */
body.light .topbar{
  background: rgba(255,255,255,0.95);
  border-bottom-color: var(--border);
  color: var(--text);
}
body.light .page-top{ background: var(--panel); }
body.light .input, body.light .select, body.light .btn{
  background: var(--panel2);
  color: var(--text);
  border-color: var(--border);
}
body.light .btn:hover{ border-color: rgba(122,162,255,.45); }
body.light .card,
body.light .saved .saved-item,
body.light .sorted .row,
body.light .coursepill,
body.light .sidebar,
body.light .rightbar,
body.light .modal-card{
  background: var(--card-bg);
  border-color: var(--border);
  color: var(--text);
  box-shadow: var(--shadow);
}
/* Buttons and controls in light theme: clearer fill and contrast */
body.light .btn{
  background: #fff; /* stronger button fill for visibility */
  color: var(--text);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}
body.light .btn-primary{
  background: linear-gradient(180deg, rgba(122,162,255,.95), rgba(102,142,235,.95));
  border-color: rgba(64,112,205,.9);
  color: #fff;
}
body.light .btn-warn{ background: rgba(255,176,32,.12); border-color: rgba(255,176,32,.5); }
body.light .btn-sm{ height:32px; }

/* saved list item close button */
body.light .saved .x{ background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.08); color: rgba(0,0,0,0.6); }

/* tags and small labels */
body.light .tag{ background: var(--tag-bg); color: rgba(0,0,0,0.65); border-color: rgba(0,0,0,0.06); }
body.light .tag.program-tag{ 
  background: rgba(122,162,255,.14); 
  border-color: rgba(122,162,255,.35); 
  color: #4070cd;
  font-weight: 500;
}
body.light .tag.eng-tag{ 
  background: rgba(255,93,93,.14); 
  border-color: rgba(255,93,93,.35); 
  color: #d03030;
  font-weight: 500;
}

/* inputs/selects */
body.light .input, body.light .select{ background: var(--panel2); color: var(--text); border-color: var(--border); }

/* slot picker buttons */
body.light .slotcell-btn{ background: rgba(0,0,0,0.03); color: var(--text); border-color: var(--border); }
body.light .slotcell-btn.active{ background: rgba(122,162,255,.14); }

/* Selected / added warm accent for light theme (option A) */
body.light .slotcell-btn.active{
  background: #FFF3E6;
  border-color: #FFB870;
}
body.light .slotcell.slot-selected{
  background: #FFF8F0;
  outline: 2px solid rgba(255,184,112,0.35);
}
body.light .card.added{
  border-color: rgba(255,184,112,0.6);
  background: rgba(255,243,230,0.7);
}
body.light .saved .saved-item.active{
  border-color: rgba(255,184,112,0.6);
  background: rgba(255,243,230,0.7);
}

/* ensure modal body text is readable */
body.light .modal-body{ color: var(--muted); }
body.light .notice{ background: rgba(255,93,93,.08); border-color: rgba(255,93,93,.22); }
body.light .notice-text{ color: rgba(20,20,20,.85); }
body.light .table th{ background: rgba(0,0,0,.04); color: var(--muted); border-color: var(--border); }
body.light .timecell{ background: rgba(0,0,0,.03); color: var(--muted); }
body.light .slotcell{ background: transparent; }
body.light .slotcell.has-conflict{
  outline: 2px solid rgba(255,93,93,.85);
  background: rgba(255,93,93,.25);
}
body.light .coursepill{ background: rgba(255,255,255,.9); border-color: var(--border); color: var(--text); }
body.light .coursepill.conflict{
  border-color: rgba(255,93,93,.85);
  background: rgba(255,93,93,.28);
}
body.light .coursepill-span{
  background: rgba(122,162,255,.12);
  border: 1px solid rgba(122,162,255,.45);
}

/* Gray theme overrides */
body.gray .topbar{
  background: rgba(58,58,58,0.95);
  border-bottom-color: var(--border);
  color: var(--text);
}
body.gray .page-top{ background: var(--panel); }
body.gray .input, body.gray .select, body.gray .btn{
  background: var(--panel2);
  color: var(--text);
  border-color: var(--border);
}
body.gray .btn:hover{ border-color: rgba(122,162,255,.45); }
body.gray .card,
body.gray .saved .saved-item,
body.gray .sorted .row,
body.gray .coursepill,
body.gray .sidebar,
body.gray .rightbar,
body.gray .modal-card{
  background: var(--card-bg);
  border-color: var(--border);
  color: var(--text);
  box-shadow: var(--shadow);
}
body.gray .btn{
  background: var(--panel2);
  color: var(--text);
  border-color: var(--border);
}
body.gray .btn-primary{
  background: linear-gradient(180deg, rgba(122,162,255,.85), rgba(102,142,235,.85));
  border-color: rgba(64,112,205,.8);
  color: #fff;
}
body.gray .btn-warn{ background: rgba(255,176,32,.12); border-color: rgba(255,176,32,.5); }
body.gray .btn-sm{ height:32px; }
body.gray .saved .x{ background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); }
body.gray .tag{ background: var(--tag-bg); color: rgba(240,240,240,0.75); border-color: rgba(255,255,255,0.12); }
body.gray .tag.program-tag{ 
  background: rgba(122,162,255,.20); 
  border-color: rgba(122,162,255,.45); 
  color: #9bbeff;
  font-weight: 500;
}
body.gray .tag.eng-tag{ 
  background: rgba(255,93,93,.20); 
  border-color: rgba(255,93,93,.45); 
  color: #ff9999;
  font-weight: 500;
}
body.gray .input, body.gray .select{ background: var(--panel2); color: var(--text); border-color: var(--border); }
body.gray .slotcell-btn{ background: rgba(255,255,255,0.06); color: var(--text); border-color: var(--border); }
body.gray .slotcell-btn.active{ background: rgba(122,162,255,.25); border-color: rgba(122,162,255,.6); }
body.gray .slotcell.slot-selected{
  background: rgba(122,162,255,.15);
  outline: 2px solid rgba(122,162,255,0.4);
}
body.gray .card.added{
  border-color: rgba(122,162,255,0.6);
  background: rgba(122,162,255,0.15);
}
body.gray .saved .saved-item.active{
  border-color: rgba(122,162,255,0.6);
  background: rgba(122,162,255,0.15);
}
body.gray .modal-body{ color: var(--muted); }
body.gray .notice{ background: rgba(255,93,93,.12); border-color: rgba(255,93,93,.35); }
body.gray .notice-text{ color: rgba(255,255,255,.92); }
body.gray .table th{ background: rgba(255,255,255,.06); color: var(--muted); border-color: var(--border); }
body.gray .timecell{ background: rgba(255,255,255,.04); color: var(--muted); }
body.gray .slotcell{ background: transparent; }
body.gray .slotcell.has-conflict{
  outline: 2px solid rgba(255,93,93,.75);
  background: rgba(255,93,93,.20);
}
body.gray .coursepill{ background: rgba(70,70,70,.9); border-color: var(--border); color: var(--text); }
body.gray .coursepill.conflict{
  border-color: rgba(255,93,93,.75);
  background: rgba(255,93,93,.25);
}
body.gray .coursepill-span{
  background: rgba(122,162,255,.18);
  border: 1px solid rgba(122,162,255,.45);
}
body.light .modal-body{ color: var(--muted); }

/* Responsive design: Mobile view */

@media (max-width: 768px) {
  .topbar {
    height: auto;
    min-height: 54px;
    flex-wrap: nowrap;
    padding: 8px 10px;
    gap: 6px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
  }
  
  .topbar-left, .topbar-right {
    gap: 6px;
  }
  
  .site-title {
    font-size: 13px;
    display: none;
  }
  
  .term {
    gap: 4px;
  }
  
  .label {
    font-size: 11px;
  }
  
  .select {
    min-width: 80px;
    font-size: 13px;
  }
  
  .btn {
    font-size: 13px;
    padding: 6px 10px;
  }
  
  .app {
    padding: 10px;
    padding-top: 64px;
  }
  
  .page-top {
    padding: 10px;
    margin-bottom: 8px;
    position: fixed;
    top: 54px;
    left: 0;
    right: 0;
    z-index: 90;
    background: var(--panel);
  }
  
  .p2 {
    padding-top: 10px;
  }
  
  .search-row {
    margin-bottom: 8px;
    display: flex;
    gap: 8px;
    align-items: stretch;
  }
  
  .search-row .input {
    flex: 1;
  }
  
  /* Show filter toggle button */
  .filter-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  .filter-toggle-icon {
    font-size: 12px;
    transition: transform 0.2s ease;
  }
  
  /* Filter panel: collapsed by default */
  .filter-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.2s ease;
    margin-bottom: 0;
  }
  
  /* Expanded state */
  .filter-panel.expanded {
    max-height: 800px;
    opacity: 1;
    margin-bottom: 8px;
  }
  
  /* Vertical filter layout */
  .filter-row {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
  
  .filter-row .select,
  .filter-row .input,
  .filter-row .btn {
    width: 100%;
    min-width: unset;
  }
  
  .filter-row .spacer {
    display: none;
  }
  
  .filter-row > div {
    width: 100%;
  }
  
  /* Single column layout */
  .layout {
    grid-template-columns: 1fr;
    gap: 10px;
    height: auto;
    min-height: calc(100vh - 54px - 20px);
  }
  
  .layout.p2 {
    grid-template-columns: 1fr;
  }
  
  /* Rightbar moves below content on mobile */
  .rightbar {
    order: 2;
    max-height: 400px;
  }
  
  .content {
    order: 1;
  }
  
  /* Course cards */
  .cards {
    gap: 8px;
    padding-right: 0;
  }
  
  .card {
    padding: 10px;
    border-radius: 12px;
  }
  
  .card .title {
    font-size: 15px;
    line-height: 1.4;
  }
  
  .card .meta {
    gap: 6px;
    margin-bottom: 6px;
  }
  
  .tag {
    font-size: 11px;
    padding: 3px 7px;
  }
  
  .card .small {
    font-size: 11px;
  }
  
  .card .actions {
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
  }
  
  .card .actions .btn {
    flex: 1;
    min-width: calc(50% - 3px);
    font-size: 13px;
    height: 36px;
  }
  
  /* Saved courses list */
  .saved {
    max-height: 300px;
  }
  
  .saved-item {
    padding: 8px 10px;
  }
  
  .saved-item .name {
    font-size: 14px;
  }
  
  .saved-item .line {
    font-size: 11px;
  }
  
  /* 按鈕 */
  .btn {
    height: 40px;
    font-size: 14px;
    touch-action: manipulation;
  }
  
  .btn-sm {
    height: 36px;
    font-size: 13px;
  }
  
  /* 輸入框 */
  .input, .select {
    height: 40px;
    font-size: 14px;
  }
  
  /* 分頁器 */
  .pager {
    gap: 8px;
    margin-top: 10px;
  }
  
  .pager .btn {
    min-width: 80px;
  }
  
  /* Schedule table */
  .table {
    font-size: 11px;
  }
  
  .table th,
  .table td {
    padding: 6px 4px;
    min-width: 45px;
  }
  
  .timecell {
    font-size: 10px;
    min-width: 55px;
  }
  
  .coursepill {
    font-size: 10px;
    padding: 4px 6px;
    min-height: 30px;
  }
  
  /* Sorted list view */
  .sorted {
    padding: 8px;
  }
  
  .sorted-item {
    padding: 8px;
  }
  
  .sorted-item .name {
    font-size: 14px;
  }
  
  .sorted-item .line {
    font-size: 11px;
  }
  
  /* 模態框 */
  .modal {
    padding: 10px;
  }
  
  .modal-card {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 16px;
  }
  
  .modal-header {
    padding: 12px;
  }
  
  .modal-body {
    padding: 12px;
    font-size: 14px;
  }
  
  /* 衝突提示 */
  .notice {
    padding: 10px 12px;
    border-radius: 10px;
  }
  
  .notice-text {
    font-size: 13px;
  }
  
  /* 節次選擇器 */
  .slotcell-btn {
    min-width: 40px;
    height: 40px;
    font-size: 12px;
    border-radius: 8px;
  }
  
  /* P2 面板頭部 */
  .panel-head {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .credit {
    gap: 6px;
  }
  
  .credit-num {
    font-size: 18px;
  }
  
  /* 隱藏不必要元素 */
  .sidebar {
    display: none;
  }
  
  /* 在手机上隐藏右侧栏，使用悬浮面板代替 */
  .rightbar {
    display: none !important;
  }
  
  /* 显示悬浮按钮 */
  .float-toggle {
    display: flex;
  }
  
  /* 调整课表包裝器 */
  .schedule-wrap {
    padding-right: 0;
    -webkit-overflow-scrolling: touch;
  }
  
  /* 優化觸控體驗 */
  * {
    -webkit-tap-highlight-color: transparent;
  }
  
  button, .btn, .card, .saved-item, .list .item {
    -webkit-touch-callout: none;
    user-select: none;
  }
}

/* 小尺寸手機優化 (≤ 480px) */
@media (max-width: 480px) {
  .topbar {
    padding: 6px 8px;
  }
  
  .app {
    padding: 8px;
  }
  
  .page-top {
    padding: 8px;
  }
  
  .card {
    padding: 8px;
  }
  
  .card .title {
    font-size: 14px;
  }
  
  .tag {
    font-size: 10px;
    padding: 2px 6px;
  }
  
  .btn {
    height: 38px;
    font-size: 13px;
    padding: 0 10px;
  }
  
  .btn-sm {
    height: 34px;
    font-size: 12px;
    padding: 0 8px;
  }
  
  .input, .select {
    height: 38px;
    font-size: 13px;
    padding: 0 10px;
  }
  
  .table {
    font-size: 10px;
  }
  
  .table th,
  .table td {
    padding: 4px 2px;
    min-width: 40px;
  }
  
  .timecell {
    font-size: 9px;
    min-width: 50px;
  }
  
  .coursepill {
    font-size: 9px;
    padding: 3px 4px;
    min-height: 25px;
  }
  
  .slotcell-btn {
    min-width: 35px;
    height: 35px;
    font-size: 11px;
  }
}

/* 平板優化 (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .layout {
    grid-template-columns: 1fr 280px;
  }
  
  .rightbar {
    padding: 10px;
  }
  
  .select {
    min-width: 140px;
  }
}