/* =====================================================================
 *  在线问卷系统 · 设计系统
 *
 *  设计原则（去除"AI 廉价感"的关键）：
 *  1. 色彩克制：主色用低饱和的「石板灰蓝」，不用 Bootstrap 默认高饱和蓝；
 *     语义色（成功/警告/危险）同样降饱和，避免大面积刺眼纯色块。
 *  2. 暗色不纯黑：底色 #1E1E1E，卡片 #252525，边界靠亮度差而不是描白线。
 *  3. 文字层级：正文 / 次要 / 占位符三级灰阶，全部满足 WCAG AA(4.5:1)，
 *     暗色下正文对比度 ≥ 12:1，绝不会出现黑底黑字。
 *  4. 圆角克制：统一 8px（小控件 6px），没有 50px 胶囊的大圆角。
 *  5. 阴影克制：0 2px 8px rgba(0,0,0,.05) 级别的微阴影，只用于抬起层级。
 *  6. 微交互：所有可点元素 transition .2s ease；聚焦不外扩粗 outline，
 *     改用 1px 细边框 + 3px 柔和外发光。
 *  7. 呼吸感：区块间距 24~32px，卡片内边距 20~24px，行高 1.6。
 * ===================================================================== */

/* ---------------------------------------------------------- 设计令牌 */
:root {
  /* 字体：系统字体栈，中文自动回落到 PingFang / 微软雅黑 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* 中性色：石板灰 */
  --c-bg: #F5F6F8;
  --c-surface: #FFFFFF;
  --c-surface-alt: #EEF0F3;
  --c-border: #E2E5EA;
  --c-border-strong: #CFD4DB;

  /* 文本三级：正文 / 次要 / 弱提示（占位符） */
  --c-text: #1E2429;          /* 对 #FFF 约 15.6:1 */
  --c-text-2: #565F6B;        /* 约 7.0:1  */
  --c-text-3: #6F7883;        /* 占位符：约 4.6:1，仍满足 AA */

  /* 低饱和主色：石板灰蓝 + 莫兰迪蓝 */
  --c-accent: #4A6274;        /* 白字其上约 5.9:1 */
  --c-accent-hover: #3E5464;
  --c-accent-soft: #EDF1F4;
  --c-accent-ring: rgba(74, 98, 116, .16);

  /* 语义色（低饱和） */
  --c-success: #4B7B62;
  --c-warning: #8A6A3B;
  --c-danger: #9B4B4B;

  --radius: 8px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow: 0 2px 8px rgba(16, 24, 40, .05);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, .08);
  --t: .2s ease;

  color-scheme: light;
}

html[data-bs-theme="dark"] {
  --c-bg: #1E1E1E;
  --c-surface: #252525;
  --c-surface-alt: #2C2C2C;
  --c-border: #363636;
  --c-border-strong: #454545;

  --c-text: #E9ECEF;          /* 对 #1E1E1E 约 13.5:1 */
  --c-text-2: #A8AFB7;        /* 约 7.2:1 */
  --c-text-3: #8A929B;        /* 占位符：约 5.0:1（对卡片底色），满足 AA */

  --c-accent: #9CB4C4;        /* 暗底上的浅冷色，约 7.6:1 */
  --c-accent-hover: #B3C6D3;
  --c-accent-soft: #2F3438;
  --c-accent-ring: rgba(156, 180, 196, .22);

  --c-success: #7FB094;
  --c-warning: #C9A36A;
  --c-danger: #C98A8A;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 2px 8px rgba(0, 0, 0, .35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);

  color-scheme: dark;
}

/* Bootstrap 5.3 认识 data-bs-theme，这里把我们的调色同步给它的变量，
   让 navbar/table/modal 等原生组件也跟着变（换回旧版 Bootstrap 也不至于崩） */
:root { --bs-body-font-family: var(--font-sans); --bs-body-bg: var(--c-bg); --bs-body-color: var(--c-text); }

/* ---------------------------------------------------------- 基础元素 */
body {
  font-family: var(--font-sans);
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
}
html[data-bs-theme="dark"] body { background: var(--c-bg); color: var(--c-text); }

h1, h2, h3, h4, h5 { color: var(--c-text); font-weight: 600; letter-spacing: -.01em; }
p { margin-bottom: .75rem; }
a { color: var(--c-accent); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--c-accent-hover); }
hr { border-color: var(--c-border); opacity: 1; }
.mono { font-family: var(--font-mono); font-size: .92em; }
.text-2 { color: var(--c-text-2) !important; }

/* 占位符只用弱灰阶 + 不参与对比关键信息的表达 */
::placeholder { color: var(--c-text-3); opacity: 1; }
::-webkit-input-placeholder { color: var(--c-text-3); }

/* ---------------------------------------------------------- 布局骨架 */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.app-main { flex: 1 1 auto; }

/* 顶栏：不是黑胶唱片式的深色块，而是贴近底色的玻璃拟态弱化边界 */
.app-nav {
  position: sticky; top: 0; z-index: 1020;
  background: var(--c-surface);   /* 老浏览器兜底 */
  background: color-mix(in srgb, var(--c-surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-border);
}
.app-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--c-text); }
.app-brand:hover { color: var(--c-text); }
.app-mark {
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--c-accent), color-mix(in srgb, var(--c-accent) 60%, var(--c-surface)));
  display: inline-grid; place-items: center; color: var(--c-surface); font-size: 13px; font-weight: 700;
}
html[data-bs-theme="dark"] .app-mark { color: #141414; }

/* 主题开关：纯 CSS 图形 + 文字，避免引入图标字体依赖 */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--c-border); background: transparent; color: var(--c-text-2);
  border-radius: 999px; padding: 4px 10px; font-size: 13px; line-height: 1.4;
  transition: all var(--t);
}
.theme-toggle:hover { border-color: var(--c-border-strong); color: var(--c-text); background: var(--c-surface-alt); }
.theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-accent-ring); }

/* ---------------------------------------------------------- 卡片 / 面板 */
.card-surface {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t), border-color var(--t);
}
.card-surface:hover { box-shadow: var(--shadow); }
.section-title {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-text-2); margin-bottom: 12px;
}

/* ---------------------------------------------------------- 按钮 */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 500;
  transition: background-color var(--t), color var(--t), border-color var(--t),
              box-shadow var(--t), transform var(--t);
}
.btn:focus { box-shadow: none; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-accent-ring); }
.btn:active { transform: translateY(.5px); }

.btn-primary {
  background: var(--c-accent); border-color: var(--c-accent); color: #FFFFFF;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--c-accent-hover); border-color: var(--c-accent-hover); color: #FFFFFF;
}
html[data-bs-theme="dark"] .btn-primary { color: #141414; }

.btn-outline-secondary {
  color: var(--c-text-2); border-color: var(--c-border-strong); background: transparent;
}
.btn-outline-secondary:hover { background: var(--c-surface-alt); color: var(--c-text); border-color: var(--c-border-strong); }

.btn-light, .btn-close { filter: none; }

/* ---------------------------------------------------------- 表单控件 */
.form-control, .form-select, textarea.form-control {
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface);
  color: var(--c-text);
  transition: border-color var(--t), box-shadow var(--t), background-color var(--t);
}
.form-control:focus, .form-select:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-ring);   /* 细边框 + 柔和外发光，无粗 outline */
  outline: none;
}
.form-control::placeholder { color: var(--c-text-3); }
.form-control:disabled, .form-control[readonly] { background: var(--c-surface-alt); color: var(--c-text-2); }
.form-label, .form-check-label { color: var(--c-text-2); font-weight: 500; }
.form-check-input { border-color: var(--c-border-strong); }
.form-check-input:checked { background-color: var(--c-accent); border-color: var(--c-accent); }
html[data-bs-theme="dark"] .form-check-input:checked { background-color: var(--c-accent); border-color: var(--c-accent); }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--c-accent-ring); }
.form-text, .form-control-sm { color: var(--c-text-2); }
.form-range::-webkit-slider-thumb { background: var(--c-accent); }

/* ---------------------------------------------------------- 表格 */
.table { color: var(--c-text); --bs-table-color: var(--c-text); }
.table > :not(caption) > * > * { border-bottom-color: var(--c-border); background: transparent; }
html[data-bs-theme="dark"] .table > :not(caption) > * > * { color: var(--c-text); }
html[data-bs-theme="dark"] .table-light > :not(caption) > * > * { background: var(--c-surface-alt); color: var(--c-text); }

/* ---------------------------------------------------------- 模态 / 折叠 / 导航 */
.modal-content {
  border-radius: var(--radius); border: 1px solid var(--c-border);
  background: var(--c-surface); color: var(--c-text); box-shadow: var(--shadow-md);
}
.modal-header, .modal-footer { border-color: var(--c-border); }
html[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(1.6); opacity: .8; }
.nav-tabs .nav-link, .nav-link { color: var(--c-text-2); }
.nav-tabs .nav-link.active { color: var(--c-text); border-color: var(--c-border) var(--c-border) var(--c-surface); }
.accordion-item { background: transparent; border-color: var(--c-border); }
.accordion-button {
  background: transparent; color: var(--c-text); box-shadow: none !important;
  border-radius: var(--radius-sm) !important; font-weight: 500;
}
.accordion-button:not(.collapsed) { background: var(--c-surface-alt); color: var(--c-text); }
.accordion-button:focus { box-shadow: 0 0 0 3px var(--c-accent-ring); }
.accordion-button::after { filter: none; opacity: .5; }
html[data-bs-theme="dark"] .accordion-button::after { filter: invert(1) brightness(1.4); }
.dropdown-menu {
  border-radius: var(--radius); border-color: var(--c-border); background: var(--c-surface);
  box-shadow: var(--shadow); padding: 6px;
}
.dropdown-item { border-radius: var(--radius-sm); color: var(--c-text); transition: background-color var(--t); }
.dropdown-item:hover { background: var(--c-surface-alt); color: var(--c-text); }
.badge { font-weight: 500; border-radius: var(--radius-sm); }
.pagination .page-link { color: var(--c-text-2); border-color: var(--c-border); background: var(--c-surface); }

/* =====================================================================
 *  控制台首页
 * ===================================================================== */
.hero { padding: 44px 0 26px; }
.hero h1 { font-size: 26px; margin-bottom: 6px; }
.hero p { color: var(--c-text-2); margin: 0; }

.survey-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.survey-card {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 14px;
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.survey-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--c-border-strong); }
.survey-card h5 { margin: 0; font-size: 16px; line-height: 1.4; }
.survey-card .desc { color: var(--c-text-2); font-size: 13px; min-height: 20px; }
.survey-meta { display: flex; gap: 16px; font-size: 13px; color: var(--c-text-2); border-top: 1px solid var(--c-border); padding-top: 12px; }
.survey-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.status-published { background: var(--c-success); }
.status-draft { background: var(--c-warning); }
.status-closed { background: var(--c-text-3); }

/* =====================================================================
 *  编辑器：左侧题型面板 + 右侧画布
 * ===================================================================== */
.editor-wrap { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 991.98px) { .editor-wrap { grid-template-columns: 1fr; } }

.palette {
  position: sticky; top: 74px;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow-sm); max-height: calc(100vh - 100px); overflow: auto;
}
.palette-type {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; padding: 7px 10px; margin-bottom: 4px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--c-text-2); font-size: 13.5px; cursor: grab;
  transition: background-color var(--t), color var(--t), border-color var(--t);
}
.palette-type:hover { background: var(--c-surface-alt); color: var(--c-text); border-color: var(--c-border); }
.palette-type:active { cursor: grabbing; }
.palette-type .tag { font-size: 10px; color: var(--c-text-3); border: 1px solid var(--c-border); border-radius: 4px; padding: 0 4px; }

.canvas-title {
  border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface);
  padding: 22px 24px; box-shadow: var(--shadow-sm);
}
.canvas-title input {
  border: none; background: transparent; padding: 0; font-size: 22px; font-weight: 600; color: var(--c-text);
}
.canvas-title input:focus { box-shadow: none; }
.canvas-title textarea { border: none; background: transparent; padding: 0; resize: none; color: var(--c-text-2); }
.canvas-title textarea:focus { box-shadow: none; border: none; }

.q-card {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow-sm); transition: box-shadow var(--t), border-color var(--t);
}
.q-card:hover { box-shadow: var(--shadow); }
.q-card.is-dragging { opacity: .5; border-color: var(--c-accent); }
.q-card.is-invalid { border-color: var(--c-danger); }
.q-head { display: flex; align-items: center; gap: 8px; }
.q-index {
  min-width: 22px; height: 22px; border-radius: var(--radius-sm); background: var(--c-surface-alt);
  color: var(--c-text-2); font-size: 12px; display: inline-grid; place-items: center;
}
.q-type { font-size: 12px; color: var(--c-text-2); border: 1px solid var(--c-border); border-radius: 4px; padding: 1px 6px; }
.q-title-input {
  width: 100%; border: none; background: transparent; padding: 0; font-weight: 500; color: var(--c-text);
}
.q-title-input:focus { outline: none; box-shadow: none; }
.drag-handle { cursor: grab; color: var(--c-text-3); user-select: none; font-size: 13px; }
.opt-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.drop-hint { border: 1px dashed var(--c-accent); border-radius: var(--radius); height: 44px; }
.empty-canvas {
  border: 1px dashed var(--c-border-strong); border-radius: var(--radius); padding: 44px 20px;
  text-align: center; color: var(--c-text-2); background: var(--c-surface);
}
.sticky-actions {
  position: sticky; bottom: 0;
  background: var(--c-surface);   /* 老浏览器兜底 */
  background: color-mix(in srgb, var(--c-surface) 92%, transparent);
  backdrop-filter: blur(8px); border-top: 1px solid var(--c-border); padding: 12px 0; margin-top: 8px;
}

/* 附件管理 */
.attach-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface);
  margin-bottom: 8px; transition: border-color var(--t), box-shadow var(--t);
}
.attach-item:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow-sm); }
.file-badge {
  width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--c-surface-alt);
  color: var(--c-text-2); display: inline-grid; place-items: center; font-size: 11px; font-weight: 600;
  text-transform: uppercase; flex: 0 0 auto;
}

/* =====================================================================
 *  填写端
 * ===================================================================== */
.progress-rail {
  position: sticky; top: 0; z-index: 1020; height: 3px; background: var(--c-surface-alt);
}
.progress-rail > i { display: block; height: 100%; width: 0; background: var(--c-accent); transition: width .3s ease; }

.fill-wrap { max-width: 760px; margin: 0 auto; padding: 40px 16px 96px; }
.fill-card {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.fill-head { padding: 32px 32px 24px; border-bottom: 1px solid var(--c-border); }
.fill-head h1 { font-size: 24px; margin-bottom: 8px; }
.survey-note { color: var(--c-text-2); white-space: pre-wrap; font-size: 14px; margin: 0; }
.fill-body { padding: 8px 32px 8px; }
.fill-foot { padding: 22px 32px 28px; }

.q-block { padding: 22px 0; border-bottom: 1px solid var(--c-border); }
.q-block:last-child { border-bottom: none; }
.q-title { font-weight: 500; margin-bottom: 2px; }
.q-note { color: var(--c-text-2); font-size: 13px; white-space: pre-wrap; margin-bottom: 10px; }
.req-star { color: var(--c-danger); margin-left: 2px; }
.q-error { color: var(--c-danger); font-size: 13px; margin-top: 8px; }

/* 选项：整行可点，hover 有轻微底色反馈 */
.opt-check {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; margin-bottom: 6px;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm); cursor: pointer;
  transition: border-color var(--t), background-color var(--t);
}
.opt-check:hover { border-color: var(--c-border-strong); background: var(--c-surface-alt); }
.opt-check input { margin-top: 3px; }

.material-box { padding: 18px 32px; border-bottom: 1px solid var(--c-border); background: var(--c-surface-alt); }
.material-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--c-border); background: var(--c-surface); margin-bottom: 8px;
}

/* 提交成功遮罩 + 二维码 */
.qr-card { display: grid; place-items: center; padding: 8px; }
.qr-frame {
  padding: 14px; background: #FFFFFF; border-radius: var(--radius-sm); border: 1px solid var(--c-border);
  box-shadow: var(--shadow-sm); line-height: 0;
}
html[data-bs-theme="dark"] .qr-frame { background: #FFFFFF; }  /* 二维码必须白底黑码才扫得动 */
.qr-tip { font-size: 13px; color: var(--c-text-2); }
.copy-link-box { display: flex; gap: 8px; }

/* =====================================================================
 *  Toast：右上角堆叠，替代浏览器原生 alert
 * ===================================================================== */
.toast-stack {
  position: fixed; top: 18px; right: 18px; z-index: 2000;
  display: flex; flex-direction: column; gap: 10px; width: min(340px, calc(100vw - 36px));
}
.app-toast {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--c-border);
  background: var(--c-surface); color: var(--c-text); box-shadow: var(--shadow-md);
  font-size: 14px; opacity: 0; transform: translateY(-6px); transition: opacity var(--t), transform var(--t);
}
.app-toast.show { opacity: 1; transform: translateY(0); }
.app-toast .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: 0 0 auto; background: var(--c-accent); }
.app-toast.success .dot { background: var(--c-success); }
.app-toast.danger .dot { background: var(--c-danger); }
.app-toast.warning .dot { background: var(--c-warning); }

/* =====================================================================
 *  与 templates/_macros.html 渲染标记配套的规则
 *  （宏里用的是原生 Bootstrap 类，这里补齐暗色对比度与细节）
 * ===================================================================== */
.required-star { color: var(--c-danger); margin-left: 2px; }
.q-block .fw-semibold { color: var(--c-text); }
.matrix-scroll { overflow-x: auto; }
.matrix-scroll table { min-width: 480px; }
.matrix-scroll th, .matrix-scroll td { white-space: nowrap; }
.matrix-scroll input[type="text"], .matrix-scroll input[type="number"],
.matrix-scroll select { min-width: 96px; }
html[data-bs-theme="dark"] .text-muted,
html[data-bs-theme="dark"] .form-text,
html[data-bs-theme="dark"] .list-group-item,
html[data-bs-theme="dark"] .alert-secondary { color: var(--c-text-2) !important; }
html[data-bs-theme="dark"] .bg-body-tertiary { background: var(--c-surface-alt) !important; }
html[data-bs-theme="dark"] .list-group-item { background: transparent; border-color: var(--c-border); }
html[data-bs-theme="dark"] .badge.text-bg-secondary { background: var(--c-surface-alt) !important; color: var(--c-text) !important; }

/* 工具类补充 */
.hairline { border: 0; border-top: 1px solid var(--c-border); }
.small-muted { font-size: 13px; color: var(--c-text-2); }
.icon-btn {
  border: none; background: transparent; color: var(--c-text-2); padding: 2px 6px; border-radius: var(--radius-sm);
  transition: color var(--t), background-color var(--t);
}
.icon-btn:hover { background: var(--c-surface-alt); color: var(--c-text); }
.icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-accent-ring); }

/* =====================================================================
 *  后台登录页 / 二次确认弹窗
 *  —— 同样遵循「8px 圆角 + 微阴影 + 大留白」，不使用任何大圆角。
 * ===================================================================== */
.auth-wrap {
  min-height: calc(100vh - 58px);          /* 减去顶栏高度，垂直居中 */
  display: flex; align-items: center; justify-content: center;
  padding: 40px 16px 64px;
}
.auth-card {
  width: 100%; max-width: 400px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
}
.auth-mark {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  display: inline-grid; place-items: center;
  background: linear-gradient(135deg, var(--c-accent), color-mix(in srgb, var(--c-accent) 60%, var(--c-surface)));
  color: var(--c-surface); font-size: 18px; font-weight: 700;
}
html[data-bs-theme="dark"] .auth-mark { color: #141414; }
#confirmModal .modal-content { border-radius: var(--radius); box-shadow: var(--shadow); }

/* =====================================================================
 *  用户管理：角色卡片 + 顶栏角色标签
 * ===================================================================== */
.role-chip {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  font-size: 11px; color: var(--c-text-2); background: var(--c-surface-alt);
}
.role-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 22px; }
.role-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px 18px;
}
.role-card-title { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.role-card-list { list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--c-text-2); }
.role-card-list li { position: relative; padding-left: 14px; line-height: 1.9; }
.role-card-list li::before {
  content: ''; position: absolute; left: 0; top: 11px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--c-accent);
}

/* 打印时保持简洁（导出 PDF 用） */
@media print {
  .app-nav, .progress-rail, .fill-foot, .toast-stack { display: none !important; }
  .fill-card { box-shadow: none; border: none; }
}