/* 拾时 · 网站。纯白、简洁：不跟随系统的深色（docs/specs/16-landing-visual.md）。
   配色和尺寸都用这里的变量，首页（landing.css）、授权页（setup.css）、面板共用一套；名字别改，各处在用。 */
:root {
  --bg: #ffffff; --panel: #ffffff; --side: #ffffff;
  --ink: #111111; --text: #1d1d1f; --muted: #737378; --faint: #b0b0b5;
  --line: #ececee; --line-2: #dcdce0; --soft: #f7f7f8;
  --accent: #111111; --accent-soft: rgba(17, 17, 17, .06); --link: #0a66d8;
  --green: #1f9d48; --yellow: #c98a00; --red: #d93025; --blue: #0a66d8; --gray: #a1a1a6; --orange: #d66900;
  --radius: 14px; --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 30px rgba(0, 0, 0, .06);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

/* 底子：元素的默认样子，首页、授权页也用。状态和元素选择器都包在 :where() 里（优先级为零），
   landing.css、setup.css 里自己的类一写就盖过，不用和这里比优先级。 */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 14px/1.6 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
:where(h1, h2, h3) { color: var(--ink); font-weight: 600; }
h1 { font-size: 26px; line-height: 1.3; margin: 0 0 6px; }
h2 { font-size: 20px; line-height: 1.35; margin: 0 0 6px; }
h3 { font-size: 15px; line-height: 1.45; margin: 0 0 8px; }
p { margin: 0 0 8px; }
:where(b, strong) { font-weight: 600; }
a { color: var(--link); text-decoration: none; }
:where(a:not([class])):hover { text-decoration: underline; text-underline-offset: .2em; }
/* 用键盘移过来时的焦点框（输入框有自己的，见下面） */
:where(a, button, summary, [tabindex], input[type=checkbox], input[type=radio]):where(:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.boot { max-width: 520px; margin: 0 auto; padding: 18vh 24px 48px; color: var(--muted); text-align: center; }
.boot h2 { margin-bottom: 10px; }

/* 文字 */
.muted { color: var(--muted); }
.small { font-size: 13px; line-height: 1.55; }
.err { color: var(--red); }
.ok-text { color: var(--green); }
.pre { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.mono { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.65;
  white-space: pre-wrap; word-break: break-all; color: var(--text); }
.line1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 按钮：默认是白底细边的次要按钮；.primary 近黑；.link 是文字按钮 */
:where(button) { font: inherit; font-size: 14px; font-weight: 500; line-height: 20px; padding: 7px 16px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease; -webkit-tap-highlight-color: transparent; }
:where(button):where(:hover:not(:disabled)) { background: var(--soft); border-color: #c8c8cd; }
:where(button):where(:active:not(:disabled)) { background: #f0f0f2; }
:where(button).primary { background: var(--accent); border-color: var(--accent); color: #fff; }
:where(button).primary:where(:hover:not(:disabled)) { background: #2c2c2e; border-color: #2c2c2e; }
:where(button).primary:where(:active:not(:disabled)) { background: #000; border-color: #000; }
:where(button).link { padding: 0 2px; border: 0; border-radius: 4px; background: none; color: var(--link); font-weight: 400; }
:where(button).link:where(:hover:not(:disabled)) { background: none; text-decoration: underline; text-underline-offset: .2em; }
:where(button):where(:disabled) { opacity: .4; cursor: not-allowed; }

/* 输入框（不含勾选、单选）：细边，聚焦时边变深、外面一圈很淡的光晕 */
:where(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=button], [type=submit], [type=reset], [type=image]),
  textarea, select) {
  font: inherit; font-size: 14px; line-height: 20px; min-height: 36px; min-width: 0; padding: 7px 12px; color: var(--ink);
  background-color: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease; }
:where(input, textarea)::placeholder { color: var(--gray); opacity: 1; }
:where(input:not([type=checkbox], [type=radio]), textarea, select):where(:hover:not(:focus):not(:disabled)) { border-color: #c8c8cd; }
:where(input:not([type=checkbox], [type=radio]), textarea, select):where(:focus) { outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--accent-soft); }
:where(input:not([type=checkbox], [type=radio]), textarea, select):where(:disabled) { background-color: var(--soft); color: var(--muted);
  cursor: not-allowed; }
:where(input[readonly]) { background-color: var(--soft); }
:where(textarea) { display: block; width: 100%; min-height: 96px; padding: 10px 12px; line-height: 1.6; resize: vertical; }
:where(select) { -webkit-appearance: none; appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%2386868b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; }
:where(input[type=checkbox], input[type=radio]) { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--accent); cursor: pointer; }
/* 手机上输入框的字不小于 16px，不然 iPhone 一点就放大页面 */
@media (max-width: 640px) {
  :where(input:not([type=checkbox], [type=radio]), textarea, select) { font-size: 16px; }
}

/* 勾选、单选 */
label.check, .radio label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
label.check > input, .radio label > input { margin-top: calc((1.6em - 16px) / 2); }
.radio { display: flex; flex-direction: column; gap: 10px; }

/* 分段选择 */
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.seg button { padding: 4px 14px; border: 0; border-radius: 7px; background: none; color: var(--muted); }
.seg button:hover:not(:disabled) { background: none; color: var(--ink); }
.seg button.on { background: var(--panel); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, .06); }

/* 表单：左边说明、右边填 */
.form { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 14px 20px; align-items: center; }
.form > label { color: var(--muted); font-size: 13px; line-height: 1.45; }
.form input:not([type=checkbox]):not([type=radio]), .form select { width: 100%; }
.form .seg { justify-self: start; }

/* 面板：左边一栏导航（白底，一道细线隔开），右边一页 */
.shell { display: flex; min-height: 100vh; }
.side { position: sticky; top: 0; align-self: flex-start; flex: none; display: flex; flex-direction: column; gap: 2px;
  width: 232px; height: 100vh; overflow-y: auto; padding: 22px 14px 28px; background: var(--side); border-right: 1px solid var(--line);
  scrollbar-width: thin; }
.side .who { display: flex; align-items: center; gap: 10px; padding: 4px 12px 18px; color: var(--ink); font-size: 15px; font-weight: 600; }
.side a { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--muted); line-height: 20px;
  text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.side a:hover { background: var(--soft); color: var(--ink); }
.side a.on { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.side a:focus-visible { outline-offset: -2px; }
.side .badge { position: absolute; top: 50%; right: 10px; min-width: 20px; height: 20px; margin-top: -10px; padding: 0 6px; border-radius: 10px;
  background: var(--ink); color: #fff; font-size: 11px; font-weight: 600; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
/* 导航图标：core.js 画的细线图标，颜色跟着文字走；还没画图标的页显示登记时的表情 */
.side a .ic { flex: none; width: 18px; height: 18px; }
.side a .ic.emoji { font-size: 14px; line-height: 18px; text-align: center; }
.main { flex: 1; min-width: 0; }
.page { max-width: 840px; margin: 0 auto; padding: 48px 40px 96px; overflow-wrap: anywhere; }
/* 一页里的上下间距：标题和说明挨着，说明和下面的内容隔开；随状态刷新的区块里面也一样 */
.page > * + *, .page > [data-sec] > * + * { margin-top: 20px; }
.page > :is(div, p):empty, .box > :is(div, p, span):empty, .row.top > div:empty { display: none; }
.page > h1 + p { margin-top: 8px; }
.page > h1 + p + * { margin-top: 32px; }
.page > [data-sec]:first-child + * { margin-top: 28px; }
.page > h3 + * { margin-top: 8px; }
.page > p + p { margin-top: 10px; }
.page b { color: var(--ink); }
.page img { max-width: 100%; }
.row > h1, .row > h2, .row > h3 { margin: 0; }
.page > [data-sec] > .row > .dot { width: 10px; height: 10px; }
/* 空着的时候（还没有信、还没上过班）：一块虚线框，字放中间 */
.page > [data-sec] > p.muted:only-child:not(.small) { margin: 0; padding: 40px 16px; text-align: center;
  border: 1px dashed var(--line-2); border-radius: var(--radius); }
@media (max-width: 900px) {
  .side { width: 208px; padding: 20px 12px 24px; }
  .page { padding: 40px 28px 88px; }
}
/* 窄屏才用的短名字（底部标签上的「事项」「功能」） */
.side .nm-s { display: none; }
@media (max-width: 640px) {
  /* 手机：四个入口收成屏幕底部的一排标签，图标在上、字在下；iPhone 底边的横条让开 */
  .shell { flex-direction: column; min-height: 0; }
  .side { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 10; flex-direction: row; align-items: stretch; gap: 0;
    width: auto; height: auto; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); overflow: visible;
    border-right: 0; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); }
  .side .who { display: none; }
  .side a { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 2px; font-size: 11px;
    line-height: 14px; white-space: nowrap; }
  .side a.on { background: none; }
  .side a .ic { width: 22px; height: 22px; }
  .side a:has(.nm-s) .nm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .side .nm-s { display: inline; }
  .side .badge { top: 3px; right: auto; left: calc(50% + 6px); margin-top: 0; min-width: 18px; height: 18px; padding: 0 5px; line-height: 18px; font-size: 10px; }
  .main { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  #app:has(.shell) ~ #toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .page { padding: 28px 16px 64px; }
  h1 { font-size: 22px; }
  .page > h1 + p + * { margin-top: 24px; }
  .page > * + *, .page > [data-sec] > * + * { margin-top: 16px; }
  .form { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .form > label:not(:first-child) { margin-top: 10px; }
  .form > span:empty { display: none; }
  .row.top > .grow { flex-basis: 100%; }
}

/* 框：白底、细边、留足空白 */
.box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.box > * + * { margin-top: 12px; }
.box > h3 + * { margin-top: 14px; }
.box > :last-child { margin-bottom: 0; }
.box > b { display: block; }
.box > b + .small { margin-top: 2px; }
.box :is(.row, .form, label) + p.small { margin-top: 6px; }
:is(.box, .item) p:last-child { margin-bottom: 0; }
.box > .mono { display: flex; flex-direction: column-reverse; max-height: 440px; overflow: auto; padding: 12px 14px;
  background: var(--soft); border-radius: var(--radius-sm); }
.box > .mono + .mono { margin-top: 6px; }
@media (max-width: 640px) { .box { padding: 18px 16px; } }

.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row.top { align-items: flex-start; }
.grow { flex: 1; min-width: 0; }

/* 列表：挨着的条目并成一张表，中间一道细线；放在框里的不再套框 */
.list > * + * { margin-top: 10px; }
.item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; }
.item > b { display: block; }
.item:not(.row) > * + * { margin-top: 4px; }
.item:not(.row) > .row + b { margin-top: 8px; }
.item.row > .dot:first-child { align-self: flex-start; margin: 7px 2px 0; }
.item :where(button:not(.link)) { padding: 5px 12px; font-size: 13px; }
.list > .item { border-radius: 0; }
.list > .item + .item { margin-top: -1px; }
.list > .item:first-child { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.list > .item:last-child { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }
.box .list > .item { margin-top: 0; padding: 12px 0; border-width: 1px 0 0; border-radius: 0; }
.box .list > .item:first-child { padding-top: 2px; border-top: 0; }
.box .list > .item:last-child { padding-bottom: 0; }
@media (max-width: 640px) { .item { padding: 12px 14px; } }

/* 设置里用量的几个数：一条细线隔开的统计条 */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.card { min-width: 0; padding: 18px 20px 16px; background: var(--panel); }
.card .t { font-size: 12px; color: var(--muted); }
.card .v { margin: 6px 0 2px; font-size: 26px; font-weight: 600; line-height: 1.2; color: var(--ink); letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; }
.card .v.warn { color: var(--yellow); }
.card .s { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .card { padding: 14px 16px; } .card .v { font-size: 22px; } }

/* 首页的日历（pages/home.js）：一个月一张表，周一开头；有事的那天列出当天的事，手机上只显示小圆点；下面是选中那天的事 */
.cal-who { gap: 8px; font-size: 14px; color: var(--muted); }
.cal-who > span:nth-child(2) { color: var(--ink); font-weight: 600; }
.page > .cal-digest { margin-top: 8px; color: var(--text); }
.cal-sync { margin-top: 8px; font-size: 14px; color: var(--muted); }
.cal-sync.is-bad { color: var(--text); }
.cal-sync.is-bad > b { color: var(--yellow); }
.cal-sync > button { margin-left: 8px; padding: 2px 10px; font-size: 13px; }
.page > .cal-digest + .cal { margin-top: 20px; }
.cal { padding: 20px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cal-title { margin: 0; font-size: 20px; font-variant-numeric: tabular-nums; }
.cal-head button { min-width: 40px; padding: 5px 12px; }
.box > .cal-grid { margin-top: 16px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden; }
.cal-w { padding: 6px 8px; background: var(--soft); color: var(--muted); font-size: 12px; text-align: center; }
.cal-c { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; min-height: 92px; padding: 6px; margin: 0;
  border: 0; border-radius: 0; background: var(--panel); text-align: left; font-weight: 400; color: var(--text); }
.cal-c.is-out { background: var(--soft); }
button.cal-c:hover { background: var(--soft); }
.cal-c.is-pick { box-shadow: inset 0 0 0 2px var(--ink); }
.cal-n { align-self: flex-start; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 12px; font-size: 13px; line-height: 24px; text-align: center;
  font-variant-numeric: tabular-nums; }
.cal-c.is-today .cal-n { background: var(--ink); color: #fff; font-weight: 600; }
.cal-evs { display: grid; gap: 2px; min-width: 0; }
.cal-ev { display: block; padding: 1px 6px; border-radius: 4px; background: var(--accent-soft); color: var(--ink); font-size: 12px; line-height: 18px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev b { margin-right: 4px; font-weight: 600; }
/* 来源的颜色（docs/specs/home-calendar-sources.md）：教学网蓝、我的日历绿、滴答橙；状态（等你确认、已交）写在后面，盖过来源色 */
.cal-ev.src-hub { background: rgba(10, 102, 216, .09); }
.cal-ev.src-cal { background: rgba(31, 157, 72, .11); }
.cal-ev.src-dida { background: rgba(214, 105, 0, .12); }
.cal-ev.s-needs_confirm { background: rgba(201, 138, 0, .12); }
.cal-ev.s-done { background: none; color: var(--faint); text-decoration: line-through; }
.cal-ev.s-done b { color: inherit; }
.cal-more { padding: 0 6px; font-size: 11px; color: var(--muted); }
.cal-dots { display: none; }
.box > .cal-day { margin-top: 20px; }
.cal-day > h3 { margin: 0 0 10px; }
.cal-t { flex: none; min-width: 64px; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.cal-row.s-done b, .cal-row.s-done .cal-row-t { color: var(--muted); text-decoration: line-through; }
.box .list > .item.cal-row { padding-left: 12px; }   /* 列表的边框别处有规矩，来源色用内阴影画一条 */
.cal-row.src-hub { box-shadow: inset 3px 0 0 var(--blue); }
.cal-row.src-cal { box-shadow: inset 3px 0 0 var(--green); }
.cal-row.src-dida { box-shadow: inset 3px 0 0 var(--orange); }
.cal-row .grow { min-width: 0; overflow-wrap: anywhere; }
a.cal-row-t { color: var(--ink); font-weight: 600; text-decoration: none; }
a.cal-row-t:hover { text-decoration: underline; }
.pill.cal-pill { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; line-height: 20px; }
.pill.cal-pill.src-cal { color: var(--green); }
.pill.cal-pill.src-dida { color: var(--orange); }
.box > .cal-legend { margin-top: 12px; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.cal-src { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
button.cal-src-b { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 10px; border: 1px solid var(--line-2);
  border-radius: 999px; background: var(--panel); color: var(--text); font-size: 13px; font-weight: 400; max-width: 100%; }
button.cal-src-b.is-off { color: var(--faint); text-decoration: line-through; }
button.cal-src-b.is-off .cal-src-dot { opacity: .3; }
.cal-src-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.cal-src-dot.src-hub, .cal-dots i.src-hub { background: var(--blue); }
.cal-src-dot.src-cal, .cal-dots i.src-cal { background: var(--green); }
.cal-src-dot.src-dida, .cal-dots i.src-dida { background: var(--orange); }
.cal-src-err { font-size: 12px; color: var(--red); }
@media (max-width: 640px) {
  .cal { padding: 16px 12px; }
  .cal-w { padding: 4px 0; }
  .cal-c { min-height: 52px; align-items: center; padding: 4px 2px; }
  .cal-n { align-self: center; }
  .cal-evs { display: none; }
  .cal-dots { display: flex; gap: 3px; justify-content: center; }
  .cal-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
  .cal-dots i.s-done { background: var(--faint); }
  .cal-dots i.s-needs_confirm { background: var(--yellow); }
}

/* 设置页：一组一个小标题（模型与用量、账号、高级、关于），组里的框隔开；「高级」默认收起 */
.page > .set-g { margin-top: 40px; scroll-margin-top: 24px; }
.page > h1 + .set-g { margin-top: 28px; }
.set-g > h2 { margin: 0; font-size: 17px; }
.set-g > * + *, .set-g > [data-sec] > * + *, .set-adv > * + *, .set-adv > [data-sec] > * + * { margin-top: 14px; }
.cards.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.set-adv > summary { cursor: pointer; color: var(--muted); font-size: 14px; padding: 4px 0; width: max-content; max-width: 100%; }
.set-adv > summary:hover { color: var(--ink); }
.set-adv[open] > summary { color: var(--ink); }
@media (max-width: 640px) { .cards.cards-3 { grid-template-columns: minmax(0, 1fr); } .page > .set-g { margin-top: 32px; } }

/* 状态点：带一圈同色的淡光晕 */
.dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; color: var(--gray); background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent); }
.dot.green, .dot.ok { color: var(--green); }
.dot.yellow, .dot.warn { color: var(--yellow); }
.dot.red, .dot.error { color: var(--red); }
.dot.blue { color: var(--blue); }
.dot.gray, .dot.off { color: var(--gray); }

.pill { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; line-height: 1;
  white-space: nowrap; color: var(--text); background: var(--soft); border: 1px solid var(--line); }
.pill.granted { color: var(--green); background: rgba(31, 157, 72, .08); border-color: rgba(31, 157, 72, .2); }
.pill.denied { color: var(--red); background: rgba(217, 48, 37, .07); border-color: rgba(217, 48, 37, .2); }
.pill.not_determined, .pill.unknown { color: var(--muted); }
.hint { padding: 12px 14px; background: var(--soft); border-radius: var(--radius-sm); }
.warnbox { padding: 12px 14px; background: rgba(201, 138, 0, .07); border: 1px solid rgba(201, 138, 0, .22); border-radius: var(--radius-sm); }
img.qr { display: block; width: 200px; height: 200px; padding: 10px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); image-rendering: pixelated; }
.page table { width: 100%; border-collapse: collapse; font-size: 13px; }
.page th, .page td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.page th { color: var(--muted); font-size: 12px; font-weight: 500; }
.page tr:last-child > td { border-bottom: 0; }

/* 向导（旧的分步外框） */
.wizard { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; min-height: 100%; }
.steps { display: flex; gap: 6px; padding: 18px 24px; justify-content: center; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.steps span { font-size: 12px; padding: 4px 12px; border-radius: 999px; color: var(--muted); }
.steps span.on { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.steps span.done { color: var(--ink); }
.wbody { flex: 1; padding: 40px 28px 32px; }
.wbody > * + * { margin-top: 16px; }
.wfoot { display: flex; gap: 8px; padding: 16px 28px; border-top: 1px solid var(--line); }
@media (max-width: 640px) {
  .steps { padding: 14px 16px; }
  .wbody { padding: 28px 16px; }
  .wfoot { padding: 12px 16px; }
}

/* 设置「提醒」那一组（remind.js、pages/settings.js）：一行一项，左边名字和一句说明，右边开关、时间；下面是提醒发到哪儿。
   开关、时间框、小圆点状态用 setup.css 的 su- 类 */
.rm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rm-head h3 { margin: 0; }
.box > .rm-set { margin-top: 14px; }
.rm-r { gap: 10px 28px; }
.rm-l { flex: 1 1 260px; min-width: 0; }
.rm-l .su-help { margin-top: 3px; }
.rm-name { font-size: 14px; font-weight: 500; color: var(--ink); }
.box > .rm-sub { margin: 26px 0 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.box > .rm-sub + * { margin-top: 10px; }
.rm-push { display: grid; border-top: 1px solid var(--line); }
.rm-ch { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rm-ch-x { display: grid; flex: 1 1 200px; min-width: 0; gap: 1px; }
.rm-ch-x b { font-size: 14px; font-weight: 500; }
.rm-ch-x span { font-size: 12px; line-height: 1.5; color: var(--muted); }
.rm-ch-s { display: flex; flex: none; align-items: center; gap: 10px; }   /* 状态和按钮：窄屏上一起换到下一行 */
.rm-ch-s > button:not(.su-link) { padding: 5px 12px; font-size: 13px; }
.rm-ch-s > .su-link { font-size: 13px; }
.box.rm > .su-help, .box.rm > .su-msg { margin-top: 12px; }
.rm-fix { display: grid; gap: 2px; margin: 8px 0; padding-left: 20px; font-size: 13px; line-height: 1.6; color: var(--text); }

/* 弹出来的：提示条、对话框、秘书的通知、顶上的一条 */
#toast { position: fixed; left: 50%; bottom: 28px; z-index: 60; width: max-content; max-width: calc(100vw - 32px); padding: 10px 18px;
  border-radius: var(--radius-sm); background: var(--ink); color: #fff; font-size: 13px; line-height: 1.5; box-shadow: var(--shadow);
  transform: translateX(-50%); animation: toast-in .2s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* 页面里的对话框 */
.modal { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(17, 17, 17, .28); animation: fade-in .15s ease-out; }
.modal-box { width: 100%; max-width: 440px; padding: 24px; background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 24px 64px rgba(0, 0, 0, .16); animation: pop-in .18s ease-out; }
.modal-box > p { margin: 0 0 20px; line-height: 1.7; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }

/* 秘书的通知（网页版弹在页面右上角） */
.banner { position: fixed; top: 16px; right: 16px; z-index: 30; display: flex; gap: 12px; width: min(360px, calc(100vw - 32px));
  padding: 14px 12px 14px 14px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); animation: pop-in .2s ease-out; }
.banner.urgent { border-color: rgba(217, 48, 37, .45); }
.banner .ic { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px;
  background: var(--accent); color: #fff; font-weight: 600; }
.banner.urgent .ic { background: var(--red); }
.banner b { display: block; color: var(--ink); line-height: 1.45; }
.banner .small { margin-top: 2px; color: var(--muted); }
.banner .x { align-self: flex-start; padding: 0 4px; font-size: 18px; line-height: 1; color: var(--gray); }
.banner .x:hover { color: var(--ink); text-decoration: none; }

/* 连不上服务器、网站换了版本时顶上的一条（页面不清空）。高 34px：首页的顶栏按这个高度让开它 */
#topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center;
  align-items: center; min-height: 34px; padding: 6px 16px; background: rgba(255, 255, 255, .94); color: var(--ink); font-size: 13px;
  line-height: 20px; border-bottom: 1px solid var(--line); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); }
#topbar::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }
#topbar:has(.link)::before { background: var(--blue); }
#topbar .link { padding: 0 2px; font-size: 13px; }
#topbar + #app { padding-top: 34px; }
#topbar + #app .side { top: 34px; height: calc(100vh - 34px); }
#topbar ~ .banner { top: 50px; }
@media (max-width: 640px) { #topbar + #app .side { top: auto; height: auto; } }

/* 触屏：按钮再高一点，好按 */
@media (pointer: coarse) {
  :where(button) { padding-top: 9px; padding-bottom: 9px; }
  :where(button).link { padding-top: 6px; padding-bottom: 6px; }
  .item :where(button:not(.link)) { padding-top: 7px; padding-bottom: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  #toast, .modal, .modal-box, .banner { animation: none; }
}