/* 鲸选RPA 管理后台 · 页面：首页、数据统计、使用指南、首次向导、我的账号、无权限 */

/* ---------- 首页（与确认的样稿一致） ---------- */

/* The welcome banner and its children all respond to the dashboard width, so the banner itself is not a container. */
#dashboard { container: dashboard / inline-size; }
.home-overview, .home-trend, .home-recent, .home-guide { container-type: inline-size; }

.welcome-banner { display: flex; flex-direction: column; gap: 20px; }
.welcome-copy { display: flex; flex-direction: column; gap: 16px; }
.welcome-copy h2 { font-size: 20px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; text-wrap: balance; }
.welcome-copy p { margin-top: 4px; color: var(--muted-foreground); font-size: 14px; line-height: 1.6; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.welcome-actions button { padding: 0 16px; }

.welcome-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.welcome-flow li { display: flex; align-items: center; }
.welcome-flow li > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  background: rgb(239 243 248 / 0.8);
  font-size: 14px;
  font-weight: 500;
}
.welcome-flow li > span .icon { width: 16px; height: 16px; color: var(--primary); }
.welcome-flow .flow-arrow .icon { width: 16px; height: 16px; color: rgb(92 109 125 / 0.6); }

@container (min-width: 768px) {
  .welcome-banner { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; }
  .welcome-copy h2 { font-size: 24px; }
  .welcome-flow { padding-top: 0; border-top: 0; }
}

.home-shortcuts { display: flex; flex-direction: column; gap: 12px; }
.business-shortcuts { display: grid; gap: 12px; }
@container dashboard (min-width: 448px) { .business-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container dashboard (min-width: 896px) { .business-shortcuts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

button.shortcut {
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  height: auto;
  padding: 16px;
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--shadow-surface);
  font-weight: 400;
  text-align: left;
  white-space: normal;
}
button.shortcut:hover:not(:disabled), button.shortcut:active:not(:disabled) { background: var(--card); box-shadow: var(--shadow-surface-hover); }
.shortcut-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  color: var(--primary);
}
button.shortcut .shortcut-icon .icon { width: 18px; height: 18px; }
.shortcut-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.shortcut-text b { font-size: 14px; font-weight: 600; }
.shortcut-text small { overflow: hidden; color: var(--muted-foreground); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
button.shortcut .shortcut-chevron { flex-shrink: 0; color: rgb(92 109 125 / 0.6); transition: color 0.15s; }
button.shortcut:hover .shortcut-chevron { color: var(--primary); }

/* 数据概览：四个主指标 + 内容类别占比条 */
#home-summary { display: flex; flex-direction: column; gap: 20px; }
#home-summary > .subtle { font-size: 14px; }
.overview-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.overview-metrics > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.overview-metrics dt { color: var(--muted-foreground); font-size: 14px; white-space: nowrap; }
.overview-metrics dd { font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
@container (min-width: 448px) {
  .overview-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; }
  .overview-metrics > div { padding: 0 20px; border-left: 1px solid var(--border); }
  .overview-metrics > div:first-child { padding-left: 0; border-left: 0; }
}
@container (min-width: 768px) { .overview-metrics dd { font-size: 30px; } }

.content-mix { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; border-top: 1px solid var(--border); }
.content-mix-bar { display: flex; gap: 2px; width: 100%; height: 8px; overflow: hidden; border-radius: 999px; }
.content-mix-bar > span { flex-basis: 0; min-width: 4px; height: 100%; }
.content-mix-bar > .content-mix-empty { flex: 1; background: var(--muted); }
.content-mix-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.content-mix-legend > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.content-mix-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 999px; }
.content-mix-legend dt { color: var(--muted-foreground); font-size: 14px; white-space: nowrap; }
.content-mix-legend dd { margin-left: auto; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
@container (min-width: 672px) {
  .content-mix-legend { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .content-mix-legend dd { margin-left: 0; }
}

/* 内容类别只用品牌蓝的深浅区分，不引入新色相 */
.content-mix-bar .tone-1, .content-mix-dot.tone-1, .type-track .tone-1 { background: var(--primary); }
.content-mix-bar .tone-2, .content-mix-dot.tone-2, .type-track .tone-2 { background: rgb(29 111 184 / 0.65); }
.content-mix-bar .tone-3, .content-mix-dot.tone-3, .type-track .tone-3 { background: rgb(29 111 184 / 0.4); }
.content-mix-bar .tone-4, .content-mix-dot.tone-4, .type-track .tone-4 { background: rgb(29 111 184 / 0.2); }
.content-mix-bar .tone-5, .content-mix-dot.tone-5, .type-track .tone-5 { background: #b8c4d0; }

/* 趋势 / 记录 / 指南：宽屏时指南移到趋势右侧，记录占满下一行 */
.home-grid { display: grid; gap: 20px; }
@container dashboard (min-width: 896px) {
  .home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .home-trend { grid-column: span 2; }
  .home-recent { grid-column: 1 / -1; grid-row: 2; }
  .home-guide { grid-column: 3; grid-row: 1; }
}
.home-trend, .home-recent, .home-guide { display: flex; flex-direction: column; }
.home-trend .chart-host { flex: 1; }

/* 最新发送记录 */
.stamp { display: flex; flex-direction: column-reverse; gap: 2px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.stamp-date { color: var(--muted-foreground); font-size: 14px; }
.stamp-time { font-size: 14px; font-weight: 500; }
.stamp-plain { color: var(--muted-foreground); }
.type-label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.type-label .icon { width: 16px; height: 16px; color: var(--muted-foreground); }
.recent-target span { display: block; max-width: 224px; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.recent-table td { height: 64px; }
.recent-table th:last-child, .recent-table td:last-child:not(.empty) { text-align: right; }
.recent-table td > button.link { height: 32px; margin-right: -8px; padding: 0 10px; border-radius: var(--radius-sm); }
.recent-table td > button.link:hover:not(:disabled) { background: var(--primary-soft); }

/* 窄卡片：表格行改成上下排列的记录卡（同样稿） */
@container (max-width: 895px) {
  .home-recent .table-wrap { width: 100%; margin-inline: 0; overflow: visible; }
  .recent-table, .recent-table tbody { display: block; }
  .recent-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .recent-table tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "target target status"
      "type device device"
      "created created action"
      "sent sent action";
    gap: 6px 10px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-soft);
  }
  .recent-table tr:first-child { padding-top: 0; }
  .recent-table tr:last-child { padding-bottom: 0; border-bottom: 0; }
  .recent-table td, .home-recent .table-wrap td:first-child, .home-recent .table-wrap td:last-child { height: auto; padding: 0; border: 0; background: none; }
  .recent-table tr:hover td { background: none; }
  .recent-table td:nth-child(1) { grid-area: created; }
  .recent-table td:nth-child(2) { grid-area: sent; }
  .recent-table td:nth-child(3) { grid-area: device; min-width: 0; overflow: hidden; color: var(--muted-foreground); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
  .recent-table td:nth-child(3)::before { content: "·"; margin-right: 8px; }
  .recent-table td:nth-child(4) { grid-area: type; color: var(--muted-foreground); font-size: 14px; }
  .recent-table td:nth-child(5) { grid-area: target; min-width: 0; }
  .recent-table td:nth-child(6) { grid-area: status; justify-self: end; }
  .recent-table td:nth-child(7) { grid-area: action; align-self: end; justify-self: end; }
  .recent-target span { max-width: none; }
  .recent-table td:nth-child(1):not(.empty), .recent-table td:nth-child(2) { display: flex; align-items: baseline; gap: 12px; font-size: 14px; }
  .recent-table td:nth-child(1):not(.empty)::before, .recent-table td:nth-child(2)::before { flex-shrink: 0; width: 56px; color: var(--muted-foreground); }
  .recent-table td:nth-child(1):not(.empty)::before { content: "创建时间"; }
  .recent-table td:nth-child(2)::before { content: "发送时间"; }
  .recent-table .stamp { flex-direction: row; gap: 6px; }
  .recent-table .stamp-date { color: inherit; }
  .recent-table .stamp-time { font-weight: 400; }
  .recent-table td.empty { grid-column: 1 / -1; grid-row: 1 / -1; padding: 40px 24px; background: rgb(239 243 248 / 0.45); }
}

/* 使用指南（首页卡片 + 指南页） */
.guide-steps { display: grid; }
.guide-steps li { position: relative; display: flex; gap: 16px; padding-bottom: 24px; }
.guide-steps li:last-child { padding-bottom: 0; }
.guide-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 40px;
  bottom: 4px;
  left: 16px;
  border-left: 1px dashed rgb(29 111 184 / 0.25);
}
.guide-number {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.guide-steps li > div { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding-top: 5px; }
.guide-steps b { font-size: 14px; font-weight: 600; }
.guide-steps p { color: var(--muted-foreground); font-size: 14px; line-height: 1.6; text-wrap: pretty; }
@container (min-width: 672px) {
  .home-guide .guide-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .home-guide .guide-steps li { flex-direction: column; gap: 12px; padding-bottom: 0; }
  .home-guide .guide-steps li:not(:last-child)::after { top: 16px; right: -16px; bottom: auto; left: 48px; border-top: 1px dashed rgb(29 111 184 / 0.25); border-left: 0; }
  .home-guide .guide-steps li > div { padding-top: 0; }
}

.guide-card { display: flex; flex-direction: column; gap: 24px; max-width: 880px; }
.guide-intro h2 { font-size: 18px; font-weight: 600; }
.guide-intro p { margin-top: 6px; color: var(--muted-foreground); font-size: 14px; line-height: 1.6; text-wrap: pretty; }
.guide-steps-detailed li { padding-bottom: 28px; }
.guide-steps-detailed li > div { gap: 4px; }
.guide-steps-detailed .link-arrow { margin-top: 6px; }

/* ---------- 图表（首页与数据统计共用） ---------- */

.chart-host { min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; }
.chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-bottom: 12px; color: var(--muted-foreground); font-size: 14px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 8px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; }
/* Tablet cards narrower than 480px scroll the chart; phones get a 420-wide drawing (see business-dashboard.js) that fits the card. */
.business-chart { display: block; width: 100%; min-width: 480px; height: auto; overflow: visible; font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
@media (max-width: 639px) { .business-chart { min-width: 0; } }
/* The SVG scales with its card; bump the user-unit font size on narrow cards so axis
   labels render at roughly 10.5–14.5px instead of shrinking with the chart. */
.home-trend, .statistics-chart-card { container-type: inline-size; }
@container (max-width: 600px) { .business-chart text { font-size: 15px; } }
@container (max-width: 520px) { .business-chart text { font-size: 16px; } }
.business-chart rect { transition: opacity 0.15s; }
.business-chart rect:hover { opacity: 0.8; }
.chart-host .stat-footnote { margin-top: 8px; padding-top: 0; border-top: 0; }
.chart-host > .subtle { padding: 24px 0; font-size: 14px; text-align: center; }

/* ---------- 指标卡（数据统计） ---------- */

.statistics-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
@media (min-width: 1024px) { .statistics-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.business-metric { display: flex; align-items: center; gap: 12px; min-width: 0; }
.business-metric > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.business-metric span:not(.business-icon) { overflow: hidden; color: var(--muted-foreground); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.business-metric strong { font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }

.business-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  color: var(--primary);
}
.business-icon .icon { width: 18px; height: 18px; }
.business-icon.success { background: rgb(19 120 74 / 0.1); color: var(--success); }
.business-icon.failed { background: var(--destructive-soft); color: var(--destructive); }
.business-icon.neutral { background: var(--muted); color: var(--muted-foreground); }

.stat-footnote { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-soft); color: var(--muted-foreground); font-size: 13px; line-height: 1.6; text-wrap: pretty; }

/* ---------- 数据统计 ---------- */

.statistics-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.statistics-toolbar fieldset { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.statistics-toolbar legend { float: left; color: var(--muted-foreground); font-size: 14px; font-weight: 500; }
.statistics-period { margin-left: auto; font-size: 14px; font-variant-numeric: tabular-nums; }
.custom-range {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 12px;
  width: 100%;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}
.custom-range .temporal-field { flex: 0 1 200px; }
.date-range-separator { height: var(--control-height); color: var(--muted-foreground); font-size: 14px; line-height: var(--control-height); }
.custom-range .time-control-help { flex-basis: 100%; }
@media (max-width: 639px) {
  .statistics-period { flex-basis: 100%; margin-left: 0; }
  .custom-range .temporal-field { flex: 1 1 140px; }
  .date-range-separator { display: none; }
}

.statistics-chart-grid { display: grid; gap: 20px; }
@media (min-width: 1024px) {
  .statistics-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .statistics-types-card { grid-column: 1 / -1; }
}
#statistics-content { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 768px) { #statistics-content { gap: 24px; } }

.type-distribution { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px; }
.type-donut { position: relative; display: flex; flex-direction: column; flex-shrink: 0; align-items: center; justify-content: center; width: 160px; height: 160px; margin-inline: auto; }
.type-donut svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.type-donut circle { fill: none; stroke-width: 12; }
.type-donut-track { stroke: var(--muted); }
.type-donut-segment.tone-1 { stroke: var(--primary); }
.type-donut-segment.tone-2 { stroke: rgb(29 111 184 / 0.65); }
.type-donut-segment.tone-3 { stroke: rgb(29 111 184 / 0.4); }
.type-donut-segment.tone-4 { stroke: rgb(29 111 184 / 0.2); }
.type-donut-segment.tone-5 { stroke: #b8c4d0; }
.type-donut strong { position: relative; font-size: 22px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.type-donut span { position: relative; color: var(--muted-foreground); font-size: 13px; }
.type-distribution-list { display: grid; flex: 1 1 320px; gap: 16px; min-width: 0; }
@media (min-width: 1024px) { .type-distribution-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; } }
.type-item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.type-item > div { flex: 1; min-width: 0; }
.type-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 14px; }
.type-caption b { font-weight: 500; }
.type-caption span { font-weight: 600; font-variant-numeric: tabular-nums; }
.type-caption small { margin-left: 6px; color: var(--muted-foreground); font-size: 13px; font-weight: 400; }
.type-track { height: 6px; overflow: hidden; border-radius: 999px; background: var(--muted); }
.type-track span { display: block; height: 100%; border-radius: inherit; }

.statistics-table th:not(:first-child), .statistics-table td:not(:first-child) { text-align: right; }

/* ---------- 首次使用向导 ---------- */

.wizard-shell { display: flex; flex-direction: column; gap: 20px; }
.wizard-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.wizard-hero h2 { margin-top: 4px; font-size: 20px; font-weight: 600; }
.wizard-hero p { margin-top: 4px; color: var(--muted-foreground); font-size: 14px; line-height: 1.6; }
.eyebrow { color: var(--primary); font-size: 13px; font-weight: 600; }
.wizard-safety { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: var(--radius); background: var(--primary-soft); }
.wizard-safety b { color: var(--primary); font-size: 14px; }
.wizard-safety span { color: var(--muted-foreground); font-size: 13px; }

.wizard-steps { display: flex; flex-wrap: wrap; gap: 8px; }
.wizard-steps span {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--card);
  color: var(--muted-foreground);
  box-shadow: var(--shadow-surface);
  font-size: 14px;
  font-weight: 500;
}
.wizard-steps span.done { background: var(--primary-soft); color: var(--primary); box-shadow: none; }
.wizard-steps span.active { background: var(--primary); color: var(--primary-foreground); box-shadow: none; }

.wizard-grid { display: grid; gap: 20px; }
@media (min-width: 1024px) { .wizard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.wizard-form { display: grid; gap: 16px; }
@media (min-width: 640px) { .wizard-form:not(.one-column) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choice-list { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-list em { color: var(--muted-foreground); font-size: 14px; font-style: normal; font-weight: 400; }
.choice-list label.choice { padding: 6px 10px; border-radius: var(--radius-md); background: var(--muted); }
.choice-list label.choice small { color: var(--muted-foreground); }
.interval-control { display: flex; align-items: center; gap: 12px; }
.interval-control input[type="range"] { flex: 1; }
.interval-control output { min-width: 56px; text-align: right; }

.wizard-action-card, .wizard-confirm, .wizard-complete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.wizard-action-card h2, .wizard-confirm h2, .wizard-complete h2 { font-size: 16px; font-weight: 600; }
.wizard-action-card p, .wizard-complete p { margin-top: 4px; color: var(--muted-foreground); font-size: 14px; line-height: 1.6; }
.wizard-confirm p { margin-top: 4px; font-size: 14px; line-height: 1.6; }
.wizard-complete > div { flex: 1 1 240px; }
.confirm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.success-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: rgb(19 120 74 / 0.1);
  color: var(--success);
}
.success-mark .icon { width: 20px; height: 20px; }
.success-mark.large { width: 56px; height: 56px; margin-bottom: 0; }
.success-mark.large .icon { width: 28px; height: 28px; }

.check-grid { display: grid; gap: 8px; }
@media (min-width: 640px) { .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .check-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.check-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: var(--radius); background: var(--muted); font-size: 14px; }
.check-item > span {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgb(19 120 74 / 0.12);
  color: var(--success);
  font-size: 13px;
  font-weight: 700;
}
.check-item.error > span { background: var(--destructive-soft); color: var(--destructive); }
.check-item b { font-weight: 500; line-height: 1.5; }
.wizard-progress { height: 6px; margin-top: 16px; overflow: hidden; border-radius: 999px; background: var(--muted); }
#wizard-progress-bar { width: 0; height: 100%; border-radius: inherit; background: var(--primary); transition: width 0.3s ease-out; }
#wizard-progress-text { margin-top: 8px; color: var(--muted-foreground); font-size: 14px; }

/* ---------- 我的账号 ---------- */

.account-summary > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); font-size: 14px; }
.account-summary > div:first-child { padding-top: 0; }
.account-summary dt { flex-shrink: 0; color: var(--muted-foreground); }
.account-summary dd { min-width: 0; font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.account-form { display: flex; flex-direction: column; gap: 16px; }
.account-form .card-actions { margin-top: 4px; }

/* ---------- 无权限 ---------- */

main > .page.state-page.active { align-items: center; justify-content: center; gap: 12px; min-height: 60vh; text-align: center; }
.state-page h2 { font-size: 18px; font-weight: 600; text-wrap: balance; }
.state-page p { color: var(--muted-foreground); font-size: 14px; }
.state-page button { margin-top: 8px; }

/* ---------- 通用列表页附属区域 ---------- */

.list-card { display: flex; flex-direction: column; }
.task-list-status { margin-bottom: 12px; color: var(--muted-foreground); font-size: 14px; }
.list-card > .health-notices { margin-bottom: 16px; }