/* speedupai 基础样式 —— 消费 tokens.css 的变量，不写死任何颜色值
 *
 * 规则：这个文件里不应出现 #hex 或 rgb()。所有颜色都走 var(--xxx)，
 * 这样换主题只改 tokens.css 一处。CI 可以 grep 这条约束。
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* 页脚贴底：内容不够高时也压在视口底部，不悬在半空 */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 15px;      /* 中文 14px 偏小，15px 是办公场景的舒适下限 */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 中文不需要斜体（楷体替代效果差），统一取消 */
em, i, cite, dfn {
  font-style: normal;
  font-weight: 600;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* ---------- 布局 ---------- */

.container {
  width: min(1120px, 100% - 2.5rem);
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in oklch, var(--background) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: 56px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* 标志是固定尺寸的位图式 SVG，别让 flex 压扁它 */
.brand__mark {
  flex: none;
  display: block;
}

.site-nav {
  display: flex;
  gap: 0.25rem;
  margin-inline-start: auto;
}

/* ---------- 卡片 ---------- */

.card {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
}

.card__title {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted-foreground);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

/* ---------- 按钮 ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 38px;
  padding-inline: 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--primary-foreground);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s, background-color 0.15s;
}

.btn:hover {
  opacity: 0.88;
  text-decoration: none;
}

.btn--ghost {
  background: transparent;
  color: var(--muted-foreground);
  border-color: transparent;
}

.btn--ghost:hover {
  background: var(--accent);
  color: var(--accent-foreground);
  opacity: 1;
}

.btn--outline {
  background: transparent;
  color: var(--foreground);
  border-color: var(--border);
}

.btn--outline:hover {
  background: var(--accent);
  opacity: 1;
}

.btn--icon {
  width: 38px;
  padding-inline: 0;
}

/* 运维入口图标（心电图 SVG）。和深浅色按钮并排，尺寸由 .btn--icon 定。
 * 用 <img> 引入而非内联：图标文件可被浏览器缓存，HTML 不膨胀。
 * 代价是拿不到 currentColor（<img> 不继承父文档 CSS），所以绿色写在
 * SVG 里 —— 那也正是我们要的，状态绿不该跟深浅色翻转。 */
.btn--icon-health {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.btn--icon-health img {
  display: block;
  width: 20px;
  height: 20px;
}
.btn--icon-health:hover {
  background: color-mix(in oklab, var(--status-done) 16%, transparent);
  border-color: color-mix(in oklab, var(--status-done) 50%, var(--border));
}

/* ---------- 状态徽标 ----------
 * 五档状态。文字永远取 --foreground，不取状态色本身 ——
 * 饱和色当正文色在深底上对比度不够（实测 WCAG AA 过不了）。
 * 状态色只用在圆点和低透明度底色上。
 */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.1875rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--muted);
  color: var(--foreground);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}

.badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--status-idle);
  flex: none;
}

/* 颜色 + 形状双编码。
 * 红绿色盲看「需介入」(211,59,54) 和「已完成」(23,163,95) 会混，
 * 光靠色相不够。所以每档的圆点形状也不同：
 *   待处理 空心圆   进行中 实心圆   已完成 实心方
 *   需介入 菱形     已归档 横线
 * 这样黑白打印、色盲、以及缩到 7px 时都还能分。 */

.badge--pending::before {
  background: transparent;
  border: 2px solid var(--status-pending);
  width: 9px;
  height: 9px;
}

.badge--active::before {
  background: var(--status-active);
}

.badge--done::before {
  background: var(--status-done);
  border-radius: 1px;            /* 方块 */
}

.badge--alert::before {
  background: var(--status-alert);
  border-radius: 1px;
  transform: rotate(45deg);      /* 菱形 */
}

/* 已归档：扁横线，一眼看出「不在流程里」 */
.badge:not([class*="badge--"])::before {
  height: 2px;
  width: 9px;
  border-radius: 1px;
}

/* 「在线」这类需要强调的，给圆点加同色辉光 */
.badge--live::before {
  background: var(--status-done);
  box-shadow: 0 0 8px 0 var(--status-done);
}

/* ---------- 工具类（少量，不做成框架） ---------- */

.muted { color: var(--muted-foreground); }
.mono  { font-family: var(--font-mono); }
.row   { display: flex; align-items: center; gap: 0.75rem; }
.stack { display: grid; gap: 1rem; }

.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.8125rem; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 页面级 ---------- */

.page {
  padding-block: 2.5rem 4rem;
  /* body 是 flex 列，让主区吃掉剩余高度把页脚推到底 */
  flex: 1 0 auto;
}

/* ---------- 页脚 ----------
 * 国内站必备：备案号 + 主体名称 + 地址。
 * 备案号要能点到 beian.miit.gov.cn，这是工信部的要求。
 */

.site-footer {
  flex: none;
  border-top: 1px solid var(--border);
  background: color-mix(in oklch, var(--background) 60%, var(--card));
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-block: 1.5rem;
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.site-footer__brand img {
  flex: none;
  display: block;
}

.site-footer__name {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
}

.site-footer__meta {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

/* 备案号链接保持次要色，hover 才升到正文色 —— 它不是行动点 */
.site-footer__meta a {
  color: inherit;
  text-decoration: none;
}

.site-footer__meta a:hover {
  color: var(--foreground);
  text-decoration: underline;
}

@media (max-width: 36rem) {
  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

.page__title {
  margin: 0 0 0.375rem;
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

/* ---------- 落地首页 hero ---------- */

.hero {
  padding-block: 3rem 1rem;
  max-width: 44rem;
}

.hero__eyebrow {
  margin: 0 0 0.875rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--muted-foreground);
}

.hero__title {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.hero__lead {
  margin: 0 0 2rem;
  font-size: 1.0625rem;
  color: var(--muted-foreground);
  max-width: 34rem;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
/* 三个入口并排，得说清哪个用验证码哪个用密码 —— 否则工作室的人
 * 会去点「员工登录」，然后卡在收不到验证码上。 */
.hero__hint { margin: 0.75rem 0 0; }

/* ---------- 点阵地球 ----------
 * 画在 canvas 上，CSS 只负责尺寸、配色变量和光晕。
 * 地球是唯一允许带色的装饰（其余界面保持灰阶 + 状态色）。
 */

.globe-section {
  position: relative;
  margin-top: 1.5rem;
  padding-block: 1rem 2.5rem;
  text-align: center;
}

.globe {
  position: relative;
  width: 100%;
  max-width: 48rem;
  /* 用 aspect-ratio 而不是固定高度：窄屏自己变矮，不留大片空白。
   * 4/3 而不是 16/9 —— 球的半径取 min(宽,高) 的比例，扁容器会被高度卡住。 */
  aspect-ratio: 4 / 3;
  max-height: 25rem;
  margin: 0 auto;
  /* 纯装饰，别挡住下面的卡片点击 */
  pointer-events: none;
}

.globe canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* 光晕：放在 canvas 之下，大模糊低透明度。
 * 用 ::before 而不是 box-shadow，因为球是画在方形 canvas 里的，
 * box-shadow 会跟着方框走，露出直角。 */
.globe::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--globe-accent);
  opacity: 0.1;
  filter: blur(44px);
  z-index: -1;
}

/* 地球下方的三张能力卡：比业务卡片窄一档，图标 + 标题 + 一句说明 */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin-top: 2rem;
  text-align: left;
}

.feature {
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}

.feature__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.875rem;
  border-radius: var(--radius-sm);
  background: var(--secondary);
  color: var(--foreground);
}

.feature__icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.feature__title {
  margin: 0 0 0.375rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.feature__desc {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

/* ---------- 登录页 ----------
 * 居中单卡。宽度 380px —— 比这再宽，11 位手机号输入框会显得空旷。
 */

.auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 56px - 6.5rem);
}

.auth__card {
  width: 100%;
  max-width: 380px;
  padding: 2rem;
}

.auth__title {
  margin: 0 0 0.5rem;   /* 原 0.25rem 实测只有 4px 间隙，中文下太挤 */
  font-size: 1.375rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.auth__sub {
  margin: 0 0 1.5rem;
}

.auth__notice {
  margin: 0 0 1.25rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--input);
  border-left: 3px solid var(--status-pending);
  border-radius: var(--radius-sm);
  background: var(--muted);
  font-size: 0.8125rem;
}

.auth__form {
  display: grid;
  gap: 1rem;
}

.auth__submit {
  width: 100%;
  margin-top: 0.25rem;
}

/* 分隔线：两侧横线夹一个「或」。用 ::before/::after 画，不塞空 div。 */
.auth__divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block: 1.5rem;
  color: var(--muted-foreground);
  font-size: 0.8125rem;
}

.auth__divider::before,
.auth__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* 两个备选入口并排。手机号是主路径（上面的实心按钮），
 * 微信/QQ 是 outline 样式 —— 视觉权重低一档，符合主次关系。 */
.auth__alts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.auth__alt {
  width: 100%;
}

/* 资质未下来的入口：置灰且不可点，但保留可见 ——
 * 直接隐藏会让员工以为系统不支持微信登录，反复来问。 */
.auth__alt:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.auth__notice--alert {
  border-left-color: var(--status-alert);
}

/* 窄屏（<360px）并排会挤，改成上下 */
@media (max-width: 380px) {
  .auth__alts { grid-template-columns: 1fr; }
}

.auth__foot {
  margin: 1.5rem 0 0;
  text-align: center;
}

/* ---------- 表单字段 ---------- */

.field {
  display: grid;
  gap: 0.375rem;
}

.field__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

.field__input {
  width: 100%;
  height: 38px;
  padding-inline: 0.75rem;
  border: 1px solid var(--input);
  border-radius: var(--radius-sm);
  background: var(--background);
  color: var(--foreground);
  font: inherit;
  font-size: 0.9375rem;
}

.field__input::placeholder {
  color: var(--muted-foreground);
  opacity: 0.75;
}

/* 验证码：输入框 + 「获取验证码」按钮同排 */
.field__group {
  display: flex;
  gap: 0.5rem;
}

.field__addon {
  flex: none;
  white-space: nowrap;
  /* 固定宽度：文字在「获取验证码 / 发送中… / 59 秒后重发 / 重新获取」
     之间切换，不定宽会让输入框跟着一起跳。按最长的「59 秒后重发」留。 */
  min-width: 7.5em;
  text-align: center;
}

/* 倒计时中的按钮。原来 .btn 根本没有 disabled 样式，置灰了也看不出来，
   用户会继续点 —— 禁用状态必须肉眼可见。 */
.field__addon:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page__lead {
  margin: 0 0 2rem;
  color: var(--muted-foreground);
}

.kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1.25rem;
  font-size: 0.9375rem;
}

.kv dt { color: var(--muted-foreground); }
.kv dd { margin: 0; }

/* HTMX 请求中的视觉反馈 —— 不需要 JS，靠 htmx 自己加的 class */
.htmx-request,
.htmx-request .btn {
  opacity: 0.6;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 站内页图标导航栏（dock） ----------
 * 固定悬浮在视口底部正中，照参考站 cn.aiapi.bot 的位置和放大手感。
 * 静息 44px，鼠标邻近时由 static/js/dock.js 逐帧放大到 60px。
 * 没有 JS / 开了减少动态效果时退化成固定 44px，功能不变。
 */

.rail {
  position: fixed;
  bottom: 1.25rem;
  /* 不用 left:50% + translate:-50% —— 那个 50% 按含滚动条的视口宽算，
   * 有竖向滚动条时视觉上偏左（实测偏 7px）。
   * 左右都设 0 再靠 margin:auto 居中，宽度由内容决定，不吃滚动条偏差。 */
  inset-inline: 0;
  margin-inline: auto;
  width: fit-content;
  z-index: 40;
  display: flex;
  /* flex-end：按钮放大时底边对齐、往上长，和 macOS dock 一致 */
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.3125rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  /* 悬浮在内容之上，需要阴影把它和底下的文字分开 */
  box-shadow: var(--shadow-lg);
}

/* 悬浮栏会压住页脚最后一行 —— rail 在时给页脚补底部留白。
 * 不给 .site-footer 加常态留白：落地页和登录页没有 rail，白加一截空白。
 * 用 :has 按实际存在与否判断。老浏览器不支持 :has 时页脚底部会被胶囊条
 * 压住一点 —— 备案号仍可见可点（它在页脚左侧，胶囊条居中），可接受。 */
body:has(.rail) .site-footer__inner {
  padding-bottom: 5.5rem;
}

.rail__btn {
  /* --dock-size 由 dock.js 逐个按钮写入；没 JS 时取 44px 兜底 */
  --dock-size: 44px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--dock-size);
  height: var(--dock-size);
  border-radius: var(--radius-pill);
  background: transparent;
  /* 透明边框打底：hover/当前项只改 border-color，按钮尺寸不会跳动
   * （直接 border: 1px 会让盒子宽高各涨 2px，放大动画里尤其明显） */
  border: 1px solid transparent;
  color: var(--muted-foreground);
  /* 图标跟着容器放大。0.62 而不是参考站的 0.345 —— 它用 svg 线条图标，
   * 字形撑满 viewBox；我们用几何字符（▦◳⬒…），实际墨迹只占字号的六成左右，
   * 按 svg 的比例设会显著偏小（实测 0.42 时视觉上只有按钮的四分之一）。 */
  font-size: calc(var(--dock-size) * 0.62);
  line-height: 1;
  text-decoration: none;
  /* 尺寸由 JS 平滑，不走 transition —— 否则鼠标快速扫过会拖尾。
   * 颜色和底色仍用 transition，那两个不需要逐帧精度。 */
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out,
              color 0.15s ease-out, opacity 0.15s ease-out;
}

/* hover 用 --background（深色下 20.5%，比胶囊条的 24.5% 更暗），
 * 和当前项底色完全一致 —— 鼠标扫过时「亮的那个」始终只有一个，
 * 其余保持透明露出胶囊底色。
 * 不用 --accent（32%，比胶囊更亮）：那样 hover 像是浮起来，
 * 和当前项的「凹进去」是两种语言。 */
.rail__btn:hover {
  background: var(--background);
  border-color: var(--border);
  color: var(--foreground);
  text-decoration: none;
}

/* 当前项：和 hover 同一套底色 + 底部圆点区分。参考站只有圆点，
 * 加描边是因为深色下单个 4px 圆点在 2160p 屏上几乎看不见（DPI 150% 实测）。
 * 圆点在按钮内部底缘 —— 贴底悬浮时朝外会跑到容器外面。 */
.rail__btn.is-active {
  background: var(--background);
  border-color: var(--border);
  color: var(--foreground);
}

.rail__btn.is-active::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  translate: -50% 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--foreground);
}


/* 待开发的按钮：静息时压暗，表示点不动。
 * 必须写在 :hover 之前 —— 它和 .rail__btn:hover 优先级同为 0-2-0，
 * 写在后面会把 hover 的提亮压回去（踩过：底色变了但图标还是灰的）。 */
.rail__btn.is-disabled {
  color: var(--muted-foreground);
  opacity: 0.4;
  cursor: not-allowed;
}

/* hover 一律提亮图标。待开发的留 0.72 不透明度 —— 比可点的暗一档，
 * 但比静息的 0.4 清楚得多，鼠标在哪看得见。 */
.rail__btn.is-disabled:hover {
  color: var(--foreground);
  opacity: 0.72;
}

/* 文字气泡 —— 参考站纯图标无标签，用户得猜。
 * 用 data-label 做 tooltip，不额外加 DOM。
 * 朝上弹：栏本身贴着视口底，朝下会落到视口外面。 */
.rail__btn::before {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 0.75rem);
  left: 50%;
  padding: 0.25rem 0.5rem;
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  /* 微微上移再归位，和参考站的 translate-y-1 → 0 一致 */
  translate: -50% 0.25rem;
  transition: opacity 0.15s ease-out, translate 0.15s ease-out;
  z-index: 41;
}

.rail__btn:hover::before,
.rail__btn:focus-visible::before {
  opacity: 1;
  translate: -50% 0;
}

/* 窄屏：固定小尺寸，不做放大 —— 触屏没有 hover，放大无从触发，
 * 而且 7 个 44px 加间距在 320px 视口会超宽。
 * dock.js 自己判断窄屏不接管，所以这里不需要 !important
 * （行内 style 设的 CSS 变量压不住，只能从 JS 侧避免写入）。 */
@media (max-width: 40rem) {
  .rail {
    gap: 0.25rem;
    bottom: max(1rem, env(safe-area-inset-bottom));
  }
  .rail__btn {
    --dock-size: 34px;
    /* 字号不写死，让 calc(--dock-size * 0.62) 继续生效，
     * 否则窄屏图标和按钮的比例会和宽屏不一致 */
  }
}

/* 系统开了减少动态效果：dock.js 直接不接管，这里把尺寸钉死 */
@media (prefers-reduced-motion: reduce) {
  .rail__btn {
    --dock-size: 44px;
    transition: none;
  }
  .rail__btn::before { transition: opacity 0.1s; }
}

/* ---------- 区块标题 ----------
 * 参考站用「小号标题 + 一行说明」分组内容，比全用卡片包起来更清爽。
 */

.section__title {
  margin: 2.5rem 0 0.25rem;
  font-size: 1.0625rem;
  font-weight: 600;
}

.section__lead {
  margin: 0 0 1rem;
  color: var(--muted-foreground);
  font-size: 0.875rem;
}

/* ---------- 行式卡 ----------
 * 左图标 + 标题/说明 + 右操作。照参考站「账户安全」那组卡的结构。
 * 竖排一列，不用 card-grid —— 说明文字长短不一，并排会参差。
 */

.rows {
  display: grid;
  gap: 0.75rem;
}

.rowcard {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* 140ms ease-out 照参考站实测值。只过渡颜色，不做位移/缩放 ——
   * 一屏六张卡同时动会显得浮夸，且卡片是信息不是按钮。 */
  transition: background-color 0.14s ease-out, border-color 0.14s ease-out;
}

/* 可点的卡（有「打开」按钮那张）才给 hover 反馈，
 * 待开发的卡点不动，给反馈是骗人 */
.rowcard:not(.is-waiting):hover {
  background: var(--accent);
  border-color: var(--input);
}

@media (prefers-reduced-motion: reduce) {
  .rowcard { transition: none; }
}

.rowcard__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 1.125rem;
  line-height: 1;
}

.rowcard__body {
  /* min-width:0 让长说明能正常换行而不是把右侧按钮挤出卡片 */
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.rowcard__name {
  font-size: 0.9375rem;
  font-weight: 600;
}

.rowcard__note {
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* 等材料的工作流：图标淡一档，但说明文字保持正常对比度 ——
 * 那句话写的是「在等谁」，是这张卡唯一有用的信息，不能跟着淡 */
.rowcard.is-waiting .rowcard__icon {
  opacity: 0.45;
}

.rowcard__tag {
  flex: none;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

/* 窄屏：按钮掉到下一行，图标和文字仍同排 */
@media (max-width: 30rem) {
  .rowcard {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .rowcard__body { flex-basis: calc(100% - 38px - 0.75rem); }
  .rowcard__tag,
  .rowcard .btn { margin-inline-start: calc(38px + 1rem); }
}

/* ---------- 小号按钮 ---------- */

.btn--sm {
  height: 32px;
  padding-inline: 0.75rem;
  font-size: 0.875rem;
}

/* --- 模拟登录横幅 ------------------------------------------------------
   管理员以员工身份浏览时常驻顶部。用警示色而不是中性色：这是「你现在
   不是你自己」的提醒，看漏了会把操作记到别人账上。 */
.imp-banner {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.5rem 1rem;
  background: oklch(0.55 0.19 25);
  color: oklch(0.98 0 0);
  font-size: 0.875rem;
  box-shadow: 0 1px 6px oklch(0 0 0 / 0.3);
}
.imp-banner strong { font-weight: 600; }
.imp-banner form { margin: 0; }
.imp-banner__exit {
  padding: 0.25rem 0.75rem;
  border: 1px solid oklch(0.98 0 0 / 0.6);
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.imp-banner__exit:hover {
  background: oklch(0.98 0 0);
  color: oklch(0.55 0.19 25);
}