/* 系统怎么运转。颜色只用 tokens.css 变量（UI 门禁）。 */
[hidden] { display: none !important; }
body { background: var(--canvas); color: var(--text-primary); }
.sm-app { margin: 0 auto; padding: 20px 16px 64px; max-width: 1100px; display: flex; flex-direction: column; gap: 14px; }
.sm-head h1 { margin: 0 0 6px; font-size: 22px; }
.sm-head p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.6; }
.sm-principle { border: 1px solid var(--accent-soft-border); background: var(--accent-soft-bg); color: var(--accent-soft-fg);
  border-radius: 10px; padding: 10px 14px; font-size: 14px; line-height: 1.6; font-weight: 600; }

.sm-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.sm-card h2 { margin: 0 0 12px; font-size: 16px; }
.sm-card h2 small { font-weight: 400; color: var(--text-muted); font-size: 12px; margin-left: 6px; }

.sm-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.sm-flow li { position: relative; padding: 0 0 14px 38px; }
.sm-flow li::before { content: attr(data-n); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: var(--text-on-accent); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sm-flow li:not(:last-child)::after { content: ""; position: absolute; left: 12px; top: 28px; bottom: 2px; width: 2px; background: var(--border-strong); }
.sm-flow .t { font-weight: 700; font-size: 15px; }
.sm-flow .w { color: var(--text-muted); font-size: 12px; margin-left: 8px; font-weight: 400; }
.sm-flow .d { margin: 4px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.sm-flow .ok, .sm-flow .no { margin: 4px 0 0; font-size: 13px; line-height: 1.6; padding: 4px 8px; border-radius: 6px; }
.sm-flow .ok { background: var(--success-bg); color: var(--success-fg); }
.sm-flow .no { background: var(--warning-bg); color: var(--warning-fg); }

.sm-switches { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.sm-sw { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.6; }
.sm-sw b { display: block; font-size: 14px; }
.sm-sw .st { font-weight: 700; }
.sm-sw .st.on { color: var(--success-fg); }
.sm-sw .st.off { color: var(--text-muted); }
.sm-sw .r { color: var(--text-muted); font-size: 12px; }

.sm-table-wrap { overflow-x: auto; }
.sm-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.6; }
.sm-table th { text-align: left; color: var(--text-muted); font-weight: 600; background: var(--surface-sunken); padding: 6px 10px; white-space: nowrap; }
.sm-table td { padding: 8px 10px; border-top: 1px solid var(--border-subtle); vertical-align: top; }
.sm-table td.home { font-weight: 700; color: var(--accent); white-space: nowrap; }
.sm-table td.time { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.sm-table .last { color: var(--success-fg); font-size: 12px; white-space: nowrap; }
.sm-table .note { color: var(--text-muted); }

.sm-howto { margin: 0; display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: 8px 14px; font-size: 13px; line-height: 1.6; }
.sm-howto dt { font-weight: 700; }
.sm-howto dd { margin: 0; color: var(--text-secondary); }
@media (max-width: 640px) { .sm-howto { grid-template-columns: 1fr; } .sm-howto dd { margin-bottom: 6px; } }

.sm-msg { color: var(--danger-fg); font-size: 13px; }

/* 交费、充值、账号在哪（2026-09-27，内容来自 app/billing.py） */
.sm-bill { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 10px; }
.sm-bill-row { border: 1px solid var(--border-subtle); border-radius: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.65; min-width: 0; }
.sm-bill-row p { margin: 3px 0; overflow-wrap: anywhere; }
.sm-bill-row .t { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.sm-bill-row .s { font-weight: 600; }
.sm-bill-row .k { display: inline-block; color: var(--text-muted); margin-right: 8px; min-width: 7em; }
.sm-bill-row a { color: var(--accent); }
.sm-bill-row details { margin: 3px 0; }
.sm-bill-row summary { cursor: pointer; color: var(--accent); }
.sm-bill-row ol { margin: 4px 0; padding-left: 1.4em; }
.sm-bill-row .st { border-radius: 999px; padding: 0 9px; font-size: 12px; font-weight: 600; }
.sm-bill-row .st.red { background: var(--danger-bg); color: var(--danger-fg); }
.sm-bill-row .st.yellow { background: var(--warning-bg); color: var(--warning-fg); }
.sm-bill-row .st.green { background: var(--success-bg); color: var(--success-fg); }
.sm-bill-row .st.gray { background: var(--neutral-bg); color: var(--neutral-fg); }
.sm-sub { font-size: 14px; margin: 16px 0 8px; }

.sm-int td { vertical-align: top; font-size: 13px; line-height: 1.6; }

/* 以后怎么替换旧系统：四步横排，窄屏自动换行 */
.sm-steps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 10px; }
.sm-steps li { border: 1px solid var(--border-subtle); border-top: 3px solid var(--accent); border-radius: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.6; }
.sm-steps li p { margin: 4px 0 0; color: var(--text-secondary); }
.sm-steps li p.ok { color: var(--success-fg); }

/* 一项一块（2026-10-01 老板：「中间有几列很瘦很长，太难看了」）：原来五列宽表里每格都是一段话，几列挤成细长条、
   右边还被切掉。改成左边名字、右边「标签：内容」一行一项；一段话太长先显示三行，点「展开全部」看完。 */
.sm-rows { display: flex; flex-direction: column; }
.sm-row { display: grid; grid-template-columns: minmax(140px, 210px) minmax(0, 1fr); gap: 4px 18px; padding: 12px 0;
  border-top: 1px solid var(--border-subtle); }
/* 名字都短的（飞书、微信、简道云……）左边窄一点，内容多占地方 */
.sm-rows.short .sm-row { grid-template-columns: minmax(96px, 150px) minmax(0, 1fr); }
.sm-row:first-child { border-top: 0; padding-top: 0; }
.sm-row:last-child { padding-bottom: 0; }
.sm-row .nm { font-weight: 700; font-size: 14px; line-height: 1.6; min-width: 0; }
.sm-kv { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; font-size: 13px; line-height: 1.65; min-width: 0; }
.sm-kv dt { color: var(--text-muted); white-space: nowrap; }
.sm-kv dd { margin: 0; color: var(--text-secondary); min-width: 0; overflow-wrap: anywhere; }
.sm-kv dd.home { color: var(--accent); font-weight: 700; }
.sm-kv dd.warn { color: var(--text-muted); }
.sm-kv .tx.clip { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sm-more { border: 0; background: none; padding: 0; margin-top: 2px; color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.sm-more:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .sm-rows .sm-row, .sm-rows.short .sm-row { grid-template-columns: minmax(0, 1fr); }
  .sm-kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sm-kv dt { margin-top: 6px; }
}
/* 每天自动跑的：时间、最近一次两列不折行，「做什么」占满 */
#sm-schedule td:last-child, #sm-schedule th:last-child { width: 1%; white-space: nowrap; }

/* 老板 10-04 可视化：小标题前加图标（flex 后小字跟在标题后面、窄了折行）；开关、交费状态换成全站状态牌 */
.sm-card h2.sqv-h { flex-wrap: wrap; row-gap: 2px; }
.sm-sw .sqv-pill, .sm-bill-row .sqv-pill { flex: none; }

/* 10-24 常用网址：一组一排小卡（名字 + 网址 + 干什么 + 用哪个账号登） */
.sm-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 8px; margin-bottom: 4px; }
.sm-link { border: 1px solid var(--border-subtle); border-radius: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.55; min-width: 0; background: var(--surface); }
.sm-link .n { font-weight: 700; font-size: 14px; }
.sm-link .n a { color: var(--accent); text-decoration: none; }
.sm-link .n a:hover { text-decoration: underline; }
.sm-link .u { color: var(--text-muted); font-size: 12px; overflow-wrap: anywhere; }
.sm-link .d { color: var(--text-secondary); }
.sm-link .l { color: var(--text-muted); font-size: 12px; }