:root {
  color-scheme: light;
  --font-main: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
  --bg: #f4f7f5;
  --bg-soft: #eef8f4;
  --panel: #ffffff;
  --panel-soft: #f7fbf8;
  --line: #dbe7e2;
  --text: #152033;
  --ink: var(--text);
  --muted: #617086;
  --primary: #1d68c7;
  --primary-strong: #0e4ea0;
  --primary-soft: #e9f2ff;
  --blue: var(--primary);
  --accent: #20b486;
  --accent-soft: #dff8ef;
  --warm: #ffe3ac;
  --sidebar-bg: #0f1d2c;
  --sidebar-active: #223a55;
  --green: #17845b;
  --amber: #ad6800;
  --red: #bf2a2a;
  --cyan: #087c89;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 18px 42px rgba(24, 33, 47, 0.08);
  --shadow-soft: 0 10px 24px rgba(24, 33, 47, 0.06);
  --scrollbar-size: 20px;
  --scrollbar-track: color-mix(in srgb, var(--panel-soft) 78%, #ffffff);
  --scrollbar-thumb: color-mix(in srgb, var(--primary) 58%, var(--muted));
  --scrollbar-thumb-hover: color-mix(in srgb, var(--primary) 84%, var(--accent));
}

[data-theme="calm"] {
  --bg: #f6f8fb;
  --bg-soft: #eaf0f7;
  --panel: #ffffff;
  --panel-soft: #f8faff;
  --line: #d9e3f0;
  --text: #172033;
  --ink: var(--text);
  --muted: #66758d;
  --primary: #2b5fca;
  --primary-strong: #1b3f8f;
  --primary-soft: #edf3ff;
  --accent: #0b8f9c;
  --accent-soft: #dff4f7;
  --warm: #d8ad5b;
  --sidebar-bg: #101827;
  --sidebar-active: #263857;
}

[data-theme="business"] {
  --bg: #f3f5f7;
  --bg-soft: #e7edf2;
  --panel: #ffffff;
  --panel-soft: #f6f8fa;
  --line: #d5dde7;
  --text: #111827;
  --ink: var(--text);
  --muted: #5f6f83;
  --primary: #1f4e8c;
  --primary-strong: #122f58;
  --primary-soft: #e9f1fb;
  --blue: var(--primary);
  --accent: #0f766e;
  --accent-soft: #e4f3f1;
  --warm: #c99a3b;
  --sidebar-bg: #0d1726;
  --sidebar-active: #1f334d;
  --green: #167a5b;
  --amber: #a76313;
  --red: #b9383c;
  --cyan: #0b7185;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow: 0 22px 52px rgba(15, 23, 42, 0.13);
  --shadow-soft: 0 12px 28px rgba(15, 23, 42, 0.075);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 72% -10%, var(--bg-soft), transparent 34%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-main);
  font-size: 15px;
  line-height: 1.55;
}

[data-theme="business"] body {
  background:
    radial-gradient(circle at 82% -10%, rgba(31, 78, 140, 0.14), transparent 33%),
    radial-gradient(circle at 12% 18%, rgba(15, 118, 110, 0.1), transparent 28%),
    radial-gradient(circle at 96% 92%, rgba(201, 154, 59, 0.12), transparent 28%),
    linear-gradient(180deg, #fafbfc 0%, #f3f5f7 46%, #e7edf2 100%);
}

[data-theme="business"] .sidebar {
  background:
    radial-gradient(circle at 28px 24px, rgba(201, 154, 59, 0.16), transparent 34%),
    radial-gradient(circle at 112% 8%, rgba(31, 78, 140, 0.24), transparent 42%),
    linear-gradient(180deg, #111f33 0%, var(--sidebar-bg) 62%, #07111f 100%);
}

[data-theme="business"] .brand-mark {
  background: linear-gradient(135deg, var(--primary), var(--accent) 70%, var(--warm));
}

[data-theme="business"] .theme-choice.active {
  background: linear-gradient(135deg, var(--primary-strong), var(--primary) 58%, var(--warm));
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 1px solid color-mix(in srgb, var(--line) 88%, #ffffff);
  background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--panel-soft) 78%, #ffffff));
  color: var(--text);
  min-height: 34px;
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) inset, 0 1px 2px rgba(17, 24, 39, 0.035);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

button.primary {
  border-color: color-mix(in srgb, var(--primary) 84%, var(--accent));
  background: linear-gradient(135deg, var(--primary-strong), var(--primary) 56%, color-mix(in srgb, var(--accent) 82%, var(--primary)));
  color: #fff;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--primary) 24%, transparent);
}

[data-theme="business"] button.primary {
  border-color: color-mix(in srgb, var(--primary) 80%, var(--warm));
  background: linear-gradient(135deg, var(--primary-strong), var(--primary) 62%, #0f766e);
  box-shadow: 0 12px 26px rgba(31, 78, 140, 0.22);
}

button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary) 46%, var(--line));
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.08);
  transform: translateY(-1px);
}

button.danger {
  border-color: color-mix(in srgb, var(--red) 28%, var(--line));
  color: var(--red);
  background: color-mix(in srgb, #fff 82%, #fff1f0);
}

button.small-btn {
  min-height: 28px;
  padding: 4px 10px;
  border-color: color-mix(in srgb, var(--primary) 22%, var(--line));
  color: var(--primary);
  background: var(--primary-soft);
  white-space: nowrap;
}

.product-thumb {
  width: 58px;
  height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: cover;
  display: inline-grid;
  place-items: center;
  color: var(--primary);
  font-weight: 800;
  vertical-align: middle;
}

.product-thumb.placeholder {
  background: var(--primary-soft);
}

.field-title {
  font-weight: 700;
  color: var(--text);
}

.keyword-table-field {
  display: grid;
  gap: 8px;
}

.compact-table table {
  min-width: 860px;
}

.compact-table input {
  min-width: 90px;
  height: 34px;
  padding: 6px 8px;
}

.compact-table input[data-keyword-prop="keyword"] {
  min-width: 160px;
}

.compact-table select {
  min-width: 132px;
  height: 34px;
  padding: 5px 8px;
}

.hidden-control {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.keyword-source-toggle {
  min-width: 86px;
  justify-content: center;
}

.compact-table th,
.compact-table td {
  white-space: nowrap;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.employee-portal-page {
  display: grid;
  gap: 16px;
  min-width: 0;
  max-width: 100%;
}

.portal-maintain-block {
  display: grid;
  gap: 10px;
  padding: 8px;
  border: 1px dashed color-mix(in srgb, var(--primary) 36%, var(--line));
  border-radius: 18px;
  background: color-mix(in srgb, var(--primary-soft) 54%, #fffefd);
  min-width: 0;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}

.portal-maintain-block.is-hidden {
  background: rgba(248, 250, 252, 0.92);
  opacity: 0.78;
}

.portal-maintain-block.is-dragging {
  opacity: 0.55;
}

.portal-maintain-block.is-drop-target {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.portal-maintain-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, #ffffff);
  border-radius: 12px;
  background: rgba(255, 254, 253, 0.92);
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.055);
}

.portal-maintain-order,
.portal-maintain-bar > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.portal-maintain-bar strong {
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-maintain-order button,
.portal-maintain-bar > div:last-child button {
  min-height: 32px;
  padding: 5px 9px;
}

.portal-drag-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 32px;
  padding: 5px 9px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent-soft) 82%, #ffffff);
  color: color-mix(in srgb, var(--accent) 76%, #064e3b);
  font-weight: 800;
  cursor: grab;
  user-select: none;
}

.page-maintain-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 1px dashed color-mix(in srgb, var(--primary) 38%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary-soft) 48%, #ffffff);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}

.page-maintain-block > * {
  min-width: 0;
  max-width: 100%;
}

.page-maintain-block > .panel,
.page-maintain-block > .access-control-page,
.page-maintain-block .panel {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.page-maintain-block.is-hidden {
  background: rgba(248, 250, 252, 0.94);
  opacity: 0.72;
}

.page-maintain-block.is-dragging {
  opacity: 0.55;
}

.page-maintain-block.is-drop-target {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.page-maintain-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, #ffffff);
  border-radius: 10px;
  background: rgba(255, 254, 253, 0.94);
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.055);
}

.page-maintain-order,
.page-maintain-bar > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.page-maintain-bar strong {
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.page-maintain-order button,
.page-maintain-bar > div:last-child button {
  min-height: 32px;
  padding: 5px 9px;
}

.page-drag-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 32px;
  padding: 5px 9px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent-soft) 82%, #ffffff);
  color: color-mix(in srgb, var(--accent) 76%, #064e3b);
  font-weight: 800;
  cursor: grab;
  user-select: none;
}

.portal-custom-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, #ffffff);
  border-radius: 20px;
  background: linear-gradient(180deg, #fffefd, color-mix(in srgb, var(--panel-soft) 50%, #ffffff));
  box-shadow: var(--shadow-soft);
  min-width: 0;
}

.portal-custom-section > div {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.portal-custom-section span {
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eaf4ff;
  color: var(--primary-strong);
  font-size: 12px;
  font-weight: 800;
}

.portal-custom-section h2 {
  margin: 0;
  font-size: 24px;
}

.portal-custom-section p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.portal-custom-section.green span {
  background: #dcfce7;
  color: #15803d;
}

.portal-custom-section.mint span {
  background: #ccfbf1;
  color: #0f766e;
}

.portal-custom-section.amber span {
  background: #fef3c7;
  color: #b45309;
}

.portal-custom-section.rose span {
  background: #ffe4e6;
  color: #be123c;
}

.portal-custom-section.violet span {
  background: #ede9fe;
  color: #6d28d9;
}

.portal-builder-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
  border-radius: 16px;
  background:
    radial-gradient(circle at 92% 6%, color-mix(in srgb, var(--accent-soft) 72%, transparent), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 88%, #ffffff), #fffefd 72%);
  box-shadow: var(--shadow-soft);
}

.portal-builder-strip > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.portal-builder-strip span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
}

.portal-builder-strip strong {
  font-size: 18px;
}

.portal-builder-strip small {
  color: var(--muted);
  line-height: 1.45;
}

.portal-builder-strip .row-actions {
  justify-content: flex-end;
  margin: 0;
  white-space: nowrap;
}

.portal-cover {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 18px;
  align-items: stretch;
  min-height: 210px;
  padding: 24px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 30%),
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--warm) 10%, transparent), transparent 24%),
    linear-gradient(135deg, #fffefd 0%, color-mix(in srgb, var(--primary-soft) 64%, #ffffff) 54%, color-mix(in srgb, var(--accent-soft) 76%, #ffffff) 100%);
  border: 1px solid color-mix(in srgb, var(--line) 78%, #ffffff);
  box-shadow: var(--shadow);
  min-width: 0;
  max-width: 100%;
}

.portal-demo-entry,
.portal-account-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 12px;
  background:
    radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--accent-soft) 72%, transparent), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 88%, #ffffff), #fffefd);
  box-shadow: var(--shadow-soft);
}

.portal-demo-entry span,
.portal-account-entry > div:first-child > span {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 4px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
}

.portal-demo-entry h2,
.portal-account-entry h2 {
  margin: 0 0 4px;
  font-size: 20px;
}

.portal-demo-entry p {
  margin: 0;
  color: var(--muted);
}

.portal-account-entry p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.portal-account-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(20, 184, 166, 0.24);
  border-radius: 16px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 62%, #ffffff), rgba(255, 255, 255, 0.94)),
    #fff;
}

.portal-account-card small {
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  background: #dff8ef;
  color: #0f766e;
  font-weight: 800;
}

.portal-account-card strong {
  font-size: 18px;
}

.portal-account-card span {
  color: var(--muted);
  line-height: 1.5;
}

.portal-demo-entry .row-actions,
.portal-account-card .row-actions {
  justify-content: flex-end;
  margin: 0;
}

.portal-sales-performance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 14px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 22px;
  background:
    radial-gradient(circle at 72% 4%, color-mix(in srgb, var(--accent-soft) 74%, transparent), transparent 30%),
    linear-gradient(135deg, #fffefd, color-mix(in srgb, var(--primary-soft) 70%, #ffffff) 54%, color-mix(in srgb, var(--accent-soft) 78%, #ffffff));
  box-shadow: var(--shadow-soft);
}

.portal-sales-performance-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.portal-sales-summary-copy {
  max-width: 680px;
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.portal-sales-performance-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.portal-sales-score {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  min-height: 184px;
  padding: 18px;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.portal-sales-score > span {
  color: var(--muted);
}

.portal-sales-score > strong {
  color: var(--text);
  font-size: 46px;
  line-height: 1;
}

.portal-sales-score > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
  margin-top: 6px;
}

.portal-sales-score small {
  display: grid;
  gap: 2px;
  padding: 8px 4px;
  border-radius: 10px;
  text-align: center;
  color: var(--muted);
  background: color-mix(in srgb, var(--primary-soft) 72%, #ffffff);
}

.portal-sales-score small b {
  color: var(--text);
}

.portal-sales-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.portal-sales-kpis article {
  display: grid;
  align-content: center;
  gap: 7px;
  min-height: 86px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 84%, #ffffff);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
}

.portal-sales-kpis strong {
  color: var(--text);
  font-size: 22px;
}

.portal-sales-kpis span {
  color: var(--muted);
}

.portal-sales-todo {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(245, 158, 11, 0.24);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.96), rgba(255, 255, 255, 0.96));
}

.portal-sales-todo strong {
  font-size: 18px;
}

.portal-sales-todo ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-sales-todo li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(245, 158, 11, 0.18);
}

.portal-sales-todo li b {
  color: var(--text);
}

.portal-sales-todo li span,
.portal-sales-todo p {
  margin: 0;
  color: var(--muted);
}

.portal-sales-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.portal-announcement-board {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 90% 8%, color-mix(in srgb, var(--warm) 12%, transparent), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, #fff8de 52%, #ffffff), color-mix(in srgb, var(--primary-soft) 86%, #ffffff)),
    #fff;
  border: 1px solid color-mix(in srgb, var(--warm) 18%, var(--line));
  box-shadow: var(--shadow-soft);
}

.portal-announcement-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.2fr);
  gap: 12px;
}

.portal-announcement-feature {
  display: grid;
  align-content: end;
  gap: 10px;
  min-height: 176px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--warm) 38%, var(--line));
  border-radius: 18px;
  background:
    radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 32%),
    linear-gradient(135deg, #fff8eb, #fffefd 58%, color-mix(in srgb, var(--primary-soft) 86%, #ffffff));
  cursor: pointer;
}

.portal-announcement-feature span,
.portal-announcement-list span {
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff7ed;
  color: #b45309;
  font-size: 12px;
  font-weight: 800;
}

.portal-announcement-feature h3 {
  margin: 0;
  font-size: 24px;
}

.portal-announcement-feature p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.portal-announcement-list {
  display: grid;
  gap: 10px;
}

.portal-announcement-list button {
  display: grid;
  gap: 6px;
  min-height: 78px;
  padding: 13px 14px;
  border: 1px solid #e0e8f1;
  border-radius: 16px;
  text-align: left;
  background: rgba(255, 255, 255, 0.84);
}

.portal-announcement-list small {
  color: var(--muted);
  line-height: 1.45;
}

.portal-announcement-feature:hover,
.portal-announcement-list button:hover {
  border-color: rgba(37, 99, 235, 0.28);
  background: #fff;
  transform: translateY(-1px);
}

.portal-cover-main {
  display: grid;
  align-content: center;
  gap: 12px;
}

.portal-cover-main > span {
  width: fit-content;
  padding: 5px 11px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--accent) 70%, var(--primary-strong));
  background: color-mix(in srgb, var(--accent-soft) 78%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  font-weight: 800;
  font-size: 13px;
}

.portal-cover-main h2 {
  margin: 0;
  font-size: 38px;
  line-height: 1.15;
  color: #162033;
}

.portal-cover-main p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.portal-cover-side {
  display: grid;
  align-content: center;
  gap: 9px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 13%, #ffffff);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.055);
}

.portal-cover-side b {
  font-size: 52px;
  line-height: 1;
}

.portal-cover-side span {
  color: var(--muted);
}

.portal-poster-carousel {
  position: relative;
  overflow: hidden;
  min-height: 238px;
  border-radius: 24px;
  background: #fffefd;
  border: 1px solid color-mix(in srgb, var(--line) 78%, #ffffff);
  box-shadow: var(--shadow);
  min-width: 0;
  max-width: 100%;
}

.portal-poster-track {
  position: relative;
  min-height: 238px;
  min-width: 0;
  max-width: 100%;
}

.portal-poster-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 18px;
  align-items: center;
  padding: 28px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(0) scale(0.985);
  transition: opacity 0.45s ease, transform 0.45s ease;
  cursor: pointer;
}

.portal-poster-slide.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.portal-poster-slide::before {
  content: "";
  position: absolute;
  inset: auto 34px -90px auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  opacity: 0.28;
}

.portal-poster-slide.mint {
  background: linear-gradient(135deg, #effaf7 0%, #fffefd 56%, #eef8f1 100%);
}

.portal-poster-slide.blue {
  background: linear-gradient(135deg, #edf4ff 0%, #fffefd 56%, #eef2ff 100%);
}

.portal-poster-slide.green {
  background: linear-gradient(135deg, #f0fbf4 0%, #fffefd 58%, #f6f9eb 100%);
}

.portal-poster-slide.amber {
  background: linear-gradient(135deg, #fff7e5 0%, #fffefd 56%, #fff3e8 100%);
}

.portal-poster-slide.mint::before {
  background: #2dd4bf;
}

.portal-poster-slide.blue::before {
  background: #60a5fa;
}

.portal-poster-slide.green::before {
  background: #22c55e;
}

.portal-poster-slide.amber::before {
  background: #f59e0b;
}

.portal-poster-slide.has-image {
  background-image:
    linear-gradient(90deg, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.32), rgba(15, 23, 42, 0.08)),
    var(--poster-image);
  background-position: center;
  background-size: cover;
}

.portal-poster-slide.has-image::before {
  display: none;
}

.portal-poster-slide.has-image span {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
}

.portal-poster-slide.has-image h3,
.portal-poster-slide.has-image p {
  color: #ffffff;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

.portal-poster-slide.has-image aside {
  color: #ffffff;
  background: rgba(15, 23, 42, 0.34);
}

.portal-poster-slide.has-image aside small {
  color: rgba(255, 255, 255, 0.82);
}

.portal-poster-slide > div {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  max-width: 760px;
}

.portal-poster-slide span {
  width: fit-content;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--primary-strong);
  font-size: 13px;
  font-weight: 800;
}

.portal-poster-slide h3 {
  margin: 0;
  font-size: 34px;
  line-height: 1.18;
  color: #122033;
}

.portal-poster-slide p {
  max-width: 660px;
  margin: 0;
  color: #526172;
  line-height: 1.75;
}

.portal-poster-slide button {
  width: fit-content;
  border: 0;
  background: linear-gradient(135deg, #172033, #0f172a);
  color: #fff;
  box-shadow: 0 10px 22px rgba(24, 33, 47, 0.16);
}

.portal-poster-slide aside {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  justify-self: end;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 36px;
  background: rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(10px);
}

.portal-poster-slide aside b {
  font-size: 58px;
  line-height: 1;
}

.portal-poster-slide aside small {
  color: var(--muted);
}

.portal-poster-dots {
  position: absolute;
  left: 28px;
  bottom: 18px;
  display: flex;
  gap: 8px;
  z-index: 2;
}

.portal-poster-dots button {
  min-height: 0;
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(24, 33, 47, 0.22);
  transition: width 0.22s ease, background 0.22s ease;
}

.portal-poster-dots button.active {
  width: 28px;
  background: var(--primary);
}

.portal-workbench-dock,
.portal-forum-wall {
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, #fffefd, color-mix(in srgb, var(--panel-soft) 48%, #ffffff));
  border: 1px solid color-mix(in srgb, var(--line) 76%, #ffffff);
  box-shadow: var(--shadow-soft);
  min-width: 0;
  max-width: 100%;
}

.portal-photo-wall {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, #fffefd, color-mix(in srgb, var(--panel-soft) 48%, #ffffff));
  border: 1px solid color-mix(in srgb, var(--line) 76%, #ffffff);
  box-shadow: var(--shadow-soft);
  min-width: 0;
  max-width: 100%;
}

.portal-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.portal-photo-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0;
  color: inherit;
  text-align: left;
  background: color-mix(in srgb, var(--panel) 86%, var(--primary-soft));
  cursor: pointer;
}

.portal-photo-card:hover {
  border-color: rgba(37, 99, 235, 0.28);
  background: #fff;
  transform: translateY(-1px);
}

.portal-photo-card img,
.portal-photo-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: linear-gradient(135deg, #e0f2fe, #ecfdf5);
}

.portal-photo-placeholder {
  display: grid;
  place-items: center;
  color: var(--primary);
  font-size: 34px;
  font-weight: 900;
}

.portal-photo-card div {
  display: grid;
  gap: 5px;
  padding: 12px;
}

.portal-photo-card strong {
  font-size: 15px;
}

.portal-photo-card span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.portal-album-modal {
  display: grid;
  gap: 14px;
}

.portal-album-preview {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #f8fafc;
}

.portal-album-preview img,
.portal-album-preview .portal-photo-placeholder {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
}

.portal-album-preview > div:last-child {
  display: grid;
  gap: 6px;
  padding: 14px;
}

.portal-album-preview strong {
  font-size: 18px;
}

.portal-album-preview span {
  color: var(--muted);
}

.portal-album-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.portal-album-thumbs button {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: left;
  background: #fff;
}

.portal-album-thumbs button.active {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.portal-album-thumbs img,
.portal-album-thumbs span {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  object-fit: cover;
  background: linear-gradient(135deg, #e0f2fe, #ecfdf5);
}

.portal-album-thumbs span {
  display: grid;
  place-items: center;
  color: var(--primary);
  font-size: 24px;
  font-weight: 900;
}

.portal-workbench-dock nav {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.portal-workbench-dock nav button {
  display: grid;
  gap: 7px;
  flex: 0 0 178px;
  min-height: 86px;
  padding: 14px;
  border: 0;
  border-radius: 18px;
  text-align: left;
  background: #f6f8fb;
}

.portal-workbench-dock nav button.recommended {
  flex-basis: 220px;
  border: 1px solid rgba(20, 184, 166, 0.28);
  background:
    linear-gradient(135deg, rgba(236, 253, 245, 0.95), rgba(239, 246, 255, 0.92)),
    #fff;
  box-shadow: 0 10px 22px rgba(13, 148, 136, 0.08);
}

.portal-workbench-dock nav button.recommended strong::after {
  content: "鎺ㄨ崘";
  display: inline-flex;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #ccfbf1;
  color: #0f766e;
  font-size: 11px;
  vertical-align: middle;
}

.portal-workbench-dock nav button:hover {
  background: #eaf4ff;
  transform: translateY(-1px);
}

.portal-workbench-dock nav span,
.portal-forum-posts small {
  color: var(--muted);
  line-height: 1.45;
}

.portal-forum-wall {
  background:
    linear-gradient(180deg, rgba(234, 244, 255, 0.88), rgba(255, 255, 255, 0.96) 34%),
    #fff;
}

.portal-forum-posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.portal-forum-posts button {
  display: grid;
  gap: 7px;
  min-height: 116px;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, #ffffff);
  border-radius: 18px;
  text-align: left;
  background: rgba(255, 254, 253, 0.82);
}

.portal-forum-posts button:hover {
  border-color: color-mix(in srgb, var(--primary) 32%, var(--line));
  background: #fffefd;
}

.portal-forum-posts span {
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-soft) 88%, #ffffff);
  color: var(--primary-strong);
  font-size: 12px;
  font-weight: 700;
}

.portal-channel-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  padding: 10px;
  border-radius: 18px;
  background: #fffefd;
  border: 1px solid color-mix(in srgb, var(--line) 78%, #ffffff);
  box-shadow: 0 8px 22px rgba(24, 33, 47, 0.05);
}

.portal-channel-nav button {
  display: grid;
  gap: 4px;
  min-height: 74px;
  padding: 12px;
  border: 0;
  border-radius: 14px;
  text-align: left;
  background: color-mix(in srgb, var(--panel-soft) 76%, #ffffff);
}

.portal-channel-nav button:hover,
.portal-news-list button:hover,
.portal-thread-list button:hover,
.portal-benefit-list button:hover {
  background: color-mix(in srgb, var(--primary-soft) 78%, #ffffff);
}

.portal-channel-nav span,
.portal-stat-strip small,
.portal-news-list small,
.portal-thread-list span,
.portal-benefit-list small,
.portal-profile span {
  color: var(--muted);
  line-height: 1.45;
}

.portal-stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #fffefd;
  border: 1px solid color-mix(in srgb, var(--line) 78%, #ffffff);
  box-shadow: 0 8px 22px rgba(24, 33, 47, 0.05);
}

.portal-stat-strip button {
  display: grid;
  gap: 5px;
  min-height: 94px;
  padding: 15px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  text-align: left;
  background: transparent;
}

.portal-stat-strip button:last-child {
  border-right: 0;
}

.portal-stat-strip strong {
  font-size: 24px;
}

.portal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}

.portal-feed,
.portal-sidebar {
  display: grid;
  gap: 14px;
}

.portal-feed,
.portal-side-block,
.portal-profile {
  padding: 18px;
  border-radius: 18px;
  background: #fffefd;
  border: 1px solid color-mix(in srgb, var(--line) 78%, #ffffff);
  box-shadow: 0 8px 22px rgba(24, 33, 47, 0.05);
}

.portal-section-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin: 0 0 10px;
}

.portal-section-title.compact {
  margin-bottom: 12px;
}

.portal-section-title h2 {
  font-size: 22px;
}

.portal-feature-story {
  display: grid;
  gap: 10px;
  padding: 20px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--accent-soft) 62%, transparent), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 72%, #ffffff), #fffefd);
  cursor: pointer;
}

.portal-feature-story > span,
.portal-news-list span {
  width: fit-content;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--primary-strong);
  background: #eaf4ff;
  font-size: 12px;
  font-weight: 700;
}

.portal-feature-story h3 {
  font-size: 26px;
}

.portal-feature-story p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.portal-news-list,
.portal-thread-list,
.portal-benefit-list,
.portal-quick-list {
  display: grid;
}

.portal-news-list button,
.portal-thread-list button {
  display: grid;
  gap: 7px;
  padding: 14px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  text-align: left;
  background: transparent;
}

.portal-news-list button:last-child,
.portal-thread-list button:last-child {
  border-bottom: 0;
}

.portal-thread-list button {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.portal-thread-list em {
  font-style: normal;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--green);
  background: #ecf8f2;
  font-size: 12px;
}

.portal-learning-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: 16px;
  background: #f8fafc;
}

.portal-learning-line span,
.portal-learning-line p {
  color: var(--muted);
}

.portal-learning-line p {
  margin: 6px 0 0;
}

.portal-learning-line b {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 8px solid #dbeafe;
  border-top-color: #22c55e;
  border-radius: 50%;
  background: #fff;
}

.portal-profile {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(21, 101, 192, 0.1), transparent 38%),
    #fff;
}

.portal-avatar {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(135deg, #1565c0, #22c55e);
  font-size: 28px;
  font-weight: 800;
}

.portal-profile em {
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef6ff;
  color: var(--primary-strong);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
}

.portal-profile-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}

.portal-profile-stats > div {
  display: grid;
  gap: 3px;
  padding: 10px 5px;
  border-radius: 12px;
  background: #f8fafc;
}

.portal-profile-stats b {
  font-size: 20px;
}

.portal-profile-stats small {
  color: var(--muted);
}

.portal-benefit-list {
  gap: 7px;
}

.portal-benefit-list button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 9px;
  border: 0;
  border-radius: 12px;
  text-align: left;
  background: #f8fafc;
}

.portal-benefit-list .points-product-art {
  width: 42px;
  height: 42px;
  font-size: 19px;
}

.portal-quick-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.portal-quick-list button {
  min-height: 38px;
}

@media (max-width: 980px) {
  .warm-forum-hero,
  .warm-forum-layout,
  .warm-forum-channels,
  .warm-composer-panel,
  .forum-board-section,
  .forum-poster-module,
  .forum-text-module,
  .forum-flex-head.with-action,
  .forum-learning-posters,
  .forum-announcement-wall,
  .forum-suggestion-board,
  .forum-points-shelf,
  .forum-thread-card,
  .warm-post-grid,
  .warm-training-grid,
  .warm-culture-grid,
  .warm-modal-photo-grid,
  .share-forum-hero,
  .share-forum-layout,
  .share-forum-stat-grid,
  .share-forum-channel-grid,
  .share-forum-post-grid,
  .portal-cover,
  .portal-layout,
  .portal-demo-entry,
  .portal-account-entry,
  .portal-sales-performance,
  .portal-sales-performance-grid,
  .portal-announcement-grid,
  .portal-maintain-bar,
  .portal-custom-section,
  .portal-builder-strip,
  .portal-poster-slide {
    grid-template-columns: 1fr;
  }

  .portal-maintain-bar strong {
    text-align: left;
  }

  .portal-poster-slide aside {
    display: none;
  }

  .portal-demo-entry .row-actions,
  .portal-account-card .row-actions,
  .portal-builder-strip .row-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .portal-sales-kpis,
  .portal-sales-score > div {
    grid-template-columns: 1fr;
  }

  .warm-forum-hero {
    min-height: 0;
    padding: 22px 18px 16px;
  }

  .warm-forum-hero-window.direction-vertical {
    height: 430px;
  }

  .warm-forum-hero h2 {
    font-size: 24px;
  }

  .warm-forum-hero p {
    font-size: 13px;
  }

  .warm-forum-stat-strip,
  .warm-interaction-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .warm-forum-visual {
    min-height: 168px;
  }

  .warm-forum-visual img,
  .warm-forum-poster-circle {
    right: 22px;
    bottom: -88px;
    width: 220px;
    height: 220px;
    min-height: 0;
  }

  .warm-forum-visual figcaption {
    right: 12px;
    top: 10px;
    width: 118px;
    min-height: 122px;
    border-radius: 28px;
  }

  .warm-forum-visual figcaption strong {
    font-size: 48px;
  }

  .warm-forum-visual-fallback {
    min-height: 168px;
  }

  .warm-post-card {
    grid-template-columns: 1fr;
  }

  .warm-inline-post-form {
    grid-template-columns: 1fr;
  }

  .forum-board-poster {
    min-height: 220px;
  }

  .forum-flex-module {
    padding: 14px;
  }

  .forum-carousel-slide {
    flex-basis: min(280px, 82vw);
    grid-template-rows: 150px minmax(112px, auto);
  }

  .forum-banner-strip-head,
  .forum-banner-strip-card {
    grid-template-columns: 1fr;
  }

  .forum-banner-strip-card img,
  .forum-banner-mini-poster {
    width: 100%;
  }

  .forum-banner-strip-module.style-image .forum-banner-strip-card > img,
  .forum-banner-strip-module.style-image .forum-banner-mini-poster {
    height: 220px;
  }

  .forum-banner-strip-module.style-image .forum-banner-mini-poster .forum-poster-art {
    min-height: 220px;
    height: 220px;
  }

  .forum-banner-strip-module.style-image.direction-vertical .forum-banner-strip-window {
    height: 238px;
  }

  .forum-banner-strip-module.style-strip .forum-banner-strip-card {
    min-height: 164px;
  }

  .forum-poster-slot-grid {
    grid-template-columns: 1fr;
  }

  .forum-poster-size-guide {
    grid-template-columns: 1fr;
  }

  .forum-album-grid {
    grid-template-columns: 1fr;
  }

  .forum-thread-card img,
  .forum-thread-visual {
    width: 100%;
    height: 150px;
  }

  .forum-announcement-card.featured {
    grid-row: auto;
  }

  .warm-post-accent {
    width: 100%;
    min-height: 78px;
  }

  .warm-thread-list button {
    grid-template-columns: 1fr;
  }

  .warm-thread-list small {
    grid-column: auto;
  }

  .share-forum-hero {
    padding: 16px;
  }

  .share-forum-hero h2 {
    font-size: 22px;
  }

  .share-forum-link-list {
    grid-template-columns: 1fr;
  }

  .portal-cover-main h2 {
    font-size: 28px;
  }

  .portal-poster-carousel,
  .portal-poster-track {
    min-height: 310px;
  }

  .portal-poster-slide {
    padding: 22px;
  }

  .portal-poster-slide h3 {
    font-size: 26px;
  }

  .portal-stat-strip,
  .portal-profile-stats,
  .portal-quick-list {
    grid-template-columns: 1fr;
  }

  .portal-stat-strip button {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

.employee-home-page {
  display: grid;
  gap: 16px;
}

.employee-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 16px;
  padding: 20px;
  border: 1px solid #d8e7f7;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(234, 244, 255, 0.92), rgba(255, 255, 255, 0.96) 52%, rgba(236, 248, 242, 0.9)),
    #fff;
  box-shadow: 0 16px 36px rgba(24, 33, 47, 0.08);
}

.employee-hero-main {
  display: grid;
  gap: 10px;
  align-content: center;
}

.employee-kicker {
  width: fit-content;
  padding: 5px 10px;
  border: 1px solid #b9daf8;
  border-radius: 999px;
  color: var(--primary-strong);
  background: #f2f8ff;
  font-size: 13px;
  font-weight: 700;
}

.employee-hero h2 {
  margin: 0;
  font-size: 34px;
  line-height: 1.18;
}

.employee-hero p {
  max-width: 780px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.employee-hero-actions,
.employee-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.employee-daily-card {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 16px;
  border: 1px solid #cfe3f8;
  border-radius: 16px;
  background: #fff;
}

.employee-daily-card span,
.employee-daily-card small {
  color: var(--muted);
}

.employee-daily-card strong {
  font-size: 42px;
  line-height: 1;
}

.employee-focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.employee-focus-card,
.employee-module-card,
.employee-learning-card,
.notice-card,
.employee-point-item,
.employee-forum-list button {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.employee-focus-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  min-height: 156px;
}

.employee-focus-card span,
.employee-focus-card p,
.employee-module-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.employee-focus-card strong {
  font-size: 26px;
}

.employee-focus-card:nth-child(1) {
  border-color: #bfdbfe;
  background: #f8fbff;
}

.employee-focus-card:nth-child(2) {
  border-color: #bbf7d0;
  background: #f7fef9;
}

.employee-focus-card:nth-child(3) {
  border-color: #fed7aa;
  background: #fffaf3;
}

.employee-focus-card:nth-child(4) {
  border-color: #ddd6fe;
  background: #fbfaff;
}

.employee-home-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.7fr);
  gap: 16px;
  align-items: start;
}

.employee-main-column,
.employee-side-column {
  display: grid;
  gap: 16px;
}

.employee-section {
  overflow: hidden;
}

.notice-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.notice-list.modal-list {
  margin-bottom: 12px;
}

.notice-card {
  display: grid;
  gap: 7px;
  padding: 13px;
  min-height: 120px;
  text-align: left;
}

.notice-card.static {
  cursor: default;
}

.notice-card span {
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--green);
  background: #ecf8f2;
  font-size: 12px;
  font-weight: 700;
}

.notice-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  white-space: normal;
}

.employee-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.employee-module-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
}

.employee-module-card strong {
  display: block;
  margin-bottom: 4px;
}

.employee-learning-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 14px;
  align-items: center;
  padding: 14px;
  margin-bottom: 12px;
  background: #f8fbff;
}

.employee-learning-card span,
.employee-learning-card p {
  color: var(--muted);
}

.employee-learning-card p {
  margin: 6px 0 0;
}

.employee-progress-ring {
  display: grid;
  place-items: center;
  width: 106px;
  height: 106px;
  justify-self: end;
  border: 10px solid #dbeafe;
  border-top-color: #22c55e;
  border-radius: 50%;
  background: #fff;
}

.employee-progress-ring strong {
  font-size: 22px;
}

.employee-progress-ring span {
  font-size: 12px;
}

.employee-mini-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.employee-mini-metrics > div {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
}

.employee-mini-metrics strong {
  font-size: 24px;
}

.employee-mini-metrics span,
.employee-point-item small,
.employee-forum-list small {
  color: var(--muted);
}

.employee-points-preview {
  display: grid;
  gap: 8px;
}

.employee-point-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  text-align: left;
}

.employee-point-item .points-product-art {
  width: 44px;
  height: 44px;
  font-size: 20px;
}

.employee-forum-list {
  display: grid;
  gap: 8px;
}

.employee-forum-list button {
  display: grid;
  gap: 5px;
  padding: 11px;
  text-align: left;
}

.employee-forum-list span {
  color: var(--text);
  white-space: normal;
}

@media (max-width: 920px) {
  .employee-hero,
  .employee-home-layout,
  .employee-learning-card {
    grid-template-columns: 1fr;
  }

  .employee-progress-ring {
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .employee-hero h2 {
    font-size: 26px;
  }

  .employee-module-card,
  .employee-point-item {
    grid-template-columns: 1fr;
  }
}

.link-btn {
  border: 0;
  padding: 0;
  min-height: 0;
  background: transparent;
  color: var(--primary);
  font-weight: 700;
  cursor: pointer;
}

.link-btn:hover {
  text-decoration: underline;
}

.app {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 278px;
  flex: 0 0 278px;
  background:
    radial-gradient(circle at 28px 24px, color-mix(in srgb, var(--accent) 25%, transparent), transparent 33%),
    radial-gradient(circle at 112% 8%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 40%),
    linear-gradient(180deg, #132036 0%, var(--sidebar-bg) 62%, #0b1322 100%);
  color: #f0f6fd;
  transition: width 0.2s ease, flex-basis 0.2s ease, transform 0.2s ease;
  overflow-y: auto;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 14px 0 36px rgba(8, 18, 32, 0.16);
}

.sidebar.collapsed {
  width: 76px;
  flex-basis: 76px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 15px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-close {
  display: none;
  margin-left: auto;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}

.sidebar-scrim {
  display: none;
}

.sidebar-scrim[hidden] {
  display: none !important;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), var(--primary) 72%, var(--warm));
  box-shadow: 0 16px 30px color-mix(in srgb, var(--primary) 20%, rgba(0, 0, 0, 0.28));
}

.brand-mark svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-mark.has-image {
  overflow: hidden;
  background: #ffffff;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.brand-mark-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 34px;
  padding: 0 2px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}

.brand-logo-maintenance {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--panel) 86%, var(--primary-soft));
}

.brand-logo-preview {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), var(--primary));
  overflow: hidden;
}

.brand-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-logo-preview svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-logo-maintenance div:nth-child(2) {
  display: grid;
  gap: 4px;
  flex: 1;
}

.brand-logo-maintenance small {
  color: var(--muted);
}

.portal-content-form {
  display: grid;
  gap: 16px;
}

.portal-config-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--panel) 88%, var(--primary-soft));
}

.portal-config-card h3 {
  margin: 0;
  font-size: 18px;
}

.portal-slide-editor {
  display: grid;
  gap: 12px;
}

.portal-slide-row {
  display: grid;
  grid-template-columns: 80px minmax(120px, 1fr) 120px minmax(180px, 1.4fr) minmax(150px, 1fr);
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.portal-slide-row > strong {
  align-self: center;
}

.portal-slide-row label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 14px;
}

.portal-slide-row .wide {
  grid-column: 2 / span 3;
}

.portal-photo-config-row {
  grid-template-columns: 80px minmax(160px, 1fr) minmax(220px, 2fr);
}

.portal-photo-config-row .wide {
  grid-column: auto / span 2;
}

.portal-slide-row small {
  color: var(--muted);
  line-height: 1.45;
}

.brand small {
  display: block;
  color: #a9b9ca;
  margin-top: 3px;
  font-size: 12px;
}

.brand strong {
  font-size: 15px;
  letter-spacing: 0;
}

.sidebar.collapsed .brand div,
.sidebar.collapsed .menu-text,
.sidebar.collapsed .submenu {
  display: none;
}

.menu-group {
  padding: 7px 10px;
}

.menu-title {
  padding: 10px 10px 6px;
  color: #95a8bd;
  font-size: 12px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  margin: 3px 0;
  border: 0;
  background: transparent;
  color: #dfeaf5;
  text-align: left;
  border-radius: 11px;
  padding: 8px 10px;
  font-weight: 650;
  letter-spacing: 0;
  box-shadow: none;
}

.menu-item.active,
.menu-item:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--sidebar-active) 88%, var(--primary)), rgba(33, 54, 87, 0.68));
  color: #ffffff;
  box-shadow: inset 3px 0 0 var(--warm), 0 10px 24px rgba(0, 0, 0, 0.1);
}

.menu-icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 8px;
  color: color-mix(in srgb, #ffffff 82%, var(--accent));
  background: rgba(255, 255, 255, 0.075);
  text-align: center;
  font-size: 12px;
}

.menu-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-dot {
  font-size: 16px;
  line-height: 1;
}

.menu-caret {
  margin-left: auto;
  color: rgba(219, 229, 239, 0.72);
  font-size: 12px;
  line-height: 1;
}

.menu-item.active .menu-caret,
.menu-item:hover .menu-caret {
  color: #ffffff;
}

.menu-item.active .menu-icon,
.menu-item:hover .menu-icon {
  color: #081424;
  background: linear-gradient(135deg, var(--warm), var(--accent));
}

.submenu {
  margin: 4px 0 6px 10px;
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.09);
}

.submenu .menu-item {
  min-height: 34px;
  padding: 7px 9px;
  color: #c8d5e4;
  font-weight: 600;
}

.submenu .menu-icon {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
  border-radius: 50%;
  background: transparent;
  color: #95a7bb;
}

.main {
  flex: 1;
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 18px;
  background: color-mix(in srgb, #fffefd 86%, var(--primary-soft));
  border-bottom: 1px solid color-mix(in srgb, var(--line) 84%, #ffffff);
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 30px rgba(17, 24, 39, 0.055);
  position: sticky;
  top: 0;
  z-index: 20;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
}

.home-nav-button {
  position: relative;
  color: var(--primary);
}

.home-nav-icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linejoin: round;
}

.tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}

.tab {
  white-space: nowrap;
  border-radius: 999px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-soft) 86%, #ffffff);
  color: var(--muted);
}

.tab.active {
  color: var(--primary-strong);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
  background: linear-gradient(135deg, var(--primary-soft), #ffffff 72%);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 10%, transparent);
}

.module-tabs {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 84%, #ffffff);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 88%, var(--panel-soft));
  box-shadow: var(--shadow-soft);
}

.module-tabs button {
  border-radius: 999px;
  background: var(--panel-soft);
}

.module-tabs button.active {
  color: #fff;
  border-color: var(--primary);
  background: linear-gradient(135deg, var(--primary-strong), var(--primary) 58%, var(--accent));
}

.module-nav {
  display: grid;
  grid-template-columns: minmax(172px, 224px) minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-soft) 84%, #ffffff);
  box-shadow: none;
}

.module-nav-heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 46px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefd;
}

.module-nav-heading span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.module-nav-heading strong {
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
}

.module-nav-items {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  padding: 2px;
  scrollbar-width: auto;
}

.module-nav-items button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 15px;
  border-radius: 8px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-weight: 850;
  white-space: nowrap;
}

.module-nav-items button:hover {
  border-color: color-mix(in srgb, var(--primary) 22%, var(--line));
  background: #fffefd;
  color: var(--text);
}

.module-nav-items button.active {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 32%, var(--line));
  background: #fffefd;
  box-shadow: inset 0 -3px 0 var(--primary), 0 5px 14px rgba(15, 23, 42, 0.06);
}

.module-page {
  max-width: 1120px;
  margin: 0 auto;
}

.learning-page {
  display: grid;
  gap: 18px;
}

.learning-page .sub-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow-soft);
}

.learning-page .sub-tabs button {
  min-height: 34px;
  padding: 0 13px;
  border-radius: 8px;
  color: #334155;
  background: #f8fafc;
}

.learning-page .sub-tabs button.active {
  border-color: var(--primary);
  color: #fff;
  background: var(--primary);
  box-shadow: 0 8px 18px rgba(29, 104, 199, 0.2);
}

.learning-merged-head {
  border-color: #bfdbfe;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.95), rgba(240, 253, 250, 0.86)),
    #fff;
}

.learning-merged-head .summary-grid > div {
  border-color: rgba(29, 104, 199, 0.16);
  background: rgba(255, 255, 255, 0.78);
}

.module-page.hr-admin-page {
  max-width: none;
}

.hr-module-nav {
  margin-bottom: 16px;
  border-color: color-mix(in srgb, var(--primary) 18%, var(--line));
  background: #f8fbfa;
}

.content[data-active-page="hrTalentAssessment"] .page-head {
  min-height: auto;
  padding: 12px 14px 12px 18px;
  margin-bottom: 10px;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.content[data-active-page="hrTalentAssessment"] .page-head::before {
  top: 12px;
  bottom: 12px;
  width: 4px;
}

.content[data-active-page="hrTalentAssessment"] .page-head h1 {
  font-size: 24px;
}

.content[data-active-page="hrTalentAssessment"] .page-head .eyebrow {
  margin-bottom: 3px;
  font-size: 12px;
}

.content[data-active-page="hrTalentAssessment"] .page-actions button {
  min-height: 34px;
  padding: 7px 11px;
}

.content[data-active-page="hrTalentAssessment"] .hr-module-nav {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 10px;
  padding: 7px;
  border-radius: 8px;
  background: rgba(248, 251, 250, 0.82);
}

.content[data-active-page="hrTalentAssessment"] .hr-module-nav .module-nav-heading {
  min-height: 38px;
  padding: 7px 10px;
}

.content[data-active-page="hrTalentAssessment"] .hr-module-nav .module-nav-heading strong {
  font-size: 15px;
}

.content[data-active-page="hrTalentAssessment"] .hr-module-nav .module-nav-items {
  gap: 5px;
}

.content[data-active-page="hrTalentAssessment"] .hr-module-nav .module-nav-items button {
  min-height: 36px;
  padding: 0 12px;
}

.picker-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 0;
  color: var(--muted);
  flex-wrap: wrap;
}

.table-page-size {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}

.table-page-size select {
  min-height: 32px;
  padding: 4px 28px 4px 10px;
}

.top-theme-slot {
  display: flex;
  margin-left: auto;
  align-items: center;
}

.top-maintenance-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.top-maintenance-slot:empty {
  display: none;
}

.top-maintenance-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 86px;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line));
  border-radius: 999px;
  color: var(--primary-strong);
  background: linear-gradient(135deg, color-mix(in srgb, var(--panel) 86%, var(--primary-soft)), #fffefd);
  font-weight: 750;
  line-height: 1;
  box-shadow: var(--shadow-soft);
}

.top-maintenance-button:hover {
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary-strong), var(--primary) 62%, var(--accent));
}

.top-maintenance-button.secondary {
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 92%, var(--primary-soft));
  border-color: var(--line);
  box-shadow: none;
}

.top-maintenance-button.secondary:hover {
  color: var(--primary);
  background: var(--panel);
  border-color: color-mix(in srgb, var(--primary) 36%, var(--line));
}

.top-maintenance-slot + .top-theme-slot {
  margin-left: 10px;
}

.user-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 0;
  white-space: nowrap;
  color: var(--muted);
}

.user-switch small {
  max-width: 172px;
  white-space: normal;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.auth-session {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  min-height: 36px;
  white-space: nowrap;
}

.auth-session button {
  min-height: 34px;
  padding: 7px 12px;
}

.auth-session small,
.auth-session-info small {
  color: var(--muted);
  font-size: 12px;
}

.auth-session-info {
  display: grid;
  gap: 1px;
  min-width: 0;
  text-align: right;
}

.auth-session-info strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
}

.auth-login-status {
  min-height: 20px;
  color: var(--muted);
}

.theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--line) 86%, #ffffff);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 86%, var(--bg-soft));
  box-shadow: var(--shadow-soft);
}

.theme-choice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.theme-choice.active {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--primary));
  box-shadow: 0 8px 16px color-mix(in srgb, var(--primary) 18%, transparent);
}

.content {
  padding: 22px;
  background:
    linear-gradient(180deg, rgba(255, 254, 253, 0.26), rgba(255, 255, 255, 0)),
    transparent;
}

#view {
  margin-top: 14px;
}

.menu-item[draggable="true"] {
  cursor: grab;
}

.menu-item.dragging {
  opacity: 0.45;
  cursor: grabbing;
}

.prototype-notice {
  margin-bottom: 16px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--warm) 36%, var(--line));
  border-radius: var(--radius-sm);
  color: #735113;
  background: linear-gradient(135deg, #fff8e5, color-mix(in srgb, #ffffff 82%, var(--warm)));
  font-size: 13px;
}

.daily-report {
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.daily-report > h2 {
  margin: 0;
  padding: 18px;
  color: #fff;
  text-align: center;
  background: #183b68;
}

.daily-report > h3 {
  margin: 12px 0 0;
  padding: 10px 12px;
  color: #fff;
  font-size: 15px;
  background: #205783;
}

.report-meta,
.report-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid #b9cce0;
}

.report-meta span {
  display: flex;
  min-height: 42px;
  align-items: center;
  background: #fff8df;
}

.report-meta b {
  height: 100%;
  padding: 12px;
  margin-right: 10px;
  background: #dcecf8;
}

.report-kpis {
  grid-template-columns: repeat(8, minmax(105px, 1fr));
  overflow-x: auto;
}

.report-kpis div {
  text-align: center;
  border-right: 1px solid #b9cce0;
}

.report-kpis span,
.report-kpis strong {
  display: block;
  padding: 10px 6px;
}

.report-kpis span {
  color: #fff;
  background: #3d73bf;
}

.report-kpis strong {
  color: #164b7d;
  font-size: 20px;
  background: #e9f1f8;
}

.daily-report .panel {
  margin: 0;
  border-radius: 0;
}

.daily-report .panel-head {
  display: none;
}

.report-review > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  border: 1px solid #b9cce0;
  border-top: 0;
  background: #fff8df;
}

.report-review b,
.report-review span {
  padding: 11px 12px;
}

.report-review b {
  background: #dcecf8;
}

.page-head,
.filter-bar,
.panel,
.split,
.calendar-wrap {
  border: 1px solid color-mix(in srgb, var(--line) 86%, #ffffff);
  background: color-mix(in srgb, var(--panel) 95%, var(--panel-soft));
  border-radius: var(--radius);
}

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background:
    radial-gradient(circle at 96% 6%, color-mix(in srgb, var(--warm) 13%, transparent), transparent 27%),
    radial-gradient(circle at 86% 0%, color-mix(in srgb, var(--accent-soft) 68%, transparent), transparent 30%),
    linear-gradient(135deg, #fffefd 0%, #f8fbff 56%, #eff8f4 100%);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.page-head::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--warm), var(--primary), var(--accent));
}

.page-head > * {
  position: relative;
  z-index: 1;
}

.page-head > div:first-child {
  flex: 1 1 320px;
  min-width: 240px;
  max-width: 100%;
}

.page-head h1 {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.eyebrow {
  margin: 0 0 6px;
  color: color-mix(in srgb, var(--primary-strong) 84%, var(--accent));
  font-size: 12px;
  font-weight: 800;
}

h1,
h2,
h3 {
  margin: 0;
  letter-spacing: 0;
  color: var(--text);
  line-height: 1.25;
}

h1 {
  font-size: 30px;
  font-weight: 850;
}

h2 {
  font-size: 23px;
  font-weight: 820;
}

h3 {
  font-size: 18px;
  font-weight: 780;
}

.page-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 1 760px;
  justify-content: flex-end;
  min-width: 0;
  max-width: 100%;
}

.filter-bar {
  display: flex;
  gap: 10px;
  margin: 14px 0;
  padding: 12px;
  background: rgba(255, 254, 253, 0.84);
  box-shadow: var(--shadow-soft);
}

.filter-bar input,
.filter-bar select,
.form-grid input,
.form-grid select,
.form-grid textarea {
  min-height: 36px;
  border: 1px solid color-mix(in srgb, var(--line) 90%, #ffffff);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--panel-soft) 68%, #ffffff));
  min-width: 0;
  color: var(--text);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset;
}

.filter-bar input:focus,
.filter-bar select:focus,
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-color: color-mix(in srgb, var(--primary) 46%, var(--line));
  background: #ffffff;
}

.filter-bar input {
  flex: 1;
}

.grid {
  display: grid;
  gap: 14px;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}

.metric-grid .metric {
  min-height: 76px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, #ffffff);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--panel-soft) 70%, #ffffff));
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.045);
}

.metric-grid .metric strong {
  font-size: 24px;
  line-height: 1.1;
}

.metric-grid .metric span {
  font-size: 13px;
}

.module-page .panel > .metric-grid {
  padding: 0 14px 12px;
}

.dashboard-page {
  display: grid;
  gap: 14px;
}

.dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  gap: 18px;
  align-items: stretch;
  padding: 18px;
}

.dashboard-hero-copy {
  display: grid;
  align-content: center;
  gap: 10px;
  min-width: 0;
}

.dashboard-hero-copy h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.18;
}

.dashboard-hero-copy p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.dashboard-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.dashboard-hero-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-hero-kpis .metric {
  margin: 0;
  min-height: 88px;
}

.dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 14px;
  align-items: start;
}

.dashboard-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.dashboard-module-card,
.dashboard-todo-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.dashboard-module-card {
  position: relative;
  display: grid;
  gap: 9px;
  min-height: 156px;
  padding: 15px;
  overflow: hidden;
}

.dashboard-module-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--primary);
}

.dashboard-module-card strong {
  font-size: 18px;
  line-height: 1.3;
}

.dashboard-module-card span:not(.dashboard-card-tag) {
  color: var(--muted);
  line-height: 1.6;
}

.dashboard-module-card b {
  align-self: end;
  color: var(--primary);
  font-size: 15px;
}

.dashboard-card-tag {
  justify-self: start;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 8%, #ffffff);
  color: var(--primary);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-module-card:hover,
.dashboard-todo-row:hover {
  transform: translateY(-1px);
  border-color: var(--primary);
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.12);
}

.dashboard-module-card.tone-teal::before,
.dashboard-module-card.tone-cyan::before {
  background: var(--accent);
}

.dashboard-module-card.tone-green::before {
  background: #16a34a;
}

.dashboard-module-card.tone-amber::before {
  background: #d97706;
}

.dashboard-module-card.tone-rose::before {
  background: #e11d48;
}

.dashboard-module-card.tone-slate::before {
  background: #475569;
}

.dashboard-todo-panel {
  padding: 14px;
}

.dashboard-todo-panel .panel-head {
  margin-bottom: 10px;
}

.dashboard-todo-list {
  display: grid;
  gap: 10px;
}

.dashboard-todo-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 78px;
  padding: 12px;
}

.dashboard-todo-row span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.dashboard-todo-row strong,
.dashboard-todo-row em {
  overflow-wrap: anywhere;
}

.dashboard-todo-row em {
  color: var(--muted);
  font-style: normal;
  line-height: 1.5;
}

.dashboard-todo-row b {
  color: var(--primary);
  white-space: nowrap;
}

@media (max-width: 980px) {
  .dashboard-hero,
  .dashboard-layout {
    grid-template-columns: 1fr;
  }

  .dashboard-hero-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .dashboard-hero {
    padding: 14px;
  }

  .dashboard-hero-copy h2 {
    font-size: 24px;
  }

  .dashboard-actions-row,
  .dashboard-actions-row button {
    width: 100%;
  }

  .dashboard-hero-kpis,
  .dashboard-module-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-module-card {
    min-height: 138px;
  }
}

.owner-target-breakdown > .metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: stretch;
}

.owner-target-breakdown > .metric-grid .metric {
  min-width: 0;
  overflow: visible;
}

.owner-target-breakdown > .metric-grid .metric strong {
  font-size: clamp(18px, 1.75vw, 24px);
  line-height: 1.12;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.owner-target-breakdown > .metric-grid .metric span {
  white-space: normal;
}

.owner-target-breakdown .summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.owner-target-breakdown .summary-grid strong {
  font-size: clamp(17px, 1.8vw, 22px);
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.owner-12-form {
  display: grid;
  gap: 14px;
}

.owner-target-core .module-tabs {
  margin: 0;
  padding: 8px 0 2px;
  border: 0;
  background: transparent;
}

.owner-target-page {
  display: none;
}

.owner-target-core[data-owner-target-module="goal"] .owner-target-page[data-owner-target-page="goal"],
.owner-target-core[data-owner-target-module="scenario"] .owner-target-page[data-owner-target-page="scenario"],
.owner-target-core[data-owner-target-module="customer"] .owner-target-page[data-owner-target-page="customer"],
.owner-target-core[data-owner-target-module="product"] .owner-target-page[data-owner-target-page="product"],
.owner-target-core[data-owner-target-module="team"] .owner-target-page[data-owner-target-page="team"] {
  display: block;
}

.owner-target-core[data-owner-target-module="goal"] .owner-result-strip.owner-target-page {
  display: grid;
}

.owner-12-band,
.owner-12-section {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.owner-12-band-head,
.owner-12-section-head {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  background: #eef6ff;
  border-bottom: 1px solid #dbeafe;
}

.owner-12-band-head > span {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #1268c5;
  color: #fff;
  font-weight: 800;
  white-space: nowrap;
}

.owner-12-section-head > span {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #1268c5;
  color: #fff;
  font-weight: 800;
}

.owner-12-band-head strong,
.owner-12-section-head h3 {
  display: block;
  margin: 0;
  font-size: 18px;
}

.owner-12-band-head strong {
  flex: 0 0 auto;
  white-space: nowrap;
}

.owner-12-band-head small {
  min-width: 0;
}

.owner-12-band-head small,
.owner-12-section-head p {
  display: block;
  margin: 2px 0 0;
  color: var(--muted);
}

.owner-12-input-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  padding: 14px;
}

.owner-12-input-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-bottom: 1px solid var(--line);
}

.owner-result-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.owner-target-core .owner-result-strip.owner-target-page {
  display: none;
}

.owner-target-core[data-owner-target-module="goal"] .owner-result-strip.owner-target-page {
  display: grid;
}

.owner-12-sections {
  display: grid;
  gap: 14px;
}

.owner-point-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  padding: 14px;
}

.owner-point-card {
  display: grid;
  gap: 9px;
  padding: 13px;
  border: 1px solid var(--line);
  border-left: 5px solid #1268c5;
  border-radius: 10px;
  background: #fbfdff;
}

.owner-point-card.customer {
  border-left-color: #0f766e;
}

.owner-point-card.product {
  border-left-color: #b7791f;
}

.owner-point-card.team {
  border-left-color: #475569;
}

.owner-point-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.owner-point-top b {
  font-size: 18px;
}

.owner-point-top span {
  color: var(--muted);
  font-size: 13px;
}

.owner-point-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.owner-point-values > div {
  padding: 9px;
  border-radius: 8px;
  background: #f1f5f9;
}

.owner-point-values small,
.owner-point-card p {
  color: var(--muted);
}

.owner-point-values strong {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.owner-point-card code {
  white-space: normal;
  overflow-wrap: anywhere;
  padding: 8px;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f3f85;
  font-family: inherit;
  line-height: 1.5;
}

.owner-point-card p {
  margin: 0;
  line-height: 1.55;
}

.owner-formula-panel {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.owner-formula-panel .compact-head {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.owner-formula-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

.owner-formula-card {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid #d7e3f4;
  border-radius: 10px;
  background: #f8fbff;
  min-width: 0;
}

.owner-formula-card strong {
  font-size: 15px;
  color: var(--text);
}

.owner-formula-card code {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  padding: 8px;
  border-radius: 8px;
  background: #fff;
  color: #0f3f85;
  font-family: inherit;
  line-height: 1.5;
}

.owner-formula-card em {
  font-style: normal;
  font-weight: 800;
  color: #0f766e;
  overflow-wrap: anywhere;
}

.owner-formula-card span {
  color: var(--muted);
  line-height: 1.55;
}

.owner-decision-panel {
  display: grid;
  grid-template-columns: minmax(260px, 1.2fr) minmax(280px, 1fr);
  gap: 12px;
  margin: 14px 0;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #f8fbff;
}

.owner-decision-panel.ok {
  border-color: #86efac;
  background: #f0fdf4;
}

.owner-decision-panel.warn {
  border-color: #fed7aa;
  background: #fff7ed;
}

.owner-decision-panel.danger {
  border-color: #fecaca;
  background: #fff5f5;
}

.owner-decision-main span,
.owner-decision-side span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.owner-decision-main strong {
  display: block;
  margin: 4px 0 6px;
  font-size: 24px;
}

.owner-decision-main p {
  margin: 0;
  line-height: 1.6;
}

.owner-decision-main code {
  display: block;
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: #0f3f85;
  font-family: inherit;
  font-weight: 800;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.owner-decision-side {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 8px;
}

.owner-decision-side > div {
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.35);
  min-width: 0;
}

.owner-decision-side b {
  display: block;
  font-size: 16px;
  overflow-wrap: anywhere;
}

.owner-lever-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.owner-lever-card {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
}

.owner-lever-card.ok {
  border-color: #bbf7d0;
}

.owner-twelve-points {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.owner-twelve-points .compact-head {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.owner-twelve-points .notice {
  margin: 12px;
}

.owner-twelve-points .table-wrap {
  margin: 0;
  border-width: 1px 0 0;
  border-radius: 0;
}

.owner-twelve-points table {
  min-width: 1180px;
}

.owner-twelve-points th,
.owner-twelve-points td {
  vertical-align: top;
}

.owner-twelve-points .dimension-cell {
  color: #fff;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.owner-twelve-points .dimension-cell.customer {
  background: #0f766e;
}

.owner-twelve-points .dimension-cell.product {
  background: #ad6800;
}

.owner-twelve-points .dimension-cell.team {
  background: #475569;
}

.owner-cockpit-page .module-tabs {
  margin-bottom: 14px;
}

.owner-cockpit-nav {
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.owner-cockpit-nav-head {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  background: #eef6ff;
  color: #132238;
  text-align: left;
  cursor: pointer;
}

.owner-cockpit-nav-head span {
  font-size: 20px;
  font-weight: 900;
}

.owner-cockpit-nav-head small {
  color: var(--muted);
  font-weight: 800;
}

.owner-cockpit-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px 14px;
  border-top: 1px solid #dbeafe;
}

.owner-cockpit-subnav button {
  padding: 8px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #f8fafc;
  color: #0f172a;
  font-weight: 800;
}

.owner-cockpit-subnav button.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.owner-cockpit-nav.collapsed .owner-cockpit-subnav {
  display: none;
}

.owner-cockpit-page .owner-module-section {
  display: none;
}

.owner-cockpit-page[data-owner-module="target"] .owner-module-section[data-owner-section="target"],
.owner-cockpit-page[data-owner-module="overview"] .owner-module-section[data-owner-section="overview"],
.owner-cockpit-page[data-owner-module="crm"] .owner-module-section[data-owner-section="crm"],
.owner-cockpit-page[data-owner-module="product"] .owner-module-section[data-owner-section="product"],
.owner-cockpit-page[data-owner-module="hr"] .owner-module-section[data-owner-section="hr"] {
  display: block;
}

.owner-cockpit-page[data-owner-module="overview"] .owner-target-breakdown,
.owner-cockpit-page[data-owner-module="crm"] .owner-target-breakdown,
.owner-cockpit-page[data-owner-module="product"] .owner-target-breakdown,
.owner-cockpit-page[data-owner-module="hr"] .owner-target-breakdown {
  display: none;
}

.owner-lever-card.warn {
  border-color: #fed7aa;
}

.owner-lever-card.danger {
  border-color: #fecaca;
}

.owner-lever-title,
.owner-lever-values {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.owner-lever-title span {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #1e40af;
  font-size: 12px;
}

.owner-lever-card.warn .owner-lever-title span {
  background: #fff7ed;
  color: #c2410c;
}

.owner-lever-card.danger .owner-lever-title span {
  background: #fef2f2;
  color: #b91c1c;
}

.owner-lever-values {
  margin: 9px 0;
  align-items: stretch;
}

.owner-lever-values em {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  background: #f8fafc;
  font-style: normal;
  color: #334155;
  overflow-wrap: anywhere;
}

.owner-lever-values i {
  display: flex;
  align-items: center;
  color: var(--muted);
  font-style: normal;
}

.owner-lever-card p {
  margin: 0;
  color: #475569;
  line-height: 1.55;
}

@media (max-width: 980px) {
  .owner-decision-panel,
  .owner-formula-grid,
  .owner-lever-grid {
    grid-template-columns: 1fr;
  }

  .owner-decision-side {
    grid-template-columns: 1fr;
  }
}

.cards {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
}

.card {
  border: 1px solid color-mix(in srgb, var(--line) 88%, #ffffff);
  background: linear-gradient(180deg, #fffefd, color-mix(in srgb, var(--panel-soft) 58%, #ffffff));
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-soft);
}

.metric {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.metric strong {
  font-size: 26px;
}

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

.panel {
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-soft);
  background: linear-gradient(180deg, #fffefd, color-mix(in srgb, var(--panel-soft) 45%, #ffffff));
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.module-page .panel {
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 88%, #ffffff);
  border-radius: var(--radius);
  background: #fffefd;
  box-shadow: var(--shadow-soft);
}

.module-page .panel-head {
  min-height: 62px;
  margin: 0;
  padding: 16px 18px 14px 22px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 84%, #ffffff);
  background:
    radial-gradient(circle at 96% 2%, color-mix(in srgb, var(--accent-soft) 70%, transparent), transparent 28%),
    linear-gradient(90deg, color-mix(in srgb, var(--primary-soft) 84%, #ffffff) 0%, #fffefd 72%);
  position: relative;
}

.module-page .panel-head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 5px;
  border-radius: 0 6px 6px 0;
  background: linear-gradient(180deg, var(--warm), var(--primary), var(--accent));
}

.module-page .panel-head h2 {
  margin: 0;
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: 0;
}

.module-page .panel-head .muted {
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, #ffffff 82%, var(--primary-soft));
  border: 1px solid color-mix(in srgb, var(--line) 70%, #ffffff);
}

.module-page .table-wrap,
.module-page .table-pagination {
  margin-left: 16px;
  margin-right: 16px;
}

.module-page .table-wrap {
  margin-top: 14px;
}

.table-wrap {
  overflow-x: auto;
  max-width: 100%;
  padding-bottom: 18px;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-gutter: stable both-edges;
  scrollbar-width: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrap:hover,
.table-wrap:focus-within {
  scrollbar-color: var(--scrollbar-thumb-hover) var(--scrollbar-track);
}

.table-wrap::after {
  content: "";
  display: block;
  min-height: 1px;
}

:where(
  .table-wrap,
  .module-nav-items,
  .portal-workbench-dock nav,
  .task-board,
  .hr-archive-stats.horizontal,
  .hr-department-tabs,
  .forum-post-channel-strip,
  .forum-banner-strip-window,
  .warm-forum-channels,
  .portal-photo-grid,
  .portal-forum-posts
) {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 920px;
}

th,
td {
  padding: 11px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 82%, #ffffff);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

th {
  color: color-mix(in srgb, var(--text) 68%, var(--muted));
  font-weight: 720;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-soft) 92%, #ffffff), var(--panel-soft));
}

tr:hover td {
  background: color-mix(in srgb, var(--primary-soft) 44%, #ffffff);
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, #ffffff);
  background: color-mix(in srgb, var(--panel-soft) 86%, #ffffff);
  font-weight: 700;
}

.badge.a {
  color: #8a4a00;
  background: #fff4dc;
  border-color: #f7d38b;
}

.badge.b {
  color: var(--primary-strong);
  background: var(--primary-soft);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line));
}

.badge.c {
  color: var(--green);
  background: color-mix(in srgb, var(--accent-soft) 78%, #ffffff);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
}

.badge.d {
  color: var(--red);
  background: #fff1ef;
  border-color: color-mix(in srgb, var(--red) 24%, var(--line));
}

.badge.gray {
  color: #59677a;
  background: #f2f4f7;
}

.danger-text {
  color: var(--red);
}

.success-text {
  color: var(--green);
}

.row-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.pdf-export-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--blue);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.pdf-export-link.primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.thumb-strip {
  display: flex;
  align-items: center;
  gap: 6px;
}

.product-thumb {
  width: 42px;
  height: 32px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.product-photo {
  width: 72px;
  height: 48px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.product-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.product-option {
  display: grid;
  grid-template-columns: 22px 72px 1fr 92px;
  align-items: center;
  gap: 10px;
  min-height: 70px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: #f8fafc;
}

.product-option small {
  display: block;
  margin-top: 4px;
  line-height: 1.45;
  color: var(--muted);
}

#quoteAvailableProducts .product-option {
  grid-template-columns: 72px minmax(0, 1fr) 110px;
}

.product-option span {
  min-width: 0;
}

.product-option strong {
  display: block;
  line-height: 1.35;
  white-space: normal;
}

.material-picker .product-option {
  grid-template-columns: 72px minmax(0, 1fr) 120px;
  align-items: center;
  min-height: 96px;
}

.material-picker .product-option .product-photo {
  grid-column: 1;
  width: 72px;
  height: 56px;
}

.material-picker .product-option button {
  justify-self: end;
  white-space: nowrap;
}

.material-picker .product-option small {
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.outsourced-product-picker {
  max-height: 360px;
  overflow: auto;
}

.outsourced-product-picker .product-option {
  grid-template-columns: 24px 72px minmax(0, 1fr) 86px;
  cursor: pointer;
}

.outsourced-product-picker .product-option.selected {
  border-color: var(--primary);
  background: #eff6ff;
}

.outsourced-product-picker .product-option button {
  justify-self: end;
}

.outsourced-product-picker .product-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.outsourced-product-picker .product-option em {
  justify-self: end;
  font-style: normal;
  color: var(--muted);
  white-space: nowrap;
}

.outsourced-product-picker .product-option.selected em {
  color: var(--primary);
  font-weight: 700;
}

.selected-product-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 12px;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #eff6ff;
}

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

.selected-product-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 120px 72px;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #fff;
}

.selected-product-row label {
  display: grid;
  gap: 4px;
}

.selected-product-row input {
  min-width: 0;
}

.price-pill {
  min-width: 84px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #075985;
  text-align: center;
  background: #e0f2fe;
  font-weight: 700;
}

.selected-product-card small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.5;
}

.selected-product-pager {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding-top: 4px;
  color: var(--muted);
}

#quoteCart input.qty-input {
  min-width: 92px;
}

.customer-relation-box {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
}

.relation-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, .45fr);
  gap: 10px;
  align-items: end;
}

.document-picker + .relation-toolbar,
.customer-relation-box .relation-toolbar {
  align-items: center;
}

.customer-relation-box .relation-toolbar > .muted {
  justify-self: end;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

#customerForm > .form-section-title:first-of-type {
  margin-bottom: 2px;
}

#customerForm > .form-section-title:first-of-type ~ label {
  min-width: 0;
}

.relation-toolbar > strong {
  font-size: 16px;
}

.customer-product-picker {
  max-height: 292px;
  overflow: auto;
}

.customer-product-picker .product-option {
  grid-template-columns: 72px minmax(0, 1fr) minmax(118px, 150px);
  align-items: center;
  min-height: 88px;
}

.customer-product-picker .product-option .product-photo {
  grid-column: auto;
  width: 64px;
  height: 48px;
}

.customer-product-picker .product-option button {
  justify-self: stretch;
  white-space: nowrap;
}

.customer-product-picker .product-option strong,
.customer-product-picker .product-option small {
  word-break: break-word;
}

.customer-product-picker .product-option.selected,
.document-option:has(input:checked) {
  border-color: var(--primary);
  background: #eaf3ff;
}

.customer-sync-panel,
.follow-linked-meta {
  padding: 10px 12px;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #eff6ff;
  color: var(--text);
}

.customer-sync-panel p,
.follow-linked-meta p {
  margin: 4px 0;
  color: var(--muted);
}

.customer-sync-panel button {
  margin-top: 6px;
}

.follow-linked-meta {
  margin: 8px 0;
  font-size: 12px;
}

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

.document-option {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.document-option span,
.document-option small {
  display: block;
}

.document-option small {
  margin-top: 3px;
  color: var(--muted);
}

.relation-summary {
  display: grid;
  gap: 4px;
  min-width: 220px;
  font-size: 12px;
  line-height: 1.45;
}

.relation-summary p {
  margin: 0;
}

.qty-input {
  width: 88px;
}

.bom-picker table {
  min-width: 980px;
}

.bom-picker input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.bom-picker .qty-input {
  width: 110px;
}

.print-sheet {
  background: #fff;
}

.sheet-title,
.delivery-meta,
.signature-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.delivery-meta {
  align-items: stretch;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
}

.seal-preview {
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border: 3px solid var(--red);
  border-radius: 50%;
  color: var(--red);
  font-weight: 700;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.summary-grid > div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.summary-grid strong,
.summary-grid span {
  display: block;
}

.summary-grid span {
  margin-top: 4px;
  color: var(--muted);
}

.access-control-page {
  display: grid;
  gap: 16px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.access-hero {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(160px, auto);
  gap: 24px;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 72%, #ffffff), #ffffff 52%),
    var(--panel);
}

.access-hero > div:first-child {
  min-width: 0;
}

.access-hero h2 {
  margin: 4px 0 8px;
  font-size: 28px;
  overflow-wrap: anywhere;
}

.access-hero p {
  max-width: 860px;
  margin: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.access-hero-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

.access-entry-panel {
  padding: 18px;
  min-width: 0;
  overflow: hidden;
}

.sales-maintenance-entry-panel {
  margin-top: 14px;
}

.sales-maintenance-page {
  display: grid;
  gap: 14px;
}

.sales-maintenance-scope {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.sales-maintenance-scope > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  border-radius: var(--radius-sm);
  background: #f8fafc;
}

.sales-maintenance-scope strong,
.sales-maintenance-section h3 {
  margin: 0;
  color: var(--text);
}

.sales-maintenance-scope span {
  color: var(--muted);
  font-size: 13px;
}

.sales-maintenance-section {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.sales-maintenance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.sales-maintenance-card {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
  min-height: 174px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.sales-maintenance-card > span {
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 12px;
  font-weight: 800;
}

.sales-maintenance-card strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.25;
}

.sales-maintenance-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.sales-maintenance-card button {
  justify-self: start;
  margin-top: auto;
}

.sales-maintenance-card.is-disabled {
  opacity: 0.66;
}

.access-entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}

.access-entry-card {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 168px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #ffffff, color-mix(in srgb, var(--primary-soft) 54%, #ffffff));
  min-width: 0;
}

.access-entry-card.active {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
  box-shadow: var(--shadow-soft);
}

.access-entry-card span {
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 72%, #ffffff);
  font-size: 12px;
  font-weight: 800;
}

.access-entry-card h3 {
  margin: 0;
  font-size: 24px;
}

.access-entry-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.access-entry-card button {
  justify-self: start;
  margin-top: auto;
}

.access-portal-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: stretch;
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--primary-soft) 60%, transparent), transparent 36%),
    var(--panel);
}

.access-portal-panel h2 {
  margin: 6px 0 10px;
  font-size: 28px;
}

.access-portal-panel p {
  max-width: 780px;
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
}

.access-portal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.access-portal-checklist {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--primary-soft) 48%, #ffffff);
}

.access-portal-checklist strong {
  font-size: 18px;
}

.access-portal-checklist span {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--text);
}

.access-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel-soft) 74%, #ffffff);
}

.access-tabs button {
  border: 1px solid transparent;
  background: transparent;
  font-weight: 700;
}

.access-tabs button.active {
  border-color: color-mix(in srgb, var(--primary) 36%, var(--line));
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-soft);
}

.access-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.access-flow > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: center;
  min-height: 92px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
}

.access-flow strong {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
}

.access-flow span {
  font-weight: 800;
}

.access-flow small {
  color: var(--muted);
}

.access-permission-matrix {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel-soft) 74%, #ffffff);
}

.access-permission-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.access-permission-toolbar > div:first-child {
  display: grid;
  gap: 3px;
}

.access-permission-toolbar span,
.access-permission-name small {
  color: var(--muted);
  font-size: 12px;
}

.access-permission-head,
.access-permission-row {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 86px 86px 86px;
  gap: 8px;
  align-items: center;
}

.access-permission-head {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--primary-soft) 70%, #ffffff);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.access-permission-list {
  display: grid;
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}

.access-permission-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--primary-soft) 82%, #ffffff);
  color: var(--text);
}

.access-permission-section strong {
  font-size: 13px;
}

.access-permission-section span {
  color: var(--muted);
  font-size: 12px;
}

.access-permission-section.own {
  background: color-mix(in srgb, var(--accent-soft) 68%, #ffffff);
}

.access-permission-section.cross {
  background: color-mix(in srgb, #fff4d6 58%, #ffffff);
}

.access-permission-section.system {
  background: color-mix(in srgb, #ffe4e6 52%, #ffffff);
}

.access-permission-row {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

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

.access-permission-row.is-group {
  background: color-mix(in srgb, var(--primary-soft) 46%, #ffffff);
}

.access-permission-row.is-hidden {
  background: color-mix(in srgb, #f1f5f9 80%, #ffffff);
  opacity: 0.78;
}

.access-permission-name {
  display: grid;
  gap: 2px;
}

.access-permission-row label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: #fff;
  font-weight: 700;
}

.access-permission-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.access-checkbox-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel-soft) 78%, #ffffff);
}

.access-checkbox-panel > div:first-child {
  display: grid;
  gap: 3px;
}

.access-checkbox-panel span {
  color: var(--muted);
  font-size: 12px;
}

.access-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  max-height: 220px;
  overflow: auto;
}

.access-checkbox-grid.module {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.access-checkbox-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  font-weight: 700;
}

.access-checkbox-grid input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.access-table-panel code {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-family: Consolas, "Microsoft YaHei", monospace;
}

@media (max-width: 980px) {
  .access-hero,
  .access-portal-panel {
    grid-template-columns: 1fr;
  }

  .access-hero-actions,
  .access-portal-actions {
    justify-content: flex-start;
  }

  .access-entry-grid {
    grid-template-columns: 1fr;
  }
}

.toolbar-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 160px auto auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.category-grid,
.knowledge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.category-grid button {
  display: grid;
  gap: 5px;
  text-align: left;
  min-height: 68px;
  align-content: center;
}

.category-grid button span,
.knowledge-card p {
  color: var(--muted);
}

.knowledge-card {
  display: grid;
  gap: 10px;
}

.learning-hero-panel {
  background: linear-gradient(180deg, #f7fbff 0%, #fff 100%);
}

.share-forum-page {
  display: grid;
  gap: 16px;
}

.share-forum-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
  align-items: stretch;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}

.share-forum-hero > div,
.share-forum-hero aside {
  display: grid;
  align-content: center;
  gap: 10px;
}

.share-forum-hero span,
.share-forum-post span,
.share-forum-channel span {
  color: var(--muted);
  font-size: 13px;
}

.share-forum-hero h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.25;
  color: var(--ink);
}

.share-forum-hero p,
.share-forum-channel p,
.share-forum-post p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.share-forum-hero aside {
  padding: 16px;
  border: 1px solid #dbe8f5;
  border-radius: 8px;
  background: #fff;
}

.share-forum-hero aside strong {
  font-size: 36px;
  color: var(--primary);
}

.share-forum-hero aside small {
  color: var(--muted);
}

.share-forum-actions,
.share-forum-link-list,
.share-forum-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.share-forum-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.share-forum-channel-grid,
.share-forum-post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.share-forum-channel,
.share-forum-post,
.share-forum-benefits button,
.share-forum-link-list button {
  display: grid;
  gap: 8px;
  text-align: left;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.share-forum-channel {
  min-height: 154px;
  border-top: 4px solid var(--primary);
}

.share-forum-channel.green { border-top-color: #16a34a; }
.share-forum-channel.blue { border-top-color: #2563eb; }
.share-forum-channel.mint { border-top-color: #0d9488; }
.share-forum-channel.amber { border-top-color: #d97706; }
.share-forum-channel.rose { border-top-color: #e11d48; }
.share-forum-channel.violet { border-top-color: #7c3aed; }

.share-forum-channel strong,
.share-forum-post strong,
.share-forum-benefits strong {
  color: var(--ink);
  font-size: 18px;
}

.share-forum-channel:hover,
.share-forum-post:hover,
.share-forum-benefits button:hover,
.share-forum-link-list button:hover {
  border-color: #9fc1e8;
  box-shadow: 0 10px 24px rgba(15, 88, 163, 0.08);
  transform: translateY(-1px);
}

.share-forum-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 14px;
  align-items: start;
}

.share-forum-feed,
.share-forum-side {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.inline-head {
  padding: 0 2px;
}

.share-forum-post small,
.share-forum-benefits span {
  color: var(--muted);
}

.share-forum-link-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.share-forum-benefits {
  display: grid;
}

.warm-forum-page {
  gap: 18px;
  color: #172033;
}

.warm-forum-hero-window {
  overflow: hidden;
  border-radius: 28px;
}

.warm-forum-hero-track {
  display: flex;
  width: calc(var(--hero-total, 2) * 100%);
  animation-name: warmForumHeroHorizontal;
  animation-duration: var(--hero-duration);
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

.warm-forum-hero-window:hover .warm-forum-hero-track {
  animation-play-state: paused;
}

.warm-forum-hero-window.direction-static {
  overflow: visible;
}

.warm-forum-hero-window.direction-static .warm-forum-hero-track {
  width: 100%;
  animation: none;
}

.warm-forum-hero-window.direction-vertical {
  height: 320px;
}

.warm-forum-hero-window.direction-vertical .warm-forum-hero-track {
  display: grid;
  width: 100%;
  height: calc(var(--hero-total, 2) * 100%);
  animation-name: warmForumHeroVertical;
}

.warm-forum-hero {
  position: relative;
  flex: 0 0 calc(100% / var(--hero-total, 2));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 32%);
  gap: 18px;
  align-items: stretch;
  overflow: hidden;
  min-height: 238px;
  padding: 34px 30px 18px;
  border: 0;
  border-radius: 28px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.92), rgba(240, 253, 250, 0.78)),
    #f2fbf7;
  box-shadow: 0 16px 34px rgba(22, 78, 99, 0.08);
}

.warm-forum-hero-full-poster {
  display: block;
  min-height: 320px;
  padding: 0;
  background: #fff;
}

.warm-forum-full-poster-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 28px;
  background: #fff;
}

.warm-forum-poster-index {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 2;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  color: #1e3a8a;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.warm-forum-poster-index span {
  font-size: 12px;
  font-weight: 800;
}

.warm-forum-hero-window.direction-static .warm-forum-hero,
.warm-forum-hero-window.direction-vertical .warm-forum-hero {
  flex: none;
  width: 100%;
}

.warm-forum-copy {
  display: grid;
  gap: 12px;
  align-content: center;
  min-width: 0;
  position: relative;
  z-index: 2;
}

.warm-forum-kicker,
.warm-forum-channel em,
.warm-post-card span,
.warm-training-item span {
  color: #a85516;
  font-size: 13px;
  font-weight: 700;
}

.warm-forum-hero .warm-forum-kicker {
  justify-self: start;
  padding: 7px 12px;
  border-radius: 999px;
  color: #155cc5;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 20px rgba(21, 92, 197, 0.06);
}

.warm-forum-hero h2 {
  margin: 0;
  max-width: 720px;
  color: #111c2f;
  font-size: clamp(30px, 3.8vw, 40px);
  line-height: 1.18;
  letter-spacing: 0;
}

.warm-forum-hero p,
.warm-forum-channel p,
.warm-post-card p,
.warm-training-item p,
.warm-forum-side p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.warm-forum-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.warm-forum-hero .warm-forum-actions .primary {
  min-height: 38px;
  padding: 0 14px;
  border-color: #111827;
  background: #111827;
  color: #fff;
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.16);
}

.warm-forum-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.warm-forum-dots i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #c2c9cf;
}

.warm-forum-dots i.active {
  width: 28px;
  background: #2569d8;
}

.warm-forum-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.warm-forum-stat-strip span,
.warm-interaction-stats span {
  display: grid;
  gap: 2px;
  min-height: 58px;
  padding: 10px;
  border: 1px solid #d9e6de;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--muted);
  font-size: 12px;
}

.warm-forum-stat-strip b,
.warm-interaction-stats b {
  color: var(--ink);
  font-size: 22px;
}

.warm-forum-visual {
  position: relative;
  min-height: 210px;
  margin: 0;
  overflow: visible;
  border-radius: 8px;
  background: transparent;
  border: 0;
}

.warm-forum-visual img {
  position: absolute;
  right: 4px;
  bottom: -86px;
  z-index: 1;
  width: 260px;
  height: 260px;
  min-height: 0;
  display: block;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.warm-forum-poster-circle {
  position: absolute;
  right: 4px;
  bottom: -86px;
  z-index: 0;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: #aeece3;
}

.warm-forum-visual-fallback {
  display: grid;
  place-items: center;
  min-height: 292px;
  color: var(--primary);
  font-size: 34px;
  font-weight: 900;
  background: linear-gradient(135deg, #dff7f6, #fff2d9);
}

.warm-forum-visual figcaption {
  position: absolute;
  top: 8px;
  right: 0;
  left: auto;
  bottom: auto;
  z-index: 2;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 14px;
  width: 150px;
  min-height: 148px;
  align-items: center;
  padding: 18px 14px;
  border-radius: 36px;
  color: #172033;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(232, 251, 246, 0.94));
  box-shadow: 0 18px 36px rgba(24, 33, 47, 0.08);
}

.warm-forum-visual figcaption strong {
  color: #111827;
  font-size: 62px;
  line-height: 0.9;
  letter-spacing: 0;
}

.warm-forum-visual figcaption span {
  color: #64748b;
  font-size: 13px;
}

.warm-section-title h2,
.warm-forum-side h3 {
  margin: 0;
  color: var(--ink);
}

.warm-post-card small,
.warm-training-item small,
.warm-thread-list small {
  color: var(--muted);
}

.warm-forum-channels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.warm-forum-channel {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px 12px;
  align-items: center;
  min-height: 124px;
  padding: 12px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.forum-channel-title-row {
  align-items: center;
}

.forum-channel-title-row > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.forum-channel-maintain-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px dashed #93c5fd;
  border-radius: 8px;
  background: rgba(239, 246, 255, 0.58);
}

.forum-channel-maintain-card.is-dragging {
  opacity: 0.55;
}

.forum-channel-maintain-card.is-drop-target {
  border-color: #2563eb;
  background: #dbeafe;
}

.forum-channel-maintain-card.is-hidden {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.forum-channel-maintain-card .warm-forum-channel {
  width: 100%;
  min-height: 124px;
}

.forum-channel-maintain-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  padding: 6px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #fff;
}

.forum-channel-maintain-bar > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.forum-channel-maintain-bar button {
  min-height: 28px;
  padding: 5px 9px;
}

.forum-channel-hidden {
  display: grid;
  gap: 4px;
  min-height: 124px;
  place-content: center;
  text-align: center;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  color: #64748b;
  background: #fff;
}

.forum-small-add-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 8px;
}

.forum-small-maintain-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px dashed #86b7ff;
  border-radius: 8px;
  background: rgba(239, 246, 255, 0.62);
}

.forum-small-maintain-card.is-dragging {
  opacity: 0.55;
  pointer-events: none;
}

.forum-small-maintain-card.is-drop-target {
  border-color: #2563eb;
  background: #dbeafe;
}

.forum-small-maintain-card.is-hidden {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.forum-small-empty {
  display: grid;
  min-height: 104px;
  place-content: center;
  padding: 18px;
  text-align: center;
  color: #64748b;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #fff;
}

.forum-small-maintain-card > button,
.forum-small-maintain-card > article,
.forum-small-maintain-card > section {
  width: 100%;
  height: 100%;
}

.forum-small-maintain-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  padding: 6px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #fff;
}

.forum-small-maintain-bar > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.forum-small-maintain-bar button {
  min-height: 28px;
  padding: 5px 9px;
}

.forum-card-drag-handle,
.forum-channel-maintain-bar .forum-card-drag-handle,
.forum-small-maintain-bar .forum-card-drag-handle {
  min-width: 34px;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #0f766e;
  background: #ccfbf1;
  cursor: grab;
  font-size: 13px;
  font-weight: 900;
}

.forum-card-drag-handle:active {
  cursor: grabbing;
  background: #99f6e4;
}

.forum-card-drag-ghost {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.86;
  transform: rotate(-1deg);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.22);
}

[data-forum-card-collection].is-card-drop-target {
  outline: 2px dashed #2563eb;
  outline-offset: 5px;
  border-radius: 10px;
  background: rgba(219, 234, 254, 0.34);
}

body.is-forum-card-dragging,
body.is-forum-card-dragging * {
  user-select: none;
}

.forum-order-controls {
  display: inline-grid;
  grid-template-columns: repeat(2, 28px);
  gap: 4px;
  flex: 0 0 auto;
}

.forum-order-arrow,
.forum-channel-maintain-bar .forum-order-arrow,
.forum-small-maintain-bar .forum-order-arrow,
.forum-maintain-bar .forum-order-arrow {
  display: grid;
  place-items: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #2563eb;
  background: #eff6ff;
  cursor: pointer;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

.forum-order-arrow:hover {
  border-color: #bfdbfe;
  background: #dbeafe;
}

.forum-order-arrow:active {
  transform: translateY(1px);
  background: #bfdbfe;
}

.forum-small-hidden {
  display: grid;
  gap: 4px;
  min-height: 110px;
  place-content: center;
  text-align: center;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  color: #64748b;
  background: #fff;
}

.forum-side-card-stack {
  display: grid;
  gap: 14px;
}

.forum-generic-small-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.forum-card-cover,
.forum-side-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: #f8fafc;
}

.forum-announcement-card .forum-card-cover,
.forum-learning-poster .forum-card-cover,
.forum-suggestion-card .forum-card-cover,
.forum-generic-small-card .forum-card-cover {
  margin-bottom: 4px;
}

.forum-announcement-card.featured .forum-card-cover {
  border-color: rgba(255, 255, 255, 0.42);
}

.forum-point-card .points-product-art.has-image {
  overflow: hidden;
  padding: 0;
  background: #f8fafc;
}

.forum-point-card .points-product-art.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.forum-card-builder-form .forum-card-image-preview img {
  max-height: 210px;
}

.warm-channel-poster {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  grid-row: 1 / span 2;
  width: 92px;
  height: 96px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #0d9488, #99f6e4);
}

.warm-channel-poster.has-image {
  background: #0f172a;
}

.warm-channel-poster.has-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.warm-channel-image-mark {
  position: absolute !important;
  left: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #fff;
  background: rgba(15, 23, 42, 0.58);
  font-size: 20px !important;
}

.warm-channel-poster span {
  position: relative;
  z-index: 2;
  font-size: 30px;
  font-weight: 900;
}

.warm-channel-poster i,
.warm-channel-poster b {
  position: absolute;
  display: block;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.48);
}

.warm-channel-poster i {
  right: 10px;
  bottom: 12px;
  width: 38px;
  height: 24px;
}

.warm-channel-poster b {
  left: 10px;
  top: 12px;
  width: 22px;
  height: 22px;
}

.warm-forum-channel.green { background: #f0fdf4; border-color: #bbf7d0; }
.warm-forum-channel.blue { background: #eff6ff; border-color: #bfdbfe; }
.warm-forum-channel.mint { background: #f0fdfa; border-color: #99f6e4; }
.warm-forum-channel.amber { background: #fffbeb; border-color: #fde68a; }
.warm-forum-channel.rose { background: #fff1f2; border-color: #fecdd3; }
.warm-forum-channel.violet { background: #f5f3ff; border-color: #ddd6fe; }

.warm-channel-poster.green { background: linear-gradient(135deg, #16a34a, #86efac); }
.warm-channel-poster.blue { background: linear-gradient(135deg, #2563eb, #93c5fd); }
.warm-channel-poster.mint { background: linear-gradient(135deg, #0d9488, #5eead4); }
.warm-channel-poster.amber { background: linear-gradient(135deg, #d97706, #fcd34d); }
.warm-channel-poster.rose { background: linear-gradient(135deg, #e11d48, #fda4af); }
.warm-channel-poster.violet { background: linear-gradient(135deg, #7c3aed, #c4b5fd); }

.warm-forum-channel strong,
.warm-post-card strong,
.warm-training-item strong,
.warm-thread-list strong {
  color: var(--ink);
  font-size: 17px;
}

.warm-forum-channel em,
.warm-forum-channel p {
  grid-column: 2;
  font-style: normal;
}

.warm-forum-channel:hover,
.warm-post-card:hover,
.warm-training-item:hover,
.warm-thread-list button:hover,
.warm-forum-side button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(15, 88, 163, 0.08);
}

.forum-layout-maintenance-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  color: #1e3a8a;
}

.forum-layout-maintenance-panel span {
  color: #475569;
}

.forum-maintain-block {
  min-width: 0;
}

.forum-maintain-block:not(.is-editing) {
  display: contents;
}

.forum-maintain-block.is-editing {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px dashed #93c5fd;
  border-radius: 8px;
  background: rgba(239, 246, 255, 0.55);
}

.forum-maintain-block.is-dragging {
  opacity: 0.55;
}

.forum-maintain-block.is-drop-target {
  border-color: #2563eb;
  background: #dbeafe;
}

.forum-maintain-block.is-hidden {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.forum-maintain-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding: 7px 8px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #ffffff;
}

.forum-maintain-bar > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.forum-hidden-block {
  display: grid;
  gap: 4px;
  min-height: 92px;
  place-content: center;
  text-align: center;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  color: #64748b;
  background: #fff;
}

.share-forum-page [style*="--module-font"] {
  font-family: var(--module-font, inherit);
}

.share-forum-page [style*="--module-size"] p,
.share-forum-page [style*="--module-size"] span,
.share-forum-page [style*="--module-size"] small,
.share-forum-page [style*="--module-size"] em,
.share-forum-page [style*="--module-size"] strong,
.share-forum-page [style*="--module-size"] button {
  font-size: var(--module-size, 15px);
}

.share-forum-page [style*="--module-size"] h2,
.share-forum-page [style*="--module-size"] h3 {
  font-size: calc(var(--module-size, 15px) + 8px);
}

.forum-flex-module {
  --module-accent: #2563eb;
  --module-soft: #eff6ff;
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 18px;
  border: 1px solid #dbe7f5;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.94)),
    #fff;
  box-shadow: 0 12px 28px rgba(24, 33, 47, 0.06);
  scroll-margin-top: 86px;
}

.forum-flex-module.green { --module-accent: #16a34a; --module-soft: #f0fdf4; border-color: #bbf7d0; }
.forum-flex-module.blue { --module-accent: #2563eb; --module-soft: #eff6ff; border-color: #bfdbfe; }
.forum-flex-module.mint { --module-accent: #0d9488; --module-soft: #f0fdfa; border-color: #99f6e4; }
.forum-flex-module.amber { --module-accent: #d97706; --module-soft: #fffbeb; border-color: #fde68a; }
.forum-flex-module.rose { --module-accent: #e11d48; --module-soft: #fff1f2; border-color: #fecdd3; }
.forum-flex-module.violet { --module-accent: #7c3aed; --module-soft: #f5f3ff; border-color: #ddd6fe; }

.forum-flex-head {
  display: grid;
  gap: 6px;
  max-width: 760px;
}

.forum-flex-head.with-action {
  max-width: none;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.forum-flex-head span,
.forum-text-copy span,
.forum-poster-copy span {
  color: var(--module-accent);
  font-weight: 800;
}

.forum-flex-head h2,
.forum-text-copy h2,
.forum-poster-copy h2 {
  margin: 0;
  color: var(--ink);
  line-height: 1.25;
}

.forum-flex-head p,
.forum-text-copy p,
.forum-poster-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.forum-carousel-window {
  overflow: hidden;
  border-radius: 8px;
}

.forum-banner-strip-module {
  gap: 12px;
  padding: 14px;
}

.forum-banner-strip-head {
  display: grid;
  grid-template-columns: auto minmax(180px, 0.8fr) minmax(260px, 1.2fr);
  gap: 10px;
  align-items: center;
}

.forum-banner-strip-head span {
  justify-self: start;
  padding: 5px 9px;
  border-radius: 8px;
  color: var(--module-accent);
  background: var(--module-soft);
  font-weight: 800;
}

.forum-banner-strip-head strong {
  color: var(--ink);
  font-size: calc(var(--module-size, 15px) + 5px);
}

.forum-banner-strip-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.forum-banner-strip-window {
  overflow: hidden;
  border-radius: 8px;
}

.forum-banner-strip-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation-name: forumCarouselScroll;
  animation-duration: var(--module-scroll-duration);
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

.forum-banner-strip-module.direction-static .forum-banner-strip-window {
  overflow: visible;
}

.forum-banner-strip-module.direction-static .forum-banner-strip-track {
  flex-wrap: wrap;
  width: 100%;
  animation: none;
}

.forum-banner-strip-module.direction-static .forum-banner-strip-card {
  flex: 1 1 min(360px, 100%);
}

.forum-banner-strip-module.direction-vertical .forum-banner-strip-window {
  height: 184px;
}

.forum-banner-strip-module.direction-vertical .forum-banner-strip-track {
  display: grid;
  width: 100%;
  animation-name: forumBannerVertical;
}

.forum-banner-strip-module.direction-vertical .forum-banner-strip-card {
  width: 100%;
  flex: none;
}

.forum-banner-strip-window:hover .forum-banner-strip-track {
  animation-play-state: paused;
}

.forum-banner-strip-card {
  flex: 0 0 min(460px, 82vw);
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  min-height: 136px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: #fff;
}

.forum-banner-strip-card img,
.forum-banner-mini-poster {
  width: 150px;
  height: 116px;
  border-radius: 8px;
  overflow: hidden;
  object-fit: contain;
  background: #f8fafc;
}

.forum-banner-mini-poster .forum-poster-art {
  min-height: 116px;
  height: 116px;
}

.forum-banner-strip-copy {
  display: grid;
  gap: 6px;
  align-content: center;
  min-width: 0;
}

.forum-banner-strip-card span {
  color: var(--module-accent);
  font-weight: 800;
}

.forum-banner-strip-card strong {
  color: var(--ink);
  line-height: 1.35;
}

.forum-banner-strip-card small {
  color: var(--muted);
  line-height: 1.55;
}

.forum-banner-strip-module.style-strip .forum-banner-strip-card {
  position: relative;
  flex-basis: min(760px, 88vw);
  grid-template-columns: 1fr;
  min-height: 184px;
  padding: 18px;
  isolation: isolate;
  background: var(--module-accent);
}

.forum-banner-strip-module.style-strip .forum-banner-strip-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.72), rgba(15, 23, 42, 0.24), rgba(15, 23, 42, 0.08));
  pointer-events: none;
}

.forum-banner-strip-card .forum-banner-strip-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  object-fit: cover;
}

.forum-banner-strip-card .forum-banner-strip-bg .forum-poster-art {
  min-height: 100%;
  height: 100%;
  border-radius: 8px;
}

.forum-banner-strip-module.style-strip .forum-banner-strip-copy {
  position: relative;
  z-index: 2;
  max-width: 560px;
  padding: 14px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
  backdrop-filter: blur(8px);
}

.forum-banner-strip-module.style-strip .forum-banner-strip-copy span,
.forum-banner-strip-module.style-strip .forum-banner-strip-copy strong,
.forum-banner-strip-module.style-strip .forum-banner-strip-copy small {
  color: #fff;
}

.forum-banner-strip-module.style-image .forum-banner-strip-card {
  position: relative;
  flex-basis: min(640px, 88vw);
  grid-template-columns: 1fr;
  min-height: 260px;
  padding: 0;
  isolation: isolate;
}

.forum-banner-strip-module.style-image .forum-banner-strip-card > img,
.forum-banner-strip-module.style-image .forum-banner-mini-poster {
  width: 100%;
  height: 260px;
  border-radius: 8px;
}

.forum-banner-strip-module.style-image .forum-banner-mini-poster .forum-poster-art {
  min-height: 260px;
  height: 260px;
}

.forum-banner-strip-module.style-image .forum-banner-strip-copy {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  max-width: 480px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.14);
}

.forum-banner-strip-module.style-image.direction-vertical .forum-banner-strip-window {
  height: 278px;
}

.forum-banner-strip-module.style-strip.direction-vertical .forum-banner-strip-window {
  height: 204px;
}

.forum-carousel-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation-name: forumCarouselScroll;
  animation-duration: var(--module-scroll-duration);
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

.forum-carousel-window:hover .forum-carousel-track {
  animation-play-state: paused;
}

.forum-carousel-slide {
  flex: 0 0 min(340px, 76vw);
  display: grid;
  grid-template-rows: 170px minmax(118px, auto);
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: #fff;
}

.forum-carousel-slide img,
.forum-poster-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f8fafc;
}

.forum-slide-art,
.forum-poster-visual {
  min-height: 170px;
  overflow: hidden;
}

.forum-carousel-slide > div:last-child {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 13px;
  background: var(--module-soft);
}

.forum-carousel-slide strong,
.forum-album-card strong {
  color: var(--ink);
  line-height: 1.35;
}

.forum-carousel-slide small,
.forum-album-card span {
  color: var(--muted);
  line-height: 1.55;
}

.forum-album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.forum-album-card {
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 250px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 8px;
  background: #fff;
}

.forum-album-card img,
.forum-album-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
}

.forum-album-card img {
  object-fit: cover;
}

.forum-album-placeholder {
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 28px;
  font-weight: 900;
  background: var(--module-accent);
}

.forum-album-placeholder.green { background: #16a34a; }
.forum-album-placeholder.blue { background: #2563eb; }
.forum-album-placeholder.mint { background: #0d9488; }
.forum-album-placeholder.amber { background: #d97706; }
.forum-album-placeholder.rose { background: #e11d48; }
.forum-album-placeholder.violet { background: #7c3aed; }

.forum-poster-module,
.forum-text-module {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 36%);
  align-items: stretch;
}

.forum-text-module {
  grid-template-columns: minmax(240px, 32%) minmax(0, 1fr);
}

.forum-poster-copy,
.forum-text-copy {
  display: grid;
  gap: 10px;
  align-content: center;
  min-width: 0;
}

.forum-text-visual,
.forum-poster-visual {
  display: grid;
  min-height: 240px;
  border-radius: 8px;
  background: var(--module-soft);
}

.forum-text-visual .forum-poster-art,
.forum-poster-visual .forum-poster-art {
  min-height: 100%;
}

.forum-module-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}

.forum-builder-form textarea {
  min-height: 104px;
}

.forum-builder-tip {
  padding: 10px 12px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  color: #1e3a8a;
  line-height: 1.6;
}

.forum-poster-order {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #f8fbff;
}

.forum-poster-order-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.forum-poster-order-head strong {
  color: var(--ink);
}

.forum-poster-order-head span {
  color: var(--muted);
  font-size: 13px;
}

.forum-poster-order-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.forum-poster-order-grid article {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 9px;
  border: 1px solid #d8e5ef;
  border-radius: 8px;
  background: #fff;
}

.forum-poster-order-grid b {
  justify-self: start;
  padding: 3px 7px;
  border-radius: 999px;
  color: #1d4ed8;
  background: #eff6ff;
  font-size: 12px;
}

.forum-poster-order-grid img,
.forum-poster-order-grid i {
  width: 100%;
  height: 82px;
  border-radius: 8px;
}

.forum-poster-order-grid img {
  object-fit: contain;
  background: #f8fafc;
}

.forum-poster-order-grid i {
  display: grid;
  place-items: center;
  color: #2563eb;
  font-size: 26px;
  font-style: normal;
  font-weight: 900;
  background: linear-gradient(135deg, #eff6ff, #ecfdf5);
}

.forum-poster-order-grid strong {
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forum-poster-order-grid small {
  color: var(--muted);
  line-height: 1.45;
}

.forum-poster-slot-editor {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #f8fbff;
}

.forum-poster-slot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.forum-poster-size-guide {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  background: #f0fdf4;
}

.forum-poster-size-guide b {
  color: #166534;
}

.forum-poster-size-guide span,
.forum-poster-slot-spec {
  color: #3f556f;
  font-size: 13px;
  line-height: 1.45;
}

.forum-poster-slot-card {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #d8e5ef;
  border-radius: 8px;
  background: #fff;
}

.forum-poster-slot-title {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.forum-poster-slot-title b {
  color: #1d4ed8;
}

.forum-poster-slot-title span {
  color: var(--muted);
  font-size: 12px;
}

.forum-poster-slot-spec {
  padding: 8px 10px;
  border-radius: 8px;
  background: #f8fafc;
}

.forum-poster-slot-card label {
  min-width: 0;
}

.forum-poster-slot-preview {
  min-height: 280px;
  background: #f8fafc;
}

.forum-poster-slot-preview img {
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: contain;
  background: #fff;
}

.forum-poster-slot-preview i {
  color: #2563eb;
  font-size: 34px;
  font-style: normal;
  font-weight: 900;
}

.forum-recycle-list {
  display: grid;
  gap: 10px;
}

.forum-recycle-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #d8e5ef;
  border-radius: 8px;
  background: #fff;
}

.forum-recycle-list article > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.forum-recycle-list span,
.forum-recycle-list small {
  color: var(--muted);
}

.forum-recycle-list strong {
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forum-add-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.forum-add-choice button {
  min-height: 64px;
  font-weight: 800;
}

@keyframes forumCarouselScroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 6px)); }
}

@keyframes forumBannerVertical {
  from { transform: translateY(calc(-50% - 6px)); }
  to { transform: translateY(0); }
}

@keyframes warmForumHeroHorizontal {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes warmForumHeroVertical {
  from { transform: translateY(-50%); }
  to { transform: translateY(0); }
}

.forum-channel-section {
  display: grid;
  gap: 12px;
}

.warm-composer-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  padding: 18px;
  border: 1px solid #d8ece5;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(24, 33, 47, 0.06);
}

.warm-composer-copy {
  display: grid;
  gap: 9px;
  align-content: center;
}

.warm-composer-copy h2 {
  margin: 0;
  font-size: 23px;
  color: var(--ink);
}

.warm-composer-copy p {
  margin: 0;
  color: var(--muted);
}

.warm-mini-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.warm-upload-card {
  display: grid;
  gap: 10px;
}

.warm-upload-preview {
  display: grid;
  place-content: center;
  gap: 4px;
  min-height: 152px;
  padding: 14px;
  overflow: hidden;
  text-align: center;
  border: 1px dashed #94a3b8;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.9), rgba(236, 253, 245, 0.9)),
    #fff;
}

.warm-upload-preview.compact {
  min-height: 132px;
}

.warm-upload-preview img {
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
}

.warm-upload-preview span,
.warm-upload-preview small {
  color: var(--muted);
}

.warm-upload-btn,
.forum-upload-field {
  display: grid;
  gap: 6px;
}

.warm-upload-btn {
  place-items: center;
  min-height: 38px;
  border: 1px solid var(--primary);
  border-radius: 8px;
  color: #fff;
  background: var(--primary);
  cursor: pointer;
}

.warm-upload-btn input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.forum-hidden-file-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.warm-inline-post-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.warm-inline-post-form label,
.warm-inline-post-form .wide {
  min-width: 0;
}

.warm-inline-post-form .wide {
  grid-column: 1 / -1;
}

.forum-post-channel-note {
  display: grid;
  gap: 4px;
  align-content: center;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  color: #1e3a8a;
  background: #eff6ff;
}

.forum-post-channel-note strong {
  color: #0f172a;
}

.forum-post-channel-note span {
  color: #475569;
  font-size: 13px;
  line-height: 1.45;
}

.forum-home-posts {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(240, 253, 250, 0.88)),
    #fff;
  box-shadow: 0 14px 30px rgba(24, 33, 47, 0.07);
  scroll-margin-top: 86px;
}

.forum-home-post-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.forum-home-post-head h2 {
  margin: 5px 0 6px;
  color: var(--ink);
  font-size: 26px;
  line-height: 1.2;
}

.forum-home-post-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.forum-post-channel-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
}

.forum-post-channel-strip button,
.forum-channel-picker-grid button {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #d8e5ef;
  border-radius: 8px;
  text-align: left;
  background: #fff;
}

.forum-post-channel-strip button strong,
.forum-channel-picker-grid button strong {
  color: var(--ink);
}

.forum-post-channel-strip button span,
.forum-channel-picker-grid button span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.forum-post-channel-strip .green,
.forum-channel-picker-grid .green { border-color: #bbf7d0; background: #f0fdf4; }
.forum-post-channel-strip .blue,
.forum-channel-picker-grid .blue { border-color: #bfdbfe; background: #eff6ff; }
.forum-post-channel-strip .mint,
.forum-channel-picker-grid .mint { border-color: #99f6e4; background: #f0fdfa; }
.forum-post-channel-strip .amber,
.forum-channel-picker-grid .amber { border-color: #fde68a; background: #fffbeb; }
.forum-post-channel-strip .rose,
.forum-channel-picker-grid .rose { border-color: #fecdd3; background: #fff1f2; }
.forum-post-channel-strip .violet,
.forum-channel-picker-grid .violet { border-color: #ddd6fe; background: #f5f3ff; }

.forum-home-post-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.forum-post-summary-card {
  display: grid;
  gap: 8px;
  align-content: center;
  padding: 16px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #0f766e);
}

.forum-post-summary-card span,
.forum-post-summary-card small,
.forum-post-summary-card em {
  color: rgba(255, 255, 255, 0.82);
  font-style: normal;
}

.forum-post-summary-card strong {
  font-size: 42px;
  line-height: 1;
}

.forum-post-summary-card div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.forum-home-post-feed {
  display: grid;
  gap: 10px;
}

.forum-home-post-card {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  min-width: 0;
  padding: 12px;
  border: 1px solid #d8e5ef;
  border-radius: 8px;
  text-align: left;
  background: #fff;
}

.forum-home-post-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.09);
}

.forum-home-post-card img,
.forum-home-post-mark {
  width: 86px;
  height: 86px;
  border-radius: 8px;
  object-fit: cover;
}

.forum-home-post-mark {
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 28px;
  font-weight: 900;
  background: linear-gradient(135deg, #2563eb, #14b8a6);
}

.forum-home-post-card.green .forum-home-post-mark { background: linear-gradient(135deg, #16a34a, #86efac); }
.forum-home-post-card.blue .forum-home-post-mark { background: linear-gradient(135deg, #2563eb, #93c5fd); }
.forum-home-post-card.mint .forum-home-post-mark { background: linear-gradient(135deg, #0d9488, #5eead4); }
.forum-home-post-card.amber .forum-home-post-mark { background: linear-gradient(135deg, #d97706, #fbbf24); }
.forum-home-post-card.rose .forum-home-post-mark { background: linear-gradient(135deg, #e11d48, #fda4af); }
.forum-home-post-card.violet .forum-home-post-mark { background: linear-gradient(135deg, #7c3aed, #c4b5fd); }

.forum-home-post-card div {
  display: grid;
  gap: 5px;
  align-content: center;
  min-width: 0;
}

.forum-home-post-card span {
  color: #b45309;
  font-weight: 800;
  font-size: 13px;
}

.forum-home-post-card strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forum-home-post-card p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  line-height: 1.5;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.forum-home-post-card small {
  color: #64748b;
}

.forum-home-post-empty {
  display: grid;
  gap: 6px;
  place-content: center;
  min-height: 180px;
  padding: 18px;
  border: 1px dashed #94a3b8;
  border-radius: 8px;
  text-align: center;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.78);
}

.forum-channel-post-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.forum-channel-post-item {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  width: 100%;
  min-height: 112px;
  padding: 12px;
  border: 1px solid #d8e5ef;
  border-radius: 8px;
  text-align: left;
  background: #fff;
}

.forum-channel-post-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.09);
}

.forum-channel-post-item img,
.forum-channel-post-item > span {
  width: 88px;
  height: 88px;
  border-radius: 8px;
  object-fit: cover;
}

.forum-channel-post-item > span {
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 28px;
  font-weight: 900;
  background: linear-gradient(135deg, #2563eb, #14b8a6);
}

.forum-channel-post-item.green > span { background: linear-gradient(135deg, #16a34a, #86efac); }
.forum-channel-post-item.blue > span { background: linear-gradient(135deg, #2563eb, #93c5fd); }
.forum-channel-post-item.mint > span { background: linear-gradient(135deg, #0d9488, #5eead4); }
.forum-channel-post-item.amber > span { background: linear-gradient(135deg, #d97706, #fbbf24); }
.forum-channel-post-item.rose > span { background: linear-gradient(135deg, #e11d48, #fda4af); }
.forum-channel-post-item.violet > span { background: linear-gradient(135deg, #7c3aed, #c4b5fd); }

.forum-channel-post-item div {
  display: grid;
  gap: 5px;
  align-content: center;
  min-width: 0;
}

.forum-channel-post-item em {
  color: #b45309;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.forum-channel-post-item strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forum-channel-post-item p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  line-height: 1.5;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.forum-channel-post-item small {
  color: #64748b;
}

.forum-channel-picker {
  display: grid;
  gap: 14px;
}

.forum-channel-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.forum-post-maintain-editor {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #f8fbff;
}

.forum-post-maintain-head {
  display: grid;
  gap: 4px;
}

.forum-post-maintain-head strong {
  color: var(--ink);
}

.forum-post-maintain-head span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.forum-post-maintain-channel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.forum-post-maintain-channel-grid section {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #d8e5ef;
  border-radius: 8px;
  background: #fff;
}

.forum-post-maintain-channel-title {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.forum-post-maintain-channel-title b {
  color: #1d4ed8;
}

.forum-post-maintain-channel-title select {
  width: 116px;
}

@media (max-width: 980px) {
  .forum-home-post-head,
  .forum-home-post-layout {
    grid-template-columns: 1fr;
  }

  .forum-post-channel-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .forum-post-channel-strip,
  .forum-channel-picker-grid,
  .forum-post-maintain-channel-grid {
    grid-template-columns: 1fr;
  }

  .forum-home-post-card {
    grid-template-columns: 1fr;
  }

  .forum-home-post-card img,
  .forum-home-post-mark {
    width: 100%;
    height: 120px;
  }
}

.checkbox-line {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

.checkbox-line input {
  width: auto;
}

.forum-board-stack {
  display: grid;
  gap: 16px;
}

.forum-board-section {
  display: grid;
  grid-template-columns: minmax(280px, 35%) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(24, 33, 47, 0.06);
  scroll-margin-top: 86px;
}

.forum-board-section.green { border-color: #bbf7d0; background: #fbfffd; }
.forum-board-section.blue { border-color: #bfdbfe; background: #f8fbff; }
.forum-board-section.mint { border-color: #99f6e4; background: #f7fffd; }
.forum-board-section.amber { border-color: #fde68a; background: #fffdf6; }
.forum-board-section.rose { border-color: #fecdd3; background: #fffafa; }
.forum-board-section.violet { border-color: #ddd6fe; background: #fcfbff; }

.forum-public-section {
  grid-template-columns: minmax(320px, 42%) minmax(0, 1fr);
  border-color: #acd2ff;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.95), rgba(255, 255, 255, 0.9)),
    #fff;
}

.forum-public-section .forum-board-poster {
  min-height: 318px;
}

.forum-public-section .forum-poster-art {
  min-height: 178px;
}

.forum-board-poster {
  display: grid;
  grid-template-rows: minmax(230px, 1fr) auto;
  gap: 14px;
  min-height: 268px;
  padding: 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.92);
}

.forum-board-poster-visual {
  position: relative;
  display: grid;
  min-height: 230px;
  overflow: hidden;
  border-radius: 8px;
  background: #f8fafc;
}

.forum-board-poster-visual.has-image {
  border: 1px solid rgba(148, 163, 184, 0.28);
}

.forum-board-poster-visual img {
  width: 100%;
  height: 100%;
  min-height: 230px;
  object-fit: cover;
  display: block;
}

.forum-board-poster-visual .forum-poster-art {
  min-height: 100%;
  height: 100%;
}

.forum-poster-upload-chip {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 8px;
  color: #fff;
  background: rgba(37, 99, 235, 0.92);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);
  cursor: pointer;
  font-weight: 800;
}

.forum-poster-upload-chip input {
  display: none;
}

.forum-board-poster span {
  color: #a85516;
  font-size: 13px;
  font-weight: 800;
}

.forum-board-poster h2 {
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.25;
}

.forum-board-poster p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.7;
}

.forum-poster-art {
  position: relative;
  overflow: hidden;
  min-height: 150px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0d9488, #ccfbf1);
}

.forum-poster-art.green { background: linear-gradient(135deg, #16a34a, #dcfce7); }
.forum-poster-art.blue { background: linear-gradient(135deg, #2563eb, #dbeafe); }
.forum-poster-art.mint { background: linear-gradient(135deg, #0d9488, #ccfbf1); }
.forum-poster-art.amber { background: linear-gradient(135deg, #d97706, #fef3c7); }
.forum-poster-art.rose { background: linear-gradient(135deg, #e11d48, #ffe4e6); }
.forum-poster-art.violet { background: linear-gradient(135deg, #7c3aed, #ede9fe); }

.forum-poster-mark {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  color: #fff !important;
  background: rgba(15, 23, 42, 0.2);
  font-size: 30px !important;
}

.poster-dot,
.poster-line,
.poster-window {
  position: absolute;
  display: block;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.52);
}

.poster-dot.one {
  right: 22px;
  top: 18px;
  width: 42px;
  height: 42px;
}

.poster-dot.two {
  left: 82px;
  bottom: 18px;
  width: 24px;
  height: 24px;
}

.poster-line.one {
  right: 22px;
  bottom: 34px;
  width: 90px;
  height: 14px;
}

.poster-line.two {
  right: 52px;
  bottom: 58px;
  width: 62px;
  height: 14px;
}

.poster-window {
  right: 18px;
  bottom: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 118px;
  height: 72px;
  padding: 8px;
}

.poster-window b {
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.68);
}

.forum-board-content {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}

.forum-learning-posters,
.forum-announcement-wall,
.forum-suggestion-board,
.forum-points-shelf {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.forum-learning-poster,
.forum-announcement-card,
.forum-suggestion-card,
.forum-point-card,
.forum-thread-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: left;
  background: #fff;
}

.forum-learning-poster {
  min-height: 128px;
  align-content: end;
  background:
    linear-gradient(135deg, rgba(220, 252, 231, 0.92), rgba(255, 255, 255, 0.9)),
    #fff;
}

.forum-learning-poster.exam {
  background:
    linear-gradient(135deg, rgba(237, 233, 254, 0.92), rgba(255, 255, 255, 0.9)),
    #fff;
}

.forum-learning-poster.archive {
  background:
    linear-gradient(135deg, rgba(204, 251, 241, 0.92), rgba(255, 255, 255, 0.9)),
    #fff;
}

.forum-announcement-card.featured {
  grid-row: span 2;
  min-height: 190px;
  align-content: end;
  border-color: #bfdbfe;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.94), rgba(14, 165, 233, 0.82)),
    #2563eb;
}

.forum-announcement-card.featured span,
.forum-announcement-card.featured strong,
.forum-announcement-card.featured small {
  color: #fff;
}

.forum-thread-board {
  display: grid;
  gap: 10px;
}

.forum-thread-card {
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: stretch;
}

.forum-thread-card img,
.forum-thread-visual {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  object-fit: cover;
}

.forum-thread-visual {
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 34px;
  font-weight: 900;
  background: linear-gradient(135deg, #0d9488, #5eead4);
}

.forum-thread-card p,
.forum-suggestion-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.forum-suggestion-card b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #fff;
  background: #d97706;
}

.forum-point-card {
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
}

.forum-point-card small {
  grid-column: 2;
}

.warm-forum-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}

.warm-forum-feed,
.warm-forum-side,
.warm-training-card,
.warm-thread-list {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.warm-section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.warm-section-title span {
  color: var(--muted);
  font-size: 13px;
}

.warm-post-grid,
.warm-training-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.warm-post-card,
.warm-training-item,
.warm-thread-list button,
.warm-forum-side section {
  display: grid;
  gap: 8px;
  padding: 15px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.warm-post-card {
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: stretch;
}

.warm-post-thumb,
.forum-modal-image,
.warm-modal-photo-grid img {
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.warm-post-thumb {
  height: 100%;
  min-height: 112px;
}

.warm-post-accent {
  display: grid;
  place-items: center;
  width: 86px;
  min-height: 112px;
  border-radius: 8px;
  color: #fff;
  font-size: 28px;
  font-weight: 900;
}

.warm-post-accent.blue { background: #2563eb; }
.warm-post-accent.mint { background: #0d9488; }
.warm-post-accent.amber { background: #d97706; }

.warm-training-card {
  padding: 16px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #f8fbff;
}

.warm-training-item.exam {
  background: #f5f3ff;
  border-color: #ddd6fe;
}

.warm-training-item.archive {
  background: #f0fdfa;
  border-color: #99f6e4;
}

.warm-thread-list button {
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
}

.warm-thread-list span {
  color: #0f766e;
  font-weight: 700;
}

.warm-thread-list small {
  grid-column: 2;
}

.warm-forum-side section {
  background: #fff;
}

.warm-forum-side button {
  justify-self: start;
}

.warm-interaction-box {
  border-color: #c7d2fe;
  background: #f8f7ff;
}

.forum-community-hub {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(240, 253, 250, 0.84), rgba(248, 250, 252, 0.96)),
    #f8fafc;
}

.forum-community-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
  padding: 8px 4px 2px;
}

.forum-community-head h2 {
  margin: 8px 0 6px;
  color: var(--ink);
  font-size: 28px;
  line-height: 1.15;
}

.forum-community-head p {
  margin: 0;
  color: #475569;
}

.forum-community-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(70px, 1fr));
  gap: 8px;
}

.forum-community-kpis span {
  display: grid;
  gap: 3px;
  min-width: 72px;
  padding: 10px 12px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  text-align: center;
  background: rgba(255, 255, 255, 0.86);
}

.forum-community-kpis b {
  color: #0f766e;
  font-size: 20px;
}

.forum-community-kpis small,
.forum-community-section-title small {
  color: #64748b;
}

.forum-community-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 0.34fr);
  gap: 18px;
  align-items: start;
}

.forum-community-main,
.forum-community-rail {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.forum-community-section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.forum-community-section-title span {
  color: #0f172a;
  font-weight: 900;
}

.forum-community-feed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.forum-community-side-list {
  display: grid;
  gap: 14px;
}

.forum-community-hub .forum-small-add-row {
  margin: 0;
}

.forum-community-hub .forum-small-add-row .primary {
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.16);
}

.forum-community-hub .forum-small-maintain-card {
  gap: 10px;
  padding: 10px;
  border: 1px dashed #93c5fd;
  background: rgba(255, 255, 255, 0.78);
}

.forum-community-hub .forum-small-maintain-bar {
  border-color: #dbeafe;
  background: rgba(255, 255, 255, 0.94);
}

.forum-community-feed > .forum-small-maintain-card:first-of-type,
.forum-community-feed > .warm-post-card:first-child {
  grid-row: span 2;
}

.forum-community-hub .warm-post-card {
  min-height: 156px;
  border-color: rgba(148, 163, 184, 0.28);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.forum-community-hub .warm-post-card:first-child {
  align-content: end;
  min-height: 276px;
  background:
    linear-gradient(135deg, rgba(236, 253, 245, 0.9), rgba(255, 255, 255, 0.98)),
    #fff;
}

.forum-community-hub .warm-post-accent,
.forum-community-hub .warm-post-thumb {
  min-height: 128px;
}

.forum-community-hub .warm-post-card:first-child .warm-post-accent,
.forum-community-hub .warm-post-card:first-child .warm-post-thumb {
  min-height: 210px;
}

.forum-community-hub .warm-forum-side section,
.forum-community-hub .forum-community-side-list section {
  border-color: rgba(148, 163, 184, 0.28);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.forum-community-hub .warm-interaction-box {
  border-color: #99f6e4;
  background:
    linear-gradient(135deg, rgba(240, 253, 250, 0.95), rgba(255, 255, 255, 0.98)),
    #fff;
}

@media (max-width: 980px) {
  .forum-community-head,
  .forum-community-shell,
  .forum-community-feed {
    grid-template-columns: 1fr;
  }

  .forum-community-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .forum-community-feed > .forum-small-maintain-card:first-of-type,
  .forum-community-feed > .warm-post-card:first-child {
    grid-row: auto;
  }
}

@media (max-width: 640px) {
  .forum-community-hub {
    padding: 14px;
  }

  .forum-community-kpis {
    grid-template-columns: 1fr;
  }
}

.warm-interaction-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.warm-culture-wall {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #fee2e2;
  border-radius: 8px;
  background: #fffafa;
}

.warm-culture-grid,
.warm-modal-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.warm-culture-card,
.warm-modal-photo-grid article {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.warm-culture-card img,
.warm-culture-placeholder,
.warm-modal-photo-grid img,
.warm-modal-photo-grid article > div {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 8px;
}

.warm-culture-placeholder,
.warm-modal-photo-grid article > div {
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  font-size: 26px;
}

.warm-culture-placeholder.blue { background: #2563eb; }
.warm-culture-placeholder.green { background: #16a34a; }
.warm-culture-placeholder.amber { background: #d97706; }
.warm-culture-placeholder.rose { background: #e11d48; }
.warm-culture-placeholder.mint,
.warm-modal-photo-grid article > div { background: #0d9488; }

.warm-culture-card span,
.warm-modal-photo-grid span {
  color: var(--muted);
  font-size: 13px;
}

.forum-modal-image {
  max-height: 260px;
  margin-bottom: 12px;
}

.learning-path-grid,
.learning-course-grid,
.maintenance-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.learning-path-card,
.learning-course-card,
.maintenance-action-card {
  display: grid;
  gap: 10px;
  text-align: left;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, #ffffff);
  border-radius: 8px;
  background: linear-gradient(180deg, #fffefd, color-mix(in srgb, var(--panel-soft) 56%, #ffffff));
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.045);
}

.learning-path-card {
  border-left: 4px solid var(--primary);
}

.learning-path-card strong,
.learning-course-card h3,
.maintenance-action-card strong {
  margin: 0;
  color: var(--ink);
}

.learning-path-card span,
.learning-path-card p,
.learning-course-card p,
.maintenance-action-card span {
  margin: 0;
  color: var(--muted);
}

.learning-course-card {
  align-content: space-between;
  min-height: 210px;
}

.learning-course-assets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.learning-course-assets span {
  padding: 4px 8px;
  border-radius: 999px;
  background: #f3f6fa;
  color: var(--muted);
  font-size: 12px;
  border: 1px solid var(--line);
}

.learning-course-assets span.ready {
  color: #075985;
  background: #e0f2fe;
  border-color: #bae6fd;
}

.course-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.course-meta-row span:not(.badge) {
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef4fb;
  color: var(--muted);
  font-size: 12px;
}

.learning-course-resource-panel,
.learning-course-detail {
  display: grid;
  gap: 14px;
}

.learning-resource-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-end;
  padding: 12px;
  border-radius: 8px;
  background: #f8fbff;
  border: 1px solid var(--line);
}

.learning-resource-head span {
  color: var(--muted);
  font-size: 13px;
}

.learning-resource-grid,
.learning-detail-resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.learning-resource-card,
.learning-detail-resource-grid section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.learning-resource-card small,
.learning-detail-resource-grid span {
  color: var(--muted);
  line-height: 1.6;
}

.learning-cover-preview,
.learning-course-detail-cover {
  min-height: 132px;
  border: 1px dashed #9db7d5;
  border-radius: 8px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #f2f7ff, #f4fff9);
  color: var(--muted);
}

.learning-cover-preview img,
.learning-course-detail-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.learning-video-player {
  display: grid;
  gap: 10px;
  margin: 14px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0f172a;
}

.learning-video-player video {
  display: block;
  width: 100%;
  max-height: 460px;
  aspect-ratio: 16 / 9;
  background: #0f172a;
}

.learning-video-caption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px 12px;
  color: #e5edf8;
  font-size: 13px;
}

.learning-video-caption span {
  color: #aab7c9;
}

.learning-video-placeholder {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 220px;
  padding: 24px;
  color: #e5edf8;
  text-align: center;
}

.learning-video-placeholder span {
  color: #aab7c9;
  font-size: 13px;
}

.learning-video-player.is-empty {
  background: #f8fafc;
}

.learning-video-player.is-empty .learning-video-placeholder {
  color: var(--text);
}

.learning-video-player.is-empty .learning-video-placeholder span {
  color: var(--muted);
}

.maintenance-action-card {
  cursor: pointer;
  border-color: color-mix(in srgb, var(--primary) 18%, var(--line));
}

.maintenance-action-card:hover {
  border-color: var(--primary);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--primary) 12%, transparent);
}

.dictionary-config-form {
  display: grid;
  gap: 12px;
}

.dictionary-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}

.dictionary-config-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

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

.dictionary-config-head > div {
  display: grid;
  gap: 2px;
}

.dictionary-config-head span {
  color: var(--muted);
  font-size: 12px;
}

.employee-exam-popup-preview {
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.exam-popup-card {
  display: grid;
  gap: 12px;
  width: min(620px, 100%);
  padding: 18px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(22, 103, 194, 0.08);
}

.exam-popup-card h2,
.exam-popup-card p {
  margin: 0;
}

.public-exam-page {
  display: grid;
  gap: 14px;
  max-width: 1040px;
  margin: 0 auto;
}

.public-talent-page {
  max-width: 860px;
}

.public-talent-attempt-page {
  width: min(100%, 540px);
  max-width: 540px;
  min-height: min(860px, calc(100svh - 28px));
  align-content: start;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.public-talent-mobile-shell {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.public-talent-entry {
  display: grid;
  gap: 14px;
}

.public-talent-entry h2,
.public-talent-entry p {
  margin: 0;
}

.public-talent-entry h2 {
  font-size: clamp(24px, 5vw, 36px);
}

.public-talent-hero {
  display: grid;
  gap: 8px;
}

.public-talent-hero h2,
.public-talent-hero p {
  margin: 0;
}

.public-talent-hero p {
  color: var(--muted);
  line-height: 1.7;
}

.public-talent-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.public-talent-stepper span {
  min-height: 38px;
  display: grid;
  place-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.public-talent-stepper span.active {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background: color-mix(in srgb, var(--primary-soft) 74%, #ffffff);
  color: var(--primary-strong);
}

.public-talent-template-list {
  display: grid;
  gap: 8px;
}

.public-talent-template-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
}

.public-talent-template-list strong,
.public-talent-template-list span {
  display: block;
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.public-talent-template-list span {
  color: var(--muted);
  line-height: 1.6;
}

.public-talent-template-list em {
  justify-self: start;
  min-width: 52px;
  padding: 5px 8px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.public-talent-selected-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line));
  border-radius: 8px;
  background: linear-gradient(135deg, #f8fbff, #f0fdfa);
}

.public-talent-selected-summary > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.public-talent-selected-summary strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.25;
}

.public-talent-selected-summary small,
.public-talent-selected-summary span {
  color: var(--muted);
  line-height: 1.55;
}

.public-talent-selected-summary dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(58px, auto));
  gap: 7px;
  margin: 0;
}

.public-talent-selected-summary dt,
.public-talent-selected-summary dd {
  margin: 0;
  text-align: center;
}

.public-talent-selected-summary dt {
  color: var(--primary-strong);
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
}

.public-talent-selected-summary dd {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.public-talent-selected-summary.is-empty {
  grid-template-columns: 1fr;
  background: #f8fafc;
}

.public-talent-intake-form input,
.public-talent-intake-form select,
.public-talent-intake-form textarea {
  min-height: 48px;
  font-size: 16px;
}

.public-talent-attempt-shell {
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 4;
  min-width: 0;
  padding: 14px 16px;
}

.public-talent-attempt-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.public-talent-attempt-head h2 {
  margin: 8px 0 0;
  font-size: clamp(20px, 5vw, 26px);
}

.public-talent-attempt-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.public-talent-attempt-head strong {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  background: #fff7ed;
  color: #9a3412;
}

.public-talent-progress {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e7eb;
}

.public-talent-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #16a34a, var(--primary));
  transition: width 0.18s ease;
}

.public-talent-question-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}

.public-talent-question-meta span {
  color: var(--ink);
  font-weight: 900;
}

.public-talent-question-meta small {
  text-align: right;
}

.public-talent-question-head strong {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.public-talent-question-index {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 13px;
  font-weight: 900;
}

.breakable {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.exam-question-list {
  display: grid;
  gap: 12px;
}

.exam-question-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.public-talent-one-question-list {
  min-height: 0;
}

.public-talent-one-question-list .exam-question-card {
  display: none;
}

.public-talent-one-question-list .exam-question-card.is-active {
  display: grid;
}

.public-talent-one-question-list .public-talent-question-card {
  height: clamp(340px, calc(100svh - 244px), 560px);
  min-height: 0;
  max-height: calc(100svh - 212px);
  align-content: start;
  overflow: auto;
}

.public-talent-question-card > p {
  margin: 4px 0 12px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.85;
}

.question-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.question-head span {
  color: var(--muted);
  font-size: 13px;
}

.question-options {
  padding: 10px;
  border-radius: 6px;
  background: #f8fafc;
  color: var(--muted);
}

.public-exam-options {
  display: grid;
  gap: 8px;
}

.public-exam-option {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.public-exam-option:has(input:checked),
.public-exam-option.is-selected,
.public-exam-option[aria-pressed="true"] {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 72%, #ffffff);
  box-shadow: inset 3px 0 0 var(--primary);
}

.public-exam-option span {
  display: flex;
  gap: 8px;
  align-items: center;
  line-height: 1.5;
}

.public-exam-option em {
  color: var(--ink);
  font-style: normal;
  font-weight: 700;
}

.public-exam-option b {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  color: #ffffff;
  background: var(--primary);
  font-size: 12px;
}

.public-talent-submit-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}

.public-talent-submit-bar button {
  min-height: 48px;
}

.public-talent-submit-bar [data-public-talent-prev] {
  grid-column: 1 / -1;
}

.public-talent-submit-bar [data-public-talent-next]:not([hidden]) {
  grid-column: 1 / -1;
}

.public-talent-submit-bar [data-public-talent-submit]:not([hidden]) {
  grid-column: 1 / -1;
}

.public-talent-submit-bar [data-public-talent-return] {
  grid-column: 1 / -1;
  min-height: 40px;
  color: var(--muted);
  background: #ffffff;
}

.public-talent-submit-bar #publicTalentAssessmentResult {
  grid-column: 1 / -1;
}

.public-exam-question-result {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 28px;
}

.public-exam-question-result small {
  color: var(--muted);
}

.public-exam-score-card {
  display: grid;
  gap: 3px;
  min-width: 180px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--line));
  background: #f8fbff;
}

.public-exam-score-card strong {
  font-size: 24px;
  color: var(--ink);
}

.public-exam-score-card span,
.public-exam-score-card small {
  color: var(--muted);
}

.exam-question-card textarea {
  width: 100%;
  min-height: 90px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.talent-share-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 330px);
  gap: 16px;
  align-items: start;
}

.talent-share-copy {
  display: grid;
  gap: 10px;
}

.talent-poster-stage {
  display: grid;
  justify-items: center;
  padding: 22px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, #f8fafc, #edf7f4);
}

.talent-share-poster {
  display: grid;
  gap: 18px;
  width: min(520px, 100%);
  min-height: 720px;
  padding: 32px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  color: #0f172a;
  background:
    linear-gradient(180deg, #f8fafc 0%, #ffffff 34%, #ecfdf5 100%),
    #ffffff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
}

.talent-poster-mini .talent-share-poster {
  width: min(330px, 100%);
  min-height: auto;
  padding: 16px;
  gap: 10px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
}

.talent-poster-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.talent-poster-logo {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #ffffff;
  background: #0f766e;
  font-weight: 900;
  letter-spacing: 0;
}

.talent-poster-brand > div:not(.talent-poster-logo) {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.talent-poster-brand strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.talent-poster-brand span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.talent-poster-brand em {
  margin-left: auto;
  padding: 5px 9px;
  border: 1px solid rgba(15, 118, 110, 0.22);
  border-radius: 999px;
  color: #0f766e;
  background: rgba(209, 250, 229, 0.86);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.talent-poster-hero {
  display: grid;
  gap: 10px;
  padding: 22px 0 4px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  text-align: center;
  justify-items: center;
}

.talent-poster-hero > span {
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  color: #1d4ed8;
  background: rgba(219, 234, 254, 0.9);
  font-size: 12px;
  font-weight: 900;
}

.talent-poster-hero h3 {
  margin: 0;
  max-width: 10em;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: 0;
}

.talent-poster-role {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  text-align: center;
}

.talent-poster-role small {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.talent-poster-role strong {
  color: #0f172a;
  font-size: 22px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.talent-poster-qr-card {
  display: grid;
  gap: 14px;
  justify-items: center;
  padding: 24px 18px 20px;
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  text-align: center;
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.1);
}

.talent-poster-qr-card strong {
  color: #0f172a;
  font-size: 24px;
  letter-spacing: 0;
}

.talent-poster-qr {
  display: grid;
  justify-items: center;
}

.talent-qr-svg {
  width: 280px;
  height: 280px;
  border: 16px solid #ffffff;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.18);
}

.talent-qr-fallback {
  display: grid;
  place-items: center;
  width: 280px;
  height: 280px;
  padding: 12px;
  border: 1px dashed #94a3b8;
  border-radius: 8px;
  background: #ffffff;
  text-align: center;
}

.talent-poster-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.talent-poster-proof span {
  display: grid;
  min-height: 42px;
  place-items: center;
  padding: 8px;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 8px;
  background: rgba(240, 253, 250, 0.72);
  color: #0f766e;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.talent-poster-footer {
  display: grid;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.09);
  text-align: center;
}

.talent-poster-footer span {
  color: #334155;
  font-size: 12px;
  line-height: 1.5;
}

.talent-poster-modal {
  display: grid;
  gap: 12px;
}

.talent-poster-backdrop .modal {
  max-width: min(760px, calc(100vw - 28px));
}

.talent-poster-backdrop .modal-head {
  padding-bottom: 10px;
}

.talent-poster-backdrop #modalEyebrow:empty {
  display: none;
}

.talent-poster-actions {
  justify-content: center;
}

.talent-poster-mini .talent-poster-logo {
  width: 34px;
  height: 34px;
  font-size: 12px;
}

.talent-poster-mini .talent-poster-brand em {
  display: none;
}

.talent-poster-mini .talent-poster-hero {
  padding-top: 10px;
}

.talent-poster-mini .talent-poster-hero h3 {
  font-size: 24px;
}

.talent-poster-mini .talent-poster-proof {
  grid-template-columns: 1fr;
}

.talent-poster-mini .talent-poster-proof,
.talent-poster-mini .talent-poster-footer span {
  display: none;
}

.talent-poster-mini .talent-qr-svg,
.talent-poster-mini .talent-qr-fallback {
  width: 154px;
  height: 154px;
  border-width: 10px;
}

@media (max-width: 640px) {
  .public-exam-page {
    gap: 10px;
    max-width: none;
    margin: 0;
  }

  .public-talent-mobile-shell {
    padding: 14px;
    box-shadow: none;
  }

  .public-talent-attempt-page {
    width: 100%;
    min-height: calc(100dvh - 98px);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 8px;
  }

  .public-talent-attempt-shell {
    gap: 8px;
    padding: 12px;
    top: 0;
  }

  .public-talent-stepper {
    gap: 6px;
  }

  .public-talent-stepper span {
    min-height: 34px;
    padding: 7px 5px;
    font-size: 12px;
  }

  .public-talent-template-list > div {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 10px;
  }

  .public-talent-template-list span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .public-talent-template-list em {
    grid-row: auto;
    justify-self: start;
  }

  .public-talent-selected-summary {
    grid-template-columns: 1fr;
  }

  .public-talent-selected-summary dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-talent-attempt-head {
    display: grid;
    gap: 6px;
  }

  .public-talent-attempt-head strong {
    justify-self: start;
  }

  .public-talent-attempt-head h2 {
    font-size: 20px;
  }

  .public-talent-question-meta {
    display: grid;
    gap: 2px;
  }

  .public-talent-question-meta small {
    text-align: left;
  }

  .public-talent-one-question-list {
    min-height: 0;
  }

  .exam-question-card {
    padding: 12px;
  }

  .public-talent-one-question-list .public-talent-question-card {
    height: clamp(300px, calc(100dvh - 324px), 540px);
    min-height: 0;
    max-height: none;
    padding: 14px;
  }

  .public-talent-question-card > p {
    font-size: 16px;
    line-height: 1.75;
  }

  .question-head {
    display: grid;
  }

  .public-talent-scale {
    grid-template-columns: 1fr;
  }

  .public-talent-sticky-action {
    position: sticky;
    bottom: 8px;
    z-index: 6;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.08);
  }

  .public-talent-sticky-action button {
    min-height: 46px;
  }

  .talent-share-workbench,
  .talent-poster-proof {
    grid-template-columns: 1fr;
  }

  .talent-share-workbench {
    display: grid;
  }

  .talent-poster-qr-card {
    justify-self: center;
  }

  .talent-share-poster {
    min-height: auto;
    padding: 18px;
  }

  .talent-poster-hero h3 {
    font-size: 28px;
  }
}

@media (max-width: 380px) {
  .public-talent-mobile-shell {
    padding: 12px;
  }

  .public-talent-attempt-head h2 {
    font-size: 18px;
  }

  .public-talent-question-card > p {
    font-size: 15px;
    line-height: 1.65;
  }

  .public-exam-option {
    min-height: 44px;
    padding: 8px 10px;
  }

  .public-talent-submit-bar button {
    min-height: 44px;
  }
}

@media (max-width: 640px) and (max-height: 700px) {
  .public-talent-attempt-shell {
    gap: 6px;
    padding: 10px 12px;
  }

  .public-talent-attempt-head h2 {
    margin-top: 4px;
    font-size: 18px;
  }

  .public-talent-attempt-head p {
    display: none;
  }

  .public-talent-progress {
    height: 7px;
  }

  .public-talent-question-meta {
    font-size: 12px;
  }

  .public-talent-one-question-list .public-talent-question-card {
    height: clamp(240px, calc(100dvh - 272px), 420px);
    min-height: 0;
    padding: 12px;
  }

  .public-talent-question-card > p {
    margin-bottom: 8px;
    line-height: 1.55;
  }

  .public-talent-sticky-action {
    bottom: 4px;
    padding: 8px;
  }
}

@media (min-width: 641px) {
  .public-talent-scale {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .public-talent-scale .public-exam-option {
    justify-content: center;
    min-height: 82px;
    padding: 10px 8px;
    text-align: center;
  }

  .public-talent-scale .public-exam-option span {
    flex-direction: column;
    gap: 6px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .public-talent-attempt-page {
    width: 100%;
    max-width: 900px;
    min-height: calc(100dvh - 92px);
    grid-template-columns: minmax(220px, 0.78fr) minmax(0, 1.22fr);
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;
  }

  .public-talent-attempt-shell {
    grid-row: 1 / 3;
    position: sticky;
    top: 8px;
    align-self: start;
    max-height: calc(100dvh - 112px);
    overflow: auto;
  }

  .public-talent-one-question-list {
    min-height: 0;
  }

  .public-talent-one-question-list .public-talent-question-card {
    height: calc(100dvh - 174px);
    min-height: 220px;
  }

  .public-talent-submit-bar {
    grid-column: 2;
  }
}

@media print {
  body.print-talent-poster > *:not(.modal-backdrop) {
    display: none !important;
  }

  body.print-talent-poster .modal-backdrop {
    position: static !important;
    display: block !important;
    background: #ffffff !important;
  }

  body.print-talent-poster .modal {
    box-shadow: none !important;
    border: 0 !important;
  }

  body.print-talent-poster .modal-head,
  body.print-talent-poster .modal-close,
  body.print-talent-poster .talent-poster-modal > .notice,
  body.print-talent-poster .talent-poster-modal > .row-actions {
    display: none !important;
  }

  body.print-talent-poster .talent-poster-stage {
    background: #ffffff !important;
    padding: 0 !important;
  }

  body.print-talent-poster .talent-share-poster {
    width: 190mm !important;
    min-height: 270mm !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
}

.task-center-page {
  display: grid;
  gap: 14px;
}

.task-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 360px);
  gap: 18px;
  align-items: center;
  padding: 22px;
  background:
    radial-gradient(circle at 90% 18%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34%),
    linear-gradient(135deg, var(--panel) 0%, var(--primary-soft) 100%);
}

.task-hero span {
  display: inline-flex;
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--primary-strong);
  background: var(--primary-soft);
  font-weight: 800;
  font-size: 13px;
}

.task-hero h2 {
  margin: 8px 0;
  font-size: 30px;
}

.task-hero p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.task-hero-flow {
  display: grid;
  gap: 8px;
}

.task-hero-flow b {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 82%, var(--accent-soft));
  box-shadow: var(--shadow-soft);
}

.task-metrics {
  margin: 0;
}

.task-module-tabs {
  align-items: center;
}

.task-module-tabs .task-new-inline {
  color: #fff;
  border-color: #162234;
  background: #162234;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}

.task-module-tabs .task-new-inline:hover {
  border-color: #0f172a;
  background: #0f172a;
}

.task-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.task-board-col {
  min-width: 220px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.task-board-col h3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 17px;
}

.task-board-col h3 span {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  min-height: 26px;
  border-radius: 999px;
  color: #fff;
  background: var(--primary);
  font-size: 13px;
}

.task-mini-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.task-mini-card strong {
  line-height: 1.35;
}

.task-mini-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.task-mini-card small {
  color: var(--muted);
}

.task-detail ul {
  margin: 12px 0;
  padding-left: 20px;
  line-height: 1.8;
}

.task-config-form {
  display: grid;
  gap: 14px;
}

.task-config-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 14px;
}

.task-config-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.task-config-list {
  display: grid;
  gap: 8px;
}

.task-config-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.task-config-option input {
  width: 100%;
}

.points-mall-page {
  display: grid;
  gap: 14px;
}

.points-commerce-page {
  min-width: 0;
}

.points-employee-shop {
  min-width: 0;
}

.points-member-strip {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
  padding: 14px;
  min-width: 0;
}

.points-member-wallet,
.points-member-favorites {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
}

.points-member-wallet span,
.points-member-wallet small,
.points-member-favorites span,
.points-member-favorites small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.points-member-wallet strong {
  color: var(--text);
  font-size: 34px;
  line-height: 1;
}

.points-member-favorites strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.points-member-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.points-gift-shelf {
  display: grid;
  gap: 16px;
  padding: 16px;
  min-width: 0;
}

.points-gift-shelf-head {
  align-items: center;
}

.points-gift-shelf-head h2 {
  margin: 0;
}

.points-gift-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.points-gift-grid .points-product-card {
  min-height: 0;
  box-shadow: none;
}

.points-gift-grid .points-product-media,
.points-gift-grid .points-video-placeholder {
  min-height: 132px;
}

.points-gift-grid .points-product-art {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  font-size: 30px;
}

.points-gift-grid .points-product-body {
  gap: 8px;
  padding: 12px;
}

.points-gift-grid .points-product-meta {
  gap: 6px;
}

.points-gift-grid .points-product-meta div {
  padding: 7px;
}

.points-product-card.is-sortable {
  cursor: grab;
}

.points-product-card.is-sortable:active {
  cursor: grabbing;
}

.points-product-card.is-dragging {
  opacity: 0.55;
  transform: scale(0.99);
}

.points-product-card.is-drop-target {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.points-drag-handle {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
  cursor: grab;
}

.points-commerce-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.85fr);
  gap: 16px;
  align-items: stretch;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
  border-radius: 8px;
  background: linear-gradient(110deg, #ffffff 0%, #f7fbff 54%, #effaf6 100%);
}

.points-commerce-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.points-commerce-metric {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.points-commerce-metric span,
.points-commerce-metric small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.points-commerce-metric strong {
  color: var(--text);
  font-size: 24px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.points-commerce-layout {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
}

.points-ops-panel {
  position: sticky;
  top: 12px;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
}

.points-ops-panel .points-wallet-card,
.points-ops-card {
  display: grid;
  gap: 7px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
}

.points-ops-panel .points-wallet-card span,
.points-ops-panel .points-wallet-card small,
.points-ops-card span,
.points-ops-card small,
.points-ops-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.points-ops-panel .points-wallet-card strong,
.points-ops-card strong {
  color: var(--text);
  font-size: 28px;
  line-height: 1.1;
}

.points-shop-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
  align-items: stretch;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(22, 103, 194, 0.95), rgba(15, 118, 110, 0.88)),
    #1667c2;
  color: #fff;
}

.points-shop-copy {
  display: grid;
  align-content: center;
  gap: 10px;
  min-width: 0;
}

.points-shop-copy span {
  width: fit-content;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-weight: 800;
}

.points-shop-copy h2 {
  margin: 0;
  font-size: 34px;
  letter-spacing: 0;
  color: var(--text);
}

.points-shop-copy p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.points-wallet-card {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.14);
}

.points-wallet-card strong {
  font-size: 42px;
  line-height: 1;
}

.points-wallet-card span,
.points-wallet-card small {
  color: rgba(255, 255, 255, 0.86);
}

.points-shop-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px;
  min-width: 0;
}

.points-shop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.points-shelf-search {
  display: grid;
  grid-template-columns: auto minmax(180px, 320px);
  gap: 8px;
  align-items: center;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.points-shelf-search input {
  width: 100%;
}

.points-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 18px;
}

.points-hero strong {
  display: block;
  margin: 6px 0;
  font-size: 42px;
  line-height: 1;
}

.points-hero p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
}

.points-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.points-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  min-width: 0;
}

.points-product-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  overflow: hidden;
  min-height: 360px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.points-product-card[hidden] {
  display: none;
}

.points-product-media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 172px;
  overflow: hidden;
  background: var(--panel-soft);
}

.points-product-media.compact {
  min-height: 120px;
}

.points-product-media img,
.points-product-media video {
  width: 100%;
  height: 100%;
  min-height: 172px;
  object-fit: cover;
}

.points-product-media.compact img,
.points-product-media.compact video {
  min-height: 120px;
}

.points-product-media .badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

.points-media-pills {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.points-media-pills span,
.points-material-row span {
  padding: 4px 7px;
  border: 1px solid #dbe7f5;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.points-media-pills span.ok,
.points-material-row span.ok {
  border-color: #a7f3d0;
  color: #047857;
  background: #ecfdf5;
}

.points-video-placeholder {
  display: grid;
  place-items: center;
  gap: 5px;
  width: 100%;
  height: 100%;
  min-height: 172px;
  color: #155e75;
  background: repeating-linear-gradient(135deg, #e0f2fe, #e0f2fe 10px, #f0fdfa 10px, #f0fdfa 20px);
  text-align: center;
}

.points-video-placeholder strong {
  font-size: 30px;
}

.points-video-placeholder span {
  max-width: 80%;
  color: #475569;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.points-product-art {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 22px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 34px;
  font-weight: 900;
}

.points-product-art.movie {
  background: #fff7ed;
  color: #c2410c;
}

.points-product-art.lunch,
.points-product-art.coffee {
  background: #f0fdf4;
  color: #047857;
}

.points-product-art.taxi {
  background: #fef9c3;
  color: #a16207;
}

.points-product-art.dance {
  background: #f5f3ff;
  color: #7c3aed;
}

.points-product-art.suitcase {
  background: #f1f5f9;
  color: #334155;
}

.points-product-body {
  display: grid;
  gap: 10px;
  padding: 14px;
  min-width: 0;
}

.points-product-body > strong {
  font-size: 18px;
}

.points-product-type {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.points-product-head,
.points-product-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
}

.points-product-head strong,
.points-product-head span {
  display: block;
}

.points-product-head strong {
  overflow-wrap: anywhere;
}

.points-product-sku,
.points-material-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.points-product-sku span {
  padding: 4px 7px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.points-product-head span,
.points-product-foot small,
.points-product-card p {
  color: var(--muted);
}

.points-product-card p {
  margin: 0;
  line-height: 1.5;
}

.points-product-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.points-product-meta div {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  min-width: 0;
}

.points-product-foot {
  align-items: end;
}

.points-product-foot .row-actions {
  justify-content: flex-end;
  min-width: 0;
}

.points-product-foot .row-actions button {
  min-width: 70px;
}

.points-admin-item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
}

.points-mini-media {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--primary);
  font-weight: 900;
  overflow: hidden;
}

.points-mini-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.points-mini-media.video {
  color: #155e75;
  background: #e0f2fe;
  font-size: 12px;
}

.points-media-maintenance {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.points-media-preview {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.points-media-maintenance strong,
.points-media-maintenance small {
  display: block;
}

.points-media-maintenance small {
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.55;
}

.points-confirm {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
  margin-bottom: 12px;
}

.points-confirm .points-product-art {
  width: 72px;
  height: 72px;
  font-size: 28px;
}

.points-confirm p {
  margin: 6px 0 0;
}

.points-product-meta b,
.points-product-meta span {
  display: block;
  word-break: keep-all;
}

.points-product-meta span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 900px) {
  .task-hero {
    grid-template-columns: 1fr;
  }

  .task-board {
    grid-template-columns: repeat(4, 82vw);
  }

  .points-shop-hero,
  .points-commerce-hero,
  .points-commerce-layout,
  .points-member-strip,
  .points-media-maintenance,
  .points-shop-toolbar {
    grid-template-columns: 1fr;
  }

  .points-shop-toolbar {
    display: grid;
  }

  .points-shop-actions {
    justify-content: flex-start;
  }

  .points-member-actions {
    justify-content: flex-start;
  }

  .points-ops-panel {
    position: static;
  }
}

@media (max-width: 560px) {
  .points-commerce-metrics,
  .points-product-meta,
  .points-shelf-search {
    grid-template-columns: 1fr;
  }

  .points-product-grid {
    grid-template-columns: 1fr;
  }
}

.dictionary-config-card table {
  min-width: 420px;
}

.dictionary-config-card input {
  width: 100%;
}

.card-title-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.summary-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
  gap: 7px;
}

.summary-grid.compact > div {
  padding: 8px;
  min-height: 64px;
}

.summary-grid.compact strong {
  font-size: 16px;
}

.detail-list.mini {
  gap: 6px;
}

.detail-list.mini div {
  padding: 7px 0;
}

.culture-hero {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1.1fr);
  gap: 18px;
  align-items: stretch;
}

.culture-hero-main {
  display: grid;
  gap: 12px;
  align-content: start;
}

.culture-hero-main h2 {
  margin: 0;
}

.culture-statement {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.culture-statement > div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.culture-statement p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.value-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.value-tags span {
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef6ff;
  color: var(--primary);
  border: 1px solid #bfdbfe;
  font-weight: 700;
  font-size: 13px;
}

.org-chart {
  display: grid;
  gap: 12px;
  align-content: start;
}

.org-root {
  justify-self: center;
  padding: 10px 18px;
  border-radius: 8px;
  background: #10233d;
  color: #fff;
  font-weight: 800;
}

.org-branches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.org-node {
  display: grid;
  gap: 4px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.org-node span,
.org-node small,
.newcomer-step span,
.newcomer-step small,
.knowledge-list-card span {
  color: var(--muted);
}

.newcomer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.newcomer-step {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 12px 12px 12px 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.newcomer-step em {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
  font-style: normal;
  font-weight: 800;
}

.knowledge-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.knowledge-list-card {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(240px, auto) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.knowledge-list-card strong,
.knowledge-list-card span {
  display: block;
}

.knowledge-list-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.file-center-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 14px;
}

.file-category-nav {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.file-category-nav .nav-title {
  font-weight: 800;
  color: var(--text);
  margin-bottom: 2px;
}

.file-category-nav button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 10px;
  border-radius: 8px;
  text-align: left;
  background: #fff;
}

.file-category-nav button.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.file-category-nav button span {
  color: inherit;
  opacity: 0.82;
  font-size: 12px;
  white-space: nowrap;
}

.file-main-area {
  display: grid;
  gap: 12px;
}

.file-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.file-toolbar > div:first-child {
  display: grid;
  gap: 7px;
}

.file-maintain-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.file-readonly-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.file-readonly-metrics span {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
}

.file-readonly-metrics b {
  color: var(--text);
  font-size: 16px;
}

.file-help-text {
  padding: 10px 12px;
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  background: #eef6ff;
  color: #334155;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .file-center-layout,
  .file-toolbar {
    grid-template-columns: 1fr;
  }

  .file-maintain-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 980px) {
  .culture-hero,
  .knowledge-list-card {
    grid-template-columns: 1fr;
  }

  .org-branches {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .toolbar-grid {
    grid-template-columns: 1fr;
  }
}

.split {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.2fr);
  overflow: hidden;
}

.split > div {
  padding: 16px;
}

.split > div + div {
  border-left: 1px solid var(--line);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.form-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
}

.form-grid label small {
  color: #64748b;
  font-size: 12px;
}

.form-grid .wide {
  grid-column: 1 / -1;
}

.menu-label-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.menu-label-grid label {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.menu-label-grid small {
  color: var(--muted);
}

button.small {
  padding: 7px 10px;
  font-size: 13px;
  line-height: 1.1;
}

.master-config-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fbff;
}

.master-config-table table {
  min-width: 680px;
}

.master-config-table th,
.master-config-table td {
  vertical-align: middle;
}

.master-config-table input {
  width: 100%;
  min-width: 92px;
}

.master-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.master-list-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

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

.master-list-rows {
  display: grid;
  gap: 8px;
}

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

@media (max-width: 900px) {
  .master-list-grid {
    grid-template-columns: 1fr;
  }
}

.cost-config-table {
  display: grid;
  gap: 10px;
}

.cost-config-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(180px, 1.2fr) minmax(210px, 1.2fr) 110px 72px;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
}

.asset-template-row {
  grid-template-columns: minmax(150px, 1.4fr) minmax(130px, 1fr) minmax(110px, 0.8fr) minmax(90px, 0.7fr) minmax(90px, 0.7fr) 72px;
}

.asset-simple-row {
  grid-template-columns: minmax(220px, 1fr) 72px;
}

.cost-switch {
  align-items: start;
}

.cost-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cost-switch span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #e2e8f0;
  color: #475569;
  font-weight: 800;
  user-select: none;
}

.cost-switch input:checked + span {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.action-card {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

button.action-card {
  display: grid;
  gap: 8px;
  text-align: left;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
}

button.action-card b {
  font-size: 16px;
}

button.action-card span {
  color: var(--muted);
  line-height: 1.5;
}

.action-card:hover {
  border-color: var(--primary);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}

.action-card button {
  margin-top: 10px;
  width: 100%;
}

.procurement-tabs {
  margin-top: 14px;
}

.procurement-maintenance-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px;
  margin: 14px 0;
  border: 1px solid color-mix(in srgb, var(--line) 82%, #ffffff);
  border-radius: 8px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 58%, #ffffff), color-mix(in srgb, var(--accent-soft) 46%, #ffffff));
  box-shadow: var(--shadow-soft);
}

.procurement-maintenance-workbench.price {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 58%, #ffffff), color-mix(in srgb, #fff7ed 48%, #ffffff));
}

.procurement-workbench-copy {
  display: grid;
  gap: 6px;
}

.procurement-workbench-copy span {
  color: var(--primary);
  font-weight: 800;
  font-size: 13px;
}

.procurement-workbench-copy h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
}

.procurement-workbench-copy p {
  margin: 0;
  color: var(--muted);
}

.procurement-workbench-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.procurement-source-metrics {
  margin-bottom: 14px;
}

.procurement-card-grid,
.procurement-price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.procurement-supplier-card,
.procurement-price-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, #ffffff);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--panel-soft) 62%, #ffffff));
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.045);
}

.procurement-card-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.procurement-card-head div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.procurement-card-head span {
  color: var(--muted);
  font-size: 12px;
}

.procurement-card-head strong {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.3;
  word-break: break-word;
}

.procurement-supplier-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.procurement-supplier-tags span {
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, #ffffff);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
}

.procurement-supplier-meta,
.procurement-price-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.procurement-price-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.procurement-supplier-meta div,
.procurement-price-metrics div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-soft) 84%, #ffffff);
}

.procurement-supplier-meta span,
.procurement-price-metrics span {
  color: var(--muted);
  font-size: 12px;
}

.procurement-supplier-meta b,
.procurement-price-metrics b {
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.procurement-supplier-foot,
.procurement-price-foot {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 13px;
}

.procurement-price-card {
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: stretch;
}

.procurement-price-media {
  display: grid;
  place-items: center;
  width: 76px;
  min-height: 96px;
  overflow: hidden;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary-soft) 62%, #ffffff);
}

.procurement-price-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.procurement-price-media span {
  color: var(--primary);
  font-size: 26px;
  font-weight: 900;
}

.procurement-price-body {
  display: grid;
  gap: 10px;
  min-width: 0;
}

@media (max-width: 980px) {
  .procurement-maintenance-workbench {
    grid-template-columns: 1fr;
  }

  .procurement-workbench-actions {
    justify-content: flex-start;
  }

  .procurement-supplier-meta,
  .procurement-price-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .procurement-maintenance-workbench {
    padding: 14px;
  }

  .procurement-workbench-copy h2 {
    font-size: 20px;
  }

  .procurement-price-card {
    grid-template-columns: 1fr;
  }

  .procurement-price-media {
    width: 100%;
    height: 120px;
  }

  .procurement-supplier-foot,
  .procurement-price-foot {
    align-items: stretch;
    flex-direction: column;
  }
}

.finance-command-center {
  display: grid;
  grid-template-columns: minmax(320px, 1.1fr) minmax(360px, 1fr);
  gap: 18px;
  align-items: stretch;
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.96), rgba(239, 246, 255, 0.96));
}

.finance-command-copy {
  display: grid;
  align-content: center;
  gap: 12px;
  min-height: 220px;
}

.finance-command-copy h2 {
  margin: 0;
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: 0;
}

.finance-command-copy p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
}

.finance-command-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.finance-command-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: center;
}

.finance-execution-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.finance-execution-card {
  display: grid;
  gap: 8px;
  min-height: 128px;
  padding: 18px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.finance-execution-card b {
  font-size: 18px;
}

.finance-execution-card span,
.finance-execution-card small {
  color: var(--muted);
  line-height: 1.5;
}

.finance-execution-card small {
  align-self: end;
  display: inline-flex;
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: var(--primary);
  font-weight: 700;
}

.finance-execution-card:hover {
  border-color: var(--primary);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
}

.finance-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 10px;
}

.finance-flow div {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--soft);
}

.finance-flow b {
  font-size: 16px;
}

.finance-flow span {
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 920px) {
  .finance-command-center,
  .finance-flow {
    grid-template-columns: 1fr;
  }

  .finance-command-copy h2 {
    font-size: 26px;
  }
}

.hr-duty-grid .card {
  display: grid;
  gap: 8px;
  align-content: start;
}

.hr-duty-grid .card small {
  color: var(--muted);
}

.hr-process {
  display: grid;
  grid-template-columns: repeat(6, minmax(110px, 1fr));
  gap: 10px;
}

.hr-process div {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 14px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
  text-align: center;
}

.hr-process span {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-weight: 900;
}

.hr-linked-panel {
  margin-bottom: 14px;
}

.talent-workspace {
  display: grid;
  gap: 10px;
}

.talent-workspace .hr-linked-panel {
  margin-bottom: 0;
}

.talent-workspace .panel-head {
  min-height: 46px;
  padding: 11px 14px 10px 17px;
}

.talent-workspace .panel-head::before {
  top: 10px;
  bottom: 10px;
  width: 4px;
}

.talent-workspace .panel-head h2 {
  font-size: 18px;
}

.talent-workspace .panel-head .muted {
  max-width: 58%;
  padding: 3px 8px;
  font-size: 12px;
  white-space: normal;
}

.talent-workspace .form-grid.compact {
  padding: 12px;
}

.talent-control-deck {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, #ffffff);
  border-radius: 8px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent-soft) 46%, transparent), transparent 30%),
    linear-gradient(135deg, #fffefd, #f8fbff 62%, #f2fbf7);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

.talent-control-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.talent-control-head > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.talent-control-head span {
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, #ffffff);
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.talent-control-head h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.22;
  letter-spacing: 0;
}

.talent-control-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.talent-control-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.talent-control-actions .primary.subtle {
  background: linear-gradient(135deg, #0f766e, #0ea5a4);
  box-shadow: 0 12px 24px rgba(15, 118, 110, 0.18);
}

.talent-workspace.is-library-tab .talent-control-deck {
  gap: 8px;
  padding: 10px;
}

.talent-workspace.is-library-tab .talent-control-head {
  gap: 10px;
}

.talent-workspace.is-library-tab .talent-control-head h2 {
  font-size: 20px;
}

.talent-workspace.is-library-tab .talent-control-head p {
  display: none;
}

.talent-workspace.is-library-tab .talent-compact-metrics > div {
  padding: 7px 9px;
}

.talent-workspace.is-library-tab .talent-compact-metrics strong {
  font-size: 16px;
}

.talent-control-bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: stretch;
}

.talent-compact-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(118px, 1fr));
  gap: 10px;
  min-width: 0;
}

.talent-compact-metrics > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--line) 90%, #ffffff);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.talent-compact-metrics span,
.talent-compact-metrics small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.talent-compact-metrics strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.15;
}

.talent-results-hub {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.talent-results-headline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 8px;
  background: linear-gradient(135deg, #f8fbff, #eefbf7);
}

.talent-results-headline div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.talent-results-headline b {
  color: var(--text);
  font-size: 16px;
}

.talent-results-headline span {
  color: var(--muted);
  line-height: 1.45;
}

.talent-result-card {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(130px, auto) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, #ffffff);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.talent-result-card.active {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background: color-mix(in srgb, var(--primary) 6%, #ffffff);
}

.talent-result-card > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.talent-result-card span,
.talent-result-card small {
  min-width: 0;
  color: var(--muted);
  line-height: 1.4;
}

.talent-result-card strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.talent-result-score {
  display: grid;
  gap: 6px;
  justify-items: start;
}

.talent-result-score b {
  color: var(--primary);
  font-size: 18px;
}

.talent-task-records {
  border: 1px solid color-mix(in srgb, var(--line) 88%, #ffffff);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.talent-task-records summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
}

.talent-task-records summary::-webkit-details-marker {
  display: none;
}

.talent-task-records summary::after {
  content: "展开";
  flex: 0 0 auto;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: 999px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
}

.talent-task-records[open] summary::after {
  content: "收起";
}

.talent-task-records summary span {
  color: var(--text);
  font-weight: 900;
}

.talent-task-records summary small {
  color: var(--muted);
  line-height: 1.45;
}

.talent-task-records > .hr-panel {
  margin: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  box-shadow: none;
}

.talent-analysis-report {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, #ffffff);
  border-radius: 8px;
  background:
    radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.08), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f8fbff 56%, #f2fff9 100%);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.talent-analysis-report[data-report-kind="screening"] {
  background:
    radial-gradient(circle at 0% 0%, rgba(20, 184, 166, 0.12), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f7fffc 58%, #f7fbff 100%);
}

.modal-backdrop.talent-report-backdrop {
  padding: 16px;
  background: rgba(10, 18, 31, 0.64);
}

.modal-backdrop.talent-report-backdrop .modal {
  width: min(1240px, calc(100vw - 32px));
  max-height: min(92vh, 980px);
}

.modal-backdrop.talent-report-backdrop #modalBody {
  display: grid;
  gap: 14px;
  padding: 14px;
  background: #f8fbff;
}

.talent-report-modal-body > .hr-panel {
  border: 0;
  box-shadow: none;
}

.talent-report-modal-body > .hr-panel > .panel-head {
  display: none;
}

.talent-report-modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, #ffffff);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 -12px 30px rgba(15, 23, 42, 0.08);
}

.talent-analysis-version-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
}

.talent-analysis-version-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: #075985;
  background: #e0f2fe;
  font-weight: 900;
}

.talent-analysis-version-strip b {
  min-width: 0;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.talent-analysis-version-strip small {
  color: var(--muted);
  font-weight: 800;
}

.talent-analysis-hero {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.talent-analysis-person,
.talent-analysis-summary-card,
.talent-analysis-role-section,
.talent-analysis-insight-grid > div,
.talent-analysis-verdict > div {
  border: 1px solid color-mix(in srgb, var(--line) 88%, #ffffff);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
}

.talent-analysis-person {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
}

.talent-analysis-brand {
  display: grid;
  gap: 3px;
}

.talent-analysis-brand strong {
  color: #2563eb;
  font-size: 24px;
  line-height: 1;
}

.talent-analysis-brand span,
.talent-analysis-role-card span,
.talent-analysis-role-card small {
  color: var(--muted);
  line-height: 1.45;
}

.talent-analysis-profile-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 8px;
  color: #ffffff;
  background: linear-gradient(135deg, #172554, #1d4ed8 58%, #7c3aed);
}

.talent-analysis-avatar {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 22px;
  font-weight: 900;
}

.talent-analysis-profile-card h3,
.talent-analysis-profile-card p {
  margin: 0;
}

.talent-analysis-profile-card h3 {
  font-size: 20px;
  line-height: 1.25;
}

.talent-analysis-profile-card p {
  color: rgba(255, 255, 255, 0.84);
  line-height: 1.45;
}

.talent-analysis-role-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
  border-radius: 8px;
  background: linear-gradient(135deg, #eef6ff, #ffffff);
}

.talent-analysis-role-card strong {
  color: var(--text);
  font-size: 22px;
  line-height: 1.24;
}

.talent-analysis-summary-card {
  display: grid;
  gap: 18px;
  padding: 18px;
}

.talent-analysis-summary-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.talent-analysis-overall-score {
  display: grid;
  width: 116px;
  height: 116px;
  place-items: center;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, #1d4ed8, #38bdf8);
  box-shadow: 0 16px 28px rgba(37, 99, 235, 0.24);
  font-size: 34px;
  font-weight: 900;
}

.talent-analysis-summary-top span {
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
}

.talent-analysis-summary-top span b {
  color: #2563eb;
}

.talent-analysis-summary-top p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.talent-analysis-summary-top em {
  display: block;
  margin-top: 10px;
  color: #0f766e;
  font-style: normal;
  font-weight: 800;
  line-height: 1.45;
}

.talent-analysis-standard-line {
  display: grid;
  gap: 5px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, #14b8a6 24%, var(--line));
  border-radius: 8px;
  background: #f0fdfa;
}

.talent-analysis-standard-line b {
  color: #0f766e;
  font-size: 13px;
}

.talent-analysis-standard-line span {
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.talent-analysis-summary-top time {
  align-self: start;
  color: var(--muted);
  font-weight: 800;
}

.talent-analysis-rings {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 14px;
}

.talent-analysis-ring-card {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
  text-align: center;
}

.talent-analysis-ring {
  display: grid;
  width: 92px;
  height: 92px;
  place-items: center;
  border-radius: 999px;
  background: conic-gradient(var(--ring-color) var(--score), #edf2f7 0);
}

.talent-analysis-ring::before {
  content: "";
  grid-area: 1 / 1;
  width: 68px;
  height: 68px;
  border-radius: 999px;
  background: #ffffff;
}

.talent-analysis-ring span {
  z-index: 1;
  grid-area: 1 / 1;
  color: var(--text);
  font-weight: 900;
}

.talent-analysis-ring-card strong {
  color: var(--text);
}

.talent-analysis-ring-card small {
  color: var(--primary);
  font-weight: 800;
}

.talent-analysis-score-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(118px, 1fr));
  gap: 10px;
}

.talent-analysis-report[data-report-kind="screening"] .talent-analysis-score-grid {
  grid-template-columns: repeat(4, minmax(130px, 1fr));
}

.talent-score-tile {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  padding: 16px 10px;
  border: 1px solid color-mix(in srgb, var(--tile-color) 18%, var(--line));
  border-radius: 8px;
  background: #ffffff;
}

.talent-score-tile strong {
  color: var(--tile-color);
  font-size: 34px;
  line-height: 1;
}

.talent-score-tile span,
.talent-score-tile small {
  color: var(--text);
  text-align: center;
  line-height: 1.35;
}

.talent-score-tile small {
  color: var(--muted);
}

.talent-analysis-role-section {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.talent-analysis-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.85fr);
  gap: 14px;
  align-items: end;
}

.talent-analysis-section-head span {
  color: #2563eb;
  font-weight: 900;
}

.talent-analysis-section-head h3,
.talent-analysis-section-head p {
  margin: 0;
}

.talent-analysis-section-head h3 {
  color: var(--text);
  font-size: 22px;
}

.talent-analysis-section-head p {
  color: var(--muted);
  line-height: 1.5;
}

.talent-role-chart {
  display: grid;
  grid-template-columns: repeat(8, minmax(60px, 1fr));
  gap: 12px;
  align-items: end;
  min-height: 250px;
  padding: 18px 12px 8px;
  border-top: 1px solid var(--line);
  background:
    linear-gradient(to top, transparent 0 19%, rgba(148, 163, 184, 0.24) 20%, transparent 21% 39%, rgba(148, 163, 184, 0.24) 40%, transparent 41% 59%, rgba(148, 163, 184, 0.24) 60%, transparent 61% 79%, rgba(148, 163, 184, 0.24) 80%, transparent 81%);
}

.talent-role-bar {
  display: grid;
  grid-template-rows: auto minmax(160px, 1fr) auto;
  gap: 8px;
  justify-items: center;
  min-width: 0;
  height: 220px;
}

.talent-role-bar b {
  color: #334155;
  font-size: 16px;
}

.talent-role-bar i {
  align-self: end;
  width: min(42px, 72%);
  height: max(14px, var(--score));
  border-radius: 8px 8px 3px 3px;
  background: var(--bar-color);
  box-shadow: 0 10px 18px color-mix(in srgb, var(--bar-color) 28%, transparent);
}

.talent-role-bar span {
  min-height: 42px;
  color: var(--text);
  text-align: center;
  line-height: 1.35;
}

.talent-analysis-dimension-chart {
  display: grid;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.talent-dimension-bar {
  display: grid;
  grid-template-columns: minmax(88px, 0.34fr) minmax(160px, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.talent-dimension-bar span {
  color: var(--text);
  font-weight: 800;
  line-height: 1.35;
}

.talent-dimension-bar i {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.talent-dimension-bar i b {
  display: block;
  width: var(--score);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #14b8a6);
}

.talent-dimension-bar strong {
  color: #0f766e;
  font-weight: 900;
}

.talent-analysis-insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.talent-analysis-insight-grid > div {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px;
}

.talent-analysis-insight-grid h3 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
}

.talent-analysis-verdict {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.talent-analysis-verdict > div {
  display: grid;
  gap: 5px;
  padding: 14px;
}

.talent-analysis-verdict span,
.talent-analysis-verdict small {
  color: var(--muted);
  line-height: 1.45;
}

.talent-analysis-verdict strong {
  color: var(--text);
  font-size: 18px;
}

.talent-report-decision-console {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 0.9fr) minmax(240px, auto);
  gap: 12px;
  align-items: stretch;
  padding: 14px;
  border: 1px solid color-mix(in srgb, #14b8a6 26%, var(--line));
  border-radius: 8px;
  background: linear-gradient(135deg, #f8fffd, #eef6ff);
}

.talent-report-decision-console.is-employee {
  grid-template-columns: minmax(0, 1fr) auto;
}

.talent-report-decision-copy,
.talent-report-decision-state,
.talent-report-decision-actions {
  min-width: 0;
}

.talent-report-decision-copy {
  display: grid;
  gap: 7px;
}

.talent-report-decision-copy span {
  color: #0f766e;
  font-weight: 900;
}

.talent-report-decision-copy h3,
.talent-report-decision-copy p {
  margin: 0;
}

.talent-report-decision-copy h3 {
  color: var(--text);
  font-size: 18px;
  line-height: 1.36;
}

.talent-report-decision-copy p {
  color: var(--muted);
  line-height: 1.5;
}

.talent-report-decision-state {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.talent-report-decision-state > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.talent-report-decision-state span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.talent-report-decision-state strong {
  min-width: 0;
  color: var(--text);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.talent-report-decision-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: center;
  justify-content: flex-end;
}

.talent-report-decision-actions button {
  min-height: 38px;
}

.hr-onboarding-assessment-grid {
  display: grid;
  gap: 12px;
}

.hr-onboarding-assessment-card {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(120px, auto) minmax(260px, 1fr) minmax(260px, 1.1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid color-mix(in srgb, #14b8a6 22%, var(--line));
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff, #f6fffc);
}

.hr-onboarding-main,
.hr-onboarding-score,
.hr-onboarding-detail,
.hr-onboarding-note {
  min-width: 0;
}

.hr-onboarding-main {
  display: grid;
  gap: 5px;
}

.hr-onboarding-main span {
  color: #0f766e;
  font-weight: 900;
}

.hr-onboarding-main h3,
.hr-onboarding-main p {
  margin: 0;
}

.hr-onboarding-main h3 {
  color: var(--text);
  font-size: 18px;
  line-height: 1.3;
}

.hr-onboarding-main p,
.hr-onboarding-note small {
  color: var(--muted);
  line-height: 1.45;
}

.hr-onboarding-score {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 8px;
  color: #ffffff;
  background: linear-gradient(135deg, #1d4ed8, #14b8a6);
}

.hr-onboarding-score strong {
  font-size: 24px;
  line-height: 1;
}

.hr-onboarding-score span {
  color: rgba(255, 255, 255, 0.88);
  font-weight: 800;
  white-space: nowrap;
}

.hr-onboarding-detail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.hr-onboarding-detail > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
}

.hr-onboarding-detail span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.hr-onboarding-detail b {
  color: var(--text);
  overflow-wrap: anywhere;
}

.hr-onboarding-note {
  display: grid;
  gap: 5px;
}

.hr-onboarding-note b {
  color: var(--text);
  line-height: 1.45;
}

.hr-onboarding-actions {
  justify-content: flex-end;
}

.talent-workflow-detail {
  display: grid;
  gap: 14px;
}

.talent-workflow-detail .metric-grid.mini {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.talent-workflow-detail .table-wrap {
  margin: 0;
}

.hr-probation-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.talent-launch-layout {
  display: grid;
  gap: 10px;
}

.talent-launch-layout > .panel,
.talent-advanced-grid > .panel {
  margin-bottom: 0;
}

.talent-advanced-box {
  border: 1px solid color-mix(in srgb, var(--line) 88%, #ffffff);
  border-radius: 8px;
  background: #fffefd;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.talent-advanced-box summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
}

.talent-advanced-box summary::-webkit-details-marker {
  display: none;
}

.talent-advanced-box summary::after {
  content: "+";
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--primary);
  font-weight: 900;
}

.talent-advanced-box[open] summary::after {
  content: "-";
}

.talent-advanced-box summary span {
  color: var(--text);
  font-weight: 900;
}

.talent-advanced-box summary small {
  color: var(--muted);
}

.talent-launch-mode-guide {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 0 12px 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 7%, #ffffff);
  color: #475569;
}

.talent-launch-mode-guide strong {
  color: var(--text);
  font-size: 14px;
}

.talent-launch-mode-guide span {
  line-height: 1.5;
}

.talent-advanced-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 12px 12px;
}

.talent-command-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff, #f8fbff);
}

.talent-command-copy {
  display: grid;
  gap: 6px;
}

.talent-command-copy span {
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.12);
  color: #0f766e;
  font-size: 12px;
  font-weight: 900;
}

.talent-command-copy h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: 0;
}

.talent-command-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.talent-command-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.talent-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 10px;
}

.talent-kpi-row > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.talent-kpi-row span,
.talent-kpi-row small {
  color: var(--muted);
}

.talent-kpi-row strong {
  color: var(--text);
  font-size: 20px;
}

.talent-flow-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 10px;
}

.talent-flow-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 10px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.talent-flow-step span {
  grid-row: span 2;
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-weight: 900;
}

.talent-flow-step b,
.talent-flow-step small {
  min-width: 0;
}

.talent-flow-step small {
  color: var(--muted);
}

.talent-workspace-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f1f5f9;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.talent-workspace-tab {
  min-height: 38px;
  min-width: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  white-space: nowrap;
}

.talent-workspace-tab.active {
  background: #fff;
  color: var(--text);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.talent-workspace-body {
  display: grid;
  gap: 14px;
}

.talent-process-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff, #f0fdfa);
}

.talent-process-map > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 9px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 76%, #ffffff);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.talent-process-map span {
  grid-row: span 2;
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary-strong), var(--primary));
  font-size: 12px;
  font-weight: 950;
}

.talent-process-map b,
.talent-process-map small {
  min-width: 0;
}

.talent-process-map b {
  color: var(--text);
  line-height: 1.2;
}

.talent-process-map small {
  color: var(--muted);
  line-height: 1.35;
}

.talent-tab-grid {
  display: grid;
  gap: 14px;
}

.talent-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
}

.talent-action-card {
  display: grid;
  gap: 7px;
  justify-items: start;
  min-height: 112px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  text-align: left;
}

.talent-action-card span {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.1);
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.talent-action-card strong {
  font-size: 17px;
}

.talent-action-card small {
  color: var(--muted);
  line-height: 1.5;
}

.talent-action-card.primary {
  border-color: rgba(37, 99, 235, 0.34);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(20, 184, 166, 0.09));
}

.talent-share-workbench.compact {
  grid-template-columns: minmax(0, 1fr) minmax(210px, 300px);
  align-items: stretch;
}

.talent-launch-console {
  display: grid;
  grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.talent-launch-main {
  display: grid;
  align-content: center;
  gap: 14px;
  min-width: 0;
}

.talent-launch-title {
  display: grid;
  gap: 5px;
}

.talent-launch-title span {
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, #ffffff);
  font-size: 12px;
  font-weight: 900;
}

.talent-launch-title h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
}

.talent-launch-title p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.talent-link-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.talent-link-bar span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.talent-link-bar strong {
  min-width: 0;
  font-size: 13px;
}

.talent-link-bar.is-demo {
  border-color: color-mix(in srgb, #f59e0b 32%, var(--line));
  background: color-mix(in srgb, #fef3c7 64%, #ffffff);
}

.talent-launch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.talent-launch-actions.primary-row button {
  min-height: 38px;
}

.talent-launch-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.talent-launch-steps.compact span {
  justify-content: center;
}

.talent-launch-steps span {
  display: flex;
  gap: 6px;
  align-items: center;
  min-height: 34px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.talent-launch-steps b {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  color: #ffffff;
  background: var(--primary);
  font-size: 11px;
}

.talent-launch-qr {
  display: grid;
  gap: 8px;
  justify-items: center;
  align-content: center;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #f0fdfa);
  text-align: center;
}

.talent-launch-qr.hero {
  min-height: 270px;
  background:
    linear-gradient(180deg, #ffffff, #f0fdfa);
}

.talent-launch-qr.hero.is-demo {
  border-color: color-mix(in srgb, #f59e0b 34%, var(--line));
  background: linear-gradient(180deg, #ffffff, #fff7ed);
}

.talent-launch-qr-box {
  display: grid;
  place-items: center;
}

.talent-launch-qr .talent-qr-svg,
.talent-launch-qr .talent-qr-fallback {
  width: 178px;
  height: 178px;
  border-width: 10px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
}

.talent-launch-qr strong {
  color: var(--text);
  font-size: 17px;
}

.talent-launch-qr small {
  color: var(--muted);
  line-height: 1.45;
}

.talent-entry-gateway {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

.talent-entry-gateway > .panel {
  margin-bottom: 0;
  overflow: visible;
}

.talent-entry-shell {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.talent-entry-brief {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, #ffffff);
  border-radius: 8px;
  background: #fff;
}

.talent-entry-brief span {
  grid-row: span 2;
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.talent-entry-shell.external .talent-entry-brief span {
  color: #075985;
  background: #e0f2fe;
}

.talent-entry-shell.internal .talent-entry-brief span {
  color: #047857;
  background: #d1fae5;
}

.talent-entry-brief h3 {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  line-height: 1.28;
}

.talent-entry-brief p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.talent-entry-main {
  display: grid;
  grid-template-columns: minmax(190px, 230px) minmax(260px, 0.8fr) minmax(300px, 1.2fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
}

.talent-entry-main .talent-launch-qr.hero {
  min-height: 0;
  padding: 16px;
}

.talent-entry-main .talent-launch-qr .talent-qr-svg,
.talent-entry-main .talent-launch-qr .talent-qr-fallback {
  width: 168px;
  height: 168px;
}

.talent-entry-operate {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.talent-entry-form {
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  border-radius: 8px;
  background: #fbfdff;
}

.talent-entry-actions {
  align-items: center;
}

.talent-poster-config-panel {
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.talent-poster-config-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  background: linear-gradient(135deg, #ffffff, #f0fdfa);
}

.talent-poster-config-panel summary::-webkit-details-marker {
  display: none;
}

.talent-poster-config-panel summary::after {
  content: "+";
  display: inline-grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--primary);
  background: #fff;
  font-weight: 950;
}

.talent-poster-config-panel[open] summary::after {
  content: "-";
}

.talent-poster-config-panel summary span {
  color: var(--text);
  font-weight: 950;
}

.talent-poster-config-panel summary small {
  color: var(--muted);
}

.talent-poster-config-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 10px;
  padding: 14px;
  border-top: 1px solid var(--line);
}

.talent-poster-config-status {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #f8fafc;
  font-size: 13px;
  font-weight: 800;
}

.talent-poster-config-status.synced {
  border-color: color-mix(in srgb, #059669 24%, var(--line));
  color: #047857;
  background: #ecfdf5;
}

.talent-poster-config-status.error {
  border-color: color-mix(in srgb, #dc2626 22%, var(--line));
  color: #b91c1c;
  background: #fef2f2;
}

.talent-poster-config-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.talent-poster-config-form label.wide {
  grid-column: 1 / -1;
}

.talent-poster-config-form input,
.talent-poster-config-form textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: #fff;
  font-weight: 600;
}

.talent-poster-config-form textarea {
  resize: vertical;
}

.talent-poster-config-actions {
  justify-content: flex-start;
}

.talent-open-bank {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.talent-open-bank-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
}

.talent-open-bank-head > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.talent-open-bank-head strong {
  color: var(--text);
}

.talent-open-bank-head span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.talent-entry-template-list {
  display: grid;
  gap: 8px;
}

.talent-entry-template-list.compact {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.talent-entry-template-item {
  display: grid;
  gap: 8px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.talent-entry-template-item > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.talent-entry-template-item strong {
  color: var(--text);
}

.talent-entry-template-item span {
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.talent-entry-template-item b {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 13px;
}

.talent-entry-table .table-wrap {
  margin-top: 0;
  max-height: 220px;
  overflow: auto;
}

.talent-library-actions {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.talent-library-console {
  display: grid;
  gap: 14px;
}

.talent-library-console-redesigned {
  gap: 12px;
}

.talent-library-command {
  padding: 14px;
}

.talent-library-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.talent-library-summary > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, #ffffff);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.talent-library-summary span,
.talent-library-summary small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.talent-library-summary strong {
  color: var(--text);
  font-size: 24px;
  line-height: 1;
}

.talent-import-preview-compact .hr-panel {
  margin-bottom: 0;
}

.talent-import-preview-compact .table-wrap {
  max-height: 210px;
  overflow: auto;
}

.talent-library-workbench {
  display: grid;
  grid-template-columns: minmax(290px, 0.8fr) minmax(0, 1.45fr);
  gap: 12px;
  align-items: start;
}

.talent-bank-list-panel,
.talent-question-detail-panel > .hr-panel {
  min-width: 0;
  margin-bottom: 0;
}

.talent-bank-list-panel {
  overflow: hidden;
}

.talent-bank-list {
  display: grid;
  gap: 8px;
  max-height: 560px;
  overflow: auto;
  padding: 12px;
  border-top: 1px solid color-mix(in srgb, var(--line) 86%, #ffffff);
  background: #f8fafc;
}

.talent-bank-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 90%, #ffffff);
  border-radius: 8px;
  background: #ffffff;
}

.talent-bank-card.is-active {
  border-color: color-mix(in srgb, var(--primary) 46%, var(--line));
  box-shadow: inset 4px 0 0 var(--primary), 0 10px 22px rgba(15, 23, 42, 0.07);
}

.talent-bank-card-main {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  box-shadow: none;
}

.talent-bank-card-main:hover {
  box-shadow: none;
  transform: none;
}

.talent-bank-card-main span {
  width: fit-content;
  padding: 3px 7px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 12px;
  font-weight: 900;
}

.talent-bank-card-main strong {
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.talent-bank-card-main small {
  overflow: hidden;
  color: var(--muted);
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.talent-bank-card-meta,
.talent-bank-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.talent-bank-card-meta b,
.talent-bank-card-meta em {
  color: var(--text);
  font-size: 13px;
  font-style: normal;
  font-weight: 850;
}

.talent-bank-card-meta em {
  color: var(--muted);
  font-weight: 750;
}

.talent-bank-card-actions {
  justify-content: space-between;
}

.talent-bank-card-actions button {
  min-height: 30px;
  padding: 6px 10px;
  font-size: 13px;
}

.talent-bank-hint {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border-top: 1px solid color-mix(in srgb, var(--line) 86%, #ffffff);
  background: #ffffff;
}

.talent-bank-hint b {
  color: var(--text);
  font-size: 13px;
}

.talent-bank-hint span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.talent-question-detail-panel .hr-panel {
  overflow: hidden;
}

.talent-question-detail-panel .row-actions {
  padding: 12px 12px 0;
}

.talent-question-detail-panel .notice {
  margin: 12px;
}

.talent-question-detail-panel .table-wrap {
  max-height: 520px;
  overflow: auto;
}

.talent-question-detail-panel .hr-table table {
  min-width: 760px;
}

.talent-question-detail-panel .hr-table th:nth-child(4),
.talent-question-detail-panel .hr-table td:nth-child(4) {
  min-width: 260px;
}

.talent-question-detail-panel .hr-table th:nth-child(5),
.talent-question-detail-panel .hr-table td:nth-child(5) {
  min-width: 150px;
}

.talent-role-console {
  display: grid;
  gap: 14px;
}

.talent-library-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.talent-library-toolbar > div:first-child {
  display: grid;
  gap: 5px;
}

.talent-library-toolbar span {
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.1);
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.talent-library-toolbar h2 {
  margin: 0;
  font-size: 20px;
  letter-spacing: 0;
}

.talent-library-toolbar p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.talent-library-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.talent-library-grid {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.talent-library-side,
.talent-library-main {
  display: grid;
  gap: 12px;
}

.talent-library-stat {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.talent-library-stat span,
.talent-library-stat small {
  color: var(--muted);
}

.talent-library-stat strong {
  font-size: 28px;
  line-height: 1;
}

.talent-import-empty {
  min-height: 118px;
}

.talent-import-empty p {
  margin: 0;
  line-height: 1.6;
}

.talent-question-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, #ffffff);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--panel-soft) 70%, #ffffff));
  color: var(--muted);
  font-size: 13px;
}

.talent-question-pager > div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.talent-question-pager button {
  min-width: 76px;
}

.talent-manual-editor {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.talent-manual-editor summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 900;
  list-style: none;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent-soft) 42%, transparent), transparent 28%),
    linear-gradient(90deg, #fffefd, #f6fbff);
}

.talent-manual-editor summary::-webkit-details-marker {
  display: none;
}

.talent-manual-editor summary::after {
  content: "+";
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--primary);
  background: #fff;
}

.talent-manual-editor[open] summary::after {
  content: "-";
}

.talent-manual-editor summary small {
  color: var(--muted);
  font-weight: 500;
}

.talent-manual-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  background: #f8fafc;
}

.talent-manual-sheet {
  align-items: stretch;
}

.talent-sheet-section {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line) 88%, #ffffff);
  border-radius: 8px;
  background: #fffefd;
  overflow: hidden;
}

.talent-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 86%, #ffffff);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent-soft) 48%, transparent), transparent 28%),
    linear-gradient(90deg, #fffefd, #f8fbff);
}

.talent-sheet-head strong,
.talent-sheet-head small {
  display: block;
}

.talent-sheet-head small {
  margin-top: 2px;
  color: var(--muted);
}

.talent-sheet-head span {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, #ffffff);
  font-size: 12px;
  font-weight: 900;
}

.talent-sheet-form {
  min-width: 0;
}

.talent-template-compact-form {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(150px, 1fr) minmax(140px, 1fr) 120px minmax(220px, 1.4fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
}

.talent-template-compact-form label,
.talent-role-option-form label,
.talent-question-meta-grid label,
.talent-question-body {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #475569;
  font-weight: 800;
}

.talent-template-compact-form input,
.talent-template-compact-form select,
.talent-template-compact-form textarea,
.talent-role-option-form input,
.talent-role-table input,
.talent-question-answer-form input,
.talent-question-answer-form select,
.talent-question-answer-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--line) 90%, #ffffff);
  border-radius: 8px;
  padding: 7px 9px;
  background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--panel-soft) 68%, #ffffff));
  color: var(--text);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset;
}

.talent-template-compact-form textarea,
.talent-question-answer-form textarea {
  resize: vertical;
}

.talent-template-submit button {
  width: 104px;
}

.talent-role-option-form {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(150px, 0.85fr) minmax(220px, 1.4fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
}

.talent-role-inline-form {
  display: contents;
}

.talent-role-option-form button {
  min-width: 96px;
}

.talent-role-maintenance-page {
  background: #fff;
}

.talent-role-table-wrap {
  overflow-x: auto;
  padding: 0 12px 12px;
}

.talent-role-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 14px;
}

.talent-role-table th,
.talent-role-table td {
  border-top: 1px solid color-mix(in srgb, var(--line) 88%, #ffffff);
  padding: 8px;
  text-align: left;
  vertical-align: middle;
}

.talent-role-table th {
  color: #475569;
  background: color-mix(in srgb, var(--panel-soft) 70%, #ffffff);
  font-size: 12px;
  font-weight: 900;
}

.talent-role-add-row td {
  background: linear-gradient(180deg, #f8fbff, #eef6ff);
}

.talent-role-add-row input {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line));
  background: #fff;
}

.talent-role-add-row input::placeholder {
  color: #64748b;
}

.talent-role-actions {
  display: flex;
  gap: 8px;
  white-space: nowrap;
}

.talent-profile-console {
  display: grid;
  gap: 12px;
}

.talent-profile-form {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.talent-profile-meta-grid,
.talent-profile-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
}

.talent-profile-meta-grid label,
.talent-profile-summary-grid label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #475569;
  font-weight: 800;
}

.talent-profile-meta-grid .wide,
.talent-profile-summary-grid .wide {
  grid-column: 1 / -1;
}

.talent-profile-form input,
.talent-profile-form select,
.talent-profile-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--line) 90%, #ffffff);
  border-radius: 8px;
  padding: 7px 9px;
  background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--panel-soft) 68%, #ffffff));
  color: var(--text);
}

.talent-profile-target-table-wrap {
  overflow-x: auto;
}

.talent-profile-target-table {
  min-width: 780px;
}

.talent-profile-target-table input {
  min-height: 32px;
}

.talent-profile-actions {
  align-items: center;
}

.talent-profile-builder {
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.talent-profile-builder-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 8%, #ffffff), color-mix(in srgb, var(--success) 8%, #ffffff));
}

.talent-profile-builder-head div {
  display: grid;
  gap: 4px;
}

.talent-profile-builder-head strong {
  font-size: 18px;
}

.talent-profile-builder-head small,
.talent-profile-builder-head span {
  color: #64748b;
  font-weight: 700;
}

.talent-profile-builder form {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.talent-profile-builder-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
}

.talent-profile-builder-grid label {
  display: grid;
  gap: 5px;
  color: #475569;
  font-weight: 800;
}

.talent-profile-builder-grid input,
.talent-profile-builder-grid select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  color: var(--text);
}

.talent-profile-builder-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 12px;
  align-items: start;
}

.talent-profile-subhead {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px 8px;
}

.talent-profile-subhead small {
  color: #64748b;
  font-weight: 700;
}

.talent-profile-sample-list {
  min-width: 0;
}

.talent-profile-sample-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 6%, #ffffff);
  color: #475569;
  font-weight: 800;
}

.talent-profile-sample-toolbar span {
  min-width: 0;
  flex: 1;
}

.talent-profile-sample-toolbar button {
  min-height: 32px;
  padding: 6px 10px;
}

.talent-profile-sample-row {
  display: grid;
  grid-template-columns: 22px 86px minmax(180px, 1fr) 58px minmax(160px, .9fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-soft) 55%, #ffffff);
  margin-bottom: 8px;
}

.talent-profile-sample-row.is-selected {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background: color-mix(in srgb, var(--primary) 8%, #ffffff);
}

.talent-profile-sample-row input {
  width: 18px;
  height: 18px;
}

.talent-profile-sample-check {
  color: var(--primary);
  font-size: 12px;
}

.talent-profile-sample-row span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.talent-profile-sample-row small,
.talent-profile-sample-row em {
  color: #64748b;
  font-style: normal;
  font-weight: 700;
}

.talent-profile-sample-row b {
  justify-self: center;
  min-width: 44px;
  padding: 6px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--success) 16%, #ffffff);
  color: #047857;
  text-align: center;
}

.talent-profile-preview {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
  border-radius: 8px;
  background: #fff;
}

.talent-profile-preview p {
  margin: 0;
  color: #64748b;
  line-height: 1.7;
}

.talent-profile-preview-list {
  display: grid;
  gap: 8px;
}

.talent-profile-preview-list span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 7%, #ffffff);
  color: #334155;
  font-weight: 800;
}

.talent-profile-preview button:disabled {
  cursor: not-allowed;
  opacity: .58;
  box-shadow: none;
}

.talent-profile-page {
  display: grid;
  gap: 16px;
}

.talent-profile-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 20px 22px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(120deg, #ffffff 0%, #f8fbff 58%, #eefbf5 100%);
}

.talent-profile-hero > div:first-child {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.talent-profile-hero span,
.talent-profile-studio-head span,
.talent-profile-library-head span {
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, #ffffff);
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.talent-profile-hero h2,
.talent-profile-studio-head h3,
.talent-profile-library-head h3 {
  margin: 0;
  letter-spacing: 0;
}

.talent-profile-hero h2 {
  font-size: 24px;
}

.talent-profile-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.talent-profile-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.talent-profile-studio {
  border-color: color-mix(in srgb, var(--primary) 16%, var(--line));
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.07);
}

.talent-profile-studio form {
  gap: 0;
  padding: 0;
}

.talent-profile-studio-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(120deg, #ffffff, #f8fafc);
}

.talent-profile-studio-head > div:first-child {
  display: grid;
  gap: 6px;
}

.talent-profile-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: 6px;
}

.talent-profile-progress span {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.talent-profile-progress span.done {
  border-color: color-mix(in srgb, var(--success) 34%, var(--line));
  background: color-mix(in srgb, var(--success) 10%, #ffffff);
  color: #047857;
}

.talent-profile-filter-grid {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.talent-profile-studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
  padding: 18px 20px 20px;
  background: #f8fafc;
}

.talent-profile-subhead {
  align-items: center;
  padding: 0;
}

.talent-profile-subhead > div {
  display: grid;
  gap: 4px;
}

.talent-profile-sample-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.talent-profile-sample-note {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
  border-radius: 8px;
  background: #fff;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
}

.talent-profile-sample-grid {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.talent-profile-sample-card {
  display: grid;
  grid-template-columns: 24px 92px minmax(0, 1fr) 68px;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.talent-profile-sample-card.is-selected {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background: color-mix(in srgb, var(--primary) 5%, #ffffff);
}

.talent-profile-sample-card input {
  width: 18px;
  height: 18px;
}

.talent-profile-sample-status {
  width: fit-content;
  padding: 6px 9px;
  border-radius: 999px;
  background: #eef2ff;
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.talent-profile-sample-card.is-selected .talent-profile-sample-status {
  background: color-mix(in srgb, var(--success) 14%, #ffffff);
  color: #047857;
}

.talent-profile-sample-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.talent-profile-sample-main strong {
  color: var(--text);
  font-size: 15px;
}

.talent-profile-sample-main small,
.talent-profile-sample-main em {
  color: #64748b;
  font-style: normal;
  font-weight: 700;
  line-height: 1.45;
}

.talent-profile-sample-card b {
  justify-self: end;
  min-width: 52px;
  padding: 8px 10px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  text-align: center;
}

.talent-profile-empty-state {
  display: grid;
  gap: 6px;
  min-height: 150px;
  place-items: center;
  padding: 24px;
  border: 1px dashed color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: 8px;
  background: #fff;
  color: #64748b;
  text-align: center;
}

.talent-profile-empty-state strong {
  color: var(--text);
  font-size: 16px;
}

.talent-profile-preview {
  position: sticky;
  top: 12px;
  border-color: color-mix(in srgb, var(--primary) 18%, var(--line));
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.talent-profile-preview > span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.talent-profile-checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.talent-profile-checks div {
  display: grid;
  gap: 2px;
  padding: 10px;
  border-radius: 8px;
  background: #f8fafc;
}

.talent-profile-checks b {
  color: var(--text);
  font-size: 22px;
  line-height: 1;
}

.talent-profile-checks small {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.talent-profile-library-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.talent-profile-library-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(120deg, #ffffff, #f8fafc);
}

.talent-profile-library-head > div {
  display: grid;
  gap: 5px;
}

.talent-profile-library-head small {
  color: #64748b;
  font-weight: 800;
}

.talent-profile-library-panel .table-wrap {
  margin-top: 0;
  border: 0;
  border-radius: 0;
}

.talent-question-answer-form {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.talent-current-bank-note {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 8%, #ffffff);
  color: #475569;
}

.talent-current-bank-note strong {
  color: var(--text);
  font-size: 14px;
}

.talent-current-bank-note span {
  line-height: 1.5;
}

.talent-question-meta-grid {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(130px, 0.85fr) minmax(140px, 0.9fr) 90px 90px;
  gap: 10px;
}

.talent-question-answer-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.95fr) minmax(360px, 1.05fr);
  gap: 12px;
  align-items: stretch;
}

.talent-question-body textarea {
  min-height: 190px;
  font-size: 15px;
  line-height: 1.6;
}

.talent-question-body small,
.talent-answer-editor-head small,
.talent-question-submit-row .muted {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.talent-answer-editor {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line) 88%, #ffffff);
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.talent-answer-editor-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 86%, #ffffff);
  background: #f8fafc;
}

.talent-answer-table {
  display: grid;
  gap: 0;
}

.talent-answer-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 92px;
  gap: 8px;
  align-items: center;
  min-height: 46px;
  padding: 8px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 82%, #ffffff);
}

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

.talent-answer-row > span {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--primary);
  font-weight: 900;
}

.talent-answer-editor.is-disabled {
  opacity: 0.72;
}

.talent-answer-editor.is-disabled .talent-answer-row > span {
  background: #94a3b8;
}

.talent-answer-editor.is-disabled input {
  color: var(--muted);
  background: #f1f5f9;
  cursor: not-allowed;
}

.talent-question-submit-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding-top: 2px;
}

.talent-question-submit-row button {
  min-width: 116px;
}

.talent-sheet-wrap {
  padding: 0;
  border: 0;
  border-radius: 0;
}

.talent-maintenance-table {
  width: 100%;
  min-width: 960px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.talent-question-table {
  min-width: 1220px;
}

.talent-maintenance-table th,
.talent-maintenance-table td {
  border-bottom: 1px solid color-mix(in srgb, var(--line) 88%, #ffffff);
  border-right: 1px solid color-mix(in srgb, var(--line) 78%, #ffffff);
  vertical-align: top;
}

.talent-maintenance-table th:last-child,
.talent-maintenance-table td:last-child {
  border-right: 0;
}

.talent-maintenance-table th {
  padding: 9px 10px;
  color: #475569;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
}

.talent-maintenance-table td {
  padding: 8px;
  background: #fffefd;
}

.talent-maintenance-table input,
.talent-maintenance-table select,
.talent-maintenance-table textarea {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--line) 90%, #ffffff);
  border-radius: 8px;
  padding: 7px 9px;
  background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--panel-soft) 68%, #ffffff));
  color: var(--text);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset;
}

.talent-maintenance-table textarea {
  resize: vertical;
}

.talent-template-table .talent-template-name-cell {
  width: 220px;
}

.talent-template-table .talent-template-note-cell {
  width: 280px;
}

.talent-template-cell {
  width: 190px;
}

.talent-question-title-cell {
  width: 270px;
}

.talent-score-cell {
  width: 82px;
}

.talent-options-cell {
  width: 260px;
}

.talent-options-cell textarea {
  min-height: 72px;
}

.talent-options-cell small,
.talent-sheet-action-cell small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.talent-options-cell.is-disabled textarea {
  color: var(--muted);
  background: #f1f5f9;
  cursor: not-allowed;
}

.talent-sheet-action-cell {
  width: 116px;
}

.talent-sheet-action-cell button {
  width: 100%;
}

.talent-manual-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, #ffffff);
  border-radius: 8px;
  background: #fffefd;
}

.talent-manual-question {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--primary-soft) 62%, transparent), transparent 26%),
    #fffefd;
}

.talent-manual-card-head {
  display: flex;
  gap: 10px;
  align-items: center;
}

.talent-manual-card-head b {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--primary);
  font-size: 13px;
}

.talent-manual-card-head strong,
.talent-manual-card-head small {
  display: block;
}

.talent-manual-card-head strong {
  color: var(--text);
}

.talent-manual-card-head small {
  margin-top: 2px;
  color: var(--muted);
}

.talent-template-form.form-grid.compact,
.talent-question-form.form-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 10px;
  padding: 0;
}

.talent-template-form label,
.talent-question-form label {
  gap: 5px;
  color: #475569;
  font-weight: 750;
}

.talent-template-form input,
.talent-template-form select,
.talent-template-form textarea,
.talent-question-form input,
.talent-question-form select,
.talent-question-form textarea {
  min-height: 34px;
}

.talent-options-field textarea {
  min-height: 82px;
}

.talent-options-field small,
.talent-form-actions .muted {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.talent-form-actions {
  justify-content: space-between;
}

.talent-manual-editor:not([open]) .talent-manual-forms {
  display: none;
}

.talent-manual-editor:not([open]) .talent-manual-board {
  display: none;
}

@media (max-width: 980px) {
  .talent-control-head,
  .talent-control-bottom {
    grid-template-columns: 1fr;
  }

  .talent-control-actions {
    justify-content: flex-start;
  }

  .talent-compact-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .talent-advanced-grid {
    grid-template-columns: 1fr;
  }

  .talent-process-map,
  .talent-entry-main,
  .talent-poster-config-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .talent-entry-main .talent-open-bank {
    grid-column: 1 / -1;
  }

  .talent-command-bar {
    grid-template-columns: 1fr;
  }

  .talent-command-actions {
    justify-content: flex-start;
  }

  .talent-kpi-row,
  .talent-flow-strip,
  .talent-action-grid,
  .talent-launch-console,
  .talent-library-grid,
  .talent-library-workbench,
  .talent-library-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .talent-library-toolbar {
    grid-template-columns: 1fr;
  }

  .talent-library-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .talent-bank-list {
    max-height: 420px;
  }

  .talent-result-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .talent-result-card button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .talent-analysis-hero,
  .talent-analysis-version-strip,
  .talent-analysis-section-head,
  .talent-analysis-verdict,
  .talent-report-decision-console,
  .talent-report-decision-console.is-employee,
  .talent-workflow-detail .metric-grid.mini,
  .hr-probation-summary,
  .hr-onboarding-assessment-card {
    grid-template-columns: 1fr;
  }

  .talent-analysis-rings,
  .talent-analysis-score-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .talent-role-chart {
    overflow-x: auto;
    grid-template-columns: repeat(8, minmax(74px, 1fr));
  }

  .talent-dimension-bar {
    grid-template-columns: 1fr auto;
  }

  .talent-dimension-bar i {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .talent-manual-board {
    grid-template-columns: 1fr;
  }

  .talent-template-compact-form,
  .talent-role-option-form,
  .talent-question-meta-grid,
  .talent-question-answer-grid,
  .talent-profile-hero,
  .talent-profile-studio-head,
  .talent-profile-studio-grid,
  .talent-profile-builder-grid,
  .talent-profile-builder-body {
    grid-template-columns: 1fr;
  }

  .talent-profile-hero-actions,
  .talent-profile-sample-actions {
    justify-content: flex-start;
  }

  .talent-profile-progress {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .talent-profile-preview {
    position: static;
  }

  .talent-template-submit button {
    width: 100%;
  }

  .talent-library-buttons {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .talent-control-deck {
    padding: 10px;
  }

  .talent-control-head h2 {
    font-size: 20px;
  }

  .talent-control-actions button {
    flex: 1 1 130px;
  }

  .talent-compact-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .talent-workspace .panel-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .talent-workspace .panel-head .muted {
    max-width: 100%;
  }

  .talent-library-summary,
  .talent-library-workbench {
    grid-template-columns: 1fr;
  }

  .talent-bank-list,
  .talent-question-detail-panel .table-wrap {
    max-height: none;
  }

  .talent-workspace-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .talent-results-headline,
  .talent-result-card {
    grid-template-columns: 1fr;
  }

  .talent-result-card button {
    width: 100%;
  }

  .talent-analysis-report {
    padding: 12px;
  }

  .talent-analysis-summary-top,
  .talent-analysis-insight-grid,
  .talent-analysis-rings,
  .talent-analysis-score-grid,
  .talent-report-decision-state,
  .hr-onboarding-detail {
    grid-template-columns: 1fr;
  }

  .talent-report-decision-actions {
    justify-content: stretch;
  }

  .talent-report-decision-actions button,
  .hr-onboarding-actions button {
    flex: 1 1 150px;
  }

  .talent-analysis-overall-score {
    width: 104px;
    height: 104px;
    font-size: 30px;
  }

  .talent-analysis-summary-top time {
    justify-self: start;
  }

  .talent-role-chart {
    min-height: 220px;
  }

  .talent-advanced-box summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .talent-command-copy h2 {
    font-size: 20px;
  }

  .talent-kpi-row,
  .talent-flow-strip,
  .talent-process-map,
  .talent-poster-config-form,
  .talent-action-grid,
  .talent-launch-console,
  .talent-entry-main,
  .talent-share-workbench.compact,
  .talent-library-grid,
  .talent-profile-meta-grid,
  .talent-profile-summary-grid,
  .talent-profile-builder-grid,
  .talent-profile-builder-body,
  .talent-profile-sample-row {
    grid-template-columns: 1fr;
  }

  .talent-link-bar,
  .talent-launch-steps {
    grid-template-columns: 1fr;
  }

  .talent-profile-builder-head,
  .talent-profile-subhead {
    align-items: flex-start;
    flex-direction: column;
  }

  .talent-profile-sample-card {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .talent-profile-sample-card b {
    justify-self: start;
  }

  .talent-profile-checks {
    grid-template-columns: 1fr;
  }

  .talent-link-bar {
    align-items: stretch;
  }

  .talent-open-bank-head,
  .talent-entry-template-item {
    grid-template-columns: 1fr;
  }

  .talent-entry-brief {
    grid-template-columns: 1fr;
  }

  .talent-entry-brief span {
    grid-row: auto;
  }

  .talent-poster-config-panel summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .talent-open-bank-head .row-actions {
    justify-content: flex-start;
  }

  .talent-launch-actions button,
  .talent-entry-actions button,
  .talent-link-bar button {
    width: 100%;
  }

  .talent-manual-editor summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .talent-template-form.form-grid.compact,
  .talent-question-form.form-grid.compact {
    grid-template-columns: 1fr;
  }

  .talent-question-submit-row,
  .talent-answer-editor-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .talent-question-submit-row button {
    width: 100%;
  }

  .talent-answer-row {
    grid-template-columns: 36px minmax(0, 1fr) 76px;
  }

  .talent-workspace-tabs {
    width: 100%;
  }

  .talent-workspace-tab {
    flex: 1 0 auto;
  }
}

.hr-overview-grid {
  display: grid;
  gap: 14px;
}

.hr-table table {
  min-width: 980px;
}

.hr-cell-input {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hr-cell-input input,
.hr-table select,
.hr-form-grid input,
.hr-form-grid select,
.hr-form-grid textarea {
  width: 100%;
  min-width: 72px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  background: #fff;
  color: var(--text);
}

.hr-form-grid {
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.hr-form-grid .row-actions {
  align-items: end;
  min-height: 34px;
}

.hr-form-grid .row-actions button {
  width: 100%;
  min-height: 34px;
}

.hr-panel .hr-table-wrap {
  max-width: 100%;
}

.hr-panel .hr-table-wrap table {
  min-width: 760px;
}

.hr-process-approval-stack,
.hr-workflow-compact-panel {
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: 100%;
}

.hr-process-approval-stack .hr-panel,
.hr-workflow-compact-panel .hr-panel {
  padding-bottom: 10px;
}

.hr-workflow-compact-list {
  display: grid;
  gap: 8px;
  max-height: 460px;
  overflow: auto;
  padding-right: 4px;
}

.hr-workflow-compact-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) minmax(150px, 0.75fr) minmax(120px, 0.45fr) minmax(110px, auto);
  gap: 14px;
  align-items: center;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.hr-workflow-compact-row.is-open {
  border-color: rgba(37, 99, 235, 0.35);
  background: #f8fbff;
}

.hr-workflow-compact-row > div {
  min-width: 0;
}

.hr-workflow-compact-row span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.hr-workflow-compact-row strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hr-workflow-actions {
  justify-self: end;
}

.hr-workflow-actions .row-actions.compact {
  justify-content: flex-end;
}

.hr-workflow-actions .row-actions.compact button {
  min-width: 50px;
}

.hr-cell-input span {
  color: var(--muted);
  white-space: nowrap;
}

.hr-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}

.hr-form-grid.focus-target {
  outline: 2px solid rgba(29, 111, 216, 0.5);
  outline-offset: 6px;
  border-radius: 8px;
}

.hr-form-grid input[readonly],
.hr-table input[readonly] {
  background: var(--panel-soft);
  color: var(--muted);
}

[data-hr-personal-attendance-panel].focus-target {
  outline: 2px solid rgba(29, 111, 216, 0.5);
  outline-offset: 6px;
  border-radius: 8px;
}

.hr-attendance-period-bar {
  display: grid;
  grid-template-columns: minmax(170px, 1.1fr) minmax(140px, 0.9fr) repeat(5, minmax(96px, 1fr));
  gap: 10px;
  align-items: end;
}

.hr-attendance-period-bar label,
.hr-period-stat {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
}

.hr-period-stat {
  min-height: 58px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.hr-period-stat b {
  color: var(--text);
  font-size: 18px;
  line-height: 1.15;
}

.hr-payroll-actionbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.hr-status-line {
  color: var(--muted);
  font-size: 13px;
}

.hr-compact-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.hr-compact-stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  white-space: nowrap;
}

.hr-compact-stats b {
  color: var(--text);
  font-size: 17px;
}

.hr-employee-payroll-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  margin-top: 10px;
}

.hr-employee-payroll-head {
  display: grid;
  grid-template-columns: minmax(190px, 1.2fr) 104px minmax(210px, 1fr);
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.hr-employee-payroll-head strong,
.hr-payroll-preview strong {
  display: block;
  color: var(--text);
  font-size: 18px;
}

.hr-employee-payroll-head span,
.hr-payroll-preview span,
.hr-payroll-preview small {
  color: var(--muted);
  font-size: 12px;
}

.hr-payroll-preview {
  text-align: right;
}

.hr-payroll-card-fields {
  display: grid;
  grid-template-columns: repeat(8, minmax(92px, 1fr));
  gap: 8px;
}

.hr-mini-input {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}

.hr-mini-input div,
.hr-mini-input.compact {
  display: flex;
  align-items: center;
  gap: 5px;
}

.hr-mini-input input,
.hr-mini-input select {
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 7px;
  background: #fff;
  color: var(--text);
}

.hr-mini-input em {
  color: var(--muted);
  font-style: normal;
  white-space: nowrap;
}

.hr-modal-summary {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) 120px;
  gap: 10px;
  margin-bottom: 12px;
}

.hr-modal-summary > div,
.hr-modal-summary > label {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.hr-modal-summary span,
.hr-modal-summary small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.hr-modal-summary strong {
  display: block;
  color: var(--text);
  font-size: 20px;
}

.hr-modal-item-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.hr-attendance-item-config {
  display: grid;
  gap: 8px;
}

.hr-attendance-item-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.3fr) minmax(90px, 0.7fr) minmax(90px, 0.7fr) minmax(170px, 1.2fr) minmax(90px, 0.7fr) 72px;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.hr-attendance-item-row label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  min-width: 0;
}

.hr-attendance-item-row input,
.hr-attendance-item-row select {
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 7px;
  background: #fff;
  color: var(--text);
}

[data-hr-personal-attendance-panel] table {
  min-width: 760px;
}

.hr-form-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.hr-action-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.hr-action-list div {
  display: grid;
  grid-template-columns: 110px 1fr 170px;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid #bfdbfe;
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  background: #eff6ff;
}

.hr-action-list em {
  color: #1d4ed8;
  font-style: normal;
  font-weight: 800;
}

.hr-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.hr-status.ok {
  color: #047857;
  background: #d1fae5;
  border: 1px solid #6ee7b7;
}

.hr-status.info {
  color: #1d4ed8;
  background: #dbeafe;
  border: 1px solid #93c5fd;
}

.hr-status.warn {
  color: #b45309;
  background: #ffedd5;
  border: 1px solid #fdba74;
}

.metric-grid.mini {
  margin-top: 12px;
}

.hr-table td strong + small,
.hr-table td small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.4;
}

.hr-flow-progress {
  width: 150px;
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
  margin-bottom: 5px;
}

.hr-flow-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #16a34a);
}

.row-actions.compact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.row-actions.compact button {
  min-height: 30px;
  padding: 0 9px;
  font-size: 12px;
}

.hr-admin-page .panel-head h2 {
  white-space: nowrap;
}

.hr-admin-page .metric small {
  color: var(--muted);
  font-weight: 600;
}

.hr-module-cards .card {
  min-height: 150px;
}

.hr-archive-page {
  display: grid;
  gap: 14px;
}

.hr-archive-selector {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 16px;
}

.hr-archive-selector-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.hr-archive-selector-head span,
.hr-archive-selector-head p {
  color: var(--muted);
  font-size: 13px;
}

.hr-archive-selector-head h2 {
  margin: 4px 0 8px;
  font-size: 28px;
}

.hr-archive-stats.horizontal {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hr-department-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.hr-department-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 7px 13px;
  color: #334155;
  white-space: nowrap;
}

.hr-department-tabs button.active {
  border-color: var(--primary);
  background: #eaf3ff;
  color: #0f5fbd;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.1);
}

.hr-department-tabs small {
  color: var(--muted);
  font-weight: 800;
}

.hr-employee-carousel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hr-employee-carousel-head > div:first-child {
  display: grid;
  gap: 3px;
}

.hr-employee-carousel-head span {
  color: var(--muted);
  font-size: 13px;
}

.hr-employee-carousel {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 10px;
}

.hr-employee-carousel button {
  display: grid;
  gap: 7px;
  min-height: 116px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  padding: 12px;
}

.hr-employee-carousel button.active {
  border-color: var(--primary);
  background: #eff6ff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.1);
}

.hr-employee-carousel span,
.hr-employee-carousel small {
  color: var(--muted);
}

.hr-employee-carousel .hr-employee-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text);
  font-weight: 900;
}

.hr-employee-carousel .hr-employee-name em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.hr-archive-workspace {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.hr-archive-sidebar,
.hr-archive-main {
  min-width: 0;
}

.hr-archive-sidebar {
  position: sticky;
  top: 12px;
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 14px;
}

.hr-archive-sidebar-head {
  display: grid;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.hr-archive-sidebar-head span,
.hr-archive-sidebar-head p {
  color: var(--muted);
  font-size: 12px;
}

.hr-archive-sidebar-head h2 {
  margin: 0;
  font-size: 24px;
}

.hr-archive-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.hr-archive-stats div {
  border: 1px solid #dbe4ef;
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px;
}

.hr-archive-stats span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.hr-archive-stats strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 22px;
}

.hr-archive-list-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hr-archive-list-title button {
  min-height: 32px;
  padding: 6px 10px;
  white-space: nowrap;
}

.hr-employee-directory {
  display: grid;
  gap: 8px;
  max-height: calc(100vh - 300px);
  overflow: auto;
  padding-right: 2px;
}

.hr-employee-directory button {
  display: grid;
  gap: 6px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.hr-employee-directory button.active {
  border-color: var(--primary);
  background: #eff6ff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.1);
}

.hr-employee-directory span,
.hr-employee-directory small {
  color: var(--muted);
}

.hr-employee-directory .hr-employee-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text);
  font-weight: 900;
}

.hr-employee-directory .hr-employee-name em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.hr-employee-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.hr-archive-main {
  display: grid;
  gap: 14px;
}

.hr-profile-layout {
  display: grid;
  grid-template-columns: minmax(420px, 0.9fr) minmax(520px, 1.1fr);
  gap: 14px;
  align-items: start;
}

.hr-profile-layout.single {
  display: block;
}

.hr-employee-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 0 14px;
}

.hr-employee-strip button {
  min-width: 180px;
  display: grid;
  gap: 4px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
}

.hr-employee-strip button.active {
  border-color: var(--primary);
  background: #eff6ff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.1);
}

.hr-employee-strip span {
  color: var(--muted);
  font-size: 12px;
}

.hr-profile-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.hr-profile-head {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 14px;
  padding: 20px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.hr-profile-title {
  flex: 1;
  min-width: 0;
}

.hr-profile-avatar {
  width: 88px;
  height: 108px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-weight: 900;
  flex: 0 0 auto;
}

.hr-profile-avatar img,
.hr-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hr-profile-head h2 {
  margin: 4px 0;
  font-size: 28px;
}

.hr-profile-head p,
.hr-profile-head small {
  color: var(--muted);
}

.hr-profile-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.hr-profile-meta span {
  border: 1px solid #dbe4ef;
  border-radius: 8px;
  background: #fff;
  padding: 8px 10px;
  color: #334155;
  font-size: 12px;
}

.hr-profile-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: 260px;
}

.hr-profile-sections {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.hr-profile-sections section {
  display: grid;
  gap: 12px;
  border: 1px solid #dbe4ef;
  border-radius: 10px;
  background: #fff;
  padding: 14px;
}

.hr-profile-sections h3 {
  margin: 0;
  font-size: 17px;
}

.hr-status-section {
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 12px;
  background: #f8fbff;
}

.hr-status-section .metric strong {
  display: grid;
  gap: 4px;
}

.hr-status-section .metric small {
  color: var(--muted);
  font-size: 12px;
}

.form-grid.compact {
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 10px;
}

.hr-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 12px;
}

.hr-photo-box {
  display: grid;
  gap: 8px;
}

.hr-photo-preview {
  height: 150px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  overflow: hidden;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-weight: 900;
}

.hr-upload-btn,
.hr-doc-upload {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 34px;
  border: 1px solid var(--primary);
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 900;
  cursor: pointer;
}

.hr-upload-btn input,
.hr-doc-upload input {
  display: none;
}

.hr-doc-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 10px;
  margin: 4px 0 12px;
}

.hr-family-table table {
  min-width: 1500px;
}

.hr-family-table input,
.hr-family-table-panel input {
  width: 100%;
  min-width: 110px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 5px 7px;
}

.hr-family-table-panel table {
  min-width: 1600px;
}

.hr-attachment-table-panel table,
.hr-history-table-panel table {
  min-width: 980px;
}

.hr-growth-section {
  display: grid;
  gap: 14px;
}

.hr-growth-section > .panel {
  margin: 0;
}

.panel-head.inline {
  padding: 0;
  border: 0;
  background: transparent;
}

.hr-record-timeline {
  display: grid;
  gap: 10px;
  max-height: 460px;
  overflow: auto;
  padding-right: 4px;
}

.hr-record-timeline > div {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  background: #f8fafc;
}

.hr-record-timeline span,
.hr-record-timeline em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.hr-record-timeline p {
  margin: 0;
  line-height: 1.55;
}

.hr-record-timeline button {
  justify-self: start;
}

.talent-archive-timeline > div.is-done {
  border-left-color: #059669;
  background: #f0fdf4;
}

.talent-archive-timeline > div.is-current {
  border-left-color: #1d4ed8;
  background: #eff6ff;
}

.talent-archive-timeline > div.is-pending {
  border-left-color: #94a3b8;
  background: #f8fafc;
}

.hr-birthday-list {
  display: grid;
  gap: 10px;
}

.hr-birthday-list > div {
  display: grid;
  grid-template-columns: 120px 1fr 120px auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid #fed7aa;
  border-left: 4px solid #f97316;
  border-radius: 8px;
  background: #fff7ed;
}

.hr-birthday-list em {
  color: #c2410c;
  font-style: normal;
  font-weight: 900;
}

@media (max-width: 1100px) {
  .cost-config-row {
    grid-template-columns: 1fr 1fr;
  }

  .hr-process {
    grid-template-columns: repeat(3, 1fr);
  }

  .hr-form-grid,
  .hr-action-list div {
    grid-template-columns: 1fr 1fr;
  }

  .hr-profile-layout {
    grid-template-columns: 1fr;
  }

  .hr-archive-workspace {
    grid-template-columns: 1fr;
  }

  .hr-archive-sidebar {
    position: static;
  }

  .hr-archive-selector-head,
  .hr-employee-carousel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .hr-archive-stats.horizontal,
  .hr-employee-carousel {
    grid-template-columns: 1fr 1fr;
  }

  .hr-employee-directory {
    max-height: none;
  }

  .hr-profile-meta {
    grid-template-columns: 1fr 1fr;
  }

  .hr-birthday-list > div {
    grid-template-columns: 1fr;
  }

  .hr-media-grid,
  .hr-doc-actions,
  .form-grid.compact {
    grid-template-columns: 1fr;
  }
}

.contract-document { max-width: 980px; margin: 0 auto; color: #172033; line-height: 1.75; }
.quote-customer-document { max-width: 1080px; margin: 0 auto; color: #172033; line-height: 1.65; }
.quote-customer-document table { min-width: 980px; }
.quote-page-card {
  display: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  margin-bottom: 14px;
}
.quote-page-card.active,
.quote-customer-document[data-page-view="all"] .quote-page-card {
  display: block;
}
.quote-document-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 0;
}
.quote-document-pager span {
  color: var(--muted);
  font-weight: 700;
}
.quote-public-meta p { margin: 6px 0; }
.quote-share-actions { margin-top: 16px; flex-wrap: wrap; align-items: center; }
.quote-download-slot {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.customer-mobile-doc-page {
  box-sizing: border-box;
  width: 100%;
  min-height: 100dvh;
  padding: 12px;
  background: #eef5f4;
}

.customer-mobile-shell {
  box-sizing: border-box;
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
}

.customer-doc-hero {
  display: grid;
  gap: 6px;
  padding: 18px 16px;
  border: 1px solid #cfe0ea;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(236, 253, 245, 0.86)),
    #ffffff;
}

.customer-doc-hero.contract {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.88)),
    #ffffff;
}

.customer-doc-hero span,
.customer-doc-total-card span {
  color: #0f5590;
  font-size: 12px;
  font-weight: 900;
}

.customer-doc-hero h1 {
  margin: 0;
  color: #0f172a;
  font-size: 24px;
  line-height: 1.18;
}

.customer-doc-hero p,
.customer-doc-total-card small {
  margin: 0;
  color: #52606d;
  font-size: 13px;
  line-height: 1.45;
}

.customer-doc-total-card,
.customer-doc-card,
.customer-doc-stats > div,
.customer-share-qr-card {
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid #d8e6ee;
  border-radius: 8px;
  background: #ffffff;
}

.customer-doc-total-card {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
}

.customer-doc-total-card strong {
  color: #b85649;
  font-size: 30px;
  line-height: 1;
}

.customer-doc-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.customer-doc-stats > div {
  display: grid;
  gap: 3px;
  justify-items: center;
  padding: 10px 8px;
}

.customer-doc-stats b {
  color: #0f172a;
  font-size: 18px;
}

.customer-doc-stats span,
.customer-doc-info-grid span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.customer-doc-card {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.customer-doc-card h2 {
  margin: 0;
  color: #0f172a;
  font-size: 16px;
  line-height: 1.25;
}

.customer-doc-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.customer-doc-info-grid > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px;
  border-radius: 8px;
  background: #f8fafc;
}

.customer-doc-info-grid strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-doc-product-list,
.customer-doc-note-list,
.customer-doc-clause-list {
  display: grid;
  gap: 8px;
}

.customer-doc-product {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 8px;
  border: 1px solid #e1eaf0;
  border-radius: 8px;
  background: #fbfefe;
}

.customer-doc-product-image {
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 82px;
  height: 76px;
  border-radius: 8px;
  background: #eef6f5;
}

.customer-doc-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.customer-doc-product-image span {
  color: #0f5590;
  font-size: 12px;
  font-weight: 900;
}

.customer-doc-product-body {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
}

.customer-doc-product-body strong,
.customer-doc-product-body span,
.customer-doc-product-body small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.customer-doc-product-body strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.3;
}

.customer-doc-product-body span,
.customer-doc-product-body small,
.customer-doc-note-list p,
.customer-doc-clause-list p {
  margin: 0;
  color: #52606d;
  font-size: 12px;
  line-height: 1.55;
}

.customer-doc-product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.customer-doc-product-meta b {
  max-width: 100%;
  padding: 2px 6px;
  border-radius: 6px;
  background: #e9f5f4;
  color: #0f5590;
  font-size: 11px;
}

.customer-doc-clause-list details {
  padding: 8px 9px;
  border-radius: 8px;
  background: #f8fafc;
}

.customer-doc-clause-list summary {
  color: #0f172a;
  font-weight: 900;
  cursor: pointer;
}

.customer-doc-sign-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.customer-doc-sign-grid > div {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px dashed #b9cce0;
  border-radius: 8px;
  background: #f8fafc;
}

.customer-doc-sign-grid b {
  color: #0f172a;
}

.customer-doc-sign-grid span {
  color: #52606d;
  font-size: 12px;
}

.customer-doc-actions {
  position: sticky;
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 5;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px;
  border: 1px solid #cfe0ea;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.customer-doc-actions.is-confirmed {
  position: static;
  grid-template-columns: 1fr;
  box-shadow: none;
}

.customer-doc-actions .muted {
  grid-column: 1 / -1;
  font-size: 12px;
  line-height: 1.45;
}

.customer-doc-actions button,
.customer-doc-actions .pdf-export-link {
  width: 100%;
  min-height: 38px;
}

.customer-doc-actions.is-confirmed button[disabled] {
  opacity: 1;
  color: #ffffff;
  background: linear-gradient(135deg, #6f8bd4, #36b6bd);
}

.customer-doc-safe-bottom {
  height: 6px;
}

@media (max-width: 430px) {
  .customer-mobile-doc-page {
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }

  .customer-mobile-shell {
    max-width: none;
    gap: 8px;
  }

  .customer-doc-hero {
    padding: 16px 14px;
  }

  .customer-doc-hero h1 {
    font-size: 22px;
  }

  .customer-doc-total-card {
    padding: 12px 14px;
  }

  .customer-doc-total-card strong {
    font-size: 28px;
  }

  .customer-doc-card {
    padding: 10px;
  }

  .customer-doc-product {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 8px;
  }

  .customer-doc-product-image {
    width: 76px;
    height: 72px;
  }

  .customer-doc-actions {
    grid-template-columns: 1fr;
    padding: 8px;
  }
}

@media (max-width: 360px) {
  .customer-doc-hero h1 {
    font-size: 20px;
  }

  .customer-doc-total-card strong {
    font-size: 26px;
  }

  .customer-doc-stats {
    gap: 6px;
  }

  .customer-doc-stats > div {
    padding: 9px 5px;
  }

  .customer-doc-info-grid,
  .customer-doc-sign-grid {
    grid-template-columns: 1fr;
  }

  .customer-doc-product {
    grid-template-columns: 64px minmax(0, 1fr);
    padding: 7px;
  }

  .customer-doc-product-image {
    width: 64px;
    height: 64px;
  }

  .customer-doc-product-body {
    gap: 3px;
  }

  .customer-doc-product-body strong {
    font-size: 13px;
  }

  .customer-doc-actions button,
  .customer-doc-actions .pdf-export-link {
    min-height: 40px;
  }
}

.customer-share-qr-modal {
  display: grid;
  gap: 12px;
}

.customer-share-qr-card {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 14px;
  text-align: center;
}

.customer-share-qr-head {
  display: grid;
  gap: 4px;
}

.customer-share-qr-head span {
  color: #0f5590;
  font-size: 12px;
  font-weight: 900;
}

.customer-share-qr-head strong {
  color: #0f172a;
  font-size: 22px;
}

.customer-share-qr-head small,
.customer-share-qr-card p {
  margin: 0;
  color: #52606d;
  font-size: 12px;
  line-height: 1.45;
  word-break: break-all;
}

.customer-share-qr-card img {
  width: min(280px, 76vw);
  aspect-ratio: 1;
  object-fit: contain;
  border: 8px solid #ffffff;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}

.customer-share-qr-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

.customer-share-qr-meta div {
  display: grid;
  gap: 3px;
  padding: 8px;
  border-radius: 8px;
  background: #f8fafc;
}

.customer-share-qr-meta span {
  color: #64748b;
  font-size: 12px;
}

.customer-share-qr-meta b {
  overflow: hidden;
  color: #0f172a;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contract-share-poster-workspace {
  display: grid;
  gap: 12px;
}

.contract-share-poster {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 12px;
  width: min(430px, 100%);
  margin: 0 auto;
  padding: 18px;
  border: 1px solid #cbdde8;
  border-radius: 10px;
  color: #0f172a;
  background:
    linear-gradient(180deg, #f8fbfc 0%, #ffffff 46%, #eef7f4 100%);
  box-shadow: 0 20px 52px rgba(15, 23, 42, 0.16);
}

.contract-share-poster::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, #0f5590, #0f8f8a, #b85649);
}

.contract-share-poster-topbar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0 2px;
}

.contract-share-brandmark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #0f5590;
  color: #ffffff;
  font-size: 20px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(15, 85, 144, 0.24);
}

.contract-share-poster-topbar div:nth-child(2) {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.contract-share-poster-topbar span {
  color: #52606d;
  font-size: 11px;
  font-weight: 900;
}

.contract-share-poster-topbar strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contract-share-poster-topbar em {
  padding: 5px 8px;
  border: 1px solid #cae8df;
  border-radius: 999px;
  background: #effaf6;
  color: #0f8f8a;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.contract-share-poster-hero {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid #d5e4ec;
  border-left: 5px solid #0f5590;
  border-radius: 8px;
  background:
    linear-gradient(135deg, #ffffff 0%, #f6fafb 100%);
}

.contract-share-poster-hero span,
.contract-share-poster-foot span {
  color: #0f5590;
  font-size: 12px;
  font-weight: 900;
}

.contract-share-poster-hero strong {
  color: #0f172a;
  font-size: 32px;
  line-height: 1.12;
}

.contract-share-poster-hero small {
  color: #52606d;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.contract-share-poster-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.contract-share-poster-trust span {
  position: relative;
  min-width: 0;
  padding: 8px 7px 8px 18px;
  border: 1px solid #dce8ed;
  border-radius: 8px;
  background: #fbfefd;
  color: #243447;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.3;
}

.contract-share-poster-trust span::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 8px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #0f8f8a;
}

.contract-share-poster-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.contract-share-poster-summary div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px 8px;
  border: 1px solid #dce8ed;
  border-radius: 8px;
  background: #ffffff;
  text-align: center;
}

.contract-share-poster-summary span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.contract-share-poster-summary b {
  overflow: hidden;
  color: #b85649;
  font-size: 16px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contract-share-poster-summary .is-logistics b {
  font-size: 13px;
}

.quote-share-poster-value {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(120px, 0.75fr);
  gap: 10px;
  align-items: stretch;
}

.quote-share-poster-value > div,
.quote-share-poster-value aside {
  min-width: 0;
  border: 1px solid #dce8ed;
  border-radius: 8px;
  background: #ffffff;
}

.quote-share-poster-value > div {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border-left: 4px solid #b85649;
}

.quote-share-poster-value > div span,
.quote-share-poster-value aside span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.quote-share-poster-value > div strong {
  color: #b85649;
  font-size: 25px;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.quote-share-poster-value > div small {
  color: #52606d;
  font-size: 11px;
  line-height: 1.35;
}

.quote-share-poster-value aside {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 8px;
  align-content: center;
  padding: 11px 12px;
}

.quote-share-poster-value aside b {
  overflow: hidden;
  color: #0f172a;
  font-size: 13px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contract-share-poster-qr {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 18px 16px 16px;
  border: 1px solid #d3e0e8;
  border-radius: 8px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfefd 100%);
  text-align: center;
}

.contract-share-poster-qr img {
  width: min(300px, 72vw);
  aspect-ratio: 1;
  object-fit: contain;
  border: 12px solid #ffffff;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
}

.contract-share-poster-qr strong {
  color: #0f172a;
  font-size: 18px;
  line-height: 1.25;
}

.contract-share-poster-qr span,
.contract-share-poster-link,
.contract-share-poster-products span {
  color: #52606d;
  font-size: 12px;
  line-height: 1.45;
}

.quote-share-poster-trustline {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid #cae8df;
  border-left: 4px solid #0f8f8a;
  border-radius: 8px;
  background: #f4fbf7;
}

.quote-share-poster-trustline strong {
  color: #0f5590;
  font-size: 13px;
  line-height: 1.25;
}

.quote-share-poster-trustline span {
  color: #243447;
  font-size: 12px;
  line-height: 1.35;
}

.contract-share-poster-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.contract-share-poster-flow span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  padding: 8px 6px;
  border: 1px solid #dce8ed;
  border-radius: 8px;
  background: #ffffff;
  color: #243447;
  font-size: 12px;
  font-weight: 900;
}

.contract-share-poster-flow b {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #0f5590;
  color: #ffffff;
  font-size: 11px;
  line-height: 1;
}

.contract-share-poster-products {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #dce8ed;
  border-radius: 8px;
  background: #fbfefd;
}

.contract-share-poster-products span {
  overflow: hidden;
  flex: 1 1 auto;
  color: #243447;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contract-share-poster-products em,
.contract-share-poster-foot b {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 6px;
  background: #0f5590;
  color: #ffffff;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.contract-share-poster-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  padding-top: 2px;
  text-align: center;
}

.contract-share-poster-foot span {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contract-share-poster-link,
.contract-share-poster-actions {
  width: min(680px, 100%);
  margin: 0 auto;
}

.contract-share-poster-link {
  padding: 8px 10px;
  border: 1px solid #d8e6ee;
  border-radius: 8px;
  background: #f8fafc;
  display: grid;
  gap: 3px;
  text-align: left;
  word-break: break-all;
}

.contract-share-poster-link b {
  color: #0f5590;
  font-size: 12px;
}

.contract-share-poster-link span {
  color: #52606d;
  font-size: 12px;
  line-height: 1.45;
}

.contract-share-send-guide {
  display: grid;
  gap: 4px;
  width: min(680px, 100%);
  margin: 0 auto;
  padding: 10px 12px;
  border: 1px solid #cae8df;
  border-left: 4px solid #128c45;
  border-radius: 8px;
  background: #f4fbf7;
}

.contract-share-send-guide strong {
  color: #0f5590;
  font-size: 13px;
}

.contract-share-send-guide span {
  color: #243447;
  font-size: 12px;
  line-height: 1.45;
}

.contract-poster-download-status {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: min(680px, 100%);
  margin: 0 auto;
  padding: 10px 12px;
  border: 1px solid #b9d7eb;
  border-radius: 8px;
  background: linear-gradient(135deg, #f8fbff, #f2fbf7);
  color: #243447;
  font-size: 12px;
}

.contract-poster-download-status:not(:empty) {
  display: flex;
}

.contract-poster-download-status strong {
  color: #0f4f82;
  font-size: 13px;
  white-space: nowrap;
}

.contract-poster-download-status span {
  flex: 1;
  min-width: 0;
  line-height: 1.45;
}

.contract-poster-download-status a {
  flex: none;
  padding: 7px 12px;
  border: 1px solid #0f5fa8;
  border-radius: 7px;
  background: #ffffff;
  color: #0f4f82;
  font-weight: 700;
  text-decoration: none;
}

.contract-share-poster-actions .wechat-share-button {
  border-color: #128c45;
  background: linear-gradient(135deg, #128c45, #0f8f8a);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(18, 140, 69, 0.18);
}

.contract-share-poster-actions .wechat-share-button:hover {
  border-color: #0d7a3a;
  background: linear-gradient(135deg, #0d7a3a, #0f837f);
}

@media (max-width: 1180px) {
  .settings-catalog-layout {
    grid-template-columns: 1fr;
  }

  .settings-catalog-main {
    grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .settings-catalog-layout,
  .settings-catalog-main {
    grid-template-columns: 1fr;
  }

  .settings-catalog-copy h3 {
    font-size: 24px;
  }

  .contract-share-poster {
    padding: 14px;
  }

  .quote-share-poster-value {
    grid-template-columns: 1fr;
  }

  .contract-share-poster-summary,
  .contract-share-poster-trust {
    grid-template-columns: 1fr;
  }

  .contract-share-poster-summary b {
    white-space: normal;
  }
}

.public-customer-doc-mode .content {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  padding: 0;
}

.public-customer-doc-mode #view {
  height: auto;
  margin-top: 0;
}

@media (min-width: 900px) {
  body.public-customer-doc-mode {
    overflow: auto;
    background: #e8f1f0;
  }

  .public-customer-doc-mode .content {
    display: block;
    height: auto;
    overflow: visible;
  }

  .public-customer-doc-mode .customer-mobile-doc-page {
    min-height: 100vh;
    padding: 22px;
  }
}

.quote-board {
  display: grid;
  gap: 12px;
}

.quote-price-approval-panel {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.quote-price-approval-panel .panel {
  margin: 0;
}

.catalog-workbench {
  display: grid;
  gap: 12px;
}

.catalog-conversion-workbench {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fbfb 0%, #ffffff 72%);
}

.catalog-conversion-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 16px;
  align-items: stretch;
}

.catalog-conversion-hero > div,
.catalog-conversion-hero aside {
  min-width: 0;
  padding: 14px;
  border: 1px solid #d9e7ed;
  border-radius: 8px;
  background: #ffffff;
}

.catalog-conversion-hero span,
.catalog-panel-title span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.catalog-conversion-hero h2 {
  margin: 5px 0 7px;
  font-size: 25px;
  line-height: 1.25;
}

.catalog-conversion-hero p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.catalog-conversion-hero aside {
  display: grid;
  gap: 8px;
  align-content: start;
}

.catalog-conversion-hero aside strong {
  color: var(--text);
  font-size: 22px;
}

.catalog-conversion-hero aside button {
  width: 100%;
}

.catalog-funnel {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.catalog-funnel-step {
  position: relative;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #d9e7ed;
  border-radius: 8px;
  background: #ffffff;
}

.catalog-funnel-step span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary-strong), var(--primary));
  font-size: 12px;
  font-weight: 900;
}

.catalog-funnel-step strong {
  color: var(--text);
  font-size: 14px;
}

.catalog-funnel-step b {
  color: var(--text);
  font-size: 22px;
}

.catalog-funnel-step small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-conversion-grid {
  display: grid;
  grid-template-columns: minmax(340px, 1.15fr) minmax(280px, 1fr) minmax(280px, 0.82fr);
  gap: 12px;
  align-items: stretch;
}

.catalog-priority-panel,
.catalog-heat-panel,
.catalog-link-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #d9e7ed;
  border-radius: 8px;
  background: #ffffff;
}

.catalog-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.catalog-panel-title h3 {
  margin: 0;
  font-size: 17px;
}

.catalog-priority-panel article {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas:
    "level body"
    "level action";
  gap: 9px;
  align-items: start;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, #ffffff);
  border-radius: 8px;
  background: var(--panel-soft);
}

.catalog-priority-panel article > b {
  grid-area: level;
  display: grid;
  place-items: center;
  min-height: 34px;
  align-self: stretch;
  border-radius: 8px;
  color: #ffffff;
  background: #0f5590;
}

.catalog-priority-panel article div {
  grid-area: body;
  display: grid;
  gap: 2px;
  min-width: 0;
}

.catalog-priority-panel article strong {
  line-height: 1.35;
}

.catalog-priority-panel article small {
  color: var(--muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.catalog-priority-panel article button {
  grid-area: action;
  justify-self: start;
  width: auto;
  max-width: 100%;
  min-width: 128px;
  min-height: 32px;
  padding: 6px 8px;
  white-space: normal;
}

.catalog-heat-list {
  display: grid;
  gap: 8px;
}

.catalog-heat-list article {
  display: grid;
  grid-template-columns: 26px 46px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border-radius: 8px;
  background: var(--panel-soft);
}

.catalog-heat-list article > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #e6f4f3;
  color: #0f766e;
  font-weight: 900;
}

.catalog-heat-list img {
  width: 46px;
  height: 38px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.catalog-heat-list div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.catalog-heat-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-heat-list strong {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.catalog-heat-list b {
  grid-column: 3;
  justify-self: start;
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
}

.catalog-heat-list small,
.catalog-link-panel p,
.catalog-link-panel span {
  color: var(--muted);
  font-size: 12px;
}

.catalog-link-panel p {
  display: grid;
  gap: 4px;
  margin: 0;
  overflow-wrap: anywhere;
  padding: 8px;
  border-radius: 8px;
  background: var(--panel-soft);
}

.catalog-link-panel p strong {
  color: var(--text);
  font-size: 15px;
}

.catalog-link-panel p small {
  color: var(--muted);
  line-height: 1.45;
}

.catalog-link-panel > button {
  width: 100%;
}

.catalog-link-panel div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 10px;
  align-items: start;
}

.catalog-link-panel b {
  color: var(--text);
  font-size: 13px;
}

@media (max-width: 1180px) {
  .catalog-conversion-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
  }

  .catalog-link-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .catalog-conversion-grid {
    grid-template-columns: 1fr;
  }

  .catalog-link-panel {
    grid-column: auto;
  }
}

.catalog-metric-grid {
  margin-bottom: 0;
}

.catalog-metric-card {
  display: grid;
  justify-items: start;
  gap: 5px;
  width: 100%;
  min-height: 88px;
  text-align: left;
}

.catalog-metric-card strong {
  color: var(--text);
}

.catalog-metric-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.catalog-metric-card.active {
  border-color: color-mix(in srgb, var(--primary) 58%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--primary) 8%, #ffffff), #ffffff 64%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 16%, transparent), transparent);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 14%, transparent);
}

.catalog-metric-card.active::after {
  content: "筛选中";
  justify-self: end;
  margin-top: -24px;
  padding: 2px 7px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary-strong), var(--primary));
  font-size: 11px;
  font-weight: 900;
}

.catalog-filter-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-soft) 74%, #ffffff);
}

.catalog-filter-summary > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.catalog-filter-summary strong {
  color: var(--text);
  font-size: 14px;
}

.catalog-filter-summary span {
  color: var(--muted);
  font-size: 12px;
}

.catalog-maintenance-desktop {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(180deg, #f8fbfb 0%, #ffffff 72%);
}

.catalog-maintenance-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 16px;
  align-items: start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.catalog-maintenance-head span {
  color: var(--primary);
  font-size: 13px;
  font-weight: 900;
}

.catalog-maintenance-head h2 {
  margin: 4px 0;
  font-size: 24px;
}

.catalog-maintenance-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.catalog-maintenance-owner {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid #d7e4eb;
  border-radius: 8px;
  background: #ffffff;
}

.catalog-maintenance-owner small {
  color: var(--muted);
}

.catalog-maintenance-owner strong {
  color: var(--text);
  font-size: 20px;
}

.catalog-maintenance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.catalog-maintenance-status {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #dbe6ed;
  border-left-width: 4px;
  border-radius: 8px;
  background: #ffffff;
}

.catalog-maintenance-status.ok {
  border-left-color: #0f8f8a;
}

.catalog-maintenance-status.warn {
  border-left-color: #d97706;
}

.catalog-maintenance-status span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.catalog-maintenance-status strong {
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-maintenance-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 14px;
  align-items: start;
}

.catalog-maintenance-main {
  display: grid;
  gap: 10px;
}

.catalog-maintenance-module {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #dbe6ed;
  border-radius: 8px;
  background: #ffffff;
}

.catalog-maintenance-module > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.catalog-maintenance-module span {
  color: #0f5590;
  font-size: 12px;
  font-weight: 900;
}

.catalog-maintenance-module strong {
  color: var(--text);
  font-size: 16px;
}

.catalog-maintenance-module small {
  color: var(--muted);
  line-height: 1.45;
}

.catalog-maintenance-side {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #dbe6ed;
  border-radius: 8px;
  background: #ffffff;
}

.catalog-maintenance-side strong {
  color: var(--text);
  font-size: 16px;
}

.catalog-maintenance-side p {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.settings-catalog-publish-panel {
  display: grid;
  gap: 14px;
}

.settings-catalog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
  gap: 16px;
  align-items: stretch;
}

.settings-catalog-main,
.settings-catalog-preview {
  min-width: 0;
  border: 1px solid #d8e6ee;
  border-radius: 10px;
  background: #ffffff;
}

.settings-catalog-main {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) minmax(240px, 1fr);
  gap: 16px;
  padding: 16px;
  overflow: hidden;
}

.settings-catalog-cover {
  position: relative;
  min-width: 0;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid #d9e5ec;
  border-radius: 10px;
  background: #eef6f5;
  aspect-ratio: 16 / 9;
}

.settings-catalog-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.settings-catalog-cover .catalog-visual-placeholder {
  min-height: 150px;
}

.settings-catalog-copy {
  display: grid;
  align-content: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 0;
}

.settings-catalog-copy > span {
  color: #0f5590;
  font-size: 13px;
  font-weight: 900;
}

.settings-catalog-copy h3 {
  margin: 0;
  color: #0f172a;
  font-size: 26px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.settings-catalog-copy p {
  margin: 0;
  color: #475569;
  line-height: 1.6;
}

.settings-catalog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-catalog-meta em {
  padding: 5px 8px;
  border: 1px solid #d8e6ee;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.settings-catalog-actions {
  justify-content: flex-start;
}

.settings-catalog-preview {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: linear-gradient(180deg, #f8fbfb 0%, #ffffff 70%);
}

.settings-catalog-link {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid #d8e6ee;
  border-radius: 8px;
  background: #f8fafc;
}

.settings-catalog-link strong {
  color: #0f5590;
  font-size: 13px;
}

.settings-catalog-link span {
  overflow-wrap: anywhere;
  color: #52606d;
  font-size: 12px;
  line-height: 1.45;
}

.quote-tier-editor {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d8e6ee;
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.quote-tier-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.quote-tier-editor-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.quote-tier-editor-head strong {
  color: #0f172a;
  font-size: 15px;
}

.quote-tier-editor-head span,
.quote-tier-editor-note {
  color: #52606d;
  font-size: 12px;
  line-height: 1.45;
}

.quote-tier-list {
  display: grid;
  gap: 8px;
}

.quote-tier-row {
  display: grid;
  grid-template-columns: 72px repeat(3, minmax(120px, 1fr)) minmax(132px, 0.8fr) auto;
  gap: 10px;
  align-items: end;
  min-width: 0;
  padding: 10px;
  border: 1px solid #e1ebf2;
  border-radius: 8px;
  background: #ffffff;
}

.quote-tier-index {
  align-self: center;
  color: #0f5590;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.quote-tier-row label {
  margin: 0;
  min-width: 0;
}

.quote-tier-row input {
  width: 100%;
}

.quote-tier-row button {
  min-width: 64px;
}

.quote-tier-reference {
  display: grid;
  gap: 2px;
  min-height: 40px;
  padding: 8px 9px;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  background: #f0fdf4;
}

.quote-tier-reference span,
.quote-tier-reference small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.quote-tier-reference strong {
  color: var(--green);
  font-size: 14px;
  line-height: 1.25;
}

.quote-discount-field {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #e1ebf2;
  border-radius: 8px;
  background: #ffffff;
}

.quote-discount-field label {
  margin: 0;
}

.quote-discount-reference {
  display: grid;
  gap: 2px;
  padding: 8px 9px;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  background: #f0fdf4;
}

.quote-discount-reference span,
.quote-discount-reference small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.quote-discount-reference strong {
  color: var(--green);
  font-size: 14px;
  line-height: 1.25;
}

.price-center-console {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, var(--primary-soft) 30%, #ffffff) 100%);
}

.price-center-console-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}

.price-center-console-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.price-center-console-head span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.price-center-console-head strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.25;
}

.price-center-console-head small,
.price-center-console-grid small,
.price-center-console-rule span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.price-center-console-head b {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--success) 24%, var(--line));
  border-radius: 999px;
  background: #ffffff;
  color: var(--success-strong);
  font-size: 13px;
}

.price-center-console-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.price-center-console-grid > div,
.price-center-console-rule {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--line) 84%, #ffffff);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
}

.price-center-console-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.price-center-console-grid strong,
.price-center-console-rule strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
}

.price-center-admin-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
  border-radius: 8px;
  background: #ffffff;
}

.price-center-admin-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.price-center-admin-head > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.price-center-admin-head span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.price-center-admin-head strong,
.price-center-admin-card h3 {
  margin: 0;
  color: var(--text);
  line-height: 1.3;
}

.price-center-admin-head strong {
  font-size: 18px;
}

.price-center-admin-head small,
.price-center-admin-card p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.price-center-admin-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.price-center-admin-flow article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  align-items: start;
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary-soft) 12%, #ffffff);
}

.price-center-admin-flow b {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--primary);
  color: #ffffff;
  font-size: 12px;
}

.price-center-admin-flow strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

.price-center-admin-flow span {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.price-center-admin-grid,
.price-center-maintenance-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.price-center-admin-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #e1ebf2;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary-soft) 12%, #ffffff);
}

.price-center-admin-card h3 {
  font-size: 15px;
}

.inline-form-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}

.inline-form-grid label {
  margin: 0;
  min-width: 0;
}

.inline-form-grid button {
  min-height: 40px;
}

.price-center-bulk-text {
  width: 100%;
  min-height: 128px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.6;
}

.price-center-bulk-result {
  display: grid;
  gap: 6px;
}

.price-center-bulk-result ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.price-center-preview-result {
  display: grid;
  gap: 4px;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px dashed color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: 8px;
  background: #ffffff;
}

.price-center-preview-result strong {
  color: var(--primary);
  font-size: 18px;
}

.price-center-preview-summary {
  display: grid;
  gap: 2px;
}

.price-center-preview-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.price-center-preview-kpis span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 8px;
  border-radius: 8px;
  background: #f7fbfd;
}

.price-center-preview-kpis b {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.price-center-preview-kpis small {
  color: var(--muted);
  font-size: 11px;
}

.price-center-preview-chain {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.price-center-preview-chain span {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
}

.price-center-preview-chain span.active {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background: color-mix(in srgb, var(--primary) 12%, #ffffff);
  color: var(--primary);
  font-weight: 800;
}

.price-center-preview-result > span,
.price-center-preview-summary > span,
.price-center-preview-result em,
.danger-text {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.price-center-preview-result em {
  color: #9a3412;
  font-style: normal;
}

.quote-profit-line {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
}

.quote-profit-line.ok {
  color: #15803d;
}

.quote-profit-line.warn {
  color: #9a3412;
}

.quote-profit-line.danger {
  color: #b42318;
}

.quote-profit-line.muted {
  color: var(--muted);
}

.quote-risk-badge,
.quote-risk-badges em {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 4px;
  margin-right: 4px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.3;
}

.quote-risk-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.quote-risk-badge.ok,
.quote-risk-badges em.ok {
  background: #ecfdf3;
  color: #15803d;
}

.quote-risk-badges em.info {
  background: #eff6ff;
  color: #1d4ed8;
}

.quote-risk-badges em.warn {
  background: #fff7ed;
  color: #9a3412;
}

.quote-risk-badges em.danger {
  background: #fef2f2;
  color: #b42318;
}

.danger-text {
  color: #b42318 !important;
}

.table-wrap.mini table {
  min-width: 0;
}

.table-wrap.mini th,
.table-wrap.mini td {
  padding: 8px;
  font-size: 12px;
}

.reverse-pricing-preview {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--green) 24%, var(--line));
  border-radius: 8px;
  background: #fbfefd;
}

.reverse-pricing-inputs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.reverse-pricing-result {
  display: grid;
  gap: 2px;
  min-height: 40px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--green) 24%, var(--line));
  border-radius: 8px;
  background: #ffffff;
}

.reverse-pricing-result span,
.reverse-pricing-result small {
  color: var(--muted);
  font-size: 12px;
}

.reverse-pricing-result strong {
  color: var(--green);
  font-size: 18px;
  line-height: 1.25;
}

.reverse-pricing-table table {
  min-width: 760px;
}

.reverse-price-cell {
  display: grid;
  gap: 2px;
  min-width: 118px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.reverse-price-cell strong {
  color: var(--text);
  font-size: 14px;
}

.reverse-price-cell span,
.reverse-price-cell small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.reverse-price-cell.ok {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.reverse-price-cell.warn {
  border-color: #fed7aa;
  background: #fff7ed;
}

.reverse-price-cell.warn strong,
.reverse-price-cell.warn small {
  color: #9a3412;
}

.reverse-price-cell.danger {
  border-color: #fecaca;
  background: #fef2f2;
}

.reverse-price-cell.danger strong,
.reverse-price-cell.danger small {
  color: #b42318;
}

.quote-risk-line {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  background: #fff7ed;
  color: #7c2d12;
}

.quote-risk-line b {
  font-size: 13px;
}

.quote-risk-line span {
  color: #9a3412;
  font-size: 12px;
  line-height: 1.45;
}

.settings-pricing-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.settings-pricing-flow > div {
  position: relative;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #d8e6ee;
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.settings-pricing-flow strong {
  color: #0f5590;
  font-size: 14px;
}

.settings-pricing-flow span {
  color: #52606d;
  font-size: 12px;
  line-height: 1.45;
}

.settings-visibility-panel {
  display: grid;
  gap: 14px;
}

.settings-visibility-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.settings-visibility-summary > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid #d8e6ee;
  border-radius: 8px;
  background: #f8fbfb;
}

.settings-visibility-summary strong {
  display: block;
  color: #0f172a;
  font-size: 22px;
  line-height: 1.1;
}

.settings-visibility-summary span {
  display: block;
  margin-top: 5px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.settings-visibility-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.settings-visibility-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid #d8e6ee;
  border-left: 4px solid #1f5aa6;
  border-radius: 8px;
  background: #ffffff;
}

.settings-visibility-card.sales {
  border-left-color: #0f8f8a;
}

.settings-visibility-card.ops {
  border-left-color: #64748b;
}

.settings-visibility-card.staff {
  border-left-color: #1f8f4d;
}

.settings-visibility-card.customer {
  border-left-color: #b45309;
}

.settings-visibility-card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.settings-visibility-card-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.settings-visibility-card-head span {
  color: #0f5590;
  font-size: 12px;
  font-weight: 900;
}

.settings-visibility-card-head strong {
  color: #0f172a;
  font-size: 20px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.settings-visibility-block {
  min-width: 0;
  padding: 10px;
  border: 1px solid #e1ebf2;
  border-radius: 8px;
  background: #f8fafc;
}

.settings-visibility-block small {
  display: block;
  margin-bottom: 5px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.settings-visibility-block p,
.settings-visibility-rule {
  margin: 0;
  color: #1e293b;
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.settings-visibility-rule {
  padding: 10px 12px;
  border-left: 3px solid #128f8a;
  border-radius: 8px;
  background: #eefbf9;
}

.settings-visibility-actions {
  justify-content: flex-start;
}

.settings-role-audit-panel {
  display: grid;
  gap: 14px;
}

.settings-role-audit-tip {
  padding: 10px 12px;
  border-left: 3px solid #1f5aa6;
  border-radius: 8px;
  background: #f4f8fc;
  color: #334155;
  font-size: 13px;
  line-height: 1.55;
}

.settings-maint-entry-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d8e6ee;
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.settings-maint-entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.settings-maint-entry-head strong {
  color: #0f172a;
  font-size: 16px;
}

.settings-maint-entry-head span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.settings-maint-entry-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.settings-maint-entry-grid button {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 64px;
  padding: 9px 10px;
  border: 1px solid #d8e6ee;
  border-radius: 8px;
  background: #ffffff;
  text-align: left;
  box-shadow: none;
}

.settings-maint-entry-grid button:hover,
.settings-entry-chip:hover {
  border-color: #1f5aa6;
  background: #f0f7ff;
}

.settings-maint-entry-grid strong {
  color: #0f5590;
  font-size: 13px;
}

.settings-maint-entry-grid span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}

.settings-role-audit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.settings-role-audit-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid #d8e6ee;
  border-left: 4px solid #128f8a;
  border-radius: 8px;
  background: #ffffff;
}

.settings-role-audit-card.has-risk {
  border-left-color: #c24c3d;
}

.settings-role-audit-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.settings-role-audit-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.settings-role-audit-head strong {
  color: #0f172a;
  font-size: 18px;
  line-height: 1.25;
}

.settings-role-audit-head span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.settings-role-audit-head em {
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 5px 9px;
  border: 1px solid #b9e8cb;
  border-radius: 999px;
  background: #effbf3;
  color: #16834b;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.settings-role-audit-card.has-risk .settings-role-audit-head em {
  border-color: #f2c4bc;
  background: #fff5f2;
  color: #a83d30;
}

.settings-role-audit-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.settings-role-audit-metrics > div {
  min-width: 0;
  padding: 9px;
  border: 1px solid #e1ebf2;
  border-radius: 8px;
  background: #f8fafc;
}

.settings-role-audit-metrics b {
  display: block;
  color: #0f172a;
  font-size: 18px;
  line-height: 1.1;
}

.settings-role-audit-metrics span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
}

.settings-role-audit-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.settings-role-audit-columns > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid #e1ebf2;
  border-radius: 8px;
  background: #f8fafc;
}

.settings-role-audit-columns small {
  display: block;
  margin-bottom: 7px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.settings-role-audit-columns p {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.settings-role-audit-columns p span,
.settings-entry-chip {
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid #d8e6ee;
  border-radius: 999px;
  background: #ffffff;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.settings-entry-chip {
  min-height: 30px;
  cursor: pointer;
}

.settings-role-audit-columns p span.risk,
.settings-entry-chip.risk {
  border-color: #f2c4bc;
  background: #fff5f2;
  color: #a83d30;
}

.settings-role-audit-warning {
  padding: 9px 10px;
  border: 1px solid #f2c4bc;
  border-radius: 8px;
  background: #fff8f5;
  color: #8f3328;
  font-size: 12px;
  line-height: 1.45;
}

.settings-role-audit-actions {
  justify-content: flex-start;
}

.backend-launch-panel {
  display: grid;
  gap: 14px;
}

.backend-launch-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.backend-launch-summary > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid #d8e6ee;
  border-left: 3px solid #128f8a;
  border-radius: 8px;
  background: #f8fbfb;
}

.backend-launch-summary span,
.backend-launch-summary em {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.backend-launch-summary strong {
  display: block;
  margin: 5px 0;
  color: #0f172a;
  font-size: 18px;
  line-height: 1.25;
}

.backend-launch-actions {
  justify-content: flex-start;
}

.backend-launch-list {
  display: grid;
  gap: 12px;
}

.backend-launch-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #d8e6ee;
  border-left: 4px solid #1f5aa6;
  border-radius: 8px;
  background: #ffffff;
}

.backend-launch-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.backend-launch-card-head > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.backend-launch-card-head strong {
  min-width: 0;
  color: #0f172a;
  font-size: 16px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.backend-launch-status-label {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid #d8e6ee;
  border-radius: 999px;
  background: #f8fafc;
  color: #52606d;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.backend-launch-card.is-doing {
  border-left-color: #0f8f8a;
}

.backend-launch-card.is-done {
  border-left-color: #1f8f4d;
}

.backend-launch-card.is-overdue {
  border-left-color: #b42318;
  background: #fffafa;
}

.backend-launch-card.is-doing .backend-launch-status-label {
  border-color: #b7e4df;
  background: #eefbf9;
  color: #0f837f;
}

.backend-launch-card.is-done .backend-launch-status-label {
  border-color: #b9e8cb;
  background: #effbf3;
  color: #16834b;
}

.backend-launch-card.is-overdue .backend-launch-status-label {
  border-color: #f2c4bc;
  background: #fff1f1;
  color: #b42318;
}

.backend-launch-statusbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.backend-launch-statusbar button {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid #d8e6ee;
  border-radius: 7px;
  background: #ffffff;
  color: #334155;
  font-size: 13px;
  font-weight: 900;
}

.backend-launch-statusbar button.active {
  border-color: #0f5fa8;
  background: linear-gradient(135deg, #1f5aa6, #0f8f8a);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(31, 90, 166, 0.16);
}

.backend-launch-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(220px, 0.95fr) minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 10px;
  align-items: stretch;
}

.backend-launch-card-grid > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid #e1ebf2;
  border-radius: 8px;
  background: #f8fafc;
}

.backend-launch-card-grid span {
  display: block;
  margin-bottom: 5px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.backend-launch-card-grid p {
  margin: 0;
  color: #1e293b;
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.backend-launch-card-grid ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.backend-launch-card-grid li {
  position: relative;
  padding-left: 12px;
  color: #1e293b;
  font-size: 13px;
  line-height: 1.45;
}

.backend-launch-card-grid li::before {
  content: "";
  position: absolute;
  top: 0.66em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #128f8a;
}

.trial-readiness-meta {
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) minmax(132px, 0.7fr) minmax(220px, 1.4fr);
  gap: 8px;
  padding: 10px;
  border: 1px solid #e1ebf2;
  border-radius: 8px;
  background: #f8fbfb;
}

.trial-readiness-meta label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #52606d;
  font-size: 12px;
  font-weight: 800;
}

.trial-readiness-meta input {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 7px 9px;
  border: 1px solid #d8e6ee;
  border-radius: 7px;
  background: #ffffff;
  color: #0f172a;
  font: inherit;
}

.trial-template-panel {
  margin-top: 14px;
}

.trial-template-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.trial-template-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 13px;
  border: 1px solid #d8e6ee;
  border-radius: 8px;
  background: #ffffff;
}

.trial-template-card > div:first-child {
  display: grid;
  gap: 3px;
}

.trial-template-card strong {
  color: #0f172a;
  font-size: 15px;
  line-height: 1.35;
}

.trial-template-card span,
.trial-template-card small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.trial-template-card p {
  min-height: 54px;
  margin: 0;
  color: #334155;
  font-size: 13px;
  line-height: 1.5;
}

.trial-template-card small {
  display: block;
  min-height: 36px;
  overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
  .backend-launch-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trial-template-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .settings-visibility-summary,
  .settings-visibility-grid,
  .settings-role-audit-grid,
  .backend-launch-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .settings-visibility-summary,
  .settings-visibility-grid,
  .settings-role-audit-grid,
  .settings-role-audit-columns,
  .backend-launch-summary {
    grid-template-columns: 1fr;
  }

  .settings-role-audit-head {
    flex-direction: column;
  }

  .settings-role-audit-metrics {
    grid-template-columns: 1fr;
  }

  .backend-launch-card-head,
  .backend-launch-card-head > div {
    align-items: flex-start;
  }

  .backend-launch-card-head {
    flex-direction: column;
  }

  .backend-launch-card-grid {
    grid-template-columns: 1fr;
  }

  .trial-readiness-meta {
    grid-template-columns: 1fr;
  }

  .trial-template-grid {
    grid-template-columns: 1fr;
  }
}

.catalog-maintenance-qr {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 10px;
  border: 1px solid #dbe6ed;
  border-radius: 8px;
  background: #f8fafc;
}

.catalog-maintenance-qr img {
  width: min(180px, 100%);
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 6px;
  background: #ffffff;
}

.catalog-maintenance-qr span,
.catalog-maintenance-mini span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.catalog-maintenance-mini {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.catalog-maintenance-mini span {
  padding: 7px;
  border-radius: 6px;
  background: var(--panel-soft);
  text-align: center;
}

.catalog-maintenance-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.8fr);
  gap: 16px;
  align-items: stretch;
}

.catalog-maintenance-cover-card,
.catalog-maintenance-poster-card,
.catalog-assets-live {
  min-width: 0;
  border: 1px solid #d8e6ee;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.catalog-maintenance-cover-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  overflow: hidden;
}

.catalog-maintenance-cover-art,
.catalog-mini-poster-visual,
.catalog-asset-image-preview,
.catalog-share-poster-image {
  position: relative;
  overflow: hidden;
  border: 1px solid #d9e5ec;
  border-radius: 10px;
  background: #eef6f5;
}

.catalog-maintenance-cover-art {
  min-height: 0;
  aspect-ratio: 16 / 9;
}

.catalog-maintenance-cover-art img,
.catalog-mini-poster-visual img,
.catalog-asset-image-preview img,
.catalog-share-poster-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.catalog-visual-placeholder {
  position: relative;
  display: grid;
  place-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  min-height: 160px;
  color: #0f5590;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(15, 143, 138, 0.16), rgba(15, 85, 144, 0.14)),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.6) 0 12px, rgba(255, 255, 255, 0.2) 12px 24px);
}

.catalog-visual-placeholder span {
  position: relative;
  z-index: 1;
  font-size: 13px;
  font-weight: 900;
}

.catalog-visual-placeholder strong {
  position: relative;
  z-index: 1;
  color: #0f172a;
  font-size: 34px;
  letter-spacing: 0;
}

.catalog-visual-placeholder i {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 74px;
  height: 50px;
  border: 4px solid rgba(15, 85, 144, 0.36);
  border-radius: 10px;
}

.catalog-visual-placeholder i::before,
.catalog-visual-placeholder i::after {
  content: "";
  position: absolute;
  background: rgba(15, 143, 138, 0.42);
}

.catalog-visual-placeholder i::before {
  inset: 20px 0 auto;
  height: 4px;
}

.catalog-visual-placeholder i::after {
  inset: 0 auto 0 31px;
  width: 4px;
}

.catalog-maintenance-cover-copy {
  display: grid;
  align-content: center;
  gap: 12px;
  min-width: 0;
}

.catalog-maintenance-cover-copy > span,
.catalog-maintenance-poster-head span,
.catalog-assets-live-head span {
  color: #0f5590;
  font-size: 13px;
  font-weight: 900;
}

.catalog-maintenance-cover-copy h2 {
  margin: 0;
  color: #0f172a;
  font-size: 34px;
  line-height: 1.1;
}

.catalog-maintenance-cover-copy p {
  margin: 0;
  color: #475569;
  font-size: 15px;
  line-height: 1.6;
}

.catalog-maintenance-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.catalog-maintenance-poster-card {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.catalog-maintenance-poster-head,
.catalog-assets-live-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.catalog-maintenance-poster-head button {
  min-height: 32px;
  padding: 6px 10px;
}

.catalog-mini-poster {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d8e6ee;
  border-radius: 10px;
  background: linear-gradient(180deg, #fbfefe, #edf7f6);
}

.catalog-mini-poster-visual {
  min-height: 0;
  aspect-ratio: 2 / 1;
}

.catalog-mini-poster-copy {
  display: grid;
  gap: 3px;
}

.catalog-mini-poster-copy span {
  color: #0f5590;
  font-size: 12px;
  font-weight: 900;
}

.catalog-mini-poster-copy strong {
  color: #0f172a;
  font-size: 20px;
  line-height: 1.15;
}

.catalog-mini-poster-copy small {
  color: #52606d;
  line-height: 1.35;
}

.catalog-mini-poster-stats {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr;
  gap: 4px;
  align-items: baseline;
  padding: 8px;
  border-radius: 8px;
  background: #ffffff;
}

.catalog-mini-poster-stats b {
  color: #b85649;
  font-size: 20px;
}

.catalog-mini-poster-stats span,
.catalog-mini-poster-qr span,
.catalog-mini-poster-qr small {
  color: #52606d;
  font-size: 12px;
  font-weight: 800;
}

.catalog-mini-poster-qr {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 10px;
  border-radius: 8px;
  background: #ffffff;
}

.catalog-mini-poster-qr img {
  width: 120px;
  aspect-ratio: 1;
  object-fit: contain;
}

.catalog-maintenance-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.catalog-maintenance-module.visual {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-content: start;
  min-height: 150px;
  padding: 14px;
  border-color: #d8e6ee;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.catalog-maintenance-module.visual > span {
  width: max-content;
  padding: 4px 7px;
  border-radius: 6px;
  background: #e9f5f4;
}

.catalog-maintenance-module.visual button {
  align-self: end;
  width: 100%;
}

.catalog-maintenance-link-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #d8e6ee;
  border-radius: 8px;
  background: #ffffff;
}

.catalog-maintenance-link-strip > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.catalog-maintenance-link-strip strong {
  color: #0f172a;
}

.catalog-maintenance-link-strip > div:first-child span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-assets-editor {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) 340px;
  gap: 16px;
  align-items: start;
}

.catalog-assets-form,
.catalog-assets-live {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.catalog-assets-live {
  padding: 12px;
}

.catalog-asset-preview {
  min-height: 150px;
}

.catalog-asset-image-preview {
  min-height: 0;
  aspect-ratio: 16 / 9;
}

.catalog-asset-image-preview.poster {
  min-height: 0;
  aspect-ratio: 2 / 1;
}

.catalog-asset-image-preview.mobile-poster {
  min-height: 0;
  max-height: 560px;
  aspect-ratio: 3 / 4;
}

.catalog-asset-spec-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.catalog-asset-spec {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #d8e6ee;
  border-left: 4px solid #0f8f8a;
  border-radius: 8px;
  background: #ffffff;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.catalog-asset-spec.mobile {
  border-left-color: #0f5590;
}

.catalog-asset-spec:hover,
.catalog-asset-spec:focus-visible,
.catalog-asset-spec.active {
  border-color: color-mix(in srgb, var(--primary) 48%, #d8e6ee);
  border-left-color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 70%, #ffffff);
  box-shadow: 0 10px 22px rgba(15, 85, 144, 0.1);
  outline: 0;
}

.catalog-asset-spec.active::after {
  content: "褰撳墠缁存姢";
  width: max-content;
  margin-top: 2px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #0f5590;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
}

.catalog-asset-spec span {
  color: #52606d;
  font-size: 12px;
  font-weight: 900;
}

.catalog-asset-spec strong {
  color: #0f172a;
  font-size: 16px;
}

.catalog-asset-spec small,
.catalog-asset-file-label small {
  color: var(--muted);
  line-height: 1.45;
}

.catalog-asset-file-label {
  display: grid;
  gap: 6px;
}

.catalog-asset-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #d8e6ee;
  border-radius: 10px;
  background: #ffffff;
}

.catalog-asset-panel[hidden] {
  display: none;
}

.catalog-asset-file-label > span {
  color: var(--text);
  font-weight: 900;
}

.catalog-asset-dimensions {
  padding: 8px 10px;
  border: 1px solid #d8e6ee;
  border-radius: 8px;
  background: #f8fafc;
  color: #52606d;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.catalog-asset-dimensions.ok {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.catalog-asset-dimensions.warn {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #9a3412;
}

.catalog-maintenance-guide {
  display: grid;
  gap: 12px;
}

.catalog-maintenance-guide section {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid #dbe6ed;
  border-radius: 8px;
  background: #ffffff;
}

.catalog-maintenance-guide h3 {
  margin: 0;
  font-size: 16px;
}

.catalog-maintenance-guide p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.catalog-customer-cell,
.catalog-product-cell {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.catalog-customer-cell small,
.catalog-product-cell small {
  color: var(--muted);
  line-height: 1.4;
}

.catalog-product-cell {
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  min-width: 220px;
}

.catalog-inquiry-panel table {
  table-layout: fixed;
  min-width: 0;
}

.catalog-inquiry-panel th:nth-child(1),
.catalog-inquiry-panel td:nth-child(1) {
  width: 18%;
}

.catalog-inquiry-panel th:nth-child(2),
.catalog-inquiry-panel td:nth-child(2) {
  width: 23%;
}

.catalog-inquiry-panel th:nth-child(3),
.catalog-inquiry-panel td:nth-child(3) {
  width: 24%;
}

.catalog-inquiry-panel th:nth-child(4),
.catalog-inquiry-panel td:nth-child(4) {
  width: 13%;
}

.catalog-inquiry-panel th:nth-child(5),
.catalog-inquiry-panel td:nth-child(5) {
  width: 14%;
}

.catalog-inquiry-panel th:nth-child(6),
.catalog-inquiry-panel td:nth-child(6) {
  width: 10%;
}

.catalog-inquiry-panel td {
  min-width: 0;
  overflow: hidden;
}

.catalog-inquiry-panel .catalog-product-cell {
  grid-template-columns: 52px minmax(0, 1fr);
  min-width: 0;
}

.catalog-inquiry-panel .product-photo,
.catalog-inquiry-panel .catalog-product-placeholder {
  width: 52px;
  height: 42px;
}

.catalog-inquiry-panel .catalog-product-cell strong,
.catalog-inquiry-panel .catalog-product-cell small,
.catalog-inquiry-panel .catalog-product-cell em,
.catalog-inquiry-panel .catalog-customer-cell strong,
.catalog-inquiry-panel .catalog-customer-cell small {
  display: block;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-inquiry-panel .catalog-product-cell em {
  color: #0f5590;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.catalog-demand-cell {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.catalog-stage-cell {
  display: grid;
  gap: 5px;
  align-content: start;
  min-width: 0;
}

.catalog-stage-cell small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-next-action {
  justify-content: flex-start;
}

.catalog-next-action button {
  width: 100%;
  min-width: 0;
  padding-inline: 8px;
  white-space: normal;
}

.catalog-demand-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.catalog-demand-head strong {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-demand-tags,
.catalog-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.catalog-demand-tags span,
.catalog-demand-tags em,
.catalog-detail-tags span {
  max-width: 100%;
  padding: 2px 6px;
  border-radius: 6px;
  background: #e9f5f4;
  color: #0f5590;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.catalog-demand-tags span {
  overflow: hidden;
  max-width: 120px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-demand-text {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.catalog-inquiry-detail {
  display: grid;
  gap: 14px;
}

.catalog-inquiry-detail section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dbe6ed;
  border-radius: 8px;
  background: #ffffff;
}

.catalog-inquiry-detail h3 {
  margin: 0;
  font-size: 16px;
}

.catalog-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.catalog-detail-grid > div,
.catalog-detail-requirement {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
  background: var(--panel-soft);
}

.catalog-detail-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.catalog-detail-grid strong {
  overflow-wrap: anywhere;
}

.catalog-detail-requirement p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  white-space: pre-wrap;
}

.catalog-product-placeholder {
  display: grid;
  place-items: center;
  width: 72px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.catalog-flow-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 180px;
}

.catalog-preview-grid,
.catalog-public-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.catalog-preview-card,
.catalog-public-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.catalog-preview-card img,
.catalog-public-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
}

.catalog-preview-card span,
.catalog-public-card span,
.catalog-public-card small {
  color: var(--muted);
}

.catalog-poster-workspace {
  display: grid;
  gap: 14px;
}

.catalog-share-poster {
  display: grid;
  gap: 16px;
  width: min(430px, 100%);
  margin: 0 auto;
  padding: 22px;
  border: 1px solid #d6e4ee;
  border-radius: 10px;
  color: #111827;
  background:
    linear-gradient(180deg, #f9fbfc 0%, #ffffff 42%, #edf7f6 100%);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.16);
}

.catalog-share-poster-visual {
  gap: 14px;
  padding: 18px;
}

.catalog-share-poster-hero {
  position: relative;
  overflow: hidden;
  min-height: 0;
  aspect-ratio: 2 / 1;
  border: 1px solid #d9e5ec;
  border-radius: 10px;
  background: #eef6f5;
}

.catalog-share-poster-image {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
}

.catalog-share-poster-hero-copy {
  position: absolute;
  inset: auto 14px 14px;
  display: grid;
  gap: 5px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(10px);
}

.catalog-share-poster-hero-copy span {
  color: #0f5590;
  font-size: 12px;
  font-weight: 900;
}

.catalog-share-poster-hero-copy strong {
  color: #0f172a;
  font-size: 26px;
  line-height: 1.12;
}

.catalog-share-poster-hero-copy small {
  color: #52606d;
  font-size: 13px;
  font-weight: 800;
}

.catalog-share-poster-head {
  display: grid;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 2px solid #0f8f8a;
}

.catalog-share-poster-head span {
  color: #0f5590;
  font-size: 13px;
  font-weight: 900;
}

.catalog-share-poster-head strong {
  color: #0f172a;
  font-size: 30px;
  line-height: 1.15;
}

.catalog-share-poster-head small {
  color: #52606d;
  font-size: 14px;
  font-weight: 700;
}

.catalog-share-poster-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.catalog-share-poster-body div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 8px;
  border: 1px solid #dce8ed;
  border-radius: 8px;
  background: #ffffff;
  text-align: center;
}

.catalog-share-poster-body b {
  color: #b85649;
  font-size: 24px;
  line-height: 1;
}

.catalog-share-poster-body span {
  color: #52606d;
  font-size: 12px;
  font-weight: 800;
}

.catalog-share-poster-points {
  display: grid;
  gap: 8px;
}

.catalog-share-poster-points span {
  display: block;
  padding-left: 10px;
  border-left: 3px solid #0f8f8a;
  color: #243447;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.catalog-share-qr-card {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 16px;
  border: 1px solid #d7e0e7;
  border-radius: 8px;
  background: #ffffff;
  text-align: center;
}

.catalog-share-qr-card img {
  width: min(300px, 72vw);
  aspect-ratio: 1;
  object-fit: contain;
  border: 8px solid #ffffff;
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}

.catalog-share-qr-card strong {
  color: #0f172a;
  font-size: 18px;
}

.catalog-share-qr-card span {
  color: #0f5590;
  font-weight: 900;
}

.catalog-share-poster-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 4px;
}

.catalog-share-poster-foot span {
  color: #52606d;
  font-size: 12px;
  line-height: 1.4;
}

.catalog-share-poster-foot b {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 6px;
  background: #0f5590;
  color: #ffffff;
  font-size: 12px;
}

.catalog-poster-actions,
.catalog-poster-link {
  width: min(680px, 100%);
  margin: 0 auto;
}

.catalog-poster-link {
  overflow-wrap: anywhere;
}

.catalog-product-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.catalog-product-signals em {
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--panel-soft);
  color: color-mix(in srgb, var(--text) 72%, var(--muted));
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.catalog-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.catalog-card-actions button {
  min-width: 0;
  padding-inline: 8px;
}

.catalog-selection-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.catalog-selection-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.catalog-selection-title span {
  color: var(--muted);
  font-size: 13px;
  text-align: right;
}

.catalog-filter-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.catalog-filter-row > span {
  padding-top: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.catalog-filter-row > div {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.catalog-filter-row button {
  flex: 0 0 auto;
  border-color: var(--line);
  background: var(--panel-soft);
}

.catalog-filter-row button.active {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
  background: var(--primary-soft);
  color: var(--primary-strong);
}

.catalog-filter-row small {
  color: var(--muted);
}

.catalog-public-tools,
.catalog-public-section {
  display: grid;
  gap: 12px;
}

.catalog-public-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.catalog-public-search input {
  min-width: 0;
  border: 0;
  background: var(--panel-soft);
}

.catalog-category-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 8px;
  scrollbar-width: thin;
}

.catalog-category-strip button {
  flex: 0 0 auto;
  border-color: var(--line);
  background: #fff;
}

.catalog-category-strip button.active {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
  background: var(--primary-soft);
  color: var(--primary-strong);
}

.catalog-category-strip span {
  color: var(--muted);
  font-size: 12px;
}

.catalog-sort-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.catalog-sort-row label {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.catalog-sort-row select {
  min-height: 36px;
}

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

.catalog-public-section-head h3 {
  margin: 0;
  font-size: 18px;
}

.catalog-public-section-head span {
  color: var(--muted);
  font-size: 13px;
}

.catalog-public-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.catalog-load-more {
  justify-content: center;
  padding: 6px 0;
}

.catalog-book-shell {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 66%, #ffffff), #fffefd 48%, color-mix(in srgb, var(--accent-soft) 48%, #ffffff));
}

.catalog-book-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.catalog-book-summary > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.catalog-book-summary span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
}

.catalog-book-summary strong {
  font-size: 20px;
}

.catalog-book-summary small {
  color: var(--muted);
}

.catalog-book-summary > div:last-child {
  display: grid;
  justify-items: center;
  min-width: 76px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
}

.catalog-book-summary b {
  font-size: 24px;
  line-height: 1;
}

.catalog-book {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  min-height: 520px;
  perspective: 1200px;
}

.catalog-book-spine {
  position: absolute;
  inset: 12px auto 12px 50%;
  z-index: 2;
  width: 14px;
  transform: translateX(-50%);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(15, 23, 42, 0.18), rgba(255, 255, 255, 0.76), rgba(15, 23, 42, 0.14));
  box-shadow: 0 0 18px rgba(15, 23, 42, 0.18);
  pointer-events: none;
}

.catalog-print-leaf {
  display: grid;
  min-width: 0;
  min-height: 560px;
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--line) 84%, #ffffff);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98), color-mix(in srgb, var(--panel-soft) 34%, #ffffff)),
    #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
}

.catalog-print-leaf:first-of-type {
  border-radius: 8px 2px 2px 8px;
}

.catalog-print-leaf + .catalog-print-leaf {
  border-radius: 2px 8px 8px 2px;
}

.catalog-toc-leaf {
  grid-template-rows: minmax(0, 0.8fr) auto auto minmax(0, 2.4fr) auto;
  gap: 12px;
  align-content: end;
}

.catalog-toc-title {
  align-self: end;
  color: color-mix(in srgb, var(--text) 58%, var(--muted));
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-align: center;
}

.catalog-toc-hint {
  margin-top: -12px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.catalog-toc-line {
  height: 1px;
  background: color-mix(in srgb, var(--text) 32%, var(--line));
}

.catalog-toc-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.catalog-toc-column {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.catalog-toc-column h3 {
  margin: 0;
  color: color-mix(in srgb, var(--primary-strong) 82%, var(--text));
  font-size: 18px;
  line-height: 1.25;
  writing-mode: horizontal-tb;
}

.catalog-toc-column button {
  min-height: 0;
  padding: 2px 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.catalog-toc-column button:hover,
.catalog-toc-column button:focus-visible {
  background: var(--primary-soft);
  color: var(--primary-strong);
  outline: 0;
}

.catalog-toc-column h3 span {
  margin-right: 4px;
}

.catalog-toc-column h3 button {
  display: grid;
  gap: 2px;
  width: 100%;
}

.catalog-toc-column h3 b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-toc-column h3 em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.catalog-toc-column ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: color-mix(in srgb, var(--text) 62%, var(--muted));
  font-size: 13px;
  line-height: 1.35;
}

.catalog-toc-column li {
  min-width: 0;
}

.catalog-toc-column li button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  width: 100%;
}

.catalog-toc-column li button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-toc-column li button em {
  color: var(--primary);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.catalog-toc-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.catalog-mobile-poster-leaf {
  gap: 12px;
  align-content: start;
}

.catalog-mobile-home-leaf {
  display: grid;
  gap: 10px;
  align-content: start;
  overflow: visible;
}

.catalog-mobile-home-leaf .catalog-mobile-poster-leaf {
  display: grid;
}

.catalog-mobile-home-leaf .catalog-toc-leaf {
  display: grid;
  min-height: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, #ffffff);
  border-radius: 8px;
  background: #fff;
}

.catalog-mobile-home-leaf .catalog-toc-title {
  font-size: 26px;
  letter-spacing: 0;
  text-align: left;
}

.catalog-mobile-home-leaf .catalog-toc-hint {
  margin-top: -4px;
  text-align: left;
}

.catalog-mobile-home-leaf .catalog-toc-line {
  background: var(--line);
}

.catalog-mobile-home-leaf .catalog-toc-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.catalog-mobile-home-leaf .catalog-toc-column {
  gap: 5px;
}

.catalog-mobile-home-leaf .catalog-toc-column h3 {
  font-size: 14px;
}

.catalog-mobile-home-leaf .catalog-toc-column ul {
  gap: 3px;
  font-size: 12px;
}

.catalog-mobile-poster-hero {
  display: grid;
  min-height: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
  border-radius: 8px;
  aspect-ratio: 3 / 4;
  background: #eef6f5;
}

.catalog-mobile-poster-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catalog-mobile-poster-generated {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  height: 100%;
  min-height: 360px;
  padding: 20px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(232, 248, 246, 0.88)),
    linear-gradient(135deg, rgba(15, 143, 138, 0.12), rgba(15, 85, 144, 0.08));
}

.catalog-mobile-poster-generated span {
  color: var(--primary);
  font-size: 13px;
  font-weight: 900;
}

.catalog-mobile-poster-generated strong {
  color: var(--text);
  max-width: 260px;
  font-size: 30px;
  line-height: 1.16;
}

.catalog-mobile-poster-generated small {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.catalog-mobile-poster-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin-top: 6px;
}

.catalog-mobile-poster-products article {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(15, 143, 138, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  text-align: left;
}

.catalog-mobile-poster-products img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 0.8;
  object-fit: cover;
  background: #eef6f5;
}

.catalog-mobile-home-leaf .catalog-mobile-poster-hero {
  aspect-ratio: 3 / 2.15;
}

.catalog-mobile-home-leaf .catalog-mobile-poster-generated {
  min-height: 0;
  padding: 16px;
}

.catalog-mobile-home-leaf .catalog-mobile-poster-generated strong {
  font-size: 26px;
}

.catalog-mobile-home-leaf .catalog-mobile-poster-generated small {
  max-width: 260px;
  font-size: 13px;
}

.catalog-mobile-home-leaf .catalog-mobile-poster-products img {
  aspect-ratio: 1 / 0.62;
}

.catalog-mobile-poster-products strong,
.catalog-mobile-poster-products span {
  display: block;
  min-width: 0;
  overflow: hidden;
  padding: 0 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-mobile-poster-products strong {
  margin-top: 6px;
  color: var(--text);
  font-size: 11px;
  line-height: 1.3;
}

.catalog-mobile-poster-products span {
  margin: 2px 0 7px;
  color: var(--muted);
  font-size: 10px;
}

.catalog-mobile-poster-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 76%, #ffffff);
  border-radius: 8px;
  background: #ffffff;
}

.catalog-mobile-poster-entry div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.catalog-mobile-poster-entry strong,
.catalog-mobile-poster-entry span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-mobile-poster-entry strong {
  color: var(--text);
  font-size: 15px;
}

.catalog-mobile-poster-entry span {
  color: var(--muted);
  font-size: 12px;
}

.catalog-mobile-poster-entry button {
  min-height: 34px;
  padding: 6px 14px;
}

.catalog-mobile-poster-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.catalog-mobile-poster-tools button {
  min-height: 34px;
  padding: 6px 10px;
}

.catalog-product-leaf {
  position: relative;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
  overflow: hidden;
}

.catalog-print-section {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 1;
  padding: 6px 10px;
  border-radius: 2px;
  background: #c66b5c;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.catalog-product-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-left: 88px;
}

.catalog-product-page-head h2 {
  margin: 0;
  color: color-mix(in srgb, #9f4f45 84%, var(--text));
  font-size: 28px;
  line-height: 1.1;
}

.catalog-product-page-head span {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.catalog-print-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 16px;
  align-content: start;
}

.catalog-print-product {
  position: relative;
  display: grid;
  gap: 7px;
  min-width: 0;
}

.catalog-product-visual-row {
  display: block;
  min-width: 0;
}

.catalog-product-action-row {
  display: grid;
  grid-template-columns: minmax(48px, auto) minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.catalog-product-social-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  min-width: 0;
}

.catalog-social-button {
  display: grid;
  justify-items: center;
  gap: 0;
  min-width: 22px;
  min-height: 28px;
  padding: 0 2px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.42);
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(15, 23, 42, 0.72);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(6px);
}

.catalog-social-favorite-button {
  background: rgba(15, 23, 42, 0.42);
}

.catalog-social-share-button {
  background: rgba(15, 23, 42, 0.42);
}

.catalog-social-button:hover,
.catalog-social-button.active {
  color: #ffffff;
  transform: translateY(-1px);
}

.catalog-social-icon {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  color: #ffffff;
  line-height: 1;
}

.catalog-social-share {
  transform: none;
}

.catalog-social-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.catalog-social-star svg {
  fill: currentColor;
}

.catalog-social-share svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.catalog-social-button strong {
  color: #ffffff;
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
}

.catalog-print-photo {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-soft) 58%, #ffffff), #ffffff);
}

.catalog-print-photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}

.catalog-product-detail-trigger {
  border: 0;
  cursor: pointer;
}

.catalog-product-detail-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.catalog-detail-modal {
  display: grid;
  gap: 14px;
  max-width: 760px;
  margin: 0 auto;
}

.catalog-detail-hero {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.1fr);
  gap: 14px;
  align-items: stretch;
}

.catalog-detail-main-media {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-soft) 66%, #ffffff);
}

.catalog-detail-main-media img,
.catalog-detail-gallery img,
.catalog-detail-section video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catalog-detail-summary {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.catalog-detail-summary span,
.catalog-detail-summary p,
.catalog-detail-text-row span {
  color: var(--muted);
}

.catalog-detail-summary h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}

.catalog-detail-summary p {
  margin: 0;
  line-height: 1.7;
}

.catalog-detail-price-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.catalog-detail-price-row span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--panel-soft) 70%, #ffffff);
}

.catalog-detail-price-row em {
  color: var(--muted);
  font-style: normal;
  font-size: 11px;
}

.catalog-detail-price-row b {
  color: var(--accent-strong);
  font-size: 16px;
  line-height: 1.15;
}

.catalog-detail-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
}

.catalog-detail-gallery img {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.catalog-detail-section {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.catalog-detail-section h4 {
  margin: 0;
  font-size: 16px;
}

.catalog-detail-section video {
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: #0f172a;
}

.catalog-detail-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.catalog-detail-spec-grid div,
.catalog-detail-text-row {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-soft) 62%, #ffffff);
}

.catalog-detail-spec-grid span,
.catalog-detail-text-row strong {
  color: var(--muted);
  font-size: 12px;
}

.catalog-detail-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.catalog-detail-chip-row span {
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 999px;
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 8%, #ffffff);
}

.catalog-detail-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
}

.catalog-detail-actions button {
  min-width: 0;
  min-height: 32px;
  padding: 6px 10px;
  white-space: nowrap;
}

.catalog-shelf-detail {
  max-width: 980px;
  gap: 12px;
}

.catalog-shelf-detail-compact {
  max-width: 920px;
  gap: 10px;
}

.catalog-shelf-top {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(280px, 0.95fr);
  gap: 14px;
  align-items: start;
}

.catalog-shelf-detail-compact .catalog-shelf-top {
  grid-template-columns: minmax(340px, 1.12fr) minmax(260px, 0.88fr);
}

.catalog-shelf-media {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.catalog-shelf-stage {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-soft) 66%, #ffffff);
}

.catalog-shelf-stage img,
.catalog-shelf-stage video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catalog-shelf-thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 74px;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.catalog-shelf-thumb {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
}

.catalog-shelf-thumb.active {
  border-color: var(--accent);
}

.catalog-shelf-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catalog-shelf-video-thumb {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #ffffff;
  font-weight: 800;
  background: linear-gradient(135deg, #0f766e, #1d4ed8);
}

.catalog-shelf-info {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.catalog-shelf-detail-compact .catalog-shelf-info {
  gap: 10px;
  padding: 14px;
  align-self: stretch;
  align-content: start;
}

.catalog-shelf-label-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.catalog-shelf-label-row span {
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 10%, #ffffff);
}

.catalog-shelf-info h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
}

.catalog-shelf-info p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.catalog-shelf-detail-compact .catalog-shelf-info p {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.catalog-shelf-keyfacts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.catalog-shelf-keyfacts span {
  padding: 5px 8px;
  border-radius: 8px;
  color: var(--text);
  font-weight: 700;
  background: color-mix(in srgb, var(--panel-soft) 70%, #ffffff);
}

.catalog-shelf-price-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, #ffffff), #ffffff);
}

.catalog-shelf-price-card > span {
  color: var(--muted);
  font-size: 13px;
}

.catalog-shelf-price-card > strong {
  color: var(--accent-strong);
  font-size: 22px;
}

.catalog-shelf-price-card.inquiry-only {
  border-left: 4px solid var(--accent);
}

.catalog-shelf-price-card.compact {
  padding: 10px;
}

.catalog-shelf-more {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.catalog-shelf-more summary {
  cursor: pointer;
  padding: 10px 12px;
  color: var(--muted);
  font-weight: 800;
  list-style: none;
}

.catalog-shelf-more summary::-webkit-details-marker {
  display: none;
}

.catalog-shelf-more summary::after {
  content: "展开";
  float: right;
  color: var(--accent-strong);
  font-size: 12px;
}

.catalog-shelf-more[open] summary::after {
  content: "收起";
}

.catalog-shelf-more-grid {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}

.catalog-shelf-more-grid section {
  display: grid;
  gap: 8px;
}

.catalog-shelf-more-grid h4 {
  margin: 0;
  font-size: 15px;
}

.catalog-shelf-block {
  padding: 16px;
}

.catalog-shelf-option-grid,
.catalog-shelf-service-grid,
.catalog-shelf-param-table {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.catalog-shelf-option-grid div,
.catalog-shelf-service-grid div,
.catalog-shelf-param-table div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-soft) 62%, #ffffff);
}

.catalog-shelf-option-grid span,
.catalog-shelf-service-grid span,
.catalog-shelf-param-table span {
  color: var(--muted);
  font-size: 12px;
}

.catalog-shelf-option-grid strong,
.catalog-shelf-service-grid strong,
.catalog-shelf-param-table strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.catalog-detail-long-images {
  display: grid;
  gap: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #ffffff;
}

.catalog-shelf-product-images {
  padding: 0;
  overflow: hidden;
}

.catalog-shelf-product-images h4 {
  margin: 0;
  padding: 12px 14px;
  background: #ffffff;
}

.catalog-detail-long-images img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.product-catalog-profile-maintenance {
  display: grid;
  gap: 14px;
}

.product-catalog-profile-form {
  align-items: start;
}

.product-catalog-profile-form textarea {
  min-height: 86px;
  resize: vertical;
}

.product-catalog-profile-form input[type="file"] {
  padding: 9px;
  background: #ffffff;
}

.catalog-profile-existing {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-soft) 50%, #ffffff);
}

.catalog-profile-asset-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}

.catalog-profile-asset-list article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.catalog-profile-asset-list strong,
.catalog-profile-asset-list span,
.catalog-profile-asset-list small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-profile-asset-list span,
.catalog-profile-asset-list small {
  color: var(--muted);
  font-size: 12px;
}

.signature-settings-panel {
  border-left: 4px solid var(--accent);
}

.signature-settings-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.signature-settings-grid div {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-soft) 58%, #ffffff);
}

.signature-settings-grid strong {
  color: var(--text);
}

.signature-settings-grid span {
  color: var(--muted);
  font-size: 12px;
}

.signature-seal-maintenance {
  display: grid;
  gap: 14px;
}

.signature-seal-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(280px, 1.05fr);
  gap: 14px;
}

.signature-seal-form,
.signature-seal-current {
  min-width: 0;
}

.signature-seal-list {
  display: grid;
  gap: 10px;
}

.signature-seal-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.signature-seal-card div,
.signature-seal-card small {
  grid-column: 1 / -1;
}

.signature-seal-card div {
  display: grid;
  gap: 4px;
}

.signature-seal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.signature-seal-meta span {
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
}

.signature-seal-card span,
.signature-seal-card small,
.contract-seal-select {
  color: var(--muted);
}

.contract-seal-select {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-soft) 62%, #ffffff);
}

.contract-seal-select select {
  width: 100%;
}

.catalog-print-info {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: color-mix(in srgb, var(--text) 76%, var(--muted));
}

.catalog-print-info strong {
  overflow: hidden;
  font-size: 14px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-print-info span {
  color: color-mix(in srgb, var(--text) 68%, var(--muted));
  font-size: 13px;
  font-weight: 800;
}

.catalog-print-info small {
  color: var(--muted);
  font-size: 12px;
}

.catalog-print-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 20px;
}

.catalog-print-tags em {
  padding: 2px 5px;
  border-radius: 2px;
  background: #c66b5c;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.catalog-print-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}

.catalog-print-actions button {
  min-height: 22px;
  padding: 2px 4px;
  border-radius: 6px;
  font-size: 10px;
  line-height: 1.15;
}

.catalog-book-leaf {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  min-height: 520px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--line) 84%, #ffffff);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98), color-mix(in srgb, var(--panel-soft) 42%, #ffffff)),
    #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
}

.catalog-book-leaf:first-of-type {
  border-radius: 8px 2px 2px 8px;
  transform-origin: right center;
}

.catalog-book-leaf + .catalog-book-leaf {
  border-radius: 2px 8px 8px 2px;
  transform-origin: left center;
}

.catalog-book-leaf-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.catalog-book-leaf-head span {
  color: var(--primary-strong);
  font-weight: 800;
}

.catalog-book-leaf-head em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.08em;
}

.catalog-book-product-list {
  display: grid;
  gap: 10px;
  align-content: start;
}

.catalog-book-product {
  position: relative;
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, #ffffff);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
}

.catalog-book-product-no {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  justify-items: end;
  padding: 4px 7px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--primary-soft) 84%, #ffffff);
}

.catalog-book-product-no span {
  color: var(--muted);
  font-size: 10px;
}

.catalog-book-product-no strong {
  color: var(--primary-strong);
  font-size: 12px;
}

.catalog-book-product img {
  width: 118px;
  height: 96px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
}

.catalog-book-product-body {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding-right: 74px;
}

.catalog-book-product-body small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.catalog-book-product-body h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
}

.catalog-book-product-body p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.catalog-book-price {
  color: var(--primary-strong);
  font-weight: 800;
}

.catalog-book-product .catalog-card-actions {
  grid-column: 1 / -1;
}

.catalog-book-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.catalog-book-controls span {
  color: var(--muted);
  font-size: 13px;
}

.catalog-inquiry-bar {
  position: sticky;
  bottom: 12px;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 92%, var(--primary-soft));
  box-shadow: var(--shadow-soft);
}

.catalog-inquiry-bar strong,
.catalog-inquiry-bar span {
  display: block;
}

.catalog-inquiry-bar span {
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-public-page {
  display: grid;
  gap: 16px;
}

.catalog-public-head {
  display: grid;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, #fffefd, color-mix(in srgb, var(--primary-soft) 58%, #ffffff));
}

.catalog-public-head span {
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
}

.catalog-public-head h2 {
  margin: 0;
  font-size: 28px;
}

.catalog-public-head p {
  margin: 0;
  color: var(--muted);
}

.catalog-reader-page {
  gap: 12px;
  padding-bottom: 18px;
}

.catalog-reader-topbar {
  position: sticky;
  top: 0;
  z-index: 7;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--line) 84%, #ffffff);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(10px);
}

.catalog-reader-topbar > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.catalog-reader-topbar span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
}

.catalog-reader-topbar strong {
  overflow: hidden;
  color: var(--text);
  font-size: 18px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-reader-topbar small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-reader-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.catalog-reader-topbar > .catalog-reader-actions {
  min-width: 0;
}

.catalog-reader-topbar button {
  min-height: 36px;
  border-color: color-mix(in srgb, var(--primary) 26%, var(--line));
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-weight: 800;
}

.catalog-vip-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--success) 26%, var(--line));
  border-radius: 8px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--success) 9%, #ffffff), #ffffff);
}

.catalog-vip-strip.locked {
  border-color: color-mix(in srgb, var(--warning) 26%, var(--line));
  background: linear-gradient(90deg, color-mix(in srgb, var(--warning) 10%, #ffffff), #ffffff);
}

.catalog-vip-strip > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.catalog-vip-strip strong {
  color: var(--text);
  font-size: 15px;
}

.catalog-vip-strip span {
  color: var(--muted);
  font-size: 12px;
}

.catalog-reader-shell {
  position: relative;
  overflow: hidden;
  padding: 14px;
  background:
    linear-gradient(180deg, #f8faf9, #eef4f1 42%, #f8faf9),
    #f6f8f7;
}

.catalog-reader-shell::before,
.catalog-reader-shell::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.catalog-reader-shell::before {
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.catalog-reader-shell::after {
  inset: auto 0 0;
  height: 42px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.08));
}

.catalog-book-stage {
  position: relative;
  z-index: 1;
}

.catalog-page-hotspot {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 38px;
  height: 54px;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid color-mix(in srgb, var(--line) 84%, #ffffff);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--primary-strong);
  font-size: 30px;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(8px);
}

.catalog-page-hotspot-prev {
  left: 8px;
}

.catalog-page-hotspot-next {
  right: 8px;
}

.catalog-page-hotspot:disabled {
  opacity: 0.28;
}

.catalog-reader-toolbar {
  position: sticky;
  bottom: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: 7px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, #ffffff);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 -12px 28px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(12px);
}

.catalog-reader-toolbar button {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  min-height: 48px;
  padding: 7px 4px;
  border-color: transparent;
  background: var(--panel-soft);
}

.catalog-reader-toolbar strong {
  overflow: hidden;
  max-width: 100%;
  color: var(--text);
  font-size: 13px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-reader-toolbar span {
  overflow: hidden;
  max-width: 100%;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-reader-toolbar button:hover {
  border-color: color-mix(in srgb, var(--primary) 26%, var(--line));
  background: var(--primary-soft);
}

.catalog-reader-page .catalog-inquiry-bar {
  bottom: 76px;
}

.catalog-reader-filter-panel,
.catalog-reader-modal,
.catalog-tool-section {
  display: grid;
  gap: 12px;
}

.catalog-reader-modal-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.catalog-me-modal {
  display: grid;
  gap: 12px;
}

.catalog-me-profile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 6%, #ffffff);
}

.catalog-me-profile div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.catalog-me-profile strong {
  overflow: hidden;
  color: var(--text);
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-me-profile span {
  color: var(--muted);
  font-size: 12px;
}

.catalog-me-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.catalog-me-summary > div {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.catalog-me-summary strong {
  color: var(--primary-strong);
  font-size: 22px;
  line-height: 1;
}

.catalog-me-summary span {
  color: var(--muted);
  font-size: 12px;
}

.catalog-me-doc-list {
  display: grid;
  gap: 8px;
}

.catalog-me-doc-list h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
}

.catalog-me-doc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.catalog-me-doc-row div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.catalog-me-doc-row strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-me-doc-row span,
.catalog-me-doc-row small {
  color: var(--muted);
  font-size: 12px;
}

.catalog-me-doc-row b {
  color: var(--primary-strong);
  white-space: nowrap;
}

.catalog-reader-modal-stats > div {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.catalog-reader-modal-stats strong {
  color: var(--primary-strong);
  font-size: 22px;
  line-height: 1;
}

.catalog-reader-modal-stats span {
  color: var(--muted);
  font-size: 12px;
}

.catalog-tool-section h3 {
  margin: 0;
  font-size: 16px;
}

.catalog-tool-toc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.catalog-tool-toc button,
.catalog-thumb-grid button {
  display: grid;
  justify-items: start;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border-color: var(--line);
  background: #fff;
  text-align: left;
}

.catalog-tool-toc strong,
.catalog-thumb-grid strong {
  color: var(--text);
}

.catalog-tool-toc span,
.catalog-tool-toc small,
.catalog-thumb-grid span {
  overflow: hidden;
  max-width: 100%;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-vip-price {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--success) 22%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--success) 8%, #ffffff);
}

.catalog-vip-price span {
  display: grid;
  gap: 1px;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.catalog-vip-price em {
  font-style: normal;
  line-height: 1.1;
}

.catalog-vip-price b {
  color: var(--primary-strong);
  font-size: 14px;
  line-height: 1.1;
  white-space: nowrap;
}

.catalog-vip-price span + span b {
  color: var(--text);
  font-size: 12px;
}

.catalog-procurement-bar {
  border-color: color-mix(in srgb, var(--success) 26%, var(--line));
  background: color-mix(in srgb, var(--success) 8%, #ffffff);
}

.catalog-procurement-cart-modal {
  gap: 10px;
}

.catalog-procurement-cart-row,
.catalog-procurement-history-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 92px 108px;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.catalog-procurement-history-row {
  grid-template-columns: minmax(0, 1fr) 110px 74px;
}

.catalog-procurement-cart-row img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  background: #eef7f5;
}

.catalog-procurement-cart-row div,
.catalog-procurement-history-row div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.catalog-procurement-cart-row strong,
.catalog-procurement-history-row strong {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-procurement-cart-row span,
.catalog-procurement-cart-row small,
.catalog-procurement-history-row span,
.catalog-procurement-history-row small {
  color: var(--muted);
  font-size: 12px;
}

.catalog-procurement-cart-row input {
  width: 92px;
}

.catalog-procurement-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding: 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 6%, #ffffff);
}

.catalog-procurement-summary span,
.catalog-procurement-summary strong {
  padding: 5px 8px;
  border-radius: 999px;
  background: #ffffff;
}

.catalog-vip-access-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.catalog-vip-access-flow span {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--text);
  font-weight: 700;
}

.quote-procurement-origin {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--success) 24%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--success) 8%, #ffffff);
}

.quote-procurement-origin b {
  color: var(--success-strong, #087f5b);
}

.quote-procurement-origin span {
  color: var(--muted);
  font-size: 12px;
}

.catalog-tool-toc small {
  color: color-mix(in srgb, var(--primary) 78%, var(--muted));
  font-size: 11px;
}

.catalog-thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
  gap: 8px;
  max-height: min(68vh, 620px);
  overflow: auto;
  padding-right: 4px;
}

.catalog-thumb-grid button.active {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background: var(--primary-soft);
}

@media (max-width: 640px) {
  .catalog-maintenance-head,
  .catalog-maintenance-layout,
  .catalog-maintenance-module,
  .catalog-maintenance-showcase,
  .catalog-maintenance-cover-card,
  .catalog-assets-editor,
  .catalog-maintenance-link-strip,
  .catalog-conversion-hero,
  .catalog-conversion-grid,
  .catalog-priority-panel article {
    grid-template-columns: 1fr;
  }

  .catalog-maintenance-grid,
  .catalog-maintenance-action-grid,
  .catalog-asset-spec-grid,
  .catalog-funnel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalog-conversion-hero h2 {
    font-size: 20px;
  }

  .catalog-priority-panel article button {
    width: 100%;
  }

  .catalog-detail-grid {
    grid-template-columns: 1fr;
  }

  .catalog-maintenance-module .row-actions {
    width: 100%;
  }

  .catalog-share-poster {
    padding: 16px;
    border-radius: 8px;
  }

  .catalog-share-poster-head strong {
    font-size: 24px;
  }

  .catalog-share-poster-body {
    grid-template-columns: 1fr;
  }

  .catalog-share-poster-foot {
    align-items: start;
    flex-direction: column;
  }

  .catalog-public-page {
    gap: 12px;
  }

  .catalog-reader-page {
    padding-bottom: 82px;
  }

  .catalog-reader-topbar {
    margin: -4px -4px 0;
    border-radius: 0 0 8px 8px;
  }

  .catalog-reader-topbar strong {
    font-size: 16px;
  }

  .catalog-reader-topbar button {
    min-height: 34px;
    padding-inline: 9px;
  }

  .catalog-vip-strip {
    grid-template-columns: 1fr;
  }

  .catalog-reader-actions {
    justify-content: stretch;
  }

  .catalog-reader-actions button {
    flex: 1 1 auto;
  }

  .catalog-reader-shell {
    margin-inline: -4px;
    padding: 8px;
  }

  .catalog-page-hotspot {
    display: none;
  }

  .catalog-reader-toolbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    gap: 4px;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 8px 8px 0 0;
  }

  .catalog-reader-toolbar button {
    min-height: 46px;
    padding-inline: 2px;
  }

  .catalog-reader-toolbar strong {
    font-size: 12px;
  }

  .catalog-reader-page .catalog-inquiry-bar {
    bottom: 70px;
  }

  .catalog-reader-modal-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .catalog-tool-toc,
  .catalog-thumb-grid {
    grid-template-columns: 1fr;
  }

  .catalog-procurement-cart-row,
  .catalog-procurement-history-row {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .catalog-procurement-cart-row b,
  .catalog-procurement-cart-row input,
  .catalog-procurement-history-row b,
  .catalog-procurement-history-row small {
    grid-column: 2;
    width: 100%;
  }

  .catalog-vip-access-flow {
    grid-template-columns: 1fr;
  }

  .catalog-public-head {
    padding: 16px;
  }

  .catalog-public-head h2 {
    font-size: 22px;
  }

  .catalog-public-search {
    grid-template-columns: 1fr;
  }

  .catalog-selection-title,
  .catalog-inquiry-bar {
    grid-template-columns: 1fr;
  }

  .catalog-selection-title {
    display: grid;
  }

  .catalog-selection-title span {
    text-align: left;
  }

  .catalog-filter-row {
    grid-template-columns: 1fr;
  }

  .catalog-filter-row > span {
    padding-top: 0;
  }

  .catalog-book-summary,
  .catalog-book {
    grid-template-columns: 1fr;
  }

  .catalog-book {
    min-height: 0;
  }

  .catalog-book-spine {
    display: none;
  }

  .catalog-book-leaf,
  .catalog-book-leaf:first-of-type,
  .catalog-book-leaf + .catalog-book-leaf {
    min-height: 0;
    border-radius: 8px;
  }

  .catalog-book-leaf + .catalog-book-leaf {
    margin-top: 10px;
  }

  .catalog-print-leaf,
  .catalog-print-leaf:first-of-type,
  .catalog-print-leaf + .catalog-print-leaf {
    min-height: 0;
    padding: 16px;
    border-radius: 8px;
  }

  .catalog-print-leaf + .catalog-print-leaf {
    margin-top: 10px;
  }

  .catalog-toc-leaf {
    grid-template-rows: auto auto auto auto;
  }

  .catalog-toc-title {
    font-size: 34px;
    text-align: left;
  }

  .catalog-toc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .catalog-toc-column h3 {
    font-size: 16px;
  }

  .catalog-print-section {
    position: static;
    width: fit-content;
    margin-bottom: 8px;
  }

  .catalog-product-page-head {
    padding-left: 0;
  }

  .catalog-product-page-head h2 {
    font-size: 24px;
  }

  .catalog-print-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
  }

  .catalog-print-photo {
    aspect-ratio: 1 / 1;
  }

  .catalog-print-photo img {
    height: 100%;
  }

  .catalog-print-actions {
    grid-template-columns: 1fr;
  }

  .catalog-book-product {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .catalog-book-product img {
    width: 96px;
    height: 86px;
  }

  .catalog-book-product-body {
    padding-right: 0;
  }

  .catalog-book-product-no {
    position: static;
    grid-column: 1 / -1;
    justify-items: start;
    width: fit-content;
  }

  .catalog-public-card {
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
  }

  .catalog-public-card img {
    height: 92px;
    aspect-ratio: auto;
  }

  .catalog-card-actions {
    grid-column: 1 / -1;
  }

  .catalog-public-card button {
    width: 100%;
  }
}

@media (max-width: 760px) {
  body.public-quote-mode {
    overflow-x: hidden;
    background: #f7faf8;
  }

  .public-quote-mode .content {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    padding: 8px 8px 82px;
  }

  .public-quote-mode #view {
    margin-top: 0;
  }

  .catalog-mobile-reader {
    gap: 8px;
    padding-bottom: 0;
  }

  .catalog-mobile-reader .catalog-reader-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    margin: 0;
    padding: 8px 10px;
    border-radius: 8px;
  }

  .catalog-mobile-reader .catalog-reader-topbar strong {
    font-size: 16px;
  }

  .catalog-mobile-reader .catalog-reader-topbar small {
    font-size: 11px;
  }

  .catalog-mobile-reader .catalog-reader-topbar button {
    min-height: 32px;
    padding: 5px 8px;
    font-size: 12px;
  }

  .catalog-mobile-reader .catalog-reader-shell {
    gap: 8px;
    margin-inline: 0;
    padding: 8px;
    border-radius: 8px;
  }

  .catalog-mobile-reader .catalog-book-summary {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .catalog-mobile-reader .catalog-book-summary strong {
    font-size: 17px;
  }

  .catalog-mobile-reader .catalog-book-summary > div:last-child {
    min-width: 64px;
    padding: 6px 8px;
  }

  .catalog-mobile-reader .catalog-book-summary b {
    font-size: 21px;
  }

  .catalog-book-mobile {
    display: block;
    min-height: 0;
  }

  .catalog-book-mobile .catalog-book-spine {
    display: none;
  }

  .catalog-book-mobile .catalog-print-leaf,
  .catalog-book-mobile .catalog-print-leaf:first-of-type,
  .catalog-book-mobile .catalog-print-leaf + .catalog-print-leaf {
    min-height: 0;
    padding: 12px;
    border-radius: 8px;
  }

  .catalog-book-mobile .catalog-print-leaf + .catalog-print-leaf {
    margin-top: 0;
  }

  .catalog-mobile-reader .catalog-toc-title {
    font-size: 30px;
  }

  .catalog-mobile-reader .catalog-toc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .catalog-mobile-reader .catalog-toc-column {
    gap: 6px;
  }

  .catalog-mobile-reader .catalog-toc-column h3 {
    font-size: 15px;
  }

  .catalog-mobile-reader .catalog-toc-column ul {
    gap: 4px;
    font-size: 12px;
  }

  .catalog-mobile-reader .catalog-product-page-head {
    padding-left: 0;
  }

  .catalog-mobile-reader .catalog-product-page-head h2 {
    font-size: 22px;
  }

  .catalog-mobile-reader .catalog-print-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
  }

  .catalog-mobile-reader .catalog-print-product {
    gap: 5px;
  }

  .catalog-mobile-reader .catalog-product-visual-row {
    display: block;
  }

  .catalog-mobile-reader .catalog-product-action-row {
    grid-template-columns: minmax(46px, auto) minmax(0, 1fr);
    gap: 4px;
  }

  .catalog-mobile-reader .catalog-product-social-actions {
    gap: 3px;
  }

  .catalog-mobile-reader .catalog-social-button {
    min-width: 20px;
    min-height: 26px;
    padding: 0 1px;
  }

  .catalog-mobile-reader .catalog-social-icon {
    width: 16px;
    height: 16px;
  }

  .catalog-mobile-reader .catalog-social-button strong {
    font-size: 8px;
  }

  .catalog-mobile-reader .catalog-print-photo {
    aspect-ratio: 1 / 1;
  }

  .catalog-mobile-reader .catalog-print-photo img {
    height: 100%;
  }

  .catalog-detail-modal {
    max-width: 100%;
  }

  .catalog-shelf-detail {
    max-width: 100%;
  }

  .catalog-shelf-detail-compact {
    gap: 8px;
  }

  .catalog-shelf-top {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .catalog-shelf-detail-compact .catalog-shelf-top {
    grid-template-columns: 1fr;
  }

  .catalog-shelf-info {
    padding: 12px;
  }

  .catalog-shelf-detail-compact .catalog-shelf-info {
    gap: 8px;
    padding: 10px;
  }

  .catalog-shelf-info h3 {
    font-size: 20px;
  }

  .catalog-shelf-detail-compact .catalog-shelf-info h3 {
    font-size: 18px;
  }

  .catalog-shelf-detail-compact .catalog-shelf-label-row span,
  .catalog-shelf-keyfacts span {
    padding: 4px 7px;
    font-size: 12px;
  }

  .catalog-shelf-price-card.compact {
    padding: 8px;
  }

  .catalog-shelf-thumbs {
    grid-auto-columns: 64px;
  }

  .catalog-shelf-thumb {
    width: 64px;
    height: 64px;
  }

  .catalog-shelf-option-grid,
  .catalog-shelf-service-grid,
  .catalog-shelf-param-table {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalog-shelf-block {
    padding: 12px;
  }

  .catalog-shelf-more summary {
    padding: 9px 10px;
    font-size: 13px;
  }

  .catalog-shelf-more-grid {
    padding: 0 10px 10px;
  }

  .catalog-shelf-product-images h4 {
    padding: 10px;
    font-size: 15px;
  }

  .catalog-detail-hero,
  .catalog-detail-spec-grid {
    grid-template-columns: 1fr;
  }

  .catalog-detail-price-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .catalog-detail-price-row span {
    padding: 5px 7px;
  }

  .catalog-detail-price-row b {
    font-size: 15px;
  }

  .catalog-detail-summary h3 {
    font-size: 20px;
  }

  .catalog-detail-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .catalog-detail-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 6px;
  }

  .catalog-detail-actions button {
    flex: 1 1 0;
    min-height: 30px;
    padding: 5px 6px;
    font-size: 12px;
  }

  .signature-settings-grid,
  .signature-seal-layout {
    grid-template-columns: 1fr;
  }

  .catalog-mobile-reader .catalog-print-info strong {
    font-size: 12px;
  }

  .catalog-mobile-reader .catalog-print-info span {
    font-size: 12px;
  }

  .catalog-mobile-reader .catalog-print-info small {
    font-size: 11px;
  }

  .catalog-mobile-reader .catalog-print-tags {
    min-height: 18px;
  }

  .catalog-mobile-reader .catalog-print-tags em {
    font-size: 9px;
  }

  .catalog-mobile-reader .catalog-print-actions {
    grid-template-columns: 1fr 1fr;
    gap: 3px;
  }

  .catalog-mobile-reader .catalog-print-actions button {
    min-height: 21px;
    padding: 2px 3px;
    border-radius: 6px;
    font-size: 10px;
    line-height: 1.1;
  }

  .catalog-mobile-reader .catalog-book-controls {
    gap: 7px;
  }

  .catalog-mobile-reader .catalog-book-controls span {
    order: -1;
    width: 100%;
    text-align: center;
  }

  .catalog-mobile-reader .catalog-book-controls button {
    flex: 1 1 0;
    min-height: 36px;
  }

  .catalog-mobile-reader .catalog-inquiry-bar {
    position: fixed;
    right: 8px;
    bottom: calc(58px + env(safe-area-inset-bottom));
    left: 8px;
    z-index: 12;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    max-width: calc(100vw - 16px);
    padding: 8px 10px;
    border-radius: 8px;
  }

  .catalog-mobile-reader .catalog-inquiry-bar strong {
    overflow: hidden;
    font-size: 13px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .catalog-mobile-reader .catalog-inquiry-bar span {
    display: none;
  }

  .catalog-mobile-reader .catalog-inquiry-bar .row-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    min-width: 0;
  }

  .catalog-mobile-reader .catalog-inquiry-bar .row-actions button {
    flex: 0 0 auto;
    min-width: 62px;
    min-height: 32px;
    padding: 5px 10px;
    font-size: 12px;
    white-space: nowrap;
  }

  .catalog-mobile-reader .catalog-inquiry-bar .row-actions .primary {
    min-width: 76px;
  }

  .catalog-mobile-reader .catalog-reader-toolbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    gap: 4px;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 8px 8px 0 0;
  }

  .catalog-mobile-reader .catalog-reader-toolbar button {
    min-height: 46px;
    padding-inline: 2px;
  }

  .catalog-mobile-reader .catalog-reader-toolbar strong {
    font-size: 12px;
  }

  .catalog-me-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalog-me-doc-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .catalog-me-doc-row b,
  .catalog-me-doc-row small {
    justify-self: start;
  }
}

.sales-workbench-page,
.quote-workbench-page,
.opportunity-page {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.sales-command-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.sales-command-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.sales-command-copy span {
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 12px;
  font-weight: 800;
}

.sales-command-copy h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}

.sales-command-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.sales-command-actions,
.sales-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.sales-command-actions button,
.sales-quick-actions button {
  min-height: 38px;
}

.sales-kpi-strip,
.customer-command-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.customer-command-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 14px;
}

.sales-kpi-strip.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sales-kpi-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  min-height: 96px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  text-align: left;
}

.sales-kpi-card:hover {
  border-color: color-mix(in srgb, var(--primary) 32%, var(--line));
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.sales-kpi-card span,
.sales-kpi-card small {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 12px;
}

.sales-kpi-card strong {
  overflow-wrap: anywhere;
  font-size: 23px;
  line-height: 1.15;
}

.sales-workbench-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.sales-todo-panel,
.sales-priority-panel {
  min-height: 260px;
}

.sales-action-list,
.sales-priority-list {
  display: grid;
  gap: 8px;
}

.sales-action-item,
.sales-priority-customer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.sales-priority-customer {
  grid-template-columns: auto minmax(0, 1fr);
  color: var(--text);
  text-align: left;
}

.sales-action-item strong,
.sales-priority-customer strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-action-item small,
.sales-priority-customer small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.sales-funnel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sales-funnel button {
  display: grid;
  gap: 4px;
  min-height: 108px;
  padding: 12px;
  border-color: #dbeafe;
  background: #f8fbff;
  color: var(--text);
  text-align: left;
}

.sales-funnel strong {
  font-size: 26px;
  line-height: 1;
}

.sales-funnel span,
.sales-funnel small {
  color: var(--muted);
}

.opportunity-board-panel {
  overflow: hidden;
}

.opportunity-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(190px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.opportunity-column {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  min-width: 190px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.opportunity-column header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
}

.opportunity-column header small {
  grid-column: 1 / -1;
  color: var(--muted);
}

.opportunity-column header span {
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  text-align: center;
  font-weight: 800;
}

.opportunity-column > div {
  display: grid;
  gap: 8px;
  align-content: start;
}

.opportunity-mini-card {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  text-align: left;
}

.opportunity-mini-profile {
  display: grid;
  gap: 5px;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.opportunity-mini-profile:hover {
  box-shadow: none;
}

.opportunity-mini-card strong,
.opportunity-mini-profile strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opportunity-mini-card small,
.opportunity-mini-profile small {
  color: var(--muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.opportunity-mini-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px dashed #e2e8f0;
}

.opportunity-mini-actions button {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 12px;
}

.quote-progress-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}

.quote-progress-steps span {
  display: grid;
  gap: 2px;
  min-height: 70px;
  padding: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.quote-progress-steps span.done {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.quote-progress-steps b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #334155;
  font-size: 12px;
}

.quote-progress-steps span.done b {
  background: #2563eb;
  color: #fff;
}

.quote-progress-steps em {
  color: var(--text);
  font-style: normal;
  font-weight: 800;
  font-size: 12px;
}

.quote-progress-steps small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.quote-action-checklist {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.quote-action-checklist span {
  display: grid;
  gap: 3px;
  min-height: 58px;
  padding: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

.quote-action-checklist span.ok {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.quote-action-checklist span.warn {
  border-color: #fed7aa;
  background: #fff7ed;
}

.quote-action-checklist b {
  color: var(--text);
  font-size: 12px;
}

.quote-action-checklist small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.quote-workflow-trail {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding: 8px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
}

.quote-workflow-trail > b {
  color: #0f172a;
  font-size: 12px;
}

.quote-workflow-trail > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.quote-workflow-trail span {
  display: grid;
  gap: 2px;
  min-height: 44px;
  padding: 6px;
  border-radius: 6px;
  background: #fff;
  color: #64748b;
}

.quote-workflow-trail span.done {
  background: #ecfdf5;
  color: #0f766e;
}

.quote-workflow-trail em {
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}

.quote-workflow-trail small {
  color: inherit;
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.quote-next-hint {
  padding: 8px 10px;
  border-left: 3px solid #0f8b8d;
  border-radius: 6px;
  background: #f0fdfa;
  color: #134e4a;
  font-size: 12px;
  line-height: 1.35;
}

.quote-action-note {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.quote-confirm-modal {
  display: grid;
  gap: 12px;
}

@media (max-width: 1180px) {
  .sales-command-panel {
    grid-template-columns: 1fr;
  }

  .sales-command-actions {
    justify-content: flex-start;
  }

  .sales-kpi-strip,
  .customer-command-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sales-workbench-grid {
    grid-template-columns: 1fr;
  }

  .opportunity-board {
    grid-template-columns: repeat(6, minmax(220px, 260px));
  }
}

@media (max-width: 760px) {
  .sales-command-copy h2 {
    font-size: 20px;
  }

  .sales-command-actions,
  .sales-quick-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .sales-command-actions button,
  .sales-quick-actions button {
    width: 100%;
  }

  .sales-kpi-strip,
  .customer-command-strip,
  .sales-funnel,
  .quote-progress-steps,
  .quote-action-checklist,
  .quote-workflow-trail > div {
    grid-template-columns: 1fr;
  }

  .sales-action-item {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .sales-action-item button {
    width: 100%;
  }
}

.quote-card {
  display: grid;
  grid-template-columns: minmax(430px, 1.45fr) minmax(210px, 0.58fr) minmax(220px, 0.62fr);
  gap: 14px;
  align-items: stretch;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.quote-card-main,
.quote-money-panel,
.quote-tier-panel,
.quote-card-actions {
  min-width: 0;
}

.quote-card-main {
  display: grid;
  align-content: start;
  gap: 10px;
}

.quote-card-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}

.quote-card-title h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
}

.quote-card-title p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.quote-card-products {
  margin-top: 2px;
}

.quote-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.quote-card-meta span {
  padding: 4px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  white-space: nowrap;
}

.quote-card-product-list {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid #dbe7f5;
  border-radius: 8px;
  background: #fbfdff;
}

.quote-card-product-list-head,
.quote-card-product-summary {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.quote-card-product-list-head b {
  color: #0f172a;
  font-size: 13px;
}

.quote-card-product-list-head small,
.quote-card-product-summary,
.quote-card-product-more {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.quote-card-product-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 56px 68px 78px;
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  border-top: 1px solid #e5edf6;
}

.quote-card-product-row > span,
.quote-card-product-row > b {
  text-align: right;
  white-space: nowrap;
  font-size: 12px;
}

.quote-card-product-row > b {
  color: #0f172a;
}

.quote-card-product-row > small {
  grid-column: 1 / -1;
  color: #64748b;
  font-size: 11px;
}

.quote-product-item-main {
  min-width: 0;
}

.quote-product-item-main strong,
.quote-product-item-main small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-product-item-main strong {
  color: #0f172a;
  font-size: 12px;
}

.quote-product-item-main small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.quote-card-product-summary {
  flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px solid #e5edf6;
}

.quote-price-basis {
  margin-top: 12px;
  border: 1px solid #dbe7f5;
  border-radius: 8px;
  background: #fbfdff;
  overflow: hidden;
}

.quote-price-basis-title {
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  background: #f1f7ff;
}

.quote-price-basis .table-wrap {
  margin: 0;
}

.quote-price-basis table {
  min-width: 680px;
}

.quote-price-basis th,
.quote-price-basis td {
  padding: 7px 8px;
  font-size: 12px;
}

.quote-price-basis small {
  color: var(--muted);
}

.quote-money-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.quote-money-panel > div {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid #dbe7f5;
  border-radius: 8px;
  background: #f8fbff;
}

.quote-money-panel span,
.quote-money-panel small {
  color: var(--muted);
  font-size: 12px;
}

.quote-money-panel b {
  font-size: 20px;
  line-height: 1.15;
  color: #0f172a;
}

.quote-money-panel .quote-total {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.quote-tier-panel {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
}

.quote-tier-title {
  font-weight: 800;
  color: #0f172a;
}

.quote-tier-title small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.quote-card-actions {
  display: grid;
  align-content: start;
  gap: 8px;
}

.quote-card-actions button {
  width: 100%;
}

.quote-card-actions .quote-workflow-trail {
  margin-top: 0;
}

.quote-workflow-trail--side > div {
  grid-template-columns: 1fr;
}

.quote-workflow-trail--side span {
  grid-template-columns: 64px 1fr;
  min-height: 0;
}

.quote-workflow-trail--side em,
.quote-workflow-trail--side small {
  min-width: 0;
}

@media (max-width: 1180px) {
  .quote-card {
    grid-template-columns: minmax(280px, 1fr) minmax(220px, 0.8fr);
  }

  .quote-card-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .quote-card-actions .quote-workflow-trail,
  .quote-card-actions .quote-next-hint {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .quote-card {
    grid-template-columns: 1fr;
  }

  .quote-card-actions {
    grid-template-columns: 1fr;
  }

  .quote-card-product-row {
    grid-template-columns: 1fr 48px 64px 74px;
  }

  .quote-card-actions .quote-workflow-trail,
  .quote-card-actions .quote-next-hint {
    grid-column: auto;
  }
}

.quote-reference-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  min-width: 0;
}

.quote-commission-list > div,
.quote-reference-list > div {
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid #dbe7f5;
  border-radius: 8px;
  background: #f8fbff;
}

.quote-reference-card.risk {
  border-color: #fecaca;
  background: #fff7f7;
}

.quote-reference-card.warn {
  border-color: #fed7aa;
  background: #fffaf3;
}

.quote-reference-card.ok {
  border-color: #bbf7d0;
  background: #f6fff9;
}

.quote-reference-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.quote-reference-head em {
  font-style: normal;
  white-space: nowrap;
  padding: 2px 6px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
}

.quote-reference-card.risk .quote-reference-head em {
  background: #fee2e2;
  color: #b91c1c;
}

.quote-reference-card.warn .quote-reference-head em {
  background: #ffedd5;
  color: #c2410c;
}

.quote-reference-card.ok .quote-reference-head em {
  background: #dcfce7;
  color: #15803d;
}

.quote-commission-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  min-width: 136px;
}

.quote-commission-list > div {
  background: #fff7ed;
  border-color: #fed7aa;
}

.quote-commission-list b,
.quote-commission-list span,
.quote-reference-list b,
.quote-reference-list span,
.quote-reference-list small {
  display: block;
  white-space: nowrap;
}

.quote-commission-list span,
.quote-reference-list span {
  font-weight: 800;
  color: #0f172a;
}

.quote-reference-list small {
  color: var(--muted);
}

.quote-price-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 260px;
}

.quote-price-presets button {
  min-height: 28px;
  padding: 0 8px;
  font-size: 12px;
}

.catalog-pricing-preview {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #cfe1ec;
  border-left: 4px solid #0f8b8d;
  border-radius: 10px;
  background: linear-gradient(180deg, #f8fffc 0%, #ffffff 100%);
}

.catalog-pricing-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.catalog-pricing-preview-head strong {
  color: #0f172a;
  font-size: 16px;
}

.catalog-pricing-preview-head span {
  color: #52606d;
  font-size: 12px;
}

.catalog-pricing-preview .table-wrap {
  max-height: 220px;
  margin: 0;
  overflow: auto;
}

.catalog-pricing-preview table {
  min-width: 720px;
}

.catalog-pricing-preview th,
.catalog-pricing-preview td {
  padding: 8px;
  font-size: 12px;
}

@media (max-width: 760px) {
  .price-center-console-head {
    display: grid;
  }

  .price-center-console-grid {
    grid-template-columns: 1fr;
  }

  .price-center-admin-head {
    display: grid;
  }

  .price-center-admin-flow,
  .price-center-admin-grid,
  .price-center-maintenance-grid,
  .inline-form-grid {
    grid-template-columns: 1fr;
  }

  .price-center-admin-flow article span {
    grid-column: 1 / -1;
  }

  .settings-pricing-flow {
    grid-template-columns: 1fr;
  }

  .quote-tier-editor-head,
  .quote-tier-row {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .quote-tier-editor-head {
    display: grid;
  }

  .catalog-pricing-preview-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings-maint-entry-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings-maint-entry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.public-quote-mode .sidebar,
.public-quote-mode .topbar,
.public-quote-mode .prototype-notice {
  display: none;
}

.public-quote-mode .main {
  margin-left: 0;
}

.public-quote-mode .content {
  max-width: 1180px;
  margin: 0 auto;
}

.public-quote-mode .page-head,
.public-quote-mode .filter-bar {
  display: none;
}

@media (min-width: 900px) {
  body.public-quote-mode {
    overflow: hidden;
  }

  body.public-quote-mode.public-talent-mode {
    overflow: auto;
  }

  .public-quote-mode .content {
    box-sizing: border-box;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    width: min(1180px, 100vw);
    height: 100vh;
    padding: 10px 14px;
    overflow: hidden;
  }

  .public-quote-mode.public-talent-mode .content {
    display: block;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .public-quote-mode #view {
    min-height: 0;
    height: 100%;
    margin-top: 0;
  }

  .public-quote-mode.public-talent-mode #view {
    height: auto;
    min-height: auto;
  }

  body.public-quote-mode.public-customer-doc-mode {
    overflow: auto;
    background: #e8f1f0;
  }

  .public-quote-mode.public-customer-doc-mode .content {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 100vh;
    padding: 0;
    overflow: visible;
  }

  .public-quote-mode.public-customer-doc-mode #view {
    height: auto;
    min-height: auto;
  }

  .public-quote-mode.public-customer-doc-mode .customer-mobile-doc-page {
    min-height: 100vh;
    padding: 22px;
  }

  .public-quote-mode .catalog-reader-page {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: 8px;
    height: calc(100vh - 20px);
    min-height: 0;
    padding-bottom: 0;
  }

  .public-quote-mode .catalog-reader-topbar {
    position: relative;
    top: auto;
    padding: 8px 12px;
  }

  .public-quote-mode .catalog-reader-topbar strong {
    font-size: 16px;
  }

  .public-quote-mode .catalog-reader-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 0;
    padding: 10px 12px;
  }

  .public-quote-mode .catalog-book-summary {
    gap: 8px;
  }

  .public-quote-mode .catalog-book-summary strong {
    font-size: 18px;
  }

  .public-quote-mode .catalog-book-summary > div:last-child {
    min-width: 70px;
    padding: 6px 8px;
  }

  .public-quote-mode .catalog-book-summary b {
    font-size: 22px;
  }

  .public-quote-mode .catalog-book-stage,
  .public-quote-mode .catalog-book {
    min-height: 0;
    height: 100%;
  }

  .public-quote-mode .catalog-print-leaf {
    min-height: 0;
    height: 100%;
    padding: 14px 18px;
    overflow: hidden;
  }

  .public-quote-mode .catalog-product-leaf {
    gap: 10px;
  }

  .public-quote-mode .catalog-print-section {
    top: 14px;
    left: 18px;
    padding: 5px 8px;
    font-size: 12px;
  }

  .public-quote-mode .catalog-product-page-head {
    padding-left: 78px;
  }

  .public-quote-mode .catalog-product-page-head h2 {
    font-size: 22px;
  }

  .public-quote-mode .catalog-print-product-grid {
    gap: 10px 12px;
  }

  .public-quote-mode .catalog-print-photo {
    aspect-ratio: 1 / 1;
  }

  .public-quote-mode .catalog-print-photo img {
    height: 100%;
  }

  .public-quote-mode .catalog-print-info strong {
    font-size: 12px;
  }

  .public-quote-mode .catalog-print-info span {
    font-size: 12px;
  }

  .public-quote-mode .catalog-print-info small {
    font-size: 11px;
  }

  .public-quote-mode .catalog-print-tags {
    min-height: 16px;
  }

  .public-quote-mode .catalog-print-tags em {
    padding: 1px 4px;
    font-size: 9px;
  }

  .public-quote-mode .catalog-print-actions button {
    min-height: 24px;
    padding: 3px 6px;
    font-size: 11px;
  }

  .public-quote-mode .catalog-book-controls {
    gap: 8px;
  }

  .public-quote-mode .catalog-book-controls button {
    min-height: 34px;
    padding: 6px 12px;
  }

  .public-quote-mode .catalog-inquiry-bar {
    position: relative;
    bottom: auto;
    z-index: 2;
    padding: 8px 10px;
  }

  .public-quote-mode .catalog-reader-toolbar {
    position: relative;
    bottom: auto;
    padding: 6px;
  }

  .public-quote-mode .catalog-reader-toolbar button {
    min-height: 42px;
    padding: 5px 4px;
  }
}

.contract-title { text-align: center; border-bottom: 2px solid #172033; margin-bottom: 18px; }
.contract-title h1 { margin: 0; letter-spacing: 6px; }
.contract-parties { padding: 12px 16px; background: #f7f9fc; border: 1px solid #dce4ef; }
.contract-parties p, .contract-clause { margin: 7px 0; }
.contract-document h3 { margin: 22px 0 8px; }
.contract-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 28px; }
.contract-signatures > div { min-height: 130px; padding: 16px; border: 1px solid #cbd5e1; }
.contract-payment-alert.safe {
  border-left-color: #10b981;
  background: #ecfdf5;
}

.contract-payment-alert.warn {
  border-left-color: #f59e0b;
  background: #fffbeb;
}

.contract-payment-alert.danger {
  border-left-color: #ef4444;
  background: #fff1f2;
}

.owner-contract-preview {
  padding: 22px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  margin-top: 14px;
}

.owner-contract-approval-actions {
  position: sticky;
  bottom: -18px;
  z-index: 2;
  padding: 12px 0 2px;
  background: #fff;
}

.form-grid select[multiple] {
  min-height: 112px;
}

.salary-scheme-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.salary-scheme-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.salary-scheme-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  margin-bottom: 14px;
  overflow: hidden;
}

.salary-scheme-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: #f5f8fc;
  border-bottom: 1px solid var(--line);
}

.salary-scheme-card-head p {
  margin: 4px 0 0;
}

.salary-scheme-basic {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
  padding: 14px 16px;
}

.salary-scheme-basic label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
}

.salary-scheme-basic input,
.salary-scheme-item input,
.salary-scheme-item select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  min-height: 34px;
  padding: 7px 9px;
  background: #fff;
}

.salary-scheme-items {
  padding: 0 16px 16px;
  overflow-x: auto;
}

.salary-scheme-item {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) minmax(90px, 0.6fr) minmax(130px, 0.8fr) minmax(140px, 0.9fr) minmax(220px, 1.5fr) 74px;
  gap: 8px;
  align-items: center;
  min-width: 880px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.salary-scheme-item-head {
  color: var(--muted);
  font-weight: 700;
  background: #f7f9fb;
  padding: 9px 8px;
  border-radius: 6px;
  border-bottom: 0;
  margin-bottom: 4px;
}

.sales-config-editor {
  display: grid;
  gap: 14px;
}

.sales-config-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}

.sales-config-row label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.sales-config-row input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  min-height: 34px;
  padding: 7px 9px;
  background: #fff;
}

.sales-config-row .danger {
  min-width: 72px;
}

.department-reminder-row {
  grid-template-columns: minmax(82px, .45fr) repeat(3, minmax(150px, 1fr)) minmax(160px, .9fr) auto;
}

.department-temp-row {
  grid-template-columns: minmax(82px, .45fr) repeat(3, minmax(140px, 1fr)) minmax(110px, .65fr) repeat(2, minmax(118px, .7fr)) minmax(150px, .9fr) auto;
}

.department-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.department-rule-row {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(110px, .55fr) minmax(170px, .9fr);
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}

.department-rule-row > .muted {
  grid-column: 1 / -1;
}

.department-rule-row label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.department-rule-row .inline-check {
  display: flex;
  color: var(--text);
  font-weight: 700;
}

.reminder-toggle-cell {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.reminder-toggle-cell input {
  width: auto;
  min-height: auto;
}

.promotion-config-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.promotion-config-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  overflow-x: auto;
}

.promotion-config-row {
  display: grid;
  gap: 8px;
  align-items: center;
  min-width: 920px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.promotion-standard-row {
  grid-template-columns: minmax(130px, 0.8fr) 80px minmax(230px, 1.5fr) minmax(210px, 1.3fr) minmax(190px, 1.2fr) 74px;
}

.promotion-rule-row {
  grid-template-columns: minmax(130px, 0.8fr) minmax(300px, 1.4fr) minmax(360px, 1.6fr) 74px;
}

.promotion-flow-row {
  grid-template-columns: minmax(150px, 0.8fr) minmax(120px, 0.7fr) minmax(360px, 1.7fr) minmax(180px, 1fr) 74px;
}

.promotion-config-head {
  color: var(--muted);
  font-weight: 700;
  background: #f7f9fb;
  padding: 9px 8px;
  border-radius: 6px;
  border-bottom: 0;
  margin: 8px 0 4px;
}

.promotion-config-row input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  min-height: 34px;
  padding: 7px 9px;
  background: #fff;
}

.smart-address {
  position: relative;
}

.smart-address button {
  align-self: flex-end;
  margin-top: 6px;
}

.address-cell {
  display: flex;
  min-width: 220px;
  gap: 8px;
  align-items: center;
}

.address-cell button {
  flex: 0 0 auto;
}

.customer-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 0 16px 16px;
}

.customer-level-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.customer-level-card {
  position: relative;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 86%, #ffffff);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--panel-soft) 72%, #ffffff));
}

.customer-level-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--primary);
}

.customer-level-card.level-a::before {
  background: var(--warm);
}

.customer-level-card.level-b::before {
  background: var(--primary);
}

.customer-level-card.level-c::before {
  background: var(--accent);
}

.customer-level-card.level-d::before {
  background: var(--red);
}

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

.customer-level-card-head strong {
  font-size: 16px;
}

.customer-level-number {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--text);
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}

.customer-level-number span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.customer-level-card p {
  margin: 0;
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
  font-size: 13px;
}

.customer-level-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.customer-level-meta span {
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.customer-level-actions {
  justify-content: flex-end;
  margin-top: 12px;
}

.customer-list-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 230px);
  gap: 14px;
  align-items: stretch;
  min-width: 0;
  padding: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.customer-list-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
}

.customer-list-card.is-pool {
  border-color: color-mix(in srgb, var(--warm) 34%, var(--line));
}

.customer-list-card.is-recycle {
  border-color: color-mix(in srgb, var(--red) 26%, var(--line));
}

.customer-card-main {
  display: grid;
  gap: 12px;
  min-width: 0;
  cursor: pointer;
  outline: none;
}

.customer-card-main:hover .customer-card-title .link-btn,
.customer-card-main:focus-visible .customer-card-title .link-btn {
  color: var(--blue);
}

.customer-card-main:focus-visible {
  border-radius: 8px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.customer-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.customer-card-title {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.customer-card-title > span,
.customer-card-metrics span,
.customer-card-detail-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.customer-card-title .link-btn {
  justify-content: flex-start;
  max-width: 100%;
  padding: 0;
  min-height: 0;
  color: var(--text);
  font-size: 21px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--text);
  text-align: left;
  white-space: normal;
}

.customer-card-customer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  min-width: 0;
}

.customer-card-customer strong {
  color: var(--blue);
  font-size: 14px;
  font-weight: 900;
}

.customer-card-customer small,
.customer-card-address span,
.customer-card-tags .muted {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.customer-card-metrics,
.customer-card-detail-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.customer-card-metrics > div,
.customer-card-detail-row > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border-radius: 8px;
  background: #f8fafc;
}

.customer-card-metrics strong,
.customer-card-detail-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
}

.customer-card-products {
  display: grid;
  grid-template-columns: minmax(170px, 230px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
  background: #f8fafc;
}

.customer-card-address {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, #ffffff);
  border-radius: 8px;
  background: #ffffff;
}

.customer-card-address span {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-card-address small {
  margin-left: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.customer-card-address button {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 4px 9px;
  font-size: 12px;
}

.customer-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
  align-items: center;
}

.sales-flow-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 0 16px 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
  border-radius: 8px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 86%, #ffffff), #ffffff);
}

.sales-flow-overview > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sales-flow-overview span,
.sales-flow-node-head span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.sales-flow-overview strong {
  color: var(--text);
  font-size: 18px;
}

.sales-flow-overview small {
  color: var(--muted);
}

.sales-exec-cockpit {
  display: grid;
  gap: 14px;
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 72%, #ffffff), #ffffff 58%),
    #ffffff;
}

.panel > .sales-exec-cockpit {
  margin: 0 16px 14px;
}

.sales-exec-cockpit.compact {
  padding: 14px;
}

.sales-exec-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.sales-exec-head > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sales-exec-head span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.sales-exec-head strong {
  color: var(--text);
  font-size: 20px;
}

.sales-exec-head small,
.sales-exec-rule small,
.sales-target-action small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.sales-exec-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.sales-exec-actions button {
  min-height: 32px;
  padding: 6px 12px;
}

.sales-exec-progress {
  display: grid;
  gap: 7px;
}

.sales-exec-progress > div {
  position: relative;
  height: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 72%, #ffffff);
}

.sales-exec-progress span {
  position: relative;
  z-index: 1;
  display: block;
  padding: 2px 10px;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.sales-exec-progress i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.sales-income-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.sales-income-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, #ffffff);
  border-radius: 8px;
  background: #ffffff;
}

.sales-income-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.sales-income-card strong {
  color: var(--text);
  font-size: 22px;
  line-height: 1.1;
}

.sales-income-card small {
  color: var(--muted);
  font-size: 12px;
}

.sales-income-card.gap {
  border-color: color-mix(in srgb, var(--amber) 38%, var(--line));
  background: #fffaf0;
}

.sales-income-card.done {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
  background: #f0fdfa;
}

.sales-exec-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(220px, 0.85fr);
  gap: 12px;
}

.sales-exec-bottom h3 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 16px;
}

.sales-action-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.sales-action-heading h3 {
  margin: 0;
}

.sales-action-heading small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.sales-target-action-list {
  display: grid;
  gap: 8px;
}

.sales-target-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.sales-action-rank {
  display: grid;
  gap: 5px;
  justify-items: center;
}

.sales-priority-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.sales-priority-badge.danger {
  background: #dc2626;
}

.sales-priority-badge.warn {
  background: #d97706;
}

.sales-priority-badge.info {
  background: #2563eb;
}

.sales-priority-badge.gray {
  background: #64748b;
}

.sales-target-action > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sales-target-action strong {
  color: var(--text);
  font-size: 14px;
}

.sales-target-action button {
  min-height: 30px;
  padding: 5px 10px;
}

.sales-exec-rule {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-soft) 22%, #ffffff);
}

.sales-exec-rule strong {
  color: var(--text);
  font-size: 16px;
}

.sales-exec-rule p {
  margin: 0;
  color: var(--ink-soft);
  font-weight: 800;
  line-height: 1.5;
}

.sales-settlement-lines {
  display: grid;
  gap: 8px;
}

.sales-settlement-lines span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.sales-settlement-lines b {
  min-width: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.2;
}

.sales-settlement-lines em {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.sales-payment-rule-form {
  gap: 12px;
}

.sales-payment-rule-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sales-payment-rule-options > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.sales-payment-rule-options > div.active {
  border-color: color-mix(in srgb, var(--primary) 36%, var(--line));
  background: color-mix(in srgb, var(--primary-soft) 42%, #ffffff);
}

.sales-payment-rule-options strong {
  color: var(--text);
  font-size: 14px;
}

.sales-payment-rule-options span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.sales-flow-overview-metrics {
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px 8px;
  align-items: baseline;
  justify-content: end;
}

.sales-flow-overview-metrics b {
  font-size: 24px;
  line-height: 1;
}

.sales-flow-node-chips {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sales-flow-node-chips span {
  padding: 4px 9px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.sales-op-target-panel {
  display: grid;
  gap: 12px;
  margin: 0 16px 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff, color-mix(in srgb, var(--accent-soft) 26%, #ffffff));
}

.sales-op-target-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.sales-op-target-head > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sales-op-target-head span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.sales-op-target-head strong {
  color: var(--text);
  font-size: 18px;
}

.sales-op-target-head small,
.sales-op-target-card small {
  color: var(--muted);
  font-size: 12px;
}

.sales-op-target-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.sales-op-target-actions button {
  min-height: 32px;
  padding: 6px 12px;
}

.sales-op-target-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sales-op-target-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.sales-op-target-card > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

.sales-op-target-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.sales-op-target-card strong {
  color: var(--text);
  font-size: 22px;
}

.sales-op-target-card.done {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
}

.sales-op-target-card.warn {
  border-color: color-mix(in srgb, var(--amber) 32%, var(--line));
}

.sales-op-target-card.gap {
  border-color: color-mix(in srgb, var(--primary) 20%, var(--line));
}

.sales-op-target-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 70%, #ffffff);
}

.sales-op-target-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.sales-op-target-form {
  gap: 12px;
}

.sales-flow-node-card {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--primary-soft) 42%, #ffffff));
}

.sales-flow-node-card.tone-c,
.sales-flow-node-card.tone-d {
  border-color: color-mix(in srgb, var(--amber) 34%, var(--line));
  background: linear-gradient(180deg, #ffffff, #fff7ed);
}

.sales-flow-node-card.tone-d {
  border-color: color-mix(in srgb, var(--red) 34%, var(--line));
  background: linear-gradient(180deg, #ffffff, #fff1f2);
}

.sales-flow-node-head,
.sales-flow-node-meta,
.sales-flow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.sales-flow-node-head {
  justify-content: space-between;
}

.sales-flow-node-head strong {
  color: var(--text);
  font-size: 17px;
}

.sales-flow-node-head em {
  color: var(--accent);
  font-style: normal;
  font-weight: 900;
}

.sales-flow-question {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.sales-flow-question b,
.sales-flow-branches b {
  color: var(--text);
  font-size: 13px;
}

.sales-flow-question span,
.sales-flow-node-meta span:not(.badge),
.sales-flow-branches span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.sales-flow-branches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sales-flow-branches > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, #ffffff);
  border-radius: 8px;
  background: #ffffff;
}

.sales-flow-actions button {
  min-height: 30px;
  padding: 5px 10px;
  font-size: 13px;
}

.sales-flow-no-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sales-flow-no-panel > div {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.sales-flow-no-panel span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.modal-backdrop.sales-flow-modal {
  padding: 20px;
}

.modal-backdrop.sales-flow-modal .modal {
  width: min(700px, calc(100vw - 40px));
  max-height: 90vh;
  border-radius: 18px;
}

.modal-backdrop.sales-flow-modal .modal-head {
  padding: 14px 16px;
}

.modal-backdrop.sales-flow-modal #modalBody {
  padding: 14px;
}

.sales-flow-modal-body {
  display: grid;
  gap: 12px;
}

.sales-flow-current-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, auto);
  gap: 12px;
  align-items: stretch;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line));
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff, color-mix(in srgb, var(--primary-soft) 50%, #ffffff));
}

.sales-flow-current-card.tone-c,
.sales-flow-current-card.tone-d {
  border-color: color-mix(in srgb, var(--amber) 36%, var(--line));
  background: linear-gradient(135deg, #ffffff, #fff7ed);
}

.sales-flow-current-card.tone-d {
  border-color: color-mix(in srgb, var(--red) 36%, var(--line));
  background: linear-gradient(135deg, #ffffff, #fff1f2);
}

.sales-flow-current-card > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.sales-flow-current-card span,
.sales-flow-step-head small,
.sales-flow-step-grid b {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.sales-flow-current-card strong {
  color: var(--text);
  font-size: 20px;
}

.sales-flow-current-card p,
.sales-flow-current-card small,
.sales-flow-step p,
.sales-flow-step-grid span {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

.sales-flow-modal-actions {
  gap: 8px;
}

.sales-flow-step-list {
  display: grid;
  gap: 8px;
  max-height: min(52vh, 560px);
  overflow: auto;
  padding-right: 4px;
}

.sales-flow-step {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.sales-flow-step.current {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
  background: color-mix(in srgb, var(--primary-soft) 48%, #ffffff);
}

.sales-flow-step-head {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.sales-flow-step-head > span {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: var(--primary);
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
}

.sales-flow-step-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sales-flow-step-head strong {
  color: var(--text);
  font-size: 16px;
}

.sales-flow-step-head em {
  margin-left: auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--primary);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.sales-flow-step-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sales-flow-step-grid > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, #ffffff);
  border-radius: 8px;
  background: #f8fafc;
}

.sales-flow-manual-form {
  gap: 12px;
}

.customer-card-side {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 16px;
  min-width: 0;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}

.customer-card-side-status {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  width: 100%;
  max-width: 100%;
}

.customer-card-side-status .badge {
  justify-self: center;
  max-width: 100%;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.customer-card-actions {
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  gap: 8px;
  width: 100%;
}

.customer-card-actions button {
  width: 100%;
}

.customer-empty {
  grid-column: 1 / -1;
}

@media (max-width: 1180px) {
  .customer-list-card {
    grid-template-columns: 1fr;
  }

  .customer-card-side {
    padding-top: 10px;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .customer-card-side-status,
  .customer-card-actions {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    align-items: center;
  }
}

@media (max-width: 760px) {
  .customer-level-guide-grid {
    grid-template-columns: 1fr;
  }

  .customer-card-grid {
    padding: 0 12px 12px;
  }

  .sales-flow-overview,
  .sales-income-grid,
  .sales-exec-bottom,
  .sales-op-target-grid,
  .sales-flow-branches,
  .sales-flow-no-panel,
  .sales-flow-current-card,
  .sales-flow-step-grid {
    grid-template-columns: 1fr;
  }

  .sales-op-target-head {
    display: grid;
  }

  .sales-op-target-actions {
    justify-content: stretch;
  }

  .sales-op-target-actions button {
    flex: 1 1 140px;
  }

  .sales-exec-head {
    display: grid;
  }

  .sales-exec-actions {
    justify-content: stretch;
  }

  .sales-exec-actions button {
    flex: 1 1 140px;
  }

  .sales-target-action {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .sales-payment-rule-options {
    grid-template-columns: 1fr;
  }

  .sales-target-action button {
    grid-column: 1 / -1;
  }

  .customer-card-metrics,
  .customer-card-detail-row,
  .customer-card-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-card-address {
    align-items: flex-start;
    flex-direction: column;
  }

  .customer-card-address span {
    white-space: normal;
  }
}

@media (max-width: 560px) {
  .customer-card-metrics,
  .customer-card-detail-row,
  .customer-card-products,
  .customer-card-side-status,
  .customer-card-actions {
    grid-template-columns: 1fr;
  }
}

.follow-card > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.follow-card {
  cursor: pointer;
}

.follow-card.selected {
  border-color: var(--primary);
  background: #f1f7ff;
}

.follow-card .follow-time {
  color: var(--muted);
  font-size: 13px;
}

.follow-detail {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.follow-detail p {
  padding-bottom: 9px;
  border-bottom: 1px dashed var(--line);
}

.tag-cloud {
  display: flex;
  min-width: 280px;
  max-width: 440px;
  flex-wrap: wrap;
  gap: 5px;
}

.field-label {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 13px;
}

.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.field-label-row button {
  min-height: 28px;
  padding: 4px 10px;
  font-size: 12px;
}

.tag-picker {
  display: grid;
  gap: 10px;
  max-height: 340px;
  padding: 12px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.tag-picker fieldset {
  margin: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.tag-picker legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.tag-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tag-option {
  position: relative;
  cursor: pointer;
}

.tag-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tag-option span {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid #b9c8d8;
  border-radius: 999px;
  color: #334155;
  background: #fff;
  user-select: none;
}

.tag-option input:checked + span {
  border-color: var(--primary);
  color: #fff;
  background: var(--primary);
  box-shadow: 0 0 0 2px rgba(21, 101, 192, 0.12);
}

.form-section-title {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
  padding: 10px 12px;
  border-left: 4px solid var(--primary);
  border-radius: 6px;
  background: #edf5ff;
}

.form-section-title > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  background: var(--primary);
  font-weight: 700;
}

.form-section-title strong,
.form-section-title small {
  display: block;
}

.form-section-title small {
  margin-top: 2px;
  color: var(--muted);
}

.form-section-title.secondary {
  border-left-color: #94a3b8;
  background: #f8fafc;
}

.form-section-title.secondary > span {
  background: #64748b;
}

.calendar-plan {
  width: 100%;
  margin-top: 4px;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.calendar-plan span,
.calendar-plan small {
  display: block;
}

.region-bars {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.region-bar > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.region-bar span {
  color: var(--muted);
}

.bar-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6edf5;
}

.bar-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), #42a5f5);
}

.internal-finance {
  color: #8a4b08;
  background-color: #fff8e8;
}

.image-preview-box {
  display: grid;
  min-height: 180px;
  place-items: center;
  overflow: hidden;
  border: 1px dashed #9fb4c9;
  border-radius: 8px;
  color: var(--muted);
  background: #f8fafc;
}

.image-preview-box img {
  display: none;
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
}

.product-1688-form {
  max-width: min(1180px, 96vw);
}

.product-link-import {
  display: grid;
  grid-template-columns: minmax(210px, 0.42fr) minmax(300px, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line));
  border-radius: 8px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 70%, #fff), #fff 62%);
}

.product-link-import strong {
  display: block;
  color: var(--text);
  font-size: 17px;
}

.product-link-import p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.product-link-import-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  gap: 8px;
}

.product-link-result {
  grid-column: 1 / -1;
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border: 1px dashed color-mix(in srgb, var(--primary) 26%, var(--line));
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  font-weight: 800;
}

.product-link-result strong {
  color: var(--text);
  font-size: 13px;
}

.product-link-result span {
  color: var(--muted);
  font-weight: 700;
  line-height: 1.45;
}

.product-link-result.ok {
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 42%, #ffffff);
}

.product-link-result.warn {
  border-style: solid;
  border-color: #f8c471;
  background: #fff8e7;
}

.product-link-media-preview {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
}

.product-link-media-preview:empty {
  display: none;
}

.product-link-media-preview > div {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.product-link-media-preview span {
  position: relative;
  display: block;
  flex: 0 0 72px;
  height: 64px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 8px;
  background: #ffffff;
}

.product-link-media-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-link-media-preview small {
  position: absolute;
  left: 4px;
  bottom: 4px;
  padding: 2px 5px;
  border-radius: 6px;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.72);
  font-size: 11px;
  font-weight: 900;
}

.product-link-media-preview p {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.product-link-media-preview b,
.product-link-media-preview em,
.product-link-media-preview p small {
  position: static;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary-soft) 72%, #ffffff);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.product-link-media-preview em {
  color: var(--muted);
}

.product-import-steps {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.product-import-steps span {
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line));
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.product-flow-status {
  display: grid;
  gap: 5px;
  min-width: 180px;
}

.product-flow-status strong,
.product-flow-status span {
  display: block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-flow-status strong {
  color: var(--text);
  font-size: 13px;
}

.product-flow-status span {
  color: var(--muted);
  font-size: 12px;
}

.product-flow-status div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.product-flow-status em {
  padding: 3px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-soft) 55%, #ffffff);
  color: var(--primary-strong);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.product-pricing-mode-card {
  display: grid;
  grid-template-columns: minmax(240px, 0.45fr) minmax(0, 1fr);
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: 8px;
  background: #f8fafc;
}

.product-pricing-mode-card label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 800;
}

.product-pricing-mode-tip {
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text);
  background: #fff;
  line-height: 1.5;
  font-weight: 700;
}

.product-price-foundation-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: 8px;
  background: #f8fafc;
}

.product-price-foundation-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}

.product-price-foundation-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.product-price-foundation-head strong {
  color: var(--text);
  font-size: 16px;
  line-height: 1.35;
}

.product-price-foundation-head span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.product-price-strategy-field {
  display: grid;
  gap: 6px;
  max-width: 420px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.product-price-tier-rows {
  display: grid;
  gap: 8px;
}

.product-price-tier-row {
  display: grid;
  grid-template-columns: minmax(90px, 0.45fr) minmax(130px, 0.65fr) minmax(150px, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, #ffffff);
  border-radius: 8px;
  background: #ffffff;
}

.product-price-tier-row label {
  display: grid;
  gap: 5px;
  margin: 0;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.product-price-tier-row input {
  width: 100%;
}

.product-price-foundation-preview {
  min-height: 42px;
}

.product-price-preview-empty {
  padding: 10px 12px;
  border: 1px dashed color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.product-price-preview-head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  color: var(--text);
}

.product-price-preview-head strong {
  font-size: 14px;
}

.product-price-preview-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.product-price-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.product-price-preview-grid article {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, #ffffff);
  border-radius: 8px;
  background: #ffffff;
}

.product-price-preview-grid article > strong {
  color: var(--text);
  font-size: 13px;
}

.product-price-preview-grid article > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.product-price-preview-grid span {
  display: grid;
  gap: 2px;
  padding: 7px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 8%, #ffffff);
}

.product-price-preview-grid em,
.product-price-preview-grid small {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.product-price-preview-grid b {
  color: var(--primary-700);
  font-size: 14px;
}

.product-image-entry {
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.product-main-image-preview {
  min-height: 220px;
  background: #fff;
}

.product-main-image-preview span {
  max-width: 190px;
  padding: 12px;
  text-align: center;
  font-weight: 800;
  line-height: 1.5;
}

.product-image-controls {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.product-image-controls strong {
  color: var(--text);
  font-size: 16px;
}

.product-image-controls p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.product-image-controls label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 800;
}

.product-image-controls input {
  width: 100%;
}

@media (max-width: 760px) {
  .product-link-import,
  .product-pricing-mode-card,
  .product-image-entry {
    grid-template-columns: 1fr;
  }

  .product-link-import-row {
    grid-template-columns: 1fr;
  }

  .product-import-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-price-foundation-head {
    flex-direction: column;
  }

  .product-price-tier-row {
    grid-template-columns: 1fr;
  }
}

.sku-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.sku-matrix table {
  width: 100%;
  min-width: 900px;
  table-layout: fixed;
}

.sku-matrix th,
.sku-matrix td {
  vertical-align: middle;
  padding: 8px 10px;
}

.sku-matrix input,
.sku-matrix select {
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
}

.sku-matrix th:nth-child(1) { width: 165px; }
.sku-matrix th:nth-child(2) { width: 130px; }
.sku-matrix th:nth-child(3) { width: 150px; }
.sku-matrix th:nth-child(4) { width: 190px; }
.sku-matrix th:nth-child(5) { width: 112px; }
.sku-matrix th:nth-child(6) { width: 88px; }
.sku-matrix th:nth-child(7) { width: 82px; }

.sku-matrix input[name="skuCode"] {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sku-logistics {
  display: grid;
  gap: 6px;
}

.sku-dims,
.sku-weight {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.sku-weight {
  grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
}

.sku-price-pair,
.sku-file-actions {
  display: grid;
  gap: 6px;
}

.sku-file-actions {
  justify-items: stretch;
}

.mini-file {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.mini-file input {
  display: none;
}

.sku-preview {
  display: none;
  width: 42px;
  height: 32px;
  margin-top: 6px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.product-taxonomy-panel {
  margin-bottom: 14px;
  border-color: color-mix(in srgb, var(--primary) 22%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 60%, #ffffff), #ffffff 45%),
    var(--panel);
}

.product-taxonomy-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.product-taxonomy-head span {
  display: block;
  margin-bottom: 4px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
}

.product-taxonomy-head h2 {
  margin: 0;
  font-size: 22px;
}

.product-taxonomy-head p {
  margin: 6px 0 0;
  color: var(--muted);
}

.product-taxonomy-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.product-taxonomy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.product-taxonomy-item {
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, #ffffff);
  border-radius: 8px;
  background: color-mix(in srgb, #ffffff 88%, var(--primary-soft));
}

.product-taxonomy-item > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.product-taxonomy-item strong {
  color: var(--text);
}

.product-taxonomy-item small,
.product-taxonomy-item p {
  color: var(--muted);
}

.product-taxonomy-item p {
  margin: 6px 0 10px;
  font-size: 13px;
}

.product-taxonomy-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.product-taxonomy-chips span,
.product-taxonomy-chips em {
  padding: 4px 8px;
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font-size: 12px;
  font-style: normal;
  border: 1px solid color-mix(in srgb, var(--line) 80%, #ffffff);
}

.product-taxonomy-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--line) 80%, #ffffff);
  color: var(--muted);
  font-size: 13px;
}

.product-taxonomy-editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.product-taxonomy-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 230px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, #ffffff);
  border-radius: 10px;
  background: color-mix(in srgb, #ffffff 86%, var(--primary-soft));
}

.product-taxonomy-editor-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, #ffffff);
}

.product-taxonomy-editor-head strong {
  font-size: 15px;
}

.product-taxonomy-editor-head span {
  color: var(--muted);
  font-size: 12px;
}

.product-taxonomy-edit-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  padding-right: 2px;
}

.product-taxonomy-edit-tag {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, #ffffff);
  border-radius: 8px;
  background: #fff;
}

.product-taxonomy-edit-tag input,
.product-taxonomy-add-row input {
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 6px 4px;
  font: inherit;
}

.product-taxonomy-edit-tag input:focus,
.product-taxonomy-add-row input:focus {
  outline: 2px solid color-mix(in srgb, var(--primary) 28%, transparent);
  border-radius: 6px;
}

.product-taxonomy-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: auto;
  padding: 8px;
  border-radius: 8px;
  background: color-mix(in srgb, #ffffff 70%, var(--accent-soft));
  border: 1px dashed color-mix(in srgb, var(--primary) 35%, var(--line));
}

.product-analytics-panel {
  margin-bottom: 14px;
}

.product-analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.product-analytics-grid > div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
}

.product-analytics-grid h3 {
  margin: 0 0 10px;
  font-size: 16px;
}

.product-analytics-bar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  overflow: hidden;
  margin: 8px 0;
  padding: 9px 10px;
  border-radius: 10px;
  background: #fff;
}

.product-analytics-bar > * {
  position: relative;
  z-index: 1;
}

.product-analytics-bar i {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 0;
  display: block;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), #22c55e);
}

.product-analytics-bar strong,
.product-analytics-bar span {
  display: block;
}

.product-analytics-bar span {
  color: var(--muted);
  font-size: 12px;
}

.product-analytics-bar em {
  font-style: normal;
  font-weight: 800;
  color: var(--primary);
}

.product-rank-panel {
  grid-column: span 2;
}

.product-rank-card {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  overflow: hidden;
  margin: 8px 0;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
}

.product-rank-card > * {
  position: relative;
  z-index: 1;
}

.product-rank-card img,
.owner-product-row img {
  width: 52px;
  height: 40px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.product-rank-card strong,
.product-rank-card span,
.product-rank-card small {
  display: block;
}

.product-rank-card span,
.product-rank-card small {
  color: var(--muted);
  font-size: 12px;
}

.product-rank-card em {
  font-style: normal;
  font-weight: 900;
  color: var(--primary);
}

.product-rank-card i {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 0;
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), #22c55e);
}

.owner-product-insight .grid {
  gap: 12px;
}

.owner-product-insight h3 {
  margin: 0 0 10px;
  font-size: 15px;
}

.owner-insight-bar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  overflow: hidden;
  margin: 7px 0;
  padding: 8px 9px;
  border: 1px solid #e5edf7;
  border-radius: 10px;
  background: #fff;
}

.owner-insight-bar > * {
  position: relative;
  z-index: 1;
}

.owner-insight-bar strong,
.owner-insight-bar span {
  display: block;
}

.owner-insight-bar span {
  color: var(--muted);
  font-size: 12px;
}

.owner-insight-bar em {
  font-style: normal;
  font-weight: 800;
  color: var(--primary);
}

.owner-insight-bar i {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 0;
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), #22c55e);
}

.owner-product-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin: 7px 0;
  padding: 8px;
  border: 1px solid #e5edf7;
  border-radius: 10px;
  background: #fff;
}

.owner-product-row strong,
.owner-product-row span {
  display: block;
}

.owner-product-row span {
  color: var(--muted);
  font-size: 12px;
}

.customer-profile-detail {
  display: grid;
  gap: 12px;
}

.modal-backdrop.customer-profile-modal {
  padding: 18px;
}

.modal-backdrop.customer-profile-modal .modal {
  width: min(760px, calc(100vw - 36px));
  max-height: 90vh;
}

.modal-backdrop.customer-profile-modal .modal-head {
  padding: 14px 16px;
}

.modal-backdrop.customer-profile-modal #modalBody {
  padding: 14px;
}

.customer-profile-hero-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  border-radius: 8px;
  background: #ffffff;
}

.customer-profile-hero-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
}

.customer-profile-hero-head span,
.customer-profile-stat-grid span,
.customer-profile-info-cards span,
.customer-profile-record-lines span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.customer-profile-hero-head h2 {
  margin: 2px 0 4px;
  font-size: 24px;
  line-height: 1.2;
}

.customer-profile-hero-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.customer-profile-stat-grid,
.customer-profile-info-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.customer-profile-stat-grid > div,
.customer-profile-info-cards > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
  background: #f8fafc;
}

.customer-profile-stat-grid strong {
  color: var(--text);
  font-size: 20px;
  line-height: 1.2;
}

.customer-profile-info-cards strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
}

.customer-portrait-card {
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  text-align: left;
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  box-shadow: none;
}

.customer-portrait-card:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 38%, var(--line));
  box-shadow: 0 12px 24px rgba(16, 24, 40, 0.08);
}

.customer-portrait-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.customer-portrait-card-head strong {
  font-size: 18px;
}

.customer-portrait-card-head em {
  padding: 2px 8px;
  color: var(--primary);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  border-radius: 999px;
  background: var(--primary-soft);
}

.customer-portrait-card.needs-work .customer-portrait-card-head em {
  color: var(--amber);
  background: #fff7e6;
}

.customer-portrait-card.complete .customer-portrait-card-head em {
  color: var(--green);
  background: var(--accent-soft);
}

.customer-portrait-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 72%, #ffffff);
}

.customer-portrait-progress i {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.customer-portrait-card.needs-work .customer-portrait-progress i {
  background: linear-gradient(90deg, var(--amber), #e0a82e);
}

.customer-portrait-card.complete .customer-portrait-progress i {
  background: linear-gradient(90deg, var(--green), var(--accent));
}

.customer-portrait-card p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.customer-portrait-layers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.customer-portrait-layer {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, #ffffff);
  border-radius: 8px;
  background: #ffffff;
}

.customer-portrait-layer.focus {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
  background: color-mix(in srgb, var(--primary-soft) 50%, #ffffff);
}

.customer-portrait-layer span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.customer-portrait-layer strong {
  color: var(--text);
  font-size: 16px;
  line-height: 1.15;
}

.customer-portrait-layer small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.customer-portrait-prompts,
.customer-portrait-editor-prompts {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.customer-portrait-prompts span,
.customer-portrait-editor-prompts span {
  min-width: 0;
  padding: 7px 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  border: 1px solid color-mix(in srgb, var(--line) 72%, #ffffff);
  border-radius: 8px;
  background: #ffffff;
  overflow-wrap: anywhere;
}

.customer-portrait-prompts span b,
.customer-portrait-editor-prompts span b {
  display: block;
  margin-bottom: 2px;
  color: var(--primary);
  font-size: 12px;
}

.customer-portrait-card small {
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
}

.customer-portrait-editor-summary {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
  border-radius: 8px;
  background: #f8fafc;
}

.customer-portrait-form .form-section-title {
  margin-top: 4px;
}

.customer-portrait-editor-score {
  display: grid;
  gap: 8px;
}

.customer-portrait-editor-score > div:first-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.customer-portrait-editor-score span,
.customer-portrait-editor-prompts b {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.customer-portrait-editor-score strong {
  color: var(--text);
  font-size: 24px;
  line-height: 1.1;
}

.customer-portrait-editor-score small {
  color: var(--muted);
  font-size: 12px;
}

.customer-portrait-follow-prompt {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 15%, var(--line));
  border-radius: 8px;
  background: #f8fafc;
}

.customer-portrait-follow-prompt.is-empty {
  color: var(--muted);
  font-size: 13px;
}

.customer-portrait-follow-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.customer-portrait-follow-head span {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.customer-portrait-follow-head small {
  color: var(--muted);
  font-size: 12px;
}

.customer-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

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

.customer-profile-section-head h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
}

.customer-profile-section-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.customer-profile-card-list {
  display: grid;
  gap: 8px;
}

.customer-profile-card-list .customer-profile-record-card {
  grid-template-columns: 1fr;
  gap: 8px;
}

.customer-profile-record-head strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 15px;
  line-height: 1.3;
}

.customer-profile-record-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.customer-profile-record-lines {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.customer-profile-record-lines span {
  min-width: 0;
  padding: 7px 8px;
  border-radius: 8px;
  background: #f8fafc;
  overflow-wrap: anywhere;
}

.customer-profile-product-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, #ffffff);
  border-radius: 8px;
  background: #f8fafc;
}

.customer-profile-product-card .product-photo {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.customer-profile-product-card strong,
.customer-profile-product-card span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.customer-profile-product-card span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.customer-profile-product-card b {
  white-space: nowrap;
}

.customer-profile-empty {
  margin: 0;
}

.profile-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.profile-info-grid > div {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
}

.profile-info-grid .wide {
  grid-column: 1 / -1;
}

.profile-info-grid b {
  color: #64748b;
  font-size: 12px;
}

.profile-info-grid span {
  word-break: break-word;
}

.customer-profile-card-section {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--line));
  border-radius: 8px;
  background: #ffffff;
}

.customer-profile-card-section > .panel-head {
  padding: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.customer-profile-record-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.customer-profile-record-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
  min-width: 0;
  padding: 12px 12px 12px 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 88%, #ffffff);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.customer-profile-record-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
}

.customer-profile-record-media {
  display: grid;
  place-items: center;
  width: 74px;
  min-width: 0;
  min-height: 66px;
  border-radius: 8px;
  background: #eef6f5;
}

.customer-profile-record-card:has(.customer-profile-record-media) {
  grid-template-columns: 82px minmax(0, 1fr) auto;
}

.customer-profile-record-media .product-photo {
  width: 64px;
  height: 58px;
  object-fit: contain;
}

.customer-profile-record-body {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.customer-profile-record-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
}

.customer-profile-record-head h3 {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 18px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.customer-profile-record-head span,
.customer-profile-record-fields span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.customer-profile-record-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.customer-profile-record-badges {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: 260px;
}

.customer-profile-record-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.customer-profile-record-fields > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
  background: #f8fafc;
}

.customer-profile-record-fields strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
}

.customer-profile-record-actions {
  display: grid;
  align-content: end;
  gap: 8px;
  min-width: 130px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}

.customer-profile-record-actions button {
  width: 100%;
}

@media (max-width: 900px) {
  .product-rank-panel {
    grid-column: auto;
  }

  .profile-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-profile-hero-head,
  .customer-profile-product-card {
    grid-template-columns: 1fr;
  }

  .customer-profile-hero-head {
    display: grid;
  }

  .customer-profile-record-card,
  .customer-profile-record-card:has(.customer-profile-record-media) {
    grid-template-columns: 1fr;
  }

  .customer-profile-record-actions {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    padding-top: 10px;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .customer-profile-record-media {
    width: 100%;
  }

  .customer-profile-record-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .customer-profile-stat-grid,
  .customer-profile-info-cards,
  .customer-profile-record-lines,
  .customer-portrait-layers {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .sales-maintenance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .sales-maintenance-scope,
  .sales-maintenance-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .customer-profile-card-section {
    padding: 12px;
  }

  .customer-profile-record-head {
    flex-direction: column;
  }

  .customer-profile-record-badges {
    justify-content: flex-start;
    max-width: none;
  }

  .customer-profile-record-fields {
    grid-template-columns: 1fr;
  }
}

.contract-entry-guide {
  margin-bottom: 12px;
  border-left-color: var(--primary);
  background: linear-gradient(90deg, #f7fbff, #ffffff);
}

.contract-admin-board {
  display: grid;
  gap: 14px;
}

.contract-create-list {
  display: grid;
  gap: 10px;
  max-height: min(58vh, 560px);
  padding-right: 3px;
  overflow: auto;
}

.contract-create-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(128px, 160px);
  gap: 12px;
  align-items: stretch;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
  border-radius: 8px;
  background: #ffffff;
}

.contract-create-option-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.contract-create-option-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
}

.contract-create-option-head strong {
  color: var(--blue);
  font-size: 12px;
}

.contract-create-option-head h3 {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 18px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.contract-create-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.contract-create-meta span {
  padding: 5px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

.contract-create-products {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.contract-create-actions {
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
}

.contract-create-actions button {
  width: 100%;
}

.contract-admin-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.contract-admin-summary > div,
.contract-admin-card {
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  border-radius: 8px;
  background: #ffffff;
}

.contract-admin-summary > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
}

.contract-admin-summary span,
.contract-admin-head span,
.contract-admin-metrics span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.contract-admin-summary strong {
  color: var(--text);
  font-size: 20px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.contract-admin-list {
  display: grid;
  gap: 12px;
}

.contract-admin-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(204px, 230px);
  gap: 14px;
  align-items: stretch;
  min-width: 0;
  padding: 14px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.contract-admin-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
}

.contract-admin-main {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

.contract-admin-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
}

.contract-admin-head h3 {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 21px;
  line-height: 1.2;
}

.contract-admin-customer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  min-width: 0;
}

.contract-admin-customer .link-btn {
  padding: 0;
  min-height: 0;
  color: var(--blue);
  font-weight: 900;
  font-size: 14px;
}

.contract-admin-customer small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.contract-admin-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.contract-admin-metrics > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 68px;
  padding: 12px;
  border-radius: 8px;
  background: #f8fafc;
}

.contract-admin-metrics strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
}

.contract-admin-execution {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.contract-admin-execution span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #dbe7f5;
  border-radius: 8px;
  background: #fbfdff;
}

.contract-admin-execution span.ok {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.contract-admin-execution span.warn {
  border-color: #fed7aa;
  background: #fff7ed;
}

.contract-admin-execution span.danger {
  border-color: #fecaca;
  background: #fff7f7;
}

.contract-admin-execution b {
  color: var(--muted);
  font-size: 12px;
}

.contract-admin-execution strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 14px;
  line-height: 1.3;
}

.contract-product-panel {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid #dbe7f5;
  border-radius: 8px;
  background: #fbfdff;
}

.contract-product-head,
.contract-product-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.contract-product-head b {
  color: #0f172a;
  font-size: 13px;
}

.contract-product-head small,
.contract-product-summary,
.contract-product-more,
.contract-product-empty {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.contract-product-line {
  display: grid;
  grid-template-columns: 42px minmax(170px, 1fr) 58px 76px 86px;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid #e5edf6;
}

.contract-product-line .product-thumb {
  width: 42px;
  height: 34px;
  border-radius: 6px;
  object-fit: cover;
  background: #eef5f4;
}

.contract-product-line .product-thumb.placeholder {
  display: inline-grid;
  place-items: center;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 86%, #ffffff);
  font-size: 13px;
  font-weight: 900;
}

.contract-product-main {
  min-width: 0;
}

.contract-product-main strong,
.contract-product-main small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contract-product-main strong {
  color: #0f172a;
  font-size: 13px;
  line-height: 1.25;
}

.contract-product-main small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.contract-product-line > span,
.contract-product-line > b {
  text-align: right;
  white-space: nowrap;
  color: var(--text);
  font-size: 12px;
}

.contract-product-line > b {
  font-weight: 900;
}

.contract-product-line > small {
  grid-column: 2 / -1;
  color: #64748b;
  font-size: 11px;
}

.contract-product-summary {
  padding-top: 7px;
  border-top: 1px solid #e5edf6;
}

.contract-admin-products {
  display: grid;
  grid-template-columns: minmax(140px, 184px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
  background: #f8fafc;
}

.contract-admin-products .thumb-strip {
  overflow: hidden;
  flex-wrap: wrap;
  max-height: 78px;
}

.contract-admin-products .product-thumb {
  width: 50px;
  height: 40px;
  border-radius: 6px;
  background: #eef5f4;
  object-fit: cover;
}

.contract-admin-products .product-thumb.placeholder {
  display: inline-grid;
  place-items: center;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 86%, #ffffff);
  font-size: 13px;
  font-weight: 900;
}

.contract-admin-products strong,
.contract-admin-products span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.contract-admin-products span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.contract-admin-side {
  display: grid;
  align-content: space-between;
  gap: 10px;
  min-width: 0;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}

.contract-admin-side-status {
  display: grid;
  gap: 6px;
}

.contract-admin-side-status .badge {
  justify-self: start;
}

.contract-admin-side-status button,
.contract-admin-side-note {
  width: 100%;
}

.contract-signature-verification {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 6%, #ffffff);
  font-size: 12px;
}

.contract-signature-verification b {
  color: var(--text);
  font-size: 13px;
}

.contract-signature-verification span {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.contract-signature-verification button {
  width: 100%;
}

.contract-signature-verification.muted {
  border-style: dashed;
  background: #f8fafc;
}

.contract-admin-side-note {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
}

.contract-admin-actions {
  display: grid;
  grid-template-columns: 1fr;
  align-content: end;
  gap: 8px;
}

.contract-admin-actions button {
  width: 100%;
}

.contract-action-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  width: 100%;
  padding: 8px 10px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
  text-align: center;
}

.empty-state {
  padding: 22px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
  text-align: center;
}

.finance-pending-entry-panel .table-wrap {
  overflow-x: hidden;
}

.finance-pending-entry-panel table {
  min-width: 0;
  table-layout: fixed;
}

.finance-pending-entry-panel th,
.finance-pending-entry-panel td {
  padding: 9px 8px;
  white-space: normal;
  vertical-align: top;
}

.finance-pending-entry-panel th:nth-child(1),
.finance-pending-entry-panel td:nth-child(1) {
  width: 112px;
}

.finance-pending-entry-panel th:nth-child(2),
.finance-pending-entry-panel td:nth-child(2) {
  width: 180px;
}

.finance-pending-entry-panel th:nth-child(3),
.finance-pending-entry-panel td:nth-child(3) {
  width: 150px;
}

.finance-pending-entry-panel th:nth-child(4),
.finance-pending-entry-panel td:nth-child(4),
.finance-pending-entry-panel th:nth-child(6),
.finance-pending-entry-panel td:nth-child(6) {
  width: 92px;
}

.finance-pending-entry-panel th:nth-child(7),
.finance-pending-entry-panel td:nth-child(7) {
  width: 164px;
}

.finance-entry-contract-cell,
.finance-entry-customer-cell,
.finance-entry-amounts,
.finance-entry-flow,
.finance-entry-archive {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.finance-entry-contract-cell strong,
.finance-entry-customer-cell a,
.finance-entry-flow b {
  overflow: hidden;
  text-overflow: ellipsis;
}

.finance-entry-contract-cell small,
.finance-entry-customer-cell small,
.finance-entry-flow small,
.finance-entry-archive small,
.finance-entry-amounts span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.finance-entry-amounts span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.finance-entry-amounts b {
  color: var(--text);
}

.finance-entry-flow small,
.finance-entry-archive small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.finance-entry-archive .badge {
  justify-self: start;
  max-width: 100%;
  white-space: nowrap;
}

.finance-entry-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.finance-entry-actions button {
  width: 100%;
  min-height: 30px;
  padding: 5px 7px;
  font-size: 12px;
}

@media (max-width: 760px) {
  .finance-pending-entry-panel .table-wrap {
    overflow-x: auto;
  }

  .finance-pending-entry-panel table {
    min-width: 760px;
  }
}

@media (max-width: 1180px) {
  .contract-admin-card {
    grid-template-columns: 1fr;
  }

  .contract-admin-side {
    padding-top: 10px;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .contract-admin-actions {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .contract-admin-side-status {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    align-items: center;
  }
}

@media (max-width: 760px) {
  .contract-create-option {
    grid-template-columns: 1fr;
  }

  .contract-admin-metrics,
  .contract-admin-execution,
  .contract-admin-products {
    grid-template-columns: 1fr 1fr;
  }

  .contract-product-line {
    grid-template-columns: 42px minmax(130px, 1fr) 54px 70px 80px;
  }

  .contract-admin-products {
    align-items: start;
  }
}

@media (max-width: 560px) {
  .contract-admin-summary,
  .contract-admin-metrics,
  .contract-admin-execution,
  .contract-admin-products {
    grid-template-columns: 1fr;
  }

  .contract-product-line {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .contract-product-line > span,
  .contract-product-line > b,
  .contract-product-line > small {
    grid-column: 2;
    text-align: left;
  }
}

.contract-template-form {
  max-width: min(1120px, 96vw);
}

.contract-variable-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.contract-variable-grid > div,
.contract-template-preview {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
}

.contract-variable-grid p,
.contract-template-preview li {
  margin: 6px 0;
  color: var(--muted);
}

.contract-template-preview h3 {
  margin: 0 0 8px;
}

@media print {
  .internal-finance {
    display: none !important;
  }

  @page {
    size: A4;
    margin: 10mm;
  }

  body {
    background: #fff;
  }

  .sidebar,
  .topbar,
  .page-head,
  .filter-bar,
  .no-print,
  .modal-backdrop,
  .assistant-widget {
    display: none !important;
  }

  .app {
    display: block;
  }

  .content {
    margin: 0;
    padding: 0;
  }

  .a4-page {
    width: 190mm;
    max-width: none;
    margin: 0 auto;
    box-shadow: none;
  }

  .panel {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .table-wrap {
    overflow: visible;
  }

  table {
    font-size: 10px;
  }
}

.calendar-plan small {
  margin-top: 2px;
  opacity: 0.78;
  font-size: 10px;
}

.chart-bars {
  display: flex;
  align-items: end;
  gap: 10px;
  min-height: 170px;
  padding-top: 20px;
}

.chart-bar {
  flex: 1;
  min-width: 34px;
  background: linear-gradient(180deg, #2e7d32, #1565c0);
  border-radius: 5px 5px 0 0;
  position: relative;
}

.chart-bar span {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 12px;
}

.owner-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  gap: 10px;
  min-height: 190px;
  padding: 14px 14px 6px;
  align-items: end;
}

.owner-chart-item {
  display: grid;
  grid-template-rows: auto 118px auto;
  gap: 6px;
  min-width: 0;
  text-align: center;
}

.owner-chart-value {
  font-weight: 800;
  color: var(--ink);
  font-size: 14px;
  white-space: nowrap;
}

.owner-chart-track {
  height: 118px;
  border-radius: 10px;
  background: #eef4fb;
  display: flex;
  align-items: end;
  overflow: hidden;
  border: 1px solid #dce7f2;
}

.owner-chart-track span {
  display: block;
  width: 100%;
  min-height: 8px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, #2e7d32, #1565c0);
}

.owner-chart-item.negative .owner-chart-track span {
  background: linear-gradient(180deg, #c2410c, #b91c1c);
}

.owner-chart-label {
  min-height: 28px;
  line-height: 16px;
  font-weight: 700;
  color: var(--muted);
  word-break: keep-all;
  font-size: 13px;
}

.owner-chart-detail {
  margin: 8px 16px 16px;
}

.owner-cockpit-page .grid[style*="1fr 1fr"] {
  align-items: start;
  grid-template-columns: minmax(0, 1.28fr) minmax(280px, 0.72fr) !important;
  gap: 10px;
}

.owner-cockpit-page .grid[style*="1fr 1fr"] > .panel {
  min-height: 0;
}

.owner-cockpit-page .grid[style*="1fr 1fr"] > .panel:first-child .owner-chart-grid {
  grid-template-columns: repeat(5, minmax(58px, 1fr));
  min-height: 138px;
  padding: 10px 12px 2px;
  gap: 8px;
}

.owner-cockpit-page .grid[style*="1fr 1fr"] > .panel:first-child .owner-chart-item {
  grid-template-rows: auto 86px auto;
  gap: 4px;
}

.owner-cockpit-page .grid[style*="1fr 1fr"] > .panel:first-child .owner-chart-track {
  height: 86px;
  border-radius: 8px;
}

.owner-cockpit-page .grid[style*="1fr 1fr"] > .panel:first-child .owner-chart-value {
  font-size: 13px;
}

.owner-cockpit-page .grid[style*="1fr 1fr"] > .panel:first-child .owner-chart-label {
  min-height: 20px;
  font-size: 12px;
  line-height: 14px;
}

.owner-cockpit-page .grid[style*="1fr 1fr"] > .panel:nth-child(2) .summary-grid {
  grid-template-columns: repeat(3, minmax(82px, 1fr));
  gap: 8px;
  margin-top: 10px !important;
}

.owner-cockpit-page .grid[style*="1fr 1fr"] > .panel:nth-child(2) .summary-grid > div {
  min-height: 72px;
  padding: 9px;
}

.owner-cockpit-page .grid[style*="1fr 1fr"] > .panel:nth-child(2) [style*="padding:16px"] {
  padding: 10px 12px !important;
}

.owner-cockpit-page .grid[style*="1fr 1fr"] > .panel:nth-child(2) .panel-head {
  margin-bottom: 8px;
}

.owner-cockpit-page .grid[style*="1fr 1fr"] > .panel:nth-child(2) .summary-grid strong {
  font-size: 18px;
}

.owner-cockpit-page .grid[style*="1fr 1fr"] > .panel:nth-child(2) .summary-grid span {
  font-size: 12px;
  line-height: 1.3;
}

.owner-cockpit-page .grid[style*="1fr 1fr"] .progress {
  height: 8px;
}

.owner-cockpit-page .grid[style*="1fr 1fr"] .owner-chart-detail {
  margin: 4px 12px 12px;
}

.owner-cockpit-page .grid[style*="1fr 1fr"] .owner-chart-detail table {
  font-size: 13px;
}

.owner-cockpit-page .grid[style*="1fr 1fr"] .owner-chart-detail th,
.owner-cockpit-page .grid[style*="1fr 1fr"] .owner-chart-detail td {
  padding: 7px 8px;
}

.owner-mini-detail {
  display: grid;
  grid-template-columns: repeat(5, minmax(80px, 1fr));
  gap: 6px;
  margin: 4px 12px 12px;
}

.owner-mini-detail > div {
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.owner-mini-detail strong,
.owner-mini-detail span {
  display: block;
}

.owner-mini-detail strong {
  font-size: 12px;
  color: var(--muted);
}

.owner-mini-detail span {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 700;
}

.crm-daily-chart {
  min-height: 220px;
}

.crm-dual-bars {
  height: 150px;
  border-radius: 12px;
  background: #eef4fb;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid #dce7f2;
}

.crm-dual-bars span {
  display: block;
  width: 26px;
  min-height: 8px;
  border-radius: 10px 10px 0 0;
}

.crm-dual-bars .sales {
  background: linear-gradient(180deg, #2563eb, #1d4ed8);
}

.crm-dual-bars .profit {
  background: linear-gradient(180deg, #16a34a, #15803d);
}

.owner-chart-value small {
  color: var(--muted);
  font-weight: 600;
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 18px;
  padding: 0 16px 14px;
  color: var(--muted);
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chart-legend i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.legend-sales {
  background: #2563eb;
}

.legend-profit {
  background: #16a34a;
}

.progress {
  height: 10px;
  border-radius: 999px;
  background: #e8edf2;
  overflow: hidden;
}

.progress > span {
  display: block;
  height: 100%;
  background: var(--primary);
}

.app-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: min(360px, calc(100vw - 32px));
  z-index: 45;
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  box-shadow: 0 18px 46px rgba(8, 18, 32, 0.18);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.app-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.app-toast small {
  color: var(--muted);
  font-size: 12px;
}

.app-toast strong {
  font-size: 15px;
}

.app-toast span {
  line-height: 1.55;
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  .app-toast {
    top: max(10px, env(safe-area-inset-top));
    right: 12px;
    bottom: auto;
    left: 12px;
    width: auto;
    max-height: 132px;
    gap: 2px;
    padding: 10px 12px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(8, 18, 32, 0.14);
    transform: translateY(-8px);
  }

  .app-toast.show {
    transform: translateY(0);
  }

  .app-toast small {
    font-size: 11px;
  }

  .app-toast strong {
    font-size: 14px;
  }

  .app-toast span {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  padding: 24px;
  background: rgba(10, 18, 31, 0.56);
  z-index: 20;
  backdrop-filter: blur(10px);
}

.modal-backdrop.open {
  display: grid;
  place-items: center;
}

.modal {
  width: min(1080px, 100%);
  max-height: 88vh;
  overflow: auto;
  background: #fffefd;
  border: 1px solid color-mix(in srgb, var(--line) 86%, #ffffff);
  border-radius: var(--radius-lg);
  box-shadow: 0 28px 84px rgba(8, 18, 32, 0.32);
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 14px;
  padding: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 86%, #ffffff);
  background:
    radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--accent-soft) 74%, transparent), transparent 30%),
    radial-gradient(circle at 84% 0%, color-mix(in srgb, var(--warm) 10%, transparent), transparent 24%),
    linear-gradient(90deg, color-mix(in srgb, var(--primary-soft) 84%, #ffffff), #fffefd);
}

#modalBody {
  padding: 18px;
}

.modal-backdrop.department-reminder-modal {
  padding: 72px 28px 24px;
  place-items: start end;
  background: rgba(10, 18, 31, 0.26);
  backdrop-filter: blur(3px);
}

.modal-backdrop.department-reminder-modal .modal {
  width: min(520px, calc(100vw - 56px));
  max-height: min(44vh, 420px);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(8, 18, 32, 0.24);
}

.modal-backdrop.department-reminder-modal .modal-head {
  padding: 12px 14px;
  gap: 10px;
}

.modal-backdrop.department-reminder-modal .modal-head h2 {
  font-size: 20px;
  line-height: 1.25;
}

.modal-backdrop.department-reminder-modal .modal-head .eyebrow {
  margin-bottom: 4px;
  font-size: 12px;
}

.modal-backdrop.department-reminder-modal #modalBody {
  padding: 12px 14px 14px;
}

.department-reminder-body {
  display: grid;
  gap: 12px;
}

.department-reminder-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.department-reminder-stats > div {
  min-width: 0;
  padding: 12px 10px;
  border: 1px solid color-mix(in srgb, var(--line) 84%, #ffffff);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--panel-soft) 68%, #ffffff));
  text-align: center;
}

.department-reminder-stats > div.danger {
  border-color: #fecaca;
  background: linear-gradient(180deg, #fff7f7, #fffefd);
}

.department-reminder-stats > div.warn {
  border-color: #fed7aa;
  background: linear-gradient(180deg, #fff9ed, #fffefd);
}

.department-reminder-stats strong {
  display: block;
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
  color: var(--text);
}

.department-reminder-stats .danger strong {
  color: #b91c1c;
}

.department-reminder-stats .warn strong {
  color: #c2410c;
}

.department-reminder-stats span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.department-reminder-summary {
  margin-top: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.department-reminder-summary > div {
  padding: 8px 10px;
  min-width: 0;
}

.department-reminder-summary strong {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.department-reminder-summary span {
  margin-top: 2px;
  font-size: 12px;
}

.department-reminder-notice {
  margin-bottom: 0;
  padding: 9px 10px;
  font-size: 13px;
  line-height: 1.45;
}

.department-reminder-actions {
  justify-content: flex-end;
  margin-top: 2px;
}

.department-reminder-body .panel {
  margin-bottom: 0;
  padding: 10px;
}

.department-reminder-body .panel-head {
  margin-bottom: 8px;
}

.department-reminder-body .panel-head h2 {
  font-size: 18px;
  line-height: 1.25;
}

.department-reminder-body .panel-head .muted {
  font-size: 12px;
}

.department-reminder-body .table-wrap {
  padding-bottom: 4px;
  max-height: 240px;
  overflow: auto;
}

.department-reminder-body table {
  min-width: 0;
  table-layout: fixed;
}

.department-reminder-body th,
.department-reminder-body td {
  padding: 8px 9px;
  white-space: normal;
  vertical-align: top;
  font-size: 13px;
  line-height: 1.45;
}

.department-reminder-body th:nth-child(1),
.department-reminder-body td:nth-child(1) {
  width: 26%;
}

.department-reminder-body th:nth-child(2),
.department-reminder-body td:nth-child(2) {
  width: 22%;
}

.department-reminder-body th:nth-child(3),
.department-reminder-body td:nth-child(3) {
  width: 34%;
}

.department-reminder-body th:nth-child(4),
.department-reminder-body td:nth-child(4) {
  width: 18%;
}

.department-reminder-body .badge {
  min-height: 20px;
  padding: 1px 7px;
  font-size: 11px;
}

.department-reminder-body .row-actions.compact {
  gap: 6px;
}

.department-reminder-body .row-actions.compact button {
  padding: 6px 9px;
  font-size: 12px;
}

.department-reminder-body .table-pagination {
  margin-top: 8px;
  gap: 8px;
  font-size: 13px;
}

.notice {
  border-left: 4px solid var(--primary);
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 90%, #ffffff), color-mix(in srgb, #ffffff 80%, var(--accent-soft)));
  padding: 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}

.warehouse-receipt-workbench {
  display: grid;
  gap: 12px;
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 84%, #ffffff);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #ffffff, color-mix(in srgb, var(--accent-soft) 42%, #ffffff));
  box-shadow: var(--shadow-soft);
}

.warehouse-receipt-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.warehouse-receipt-head > div {
  display: grid;
  gap: 4px;
}

.warehouse-receipt-head span,
.warehouse-receipt-head small,
.warehouse-receipt-po-list small {
  color: var(--muted);
}

.warehouse-receipt-head strong {
  font-size: 22px;
  line-height: 1.15;
}

.warehouse-receipt-po-list {
  display: grid;
  gap: 10px;
}

.warehouse-receipt-po-list article,
.warehouse-receipt-empty {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--panel) 92%, #ffffff);
}

.warehouse-receipt-po-list article > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.warehouse-receipt-po-list article strong,
.warehouse-receipt-po-list article small {
  overflow-wrap: anywhere;
}

.warehouse-receipt-po-list article button {
  flex: 0 0 auto;
}

.warehouse-receipt-empty {
  color: var(--muted);
}

.kanban {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 12px;
}

.kanban-col {
  background: color-mix(in srgb, var(--panel-soft) 86%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--line) 86%, #ffffff);
  border-radius: var(--radius);
  padding: 10px;
}

.calendar-wrap {
  padding: 16px;
}

.calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(70px, 1fr));
  gap: 8px;
}

.day {
  min-height: 74px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, #ffffff);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--panel-soft) 42%, #ffffff));
}

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

.blocked {
  padding: 28px;
  text-align: center;
  border: 1px dashed color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: var(--radius);
  background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--panel-soft) 50%, #ffffff));
}

.icon-button {
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-soft) 82%, #ffffff);
}

.page-actions button,
.row-actions button,
.table-wrap button {
  white-space: nowrap;
}

tr.attention-flash {
  animation: attention-flash 1.8s ease;
}

.attention-flash-panel {
  animation: attention-flash-panel 1.8s ease;
}

@keyframes attention-flash {
  0%, 100% {
    background: transparent;
  }
  20%, 70% {
    background: color-mix(in srgb, var(--primary-soft) 82%, #fff4bf);
    box-shadow: inset 4px 0 0 var(--primary);
  }
}

@keyframes attention-flash-panel {
  0%, 100% {
    box-shadow: none;
  }
  20%, 70% {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent), 0 16px 42px color-mix(in srgb, var(--primary) 16%, transparent);
  }
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 72%, white);
}

select {
  color: var(--text);
}

.badge,
.pdf-export-link,
.product-option,
.calendar-wrap {
  background: var(--panel-soft);
}

.progress {
  background: color-mix(in srgb, var(--muted) 16%, transparent);
  border-radius: 999px;
}

.progress > span {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: inherit;
}

::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

::-webkit-scrollbar-thumb {
  min-height: 72px;
  min-width: 96px;
  border: 5px solid var(--scrollbar-track);
  border-radius: 999px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--scrollbar-thumb) 86%, #ffffff), var(--scrollbar-thumb-hover));
  background-clip: padding-box;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--primary) 26%, transparent),
    0 1px 2px rgba(15, 23, 42, 0.12);
}

::-webkit-scrollbar-thumb:hover {
  border-width: 4px;
  background:
    linear-gradient(135deg, var(--scrollbar-thumb-hover), color-mix(in srgb, var(--primary-strong) 72%, var(--accent)));
  background-clip: padding-box;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--primary-strong) 36%, transparent),
    0 2px 6px rgba(15, 23, 42, 0.18);
}

::-webkit-scrollbar-thumb:active {
  border-width: 3px;
  background: var(--primary-strong);
  background-clip: padding-box;
}

::-webkit-scrollbar-track {
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--line) 62%, #ffffff);
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 66%, var(--scrollbar-track)), var(--scrollbar-track));
}

::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}

@media (max-width: 980px) {
  .home-nav-button {
    width: 42px;
    height: 42px;
    border-color: color-mix(in srgb, var(--primary) 36%, var(--line));
    background: linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, var(--primary-soft) 82%, #ffffff) 48%, color-mix(in srgb, var(--accent-soft) 72%, #ffffff) 100%);
    color: var(--primary-strong);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 18%, transparent), inset 0 0 0 1px rgba(255,255,255,0.72);
    animation: home-nav-pulse 2.6s ease-in-out infinite;
  }

  .home-nav-button::after {
    content: "";
    position: absolute;
    top: 7px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--primary));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-soft) 72%, transparent);
  }

  .home-nav-icon {
    width: 21px;
    height: 21px;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    box-shadow: 24px 0 42px rgba(15, 29, 44, 0.24);
  }

  .sidebar.collapsed {
    transform: translateX(-100%);
  }

  .sidebar-close {
    display: inline-grid;
  }

  .sidebar-scrim {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 278px;
    z-index: 55;
    display: block;
    width: calc(100% - 278px);
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(11, 20, 31, 0.32);
    cursor: default;
  }

  .sidebar-scrim:hover:not(:disabled) {
    border-color: transparent;
    transform: none;
  }

  body.mobile-sidebar-open {
    overflow: hidden;
  }

  .cards,
  .kanban,
  .form-grid,
  .split,
  .hr-attendance-period-bar,
  .hr-employee-payroll-head,
  .hr-payroll-card-fields,
  .hr-modal-summary,
  .hr-modal-item-grid,
  .hr-attendance-item-row,
  .task-config-grid,
  .menu-label-grid {
    grid-template-columns: 1fr;
  }

  .split > div + div {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .filter-bar,
  .page-head,
  .hr-payroll-actionbar,
  .topbar {
    flex-wrap: wrap;
  }

  .hr-payroll-preview {
    text-align: left;
  }

  .top-theme-slot {
    margin-left: 0;
  }

  .user-switch {
    width: 100%;
    justify-content: space-between;
  }

  .auth-session {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }

  .auth-session-info {
    text-align: left;
  }
}

@keyframes home-nav-pulse {
  0%, 100% {
    box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 18%, transparent), inset 0 0 0 1px rgba(255,255,255,0.72);
  }
  50% {
    box-shadow: 0 12px 30px color-mix(in srgb, var(--primary) 28%, transparent), 0 0 0 5px color-mix(in srgb, var(--primary-soft) 72%, transparent), inset 0 0 0 1px rgba(255,255,255,0.82);
  }
}

@media (max-width: 640px) {
  .content {
    padding: 14px 10px 18px;
  }

  .page-head {
    align-items: stretch;
    padding: 14px;
  }

  .page-head > div,
  .page-actions,
  .filter-bar input,
  .filter-bar select {
    width: 100%;
    min-width: 0;
  }

  .page-head > div:first-child {
    flex-basis: auto;
    min-width: 0;
  }

  .page-actions {
    justify-content: stretch;
  }

  .page-maintain-bar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .page-maintain-bar strong {
    text-align: left;
    white-space: normal;
  }

  .hr-payroll-actionbar {
    align-items: stretch;
  }

  .hr-payroll-actionbar .row-actions,
  .hr-status-line {
    width: 100%;
  }

  .page-actions button,
  .hr-payroll-actionbar button,
  .row-actions button,
  .table-pagination button,
  .table-page-size,
  .table-page-size select {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .summary-grid,
  .summary-grid.compact,
  .product-analytics-panel .summary-grid {
    grid-template-columns: 1fr !important;
    min-width: 0;
  }

  .summary-grid > div,
  .product-analytics-panel,
  .product-analytics-panel .summary-grid > div {
    min-width: 0;
    max-width: 100%;
  }

  .summary-grid strong,
  .summary-grid span {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .filter-bar {
    align-items: stretch;
  }

  .module-page .panel-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding: 14px 14px 12px 18px;
  }

  .module-page .panel-head h2,
  .module-page .panel-head .muted {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .module-nav {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px;
  }

  .module-nav-heading {
    min-height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .module-nav-heading strong {
    max-width: 58%;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .module-nav-items {
    padding-bottom: 5px;
  }

  .module-nav-items button {
    min-height: 40px;
    padding: 0 12px;
  }

  .module-page .table-wrap,
  .module-page .table-pagination {
    margin-left: 10px;
    margin-right: 10px;
  }

  .picker-pagination {
    align-items: stretch;
    gap: 8px;
    padding: 10px;
  }

  .picker-pagination > span,
  .table-page-size {
    flex: 1 1 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }

  .modal-backdrop {
    padding: 10px;
  }

  .modal {
    width: 100%;
    max-height: calc(100vh - 20px);
    border-radius: 12px;
  }

  .modal-head,
  #modalBody {
    padding: 14px;
  }

  #modalBody {
    overflow-wrap: anywhere;
  }

  .modal .row-actions {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .modal .row-actions button {
    width: 100%;
  }
}

@media print {
  @page {
    size: A4 landscape;
    margin: 10mm;
  }

  body * {
    visibility: hidden;
  }

  #deliverySheet,
  #deliverySheet * {
    visibility: visible;
  }

  #deliverySheet {
    position: fixed;
    inset: 0;
    padding: 18px;
  }

  body.catalog-poster-print-mode .modal-backdrop,
  body.catalog-poster-print-mode .modal {
    display: block !important;
    position: static;
    inset: auto;
    width: auto;
    max-width: none;
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
    background: #ffffff;
    box-shadow: none;
    visibility: visible;
  }

  body.catalog-poster-print-mode .catalog-share-poster,
  body.catalog-poster-print-mode .catalog-share-poster * {
    visibility: visible;
  }

  body.catalog-poster-print-mode .catalog-share-poster {
    position: absolute;
    top: 0;
    left: 50%;
    width: 110mm;
    max-width: 110mm;
    margin: 0;
    transform: translateX(-50%);
    box-shadow: none;
  }

  body.contract-poster-print-mode * {
    visibility: hidden;
  }

  body.contract-poster-print-mode #modalBackdrop,
  body.contract-poster-print-mode .modal,
  body.contract-poster-print-mode #modalBody,
  body.contract-poster-print-mode .contract-share-poster-workspace {
    display: block !important;
    position: static;
    inset: auto;
    width: auto;
    max-width: none;
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
    background: #ffffff;
    box-shadow: none;
    visibility: visible;
  }

  body.contract-poster-print-mode .contract-share-poster,
  body.contract-poster-print-mode .contract-share-poster * {
    visibility: visible;
  }

  body.contract-poster-print-mode .contract-share-poster {
    position: absolute;
    top: 0;
    left: 50%;
    width: 110mm;
    max-width: 110mm;
    margin: 0;
    transform: translateX(-50%);
    box-shadow: none;
  }

  body.quote-print-mode * {
    visibility: hidden;
  }

  body.quote-print-mode .quote-customer-document,
  body.quote-print-mode .quote-customer-document * {
    visibility: visible;
  }

  body.quote-print-mode .quote-customer-document {
    position: absolute;
    inset: 0;
    max-width: none;
    padding: 18px;
    background: #fff;
  }

  body.quote-print-mode .modal-backdrop,
  body.quote-print-mode .modal {
    display: block !important;
    position: static;
    inset: auto;
    max-width: none;
    width: auto;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: #fff;
    box-shadow: none;
    border: 0;
  }

  body.quote-print-mode .quote-customer-document .table-wrap {
    overflow: visible;
  }

  body.quote-print-mode .quote-customer-document table {
    min-width: 0;
    width: 100%;
  }

  body.quote-print-mode .quote-page-card,
  body.public-quote-mode .quote-page-card {
    display: block !important;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    break-after: page;
    page-break-after: always;
  }

  body.quote-print-mode .quote-page-card:last-of-type,
  body.public-quote-mode .quote-page-card:last-of-type {
    break-after: auto;
    page-break-after: auto;
  }

  body.quote-print-mode .quote-document-pager,
  body.public-quote-mode .quote-document-pager,
  body.quote-print-mode .quote-download-slot,
  body.public-quote-mode .quote-download-slot {
    display: none !important;
  }

  body.public-quote-mode .page-head,
  body.public-quote-mode .filter-bar,
  body.public-quote-mode .no-print {
    display: none !important;
  }

  body.public-quote-mode .quote-customer-document,
  body.public-quote-mode .quote-customer-document * {
    visibility: visible;
  }

  body.public-quote-mode .quote-customer-document {
    position: absolute;
    inset: 0;
    max-width: none;
    padding: 18px;
    background: #fff;
  }

  .no-print,
  .modal-head {
    display: none !important;
  }

  table {
    min-width: 0;
  }
}

.portal-photo-placeholder,
.portal-album-thumbs span,
.forum-album-placeholder,
.forum-home-post-mark,
.forum-channel-post-item > span,
.forum-thread-visual,
.warm-post-accent,
.warm-culture-placeholder,
.warm-modal-photo-grid article > div {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(10, 31, 68, 0.22);
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.34), transparent 15%),
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.24), transparent 20%),
    linear-gradient(135deg, var(--primary-strong), var(--primary) 56%, var(--accent) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.portal-photo-placeholder::before,
.portal-album-thumbs span::before,
.forum-album-placeholder::before,
.forum-home-post-mark::before,
.forum-channel-post-item > span::before,
.forum-thread-visual::before,
.warm-post-accent::before,
.warm-culture-placeholder::before,
.warm-modal-photo-grid article > div::before {
  content: "";
  position: absolute;
  right: -18%;
  bottom: -28%;
  z-index: -1;
  width: 68%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 68%, #ffffff);
  opacity: 0.88;
}

.portal-photo-placeholder::after,
.portal-album-thumbs span::after,
.forum-album-placeholder::after,
.forum-home-post-mark::after,
.forum-channel-post-item > span::after,
.forum-thread-visual::after,
.warm-post-accent::after,
.warm-culture-placeholder::after,
.warm-modal-photo-grid article > div::after {
  content: "";
  position: absolute;
  left: 12%;
  bottom: 16%;
  z-index: -1;
  width: 34%;
  height: 14%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
}

.sales-performance-page {
  display: grid;
  gap: 16px;
}

.sales-performance-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: stretch;
  gap: 18px;
  padding: 18px;
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 18px;
  background:
    radial-gradient(circle at 76% 10%, rgba(20, 184, 166, 0.18), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.94) 48%, rgba(236, 253, 245, 0.92));
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.07);
}

.sales-performance-hero-main {
  display: grid;
  align-content: center;
  gap: 10px;
  min-height: 196px;
  padding: 12px 8px 12px 12px;
}

.sales-performance-hero h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.2;
}

.sales-performance-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--text-muted);
  line-height: 1.8;
}

.sales-performance-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.sales-performance-hero-tags span {
  padding: 7px 11px;
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 999px;
  color: var(--primary-strong);
  background: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}

.sales-performance-score {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 20px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95)),
    #ffffff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.1);
}

.sales-performance-score strong {
  font-size: 52px;
  line-height: 1;
}

.sales-performance-score span {
  color: var(--text-muted);
}

.sales-performance-score-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}

.sales-performance-score-meta div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 9px 6px;
  border-radius: 10px;
  text-align: center;
  background: rgba(239, 246, 255, 0.82);
}

.sales-performance-score-meta b {
  color: var(--text);
  font-size: 15px;
}

.sales-performance-score-meta small {
  color: var(--text-muted);
  font-size: 12px;
}

.sales-performance-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 14px;
}

.sales-performance-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.sales-performance-kpis article {
  min-height: 86px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}

.sales-performance-kpis strong {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 22px;
}

.sales-performance-kpis span {
  color: var(--text-muted);
}

.sales-performance-todo {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(245, 158, 11, 0.24);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.96), rgba(255, 255, 255, 0.94));
}

.sales-performance-todo strong {
  display: block;
  margin-top: 4px;
  font-size: 19px;
}

.sales-performance-todo ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sales-performance-todo li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid rgba(245, 158, 11, 0.18);
}

.sales-performance-todo li b {
  color: var(--text);
}

.sales-performance-todo li span,
.sales-performance-todo p {
  margin: 0;
  color: var(--text-muted);
}

.sales-performance-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-top: 2px;
}

.sales-performance-section-head h3 {
  margin: 4px 0 0;
  font-size: 22px;
}

.sales-performance-section-head p {
  max-width: 560px;
  margin: 0;
  color: var(--text-muted);
}

.sales-performance-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.sales-performance-card {
  display: grid;
  gap: 10px;
  min-height: 168px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.sales-performance-card > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sales-performance-card p {
  margin: 0;
  color: var(--text-muted);
}

.sales-performance-card p b {
  color: var(--text);
  font-size: 22px;
}

.sales-performance-card small {
  min-height: 42px;
  color: var(--text-muted);
  line-height: 1.6;
}

.sales-performance-card em {
  justify-self: start;
  padding: 4px 10px;
  border-radius: 999px;
  font-style: normal;
  font-weight: 700;
}

.sales-performance-card em.positive,
.score-plus {
  color: #047857;
  background: rgba(16, 185, 129, 0.12);
}

.sales-performance-card em.negative,
.score-minus {
  color: #b42318;
  background: rgba(239, 68, 68, 0.12);
}

.score-plus,
.score-minus {
  display: inline-flex;
  min-width: 54px;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 700;
}

.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.sales-performance-page .table-wrap input {
  width: 100%;
  min-width: 96px;
}

.sales-performance-tables {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 14px;
  margin-top: 2px;
}

@media (max-width: 860px) {
  .sales-performance-hero,
  .sales-performance-overview,
  .sales-performance-tables {
    grid-template-columns: 1fr;
  }

  .sales-performance-kpis,
  .sales-performance-card-grid {
    grid-template-columns: 1fr;
  }

  .sales-performance-section-head {
    display: grid;
  }
}

@media (min-width: 981px) {
  .sidebar-scrim {
    display: none !important;
    pointer-events: none !important;
  }

  body.mobile-sidebar-open {
    overflow: auto;
  }
}

@media print {
  body.finance-archive-print-mode * {
    visibility: hidden;
  }

  body.finance-archive-print-mode #modalBackdrop,
  body.finance-archive-print-mode .modal,
  body.finance-archive-print-mode #modalBody,
  body.finance-archive-print-mode .archive-detail-document,
  body.finance-archive-print-mode .archive-detail-document * {
    visibility: visible;
  }

  body.finance-archive-print-mode #modalBackdrop,
  body.finance-archive-print-mode .modal,
  body.finance-archive-print-mode #modalBody {
    display: block !important;
    position: static;
    inset: auto;
    width: auto;
    max-width: none;
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
    background: #ffffff;
    box-shadow: none;
  }

  body.finance-archive-print-mode .modal-head,
  body.finance-archive-print-mode .modal-close,
  body.finance-archive-print-mode .archive-detail-actions {
    display: none !important;
  }

  body.finance-archive-print-mode .archive-detail-document {
    position: absolute;
    inset: 0;
    padding: 18px;
    background: #ffffff;
  }

  body.finance-archive-print-mode .archive-detail-document .panel,
  body.finance-archive-print-mode .archive-detail-document .card {
    break-inside: avoid;
    box-shadow: none;
  }

  body.finance-archive-print-mode .archive-detail-document .table-wrap {
    overflow: visible;
  }
}