/* 自建应用 H5 样式：适配手机与企业微信内置浏览器，不引入任何外部资源。
 *
 * 设计取向：浅底 + 白卡 + 品牌绿（微信绿系）。移动优先，宽屏居中限宽。
 * 改样式时注意三处不能动的约束，它们来自页面逻辑而不是审美：
 *   1. [hidden] 必须 !important —— 顶栏/页脚/区块靠它收起；
 *   2. 并排按钮里要清掉 button.primary 的 margin-top，否则两按钮不齐高；
 *   3. 核对页输入框不能和列名上下排——那会把半屏留成空白。
 */

:root {
  /* 品牌 */
  --brand: #07c160;
  --brand-deep: #059e52;
  --brand-dark: #04713c;
  --brand-soft: #e8f8ef;
  --brand-soft-2: #d7f5e6;
  --brand-line: rgba(7, 193, 96, 0.18);

  /* 文字与线条 */
  --ink: #122019;
  --ink-2: #3c4b43;
  --muted: #71817a;
  --muted-2: #95a49d;
  --line: #e4ebe7;
  --line-strong: #d2ddd6;

  /* 面 */
  --bg: #eff4f1;
  --bg-top: #f7faf8;
  --card: #ffffff;
  --panel: #fbfdfc;
  --panel-2: #f4f8f5;
  --field-bg: #f6f9f7;

  /* 状态 */
  --primary: var(--brand-deep);
  --primary-ink: #ffffff;
  --warn: #a96a00;
  --warn-soft: #fff7e6;
  --warn-line: #f0dfb5;
  --warn-ink: #8a6100;
  --error: #cf3f3f;
  --error-soft: #fdf1f1;
  --error-line: #f3d2d2;

  /* 代码输出面板 */
  --code-bg: #0f2019;
  --code-ink: #c8f2dc;
  --code-line: #21402f;

  /* 圆角、阴影、动效 */
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 22px;
  --shadow-card: 0 1px 2px rgba(15, 40, 26, 0.04), 0 12px 32px -20px rgba(15, 40, 26, 0.28);
  --shadow-float: 0 12px 26px -14px rgba(5, 158, 82, 0.55);
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", system-ui, sans-serif;
  background:
    radial-gradient(820px 440px at 50% -180px, rgba(7, 193, 96, 0.15), transparent 72%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 42%, var(--bg) 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- 顶栏 ---------- */

.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top));
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(18, 32, 25, 0.06);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .bar {
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
  }
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.bar h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: 0.2px;
  color: var(--ink);
}

/* 品牌标记：纯 CSS 画的小方块（三条白色短线 = 工作台列表），避免引入图片资源 */
.bar h1::before {
  content: "";
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.97)) 9px 11px / 7px 2px
      no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.97)) 9px 16px / 12px 2px
      no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.97)) 9px 21px / 9px 2px
      no-repeat,
    linear-gradient(135deg, #2ed684, #049c51);
  box-shadow:
    0 7px 16px -8px rgba(4, 156, 81, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.brand-sub {
  margin: 0;
  padding-left: 42px;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.35px;
  color: var(--muted);
}

.env {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 550;
  line-height: 1;
  color: var(--brand-dark);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  white-space: nowrap;
}

.env::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.12);
}

.env.warn {
  color: var(--warn);
  background: var(--warn-soft);
  border-color: var(--warn-line);
}

.env.warn::before {
  box-shadow: 0 0 0 3px rgba(169, 106, 0, 0.12);
}

.env.error {
  color: var(--error);
  background: var(--error-soft);
  border-color: var(--error-line);
}

.env.error::before {
  box-shadow: 0 0 0 3px rgba(207, 63, 63, 0.12);
}

/* ---------- 主容器 ---------- */

main {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 14px 14px calc(30px + env(safe-area-inset-bottom));
  display: grid;
  gap: 14px;
}

/* 单功能页：顶栏与页脚被 hidden 收起，内容直接起始。
   这里只补一点顶部呼吸感，并把卡片标题升为页面标题。 */
header[hidden] + main {
  padding-top: calc(18px + env(safe-area-inset-top));
}

header[hidden] + main .card h2 {
  font-size: 18px;
}

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

.card {
  position: relative;
  padding: 16px;
  background: var(--card);
  border: 1px solid rgba(18, 32, 25, 0.055);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  animation: card-in 0.36s var(--ease) both;
}

.card h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: 0.2px;
  color: var(--ink);
}

.card h2::before {
  content: "";
  flex: none;
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: linear-gradient(180deg, #35dc8b, var(--brand-deep));
}

.card > p {
  margin: 0 0 10px;
}

.card > p:last-child {
  margin-bottom: 0;
}

/* 说明文字统一收紧一点，避免首屏被行距撑散 */
.card > p.small {
  line-height: 1.55;
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 文本 ---------- */

.muted {
  color: var(--muted);
}

.small {
  font-size: 12px;
}

.error {
  color: var(--error);
}

strong {
  font-weight: 650;
}

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

button {
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  line-height: 1.2;
  min-height: 40px;
  padding: 10px 14px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  transition:
    transform 0.12s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

button:hover:not(:disabled) {
  border-color: var(--brand);
  color: var(--brand-dark);
}

button:active:not(:disabled) {
  transform: scale(0.98);
}

button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 4px rgba(7, 193, 96, 0.16);
}

button:disabled {
  opacity: 0.45;
  cursor: default;
}

/* 正在提交：禁用期间别显得像坏掉了，同时给出等待光标 */
button[data-busy="1"] {
  cursor: progress;
}

button[data-busy="1"]:disabled {
  opacity: 0.7;
}

button.primary {
  width: 100%;
  min-height: 46px;
  margin-top: 12px;
  color: var(--primary-ink);
  font-weight: 600;
  letter-spacing: 0.2px;
  background: linear-gradient(135deg, #12c96f, var(--brand-deep));
  border-color: transparent;
  box-shadow: var(--shadow-float);
}

button.primary:hover:not(:disabled) {
  color: var(--primary-ink);
  filter: brightness(1.04);
}

button.primary:active:not(:disabled) {
  box-shadow: 0 6px 14px -12px rgba(5, 158, 82, 0.9);
}

button.ghost {
  background: var(--card);
}

button.ghost:hover:not(:disabled) {
  background: var(--brand-soft);
}

button.quiet {
  min-height: 34px;
  color: var(--muted);
  background: transparent;
  border-color: transparent;
}

button.quiet:hover:not(:disabled) {
  color: var(--error);
  background: var(--error-soft);
}

/* 常用操作：两列磁贴，左侧一个品牌色小方块当图标 */
.actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.actions button {
  display: flex;
  align-items: center;
  gap: 9px;
  justify-content: flex-start;
  min-height: 46px;
  padding: 12px;
  text-align: left;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border-color: var(--line);
}

.actions button::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: linear-gradient(135deg, #35dc8b, var(--brand-deep));
  box-shadow: 0 0 0 4px rgba(7, 193, 96, 0.1);
}

.actions button:hover:not(:disabled) {
  background: var(--brand-soft);
  border-color: var(--brand-line);
}

/* ---------- 列表 / 待办 ---------- */

.list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list li {
  padding: 0;
  border: 0;
}

.list li + li {
  margin-top: 10px;
}

.todo-item {
  display: grid;
  gap: 10px;
  padding: 13px 14px 13px 16px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  overflow: hidden;
  position: relative;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.todo-item:hover {
  border-color: var(--brand);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 8px 20px -18px rgba(15, 40, 26, 0.6);
}

.todo-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  bottom: 13px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #35dc8b, var(--brand-deep));
}

.todo-text {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
}

.todo-actions {
  display: flex;
  gap: 8px;
}

.todo-actions button {
  flex: 1;
  min-height: 36px;
  padding: 7px 10px;
  font-size: 13px;
  border-radius: 10px;
}

/* 空态：虚线框 + 一个淡绿圆点，比一行灰字更像「这里确实没有东西」 */
.list li.muted {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 26px 14px;
  color: var(--muted);
  background: var(--panel);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  text-align: center;
}

.list li.muted::before {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.95) 0 3px, transparent 3.5px),
    linear-gradient(135deg, var(--brand-soft-2), var(--brand-soft));
  border: 1px solid var(--brand-line);
}

.list li.error {
  padding: 14px;
  color: var(--error);
  background: var(--error-soft);
  border: 1px solid var(--error-line);
  border-radius: var(--r-md);
  font-size: 13px;
}

/* ---------- 表单 ---------- */

.field {
  display: grid;
  gap: 7px;
}

.field span {
  font-size: 12.5px;
  font-weight: 550;
  letter-spacing: 0.2px;
  color: var(--muted);
}

.field + .field {
  margin-top: 14px;
}

input,
select,
textarea {
  font: inherit;
  color: var(--ink);
}

.field input,
.field select,
.field textarea,
.setting select,
.setting input,
#rules-dept,
#rules-prompt,
#rules-group,
#rules-pick {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  background-color: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

textarea {
  line-height: 1.7;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted-2);
}

input:focus,
select:focus,
textarea:focus {
  outline: 0;
  background-color: var(--card);
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(7, 193, 96, 0.12);
}

input:disabled,
select:disabled,
textarea:disabled {
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
  background-color: var(--panel-2);
  opacity: 1;
  cursor: default;
}

/* 下拉统一换成自绘箭头：原生箭头在窄屏上会贴边，且各端样式不一致。
   下面三条要单独补 padding-right，否则前面按控件写的 padding 简写
   会把箭头预留的空间又压回去，长选项文字会压住箭头。 */
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2371817a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}

.field select,
.setting select,
#rules-dept {
  padding-right: 38px;
}

/* ---------- 页脚 ---------- */

.foot {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 2px 18px calc(22px + env(safe-area-inset-bottom));
  text-align: center;
}

#who {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  letter-spacing: 0.2px;
  color: var(--muted-2);
}

#who::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}

/* ---------- 编辑授权提示 ---------- */

/* 空的时候不占位；有内容时做成一条中性提示，而不是裸灰字 */
#edit-note {
  margin: 0;
}

#edit-note:empty {
  display: none;
}

#edit-note:not(:empty) {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 12px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}

#edit-note:not(:empty)::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--muted-2);
}

/* ---------- 设置 ---------- */

.settings {
  display: grid;
  gap: 0;
}

.setting {
  display: grid;
  gap: 7px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.setting:first-child {
  padding-top: 3px;
}

.setting:last-child {
  padding-bottom: 3px;
  border-bottom: 0;
}

.setting-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.setting-head strong {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1px;
}

/* 当前值做成胶囊：一眼区分「叫什么」与「现在是什么」 */
.setting-head .small {
  flex: none;
  max-width: 52%;
  padding: 3px 9px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--muted);
  background: var(--panel-2);
  border-radius: 999px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setting p {
  margin: 0;
}

.setting p.small {
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}

.setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.setting-row button {
  min-width: 62px;
}

/* 布尔开关：整行铺开，左侧小灯提示当前状态 */
.setting > button {
  justify-self: stretch;
  min-height: 44px;
  text-align: left;
  padding-left: 14px;
}

.setting > button::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--muted-2);
  vertical-align: 1px;
}

/* ---------- 代码 / 自检输出 ---------- */

.report {
  margin: 12px 0 0;
  padding: 13px 14px;
  color: var(--code-ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 40%),
    var(--code-bg);
  border: 1px solid var(--code-line);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font: 12px/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.report:empty {
  display: none;
}

/* ---------- 主表列来源 ---------- */

#sheet-columns {
  display: grid;
  gap: 4px;
}

/* 每行等高、色带不贴边。
   特意**不用 border-bottom 分隔**：带底色的行会因此比不带的多 1px，看上去高低不齐；
   现在靠「行间距 + 交替底色」分隔。 */
.col-row {
  display: grid;
  grid-template-columns: minmax(96px, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 5px 10px;
  border-radius: 10px;
}

.col-row:nth-child(even) {
  background: var(--panel-2);
}

.col-name {
  font-size: 13px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 三个选项平铺：点一下即选定，不必「展开→选→收起」走三步 */
.seg {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.seg button {
  flex: 1 1 auto;
  min-height: 30px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 7px;
  white-space: nowrap;
  transition:
    background-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}

.seg button:hover:not(:disabled) {
  color: var(--brand-dark);
  background: rgba(255, 255, 255, 0.7);
}

.seg button.on {
  color: var(--brand-dark);
  font-weight: 650;
  background: var(--card);
  box-shadow: 0 1px 3px rgba(15, 40, 26, 0.14);
}

.seg button:disabled {
  opacity: 0.55;
  cursor: default;
}

.seg button.on:disabled {
  opacity: 0.8;
}

/* 窄屏（企业微信里就是窄屏）：列名与分段控件上下排，按钮不许换行，行高才整齐。
   **只针对分段控件**——核对页的输入框仍与标签同行，否则半屏都是空白。 */
@media (max-width: 560px) {
  .col-row {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 9px 10px;
  }

  .seg button {
    white-space: nowrap;
  }
}

/* ---------- 规则页 ---------- */

#rules-dept {
  min-height: 44px;
  padding-top: 9px;
  padding-bottom: 9px;
  font-size: 14px;
}

#rules-prompt,
#rules-group,
#rules-pick {
  font-size: 14px;
  line-height: 1.7;
}

#rules-prompt {
  min-height: 180px;
}

#rules-dept:focus,
#rules-prompt:focus,
#rules-group:focus,
#rules-pick:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(7, 193, 96, 0.12);
}

/* 底部：提示在左、保存按钮在右（保存不是这一页的主焦点，不必占满一行） */
.rules-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.rules-foot p {
  margin: 0;
  flex: 1 1 160px;
}

/* 并排场景：清掉 primary 的整行与上边距，按钮才有自己的尺寸。
   提示为空时（#rules-result:empty 被收起）按钮是唯一子项，靠 auto 外边距留在右侧。 */
.rules-foot button.primary {
  width: auto;
  min-width: 104px;
  margin-top: 0;
  margin-left: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* ---------- 选人组件 ---------- */

.picker {
  padding: 12px;
  margin-bottom: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.picker:last-child {
  margin-bottom: 0;
}

.picker-list {
  display: block;
  max-height: 260px;
  margin: 8px -2px;
  padding: 0 2px;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* 全量模式按部门分段 */
.picker-group {
  margin: 10px 2px 6px;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.5px;
  color: var(--muted);
}

.picker-group:first-child {
  margin-top: 0;
}

.picker-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  margin: 0 7px 8px 0;
  padding: 7px 12px;
  font-size: 13px;
  line-height: 1.2;
  color: var(--ink-2);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.12s ease;
}

.picker-item:hover:not(:disabled) {
  border-color: var(--brand);
  color: var(--brand-dark);
}

.picker-item:active:not(:disabled) {
  transform: scale(0.97);
}

.picker-item.on {
  color: var(--brand-dark);
  font-weight: 600;
  background: linear-gradient(135deg, var(--brand-soft), var(--brand-soft-2));
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.1);
}

.picker-item.on::before {
  content: "✓";
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.picker-picked {
  margin: 6px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- 立项复核 ---------- */

/* 核对页顶部的「移交给TA」区：只在回退场景用得上，做成虚线框，不抢主视线 */
.intake-transfer {
  margin-bottom: 14px;
  padding: 11px 12px 12px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px dashed #b9dfca;
  border-radius: 14px;
}

.intake-transfer .picker {
  margin: 4px 0 8px;
  padding: 0;
  background: transparent;
  border: 0;
}

.intake-transfer .picker-list {
  max-height: 150px;
}

/* 组件自带的「已选」行在虚线框里会多出一条分隔线，这里收掉 */
.intake-transfer .picker-picked {
  margin-top: 2px;
  padding-top: 0;
  border-top: 0;
}

/* 「移交给TA」按普通按钮尺寸，不占满整行——它是个次要动作 */
#intake-transfer-btn {
  display: block;
  min-width: 120px;
  margin-left: auto;
}

.intake-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

/* 两个出口必须**等高**：button.primary 带 margin-top: 12px（它是给「单独一个按钮」
   的场景写的），放进并排容器后这个 margin 会把绿色那个压低 12px——高度就差了。
   并排场景一律清掉 margin。 */
.intake-actions button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 46px;
  margin: 0;
}

/* ---------- 核对页：字段小卡片（自动堆叠，宽度够就并排） ---------- */

.intake-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.intake-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px 11px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

/* 名字：小字、弱化——它是注释，不是内容 */
.intake-cell .k {
  font-size: 11.5px;
  font-weight: 550;
  letter-spacing: 0.2px;
  color: var(--muted);
}

/* 从文档分析：可编辑。输入框融进卡片（不要边框），看起来就是「这里能改」 */
.intake-cell.is-doc {
  background: linear-gradient(180deg, #f8fefb, #f1fbf5);
  border-color: #c5e9d6;
}

/* 从文档分析：可编辑。输入框融进卡片，但保留可点的边界，
   否则无边框的粗体文字看起来像只读值，人会不知道这里能改。 */
.intake-cell input {
  width: 100%;
  min-height: 28px;
  margin: 0 -6px;
  padding: 3px 6px;
  font-size: 15px;
  font-weight: 550;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: none;
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.intake-cell input:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.85);
  border-color: #cfe9dd;
}

.intake-cell input:focus {
  outline: 0;
  background: var(--card);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.12);
}

/* 只读时（令牌失效）摘掉边界，回到「只是给人看」的样子 */
.intake-cell input:disabled {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  background: transparent;
  border-color: transparent;
}

.intake-cell input::placeholder {
  color: var(--muted-2);
  font-weight: 400;
}

/* 有限取值的候选：小字提示，不抢内容的位置 */
.intake-cell .opts {
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted-2);
}

/* 自动生成：只读，弱化，不跟可改的抢注意力 */
.intake-cell.is-auto .v {
  font-size: 14px;
  color: var(--ink-2);
}

/* 只读区：一行一项，不做卡片——它只是给人看一眼 */
.intake-readonly {
  margin-top: 16px;
  padding-top: 2px;
  border-top: 1px dashed var(--line-strong);
}

.ro-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 9px 1px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--panel-2);
}

.ro-row:last-child {
  border-bottom: 0;
}

.ro-row .k {
  flex: 0 0 96px;
  font-size: 12px;
  color: var(--muted);
}

.ro-row .v {
  flex: 1;
  color: var(--ink-2);
  word-break: break-all; /* 文档链接很长，必须能断 */
}

/* ---------- 杂项 ---------- */

/* hidden 属性必须压得住 display:flex/grid —— 顶栏与页脚都是 flex，
   只写 el.hidden = true 收不起来（HTML 的 hidden 只是 display:none 的弱默认值）。
   这条规则是给「单一功能页收起顶栏与页脚」用的。 */
[hidden] {
  display: none !important;
}

/* 结果行没内容时不占位：这类 p 由 JS 逐字填入，空着时不该留一行空隙 */
#action-result:empty,
#submit-result:empty,
#settings-result:empty,
#sheet-result:empty,
#intake-result:empty,
#pick-result:empty,
#rules-result:empty {
  display: none;
}

/* 细滚动条：picker 与代码块内部使用，不抢视觉 */
.picker-list::-webkit-scrollbar,
.report::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.picker-list::-webkit-scrollbar-thumb,
.report::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 999px;
}

.picker-list::-webkit-scrollbar-track,
.report::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------- 宽屏 ---------- */

@media (min-width: 640px) {
  main {
    padding: 22px 22px 40px;
    gap: 16px;
  }

  header[hidden] + main {
    padding-top: calc(26px + env(safe-area-inset-top));
  }

  .card {
    padding: 20px;
    border-radius: var(--r-xl);
  }

  .card h2 {
    font-size: 16px;
  }

  header[hidden] + main .card h2 {
    font-size: 20px;
  }
}

/* 设置项在宽屏并两列：一长条设置滚起来太累，两列能少滚一半 */
@media (min-width: 720px) {
  #settings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
  }
}

/* ---------- 深色模式 ---------- */

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e9f4ed;
    --ink-2: #c4d5cb;
    --muted: #93a69b;
    --muted-2: #778a80;
    --line: #27382f;
    --line-strong: #34483d;

    --bg: #0c1511;
    --bg-top: #101b16;
    --card: #141f1a;
    --panel: #17241e;
    --panel-2: #1b2a23;
    --field-bg: #182620;

    --brand-soft: #123226;
    --brand-soft-2: #17402f;
    --brand-line: rgba(7, 193, 96, 0.28);
    --brand-dark: #5fe3a1;
    --brand-deep: #0aa95c;

    --warn-soft: #2c2314;
    --warn-line: #4a3a1c;
    --warn-ink: #e0b465;
    --warn: #e0b465;
    --error: #f07b7b;
    --error-soft: #2e1717;
    --error-line: #4a2626;

    --code-bg: #0a120e;
    --code-ink: #bfe9d4;
    --code-line: #20392b;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 14px 34px -20px rgba(0, 0, 0, 0.8);
    --shadow-float: 0 12px 26px -14px rgba(0, 0, 0, 0.75);
  }

  body {
    background:
      radial-gradient(820px 440px at 50% -180px, rgba(7, 193, 96, 0.17), transparent 72%),
      linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 42%, var(--bg) 100%);
  }

  .bar {
    background: rgba(20, 31, 26, 0.9);
    border-bottom-color: rgba(255, 255, 255, 0.06);
  }

  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .bar {
      background: rgba(16, 27, 22, 0.76);
    }
  }

  .card {
    border-color: rgba(255, 255, 255, 0.055);
  }

  /* 原生箭头是给浅底画的深灰，深色下换成浅灰 */
  select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2393a69b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  .todo-item {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }

  .todo-item:hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 10px 22px -18px rgba(0, 0, 0, 0.9);
  }

  .intake-cell input {
    background: rgba(255, 255, 255, 0.05);
  }

  .intake-cell input:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.09);
    border-color: #2b4d3a;
  }

  .intake-cell input:focus {
    background: rgba(255, 255, 255, 0.1);
  }

  .actions button {
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
  }

  .intake-cell.is-doc {
    background: linear-gradient(180deg, #16251e, #14211b);
    border-color: #244936;
  }

  .intake-transfer {
    border-color: #2b4d3a;
  }

  .seg button.on {
    background: #22362b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  }

  .seg button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06);
  }

  .picker-item {
    background: var(--card);
  }

  .list li.muted::before {
    background:
      radial-gradient(circle at 50% 50%, rgba(20, 31, 26, 0.95) 0 3px, transparent 3.5px),
      linear-gradient(135deg, var(--brand-soft-2), var(--brand-soft));
  }
}

/* ---------- 动效与可访问性 ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .card {
    animation: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* iOS / 企业微信内置浏览器：输入字号小于 16px 会在聚焦时自动放大页面。
   下面这些控件在前文写了更具体的字号，必须在这里一并提到 16px，
   否则只有通用选择器命中，它们仍会触发缩放。 */
@media (max-width: 560px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }

  .intake-cell input,
  #rules-dept,
  #rules-prompt,
  #rules-group,
  #rules-pick {
    font-size: 16px;
  }
}