:root {
  color-scheme: light;
  --bg: #f4f4f4;
  --surface: #ffffff;
  --surface-2: #f8f8f8;
  --ink: #161616;
  --text: #333333;
  --muted: #525252;
  --subtle: #6f6f6f;
  --line: #d6d6d6;
  --line-strong: #8d8d8d;
  --blue: #0f62fe;
  --blue-hover: #0353e9;
  --blue-soft: #edf5ff;
  --green: #198038;
  --green-soft: #defbe6;
  --orange: #ba4e00;
  --orange-soft: #fff2cc;
  --red: #da1e28;
  --red-hover: #ba1b23;
  --red-soft: #fff1f1;
  --purple: #6929c4;
  --shadow: 0 2px 8px rgba(22, 22, 22, .08);
  --radius-sm: 4px;
  --radius-md: 8px;
  --ease: cubic-bezier(.2, 0, .38, .9);
  --topbar: 48px;
  --sidebar: 232px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Sans", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
button { color: inherit; }

.skip-link {
  position: fixed;
  z-index: 1000;
  left: 12px;
  top: 8px;
  padding: 10px 14px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--blue);
}
.skip-link:focus { opacity: 1; transform: none; pointer-events: auto; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.icon { width: 18px; height: 18px; display: inline-block; flex: 0 0 auto; }
.icon-lg { width: 24px; height: 24px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar);
  display: flex;
  align-items: stretch;
  background: var(--ink);
  color: #fff;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 232px;
  padding: 0 18px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  border-right: 1px solid #393939;
}
.brand:hover { text-decoration: none; background: #262626; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: #fff;
  background: var(--blue);
  border-radius: 2px;
  font-size: 12px;
  font-weight: 700;
}
.topnav { display: flex; align-items: stretch; }
.topnav a {
  display: flex;
  align-items: center;
  padding: 0 18px;
  color: #c6c6c6;
  font-size: 14px;
  border-bottom: 3px solid transparent;
}
.topnav a:hover, .topnav a.active { color: #fff; background: #262626; text-decoration: none; }
.topnav a.active { border-bottom-color: #78a9ff; }
.topbar-spacer { flex: 1; }
.top-action {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 48px;
  padding: 0 14px;
  background: transparent;
  color: #fff;
  border: 0;
  border-left: 1px solid #393939;
  cursor: pointer;
}
.top-action:hover { background: #262626; }
.prototype-badge {
  align-self: center;
  margin-right: 8px;
  padding: 3px 7px;
  border: 1px solid #6f6f6f;
  color: #c6c6c6;
  font-size: 11px;
  letter-spacing: .04em;
}

.layout { min-height: calc(100vh - var(--topbar)); }
.employee-main { max-width: 1280px; margin: 0 auto; padding: 32px 32px 64px; }
.admin-layout { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: calc(100vh - var(--topbar)); }
.admin-sidebar { position: sticky; top: var(--topbar); height: calc(100vh - var(--topbar)); background: #262626; color: #fff; }
.workspace-title { padding: 20px 18px 12px; color: #c6c6c6; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.side-nav { display: grid; }
.side-nav button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 18px;
  background: transparent;
  color: #c6c6c6;
  border: 0;
  border-left: 3px solid transparent;
  text-align: left;
  cursor: pointer;
}
.side-nav button:hover { background: #353535; color: #fff; }
.side-nav button.active { background: #393939; color: #fff; border-left-color: #78a9ff; }
.side-nav button[aria-disabled="true"] { color: #8d8d8d; cursor: not-allowed; }
.side-nav .nav-count { margin-left: auto; min-width: 24px; padding: 1px 6px; background: #525252; color: #fff; border-radius: 10px; font-size: 12px; text-align: center; }
.side-nav .nav-phase { margin-left: auto; font-size: 11px; color: #a8a8a8; }
.admin-main { min-width: 0; padding: 28px 32px 64px; }

.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.page-eyebrow { margin-bottom: 6px; color: var(--blue); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
h1, h2, h3, h4, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(28px, 3vw, 36px); line-height: 1.18; font-weight: 500; letter-spacing: -.02em; }
h2 { margin-bottom: 16px; font-size: 22px; line-height: 1.25; font-weight: 500; }
h3 { margin-bottom: 10px; font-size: 18px; line-height: 1.3; font-weight: 600; }
h4 { margin-bottom: 8px; font-size: 15px; font-weight: 600; }
.lead { max-width: 760px; margin-bottom: 0; color: var(--muted); font-size: 17px; }
.meta { color: var(--subtle); font-size: 13px; }
.label { display: block; margin-bottom: 6px; color: var(--text); font-size: 13px; font-weight: 600; }

.btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease);
}
.btn:hover { background: #e8e8e8; text-decoration: none; }
.btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-primary:hover { background: var(--blue-hover); }
.btn-danger { background: var(--red); color: #fff; border-color: var(--red); }
.btn-danger:hover { background: var(--red-hover); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-quiet { min-height: 32px; padding: 5px 10px; font-size: 14px; }
.btn:disabled { background: #e0e0e0; color: #8d8d8d; border-color: #c6c6c6; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.icon-btn { width: 40px; height: 40px; padding: 0; }

.input, .textarea, .select {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  background: var(--surface-2);
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
}
.input:hover, .textarea:hover, .select:hover { background: #eeeeee; }
.input:focus, .textarea:focus, .select:focus { outline: 2px solid var(--blue); outline-offset: -2px; border-color: transparent; }
.textarea { min-height: 112px; resize: vertical; }
.field { margin-bottom: 16px; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.field-error { margin-top: 5px; color: var(--red); font-size: 12px; }
.help { margin-top: 5px; color: var(--subtle); font-size: 12px; }

.search-shell { position: relative; max-width: 760px; }
.search-shell .input { min-height: 52px; padding: 13px 52px 13px 46px; font-size: 16px; border-bottom: 2px solid var(--ink); }
.search-shell .search-icon { position: absolute; left: 15px; top: 16px; color: var(--muted); }
.search-shell .search-submit { position: absolute; right: 6px; top: 6px; height: 40px; }

.hero {
  position: relative;
  overflow: hidden;
  margin: -32px -32px 32px;
  padding: 52px 32px 48px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.hero::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -110px;
  width: 360px;
  height: 360px;
  border: 1px solid #d0e2ff;
  transform: rotate(24deg);
  pointer-events: none;
}
.hero .lead { margin-bottom: 24px; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 760px) 1fr; gap: 40px; align-items: end; }
.hero-note { padding-left: 18px; border-left: 2px solid var(--blue); color: var(--muted); font-size: 14px; }

.section { margin-top: 40px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.section-head h2 { margin-bottom: 0; }
.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.card-pad { padding: 20px; }
.click-card { position: relative; cursor: pointer; transition: border-color 150ms var(--ease), transform 150ms var(--ease); }
.click-card:hover { border-color: var(--ink); transform: translateY(-1px); }
.card-link { position: absolute; inset: 0; z-index: 1; padding: 0; background: transparent; border: 0; cursor: pointer; appearance: none; }
.card-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.scene-card { min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; }
.scene-index { color: var(--blue); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.scene-card h3 { max-width: 180px; margin: 20px 0 0; font-size: 17px; }
.scene-card .arrow { align-self: flex-end; color: var(--blue); }
.case-card { position: relative; display: flex; flex-direction: column; min-height: 260px; }
.case-cover { height: 84px; padding: 16px; background: #eaf1ff; border-bottom: 1px solid var(--line); display: flex; align-items: flex-end; }
.case-cover.alt { background: #e5f6ff; }
.case-cover.neutral { background: #e8e8e8; }
.case-cover span { color: #0043ce; font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.case-body { display: flex; flex: 1; flex-direction: column; padding: 18px; }
.case-body h3 { margin-bottom: 8px; }
.case-value { color: var(--muted); font-size: 14px; }
.case-meta { margin-top: auto; padding-top: 18px; display: flex; justify-content: space-between; gap: 10px; color: var(--subtle); font-size: 12px; }

.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px; background: #e8e8e8; color: var(--text); border-radius: 12px; font-size: 12px; }
.tag-blue { background: var(--blue-soft); color: #0043ce; }
.tag-green { background: var(--green-soft); color: #0e6027; }
.tag-orange { background: var(--orange-soft); color: #684e00; }
.tag-red { background: var(--red-soft); color: #a2191f; }
.status-dot { width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: currentColor; }

.training-list { display: grid; background: var(--surface); border: 1px solid var(--line); }
.training-row { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.training-row:last-child { border-bottom: 0; }
.training-row:hover { background: var(--surface-2); }
.date-block { border-left: 3px solid var(--blue); padding-left: 12px; }
.date-block strong { display: block; font-size: 22px; font-weight: 500; line-height: 1.1; }
.date-block span { color: var(--muted); font-size: 12px; }
.training-row h3 { margin-bottom: 4px; font-size: 16px; }
.training-row p { margin-bottom: 0; color: var(--muted); font-size: 13px; }
.training-availability { color: var(--muted); font-size: 12px; }
.dashboard-lower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; }
.custom-period { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 16px 0 20px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line); }
.custom-period .field { min-width: 168px; }
.trend-list { display: grid; gap: 14px; }
.trend-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; font-size: 13px; }
.trend-row strong { color: var(--green); }
.trend-row i { grid-column: 1 / -1; display: block; height: 6px; width: var(--trend); border-radius: 999px; background: linear-gradient(90deg, #2b5be6, #5ed7e5); }
.snapshot-list { display: grid; gap: 12px; margin: 0 0 14px; padding-left: 24px; }
.snapshot-list li { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); color: var(--text); }
.snapshot-list strong { color: var(--ink); }
@media (max-width: 760px) { .dashboard-lower { grid-template-columns: 1fr; } .custom-period { align-items: stretch; } .custom-period .field { flex: 1 1 160px; } }

.breadcrumbs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; color: var(--subtle); font-size: 13px; }
.breadcrumbs a { color: var(--muted); }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: 24px; align-items: start; }
.detail-main, .detail-aside { min-width: 0; }
.sticky-card { position: sticky; top: calc(var(--topbar) + 24px); }
.content-panel { padding: 28px; background: var(--surface); border: 1px solid var(--line); }
.content-panel + .content-panel { margin-top: 16px; }
.prose h2 { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose p, .prose li { color: var(--text); }
.prose ul { padding-left: 22px; }

.action-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.metric-inline { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; color: var(--muted); font-size: 13px; }
.metric-inline strong { color: var(--ink); font-size: 16px; font-weight: 500; }
.artifact-list { display: grid; gap: 10px; }
.artifact { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px; background: var(--surface-2); border-left: 3px solid var(--blue); }
.artifact-icon { display: grid; place-items: center; width: 40px; height: 40px; background: var(--surface); border: 1px solid var(--line); color: var(--blue); }
.artifact p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.permission-note { margin-top: 8px; color: var(--orange); font-size: 12px; }
.comment { padding: 16px 0; border-bottom: 1px solid var(--line); }
.comment:last-child { border-bottom: 0; }
.comment-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.comment p { margin-bottom: 0; color: var(--text); }

.info-list { display: grid; gap: 14px; }
.info-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; font-size: 14px; }
.info-row dt { color: var(--subtle); }
.info-row dd { margin: 0; color: var(--text); }
.status-callout { padding: 16px; background: var(--blue-soft); border-left: 3px solid var(--blue); }
.status-callout.warning { background: var(--orange-soft); border-color: var(--orange); }
.status-callout.danger { background: var(--red-soft); border-color: var(--red); }
.status-callout.success { background: var(--green-soft); border-color: var(--green); }
.status-callout p { margin: 4px 0 0; color: var(--text); font-size: 14px; }

.schedule-hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: stretch; }
.schedule-card { display: grid; align-content: space-between; min-height: 260px; padding: 24px; background: var(--ink); color: #fff; }
.schedule-card .month { color: #dce5f2; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.schedule-card .day { font-size: 72px; line-height: 1; font-weight: 300; }
.schedule-card .info-list { gap: 12px; }
.schedule-card .info-row { font-size: 13px; }
.schedule-card .info-row dt { color: #b8c6d8; }
.schedule-card .info-row dd { color: #f4f7fb; font-weight: 600; letter-spacing: .01em; }
.schedule-card .time { color: #f4f7fb; }

.resource-list { display: grid; border-top: 1px solid var(--line); }
.resource-row { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.resource-row p { margin: 0; }
.resource-row .meta { margin-top: 2px; }

.table-wrap { overflow: auto; background: var(--surface); border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 13px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: #e8e8e8; color: var(--text); font-weight: 600; white-space: nowrap; }
tbody tr { cursor: pointer; }
tbody tr:hover, tbody tr.selected { background: var(--blue-soft); }
tbody tr:last-child td { border-bottom: 0; }
.table-title { min-width: 240px; font-weight: 600; }

.tabs { display: flex; gap: 0; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.tab { min-height: 42px; padding: 9px 16px; background: transparent; border: 0; border-bottom: 3px solid transparent; color: var(--muted); cursor: pointer; }
.tab:hover { background: #e8e8e8; color: var(--ink); }
.tab.active { border-bottom-color: var(--blue); color: var(--ink); font-weight: 600; }
.tab .count { margin-left: 5px; color: var(--subtle); font-size: 12px; }

.split-view { display: grid; grid-template-columns: minmax(480px, 1fr) minmax(340px, 430px); gap: 16px; align-items: start; }
.side-panel { background: var(--surface); border: 1px solid var(--line); }
.side-panel-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; padding: 18px; border-bottom: 1px solid var(--line); }
.side-panel-body { padding: 18px; }
.diff-block { margin-top: 16px; padding: 14px; background: var(--surface-2); }
.diff-block p { margin-bottom: 0; color: var(--text); font-size: 14px; }
.side-panel-actions { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px; background: var(--surface); border-top: 1px solid var(--line); }

.admin-toolbar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-bottom: 16px; }
.admin-toolbar .filters { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-toolbar .select { width: auto; min-width: 150px; }
.summary-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 20px; background: var(--surface); border: 1px solid var(--line); }
.summary-item { padding: 16px 18px; border-right: 1px solid var(--line); }
.summary-strip.compact { gap: 10px; margin-bottom: 14px; border: 0; background: transparent; }
.summary-strip.compact .summary-item { min-height: 0; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-xs); }
.summary-strip.compact .summary-item strong { font-size: 21px; }
.summary-strip.compact .summary-item small { display: none; }
.summary-strip.compact .summary-index { font-size: 10px; color: var(--subtle); }
.review-commandbar.priority { margin-bottom: 0; padding: 10px 14px; }
.permission-note { font-weight: 600; }
.summary-item:last-child { border-right: 0; }
.summary-item strong { display: block; font-size: 24px; font-weight: 400; }
.summary-item span { color: var(--muted); font-size: 13px; }

.training-admin { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; align-items: start; }
.training-admin-list { background: var(--surface); border: 1px solid var(--line); }
.training-admin-item { width: 100%; padding: 15px 16px; background: transparent; border: 0; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; }
.training-admin-item:last-child { border-bottom: 0; }
.training-admin-item:hover, .training-admin-item.active { background: var(--blue-soft); }
.training-admin-item h3 { margin-bottom: 5px; font-size: 15px; }
.training-admin-item .row { display: flex; justify-content: space-between; gap: 8px; }
.editor-panel { background: var(--surface); border: 1px solid var(--line); }
.editor-head { display: flex; justify-content: space-between; gap: 16px; align-items: start; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.editor-body { padding: 20px; }
.editor-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px; background: var(--surface-2); border-top: 1px solid var(--line); }
.repeat-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; margin-bottom: 8px; }
.check-list { display: grid; gap: 8px; padding: 12px; background: var(--surface-2); }
.check-item { display: flex; gap: 8px; align-items: flex-start; }

.empty-state { padding: 36px 24px; background: var(--surface); border: 1px dashed var(--line-strong); text-align: center; }
.empty-state .icon { width: 28px; height: 28px; margin-bottom: 10px; color: var(--subtle); }
.empty-state h3 { margin-bottom: 5px; }
.empty-state p { max-width: 520px; margin: 0 auto; color: var(--muted); font-size: 14px; }
.error-page { max-width: 720px; margin: 80px auto; padding: 32px; background: var(--surface); border-top: 4px solid var(--red); }

.prototype-panel {
  position: fixed;
  z-index: 80;
  right: 16px;
  top: 58px;
  width: min(360px, calc(100vw - 32px));
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
}
.prototype-panel[hidden] { display: none; }
.prototype-panel h2 { font-size: 18px; }
.prototype-panel .notice { margin-bottom: 16px; padding: 10px; background: var(--blue-soft); color: var(--text); font-size: 12px; }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-strong); }
.segmented button { min-height: 36px; padding: 6px; background: var(--surface); border: 0; border-right: 1px solid var(--line-strong); cursor: pointer; font-size: 13px; }
.segmented button:last-child { border-right: 0; }
.segmented button.active { background: var(--ink); color: #fff; }

.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(22,22,22,.55); }
.modal { width: min(560px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: var(--surface); box-shadow: 0 12px 40px rgba(0,0,0,.24); }
.modal-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding: 20px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin-bottom: 0; }
.modal-body { padding: 20px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; background: var(--surface-2); border-top: 1px solid var(--line); }
.impact-list { margin: 0 0 16px; padding-left: 20px; color: var(--text); }

.toast-region { position: fixed; z-index: 120; right: 18px; bottom: 18px; display: grid; gap: 8px; width: min(380px, calc(100vw - 36px)); pointer-events: none; }
.toast { padding: 14px 16px; background: var(--ink); color: #fff; border-left: 4px solid #78a9ff; box-shadow: var(--shadow); animation: toast-in 240ms var(--ease); }
.toast.error { border-left-color: #fa4d56; }
.toast.success { border-left-color: #42be65; }
.toast small { display: block; margin-top: 3px; color: #c6c6c6; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.skeleton { position: relative; overflow: hidden; background: #e0e0e0; color: transparent !important; border-color: transparent !important; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: shimmer 1.2s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-grid, .detail-layout, .schedule-hero { grid-template-columns: 1fr; }
  .sticky-card { position: static; }
  .split-view, .training-admin { grid-template-columns: 1fr; }
  .admin-layout { grid-template-columns: 200px minmax(0,1fr); }
  :root { --sidebar: 200px; }
}

@media (max-width: 767px) {
  .topnav { display: none; }
  .brand { min-width: auto; }
  .prototype-badge { display: none; }
  .employee-main, .admin-main { padding: 20px 16px 48px; }
  .hero { margin: -20px -16px 24px; padding: 32px 16px; }
  .grid-4, .grid-3, .grid-2, .field-grid, .summary-strip { grid-template-columns: 1fr; }
  .training-row { grid-template-columns: 84px minmax(0, 1fr); }
  .training-row > :last-child { grid-column: 2; }
  .admin-layout { display: block; }
  .admin-sidebar { position: static; width: 100%; height: auto; }
  .side-nav { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .workspace-title { display: none; }
  .side-nav button { min-height: 48px; border-left: 0; border-bottom: 3px solid transparent; }
  .side-nav button.active { border-bottom-color: #78a9ff; }
  .page-header { display: block; }
  .page-header .btn-row { margin-top: 16px; }
  .repeat-row { grid-template-columns: 1fr; }
  .artifact { grid-template-columns: 36px minmax(0,1fr); }
  .artifact .btn { grid-column: 2; justify-self: start; }
}

.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; }
.status-callout.error { border-left-color: var(--red); background: var(--red-soft); }
.status-callout.warning { border-left-color: var(--orange); background: var(--orange-soft); }
tr[data-review-select] { cursor: pointer; }
tr[data-review-select]:hover, tr[data-review-select].selected { background: var(--blue-soft); }
tr[data-review-select] small, .resource-row small { display: block; color: var(--subtle); }


/* T5 full prototype extensions */
.case-browser { display:grid; grid-template-columns:220px minmax(0,1fr); gap:24px; align-items:start; }
.scene-nav { position:sticky; top:88px; display:grid; gap:6px; padding:18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.scene-nav h2 { margin:0 0 8px; font-size:1rem; }
.scene-option { width:100%; padding:10px 12px; border:0; border-left:3px solid transparent; background:transparent; color:var(--text); text-align:left; cursor:pointer; }
.scene-option:hover, .scene-option.active { background:var(--blue-soft); border-left-color:var(--blue); color:var(--ink); }
.result-panel { min-width:0; }
.filter-bar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.filter-field { margin:0; }
.result-summary { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; padding:14px 0 18px; border-bottom:1px solid var(--line); margin-bottom:20px; }
.chip-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.chip { border:1px solid var(--line-strong); background:var(--surface); padding:5px 9px; border-radius:999px; color:var(--text); cursor:pointer; }
.chip:hover { border-color:var(--blue); color:var(--blue); }
.span-all { grid-column:1/-1; }
.center-actions { display:flex; justify-content:center; gap:10px; margin-top:16px; }
.search-filter, .inline-form { display:flex; align-items:end; gap:12px; }
.grow { flex:1; min-width:0; }
.span-2 { grid-column:span 2; }
.submission-list { display:grid; gap:12px; }
.submission-row { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:20px; }
.submission-row > div:first-child { min-width:0; }
.editor-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(300px,.85fr); gap:24px; align-items:start; }
.editor-layout > aside { position:sticky; top:88px; }
.artifact-editor { display:grid; gap:10px; padding:14px 0; border-bottom:1px solid var(--line); }
.editor-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.incentive-banner { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; padding:24px; background:linear-gradient(135deg,var(--blue-soft),var(--surface)); border:1px solid var(--blue); border-radius:var(--radius); }
.incentive-banner h2 { margin:10px 0 6px; }
.ranking-list { display:grid; gap:12px; }
.ranking-row { display:grid; grid-template-columns:56px minmax(0,1fr) 130px auto; gap:18px; align-items:center; padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.rank { display:grid; place-items:center; width:42px; height:42px; background:var(--ink); color:#fff; font-size:1.25rem; }
.ranking-row h2 { margin:8px 0 4px; font-size:1.05rem; }
.ranking-row p { margin:0; color:var(--subtle); }
.ranking-metric { display:grid; text-align:right; }
.ranking-metric strong { font-size:1.5rem; color:var(--blue); }
.ranking-metric span { color:var(--subtle); font-size:.78rem; }
.period-switch { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.metric-card { display:grid; gap:10px; align-content:start; min-height:170px; padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.metric-card > strong { font-size:2rem; letter-spacing:-.04em; }
.metric-card .btn { justify-self:start; margin-top:auto; }
.compact-input { min-width:0; }
.unavailable-card { border-style:dashed; }
.compact-form { margin-top:16px; }
@media (max-width:1024px) {
  .case-browser { grid-template-columns:180px minmax(0,1fr); }
  .filter-bar, .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .editor-layout { grid-template-columns:1fr; }
  .editor-layout > aside { position:static; }
  .ranking-row { grid-template-columns:48px minmax(0,1fr) 110px; }
  .ranking-row > .btn { grid-column:2/-1; justify-self:start; }
}
@media (max-width:767px) {
  .case-browser { grid-template-columns:1fr; }
  .scene-nav { position:static; display:flex; overflow-x:auto; }
  .scene-nav h2 { display:none; }
  .scene-option { width:auto; min-width:max-content; border-left:0; border-bottom:3px solid transparent; }
  .scene-option:hover, .scene-option.active { border-left-color:transparent; border-bottom-color:var(--blue); }
  .filter-bar, .metric-grid { grid-template-columns:1fr; }
  .result-summary, .submission-row, .incentive-banner, .inline-form, .search-filter { align-items:stretch; flex-direction:column; }
  .submission-row { display:flex; }
  .span-2 { grid-column:auto; }
  .ranking-row { grid-template-columns:42px minmax(0,1fr); }
  .ranking-metric { grid-column:2; text-align:left; }
  .ranking-row > .btn { grid-column:2; }
  .center-actions { flex-direction:column; align-items:stretch; }
}

/* ========================================================================== 
   High-fidelity visual system · 2026-09-22
   Knowledge Signal direction: deep ink workspace + cobalt/cyan evidence thread
   ========================================================================== */
:root {
  --bg: #f3f6fb;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #eef3f9;
  --ink: #101828;
  --text: #344054;
  --muted: #667085;
  --subtle: #7f8ca3;
  --line: #e4e9f1;
  --line-strong: #cbd3df;
  --blue: #2458e6;
  --blue-hover: #1946c8;
  --blue-soft: #edf3ff;
  --cyan: #11b6c8;
  --cyan-soft: #e7fbfd;
  --green: #138a55;
  --green-soft: #e8f8f0;
  --orange: #b54708;
  --orange-soft: #fff4e5;
  --red: #d92d20;
  --red-hover: #b42318;
  --red-soft: #fff0ef;
  --purple: #6941c6;
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 4px 12px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);
  --shadow-md: 0 16px 36px rgba(16, 24, 40, .10), 0 3px 10px rgba(16, 24, 40, .05);
  --shadow-lg: 0 28px 70px rgba(9, 18, 38, .22);
  --shadow: var(--shadow-sm);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius: 12px;
  --topbar: 64px;
  --sidebar: 264px;
}

body {
  background:
    radial-gradient(circle at 76% -20%, rgba(36,88,230,.08), transparent 34rem),
    var(--bg);
  font-family: "Segoe UI Variable", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 15px;
  letter-spacing: .005em;
}

::selection { background: #cddcff; color: var(--ink); }
:focus-visible { outline: 3px solid rgba(36,88,230,.35); outline-offset: 2px; }

.topbar {
  height: var(--topbar);
  background: rgba(9, 16, 32, .98);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 30px rgba(9,16,32,.14);
  backdrop-filter: blur(18px);
}
.brand {
  min-width: var(--sidebar);
  gap: 12px;
  padding: 0 22px;
  border-right-color: rgba(255,255,255,.09);
}
.brand:hover { background: rgba(255,255,255,.055); }
.brand-mark {
  position: relative;
  display: block;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(145deg, #3478ff 0%, #2048d8 65%, #11b6c8 100%);
  box-shadow: 0 8px 20px rgba(36,88,230,.32), inset 0 1px 0 rgba(255,255,255,.28);
}
.brand-mark span { position:absolute; display:block; height:2px; background:#fff; border-radius:2px; transform:rotate(-38deg); transform-origin:right center; }
.brand-mark span:nth-child(1) { width:17px; top:9px; right:7px; }
.brand-mark span:nth-child(2) { width:23px; top:16px; right:6px; opacity:.88; }
.brand-mark span:nth-child(3) { width:14px; top:23px; right:10px; opacity:.7; }
.brand-copy { display:grid; line-height:1.15; }
.brand-copy strong { color:#fff; font-size:14px; font-weight:650; letter-spacing:.02em; }
.brand-copy small { margin-top:3px; color:#8fa0bd; font-size:9px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.topnav { gap: 4px; padding: 10px 8px; }
.topnav a {
  position:relative;
  padding: 0 15px;
  border:0;
  border-radius:9px;
  color:#aab5c8;
  font-size:14px;
  font-weight:520;
  transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.topnav a:hover { background:rgba(255,255,255,.06); color:#fff; text-decoration:none; }
.topnav a.active { background:rgba(65,112,255,.18); color:#fff; box-shadow:inset 0 0 0 1px rgba(99,139,255,.18); }
.topnav a.active::after { content:""; position:absolute; left:16px; right:16px; bottom:3px; height:2px; border-radius:2px; background:#5ed7e5; }
.prototype-badge {
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-right:10px;
  padding:5px 9px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:#9eabc0;
  font-size:10px;
  letter-spacing:.03em;
}
.prototype-badge i { width:6px; height:6px; border-radius:50%; background:#5ed7e5; box-shadow:0 0 0 4px rgba(94,215,229,.1); }
.top-action {
  min-width:auto;
  gap:10px;
  padding:0 16px;
  border-left-color:rgba(255,255,255,.09);
  transition:background .18s var(--ease);
}
.top-action:hover { background:rgba(255,255,255,.07); }
.workspace-switch { color:#cbd5e5; font-weight:600; }
.identity-action { padding-right:20px; }
.user-avatar, .person-avatar {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:10px;
  background:linear-gradient(145deg,#e7fbfd,#c9eef4);
  color:#087887;
  font-size:13px;
  font-weight:750;
  box-shadow:inset 0 0 0 1px rgba(17,182,200,.18);
}
.identity-copy { display:grid; text-align:left; line-height:1.12; }
.identity-copy small { color:#8492a8; font-size:9px; letter-spacing:.06em; }
.identity-copy strong { margin-top:3px; color:#f7f9fc; font-size:12px; font-weight:600; }

.employee-main { max-width: 1360px; padding: 40px 44px 80px; }
.admin-layout { grid-template-columns: var(--sidebar) minmax(0,1fr); }
.admin-sidebar {
  top:var(--topbar);
  height:calc(100vh - var(--topbar));
  display:flex;
  flex-direction:column;
  overflow:auto;
  background:linear-gradient(180deg,#10192c 0%,#0c1425 100%);
  border-right:1px solid rgba(255,255,255,.06);
}
.workspace-title { padding:27px 22px 18px; text-transform:none; letter-spacing:0; }
.workspace-title span { display:block; color:#71809a; font-size:10px; font-weight:650; letter-spacing:.12em; text-transform:uppercase; }
.workspace-title strong { display:block; margin-top:7px; color:#f8fafc; font-size:16px; font-weight:650; }
.side-nav { gap:5px; padding:0 12px; }
.side-nav button {
  min-height:58px;
  gap:12px;
  padding:9px 10px;
  border:0;
  border-radius:11px;
  color:#94a3b8;
  transition:background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.side-nav button:hover { background:rgba(255,255,255,.055); color:#fff; transform:translateX(2px); }
.side-nav button.active { background:linear-gradient(90deg,rgba(43,91,230,.28),rgba(43,91,230,.10)); color:#fff; box-shadow:inset 0 0 0 1px rgba(96,137,255,.15); }
.side-nav button.active::before { content:""; position:absolute; left:-12px; top:13px; bottom:13px; width:3px; border-radius:0 3px 3px 0; background:#5ed7e5; box-shadow:0 0 14px rgba(94,215,229,.6); }
.nav-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,.04); color:#8190a8; }
.side-nav button.active .nav-icon { background:rgba(85,130,255,.20); color:#8cb5ff; }
.nav-copy { display:grid; gap:2px; line-height:1.2; }
.nav-copy strong { font-size:14px; font-weight:620; }
.nav-copy small { color:#697891; font-size:10px; }
.side-nav button.active .nav-copy small { color:#9db0ce; }
.side-nav .nav-count { min-width:24px; padding:2px 7px; background:#e9efff; color:#2458e6; border-radius:999px; font-weight:750; }
.sidebar-foot { margin:auto 14px 18px; display:flex; align-items:center; gap:10px; padding:13px; border:1px solid rgba(255,255,255,.07); border-radius:12px; background:rgba(255,255,255,.035); }
.environment-dot { width:8px; height:8px; border-radius:50%; background:#32d583; box-shadow:0 0 0 5px rgba(50,213,131,.09); }
.sidebar-foot div { display:grid; gap:2px; }
.sidebar-foot strong { color:#dce4f1; font-size:11px; font-weight:600; }
.sidebar-foot small { color:#708099; font-size:9px; }

.admin-main { min-width:0; padding:34px clamp(28px,3.4vw,56px) 72px; }
.workspace-header { display:flex; align-items:flex-start; justify-content:space-between; gap:28px; margin:0 0 32px; }
.workspace-breadcrumb { display:flex; align-items:center; gap:8px; margin-bottom:12px; color:#8a96aa; font-size:12px; }
.workspace-breadcrumb strong { color:#465269; font-weight:600; }
.workspace-header h1 { margin:0 0 8px; font-size:clamp(28px,2.7vw,38px); font-weight:680; letter-spacing:-.035em; }
.workspace-header .lead { font-size:15px; }
.workspace-actions { display:flex; align-items:center; gap:14px; padding-top:4px; }
.runtime-status { display:flex; align-items:center; gap:9px; padding-right:14px; border-right:1px solid var(--line); }
.runtime-status > i { width:8px; height:8px; border-radius:50%; background:#32b87a; box-shadow:0 0 0 5px rgba(50,184,122,.1); }
.runtime-status > span { display:grid; line-height:1.2; }
.runtime-status small { color:var(--subtle); font-size:10px; }
.runtime-status strong { margin-top:2px; color:var(--text); font-size:11px; font-weight:600; }

h1 { font-weight:680; letter-spacing:-.035em; }
h2 { font-weight:650; letter-spacing:-.02em; }
h3 { font-weight:630; letter-spacing:-.01em; }
.page-eyebrow, .section-kicker { color:var(--blue); font-weight:700; letter-spacing:.1em; }
.lead { color:var(--muted); line-height:1.65; }

.btn {
  min-height:42px;
  padding:9px 15px;
  border-color:var(--line-strong);
  border-radius:9px;
  box-shadow:var(--shadow-xs);
  font-size:14px;
  font-weight:620;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease);
}
.btn:hover { transform:translateY(-1px); background:#f5f7fa; border-color:#aab4c3; box-shadow:var(--shadow-sm); }
.btn:active { transform:translateY(0); box-shadow:var(--shadow-xs); }
.btn-primary { background:linear-gradient(180deg,#3269f0,#2458e6); border-color:#2458e6; box-shadow:0 7px 16px rgba(36,88,230,.22), inset 0 1px 0 rgba(255,255,255,.22); }
.btn-primary:hover { background:linear-gradient(180deg,#285ee5,#1946c8); border-color:#1946c8; box-shadow:0 9px 20px rgba(36,88,230,.28); }
.btn-danger { background:linear-gradient(180deg,#e23a2e,#d92d20); border-color:#d92d20; box-shadow:0 7px 16px rgba(217,45,32,.15); }
.btn-danger-ghost { background:#fff; color:var(--red); border-color:#f1b4af; }
.btn-danger-ghost:hover { background:var(--red-soft); border-color:#e8847c; }
.btn-ghost { background:#fff; border-color:var(--line); color:#344054; }
.btn-quiet { min-height:34px; box-shadow:none; }
.icon-btn { border-radius:10px; }

.input, .textarea, .select {
  min-height:44px;
  padding:10px 12px;
  background:#fff;
  border:1px solid var(--line-strong);
  border-radius:9px;
  box-shadow:0 1px 2px rgba(16,24,40,.03);
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.input:hover, .textarea:hover, .select:hover { background:#fff; border-color:#98a3b3; }
.input:focus, .textarea:focus, .select:focus { outline:0; border-color:#5b82ed; box-shadow:0 0 0 4px rgba(36,88,230,.12); }
.label { margin-bottom:7px; color:#3b475a; font-size:12px; font-weight:650; }
.help { color:#7c899c; }

.card, .content-panel, .side-panel, .editor-panel, .table-wrap {
  border:1px solid rgba(203,211,223,.78);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
}
.card { background:rgba(255,255,255,.96); }
.card:hover { border-color:#c0cad8; }
.card-pad { padding:22px; }

.hero {
  margin:-40px -44px 40px;
  padding:64px 44px 58px;
  color:#fff;
  background:
    linear-gradient(90deg,rgba(11,19,38,.98),rgba(15,31,61,.94)),
    #0b1326;
  border:0;
  box-shadow:0 20px 40px rgba(15,31,61,.12);
}
.hero::before { content:""; position:absolute; inset:0; opacity:.32; background-image:linear-gradient(rgba(98,132,192,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(98,132,192,.16) 1px,transparent 1px); background-size:38px 38px; mask-image:linear-gradient(90deg,transparent 20%,#000 100%); }
.hero::after { right:-30px; top:-120px; width:480px; height:480px; border:1px solid rgba(94,215,229,.22); border-radius:50%; box-shadow:0 0 0 50px rgba(36,88,230,.05),0 0 0 100px rgba(36,88,230,.035); transform:none; }
.hero .page-eyebrow { color:#73deea; }
.hero h1 { max-width:760px; font-size:clamp(38px,5vw,64px); font-weight:680; line-height:1.04; letter-spacing:-.05em; }
.hero .lead { color:#c7d1e2; font-size:18px; }
.hero-note { border-left-color:#5ed7e5; color:#aebbd0; }
.search-shell { margin-top:26px; max-width:700px; }
.search-shell input, .search-shell .input { min-height:58px; padding:14px 112px 14px 50px; background:rgba(255,255,255,.98); border:0; border-radius:12px; box-shadow:0 14px 34px rgba(0,0,0,.22); }
.search-shell button, .search-shell .search-submit { right:7px; top:7px; height:44px; padding:0 20px; border:0; border-radius:9px; background:var(--blue); color:#fff; font-weight:650; }

.section { margin-top:46px; }
.section-head { margin-bottom:18px; }
.grid { gap:20px; }
.case-card { overflow:hidden; transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.case-card:hover { transform:translateY(-4px); border-color:#afbed3; box-shadow:0 18px 38px rgba(16,24,40,.12); }
.case-cover { position:relative; min-height:144px; overflow:hidden; padding:18px; background:linear-gradient(145deg,#e6eeff,#cbdcff); color:#24499a; }
.case-cover::before { content:""; position:absolute; inset:0; background-image:linear-gradient(90deg,transparent 49%,rgba(255,255,255,.55) 50%,transparent 51%),linear-gradient(transparent 49%,rgba(255,255,255,.55) 50%,transparent 51%); background-size:28px 28px; transform:perspective(240px) rotateX(58deg) scale(1.5); transform-origin:bottom; opacity:.5; }
.case-cover::after { content:""; position:absolute; right:24px; bottom:20px; width:70px; height:70px; border:12px solid rgba(36,88,230,.18); border-radius:20px 4px 20px 4px; transform:rotate(14deg); }
.case-cover span { position:relative; z-index:1; display:inline-flex; padding:6px 9px; border:1px solid rgba(36,88,230,.17); border-radius:999px; background:rgba(255,255,255,.72); backdrop-filter:blur(8px); font-size:11px; font-weight:700; }
.case-body { padding:20px; }
.case-body h3 { min-height:46px; margin-bottom:10px; font-size:17px; }
.case-value { color:var(--muted); line-height:1.65; }
.case-meta { padding-top:14px; border-top:1px solid var(--line); }

.tag { padding:4px 8px; border:1px solid #d8dee8; border-radius:999px; background:#f7f9fc; color:#536176; font-size:11px; font-weight:650; line-height:1.25; }
.tag-blue { background:var(--blue-soft); border-color:#cddcff; color:#2458e6; }
.tag-green { background:var(--green-soft); border-color:#b9ead1; color:#087648; }
.tag-orange { background:var(--orange-soft); border-color:#fed7aa; color:#a54105; }
.tag-red { background:var(--red-soft); border-color:#f6c1bc; color:#b42318; }
.tabs { gap:5px; padding:4px; border:1px solid var(--line); border-radius:11px; background:#eef2f7; }
.tab { min-height:38px; padding:8px 13px; border:0; border-radius:8px; color:#667085; font-weight:600; }
.tab:hover { background:rgba(255,255,255,.68); }
.tab.active { background:#fff; color:#1d2939; box-shadow:0 1px 4px rgba(16,24,40,.10); }
.tab.active::after { display:none; }
.tab span { min-width:21px; padding:1px 6px; border-radius:999px; background:#e9edf4; color:#667085; }
.tab.active span { background:var(--blue-soft); color:var(--blue); }

.training-row, .ranking-row { border-radius:13px; box-shadow:var(--shadow-xs); transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
.training-row:hover, .ranking-row:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.date-block { border-radius:11px; background:linear-gradient(145deg,#122142,#1c376d); color:#fff; box-shadow:0 9px 20px rgba(18,33,66,.18); }
.artifact, .comment, .status-callout, .diff-block { border-radius:10px; }
.empty-state { padding:52px 28px; border:1px dashed #bdc8d8; border-radius:14px; background:linear-gradient(145deg,#fff,#f7f9fc); }
.empty-state .icon { color:#5f7fd2; }
.incentive-banner { border:0; border-radius:16px; background:linear-gradient(120deg,#101a32,#18376b); color:#fff; box-shadow:0 18px 38px rgba(16,31,65,.18); }
.incentive-banner p, .incentive-banner small { color:#c4d0e2; }
.metric-card { min-height:184px; border-radius:14px; border-color:var(--line); box-shadow:var(--shadow-sm); }
.metric-card > strong { color:#17233b; font-size:2.25rem; }

/* High-fidelity management review */
.review-workspace { display:grid; gap:22px; }
.review-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; }
.review-section-head h2 { margin:7px 0 7px; font-size:24px; }
.review-section-head p { margin:0; color:var(--muted); }
.section-kicker { display:flex; align-items:center; gap:8px; font-size:10px; text-transform:uppercase; }
.section-kicker > span { width:24px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--blue),var(--cyan)); }
.review-policy { display:flex; align-items:center; gap:11px; width:min(360px,100%); padding:13px 15px; border:1px solid #cfe0ff; border-radius:12px; background:linear-gradient(135deg,#f6f9ff,#edf5ff); }
.policy-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:#fff; color:var(--blue); box-shadow:var(--shadow-xs); }
.review-policy div { display:grid; gap:2px; }
.review-policy strong { color:#284367; font-size:12px; }
.review-policy small { color:#607493; font-size:10px; line-height:1.45; }
.summary-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.summary-item { position:relative; display:flex; gap:16px; min-height:128px; padding:21px; overflow:hidden; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.9); box-shadow:var(--shadow-sm); }
.summary-item::after { content:""; position:absolute; right:-28px; bottom:-34px; width:100px; height:100px; border:18px solid #edf2fa; border-radius:50%; }
.summary-item.active { border-color:#bdd0ff; background:linear-gradient(145deg,#fff,#f4f7ff); box-shadow:0 12px 30px rgba(36,88,230,.09); }
.summary-item.active::before { content:""; position:absolute; left:0; top:18px; bottom:18px; width:3px; border-radius:0 3px 3px 0; background:linear-gradient(var(--blue),var(--cyan)); }
.summary-index { position:relative; z-index:1; display:grid; place-items:center; align-self:flex-start; width:30px; height:30px; border:1px solid var(--line); border-radius:9px; background:#f8fafc; color:#8b98ab; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:10px; }
.summary-item > div { position:relative; z-index:1; display:grid; align-content:start; }
.summary-item strong { color:#17233b; font-size:30px; line-height:1; letter-spacing:-.04em; }
.summary-item span:not(.summary-index) { margin-top:8px; color:#344054; font-size:13px; font-weight:650; }
.summary-item small { margin-top:5px; color:#7b8799; font-size:10px; line-height:1.45; }
.review-commandbar { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:var(--shadow-xs); }
.review-commandbar .tabs { flex:0 0 auto; }
.admin-toolbar { margin:0; }
.filters { display:flex; gap:10px; }
.compact-control { display:grid; gap:5px; min-width:160px; color:#7f8a9b; font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.compact-control .input { min-height:38px; padding:7px 10px; font-size:12px; text-transform:none; letter-spacing:0; }
.search-control { min-width:260px; }
.input-with-icon { position:relative; display:block; }
.input-with-icon .icon { position:absolute; z-index:1; left:10px; top:10px; width:16px; height:16px; color:#7c899c; }
.input-with-icon .input { padding-left:34px; }
.review-stage { display:grid; grid-template-columns:minmax(520px,1.55fr) minmax(350px,.85fr); gap:18px; align-items:start; }
.review-list-panel { overflow:hidden; min-width:0; border:1px solid var(--line); border-radius:15px; background:#fff; box-shadow:var(--shadow-sm); }
.list-panel-head { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; padding:17px 20px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#fff,#fafbfd); }
.list-panel-head > div { display:flex; align-items:center; gap:8px; }
.list-panel-head strong { font-size:14px; }
.list-panel-head span { padding:2px 7px; border-radius:999px; background:#eef2f7; color:#667085; font-size:10px; }
.list-panel-head small { color:#8995a7; font-size:10px; }
.review-list-panel .table-wrap { overflow:auto; border:0; border-radius:0; box-shadow:none; }
table { border-collapse:separate; border-spacing:0; }
th { padding:12px 16px; background:#f7f9fc; color:#7b8799; border-bottom:1px solid var(--line); font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
td { padding:16px; border-bottom:1px solid #edf0f4; color:#465268; font-size:12px; vertical-align:middle; }
tbody tr { cursor:pointer; transition:background .16s var(--ease), box-shadow .16s var(--ease); }
tbody tr:hover { background:#f8faff; }
tbody tr.selected { background:linear-gradient(90deg,#edf3ff,#f7faff); box-shadow:inset 3px 0 0 var(--blue); }
tbody tr:last-child td { border-bottom:0; }
.case-cell { display:flex; align-items:center; gap:12px; min-width:280px; }
.case-avatar { display:grid; place-items:center; flex:0 0 auto; width:38px; height:38px; border-radius:11px; background:linear-gradient(145deg,#e9f0ff,#dce8ff); color:#2f5dcf; font-size:14px; font-weight:750; box-shadow:inset 0 0 0 1px rgba(36,88,230,.10); }
.case-cell > span:last-child, .owner-stack { display:grid; gap:4px; }
.case-cell strong { color:#1f2a3d; font-size:12px; line-height:1.35; }
.case-cell small { max-width:310px; overflow:hidden; color:#7c899c; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.owner-stack strong { color:#344054; font-size:12px; }
.owner-stack small, .cell-note { display:block; margin-top:4px; color:#8a96a8; font-size:10px; }
.review-detail-panel { position:sticky; top:calc(var(--topbar) + 18px); overflow:hidden; border:0; border-radius:16px; box-shadow:0 18px 45px rgba(16,24,40,.13),0 0 0 1px rgba(203,211,223,.7); }
.review-detail-hero { position:relative; overflow:hidden; padding:22px 22px 20px; color:#fff; background:linear-gradient(145deg,#12203c,#1b3768); }
.review-detail-hero::after { content:""; position:absolute; right:-36px; top:-30px; width:150px; height:150px; border:1px solid rgba(255,255,255,.13); border-radius:36px; transform:rotate(24deg); box-shadow:0 0 0 28px rgba(255,255,255,.025); }
.review-detail-hero.published { background:linear-gradient(145deg,#123a31,#17634b); }
.review-detail-hero.offline { background:linear-gradient(145deg,#3a2330,#6f2d36); }
.review-detail-top { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.review-object-type { color:#9eb5dc; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.review-detail-hero h2 { position:relative; z-index:1; max-width:90%; margin:24px 0 9px; color:#fff; font-size:22px; line-height:1.3; }
.review-detail-hero > p { position:relative; z-index:1; margin:0; color:#c7d2e5; font-size:12px; line-height:1.6; }
.detail-identity { position:relative; z-index:1; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; margin-top:22px; padding-top:16px; border-top:1px solid rgba(255,255,255,.13); }
.detail-identity .person-avatar { width:30px; height:30px; border-radius:9px; }
.detail-identity div { display:grid; line-height:1.25; }
.detail-identity small { color:#8fa4c7; font-size:9px; }
.detail-identity strong { margin-top:2px; color:#fff; font-size:11px; }
.detail-time { color:#9fb0c9; font-size:9px; }
.side-panel-body { padding:0; background:#fff; }
.detail-section { padding:20px 22px; }
.detail-section-title, .diff-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; }
.detail-section-title span, .diff-title span { color:#344054; font-size:12px; font-weight:700; }
.detail-section-title small, .diff-title small { color:#98a2b3; font-size:9px; letter-spacing:.05em; text-transform:uppercase; }
.info-list { gap:0; }
.info-row { padding:9px 0; border-bottom:1px solid #eef1f5; }
.info-row:last-child { border-bottom:0; }
.info-row dt { color:#7d899b; font-size:10px; }
.info-row dd { color:#344054; font-size:11px; font-weight:580; text-align:right; }
.status-text { display:inline-flex; align-items:center; gap:6px; }
.status-text i { width:6px; height:6px; border-radius:50%; background:#f79009; }
.status-text.published i { background:#12b76a; }
.status-text.offline i { background:#f04438; }
.diff-block { margin:0 22px 18px; padding:15px; border:1px solid #d9e4f8; background:#f5f8ff; }
.diff-block p { margin:0; color:#52647e; font-size:11px; line-height:1.65; }
.decision-note { display:flex; gap:12px; margin:0 22px 20px; padding:13px 0; }
.decision-line { width:3px; flex:0 0 3px; border-radius:3px; background:linear-gradient(var(--blue),var(--cyan)); }
.decision-note div { display:grid; gap:4px; }
.decision-note strong { color:#344054; font-size:11px; }
.decision-note p { margin:0; color:#7b8799; font-size:10px; line-height:1.55; }
.side-panel-actions { display:block; padding:16px 20px 18px; background:#f8fafc; border-top:1px solid var(--line); }
.action-hint { display:flex; justify-content:space-between; gap:10px; margin-bottom:12px; }
.action-hint strong { color:#344054; font-size:11px; }
.action-hint small { color:#8b97a8; font-size:9px; }
.action-buttons { display:flex; gap:8px; flex-wrap:wrap; }
.action-buttons .btn { flex:1 1 auto; min-height:40px; padding:8px 11px; font-size:11px; }

.prototype-panel { top:calc(var(--topbar) + 12px); padding:20px; border:1px solid var(--line); border-radius:15px; box-shadow:var(--shadow-lg); }
.prototype-panel .notice { border:1px solid #cfe0ff; border-radius:10px; background:#f3f7ff; }
.segmented { gap:4px; padding:4px; border:1px solid var(--line); border-radius:10px; background:#eef2f7; }
.segmented button { border:0; border-radius:7px; background:transparent; }
.segmented button.active { background:#fff; color:#1d2939; box-shadow:var(--shadow-xs); }
.modal-backdrop { background:rgba(9,16,32,.62); backdrop-filter:blur(6px); }
.modal { overflow:hidden; border:1px solid rgba(255,255,255,.35); border-radius:17px; box-shadow:var(--shadow-lg); }
.modal-head { padding:22px 24px; background:linear-gradient(180deg,#fff,#fafbfd); }
.modal-body { padding:24px; }
.modal-actions { padding:15px 24px; }
.toast { border:1px solid rgba(255,255,255,.1); border-left:0; border-radius:12px; background:#101828; box-shadow:var(--shadow-lg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

@media (max-width: 1180px) {
  :root { --sidebar:220px; }
  .brand { min-width:220px; }
  .topnav a { padding:0 10px; }
  .prototype-badge { display:none; }
  .admin-main { padding-left:28px; padding-right:28px; }
  .review-stage { grid-template-columns:1fr; }
  .review-detail-panel { position:static; display:grid; grid-template-columns:minmax(290px,.75fr) minmax(380px,1.25fr); }
  .review-detail-hero { min-height:100%; }
  .side-panel-actions { grid-column:1/-1; }
}

@media (max-width: 900px) {
  :root { --sidebar:86px; }
  .brand { min-width:86px; padding:0 25px; }
  .brand-copy, .nav-copy, .workspace-title strong, .workspace-title span, .sidebar-foot div { display:none; }
  .workspace-title { height:20px; padding:0; }
  .side-nav { padding:0 10px; }
  .side-nav button { justify-content:center; padding:8px; }
  .side-nav button.active::before { left:-10px; }
  .side-nav .nav-count { position:absolute; right:4px; top:4px; }
  .sidebar-foot { justify-content:center; margin: auto 10px 16px; }
  .topnav a { padding:0 9px; font-size:12px; }
  .identity-copy { display:none; }
  .review-commandbar, .review-section-head { align-items:stretch; flex-direction:column; }
  .filters { width:100%; }
  .compact-control { flex:1; }
  .review-detail-panel { display:block; }
}

@media (max-width: 767px) {
  :root { --topbar:58px; }
  .topbar { height:auto; min-height:var(--topbar); flex-wrap:wrap; }
  .brand { min-width:auto; padding:0 14px; order:1; }
  .topbar-spacer { order:2; }
  .prototype-badge { display:none; }
  .workspace-switch { order:3; }
  .identity-action { order:4; }
  .topnav { display:flex; order:5; width:100%; height:46px; overflow-x:auto; background:#13213a; border-top:1px solid rgba(255,255,255,.1); scrollbar-width:none; }
  .topnav::-webkit-scrollbar { display:none; }
  .topnav a { flex:1 0 auto; min-width:72px; justify-content:center; padding:0 12px; color:#dbe4f1; font-size:12px; white-space:nowrap; border-bottom-width:3px; }
  .topnav a.active { color:#fff; background:#1b2c4a; }
  .brand-mark { width:30px; height:30px; }
  .brand-copy { display:grid; }
  .brand-copy small { display:none; }
  .top-action { padding:0 12px; }
  .workspace-switch span { display:none; }
  .employee-main, .admin-main { padding:24px 16px 52px; }
  .hero { margin:-24px -16px 28px; padding:44px 18px 38px; }
  .hero h1 { font-size:38px; }
  .admin-layout { display:block; }
  .admin-sidebar { position:static; height:auto; display:block; overflow:visible; background:#10192c; }
  .workspace-title, .sidebar-foot { display:none; }
  .side-nav { grid-template-columns:repeat(5,minmax(104px,1fr)); gap:4px; padding:8px; overflow-x:auto; scrollbar-width:thin; }
  .side-nav button { min-height:64px; gap:5px; border-radius:9px; padding:7px 8px; }
  .side-nav .nav-copy { display:grid; min-width:0; text-align:center; line-height:1.15; }
  .side-nav .nav-copy strong { font-size:11px; white-space:nowrap; }
  .side-nav .nav-copy small { display:none; }
  .side-nav button.active::before { left:14px; right:14px; top:auto; bottom:-8px; width:auto; height:3px; border-radius:3px 3px 0 0; }
  .nav-icon { width:28px; height:28px; }
  .workspace-header { display:block; margin-bottom:26px; }
  .workspace-actions { justify-content:space-between; margin-top:18px; }
  .runtime-status { display:none; }
  .review-policy { width:100%; }
  .summary-strip { grid-template-columns:1fr; }
  .summary-item { min-height:98px; }
  .review-commandbar { padding:12px; }
  .review-commandbar .tabs { overflow-x:auto; }
  .filters { flex-direction:column; }
  .search-control, .compact-control { min-width:0; width:100%; }
  .list-panel-head small { display:none; }
  .review-list-panel .table-wrap { overflow-x:auto; }
  .review-list-panel table { min-width:720px; }
  .action-hint { display:grid; }
  .action-buttons { display:grid; grid-template-columns:1fr; }
  .page-header { display:block; }
  .grid-4, .grid-3, .grid-2, .metric-grid { grid-template-columns:1fr; }
}

/* T8 home — AI practice map */
.employee-main:has(.home-hero) { max-width:1440px; padding:28px 44px 88px; }
.home-hero {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(420px,.94fr);
  min-height:570px;
  overflow:hidden;
  border-radius:24px;
  background:#0c1930;
  color:#fff;
  box-shadow:0 28px 70px rgba(10,24,50,.20);
}
.home-hero::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(90deg,#000,transparent 58%);
}
.home-hero-copy { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; padding:68px 58px 62px; }
.home-kicker { display:inline-flex; align-items:center; gap:9px; color:#526174; font-size:11px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; }
.home-kicker > span, .home-kicker > i { display:block; width:26px; height:2px; border-radius:3px; background:#22c7bd; }
.home-hero .home-kicker { color:#88dfd9; }
.home-hero h1 { max-width:650px; margin:22px 0 24px; font-size:clamp(48px,5.4vw,76px); font-weight:720; line-height:.98; letter-spacing:-.065em; }
.home-hero h1 em { color:#81e0d8; font-family:"STKaiti","KaiTi","PingFang SC",sans-serif; font-style:normal; font-weight:600; }
.home-lead { max-width:590px; margin:0 0 34px; color:#bac7d9; font-size:17px; line-height:1.75; }
.home-search { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; width:min(650px,100%); padding:6px; border:1px solid rgba(255,255,255,.14); border-radius:15px; background:#fff; box-shadow:0 14px 34px rgba(0,0,0,.18); }
.home-search-icon { display:grid; place-items:center; color:#66758a; }
.home-search input { min-width:0; height:48px; padding:0 8px; border:0; outline:0; background:transparent; color:#15233c; font-size:14px; }
.home-search input::placeholder { color:#8b97a8; }
.home-search button { height:48px; padding:0 22px; border:0; border-radius:10px; background:#2458e6; color:#fff; font-size:13px; font-weight:700; cursor:pointer; transition:background .18s var(--ease),transform .18s var(--ease); }
.home-search button:hover { background:#1949c9; transform:translateY(-1px); }
.home-search-suggestions { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:14px; color:#7f91aa; font-size:11px; }
.home-search-suggestions button { padding:4px 8px; border:0; border-radius:6px; background:rgba(255,255,255,.07); color:#bdc9d9; font-size:11px; cursor:pointer; }
.home-search-suggestions button:hover { background:rgba(129,224,216,.13); color:#9ce8e2; }
.practice-canvas { position:relative; z-index:1; align-self:center; margin:46px 48px 46px 6px; padding:26px; border:1px solid rgba(255,255,255,.15); border-radius:20px; background:#f6f8fc; color:#142138; box-shadow:12px 12px 0 #102446,0 32px 80px rgba(0,0,0,.26); transform:rotate(1.2deg); }
.practice-canvas::before { display:none; }
.canvas-head { display:flex; justify-content:space-between; padding-bottom:19px; border-bottom:1px solid #dfe5ee; color:#7a8798; font-size:10px; }
.canvas-status { display:flex; align-items:center; gap:7px; color:#17675f; font-weight:700; }
.canvas-status i { width:7px; height:7px; border-radius:50%; background:#22b8ad; box-shadow:0 0 0 4px #dff6f3; }
.canvas-question { padding:25px 0 22px; }
.canvas-question small { display:block; margin-bottom:8px; color:#7c899b; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.canvas-question strong { font-size:25px; line-height:1.36; letter-spacing:-.025em; }
.canvas-flow { display:grid; gap:8px; }
.canvas-flow > div { display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:center; padding:12px 14px; border:1px solid #dfe6ef; border-radius:10px; background:#fff; }
.canvas-flow b { color:#2f61da; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:10px; }
.canvas-flow span { color:#27364d; font-size:12px; font-weight:700; }
.canvas-flow small { color:#8793a3; font-size:10px; font-weight:500; }
.canvas-output { display:grid; gap:5px; margin-top:10px; padding:14px; border-radius:10px; background:#e9f7f5; }
.canvas-output span { color:#4c766f; font-size:9px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
.canvas-output strong { color:#205e58; font-size:11px; }
.canvas-link { display:flex; align-items:center; justify-content:flex-end; gap:8px; width:100%; padding:18px 2px 0; border:0; background:transparent; color:#2458e6; font-size:11px; font-weight:750; cursor:pointer; }
.canvas-link .icon { width:15px; }
.home-section { margin-top:66px; }
.home-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.home-section-head h2 { margin:8px 0 0; color:#152139; font-size:29px; font-weight:700; letter-spacing:-.035em; }
.home-section-head > p { max-width:390px; margin:0; color:#697589; font-size:13px; text-align:right; }
.home-section-head.compact { margin-bottom:13px; }
.text-link { display:inline-flex; align-items:center; gap:8px; padding:7px 0; border:0; background:transparent; color:#315dc9; font-size:12px; font-weight:700; cursor:pointer; }
.text-link .icon { width:15px; transition:transform .18s var(--ease); }
.text-link:hover .icon { transform:translateX(3px); }
.scene-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.home-scene { display:grid; grid-template-columns:44px 1fr auto; gap:13px; align-items:start; min-height:150px; padding:21px 19px; border:1px solid #dce3ec; border-radius:16px; background:#fff; color:#1d293d; text-align:left; cursor:pointer; box-shadow:0 4px 16px rgba(25,43,72,.04); transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease); }
.home-scene:hover { transform:translateY(-3px); border-color:#9fb7eb; box-shadow:0 14px 30px rgba(31,61,113,.10); }
.scene-glyph { display:grid; place-items:center; width:44px; height:44px; border-radius:13px; background:#edf3ff; color:#2858c5; font-family:"STKaiti","KaiTi",sans-serif; font-size:20px; font-weight:700; }
.home-scene:nth-child(2) .scene-glyph { background:#e5f7f4; color:#14786f; }
.home-scene:nth-child(3) .scene-glyph { background:#fff3df; color:#9a5a12; }
.home-scene:nth-child(4) .scene-glyph { background:#f0ebff; color:#6744b4; }
.scene-copy { display:grid; gap:9px; }
.scene-copy strong { font-size:14px; }
.scene-copy small { color:#718095; font-size:11px; line-height:1.6; }
.scene-tail { align-self:stretch; display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; color:#8390a2; }
.scene-tail small { white-space:nowrap; font-size:9px; }
.scene-tail .icon { width:16px; color:#315dc9; }
.editorial-cases { display:grid; grid-template-columns:minmax(0,1.22fr) minmax(360px,.78fr); gap:16px; }
.feature-case { overflow:hidden; border:1px solid #dce3ec; border-radius:20px; background:#fff; box-shadow:0 10px 30px rgba(23,40,71,.07); }
.feature-visual { position:relative; display:flex; align-items:center; justify-content:center; gap:16px; min-height:250px; overflow:hidden; background:#dfe9ff; }
.feature-visual::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(39,81,170,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(39,81,170,.08) 1px,transparent 1px); background-size:32px 32px; }
.visual-label { position:absolute; left:22px; top:20px; z-index:1; padding:6px 9px; border-radius:999px; background:#fff; color:#315dc9; font-size:10px; font-weight:750; }
.evidence-sheet,.insight-sheet { position:relative; z-index:1; width:150px; min-height:128px; padding:20px; border:1px solid rgba(40,80,160,.14); border-radius:12px; background:#fff; box-shadow:0 14px 30px rgba(32,65,124,.12); }
.evidence-sheet { display:grid; align-content:center; gap:9px; transform:rotate(-3deg); }
.evidence-sheet i { height:5px; border-radius:4px; background:#c9d5e9; }
.evidence-sheet i:nth-child(2) { width:80%; }
.evidence-sheet i:nth-child(3) { width:60%; }
.evidence-sheet b { margin-top:6px; color:#33435b; font-size:10px; }
.evidence-arrow { position:relative; z-index:1; color:#315dc9; font-size:28px; }
.insight-sheet { display:grid; gap:8px; transform:rotate(2deg); }
.insight-sheet span { padding:9px; border-left:3px solid #2d64dc; border-radius:4px; background:#eff4ff; color:#365071; font-size:10px; font-weight:700; }
.insight-sheet span:nth-child(2) { border-left-color:#22b8ad; background:#e9f8f6; }
.insight-sheet span:nth-child(3) { border-left-color:#e4a642; background:#fff6e5; }
.feature-body { padding:25px 27px 27px; }
.case-overline { margin-bottom:10px; color:#5d73a4; font-size:10px; font-weight:750; letter-spacing:.04em; }
.feature-body h3 { max-width:650px; margin-bottom:10px; font-size:24px; font-weight:700; letter-spacing:-.03em; }
.feature-body > p { max-width:690px; color:#69778b; font-size:13px; line-height:1.7; }
.feature-meta { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:22px; padding-top:18px; border-top:1px solid #e7ebf1; color:#7b8798; font-size:11px; }
.feature-meta b { color:#34435a; }
.secondary-cases { display:grid; gap:16px; }
.secondary-case { display:grid; grid-template-columns:150px minmax(0,1fr); overflow:hidden; min-height:245px; border:1px solid #dce3ec; border-radius:18px; background:#fff; box-shadow:0 6px 20px rgba(23,40,71,.05); }
.secondary-visual { position:relative; display:grid; place-items:center; overflow:hidden; background:#e5f5f2; }
.secondary-case:nth-child(2) .secondary-visual { background:#f0ebff; }
.secondary-visual span { position:relative; z-index:1; display:grid; place-items:center; width:70px; height:70px; border:1px solid rgba(26,117,106,.18); border-radius:22px; background:rgba(255,255,255,.72); color:#17766e; font-family:"STKaiti","KaiTi",sans-serif; font-size:34px; }
.secondary-case:nth-child(2) .secondary-visual span { color:#6744b4; }
.secondary-visual i { position:absolute; width:130px; height:1px; background:rgba(35,114,105,.15); transform:rotate(32deg); }
.secondary-visual i:nth-child(3) { transform:rotate(-32deg); }
.secondary-body { display:flex; flex-direction:column; padding:20px; }
.secondary-body h3 { margin-bottom:9px; font-size:17px; font-weight:700; }
.secondary-body p { color:#6f7c8e; font-size:11px; line-height:1.65; }
.secondary-body > div:last-child { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; color:#8792a1; font-size:10px; }
.discovery-grid { display:grid; grid-template-columns:minmax(0,1.32fr) minmax(330px,.68fr); gap:16px; align-items:stretch; }
.curated-panel { padding:25px 26px; border:1px solid #dce3ec; border-radius:20px; background:#fff; box-shadow:0 8px 24px rgba(23,40,71,.05); }
.curated-row { display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:15px; align-items:center; width:100%; padding:17px 4px; border:0; border-top:1px solid #e8ecf2; background:transparent; text-align:left; cursor:pointer; }
.curated-row:hover strong { color:#2858c5; }
.curated-rank { color:#96a2b2; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:10px; }
.curated-row > span:nth-child(2) { display:grid; gap:4px; }
.curated-row strong { color:#27364d; font-size:13px; transition:color .18s var(--ease); }
.curated-row small { color:#7c8899; font-size:10px; }
.role-panel { position:relative; display:flex; flex-direction:column; overflow:hidden; padding:28px; border-radius:20px; background:#14274a; color:#fff; box-shadow:0 14px 32px rgba(18,39,74,.16); }
.role-panel::after { content:"PM"; position:absolute; right:-12px; bottom:-42px; color:rgba(255,255,255,.035); font-size:150px; font-weight:800; letter-spacing:-.1em; }
.role-panel-head { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; color:#8fa1bd; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.role-panel-head b { display:grid; place-items:center; width:34px; height:34px; border:1px solid rgba(255,255,255,.13); border-radius:10px; background:#1d396b; color:#8be0da; }
.role-panel h2 { position:relative; z-index:1; margin:34px 0 13px; color:#fff; font-size:27px; font-weight:700; }
.role-panel p { position:relative; z-index:1; max-width:390px; color:#adbad0; font-size:12px; line-height:1.7; }
.role-topics { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:7px; margin:12px 0 28px; }
.role-topics span { padding:6px 9px; border:1px solid rgba(255,255,255,.12); border-radius:999px; color:#d2d9e5; font-size:10px; }
.role-action { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:auto; padding:14px 0; border:0; border-top:1px solid rgba(255,255,255,.14); background:transparent; color:#8be0da; font-size:12px; font-weight:750; cursor:pointer; }
.role-action .icon { width:16px; }
.role-note { position:relative; z-index:1; color:#72839e; font-size:9px; }
.home-training-list { display:grid; gap:10px; }
.home-training-row { display:grid; grid-template-columns:74px minmax(0,1fr) 170px auto; gap:20px; align-items:center; padding:16px 18px; border:1px solid #dce3ec; border-radius:15px; background:#fff; box-shadow:0 4px 14px rgba(23,40,71,.04); }
.home-date { display:grid; place-items:center; min-height:68px; border-radius:12px; background:#eef3fb; color:#233f72; }
.home-date strong { font-size:24px; line-height:1; }
.home-date span { margin-top:4px; font-size:9px; font-weight:700; }
.training-main h3 { margin:7px 0 4px; font-size:15px; font-weight:700; }
.training-main p { margin:0; color:#788596; font-size:10px; }
.training-format { color:#728096; font-size:9px; }
.training-related { display:grid; gap:5px; padding-left:18px; border-left:1px solid #e2e7ee; }
.training-related small { color:#8a96a5; font-size:9px; }
.training-related strong { color:#43526a; font-size:10px; }
.recognition-banner { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:34px; align-items:center; min-height:220px; margin-top:66px; overflow:hidden; padding:40px 42px; border-radius:22px; background:#0f3f45; color:#fff; box-shadow:0 20px 46px rgba(15,63,69,.17); }
.recognition-banner::before { content:""; position:absolute; right:30%; top:-95px; width:260px; height:260px; border:1px solid rgba(126,225,215,.13); border-radius:50%; box-shadow:0 0 0 55px rgba(126,225,215,.04),0 0 0 110px rgba(126,225,215,.025); }
.home-kicker.light { color:#89ddd5; }
.recognition-banner h2 { position:relative; z-index:1; max-width:650px; margin:12px 0 8px; color:#fff; font-size:27px; font-weight:700; letter-spacing:-.035em; }
.recognition-banner p { position:relative; z-index:1; margin:0; color:#a9c7c7; font-size:12px; }
.recognition-signal { position:relative; z-index:1; display:flex; align-items:center; gap:17px; }
.recognition-signal span { display:grid; color:#fff; font-size:27px; font-weight:750; line-height:1; }
.recognition-signal small { margin-top:6px; color:#89afaf; font-size:9px; font-weight:600; }
.recognition-signal i { width:1px; height:46px; background:rgba(255,255,255,.18); }
.recognition-action { position:relative; z-index:1; display:flex; align-items:center; gap:12px; min-height:50px; padding:0 19px; border:1px solid rgba(255,255,255,.18); border-radius:12px; background:#fff; color:#164f53; font-size:11px; font-weight:750; cursor:pointer; }
.recognition-action:hover { background:#e7f6f4; }

@media (max-width: 1120px) {
  .home-hero { grid-template-columns:minmax(0,1fr) 390px; }
  .home-hero-copy { padding:56px 42px; }
  .practice-canvas { margin:38px 32px 38px 0; }
  .scene-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .editorial-cases { grid-template-columns:1fr; }
  .secondary-cases { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-training-row { grid-template-columns:70px minmax(0,1fr) auto; }
  .training-related { display:none; }
  .recognition-banner { grid-template-columns:1fr auto; }
  .recognition-signal { display:none; }
}

@media (max-width: 900px) {
  .employee-main:has(.home-hero) { padding:24px 24px 70px; }
  .home-hero { grid-template-columns:1fr; min-height:auto; }
  .home-hero-copy { padding:52px 38px 34px; }
  .home-hero h1 { font-size:58px; }
  .practice-canvas { margin:0 38px 46px; transform:none; }
  .discovery-grid { grid-template-columns:1fr; }
  .role-panel { min-height:360px; }
}

@media (max-width: 767px) {
  .employee-main:has(.home-hero) { padding:16px 14px 52px; }
  .home-hero { border-radius:18px; }
  .home-hero-copy { padding:40px 22px 28px; }
  .home-hero h1 { margin:18px 0; font-size:44px; }
  .home-lead { margin-bottom:24px; font-size:14px; }
  .home-search { grid-template-columns:40px minmax(0,1fr); }
  .home-search button { grid-column:1/-1; width:100%; }
  .home-search-suggestions { display:none; }
  .practice-canvas { margin:0 18px 30px; padding:20px; }
  .practice-canvas::before { inset:7px -7px -7px 7px; }
  .canvas-question strong { font-size:21px; }
  .home-section { margin-top:48px; }
  .home-section-head { display:block; }
  .home-section-head > p { margin-top:8px; text-align:left; }
  .home-section-head .text-link { margin-top:8px; }
  .home-section-head h2 { font-size:24px; }
  .scene-grid { grid-template-columns:1fr; }
  .home-scene { min-height:124px; }
  .feature-visual { min-height:210px; }
  .evidence-sheet,.insight-sheet { width:112px; min-height:108px; padding:14px; }
  .feature-body { padding:22px; }
  .feature-body h3 { font-size:21px; }
  .feature-meta { align-items:flex-start; flex-direction:column; }
  .secondary-cases { grid-template-columns:1fr; }
  .secondary-case { grid-template-columns:108px minmax(0,1fr); min-height:230px; }
  .secondary-body { padding:17px; }
  .curated-panel { padding:21px 18px; }
  .curated-row { grid-template-columns:30px minmax(0,1fr); }
  .curated-row > .tag { display:none; }
  .role-panel { min-height:340px; padding:24px; }
  .home-training-row { grid-template-columns:62px minmax(0,1fr); gap:14px; }
  .home-training-row > .btn { grid-column:2; justify-self:start; }
  .home-date { min-height:62px; }
  .recognition-banner { grid-template-columns:1fr; gap:24px; padding:30px 24px; }
  .recognition-banner h2 { font-size:24px; }
  .recognition-action { justify-content:space-between; }
}





/* T9 directed visual remediation: scoped to task-specific layouts. */
.sample-label { display:inline-block; margin:0 0 8px; padding:3px 8px; border-radius:5px; background:#eef3f6; color:#546779; font-size:12px; }
.practice-steps { padding-left:22px; }
.practice-steps li { padding:4px 0 8px 6px; }
.compact-empty { display:flex; align-items:center; gap:16px; padding:18px 20px; border:1px dashed #c9d4df; border-radius:10px; background:#f8fafc; }
.compact-empty > .icon { flex:0 0 auto; width:24px; height:24px; color:#7e8ea3; }
.compact-empty strong { font-size:14px; color:#475569; }
.compact-empty p { margin:4px 0 0; color:#667085; font-size:13px; }
.schedule-hero { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(350px,.9fr); gap:36px; align-items:start; padding:28px 0 0; min-height:0; }
.schedule-hero h1 { font-size:clamp(27px,3vw,38px); line-height:1.3; margin:18px 0 14px; }
.schedule-hero .lead { font-size:16px; line-height:1.8; max-width:42em; }
.schedule-card { padding:24px; background:#fff; border:1px solid #dbe3ec; border-radius:14px; box-shadow:0 8px 24px #142c4710; }
.schedule-card .date-block { display:none; }
.schedule-card .info-list { margin:0 0 18px; }
.schedule-card .info-row { align-items:center; gap:16px; padding:12px 0; }
.schedule-card .info-row dt { font-size:13px; white-space:nowrap; }
.schedule-card .info-row dd { font-size:17px; font-weight:650; font-variant-numeric:tabular-nums; }
.schedule-card > .btn { width:100%; }
.schedule-hero + .section { margin-top:30px; }
.admin-main .workspace-header { margin-bottom:24px; }
.admin-main .workspace-header h1 { font-size:30px; }
.admin-main .workspace-header .lead { font-size:14px; }
.review-workspace { display:block; }
.review-commandbar.priority { margin:0 0 18px; padding:0; background:none; border:0; box-shadow:none; }
.review-commandbar .tabs { margin:0; }
.review-commandbar .admin-toolbar { margin-top:12px; padding:0; }
.review-stage { display:grid; grid-template-columns:minmax(260px,.8fr) minmax(380px,1.2fr); gap:18px; align-items:start; }
.review-queue { display:grid; }
.review-queue-item { display:grid; gap:9px; width:100%; border:0; border-bottom:1px solid #e7ecf2; padding:20px; background:#fff; text-align:left; cursor:pointer; font:inherit; }
.review-queue-item:hover { background:#f6f9fc; }
.review-queue-item.selected { background:#edf4ff; box-shadow:inset 3px 0 #2864dc; }
.queue-heading { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:start; gap:9px; }
.queue-heading > strong { flex:1 1 170px; font-size:15px; line-height:1.6; color:#203650; }
.queue-value { color:#52647a; font-size:13px; line-height:1.7; }
.queue-meta { color:#677b92; font-size:11px; line-height:1.6; }
.review-detail-panel { display:flex; flex-direction:column; position:static; min-width:0; box-shadow:0 6px 24px #18324b0b; border:1px solid #d9e3ee; }
.review-detail-hero { min-height:0; padding:20px; }
.review-detail-hero h2 { max-width:100%; margin:12px 0 8px; font-size:21px; }
.detail-identity { margin-top:14px; padding-top:12px; }
.review-detail-panel .side-panel-actions { padding:16px 20px; background:#f8faff; border-top:0; border-bottom:1px solid #dce5f0; }
.review-detail-panel .action-hint { display:none; }
.review-detail-panel .action-buttons { display:flex; flex-wrap:wrap; gap:8px; }
.review-detail-panel .action-buttons .btn { flex:1 1 auto; }
.review-detail-panel .detail-section { padding:16px 20px; }
.review-detail-panel .info-row dt,.review-detail-panel .info-row dd { font-size:12px; }
.review-detail-panel .diff-block { margin:0 20px 16px; }
.review-detail-panel .decision-note { margin:0 20px 18px; }
.recognition-page { max-width:1200px; margin:auto; }
.recognition-page .page-header { margin-bottom:24px; }
.ranking-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 0; border-top:1px solid #dce4ec; border-bottom:1px solid #dce4ec; }
.ranking-toolbar > div:first-child { display:grid; gap:5px; }
.ranking-toolbar strong { font-size:20px; color:#213b51; }
.ranking-toolbar .period-switch { margin:0; }
.snapshot-caption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; margin:15px 0 20px; color:#66798c; font-size:12px; }
.recognition-page .ranking-row { padding:24px; gap:20px; grid-template-columns:44px minmax(0,1fr) 110px auto; }
.recognition-page .ranking-row:not(:has(.rank)) { grid-template-columns:minmax(0,1fr) auto; }
.recognition-page .rank { width:38px; height:44px; background:#edf4f5; color:#27696d; border-radius:8px; font-size:22px; }
.recognition-page .ranking-row h2 { font-size:18px; margin:8px 0; }
.recognition-page .ranking-row p { font-size:13px; }
.incentive-note { display:flex; justify-content:space-between; align-items:start; flex-wrap:wrap; gap:20px; padding:22px 24px; margin-top:24px; border:1px solid #d9e6e6; background:#f3f8f7; border-radius:12px; }
.incentive-note h2 { margin:10px 0 6px; font-size:17px; }
.incentive-note p { margin:0; color:#536b70; font-size:13px; }
.incentive-period { display:grid; gap:7px; font-size:12px; color:#536b70; }
.incentive-period small { max-width:260px; color:#6e8287; }
.dashboard-toolbar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; }
.dashboard-status { margin:12px 0 20px; }
.incentive-summary { padding:24px; }
.incentive-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 28px; }
.incentive-facts dt { font-size:12px; color:#718096; margin-bottom:6px; }
.incentive-facts dd { margin:0; color:#23384e; font-size:15px; line-height:1.7; overflow-wrap:anywhere; }
.incentive-actions { display:flex; flex-wrap:wrap; gap:10px; }
@media (max-width:1024px) {
  .review-stage { grid-template-columns:minmax(230px,.8fr) minmax(330px,1.2fr); }
  .review-commandbar .admin-toolbar { width:100%; }
  .review-commandbar .filters { flex-wrap:wrap; }
  .schedule-hero { grid-template-columns:minmax(0,1fr) minmax(330px,1fr); gap:24px; }
  .recognition-page .ranking-row { grid-template-columns:38px minmax(0,1fr) 90px; }
  .recognition-page .ranking-row > .btn { grid-column:2/-1; justify-self:start; }
}
@media (max-width:767px) {
  .schedule-hero { grid-template-columns:1fr; gap:18px; padding-top:4px; }
  .schedule-card .info-row dd { font-size:16px; }
  .review-stage { grid-template-columns:1fr; }
  .review-list-panel { max-height:300px; overflow:auto; }
  .review-commandbar .admin-toolbar { margin-top:8px; }
  .review-commandbar .compact-control { min-width:0; }
  .review-commandbar .tabs { overflow-x:auto; }
  .ranking-toolbar { align-items:start; flex-direction:column; gap:15px; }
  .recognition-page .ranking-row { grid-template-columns:30px minmax(0,1fr); padding:18px; gap:12px; }
  .recognition-page .ranking-metric { grid-column:2; display:flex; align-items:baseline; gap:10px; text-align:left; }
  .recognition-page .ranking-row > .btn { grid-column:2; }
  .incentive-facts { grid-template-columns:1fr; }
  .incentive-note { padding:18px; }
  .admin-main .workspace-header h1 { font-size:26px; }
}
.schedule-card { color:#243c54; min-height:0; }
.schedule-card .info-row dt { color:#64758a; }
.schedule-card .info-row dd { color:#23384e; }
.detail-main .empty-state { padding:18px 20px; text-align:left; }
.detail-main .empty-state > .icon { display:none; }
.detail-main .empty-state h3 { font-size:14px; margin:0 0 4px; }
.detail-main .empty-state p { font-size:13px; margin:0; }
.incentive-facts .span-all { grid-column:1/-1; }
.incentive-actions { justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px; }
.incentive-actions > div:first-child { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.incentive-actions strong { font-size:14px; }
.incentive-summary > p { margin:10px 0 20px; line-height:1.7; }
.incentive-summary h3 { margin:20px 0 8px; font-size:15px; }
.incentive-summary > p:last-child { margin-bottom:0; }
.dashboard-toolbar { padding:18px 20px; margin-bottom:16px; background:#fff; border:1px solid #dce4ec; border-radius:12px; }
.dashboard-toolbar .period-switch { margin:0; }
.dashboard-toolbar .custom-period { margin:0; padding:0; border:0; background:none; gap:10px; }
.dashboard-toolbar .custom-period .field { min-width:135px; }
.dashboard-status { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; padding:8px 0; font-size:13px; color:#64758a; }
.dashboard-status strong { color:#243c54; }
.dashboard-status p { margin:0; }
@media (max-width:767px) {
 .dashboard-toolbar { padding:14px; }
 .dashboard-toolbar .custom-period { width:100%; }
 .incentive-summary { padding:18px; }
 .incentive-actions { align-items:start; }
}
/* Keep the selected review and its actions in the narrow-screen task flow. */
@media (max-width:767px) {
  .admin-main:has(.review-workspace) .workspace-header { display:flex; flex-direction:row; align-items:flex-start; gap:12px; margin-bottom:16px; }
  .admin-main:has(.review-workspace) .workspace-actions { flex:none; margin-top:0; }
  .review-commandbar .filters { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:10px; }
  .review-commandbar .filters .input { min-width:0; width:100%; }
  .review-list-panel { max-height:none; overflow:hidden; }
  .review-list-panel .list-panel-head { padding:12px 16px; }
  .review-queue { display:flex; overflow-x:auto; scroll-snap-type:x proximity; }
  .review-queue-item { flex:0 0 270px; padding:12px 16px; gap:5px; border-bottom:0; border-right:1px solid #e7ecf2; scroll-snap-align:start; }
  .review-queue-item .queue-heading { gap:5px; }
  .review-queue-item .queue-heading > strong { flex:1 1 150px; font-size:14px; }
  .review-queue-item .queue-value { display:none; }
  .review-detail-hero { padding:16px 20px; }
  .review-detail-panel .side-panel-actions { padding:12px 20px; }
}
@media (max-width:479px) {
  .admin-main:has(.review-workspace) .workspace-header { flex-direction:column; }
  .review-commandbar .filters { grid-template-columns:1fr; }
}

/* T9 directed review: compact contract metadata, no decorative metric bars. */
.case-head-meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;color:var(--text-secondary,#64748b);font-size:13px;line-height:1.6}
.ranking-config-state{font-size:13px;color:var(--text-secondary,#64748b);margin:12px 0 0}
.trend-row{padding:14px 0;border-bottom:1px solid var(--border,#e5e9ef)}
.trend-row:last-child{border-bottom:0}