/* Unitick · 网站。纯白、简洁：不跟随系统的深色（docs/specs/16-landing-visual.md）。
   配色和尺寸都用这里的变量，首页（landing.css）、授权页（setup.css）、面板共用一套；名字别改，各处在用。 */
/* 设计规范（docs/specs/web-design.md）落成的变量：颜色、字号、间距、圆角、阴影和材质、动效。全站只用这一套。 */
:root {
  /* 颜色：白底、黑灰字、一个强调色（--tint，蓝）。主按钮、选中用近黑；强调色只给链接、焦点、「现在」和「进行中」 */
  --bg: #ffffff; --panel: #ffffff; --side: #ffffff;
  --ink: #111113; --text: #1d1d1f; --muted: #6e6e73; --faint: #aeaeb2;
  --line: #e8e8ed; --line-2: #d2d2d7; --soft: #f5f5f7; --soft-2: #ececf0;
  --accent: #1d1d1f; --accent-hover: #3a3a3c; --accent-soft: rgba(29, 29, 31, .06);
  --tint: #0a66d8; --tint-soft: rgba(10, 102, 216, .1); --link: var(--tint);
  --green: #1f9d48; --yellow: #c98a00; --red: #d93025; --blue: #0a66d8; --gray: #8e8e93; --orange: #d66900;

  /* 字号和字重：层级靠「大小 + 粗细」一起拉开。特大标题 700、页面标题 650、小标题 600、正文 400；大字收一点字距，正文不收 */
  --fs-hero: clamp(44px, 6.4vw, 76px); --fs-1: 32px; --fs-2: 22px; --fs-3: 17px; --fs-body: 14px; --fs-sm: 13px; --fs-xs: 12px;
  --fw-display: 700; --fw-title: 650; --fw-head: 600; --fw-medium: 500;
  --track-display: -.022em; --track-tight: -.012em; --track-head: -.004em;

  /* 间距（4 的倍数）、圆角 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --radius-xs: 6px; --radius-sm: 10px; --radius: 14px; --radius-lg: 20px; --radius-pill: 999px;

  /* 阴影分三层：贴着（卡片）、浮起（悬停、菜单）、弹出（窗口、对话框）；材质：半透明白加模糊（顶栏、底部标签、遮罩） */
  --shadow-1: 0 0 0 .5px rgba(0, 0, 0, .03), 0 1px 2px rgba(0, 0, 0, .05);
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -6px rgba(0, 0, 0, .1);
  --shadow-3: 0 2px 6px rgba(0, 0, 0, .04), 0 24px 64px -12px rgba(0, 0, 0, .2);
  --ring: 0 0 0 4px var(--tint-soft);
  --glass: rgba(255, 255, 255, .78); --blur: saturate(180%) blur(20px);

  /* 动效：时长分五档；退场比进场快；弹簧曲线带一点点回弹（不支持 linear() 的浏览器用近似的贝塞尔） */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 480ms; --dur-5: 720ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);
  --ease-spring: cubic-bezier(.3, 1.25, .5, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --rise: 12px; --pop: .96; --press: .97; --lift: -2px;   /* 进场往上移多少、弹出从多小开始、按下缩多少、悬停抬多高 */

  /* 字体：网站自带的「Unitick Sans」（fonts.css：西文数字 Inter、中文思源黑体），各平台看到的一样；没读到之前、或生僻字，用系统字体顶上 */
  --font: "Unitick Sans", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", system-ui, sans-serif;
  color-scheme: light;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {   /* 阻尼弹簧采样出来的曲线：spring 回弹约 15%，bounce 约 30% */
    --ease-spring: linear(0, .065, .205, .369, .524, .658, .765, .846, .905, .945, .972, .989, .999, 1.004, 1.006, 1.006, 1.006, 1.005, 1.004, 1.003, 1);
    --ease-bounce: linear(0, .084, .268, .476, .665, .816, .923, .991, 1.029, 1.044, 1.045, 1.039, 1.03, 1.021, 1.012, 1.006, 1.002, 1, .998, .998, 1);
  }
}
/* 系统设了「减少动态效果」：不位移、不缩放、不回弹，只留短短的淡入淡出 */
@media (prefers-reduced-motion: reduce) {
  :root { --rise: 0px; --pop: 1; --press: 1; --lift: 0px; --ease-spring: var(--ease-out); --ease-bounce: var(--ease-out);
    --dur-3: 160ms; --dur-4: 200ms; --dur-5: 240ms; }
  html { scroll-behavior: auto !important; }
}
/* 全站共用的进场：淡入、淡入上移、弹出。用 backwards 而不是 both：放完就不再占着 transform，里面 fixed 的窗口不会跟着跑 */
@keyframes u-fade { from { opacity: 0; } }
@keyframes u-rise { from { opacity: 0; transform: translateY(var(--rise)); } }
@keyframes u-pop { from { opacity: 0; transform: scale(var(--pop)); } }
@keyframes u-spin { to { transform: rotate(360deg); } }
::selection { background: rgba(10, 102, 216, .16); }

/* 底子：元素的默认样子，首页、授权页也用。状态和元素选择器都包在 :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: var(--fs-body)/1.6 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
:where(h1, h2, h3) { color: var(--ink); font-weight: var(--fw-head); text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }
body { font-kerning: normal; font-variant-numeric: proportional-nums; font-feature-settings: "kern", "calt"; }
h1 { font-size: var(--fs-1); font-weight: var(--fw-title); line-height: 1.18; letter-spacing: var(--track-tight); margin: 0 0 6px; }
h2 { font-size: var(--fs-2); font-weight: var(--fw-head); line-height: 1.3; letter-spacing: var(--track-head); 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: var(--fw-head); }
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(--tint); 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 var(--dur-2) ease, border-color var(--dur-2) ease, color var(--dur-2) ease, opacity var(--dur-2) ease,
    box-shadow var(--dur-2) ease, transform var(--dur-3) var(--ease-spring);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:where(button):where(:hover:not(:disabled)) { background: var(--soft); border-color: #c7c7cc; }
:where(button):where(:active:not(:disabled)) { background: var(--soft-2); transform: scale(var(--press)); transition-duration: var(--dur-1); }
:where(button).primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
:where(button).primary:where(:hover:not(:disabled)) { background: var(--accent-hover); border-color: var(--accent-hover); }
: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).link:where(:active:not(:disabled)) { background: none; transform: none; opacity: .6; }
:where(button):where(:disabled) { opacity: .4; cursor: not-allowed; }
/* 正在办（登录、创建、保存）：按钮里转一个小圈，不只是变灰 */
:where(button).is-busy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
:where(button).is-busy:where(:disabled) { opacity: .72; cursor: progress; }
:where(button).is-busy::before { content: ""; flex: none; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; opacity: .8; animation: u-spin .7s linear infinite; }

/* 输入框（不含勾选、单选）：细边，聚焦时边变成强调色、外面一圈淡淡的光晕 */
: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 var(--dur-2) ease, box-shadow var(--dur-2) 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: #c7c7cc; }
:where(input:not([type=checkbox], [type=radio]), textarea, select):where(:focus) { outline: none; border-color: var(--tint);
  box-shadow: var(--ring); }
: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.agreed { accent-color: var(--blue); cursor: default; }
label.check:has(> input.agreed) { cursor: default; }
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:active:not(:disabled) { background: none; }
.seg button:hover:not(:disabled) { background: none; color: var(--ink); }
.seg button.on { background: var(--panel); color: var(--ink); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06), 0 2px 6px rgba(0, 0, 0, .08); }

/* 表单：左边说明、右边填 */
.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.css；这里是右边的一页 */
.main { flex: 1; min-width: 0; }
.page { max-width: 840px; margin: 0 auto; padding: 48px 40px 96px; overflow-wrap: anywhere; }
/* 切页：一块一块淡入上移，前后差 40ms。首页的对话、「功能与授权」里会弹 fixed 的窗口，那两块只淡入不位移 */
.page > * { animation: u-rise var(--dur-4) var(--ease-out) backwards; }
.page > .su-embed { animation-name: u-fade; }
.page > .chat-scrim { margin: 0; animation: none; }   /* 遮罩是 .page 的最后一块：别吃到上面的段距，不然顶上露出一条 */
.page > :nth-child(2) { animation-delay: 40ms; }
.page > :nth-child(3) { animation-delay: 80ms; }
.page > :nth-child(4) { animation-delay: 120ms; }
.page > :nth-child(n+5) { animation-delay: 160ms; }
/* 一页里的上下间距：标题和说明挨着，说明和下面的内容隔开；随状态刷新的区块里面也一样 */
.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) {
  .page { padding: 40px 28px 88px; }
}
@media (max-width: 640px) {
  .page { padding: 28px 16px 64px; }
  h1 { font-size: 27px; }
  .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-shadow: var(--shadow-1); }
.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; box-shadow: var(--shadow-1); }
.card { min-width: 0; padding: 18px 20px 16px; background: var(--panel); }
.card .t { font-size: 12px; color: var(--muted); }
.card .v { margin: 8px 0 2px; font-size: 32px; font-weight: var(--fw-title); line-height: 1.1; color: var(--ink); letter-spacing: var(--track-display);
  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/settings.js）分两级：入口是几组圆角列表（像手机的「设置」），一行一个入口，右边是现在的值、再右边一个小箭头；
   点进去是那一项自己的一页，顶上一个「‹ 设置」回来。一组里的行用缩进的细线隔开（让出图标那一列） */
.page > [data-sec] > .set-list + .set-list { margin-top: 24px; }
.page > h1 + [data-sec]:has(> .set-list) { margin-top: 24px; }
.set-list { display: block; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.set-row { position: relative; display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 10px 16px; color: var(--ink);
  text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-2) ease; }
.set-row + .set-row::before { content: ""; position: absolute; top: 0; left: 62px; right: 0; height: 1px; background: var(--line); }
:where(.set-row):hover { background: var(--soft); text-decoration: none; }
.set-row:active { background: var(--soft-2); transition-duration: 0s; }
.set-row:focus-visible { outline-offset: -3px; border-radius: var(--radius); }
.set-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--soft); color: var(--ink);
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .06); }
.set-ic-i { width: 18px; height: 18px; }
.set-row-t { flex: none; font-size: 15px; font-weight: var(--fw-medium); }
.set-row-v { flex: 1; min-width: 0; text-align: right; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums; }
.set-chev { flex: none; width: 16px; height: 16px; margin-left: -6px; color: var(--faint); transition: transform var(--dur-3) var(--ease-spring), color var(--dur-2) ease; }
.set-row:hover .set-chev { color: var(--muted); transform: translateX(2px); }
.set-back { display: inline-flex; align-items: center; gap: 2px; width: max-content; margin-left: -8px; padding: 4px 10px 4px 2px; border-radius: 8px;
  font-size: 15px; color: var(--tint); text-decoration: none; transition: background-color var(--dur-2) ease; }
:where(.set-back):hover { background: var(--tint-soft); text-decoration: none; }
.set-back-i { width: 20px; height: 20px; transition: transform var(--dur-3) var(--ease-spring); }
.set-back:hover .set-back-i { transform: translateX(-2px); }
.page > .set-back + h1 { margin-top: 10px; }
.page > .set-back + h1 + * { margin-top: 28px; }
/* 页名下面最多一句：这一页是干什么的 */
.set-lead { color: var(--muted); font-size: 14px; }
.page > .set-back + h1 + :is(.set-lead, [data-sec]:has(> .set-lead)) { margin-top: 6px; }
.page > :is(.set-lead, [data-sec]:has(> .set-lead)) + * { margin-top: 24px; }
/* 一页里收起来的一块（「模型与每日上限」）：标题一行，右边现在的值和一个会转的小箭头 */
.set-more > summary { display: flex; align-items: center; gap: 10px; margin: -4px 0; padding: 4px 0; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 600; color: var(--ink); }
.set-more > summary::-webkit-details-marker { display: none; }
.set-more > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: 0 4px 3px 0; border: solid var(--faint); border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg); transition: transform var(--dur-3) var(--ease-spring); }
.set-more[open] > summary::after { transform: translateY(3px) rotate(225deg); }
.set-more-v { margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 400; color: var(--muted); }
.set-more[open] > summary ~ * { animation: u-rise var(--dur-3) var(--ease-out) backwards; }
.set-more > summary + * { margin-top: 18px; }
.set-notes { display: grid; gap: 10px; margin: 0; padding-left: 18px; }
.set-notes li::marker { color: var(--faint); }
.cards.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 一行：标题、状态标签、右边的数或按钮（助手运行、关于、账号） */
.set-run, .set-acct { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.set-run h3 { margin: 0; }
.set-run-n { margin-left: auto; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.box > .set-run + * { margin-top: 14px; }
.set-acct > b { font-size: 15px; font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.set-acct > button { margin-left: auto; }
.set-key { display: flex; align-items: center; min-height: 24px; }
@media (max-width: 640px) {
  .cards.cards-3 { grid-template-columns: minmax(0, 1fr); }
  .set-row { min-height: 54px; padding: 9px 14px; }
  .set-row + .set-row::before { left: 60px; }
}

/* 待办（pages/inbox.js）：顶上一个「＋ 新建待办」，下面就是待办清单 */
.page > .box.ib-panel { margin-top: 12px; }

/* 状态点：带一圈同色的淡光晕 */
.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-l .su-help.rm-note { margin-top: 4px; color: var(--yellow); }
.rm-l .rm-sub { display: block; margin-top: 6px; }
.rm-l.rm-l-one { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }   /* 只有名字（和一个小标签），不写说明 */
/* 提醒规则的控件：右边一组，都是高 34 的胶囊（时间按钮在 timepick.css）；选中的浅蓝底蓝字，关着的那一行置灰 */
.rm-set .su-set-r { min-height: 60px; }
.rm-ctl { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rm-set .rm-l { flex-basis: 120px; }   /* 窄屏上只有一个时间的行不换行，控件多的才换到下一行 */
/* 截止前多久提醒（remind.js 的 leadPicker，设置和事项详情共用）：带方框的勾选，勾上的蓝底白勾，一眼看得出；
   自定义的几条在下面一整行，每条「提前 [数字] [单位]」和删除 */
.rm-cks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rm-ck { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 10px; border: 1px solid var(--line-2);
  border-radius: var(--radius-pill); background: var(--panel); color: var(--ink); font-size: 13px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-2) ease; }
.rm-ck:hover { border-color: var(--faint); }
.rm-ck input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.rm-ck-box { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border: 1.5px solid var(--line-2); border-radius: 5px; background: var(--panel);
  color: var(--panel); transition: background-color var(--dur-2) ease, border-color var(--dur-2) ease; }
.rm-ck-box .ic { width: 13px; height: 13px; stroke-width: 2.6; opacity: 0; transform: scale(.6); transition: opacity var(--dur-2) ease, transform var(--dur-3) var(--ease-spring); }
.rm-ck input:checked + .rm-ck-box { border-color: var(--tint); background: var(--tint); }
.rm-ck input:checked + .rm-ck-box .ic { opacity: 1; transform: none; }
.rm-ck input:focus-visible + .rm-ck-box { outline: 2px solid var(--tint); outline-offset: 2px; }
.rm-ck:has(input:disabled) { border-color: var(--line); background: var(--soft); color: var(--faint); cursor: default; }
.rm-ck input:disabled + .rm-ck-box { border-color: var(--line-2); background: var(--soft); }
.rm-ck input:disabled:checked + .rm-ck-box { border-color: var(--faint); background: var(--faint); }
.rm-cus { display: grid; justify-items: end; gap: 8px; }
.rm-r-due > .rm-cus { flex: 1 0 100%; }
.rm-cus[hidden] { display: none; }
.rm-cus-rows { display: grid; justify-items: end; gap: 8px; }
.rm-cus-r { display: inline-flex; align-items: center; gap: 8px; }
.rm-cus-k { font-size: 13px; color: var(--muted); }
.rm-num { width: 64px; height: 34px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--radius-pill); background: var(--panel); color: var(--ink);
  font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; text-align: center; -moz-appearance: textfield; }
.rm-num::-webkit-inner-spin-button, .rm-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rm-num:focus { outline: none; border-color: var(--tint); box-shadow: var(--ring); }
.rm-num[aria-invalid="true"] { border-color: var(--red); }
.rm-num:disabled { border-color: var(--line); background: var(--soft); color: var(--faint); }
.rm-unit { min-width: 76px; }
.rm-del { width: 30px; height: 30px; }
.rm-kinds { display: contents; }   /* 专用默认那几行（remind.js 的 dueTimeBox）：和上面一行同一组，分隔线照旧 */
.rm-add { height: 30px; padding: 0 4px; border: 0; background: none; color: var(--tint); font: inherit; font-size: 13px; cursor: pointer; }
.rm-add:hover:not(:disabled) { text-decoration: underline; }
.rm-add:disabled { color: var(--faint); cursor: default; }
.rm-err { margin: 0; font-size: 12px; color: var(--red); }
.rm-err:empty { display: none; }
@media (max-width: 640px) {
  .rm-cus, .rm-cus-rows { justify-items: start; }
}
.rm-sel { position: relative; display: inline-flex; }
.rm-sel::after { content: ""; position: absolute; top: 50%; right: 14px; width: 6px; height: 6px; margin-top: -5px; border: solid var(--muted); border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg); pointer-events: none; }
.rm-sel:has(:disabled)::after { border-color: var(--faint); }
.rm-days { height: 34px; padding: 0 32px 0 14px; border: 1px solid var(--line-2); border-radius: var(--radius-pill); background: var(--panel); color: var(--ink);
  font: inherit; font-size: 14px; cursor: pointer; -webkit-appearance: none; appearance: none; transition: border-color var(--dur-2) ease; }
.rm-days:hover:not(:disabled) { border-color: var(--faint); }
.rm-days:focus-visible { outline: none; border-color: var(--tint); box-shadow: var(--ring); }
.rm-days:disabled { border-color: var(--line); background: var(--soft); color: var(--faint); cursor: default; }
.rm-to { font-size: 13px; color: var(--muted); }
.rm-name { font-size: 14px; font-weight: 500; color: var(--ink); }
.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-t { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 500; }
.rm-ch.is-off .rm-ch-t { color: var(--faint); }
.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-pill); background: rgba(29, 29, 31, .92); color: #fff; font-size: 13px; line-height: 1.5; box-shadow: var(--shadow-3);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  transform: translateX(-50%); animation: toast-in var(--dur-4) var(--ease-spring); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, calc(var(--rise) * 1.5)) scale(var(--pop)); } 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, .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: u-fade var(--dur-2) 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-lg); box-shadow: var(--shadow-3); animation: u-pop var(--dur-4) var(--ease-spring); }
.modal-box > p { margin: 0 0 20px; line-height: 1.7; }
@keyframes pop-in { from { opacity: 0; transform: translateX(calc(var(--rise) * 2)) scale(var(--pop)); } }

/* 秘书的通知（网页版弹在页面右上角） */
.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(--glass); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-lg);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow-3); animation: pop-in var(--dur-4) var(--ease-spring); }
.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: var(--glass); color: var(--ink); font-size: 13px;
  line-height: 20px; border-bottom: 1px solid var(--line); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  animation: topbar-in var(--dur-3) var(--ease-out); }
@keyframes topbar-in { from { opacity: 0; transform: translateY(calc(var(--rise) * -2)); } }
#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 .sb { top: 34px; height: calc(100vh - 34px); }
#topbar ~ .banner { top: 50px; }
#topbar + #app .mtop { top: 34px; }

/* 触屏：按钮再高一点，好按 */
@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; }
}

/* 步骤条（widgets.js 的 stepsBar）：窄的地方竖着排，够宽横着排 */
.prog { container-type: inline-size; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-1);
  transition: border-color var(--dur-3) ease; }
.prog.is-live { border-color: rgba(10, 102, 216, .35); }
.prog.is-failed { border-color: rgba(217, 48, 37, .4); }
.prog-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--ink); }
.prog-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.prog-l { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; }
.st { position: relative; display: flex; gap: 10px; padding-bottom: 12px; color: var(--muted); }
.st:last-child { padding-bottom: 0; }
.st::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; border-radius: 1px; background: var(--line); }
.st:last-child::before { display: none; }
.st.st-done::before { background: var(--green); }
.st-dot { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 50%; border: 2px solid var(--line-2); background: var(--panel); font-size: 11px; font-weight: 600; color: var(--muted); }
.st-t { display: flex; flex-direction: column; min-width: 0; padding-top: 1px; }
.st-l { line-height: 20px; }
.st-n { font-size: 12px; line-height: 1.5; color: var(--muted); }
.st-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.st-done { color: var(--text); }
.st-done .st-dot { border-color: var(--green); background: var(--green); color: #fff; animation: st-pop var(--dur-4) var(--ease-bounce) backwards; }
@keyframes st-pop { from { transform: scale(calc(var(--pop) * .7)); } }
.st-doing { color: var(--ink); font-weight: 600; }
.st-doing .st-n { color: var(--blue); font-weight: 400; }
.st-doing .st-dot { border-color: var(--blue); color: var(--blue); }
.st-doing .st-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--blue);
  animation: u-spin .9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .st-doing .st-dot::after { animation: none; border-color: rgba(10, 102, 216, .3); } }
.st-skipped { color: var(--faint); }
.st-skipped .st-dot { border-style: dashed; color: var(--faint); }
.st-failed { color: var(--red); font-weight: 600; }
.st-failed .st-dot { border-color: var(--red); background: var(--red); color: #fff; }
.prog-err { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(217, 48, 37, .06); color: var(--red); font-size: 13px; }
.prog-err b { color: var(--red); }
.prog-err > div { color: var(--text); margin-top: 2px; }
.prog-go { margin-top: 4px; font-size: 13px; }
@container (min-width: 520px) {
  .prog-l { flex-direction: row; }
  .st { flex: 1 1 0; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0 8px 0 0; }
  .st::before { left: 22px; right: 0; top: 10px; bottom: auto; width: auto; height: 2px; }
}
/* 设置页「视频转笔记」：下次加额度的时刻，醒目一条 */
.jimu-next { background: var(--tint-soft); color: var(--tint); font-weight: var(--fw-medium); border-radius: var(--radius-sm); padding: 10px 14px; }
.jimu-own { gap: 8px; flex-wrap: wrap; }