/* 合同审阅工作台样式 */

/* ── 基础重置 ── */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-sans); background: var(--bg); color: var(--ink-1); font-size: var(--fs-body); }
.shell { max-width: 1680px; margin: 0 auto; padding: 14px 20px 60px; }

/* ── 页面头 ── */
.phead {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 2px 2px 14px; gap: 16px;
}
.phead .ttl { display: flex; align-items: baseline; gap: 10px; }
.phead h1 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.phead .crumb { font-size: 11.5px; color: var(--ink-3); }
.phead .lims-home-link { text-decoration: none; }
.phead .lims-home-link:hover { text-decoration: underline; }
.phead .lims-home-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.phead .right { display: flex; align-items: center; gap: 10px; }
.phead .as-of { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }
.phead .actions { display: flex; gap: 6px; }

/* ── 按钮 ── */
.btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-2);
  cursor: pointer; white-space: nowrap; transition: all .12s;
}
.btn:hover { background: var(--surface-2); border-color: var(--line-hard); }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-ink); }
.btn-warning {
  background: var(--st-due-soft); color: var(--st-due);
  border-color: rgba(245, 158, 11, 0.35);
}
.btn-warning:hover {
  background: #fef3c7; border-color: var(--st-due); color: #92400e;
}
.btn-sm { padding: 3px 8px; font-size: 11px; }

/* ── 标签页 ── */
.tab-bar {
  display: flex; gap: 0; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.tab {
  padding: 8px 16px; font-size: 12.5px; font-weight: 500;
  border: none; background: transparent; color: var(--ink-3);
  cursor: pointer; border-bottom: 2px solid transparent;
  transition: all .12s;
}
.tab:hover { color: var(--ink-1); }
.tab.tab-active { color: var(--primary); border-bottom-color: var(--primary); }

/* ── 列表视图 ── */
/* M267 方案 C：胶囊外的裸「状态」select 迁进了精确筛面板（.alf-pop .cr-filter-field），
   .list-toolbar 里只剩胶囊检索条本身；落位规则见文末「方案 C 检索条落位」段。 */
.list-toolbar {
  display: flex; gap: 8px; margin-bottom: 12px; align-items: center;
}

.project-list { display: flex; flex-direction: column; gap: 6px; }
.project-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  cursor: pointer; transition: all .12s;
}
.project-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.project-card .info { display: flex; flex-direction: column; gap: 2px; }
.project-card .info .title { font-weight: 600; font-size: 13px; }
.project-card .info .meta { font-size: 11px; color: var(--ink-4); display: flex; gap: 12px; }
.project-card .status-badge {
  font-size: 11px; padding: 2px 8px; border-radius: 10px;
  font-weight: 500; white-space: nowrap;
}
.status-badge.draft { background: var(--st-pending-soft); color: var(--st-pending); }
.status-badge.reviewing { background: var(--st-active-soft); color: var(--st-active); }
.status-badge.completed { background: var(--st-ok-soft); color: var(--st-ok); }
.status-badge.archived { background: var(--surface-3); color: var(--ink-4); }

.empty-state {
  padding: 40px; text-align: center; color: var(--ink-4);
  font-size: 13px;
}

/* ── 详情视图 ── */
.detail-layout { display: grid; grid-template-columns: 300px 1fr; gap: 16px; min-height: 70vh; }

/* 左侧栏 */
.detail-sidebar {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 12px;
}
.detail-sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.detail-sidebar-header h2 { font-size: 13px; font-weight: 600; }

/* ── 版本链路合并表 ── */
.vn-table { display: flex; flex-direction: column; gap: 2px; }
.vn-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px;
  padding: 6px 8px; border-radius: var(--r-sm);
  cursor: pointer; transition: all .12s;
  border-left: 3px solid var(--line);
  font-size: 12px;
}
.vn-row:hover { background: var(--surface-2); }
.vn-row.active { border-left-color: var(--primary); background: var(--primary-soft); }
.vn-row.disabled {
  cursor: default; opacity: .55; border-left-color: var(--line-soft);
}
.vn-row.disabled:hover { background: transparent; }
.vn-row .vn-version {
  font-weight: 500; color: var(--ink-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vn-row .vn-version .v-no-tag {
  font-family: var(--font-mono); font-size: 10px;
  background: var(--surface-3); padding: 1px 5px; border-radius: 4px;
  color: var(--ink-2); margin-right: 4px;
}
.vn-row .vn-node {
  font-size: 11px; color: var(--ink-4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: right;
}

/* 模板视图中的节点列表（复用旧样式） */
.node-timeline { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; }
.node-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--r-sm);
  border-left: 3px solid var(--line);
}
.node-item.approved { border-left-color: var(--st-ok); }
.node-item .node-order {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; background: var(--surface-3);
  flex-shrink: 0;
}
.node-item.approved .node-order { background: var(--st-ok-soft); color: var(--st-ok); }
.node-item .node-info { flex: 1; }
.node-item .node-info .node-name { font-size: 12px; font-weight: 500; }
.node-item .node-info .node-focus { font-size: 10px; color: var(--ink-4); }

/* 中间主区域 */
.detail-main { display: flex; flex-direction: column; gap: 12px; }

.editor-toolbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 6px 0; gap: 8px;
}
.editor-heading { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.editor-title { font-size: 14px; font-weight: 600; color: var(--ink-1); }
.editor-subtitle { font-size: 11px; color: var(--ink-4); font-weight: 400; }
.editor-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ── 编辑区：contenteditable 纯文本编辑器 ── */
.editor-wrap {
  display: block; border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; background: var(--surface); position: relative;
}
.editor-wrap:focus-within { border-color: var(--primary); }
.contract-editor {
  width: 100%; min-height: 400px; max-height: 70vh; overflow: auto;
  padding: 0;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.7;
  border: none; background: transparent; color: var(--ink-1);
  outline: none;
}
.contract-editor[contenteditable="false"] { background: var(--surface-2); color: var(--ink-2); }
.contract-editor:empty::before {
  content: attr(data-placeholder); color: var(--ink-4); padding: 14px; display: block;
}
.contract-editor {
  counter-reset: ce-line-number;
}
.ce-line {
  display: block;
  padding-left: 90px;
  position: relative;
  min-height: 22px;
  transition: background .12s;
}
.ce-line::before {
  counter-increment: ce-line-number;
  content: counter(ce-line-number);
  position: absolute;
  left: 4px;
  top: 0;
  width: 76px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-4);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
.ce-line:hover { background: var(--surface-2); }
.ce-line-text {
  min-width: 0; min-height: 22px;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  color: var(--ink-1);
}

/* ── 行来源渲染区（只读模式） ── */
.contract-lines {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.7;
}
.contract-line {
  display: grid; grid-template-columns: 80px 1fr; min-height: 22px;
  transition: background .12s;
}
.contract-line:hover { background: var(--surface-2); }
.contract-line:hover .line-gutter { background: var(--surface-2); }
.contract-line .line-gutter {
  padding: 0 8px 0 4px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-4);
  background: var(--surface);
  display: flex; align-items: flex-start; justify-content: flex-end; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  user-select: none; transition: background .12s;
}
.contract-line .line-gutter .gutter-initial {
  color: var(--ink-4);
}
.contract-line .line-gutter .gutter-node {
  color: var(--primary);
}
.contract-line .line-text {
  padding: 0 10px; white-space: pre-wrap; word-break: break-word;
  color: var(--ink-1);
}

/* Diff 视图（默认折叠） */
.diff-section {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden;
}
.diff-header {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; cursor: pointer; user-select: none;
  transition: background .12s;
}
.diff-header:hover { background: var(--surface-2); }
.diff-header-title { font-size: 13px; font-weight: 600; }
.diff-header-stats {
  flex: 1; display: flex; gap: 12px; font-size: 11px;
}
.diff-header-toggle {
  font-size: 11px; color: var(--primary); white-space: nowrap;
}
.diff-stats {
  display: flex; gap: 16px; font-size: 11px;
}
.diff-stat { display: flex; align-items: center; gap: 4px; }
.diff-stat .num { font-family: var(--font-mono); font-weight: 600; }
.diff-stat .num.added { color: var(--st-ok); }
.diff-stat .num.removed { color: var(--st-overdue); }
.diff-stat .num.unchanged { color: var(--ink-4); }
.diff-stat .num.changed { color: var(--st-active); }
.diff-stat.quality-low {
  font-size: 10.5px; color: var(--st-overdue); font-weight: 500;
  background: var(--st-overdue-soft); padding: 1px 6px; border-radius: 3px;
}
.diff-stat.quality-medium {
  font-size: 10.5px; color: var(--st-active); font-weight: 500;
  background: var(--st-active-soft); padding: 1px 6px; border-radius: 3px;
}
.diff-status.muted { color: var(--ink-4); }
.diff-status.error { color: var(--st-overdue); }
.diff-body { border-top: 1px solid var(--line-soft); }
.line-source-badge {
  display: inline-block; font-size: 10px; font-family: var(--font-mono);
  background: var(--ink-5); color: var(--ink-3); padding: 0 5px;
  border-radius: 3px; margin-right: 6px; white-space: nowrap;
}

.diff-items { padding: 8px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.diff-item {
  padding: 6px 10px; border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.6;
  white-space: pre-wrap;
}
.diff-item.unchanged { background: transparent; color: var(--ink-3); }
.diff-item.added { background: var(--st-ok-soft); border-left: 3px solid var(--st-ok); color: var(--ink-1); }
.diff-item.removed { background: var(--st-overdue-soft); border-left: 3px solid var(--st-overdue); color: var(--ink-1); text-decoration: line-through; }
.diff-item.changed { background: var(--st-active-soft); border-left: 3px solid var(--st-active); color: var(--ink-1); }
.diff-empty { padding: 20px; text-align: center; color: var(--ink-4); font-size: 12px; }

/* ── 弹窗 ── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,0.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.modal {
  background: var(--surface); border-radius: var(--r-lg);
  padding: 20px; width: 560px; max-width: 90vw;
  box-shadow: var(--shadow-drawer);
}
.modal h2 { font-size: 15px; font-weight: 600; margin-bottom: 16px; }
.form-group { margin-bottom: 12px; }
.form-group label {
  display: block; font-size: 11.5px; font-weight: 500; margin-bottom: 4px;
  color: var(--ink-2);
}
/* 必填标记：字段带 required 时，label 前自动加红星（弹窗非 form，属性仅作标记） */
.form-group:has(> label ~ :required) label::before {
  content: '*'; color: #c0392b; margin-right: 2px;
}
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 7px 10px; font-size: 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink-1); outline: none;
  font-family: var(--font-sans);
}
.form-group textarea {
  font-family: var(--font-mono); font-size: 12px; resize: vertical;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--primary);
}
.modal-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;
}

/* ── 行内字符差异（实时净变更） ── */
.inline-diff-body {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 8px 10px;
}
.inline-diff-seg {
  display: inline;
  white-space: pre-wrap;
}
.inline-diff-seg.added {
  background: #d1fae5;
  color: #065f46;
}
.inline-diff-seg.removed {
  background: #fee2e2;
  color: #991b1b;
  text-decoration: line-through;
}

/* ── AI 辅助面板（P4） ── */
.ai-controls { display: flex; gap: 8px; padding: 10px; align-items: center; flex-wrap: wrap; }
.ai-controls select, .ai-controls input {
  font-size: 12px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.ai-controls input { flex: 1; min-width: 180px; }
.ai-result { padding: 0 10px 10px; }
.ai-hint { padding: 10px; color: var(--ink-3); font-size: 12px; }
.ai-text { white-space: pre-wrap; font-size: 12px; line-height: 1.7; padding: 6px 0; }
.ai-suggestion { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; margin: 8px 0; }
.ai-sg-row { display: flex; gap: 8px; margin: 4px 0; }
.ai-sg-label { flex: none; width: 32px; color: var(--ink-4); font-size: 12px; }
.ai-sg-text { white-space: pre-wrap; font-size: 12px; line-height: 1.6; }
.ai-sg-text.added { color: var(--st-ok); }
.ai-sg-reason { color: var(--ink-3); font-size: 12px; margin: 4px 0; }
.ai-sg-actions { display: flex; gap: 8px; margin-top: 6px; }
.ai-history-item { display: flex; gap: 10px; padding: 6px 10px; font-size: 12px; cursor: pointer; border-radius: var(--r-sm); }
.ai-history-item:hover { background: var(--surface-2); }
.ai-hist-type { color: var(--ink-2); }
.ai-hist-time { color: var(--ink-4); flex: 1; }
.ai-hist-status.success { color: var(--st-ok); }
.ai-hist-status.failed { color: var(--st-overdue); }

/* ── 系统设置弹窗 ── */
.cfg-source { font-size: 11px; color: var(--ink-4); margin-left: 6px; font-weight: normal; }

/* ── 消息提示（与全站 .toast 形态一致；本页不引 lims2.css，就地复刻） ── */
.toast {
  position: fixed; right: 24px; bottom: 24px; z-index: 150;
  display: flex; align-items: center; gap: 10px;
  min-width: 270px; max-width: 400px; padding: 12px 14px;
  background: #1f2937; color: #fff; border-radius: 7px;
  box-shadow: 0 10px 30px rgba(17,24,39,.25);
  animation: toast-in .18s ease;
}
.toast[hidden] { display: none; }
.toast span {
  width: 20px; height: 20px; display: grid; place-items: center;
  background: var(--st-ok); border-radius: 50%; font-size: 11px; flex: none;
}
.toast.err span { background: var(--st-overdue); }
.toast p { margin: 0; font-size: 12px; line-height: 1.6; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   M264：Apple 皮肤重映射与组件覆盖（html[data-theme="apple"] 作用域，逐条 opt-in）
   ═══════════════════════════════════════════════════════════════════════════
   分层口径与 lims2 系页面一致：tokens.css（基座词汇）→ assets/theme-apple.css
   （M179 变量别名层，重定义与 tokens 同名的 --bg/--line/--surface）→ 皮肤其余
   各层 → 本文件。本页壳不是 lims2.css 的 .app-shell，theme-apple.css 够不着的
   tokens 词汇（--primary/--ink-*/--st-*/--font-sans）与页内组件字面量在这里
   逐条重映射——每条规则都带 html[data-theme="apple"]（或下方两处布局例外），
   不写 data-theme="apple" 时逐条零命中，页面与原样式逐像素一致。
   主题状态归 html[data-theme]（apple-shell.js 顶栏钮 + apple-mobile-nav.js 底栏
   「切换」格翻转同一属性），记忆 localStorage['lims2.theme']，缺省 Apple。 */
html[data-theme="apple"]{
  /* tokens.css 词汇 → Apple 值（色相与 theme-apple.css 的 lims2 词汇同源） */
  --primary:#0071e3; --primary-ink:#0064c8; --primary-soft:#f0f6fe;
  --st-overdue:#e30000; --st-overdue-soft:#fdeeee;
  --st-due:#b25000; --st-due-soft:#fff3e1;
  --st-active:#0068ca; --st-active-soft:#eef5fe;
  --st-ok:#248a3d; --st-ok-soft:#e9f7ee;
  --st-pending:#6e6e73; --st-pending-soft:#f2f2f7;
  --ink-1:#1d1d1f; --ink-2:#424245; --ink-3:#6e6e73; --ink-4:#a1a1a6; --ink-5:#d2d2d7;
  --line-soft:#f0f0f3; --line-hard:#d2d2d7; --surface-2:#fafafc; --surface-3:#f5f5f7;
  --font-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
  /* 方案 C 检索条（apple-list-filter.css）与演示错误态要的 lims2 词汇——本页不引
     lims2.css，缺了会让胶囊内文字/漏斗激活色/焦点光晕退回浏览器缺省 */
  --ink:#1d1d1f; --muted:#6e6e73; --text:#424245; --danger:#e30000;
  --blue-500:#0071e3; --blue-600:#0071e3; --blue-700:#0064c8; --blue-50:#f0f6fe;
  --focus:0 0 0 4px rgba(0,113,227,.22);
}
html[data-theme="apple"] body{-webkit-font-smoothing:antialiased}

/* ── 组件观感：胶囊按钮 / 12px 卡片 / 16px 弹窗 sheet（与 theme-apple-overlay
   对 lims2 系组件的改法同值，但选择器落在本页自己的类名上）────────────── */
html[data-theme="apple"] .btn{border-radius:999px;transition:border-radius .26s cubic-bezier(.22,1,.36,1),background-color .15s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease}
html[data-theme="apple"] .project-card,
html[data-theme="apple"] .detail-sidebar,
html[data-theme="apple"] .diff-section,
html[data-theme="apple"] .editor-wrap,
html[data-theme="apple"] .contract-lines{border-radius:12px;border-color:#e5e5ea;box-shadow:0 1px 3px rgba(0,0,0,.04)}
html[data-theme="apple"] .project-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.08)}
html[data-theme="apple"] .status-badge{border-radius:999px}
html[data-theme="apple"] .modal{border-radius:16px}
html[data-theme="apple"] .modal h2{font-size:17px;font-weight:700;letter-spacing:-.01em}
html[data-theme="apple"] .modal-overlay{background:rgba(29,29,31,.4)}
/* 控件 8px 连续圆角（口径同 theme-apple-overlay ⑧） */
html[data-theme="apple"] .form-group input,
html[data-theme="apple"] .form-group select,
html[data-theme="apple"] .form-group textarea,
html[data-theme="apple"] .ai-controls select,
html[data-theme="apple"] .ai-controls input{border-radius:8px}

/* ── 方案 C 精确筛面板字段（M267）：tokens 词汇，两主题同观感；挂 .alf-pop 作用域，
   不与页内表单（.form-group）互相影响 ──────────────────────────────────── */
.alf-pop .cr-filter-field{display:grid;gap:5px;margin:0 0 12px;font-size:calc(12px*var(--font-size-scale,1));color:var(--ink-1)}
.alf-pop .cr-filter-field>span{color:var(--ink-3);font-size:calc(11px*var(--font-size-scale,1))}
.alf-pop .cr-filter-field select,
.alf-pop .cr-filter-field input{width:100%;height:34px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);padding:0 8px;font-size:calc(12px*var(--font-size-scale,1));color:var(--ink-1)}
.alf-pop .cr-filter-field select:focus,
.alf-pop .cr-filter-field input:focus{outline:none;border-color:var(--primary);box-shadow:var(--focus)}
.cr-filter-range{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* 面板脚的「应用」沿用 .btn 体系，底栏留白对齐共享件的 sticky 底栏观感 */
.alf-pop .alf-pop-foot .btn{min-width:72px}

/* ── 方案 C 共享件要的 lims2 词汇（M267）：tokens 壳缺名，两主题都补齐 ──
   apple 段上文已有同值重映射；原样式主题从这里的 :root 缺省取值——漏斗激活色、
   chip 配色、面板边框阴影与焦点光晕在两个主题下都成立，不再退浏览器缺省。 */
:root{
  --ink:#1d1d1f; --muted:#6e6e73; --text:#424245; --danger:#e30000;
  --blue-500:#0071e3; --blue-600:#0071e3; --blue-700:#0064c8; --blue-50:#f0f6fe;
  --focus:0 0 0 4px rgba(0,113,227,.22);
  --z-page-panel:45;
}

/* ── 方案 C 检索条落位（布局规则不带主题门：胶囊在两主题下都是这个占位）── */
.list-toolbar .alf-search{flex:1;min-width:0;margin:0}

/* ═══════════════════════════════════════════════════════════════════════════
   M264：手机档布局（<768px，与 apple-mobile-nav.js/css 的 MQ 同值）＋ 底栏让位
   ═══════════════════════════════════════════════════════════════════════════
   本页此前没有任何窄屏规则：详情双栏（300px + 1fr）直接压碎。这里补两条布局
   ——双栏改单栏、页头允许换行；底栏挂载页（html[data-apple-mobar]）的壳让位
   与 toast 抬升同口径（apple-mobile-nav.css 只照顾 .app-shell/.content，本页壳
   是 .shell；.toast 那条共享规则是全站选择器，已自动覆盖本页）。 */
@media(max-width:767.98px){
  .detail-layout{grid-template-columns:1fr;min-height:0}
  .phead{flex-wrap:wrap}
  .editor-actions{flex-wrap:wrap}
  html[data-apple-mobar][data-theme="apple"] .shell{padding-bottom:calc(var(--apple-mobar-h) + var(--apple-mobar-safe) + 24px)}
}