/* ===== 颜色系统：一种颜色只有一个意思 =====
   绿 / 琥珀 / 红：只表示"来不来得及"（红色也用于出错、删除这类"有问题"的地方）
   深蓝：我的课；蓝：可以点的按钮、需要你做的事；灰：背景信息
   BU 红只用在网站名字上 */
:root {
  --ink: #1f2937;        /* 正文 */
  --muted: #6b7280;      /* 次要文字 */
  --line: #e5e7eb;       /* 分隔线、卡片边框 */
  --brand: #cc0000;      /* BU 红：只用在 logo */
  --mine: #1a1f71;       /* 我的课 */
  --action: #1558c0;     /* 按钮、需要你确认的东西 */
  --action-bg: #eef3fc;
  --ok: #1e8e3e;         /* 🟢 来得及 */
  --ok-bg: #e6f4ea;
  --tight: #e8a200;      /* 🟡 很紧 */
  --tight-bg: #fff4d6;
  --late: #c62828;       /* 🔴 来不及 / 出错 / 删除 */
  --late-bg: #fde8e8;
}

/* 让 html 和 body 占满整个浏览器窗口高度，
   否则 #map 的高度百分比会没有参照物，地图可能显示不出来 */
html, body {
  height: 100%;
  margin: 0;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: white; /* 写明白底色：浏览器开了深色模式时，页面也不会变成黑底黑字 */
}

/* 整个页面：上面是标题，下面是 main，main 占满剩余高度 */
body {
  display: flex;
  flex-direction: column;
}

/* 标题栏：白底，只有网站名字用 BU 红。大片红色会和 🔴"来不及"抢注意力 */
header {
  padding: 12px 16px;
  background: white;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

/* 第一行：名字在左，按钮在右 */
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

header h1 {
  margin: 0;
  font-size: 20px;
  color: var(--brand);
}

/* 右上角的 Feedback 按钮 */
.feedback-link {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  font-size: 13px;
  text-decoration: none;
}

.feedback-link:hover {
  background: #f3f4f6;
}

/* display 规则会盖过 hidden 属性，再写一次 */
.feedback-link[hidden] {
  display: none;
}

/* 名字下面的一句话：说明主要功能 */
header .tagline {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* main：左边 sidebar，右边地图，左右并排 */
main {
  flex: 1;
  display: flex;
  min-height: 0; /* 让子元素可以内部滚动，而不是撑破页面 */
}

#sidebar {
  width: 340px;
  padding: 16px;
  overflow-y: auto; /* 内容多了可以滚动 */
  /* 让侧边栏里"看不见的上传框"（.visually-hidden，绝对定位）跟着侧边栏走
     不写的话，它按整个页面来定位：课多的时候它跑到页面最下面，把页面撑高；
     点 "Choose the .ics file" 时浏览器要把它滚进视野，整页就被推上去，下面露出一大片白 */
  position: relative;
  border-right: 1px solid #ddd;
  box-sizing: border-box;
}

#sidebar h2 {
  font-size: 16px;
  margin: 0 0 8px;
}

#sidebar section {
  margin-bottom: 24px;
}

#dorm-info h3 {
  margin: 0 0 8px;
}

#dorm-info p {
  font-size: 14px;
  margin: 6px 0;
}

/* 图片宽度不超过侧边栏 */
#dorm-info img {
  width: 100%;
  border-radius: 6px;
}

/* 侧边栏里的所有标签、下拉框、输入框：各占一行 */
#sidebar label {
  display: block;
  font-size: 13px;
  color: #555;
  margin: 10px 0 4px;
}

#sidebar select,
#sidebar input {
  width: 100%;
  padding: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

#route-result {
  margin-top: 12px;
  padding: 10px;
  border-radius: 6px;
  font-size: 14px;
  background: #f5f5f5;
}

#route-result p {
  margin: 4px 0;
}

/* 算出了结果：白色卡片（Directions 不判断来不来得及，所以不用 🟢🟡🔴 的颜色） */
#route-result.route-done {
  background: white;
  border: 1px solid var(--line);
}

#route-result .route-minutes {
  margin: 0 0 2px;
  font-size: 22px;
  font-weight: bold;
  color: var(--ink);
}

#route-result .route-meta {
  color: var(--muted);
  font-size: 13px;
}

#route-result .route-ends {
  font-size: 13px;
}

/* 宿舍排名列表 */
#results {
  margin-top: 12px;
}

#results ol {
  padding-left: 20px;
  margin: 0;
}

#results li {
  font-size: 14px;
  margin-bottom: 10px;
}

/* 排名项：做成卡片，一眼看出可以点击 */
.rank-item {
  padding: 8px 10px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.rank-item:hover {
  border-color: var(--action);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.rank-detail {
  color: #555;
  font-size: 13px;
}

/* 搜索没找到时的提示；没有内容时不占位置 */
.search-message {
  color: #d93025;
  font-size: 13px;
  margin: 4px 0 8px;
}

.search-message:empty {
  display: none;
}

/* 侧边栏最下面的数据来源说明 */
#sources {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid #eee;
  font-size: 12px;
  color: #888;
  line-height: 1.5;
}

#sources a {
  color: #888;
}

/* ===== 我的课 ===== */
.hint {
  font-size: 13px;
  color: #666;
  margin: 4px 0 8px;
}

.hint:empty {
  display: none;
}

#schedule-paste {
  margin: 8px 0;
  font-size: 13px;
}

#schedule-paste summary {
  cursor: pointer;
  color: #555;
}

#schedule-text {
  width: 100%;
  box-sizing: border-box;
  margin: 6px 0;
  font-size: 13px;
}

.class-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}

/* 每门课一张卡片。左边的色条表示状态：黑 = 已确定，橙 = 需要确认，灰 = 跳过 */
.class-card {
  position: relative;
  font-size: 14px;
  padding: 8px 10px;
  margin-bottom: 8px;
  border: 1px solid #e2e2e2;
  border-left: 4px solid var(--mine);
  border-radius: 8px;
  list-style: none;
}

/* 需要你确认的课：蓝色 = "需要你做一件事"（琥珀色已经表示 🟡 很紧） */
.class-card.review,
.class-card.editing[data-mode="review"] {
  border-left-color: var(--action);
  background: var(--action-bg);
}

.class-card.skipped {
  border-left-color: #bbb;
  color: #888;
}

.class-card strong {
  display: block;
}

.card-note {
  font-size: 13px;
  color: #444;
  margin: 6px 0;
}

/* 状态标签 */
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  padding: 1px 6px;
  border-radius: 10px;
  margin-bottom: 4px;
}

.badge-schedule { background: #e8eefc; color: #1a3d8f; }
.badge-user     { background: #e6f4ea; color: #1e6b34; }
.badge-review   { background: #dbe6fb; color: #0f3f8c; }

/* 顶部的提示：有几门课需要确认 */
.review-banner {
  font-size: 13px;
  font-weight: bold;
  color: #0f3f8c;
  background: var(--action-bg);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 8px 0;
}

/* 提示条上的"再传一张截图"按钮 */
.banner-button {
  display: block;
  margin-top: 6px;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: bold;
  color: var(--action);
  background: white;
  border: 1px solid var(--action);
  border-radius: 6px;
  cursor: pointer;
}

.banner-hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: normal;
}

/* 展开的卡片里"针对这门课再传一张截图"：边框按钮，比确认按钮弱，比 Skip 强 */
.scan-one-button {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 6px;
  font-size: 13px;
  color: #1558c0;
  background: white;
  border: 1px solid #1558c0;
  border-radius: 6px;
  cursor: pointer;
}

.scan-message:empty {
  display: none;
}

/* 主要按钮（Review / Confirm）：实心、醒目 */
.primary-button {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  font-size: 14px;
  font-weight: bold;
  color: white;
  background: #1558c0;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}

.primary-button:disabled {
  background: #cfd6e0;
  color: #6b7280;
  cursor: not-allowed;
}

/* 次要操作（Skip / Cancel / Edit / Restore）：只是一行小字链接，不和主要按钮抢注意力 */
.link-button {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  color: #555;
  text-decoration: underline;
  cursor: pointer;
}

.edit-button {
  position: absolute;
  top: 8px;
  right: 10px;
}

.secondary-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}

/* 地点选项：每个选项一个可点的方框，写清楚是哪栋楼、地址、为什么推荐 */
/* 前面加 #sidebar：因为 "#sidebar label" 和 "#sidebar input" 带 id，优先级比单纯的 class 高，不加就会被它们覆盖 */
#sidebar .location-option {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px;
  margin: 6px 0;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  font-size: 13px;
}

#sidebar .location-option:has(input[type="radio"]:checked) {
  border-color: #1558c0;
  box-shadow: 0 0 0 1px #1558c0;
}

#sidebar .location-option input[type="radio"] {
  width: auto;
  margin-top: 3px;
  flex: none; /* 圆圈保持原本大小，不被拉宽 */
}

/* 右边的文字部分占满剩下的宽度（"Somewhere else" 的输入框也能撑满） */
#sidebar .location-option > span {
  flex: 1;
  min-width: 0;
}

#sidebar .location-option .other-location {
  margin-top: 6px;
}

.option-note {
  display: block;
  font-size: 12px;
  color: #666;
}

.skipped-list {
  margin-top: 8px;
  font-size: 13px;
}

.skipped-list summary {
  cursor: pointer;
  color: #555;
}

/* ===== 批量选择 ===== */
.select-toolbar {
  margin: 8px 0;
  font-size: 13px;
  text-align: right;
}

/* 批量选择时，工具条贴在侧边栏顶部，往下滚动也看得到 */
.select-toolbar.selecting {
  position: sticky;
  top: 0;
  z-index: 5;
  text-align: left;
  padding: 8px 10px;
  background: #eef3fc;
  border: 1px solid #c9d7f2;
  border-radius: 8px;
}

.select-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

.select-row strong {
  flex: 1;
}

#sidebar .select-row input {
  flex: 1;
  min-width: 0;
}

.small-button {
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid #1558c0;
  border-radius: 6px;
  background: white;
  color: #1558c0;
  cursor: pointer;
  white-space: nowrap;
}

.small-button:disabled {
  border-color: #ccc;
  color: #999;
  cursor: not-allowed;
}

/* 删除：红色，和普通按钮区分开；没选任何课时是灰的 */
.delete-button {
  width: 100%;
  padding: 7px;
  font-size: 13px;
  font-weight: bold;
  color: white;
  background: #c62828;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.delete-button:disabled {
  background: #e0b4b4;
  cursor: not-allowed;
}

/* 可以勾选的卡片：左边一个圈，选中后变成蓝色打勾 */
.class-card.selectable {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  border-left-color: #bbb;
}

.class-card.selectable.selected {
  background: #eef3fc;
  border-color: #1558c0;
}

.select-circle {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 2px solid #999;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: bold;
  color: white;
}

.selected .select-circle {
  background: #1558c0;
  border-color: #1558c0;
}

.select-body {
  flex: 1;
  min-width: 0;
}

/* 确认 / 跳过之后的提示条，带 Undo */
.toast {
  margin-top: 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: white;
  background: #333;
  border-radius: 6px;
}

.toast .link-button {
  color: #9cc8ff;
  margin-left: 6px;
}

/* 地图上"我的课"的标签："CAS · 3 classes"，颜色和列表里的卡片一致 */
.class-label {
  --label-bg: var(--mine);
  position: relative; /* 小尾巴（::before / ::after）以标签为准定位 */
  display: inline-block;
  background: var(--label-bg);
  transform: translate(-50%, calc(-100% - 10px)); /* 默认放在楼的正上方 */
  white-space: nowrap;
  padding: 3px 8px;
  border: 2px solid white;
  border-radius: 12px;
  color: white;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* 列表卡片里楼名前的小圆点，颜色和地图上"我的课"的标签一致 */
.color-dot {
  background: var(--mine);
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}

/* 和别的标签重叠时：缩成一个只写楼代码的小标签（比如 "CFA"），放大地图后会变回完整标签
   以前缩成没有字的小圆点，用户数不出有几栋楼，会以为少了一门课 */
.class-label .label-short {
  display: none;
}

.class-label.compact {
  padding: 1px 5px;
  font-size: 10px;
}

.class-label.compact .label-full {
  display: none;
}

.class-label.compact .label-short {
  display: inline;
}

.class-pin-wrapper {
  background: none;
  border: none;
}

.class-pin {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #222;
  color: white;
  border: 3px solid white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
}

/* 预览标记：空心、虚线、问号，表示"还没确认" */
.class-pin-preview {
  background: white;
  color: #1558c0;
  border: 3px dashed #1558c0;
}

.placeholder {
  color: #999;
  font-size: 14px;
}

/* 地图占据 main 剩下的全部宽度 */
#map {
  flex: 1;
  height: 100%;
}

/* 地图右下角的图例 */
.map-legend {
  background: white;
  padding: 8px 10px;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  font-size: 13px;
  line-height: 1.8;
}

.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}

.legend-title {
  font-weight: bold;
  margin-bottom: 2px;
  cursor: pointer;
}

/* 图例每一行：勾选框 + 圆点 + 文字，整行都可以点 */
.map-legend label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.map-legend input {
  margin: 0 2px 0 0;
}

/* ===== 手机布局：屏幕宽度 ≤ 768px 时，下面这些规则才生效 ===== */
@media (max-width: 768px) {
  header h1 {
    font-size: 16px;
  }

  header .tagline {
    font-size: 11px;
  }

  /* 手机上整个页面一起滚动：往上滑时，地图跟着移出屏幕，下面的内容占满整个屏幕，看得更清楚
     （电脑上还是左右并排、各自滚动）*/
  html, body {
    height: auto;
  }

  /* 左右并排 → 上下排列 */
  main {
    flex: none;
    flex-direction: column;
  }

  /* 地图放在最上面，占屏幕高度的 45%；往上滑就移出去 */
  #map {
    order: -1;
    flex: none;
    height: 45vh;
  }

  /* 侧边栏占满宽度，不再自己单独滚动，跟着整个页面滚 */
  #sidebar {
    width: 100%;
    flex: none;
    overflow: visible;
    border-right: none;
    border-top: 1px solid #ddd;
  }

  /* 标签栏贴在屏幕最上面：滑到哪里都能切换标签页
     （前面加 #sidebar：后面通用的 .tabs 规则写在这个 @media 之后，不加的话会被它的 top: -16px 盖掉） */
  #sidebar .tabs {
    top: 0;
  }
}

/* ===== 课存在这个浏览器里的说明 + 清空按钮 ===== */
.saved-note {
  margin: 12px 0 0;
  font-size: 12px;
  color: #666;
}

.saved-note .link-button {
  color: #c62828;
}

/* ===== 示例课表 ===== */
.sample-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
  font-size: 13px;
  color: #666;
}

/* display: flex 会盖过 hidden 属性，要再写一次"隐藏时不显示" */
.sample-row[hidden] {
  display: none;
}

.sample-banner {
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: #e8f1ff;
  color: #1a3d73;
  font-size: 13px;
}

.sample-banner .small-button {
  display: block;
  margin-top: 6px;
  white-space: normal;
  text-align: left;
}

/* ===== 课间步行分析（my-week.js） ===== */
#class-walks h3 {
  margin: 16px 0 4px;
  font-size: 15px;
}

.walk-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}

/* 每一行一段步行；左边色条和背景色和 Directions 的结果用同一套颜色 */
.walk-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  padding: 8px 10px;
  margin-bottom: 8px;
  border: 1px solid #e2e2e2;
  border-left: 4px solid var(--ok);
  border-radius: 8px;
  background: var(--ok-bg);
}

.walk-row.walk-yellow { border-left-color: var(--tight); background: var(--tight-bg); }
.walk-row.walk-red    { border-left-color: var(--late); background: var(--late-bg); }
.walk-row.walk-clash  { border-left-color: #6a1b9a; background: #f3e8fa; }
.walk-row.walk-long   { border-left-color: #bbb;    background: #fafafa; }

.walk-when {
  font-size: 12px;
  color: #555;
}

.walk-where {
  font-weight: normal;
  color: #666;
}

.walk-detail {
  color: #333;
}

.walk-long {
  margin-top: 4px;
  font-size: 13px;
}

.walk-long summary {
  cursor: pointer;
  color: #555;
}

.walk-unchecked {
  margin-top: 8px;
}

/* 能点的那几行是 button：去掉按钮自带的样式，看起来和卡片一样 */
button.walk-row {
  width: 100%;
  font: inherit;
  font-size: 13px;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

button.walk-row:hover,
button.walk-row:focus-visible {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.walk-list li {
  list-style: none;
}

.walk-show {
  align-self: flex-end;
  font-size: 12px;
  color: #1a1f71;
}

/* ===== 三个标签页（tabs.js） ===== */
/* 标签栏固定在侧边栏顶部：往下滚动时也一直看得到、点得到 */
.tabs {
  position: sticky;
  top: -16px;            /* 抵消 #sidebar 的 padding，贴住顶部 */
  z-index: 5;
  display: flex;
  margin: -16px -16px 16px;
  padding: 0 8px;
  background: white;
  border-bottom: 1px solid var(--line);
}

.tabs button {
  flex: 1;
  padding: 12px 4px 10px;
  border: none;
  border-bottom: 3px solid transparent;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
}

.tabs button:hover {
  color: var(--ink);
}

/* 选中的标签：深色字 + 下面一条线 */
.tabs button[aria-selected="true"] {
  color: var(--ink);
  font-weight: bold;
  border-bottom-color: var(--ink);
}

/* ===== My week：我的课，一门课一行 ===== */
.list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 8px;
  margin-top: 20px;
}

.list-head h3 {
  margin: 0;
  font-size: 15px;
}

.list-head .count {
  font-weight: normal;
  color: var(--muted);
}

.list-head .select-toolbar {
  margin: 0;
}

/* 批量选择时工具条有好几行，换到标题下面占满一整行 */
.list-head .select-toolbar.selecting {
  flex-basis: 100%;
}

.class-row {
  list-style: none;
  border-bottom: 1px solid var(--line);
}

.class-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 2px;
  border: none;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.class-row-head:hover {
  background: #f8fafc;
}

/* 课名占剩下的空间，太长就省略，不换行 */
.class-row-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.class-row-where {
  font-size: 12px;
  font-weight: bold;
  color: var(--mine);
}

.class-row-when {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.class-row-head .color-dot {
  margin-right: 0;
  flex: none;
}

/* 展开后的详情 */
.class-row-detail {
  position: relative;
  padding: 0 2px 10px 17px;
  font-size: 13px;
}

.class-row.expanded .class-row-head {
  padding-bottom: 4px;
}

/* ===== My week：添加课表（有课以后收起来） ===== */
#add-schedule {
  margin-top: 20px;
}

#add-schedule > summary {
  cursor: pointer;
  font-weight: bold;
  font-size: 15px;
  padding: 6px 0;
}

/* 已经有课时，"+ Add more classes" 看起来像一个链接按钮 */
#add-schedule:not([open]) > summary {
  color: var(--action);
  font-size: 14px;
  list-style: none;
}

#add-schedule:not([open]) > summary::-webkit-details-marker {
  display: none;
}

/* ===== My week：课间步行的一行总结 ===== */
.walk-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0;
}

.summary-item {
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: bold;
}

.summary-red    { background: var(--late-bg); color: var(--late); }
.summary-yellow { background: var(--tight-bg); color: #8a5a00; }
.summary-green  { background: var(--ok-bg); color: var(--ok); }
.summary-clash  { background: #f3e8fa; color: #6a1b9a; }

/* 点过的那一行：加一圈深色边，表示"地图上画的是这一段" */
button.walk-row.selected {
  box-shadow: 0 0 0 2px var(--ink);
}

/* 展开的一行里，Edit 放在详情下面（不像卡片那样浮在右上角，否则会盖住文字） */
.class-row-detail .edit-button {
  position: static;
  display: block;
  margin-top: 6px;
}

/* "4 of 5 on the map · 1 needs your check"：紧贴在标题下面 */
.list-sub {
  margin: 2px 0 6px;
}

/* 列表里点开的那门课：地图上的标签放大一点，加一圈深色边 */
.class-label.selected {
  font-size: 13px;
  padding: 4px 10px;
  box-shadow: 0 0 0 3px var(--ink), 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* 标签放在楼的哪一边（map.js 的 layoutClassLabels 选不挡东西的那一边）
   标记的位置是楼那一边的中点，标签从那里往外伸，留 4px 空隙，不压在楼上 */
.class-label.pos-above { transform: translate(-50%, calc(-100% - 10px)); }
.class-label.pos-below { transform: translate(-50%, 10px); }
.class-label.pos-right { transform: translate(10px, -50%); }
.class-label.pos-left  { transform: translate(calc(-100% - 10px), -50%); }

/* 小尾巴：像对话框一样指向它说的那栋楼（标签和楼之间留了 10px，正好放下尾巴）
   ::before 是白色的外圈（和标签的白边连在一起），::after 是和标签同色的里面 */
.class-label::before,
.class-label::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: solid transparent;
}

/* 标签在楼的上方：尾巴在标签下边，朝下 */
.class-label.pos-above::before,
.class-label.pos-above::after { left: 50%; transform: translateX(-50%); }
.class-label.pos-above::before { top: 100%; border-width: 9px 8px 0; border-top-color: white; }
.class-label.pos-above::after  { top: calc(100% - 2px); border-width: 7px 6px 0; border-top-color: var(--label-bg); }

/* 标签在楼的下方：尾巴在标签上边，朝上 */
.class-label.pos-below::before,
.class-label.pos-below::after { left: 50%; transform: translateX(-50%); }
.class-label.pos-below::before { bottom: 100%; border-width: 0 8px 9px; border-bottom-color: white; }
.class-label.pos-below::after  { bottom: calc(100% - 2px); border-width: 0 6px 7px; border-bottom-color: var(--label-bg); }

/* 标签在楼的右边：尾巴在标签左边，朝左 */
.class-label.pos-right::before,
.class-label.pos-right::after { top: 50%; transform: translateY(-50%); }
.class-label.pos-right::before { right: 100%; border-width: 8px 9px 8px 0; border-right-color: white; }
.class-label.pos-right::after  { right: calc(100% - 2px); border-width: 6px 7px 6px 0; border-right-color: var(--label-bg); }

/* 标签在楼的左边：尾巴在标签右边，朝右 */
.class-label.pos-left::before,
.class-label.pos-left::after { top: 50%; transform: translateY(-50%); }
.class-label.pos-left::before { left: 100%; border-width: 8px 0 8px 9px; border-left-color: white; }
.class-label.pos-left::after  { left: calc(100% - 2px); border-width: 6px 0 6px 7px; border-left-color: var(--label-bg); }

/* ===== 多份课表的切换栏（schedules.js） ===== */
.schedule-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.schedule-chip {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: white;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}

/* 正在看的那一份：深色底 */
.schedule-chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: white;
  font-weight: bold;
}

.schedule-chip.schedule-new {
  border-style: dashed;
  color: var(--action);
}

/* 改名 / 删除 */
.schedule-menu {
  margin: -4px 0 12px;
  padding: 10px;
  border-radius: 8px;
  background: #f8fafc;
  font-size: 13px;
}

.schedule-menu-row {
  display: flex;
  gap: 6px;
  margin: 4px 0 8px;
}

#sidebar .schedule-menu-row input {
  flex: 1;
  width: auto;
}

.schedule-delete {
  color: var(--late);
}

/* ===== 路线的起点、终点（map.js 的 markRouteEnds） ===== */
/* 标签前面的 FROM / TO 小标记：平时不显示 */
.class-label .label-role {
  display: none;
}

.class-label.route-end .label-role {
  display: inline-block;
  margin-right: 5px;
  padding: 0 5px;
  border-radius: 8px;
  background: white;
  color: var(--mine);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* 起点、终点的标签：加一圈深色边，和"点开的课"一样醒目 */
.class-label.route-end {
  box-shadow: 0 0 0 3px var(--ink), 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* 和这条路线无关的"我的课"标签：变淡，不抢注意力（鼠标移上去恢复） */
.class-label.route-other {
  opacity: 0.45;
}

.class-label.route-other:hover {
  opacity: 1;
}

/* ===== 导入时：加进当前这份，还是另存一份（my-classes.js 的 renderImportChoice） ===== */
.import-choice {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid var(--action);
  border-radius: 8px;
  background: var(--action-bg);
  font-size: 13px;
}

#sidebar .import-choice #import-name {
  display: block;
  margin-top: 6px;
}

.import-hint {
  margin: 6px 0;
}

.import-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.import-actions .primary-button {
  width: auto;
  padding: 6px 18px;
}

/* 批量选择里的"Move to [课表] [Move]"：一行放下（#sidebar label / select 默认是整行宽，这里改回来） */
#sidebar .select-row .move-label {
  display: inline;
  margin: 0;
  font-size: 13px;
  white-space: nowrap;
}

#sidebar .select-row select {
  flex: 1;
  width: auto;
  min-width: 0;
}

/* ===== 对比几份课表（compare.js） ===== */
.compare-toggle {
  align-self: center;
  margin-left: auto; /* 放在切换栏的最右边 */
  font-size: 13px;
}

.compare-box {
  margin: 0 0 16px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

/* 课表多了（超过 3 份）放不下时，表格可以左右滑动 */
.compare-scroll {
  overflow-x: auto;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.compare-table th,
.compare-table td {
  padding: 5px 6px;
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}

.compare-table tbody th {
  text-align: left;
  font-weight: normal;
  color: var(--muted);
}

/* 表头：课表名字，点了切换过去；当前这一份加下划线 */
.compare-name {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: bold;
  color: var(--action);
  cursor: pointer;
}

.compare-name.current {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 每一行最好的那一格：加粗 + 深蓝色的 "best"（不用绿色：绿色只表示"来得及"） */
.compare-table td.best {
  font-weight: bold;
  color: var(--mine);
}

.best-tag {
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 6px;
  background: var(--mine);
  color: white;
  font-size: 10px;
  font-weight: bold;
  vertical-align: 1px;
}

.compare-note {
  margin: 8px 0 4px;
}

/* 在地图上点了一栋楼：列表里在这栋楼上的课（my-classes.js 的 showClassesAt） */
.class-row.map-picked {
  background: var(--action-bg);
  box-shadow: inset 4px 0 0 var(--mine);
}

/* 同一栋楼时楼下面的说明："Same building · no walk needed"（map.js 的 showRouteEnds）
   白底深蓝字，和课程标签区分开：一看就知道是说明，不是一栋楼的名字 */
.class-label.route-note {
  --label-bg: white;
  color: var(--mine);
  border-color: var(--mine);
}

/* 尾巴的外圈也用深蓝色，和边框连在一起 */
.class-label.route-note.pos-below::before {
  border-bottom-color: var(--mine);
}

/* ===== 添加课表：主推 .ics（三步） ===== */

/* 屏幕上看不见，但读屏软件、键盘还能用（真正的上传框、按钮的文字说明） */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 唯一的上传入口：一个大的虚线框，点了打开上传框，电脑上也可以把文件拖进来 */
#sidebar label.upload-drop {
  display: block;
  margin: 8px 0 6px;
  padding: 16px 12px;
  border: 2px dashed var(--action);
  border-radius: 10px;
  background: var(--action-bg);
  text-align: center;
  cursor: pointer;
}

#sidebar label.upload-drop:hover,
#sidebar label.upload-drop.dragging {
  border-style: solid;
  background: #dce8fb;
}

.upload-title {
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: var(--action);
}

.upload-sub {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: normal;
  color: var(--ink);
}

/* "or drop them here"：手机上不能拖文件，不显示 */
@media (hover: none) {
  .drop-only {
    display: none;
  }
}

/* 用键盘 Tab 到藏起来的上传框时，大按钮显示焦点框 */
#schedule-file:focus-visible + .upload-drop {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* 怎么拿到 .ics：平时收起来 */
.ics-help {
  margin: 0 0 4px;
  font-size: 13px;
}

.ics-help summary {
  color: var(--action);
  cursor: pointer;
}

.ics-steps {
  margin: 6px 0 0;
  padding-left: 20px;
  line-height: 1.6;
}

.ics-steps li {
  margin-bottom: 4px;
}

/* 第 2 步里画一个和学校网站上长得差不多的按钮，用户到了学生系统一眼认得出要点哪个 */
.bu-button {
  display: inline-block;
  padding: 0 8px;
  border: 1px solid #9aa3ad;
  border-radius: 4px;
  background: white;
  color: #333;
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
}

.upload-privacy {
  margin-top: 4px;
}

/* 侧边栏里的 "#sidebar input"（带 id，优先级高）会把宽度改成 100%，这里再写一次，保证真的藏起来 */
#sidebar .visually-hidden {
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

/* 没开 JavaScript 时的说明 */
.noscript {
  margin: 0;
  padding: 12px 16px;
  background: var(--tight-bg);
  font-size: 14px;
}

/* ===== 对比表下面：几份课表里相同的课（compare.js 的 renderCommonClasses） ===== */
.compare-common h4 {
  margin: 12px 0 4px;
  font-size: 13px;
}

.common-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
}

.common-list li {
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.common-code {
  color: var(--muted);
  font-size: 12px;
}

.common-in,
.common-same,
.common-diff {
  display: block;
}

.common-in {
  color: var(--muted);
}

/* 同一个时段（一起上课）：深蓝色，和"我的课"同色；不用绿色（绿色只表示"来得及"） */
.common-same {
  color: var(--mine);
  font-weight: bold;
}

.common-diff {
  color: var(--muted);
}

/* ===== 切换栏下面的两个工具：Compare plans / Shared classes（schedules.js） ===== */
.schedule-tools {
  display: flex;
  gap: 8px;
  margin: -4px 0 12px;
}

.tool-button {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  font: inherit;
  font-size: 13px;
  color: var(--action);
  cursor: pointer;
}

/* 打开着的那一个：深色边 */
.tool-button[aria-expanded="true"] {
  border-color: var(--ink);
  color: var(--ink);
  font-weight: bold;
}

/* Shared classes：选"我"和"和谁比" */
.shared-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
}

#sidebar .shared-row label,
.shared-with-label {
  display: inline;
  margin: 0;
  min-width: 34px;
  font-size: 13px;
  font-weight: bold;
  color: var(--ink);
}

#sidebar .shared-row select {
  flex: 1;
  width: auto;
  min-width: 0;
}

.shared-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.shared-summary {
  margin: 4px 0;
  font-size: 13px;
  font-weight: bold;
}

/* ===== 按星期看（my-week.js renderDayPicker / renderDayPlan） ===== */
/* 一排连在一起的按钮：All week | Mon | Tue …；选中的那个是"我的课"的深蓝色 */
.day-picker {
  display: flex;
  margin: 8px 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.day-button {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 4px;
  border: none;
  border-left: 1px solid var(--line);
  background: white;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}

.day-button:first-child {
  flex: 1.6 1 auto; /* "All week" 字多，宽一点 */
  border-left: none;
}

.day-button:hover {
  background: #f3f4f6;
}

/* 那天没课：灰色，但还能点 */
.day-button.day-empty {
  color: #b0b4bb;
}

.day-button[aria-pressed="true"] {
  background: var(--mine);
  color: white;
  font-weight: bold;
}

.day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.day-head h4 {
  margin: 4px 0;
  font-size: 15px;
}

/* 时间线：课一行，路一行，交替排列 */
.day-plan {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}

.day-class {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  font-size: 14px;
}

.day-stop {
  flex: none;
  width: 16px;
  color: var(--mine);
  font-size: 17px;
  line-height: 1.2;
}

.day-time {
  display: block;
  font-size: 12px;
  color: var(--muted);
}

/* 路那一行往右缩进，看起来是"两节课中间" */
.day-walk {
  margin-left: 24px;
}

.day-walk .walk-row {
  margin-bottom: 0;
  padding: 6px 10px;
}

/* "← Back to all week"：蓝色，一看就知道能点回去 */
.day-head .link-button {
  color: var(--action);
  text-decoration: none;
}

/* ===== Directions：交换、常去的地方、返回（app.js / my-week.js） ===== */
.swap-row {
  display: flex;
  justify-content: flex-end;
  margin: 4px 0 -8px;
}

.swap-button {
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  font: inherit;
  font-size: 12px;
  color: var(--action);
  cursor: pointer;
}

.swap-button:hover {
  background: var(--action-bg);
}

.route-picks {
  margin-top: 6px;
}

.pick-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.pick-label {
  width: 56px;
  font-size: 12px;
  color: var(--muted);
}

/* 和 Shared classes 的人名按钮同一种样子 */
.pick-chip {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}

.pick-chip:hover {
  border-color: var(--action);
  color: var(--action);
}

.route-back {
  display: block;
  margin-top: 12px;
  color: var(--action);
  text-decoration: none;
}

/* "Directions ›"：次要操作，小号蓝字、没有边框，不和 "Show route on map" 抢注意力 */
.directions-button {
  flex: none;
  margin-left: auto;
  min-height: 32px;   /* 手机上手指容易点到 */
  padding: 0 2px;
  border: none;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--action);
  cursor: pointer;
  white-space: nowrap;
}

.directions-button:hover {
  text-decoration: underline;
}

/* My classes 里点开一门课：放在详情的最下面 */
.class-row-detail .directions-button {
  display: block;
  margin: 4px 0 0;
  padding: 0;
}

/* 时间线里那一行：按钮和课名对齐，不撑高这一行 */
.day-class .directions-button {
  align-self: center;
}

/* ===== 从我现在的位置出发 + 交给导航软件（app.js） ===== */
.location-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 6px;
}

.location-button {
  color: var(--action);
}

.location-button:disabled {
  color: var(--muted);
  cursor: default;
}

.location-note {
  font-size: 12px;
  color: var(--muted);
}

/* 结果卡片最下面：Open in Google Maps › / Open in Apple Maps › */
.route-open {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.route-open a {
  color: var(--action);
  text-decoration: none;
  font-weight: bold;
}

.route-open a:hover {
  text-decoration: underline;
}

/* My week 里点了一段路：下面展开 "Open in Google Maps ›"，和按钮接成一张卡片（my-week.js showOpenInMaps） */
li.walk-expanded {
  margin-bottom: 8px;
  border-radius: 8px;
  box-shadow: 0 0 0 2px var(--ink);
}

li.walk-expanded button.walk-row.selected {
  margin-bottom: 0;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  box-shadow: none;
}

.walk-open {
  margin-bottom: 0;
  padding-top: 0;
  border-top: none;
  border-radius: 0 0 8px 8px;
}

/* 分隔线在这里画（和 Directions 卡片一样：一条细线 + 两个蓝色链接） */
.walk-open .route-open {
  margin: 0;
  border-top-color: rgba(0, 0, 0, 0.12); /* 卡片有底色（红 / 黄 / 绿），浅灰线看不清，用半透明黑 */
}

/* ===== 把课表传到另一台设备（share.js） ===== */
.share-row {
  margin: 4px 0 0;
}

.share-button {
  color: var(--action);
  text-decoration: none;
}

#share-panel {
  margin-top: 10px;
}

.share-box {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.share-qr {
  width: 200px;
  max-width: 100%;
  margin: 10px 0 4px;
}

.share-qr svg {
  display: block;
  width: 100%;
  height: auto;
}

.share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

.share-copied {
  color: var(--ok);
  word-break: break-all;  /* 不能自动复制时会显示整条链接 */
}

.share-warning {
  margin-top: 8px;
}

/* ===== 课间规划（gap-planner.js） ===== */
/* 设计：结论放最上面一句话；下面像行程单（左边时间、右边地方），一条细竖线连起来，没有框里套框；
   不常用的操作（停留时间、换位置、删除）点了地方才出现 */
.plan-break-row {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.plan-break-button {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: bold;
  color: var(--action);
  cursor: pointer;
}

.break-planner {
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  font-size: 13px;
}

.bp-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bp-title {
  font-size: 12px;
  color: var(--muted);
}

.bp-close {
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: none;
  background: none;
  font-size: 16px;
  color: var(--muted);
  cursor: pointer;
}

/* 最重要的一句：能不能准时到 */
.bp-headline {
  margin: 2px 0 2px;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.35;
}

.bp-headline.bp-green  { color: var(--ok); }
.bp-headline.bp-yellow { color: #8a6100; }
.bp-headline.bp-red    { color: var(--late); }

.bp-sub {
  margin: 0 0 8px;
  color: var(--ink);
}

.bp-best {
  margin: 0 0 8px;
  color: var(--muted);
}

/* 行程单：左边一列时间，右边内容；时间列右边一条细竖线把整段课间连起来 */
.bp-steps {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.bp-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: start;
}

.bp-time {
  padding: 6px 10px 6px 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}

.bp-what {
  min-width: 0;
  padding: 5px 0 5px 12px;
  border-left: 2px solid var(--line);
}

.bp-leg .bp-what {
  padding-top: 1px;
  padding-bottom: 1px;
  font-size: 12px;
  color: var(--muted);
}

.bp-class .bp-what {
  color: var(--ink);
}

/* 一个地方：整行可以点，点了展开编辑区 */
.bp-stop-toggle {
  display: flex;
  align-items: baseline;
  gap: 6px;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.bp-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.bp-stay-summary {
  flex: none;
  font-size: 12px;
  color: var(--action);
  white-space: nowrap;
}

.bp-late {
  color: var(--late);
  font-weight: bold;
}

.bp-address {
  margin-top: 1px;
  font-size: 12px;
  color: var(--muted);
}

.bp-open .bp-what {
  border-left-color: var(--mine);
}

.bp-edit {
  margin-top: 8px;
}

.bp-stepper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.bp-edit-label {
  color: var(--muted);
}

.bp-step {
  width: 32px;
  height: 32px;   /* 手机上手指容易点到 */
  border: 1px solid var(--line);
  border-radius: 50%;
  background: white;
  font-size: 16px;
  line-height: 1;
  color: var(--action);
  cursor: pointer;
}

.bp-step-value {
  min-width: 52px;
  font-weight: bold;
  text-align: center;
}

.bp-edit-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 6px;
}

.bp-edit-links .link-button {
  color: var(--action);
  text-decoration: none;
}

.bp-edit-links .bp-remove {
  color: var(--late);
}

/* "＋ Add a stop"：平时只有一行，点了才展开 */
.bp-add-toggle {
  margin-top: 10px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: bold;
  color: var(--action);
  cursor: pointer;
}

.bp-add {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.bp-add input {
  flex: 1;
  min-width: 0;
}

.bp-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

/* 地图上课间规划的每一站：深蓝圆圈 + 白色数字 */
.stop-pin {
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border: 2px solid white;
  border-radius: 50%;
  background: var(--mine);
  color: white;
  font-size: 15px;
  line-height: 22px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* 一个地方的那一行：左边可以点开，右边一个安静的 ✕ */
.bp-stop-line {
  display: flex;
  align-items: center;
  gap: 2px;
}

.bp-stop-line .bp-stop-toggle {
  flex: 1;
  min-width: 0;
}

/* 删除：灰色、没有边框，但点击区域够大（32px），不和名字抢注意力 */
.bp-remove-x {
  flex: none;
  width: 32px;
  height: 32px;
  margin: -6px -8px -6px 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  font-size: 14px;
  color: #9ca3af;
  cursor: pointer;
}

.bp-remove-x:hover,
.bp-remove-x:focus-visible {
  background: var(--late-bg);
  color: var(--late);
}

/* 名字在上、停留时间在下：名字可以换行，手机上不会被截成 "Marciano…" */
.bp-name-block {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.bp-name-block .bp-name {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}

.bp-name-block .bp-stay-summary {
  margin-top: 1px;
}

.bp-stop-line {
  align-items: flex-start;
}

/* ===== 加到主屏幕、没网（pwa.js） ===== */
/* 右上角的 "📲 Get the app"：实心蓝色（这个网站里蓝色 = 可以点的操作），比旁边的 Feedback 更显眼 */
.install-cta {
  padding: 5px 12px;
  border: none;
  border-radius: 14px;
  background: var(--action);
  font: inherit;
  font-size: 13px;
  font-weight: bold;
  color: white;
  white-space: nowrap;
  cursor: pointer;
}

.install-cta:hover {
  filter: brightness(1.1);
}

.install-cta[hidden] {
  display: none;
}

/* 点了以后：标题下面出现一张小卡片，一步一步教怎么加 */
.install-sheet {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--action-bg);
  font-size: 14px;
}

.install-sheet[hidden] {
  display: none;
}

.install-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.install-sheet-close {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.install-steps {
  margin: 6px 0;
  padding-left: 22px;
  line-height: 1.8;
}

/* 说明里画的 iPhone 分享按钮 */
.share-glyph {
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  color: var(--action);
}

/* 没网时最上面一条：中性的灰色（🟢🟡🔴 只用来表示"来不来得及"，这里不能用黄色） */
.offline-banner {
  position: sticky;
  top: 0;
  z-index: 2000;
  padding: 8px 16px;
  background: #f3f4f6;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink);
}

/* ===== 截图没认出课时的提示（my-classes.js showOcrTip） ===== */
/* 和"需要你确认"同一种浅蓝色：这是一个可以马上做的下一步，不是错误 */
.ocr-tip {
  margin: 8px 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--action);
  border-radius: 8px;
  background: var(--action-bg);
  font-size: 14px;
}

.ocr-tip[hidden] {
  display: none;
}

.ocr-tip-title {
  margin: 0 0 4px;
  font-weight: bold;
}

.ocr-tip-lead {
  margin: 0 0 6px;
}

.ocr-tip-steps {
  margin: 0 0 10px;
  padding-left: 22px;
  line-height: 1.7;
}

.ocr-tip-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

/* 第二个办法：交给 AI 读。和上面的步骤用一条线隔开 */
.ocr-tip-ai {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}