/* ==========================================================================
   极简课表 · 设计系统
   规范：浅色为主 + 暗色；背景 #F7F8FA / 卡片 #FFF / 主色 #4A90E2
        文字 #1F2329 / 次要 #8A9099 / 分割线 #EEF0F3
        圆角 12–16px，轻阴影，苹方 / SF Pro / Inter
   基准：375×812（iPhone X），根字号 16px = 1rem，全部尺寸用 rem
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计 token
   -------------------------------------------------------------------------- */
:root {
  /* 中性色 */
  --bg: #F7F8FA;
  --bg-elev: #FFFFFF;
  --card: #FFFFFF;
  --text: #1F2329;
  --text-2: #8A9099;
  --text-3: #B4B9C0;
  --line: #EEF0F3;
  --line-strong: #E3E6EA;
  --fill: #F2F4F7;
  --fill-2: #E9ECF1;

  /* 主色 */
  --primary: #4A90E2;
  --primary-weak: #EAF2FC;
  --primary-strong: #3A7BCC;
  --primary-on: #FFFFFF;

  /* 功能色（低饱和，不刺眼） */
  --danger: #E2776F;
  --danger-weak: #FCEEEC;
  --success: #63B37C;
  --warn: #E0A75C;
  --warn-weak: #FDF4E7;

  /* 课程卡默认（会被色板覆盖）；--c-* 供 JS 内联注入 */
  --course-bg: #E9F0FB;
  --course-line: #9DBBEA;
  --course-text: #3F649F;

  /* 圆角 */
  --r-sm: 0.5rem;      /*  8px */
  --r-md: 0.75rem;     /* 12px */
  --r-lg: 1rem;        /* 16px */
  --r-xl: 1.25rem;     /* 20px */
  --r-full: 999px;

  /* 轻阴影（规范明确不要重阴影） */
  --sh-1: 0 1px 2px rgba(31, 35, 41, .04);
  --sh-2: 0 2px 8px rgba(31, 35, 41, .06);
  --sh-3: 0 6px 24px rgba(31, 35, 41, .10);

  /* 间距 */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;

  /* 结构尺寸 */
  --tabbar-h: 3.25rem;      /* 52px 底部 Tab */
  --header-h: 3.5rem;       /* 56px 顶栏 */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* 网格：把宽度尽量留给课程卡（375px 屏上 7 列）
     14px 页边 + 36px 时间列 → 每列约 45px，是"能读"的下限 */
  --grid-time-w: 2.125rem;  /* 34px 节次列 */
  --grid-row-h: 3.75rem;    /* 每节课高度 */
  --grid-gap: 2px;
  /* ★ 日期条与网格必须共用这一个左右内边距：宽度/列模板/gap/内边距四项全同源，
     日期才能与课表列一一对应。窄屏媒体查询只改这个变量，不要单独去改 .grid 或 .dates。 */
  --grid-pad: 0.5rem;

  /* 动效：只动 transform / opacity；受 reduced-motion 保护 */
  --dur-fast: 120ms;
  --dur: 200ms;
  --ease: cubic-bezier(.32, .72, .35, 1);

  /* 字体 */
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "SF Pro Text",
          "Helvetica Neue", "Microsoft YaHei", Inter, system-ui, sans-serif;
  --font-num: "SF Pro Display", -apple-system, Inter, "PingFang SC", sans-serif;
}

/* --------------------------------------------------------------------------
   2. 暗色模式
   优先跟随 data-theme，其次跟随系统；两者一致时不会闪烁（JS 在首帧前写入）
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --bg: #14161A;
  --bg-elev: #1C1F24;
  --card: #1C1F24;
  --text: #E8EAED;
  --text-2: #9AA1AA;
  --text-3: #6B727B;
  --line: #262A31;
  --line-strong: #303540;
  --fill: #23272E;
  --fill-2: #2B3038;

  --primary: #6BA6EA;
  --primary-weak: #1E2A3A;
  --primary-strong: #84B6EF;
  --primary-on: #10141A;

  --danger: #E08B84;
  --danger-weak: #33231F;
  --success: #74BE8B;
  --warn: #DDB072;
  --warn-weak: #2E2718;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .30);
  --sh-2: 0 2px 8px rgba(0, 0, 0, .36);
  --sh-3: 0 8px 28px rgba(0, 0, 0, .48);
}

/* --------------------------------------------------------------------------
   3. 课程配色板（6 套，低饱和马卡龙）
   亮色：浅底 + 中饱和色条 + 深字
   暗色：深底（同色相压暗）+ 亮色条 + 浅字，保证暗色下同样清爽
   -------------------------------------------------------------------------- */
:root[data-palette="macaron"] {
  --c1-bg: #FDECEC; --c1-line: #F2A6A6; --c1-text: #A85454;
  --c2-bg: #FDF0E4; --c2-line: #F0BE8E; --c2-text: #A9743A;
  --c3-bg: #EAF4E8; --c3-line: #A3CFA0; --c3-text: #4F8548;
  --c4-bg: #E4F3F1; --c4-line: #8FCBC5; --c4-text: #3D807A;
  --c5-bg: #E9F0FB; --c5-line: #9DBBEA; --c5-text: #3F649F;
  --c6-bg: #F1ECFA; --c6-line: #B7A5E4; --c6-text: #68558F;
}
:root[data-theme="dark"][data-palette="macaron"] {
  --c1-bg: #33232A; --c1-line: #B4707A; --c1-text: #EBB9C0;
  --c2-bg: #33291F; --c2-line: #B98A5C; --c2-text: #EBC69C;
  --c3-bg: #223026; --c3-line: #6FA478; --c3-text: #A9D8B5;
  --c4-bg: #1F2F2E; --c4-line: #63A29C; --c4-text: #9FD6D1;
  --c5-bg: #1F2A3A; --c5-line: #6E9BD4; --c5-text: #A9C8EE;
  --c6-bg: #2A2438; --c6-line: #9280C6; --c6-text: #C6B6EA;
}

:root[data-palette="morandi"] {
  --c1-bg: #F2EBE8; --c1-line: #C9AFA6; --c1-text: #8A6A5E;
  --c2-bg: #EFEDE4; --c2-line: #C2BBA3; --c2-text: #7E7658;
  --c3-bg: #E8EFEA; --c3-line: #A9C0B0; --c3-text: #5A7A66;
  --c4-bg: #E7EEF0; --c4-line: #A2BDC4; --c4-text: #567880;
  --c5-bg: #EBECF1; --c5-line: #A9AFC4; --c5-text: #5E6480;
  --c6-bg: #F0EAF0; --c6-line: #BCA9C4; --c6-text: #755E7F;
}
:root[data-theme="dark"][data-palette="morandi"] {
  --c1-bg: #302724; --c1-line: #A88C82; --c1-text: #DCC0B6;
  --c2-bg: #2E2C25; --c2-line: #A19A81; --c2-text: #D6CFB4;
  --c3-bg: #252E28; --c3-line: #7FA08C; --c3-text: #B4D3BF;
  --c4-bg: #232D2F; --c4-line: #7D9BA2; --c4-text: #B0CDD4;
  --c5-bg: #262830; --c5-line: #878DA4; --c5-text: #BCC1D6;
  --c6-bg: #2B2630; --c6-line: #9C88A4; --c6-text: #CFBCD7;
}

:root[data-palette="ocean"] {
  --c1-bg: #E6F2F8; --c1-line: #8FC0DA; --c1-text: #3C6F8C;
  --c2-bg: #E9F4F2; --c2-line: #93CEC6; --c2-text: #3F7D74;
  --c3-bg: #EAF1E6; --c3-line: #A6CE96; --c3-text: #557F45;
  --c4-bg: #F2F3E3; --c4-line: #C7C98D; --c4-text: #7A7C43;
  --c5-bg: #F6EDE4; --c5-line: #D9B78F; --c5-text: #8A6537;
  --c6-bg: #ECEDF5; --c6-line: #A9AED4; --c6-text: #5B6096;
}
:root[data-theme="dark"][data-palette="ocean"] {
  --c1-bg: #1D2B36; --c1-line: #6BA0BE; --c1-text: #A5CDE4;
  --c2-bg: #1D2F2D; --c2-line: #66AEA6; --c2-text: #A0D8D1;
  --c3-bg: #24301F; --c3-line: #7FA86F; --c3-text: #B5D8A6;
  --c4-bg: #2E2F1F; --c4-line: #A5A76A; --c4-text: #D6D79F;
  --c5-bg: #33291D; --c5-line: #B5946C; --c5-text: #E3C69F;
  --c6-bg: #252737; --c6-line: #7F84B4; --c6-text: #B5B9E4;
}

:root[data-palette="forest"] {
  --c1-bg: #E8F1EA; --c1-line: #9CC4A6; --c1-text: #4F7A59;
  --c2-bg: #EDF2E6; --c2-line: #B3C993; --c2-text: #63794A;
  --c3-bg: #F2F0E4; --c3-line: #CFC48F; --c3-text: #7E7442;
  --c4-bg: #F4EDE6; --c4-line: #D5B295; --c4-text: #8A6446;
  --c5-bg: #F0E9EE; --c5-line: #C5A5B8; --c5-text: #7C5A6C;
  --c6-bg: #E7EEF1; --c6-line: #9FBCC6; --c6-text: #4E7280;
}
:root[data-theme="dark"][data-palette="forest"] {
  --c1-bg: #213027; --c1-line: #74A681; --c1-text: #ABD8B6;
  --c2-bg: #282F22; --c2-line: #8DA56C; --c2-text: #C1D8A4;
  --c3-bg: #302E20; --c3-line: #ABA06A; --c3-text: #DAD0A0;
  --c4-bg: #332A21; --c4-line: #B08E70; --c4-text: #DFC1A6;
  --c5-bg: #2E252C; --c5-line: #A08094; --c5-text: #D2B4C6;
  --c6-bg: #202A2E; --c6-line: #7A99A4; --c6-text: #AECCD6;
}

:root[data-palette="sunset"] {
  --c1-bg: #FBEFE2; --c1-line: #E7B782; --c1-text: #956730;
  --c2-bg: #FBE9E5; --c2-line: #E5A79C; --c2-text: #95594D;
  --c3-bg: #F7EDE6; --c3-line: #D8B49E; --c3-text: #8A6248;
  --c4-bg: #F3F0E4; --c4-line: #CBC496; --c4-text: #7C7546;
  --c5-bg: #EEF1E7; --c5-line: #B0C79C; --c5-text: #5F7749;
  --c6-bg: #ECEEF4; --c6-line: #ABB1D3; --c6-text: #5C628F;
}
:root[data-theme="dark"][data-palette="sunset"] {
  --c1-bg: #33291B; --c1-line: #BE8E5A; --c1-text: #EBC396;
  --c2-bg: #33231F; --c2-line: #BC7E73; --c2-text: #EBB6AC;
  --c3-bg: #302820; --c3-line: #AF8B75; --c3-text: #DEBBA4;
  --c4-bg: #2E2D1F; --c4-line: #A29B6D; --c4-text: #D3CBA1;
  --c5-bg: #262E22; --c5-line: #879E73; --c5-text: #BBD3A8;
  --c6-bg: #252736; --c6-line: #8288AC; --c6-text: #B7BCDD;
}

:root[data-palette="mono"] {
  --c1-bg: #F0F1F3; --c1-line: #B8BCC4; --c1-text: #5C6169;
  --c2-bg: #EDEFF2; --c2-line: #AEB4BE; --c2-text: #535A64;
  --c3-bg: #F2F1EF; --c3-line: #BFBBB4; --c3-text: #64605A;
  --c4-bg: #EFF2F1; --c4-line: #B2BEB8; --c3-text: #57635D;
  --c4-text: #57635D;
  --c5-bg: #F1EFF2; --c5-line: #BBB2BE; --c5-text: #605A63;
  --c6-bg: #EDF1F2; --c6-line: #AEB9BE; --c6-text: #535F64;
}
:root[data-theme="dark"][data-palette="mono"] {
  --c1-bg: #292B2F; --c1-line: #878C94; --c1-text: #C2C7CE;
  --c2-bg: #262A2F; --c2-line: #7E848E; --c2-text: #B9BFC8;
  --c3-bg: #2C2A28; --c3-line: #8E8A83; --c3-text: #C8C4BD;
  --c4-bg: #262C2A; --c4-line: #818D87; --c4-text: #BCC8C2;
  --c5-bg: #2A272C; --c5-line: #8A828E; --c5-text: #C4BCC8;
  --c6-bg: #262B2C; --c6-line: #818C8E; --c6-text: #BCC7C9;
}

/* --------------------------------------------------------------------------
   4. 基础重置
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

body {
  /* 手机上防橡皮筋导致的错位 */
  position: fixed;
  inset: 0;
  overflow: hidden;
}

#app { height: 100%; }

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* 数字统一用等宽感字体，避免周次/节次跳动 */
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   5. 应用外壳（顶栏 + 可滚动内容 + 底部 Tab）
   -------------------------------------------------------------------------- */
.app {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 30rem;      /* 480px：平板/桌面上居中，不变形 */
  margin: 0 auto;
  background: var(--bg);
  position: relative;
}

.app__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-3));
}

/* 顶栏 */
.hdr {
  padding-top: var(--safe-top);
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
  flex: none;
  z-index: 5;
}
.hdr--line { border-bottom-color: var(--line); }

.hdr__row {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-4);
  position: relative;
}

/* 学期 + 周次居中；右侧按钮绝对定位，保证标题真正居中 */
.hdr__center {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.0625rem;
}

.hdr__add {
  position: absolute;
  right: var(--sp-3);
}

.hdr__title {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 1.0625rem;      /* 17px：比页面正文重，但不喧哗 */
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hdr__sub {
  font-size: 0.75rem;
  color: var(--text-2);
  font-weight: 400;
}

.icon-btn {
  width: 2.25rem; height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  color: var(--text-2);
  transition: background-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
  flex: none;
}
.icon-btn:active { transform: scale(.92); background: var(--fill); }
.icon-btn--primary { color: var(--primary); }

/* 底部 Tab */
.tabbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line);
  z-index: 20;
}

.tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  color: var(--text-3);
  font-size: 0.625rem;      /* 10px */
  transition: color var(--dur-fast) var(--ease);
}
.tabbar__item--on { color: var(--primary); }
.tabbar__item:active { transform: scale(.94); }
.tabbar__item svg { display: block; }

/* --------------------------------------------------------------------------
   6. 课表页：周次切换 + 日期条 + 网格
   -------------------------------------------------------------------------- */
.wkbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-3) var(--sp-2);
}

.wkbar__nav {
  width: 2rem; height: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-full);
  color: var(--text-2);
  background: var(--card);
  box-shadow: var(--sh-1);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.wkbar__nav:active { transform: scale(.9); }
.wkbar__nav[disabled] { opacity: .35; }

.wkbar__center {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--sp-1);
}
.wkbar__week {
  font-size: 1.0625rem;    /* 17px */
  font-weight: 600;
  letter-spacing: -.01em;
}
.wkbar__meta { font-size: 0.75rem; color: var(--text-2); }

.wkbar__today {
  font-size: 0.75rem;
  color: var(--primary);
  background: var(--primary-weak);
  padding: 0.25rem 0.5rem;
  border-radius: var(--r-full);
  transition: transform var(--dur-fast) var(--ease);
}
.wkbar__today:active { transform: scale(.94); }

/* 「开学日体检」提示块（周次选择弹层内）
   只在「本周一节课都没有、但别周有课」时出现 —— 正常情况下几乎不可能，
   一旦出现多半是开学第一周的周一填错了（2026-09-19 真机事故的根因）。 */
.weekhint {
  margin-top: var(--sp-3);
  padding: 0.625rem 0.75rem;
  border-radius: var(--r-md);
  border-left: 3px solid var(--warn);
  background: var(--warn-weak);
  color: var(--text);
  font-size: 0.8125rem;
  line-height: 1.55;
}
.weekhint b { font-weight: 600; }
.weekhint__fix {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--primary);
}
.weekhint__fix input { font: inherit; color: inherit; background: none; border: 0; }

/* 课表页顶部的开学日体检条（点一下进周次弹层核对）
   —— 与 .weekhint 同一个用途，但必须**不用点开任何东西就能看到**。 */
.weekbar {
  display: block;
  width: calc(100% - var(--sp-3) * 2);
  margin: 0 var(--sp-3) var(--sp-2);
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-radius: var(--r-md);
  border-left: 3px solid var(--warn);
  background: var(--warn-weak);
  color: var(--text);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.weekbar b { font-weight: 600; }
.weekbar:active { transform: scale(.99); }

/* ---------------------------------------------------------------- 首页公告
   用于必须让用户看到的通知（如"请重新导入课表"）。
   ★ 刻意做成**必须点按钮才能关**：点背景不关、Esc 不关、没有叉号。
     因为这类通知一旦被随手划掉，用户就等于没看到。 */
.notice-mask {
  position: fixed;
  inset: 0;
  z-index: 70;                       /* 高于 tabbar(50)，盖住整个界面 */
  background: rgba(20, 22, 26, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--sp-4);
  animation: notice-fade var(--dur) var(--ease);
}

.notice {
  width: 100%;
  max-width: 22rem;
  background: var(--card);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
  padding: 1.25rem 1.125rem 1.125rem;
  text-align: left;
  animation: notice-pop var(--dur) var(--ease);
}

.notice__ic {
  width: 2.5rem; height: 2.5rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-full);
  background: var(--primary-weak);
  color: var(--primary);
  margin-bottom: 0.75rem;
}

.notice__t {
  font-size: 1.0625rem;              /* 17px */
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 0.5rem;
}

.notice__b {
  font-size: 0.9375rem;              /* 15px */
  line-height: 1.7;
  color: var(--text-2);
}

.notice__act {
  width: 100%;
  height: 2.75rem;
  margin-top: 1.125rem;
  border-radius: var(--r-md);
  background: var(--primary);
  color: var(--primary-on);
  font-size: 0.9375rem;
  font-weight: 600;
}
.notice__act:active { transform: scale(.985); }
/* 公告带链接时，按钮本身就是 <a>（跳转交给 WebView/浏览器原生处理）。
   这里只补链接元素特有的几项，让它与 <button> 外观完全一致。 */
.notice__act--link {
  display: block;
  line-height: 2.75rem;
  text-align: center;
  text-decoration: none;
  color: var(--primary-on);
}

.notice__hint {
  margin-top: 0.625rem;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--text-3);
  text-align: center;
}

@keyframes notice-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes notice-pop {
  from { opacity: 0; transform: translateY(.75rem) scale(.97); }
  to { opacity: 1; transform: none; }
}
/* 关了系统动效就不做动画（无障碍：尊重 prefers-reduced-motion） */
@media (prefers-reduced-motion: reduce) {
  .notice-mask, .notice, .notice-bar { animation: none; }
}

/* ---- info 级公告：可关闭横幅 ----------------------------------------------
   与上面 warn 级的强制弹窗刻意分开：日常通知（"今晚维护"）天天弹窗会惹人烦，
   用户一旦反感就会连重要公告一起忽略。横幅不挡界面，只在顶栏下方占一条。
   数据来自服务器 notice.json，见 core/notice.js。 */
.notice-bar {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0 0.75rem 0.5rem;
  padding: 0.5rem 0.375rem 0.5rem 0.75rem;
  border-radius: var(--r-md);
  background: var(--primary-weak);
  border-left: 2px solid var(--primary);
  animation: notice-bar-in var(--dur) var(--ease);
}
.notice-bar__main { flex: 1; min-width: 0; }
.notice-bar__t {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.125rem;
}
.notice-bar__b {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-2);
  word-break: break-word;
}
.notice-bar__btn {
  flex: none;
  height: 1.75rem;
  padding: 0 0.75rem;
  border-radius: var(--r-full);
  background: var(--primary);
  color: var(--primary-on);
  font-size: 0.8125rem;
  font-weight: 600;
  transition: transform var(--dur-fast) var(--ease);
}
.notice-bar__btn:active { transform: scale(.95); }
/* 同上：横幅按钮是链接时保持外观一致 */
.notice-bar__btn--link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--primary-on);
}
.notice-bar__close {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
}
@keyframes notice-bar-in {
  from { opacity: 0; transform: translateY(-.375rem); }
  to { opacity: 1; transform: none; }
}

/* 日期条
   ★ 列几何必须与 .grid__inner 逐字一致（同一个 grid 模板 + 同一个左右内边距 + 同一个 gap），
   否则日期就会跟课表的列错位 —— 这是"最顶端日期与每一列一一对应"的唯一保证方式。
   第一格 .dates__gutter 是与"节次时间列"等宽的空占位；周次按钮放在独立的 .dates__nav 里。 */
.dates {
  display: grid;
  grid-template-columns: var(--grid-time-w) repeat(7, minmax(0, 1fr));
  gap: var(--grid-gap);
  padding: 0 var(--grid-pad) var(--sp-2);
}
.dates__gutter { min-width: 0; }
.dates__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-3) var(--sp-2);
}
.date {
  min-width: 0;
  padding: 0.375rem 0;
  border-radius: var(--r-md);
  text-align: center;
  transition: background-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.date:active { transform: scale(.95); }
.date__wd { font-size: 0.625rem; color: var(--text-2); }
.date__d { font-size: 0.9375rem; font-weight: 600; margin-top: 0.0625rem; }
.date--today { background: var(--primary); }
.date--today .date__wd, .date--today .date__d { color: var(--primary-on); }
.date--today .date__wd { opacity: .8; }
.date--past .date__d { color: var(--text-3); }
.date--sel:not(.date--today) { background: var(--primary-weak); }
.date--sel:not(.date--today) .date__d { color: var(--primary); }

/* 网格 */
.grid {
  position: relative;
  padding: 0 var(--grid-pad);
}

.grid__inner {
  position: relative;
  display: grid;
  grid-template-columns: var(--grid-time-w) repeat(7, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.grid__col {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
}

/* 节次时间标签
   ★ 开始时间在上、结束时间在下：两节连堂时学生能看到"到几点结束"，
     不会被误读成"上一节就结束了"（用户真机反馈"以为提前结束"）。 */
.sec {
  height: var(--grid-row-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  color: var(--text-2);
  line-height: 1.05;
}
.sec__n { font-size: 0.6875rem; font-weight: 600; color: var(--text-2); }
.sec__t { font-size: 0.5625rem; color: var(--text-2); letter-spacing: -.02em; }
.sec__te { font-size: 0.5rem; color: var(--text-3); letter-spacing: -.03em; }
.sec--now .sec__n { color: var(--primary); }
.sec--now .sec__t { color: var(--primary); }
.sec--now .sec__te { color: var(--primary); }

/* 课程卡 */
.course {
  position: relative;
  border-radius: var(--r-md);
  background: var(--course-bg);
  padding: 0.25rem 0.25rem 0.25rem 0.3125rem;
  overflow: hidden;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  box-shadow: inset 2px 0 0 var(--course-line);
  transition: transform var(--dur-fast) var(--ease);
  min-height: 0;
}
.course:active { transform: scale(.97); }

.course--now {
  box-shadow: inset 2px 0 0 var(--course-line), 0 0 0 2px var(--course-line);
}

.course--other {
  /* 状态 2：本周无课但在该时段有安排 —— 浅色、低透明、灰化，仍可点击 */
  opacity: .45;
  filter: grayscale(.6) saturate(.55);
}

.course__name {
  font-size: 0.6875rem;      /* 11px */
  font-weight: 600;
  line-height: 1.2;
  color: var(--course-text);
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course__room, .course__teacher {
  font-size: 0.5625rem;      /* 9px */
  line-height: 1.15;
  color: var(--course-text);
  opacity: .8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 角标：周次规则。压在卡片右上角，课程名让出顶部一行，保证"课名优先" */
.course__badge {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 0.5rem;         /* 8px */
  line-height: 1;
  padding: 0.1875rem 0.25rem;
  border-bottom-left-radius: var(--r-sm);
  background: color-mix(in srgb, var(--course-line) 48%, var(--course-bg));
  color: var(--course-text);
  font-weight: 600;
  letter-spacing: -.02em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 有角标时课程名整体下移，避免与角标重叠 */
.course--has-badge .course__name { margin-top: 0.6875rem; }

/* 两节及以上的卡片空间更富裕，角标可以小一点、信息多一点 */
.course--tall .course__name { -webkit-line-clamp: 4; }

/* ★ 同一格排了多门课时，右下角标出总数。
   背景（用户报障 2026-09-19）：手动添加的课若与已有课程同格，课表只画得下一张卡，
   后加的那门会静默消失。这里至少让它"看得见有事发生"。
   做法刻意选择**绝对定位 + 底部预留一条**：卡片外框由行高/跨度算出来，
   不受内部影响，所以 check-tall-card / check-schedule-map 那批几何断言不会动。
   不预留这条的话，单节卡（卡高只够 2-3 行课名）会被压住文字。 */
.course--stacked { padding-bottom: 0.9375rem; }
/* 只有**单节**卡需要收紧：卡高 60px，减去顶部 4px + 底部预留 15px 只剩 41px，
   而课名还带 11px 的角标让位边距 —— 3 行会溢出到角标上。
   两节以上的卡（.course--tall）空间够，不必砍它的行数。 */
.course--stacked:not(.course--tall) .course__name { -webkit-line-clamp: 2; }
.course__more {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 0.5rem;         /* 8px，与 .course__badge 同号 */
  line-height: 1;
  padding: 0.1875rem 0.25rem;
  border-top-left-radius: var(--r-sm);
  background: color-mix(in srgb, var(--danger) 16%, var(--course-bg));
  color: var(--danger);
  font-weight: 600;
  letter-spacing: -.02em;
  white-space: nowrap;
}

/* The "current time line" (.nowline) was removed on 2026-09-19 at user request.
   一并移除的还有 ScheduleScreen 里的 NowLine 组件，以及只被它使用的
   sectionIndexAt / hmToMin 两个辅助函数。
   需要恢复时：git tag known-good-before-remove-nowline，
   或桌面备份 KbTable-备份-20260919-084249（两者都含完整实现）。 */

/* --------------------------------------------------------------------------
   7. 通用列表 / 卡片 / 分区
   -------------------------------------------------------------------------- */
.sec-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-2);
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
}

.card {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  overflow: hidden;
}

.list {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  margin: 0 var(--sp-3);
  overflow: hidden;
}
.list + .list { margin-top: var(--sp-3); }

.row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.8125rem var(--sp-4);
  min-height: 3rem;
  transition: background-color var(--dur-fast) var(--ease);
  width: 100%;
  text-align: left;
}
.row + .row { box-shadow: inset 0 1px 0 var(--line); }
.row:active { background: var(--fill); }
.row__ic {
  width: 1.75rem; height: 1.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  background: var(--primary-weak);
  color: var(--primary);
  flex: none;
}
.row__main { flex: 1; min-width: 0; }
.row__t { font-size: 0.9375rem; }
.row__d { font-size: 0.75rem; color: var(--text-2); margin-top: 0.0625rem; }
.row__v { font-size: 0.8125rem; color: var(--text-2); flex: none; max-width: 55%; text-align: right; }

.empty {
  text-align: center;
  padding: 3.5rem var(--sp-6);
  color: var(--text-2);
}
.empty__t { font-size: 0.9375rem; margin-top: var(--sp-3); }
.empty__d { font-size: 0.8125rem; color: var(--text-3); margin-top: var(--sp-1); }

.hero {
  margin: var(--sp-3) var(--sp-3) 0;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--sh-1);
}

/* 今日大卡 */
.hero__label { font-size: 0.75rem; color: var(--text-2); }
.hero__main {
  font-size: 1.375rem;      /* 22px */
  font-weight: 600;
  letter-spacing: -.02em;
  margin-top: var(--sp-2);
  line-height: 1.3;
}
.hero__meta {
  margin-top: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.chip {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--r-full);
  background: var(--fill);
  color: var(--text-2);
}
.chip--primary { background: var(--primary-weak); color: var(--primary); }
.chip--now { background: var(--primary); color: var(--primary-on); }

/* 今日课程行 */
.today-item {
  display: flex;
  gap: var(--sp-3);
  padding: 0.8125rem var(--sp-4);
  width: 100%;
  text-align: left;
  align-items: stretch;
  transition: background-color var(--dur-fast) var(--ease);
}
.today-item + .today-item { box-shadow: inset 0 1px 0 var(--line); }
.today-item:active { background: var(--fill); }
.today-item--past { opacity: .48; }
.today-item__time {
  flex: none;
  width: 3.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.today-item__start { font-size: 0.875rem; font-weight: 600; }
.today-item__end { font-size: 0.6875rem; color: var(--text-3); }
.today-item__bar {
  width: 3px;
  border-radius: var(--r-full);
  background: var(--course-line);
  flex: none;
}
.today-item__main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.today-item__name { font-size: 0.9375rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-item__sub { font-size: 0.75rem; color: var(--text-2); margin-top: 0.125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------------------------------
   8. 底部弹层 / 模态
   -------------------------------------------------------------------------- */
.mask {
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 26, .32);
  z-index: 40;
  animation: fade var(--dur) var(--ease);
  backdrop-filter: blur(2px);
}

.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 41;
  max-width: 30rem;
  margin: 0 auto;
  background: var(--bg-elev);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sh-3);
  max-height: 88%;
  display: flex;
  flex-direction: column;
  animation: sheet-up 260ms var(--ease);
  padding-bottom: var(--safe-bottom);
}

.sheet__grip {
  width: 2.25rem; height: 0.25rem;
  border-radius: var(--r-full);
  background: var(--line-strong);
  margin: 0.5rem auto 0.25rem;
  flex: none;
}
.sheet__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  flex: none;
}
.sheet__title { font-size: 1.0625rem; font-weight: 600; flex: 1; min-width: 0; }
.sheet__body { overflow-y: auto; padding: 0 var(--sp-4) var(--sp-5); -webkit-overflow-scrolling: touch; }
.sheet__foot {
  flex: none;
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--line);
}

/* ★ 时段撞车提示条（「添加/编辑课程」表单内）。
   刻意放在**滚动区之外的文档流里**（.sheet 是 flex 列，它是 body 与 foot 之间的
   一个 flex:none 子项）。曾经写成 position:sticky 贴滚动区底部 —— 那会浮在
   周次网格上方挡住点击，正是既有 ui-check 被同类遮挡卡死的那种故障。
   放在流里：不遮挡任何控件，且滚到哪都看得见。 */
.conflictbar {
  flex: none;
  margin: 0 var(--sp-4) var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--danger-weak);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  font-size: 0.8125rem;
  color: var(--text);
  max-height: 7rem;
  overflow-y: auto;
}
.conflictbar__t { font-weight: 600; color: var(--danger); margin-bottom: 0.375rem; }
.conflictbar__d { font-size: 0.6875rem; color: var(--text-2); line-height: 1.4; margin-top: 0.4375rem; }
.conflictbar__list {
  margin: 0;
  padding-left: 1.125rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text);
  list-style: disc;
}
.conflictbar__list li + li { margin-top: 0.25rem; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes pop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* --------------------------------------------------------------------------
   9. 表单控件
   -------------------------------------------------------------------------- */
.field { padding: var(--sp-3) 0; }
.field + .field { border-top: 1px solid var(--line); }
.field__label {
  font-size: 0.8125rem;
  color: var(--text-2);
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.field__hint { font-size: 0.6875rem; color: var(--text-3); }

.input {
  width: 100%;
  height: 2.75rem;
  padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  background: var(--fill);
  border: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
  outline: none;
}
.input:focus { border-color: var(--primary); background: var(--bg-elev); }
.input::placeholder { color: var(--text-3); }

.btn {
  height: 2.875rem;
  padding: 0 var(--sp-4);
  border-radius: var(--r-md);
  font-size: 0.9375rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--primary); color: var(--primary-on); flex: 1; }
.btn--ghost { background: var(--fill); color: var(--text); }
.btn--danger { background: var(--danger-weak); color: var(--danger); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; }

/* 分段控件（单双周、周次模式） */
.seg {
  display: flex;
  gap: 0.25rem;
  padding: 0.1875rem;
  background: var(--fill);
  border-radius: var(--r-md);
}
.seg__i {
  flex: 1;
  height: 2.125rem;
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  color: var(--text-2);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  display: inline-flex; align-items: center; justify-content: center;
}
.seg__i--on {
  background: var(--bg-elev);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--sh-1);
}

/* 开关 */
.switch {
  width: 3rem; height: 1.75rem;
  border-radius: var(--r-full);
  background: var(--fill-2);
  position: relative;
  flex: none;
  transition: background-color var(--dur) var(--ease);
}
.switch::after {
  content: '';
  position: absolute;
  top: 0.1875rem; left: 0.1875rem;
  width: 1.375rem; height: 1.375rem;
  border-radius: var(--r-full);
  background: #fff;
  box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease);
}
.switch--on { background: var(--primary); }
.switch--on::after { transform: translateX(1.25rem); }

/* --------------------------------------------------------------------------
   10. 周次多选网格（添加/编辑课程的核心控件）
   -------------------------------------------------------------------------- */
.wgrid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.3125rem;
}
.wcell {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-sm);
  background: var(--fill);
  color: var(--text-2);
  font-size: 0.75rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
  position: relative;
}
.wcell:active { transform: scale(.9); }
.wcell--on { background: var(--primary); color: var(--primary-on); font-weight: 600; }
.wcell--ex {
  background: var(--danger-weak);
  color: var(--danger);
  text-decoration: line-through;
}
.wcell--edge::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 1.5px var(--primary);
  opacity: .55;
}
.wgrid__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  font-size: 0.6875rem;
  color: var(--text-2);
}
.legend-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
}
.legend-dot i {
  width: 0.75rem; height: 0.75rem;
  border-radius: 0.25rem;
  display: inline-block;
  font-style: normal;
}

/* 周次规则摘要 */
.rule-summary {
  margin-top: var(--sp-3);
  padding: 0.625rem var(--sp-3);
  border-radius: var(--r-md);
  background: var(--primary-weak);
  color: var(--primary);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* 色板选择 */
.colors { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.color-dot {
  width: 2rem; height: 2rem;
  border-radius: var(--r-full);
  border: 2px solid transparent;
  transition: transform var(--dur-fast) var(--ease);
  position: relative;
}
.color-dot:active { transform: scale(.9); }
.color-dot--on { border-color: var(--text); }

/* 主题预览卡 */
.themes { display: flex; gap: var(--sp-3); }
.theme-card {
  flex: 1;
  border-radius: var(--r-md);
  border: 2px solid var(--line);
  padding: var(--sp-3);
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-2);
  transition: border-color var(--dur-fast) var(--ease);
}
.theme-card--on { border-color: var(--primary); color: var(--primary); font-weight: 600; }
.theme-card__pv {
  height: 2.5rem;
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-2);
  border: 1px solid var(--line);
}

/* 色板预览 */
.palette-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.palette-card {
  border-radius: var(--r-md);
  border: 2px solid var(--line);
  padding: 0.5rem;
  transition: border-color var(--dur-fast) var(--ease);
}
.palette-card--on { border-color: var(--primary); }
.palette-card__name { font-size: 0.6875rem; color: var(--text-2); margin-top: 0.375rem; text-align: center; }
.palette-card--on .palette-card__name { color: var(--primary); font-weight: 600; }
.palette-card__dots { display: flex; gap: 0.1875rem; justify-content: center; }
.palette-card__dots i { width: 0.75rem; height: 0.75rem; border-radius: var(--r-full); display: block; }

/* 提示条 */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-4));
  transform: translateX(-50%);
  z-index: 60;
  background: rgba(31, 35, 41, .92);
  color: #fff;
  font-size: 0.8125rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--r-full);
  animation: pop var(--dur) var(--ease);
  max-width: 86%;
  text-align: center;
}
:root[data-theme="dark"] .toast { background: rgba(232, 234, 237, .94); color: #14161A; }

/* 小工具条 */
.toolbar {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  overflow-x: auto;
  scrollbar-width: none;
}
.toolbar::-webkit-scrollbar { display: none; }
.tbtn {
  flex: none;
  height: 2rem;
  padding: 0 0.75rem;
  border-radius: var(--r-full);
  background: var(--card);
  box-shadow: var(--sh-1);
  font-size: 0.8125rem;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tbtn:active { transform: scale(.95); }
.tbtn--on { color: var(--primary); font-weight: 600; }

/* 线上更新提示条：只有服务器上有新前端时出现 */
.update-banner {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0.75rem 0.5rem;
  padding: 0.375rem 0.375rem 0.375rem 0.75rem;
  border-radius: var(--r-md);
  background: var(--primary-weak);
  color: var(--primary);
  font-size: 0.8125rem;
}
.update-banner__dot {
  width: 0.5rem; height: 0.5rem;
  border-radius: var(--r-full);
  background: var(--primary);
  flex: none;
}
.update-banner__text { flex: 1; min-width: 0; }
.update-banner__btn {
  flex: none;
  height: 1.75rem;
  padding: 0 0.75rem;
  border-radius: var(--r-full);
  background: var(--primary);
  color: var(--primary-on);
  font-size: 0.8125rem;
  font-weight: 600;
  transition: transform var(--dur-fast) var(--ease);
}
.update-banner__btn:active { transform: scale(.95); }
.update-banner__close {
  flex: none;
  height: 1.75rem;
  padding: 0 0.5rem;
  color: var(--text-2);
  font-size: 0.75rem;
}

/* 无障碍：尊重系统的减少动效设置 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* 窄屏微调（iPhone SE 320px 宽仍可用） */
@media (max-width: 22.5rem) {
  /* ⚠️ 只改 :root 里的变量；不要再写 .grid { padding: ... } 这种单独覆盖 ——
     那会让日期条和网格的左右内边距不同源，列位直接错开（2026-09-18 用户实测"横向对不齐"就是这个） */
  :root { --grid-time-w: 1.875rem; --grid-row-h: 3.25rem; --grid-gap: 2px; --grid-pad: 0.375rem; }
  .course { padding: 0.1875rem 0.1875rem 0.1875rem 0.25rem; }
  .course__name { font-size: 0.625rem; -webkit-line-clamp: 3; }
  .course__room, .course__teacher { font-size: 0.5rem; }
  .course__badge { font-size: 0.5rem; padding: 0.125rem 0.1875rem; }
  /* ★ 这里**不要**再把 .sec__t 隐藏：时钟时间是"几点上课/几点下课"的唯一依据，
     窄屏藏掉之后用户看到的就是"时间对不齐/对不上"。窄屏把字号调小即可。 */
  .sec__t { font-size: 0.5rem; letter-spacing: -0.03em; }
  .sec__te { font-size: 0.4375rem; letter-spacing: -0.04em; }
  .date__d { font-size: 0.875rem; }
}