:root {
  --bg: #edf6fb;
  --panel: rgba(255, 255, 255, 0.78);
  --panel-strong: rgba(255, 255, 255, 0.96);
  --text: #0f172a;
  --muted: #64748b;
  --line: rgba(148, 163, 184, 0.24);
  --blue: #0ea5e9;
  --blue-strong: #2563eb;
  --green: #22c55e;
  --amber: #f59e0b;
  --red: #ef4444;
  --shadow: 0 22px 70px rgba(15, 23, 42, 0.12);
  --shadow-soft: 0 12px 34px rgba(15, 23, 42, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: linear-gradient(135deg, #e2f4ff 0%, #f8fbff 46%, #e8fff5 100%);
}

body.report-embedded {
  background: transparent;
}

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

button {
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

button:hover {
  transform: translateY(-1px);
}

.report-shell {
  width: calc(100vw - 20px);
  max-width: none;
  margin: 10px auto 28px;
}

body.report-embedded .report-shell {
  width: 100%;
  margin: 0;
}

body.report-embedded #btn-toggle-theme,
body.report-embedded #btn-toggle-theme-detail {
  display: none !important;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.page-hero,
.detail-header,
.glass-panel,
.period-card,
.modal-card,
.performance-card,
.closed-banner {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.page-hero,
.detail-header {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 26px;
  border-radius: 22px;
}

.page-hero::before,
.detail-header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(14, 165, 233, 0.10), transparent 44%, rgba(34, 197, 94, 0.08));
}

.eyebrow,
.section-head span {
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

.page-hero h1,
.detail-header h1 {
  position: relative;
  margin-bottom: 8px;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1;
  font-weight: 950;
}

.page-hero p,
.detail-header p,
.modal-card p {
  position: relative;
  margin-bottom: 0;
  color: var(--muted);
  font-weight: 750;
}

.hero-actions,
.detail-actions,
.toolbar-actions,
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.primary-btn,
.secondary-btn,
.ghost-btn,
.danger-btn,
.back-btn {
  min-height: 44px;
  border-radius: 14px;
  padding: 0 18px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.owner-only[hidden] {
  display: none !important;
}

.primary-btn {
  color: white;
  background: linear-gradient(135deg, var(--blue), var(--blue-strong));
  box-shadow: 0 14px 30px rgba(14, 165, 233, 0.28);
}

.secondary-btn {
  color: #075985;
  border-color: rgba(14, 165, 233, 0.24);
  background: rgba(255, 255, 255, 0.78);
}

.ghost-btn,
.back-btn {
  color: #334155;
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.68);
}

.danger-btn {
  color: white;
  background: linear-gradient(135deg, #f97316, var(--red));
  box-shadow: 0 14px 34px rgba(239, 68, 68, 0.24);
}

.subtle-danger {
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.24);
  background: rgba(254, 242, 242, 0.9);
  box-shadow: none;
}

.period-list-wrap {
  margin-top: 26px;
}

.section-head,
.modal-split-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.modal-split-head {
  padding-right: 58px;
}

.section-head h2,
.modal-card h2 {
  margin-bottom: 0;
  font-size: 26px;
  font-weight: 950;
}

.period-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(390px, 1fr));
  gap: 18px;
  contain: content;
}

.period-card {
  position: relative;
  padding: 20px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.period-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--green));
}

.period-card:hover {
  transform: translateY(-2px);
  border-color: rgba(14, 165, 233, 0.34);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.14);
}

.period-card.closed {
  background: rgba(248, 250, 252, 0.82);
}

.period-card-head,
.period-meta,
.period-actions,
.leader-banner,
.performance-table-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.period-card h3 {
  margin-bottom: 0;
  font-size: 26px;
  font-weight: 950;
}

.period-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 14px;
}

.period-stats span {
  min-height: 58px;
  padding: 10px;
  border: 1px solid rgba(203, 213, 225, 0.48);
  border-radius: 14px;
  color: var(--muted);
  background: rgba(248, 250, 252, 0.68);
  font-size: 12px;
  font-weight: 850;
}

.period-stats b {
  display: block;
  margin-bottom: 2px;
  color: var(--text);
  font-size: 20px;
  line-height: 1;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 10px;
  color: #075985;
  background: rgba(14, 165, 233, 0.14);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.5px;
}

.status-pill.closed {
  color: #166534;
  background: rgba(34, 197, 94, 0.16);
}

.period-meta {
  align-items: flex-start;
  margin: 14px 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.progress-track {
  height: 9px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(226, 232, 240, 0.95);
}

.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--blue));
}

.period-actions {
  justify-content: flex-start;
  margin-top: 16px;
  flex-wrap: wrap;
}

.detail-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.closed-banner {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 14px;
  color: #92400e;
  background: rgba(255, 251, 235, 0.92);
  font-weight: 850;
}

.closed-banner.active {
  display: flex;
}

.closed-banner button {
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 10px;
  padding: 9px 12px;
  color: #92400e;
  background: rgba(255, 255, 255, 0.7);
  font-weight: 900;
}

.detail-tabs {
  --tab-indicator-x: 0%;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 8px;
  width: min(100%, 1120px);
  margin: 18px 0 14px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 26px;
  overflow: hidden;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.18), transparent 32%, rgba(255, 255, 255, 0.26) 52%, transparent 72%),
    radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.95), transparent 28%),
    radial-gradient(circle at 78% 18%, rgba(186, 230, 253, 0.58), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(240, 249, 255, 0.46)),
    rgba(255, 255, 255, 0.52);
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(10px) saturate(1.12);
  -webkit-backdrop-filter: blur(10px) saturate(1.12);
  cursor: grab;
  touch-action: pan-y;
}

.detail-tabs::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 8px;
  z-index: 0;
  width: calc((100% - 16px) / 3);
  border-radius: 20px;
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 255, 255, 0.55), transparent 24%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.32), transparent 42%),
    linear-gradient(135deg, rgba(14, 165, 233, 0.98), rgba(37, 99, 235, 0.96)),
    var(--blue);
  box-shadow:
    0 18px 36px rgba(14, 165, 233, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    inset 0 -10px 22px rgba(15, 23, 42, 0.12);
  transform: translateX(var(--tab-indicator-x));
  transition: transform 420ms cubic-bezier(.16, 1, .3, 1), box-shadow 220ms ease;
  will-change: transform;
}

.detail-tabs::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(100deg, transparent 0 18%, rgba(255, 255, 255, 0.42) 36%, transparent 54%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 46%);
  opacity: 0.5;
  mix-blend-mode: screen;
}

.detail-tabs.is-dragging::before {
  transition: none;
  box-shadow:
    0 22px 44px rgba(14, 165, 233, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    inset 0 -12px 24px rgba(15, 23, 42, 0.14);
}

.detail-tabs.is-dragging {
  cursor: grabbing;
}

.tab-btn {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 56px;
  border: 0;
  border-radius: 20px;
  color: var(--muted);
  background: transparent;
  letter-spacing: 0;
  font-weight: 950;
  transform: none;
  text-shadow: none;
  transition: color 180ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1), text-shadow 180ms ease;
}

.tab-btn.active {
  color: white;
  background: transparent;
  text-shadow: 0 1px 12px rgba(15, 23, 42, 0.22);
}

.tab-btn.tab-preview {
  transform: scale(1.065);
  text-shadow: 0 1px 14px rgba(15, 23, 42, 0.24);
}

.detail-tabs.is-dragging .tab-btn.active {
  color: var(--muted);
}

.detail-tabs.is-dragging .tab-btn.tab-preview {
  color: #ffffff;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.toolbar {
  position: sticky;
  top: 8px;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr)) auto;
  gap: 12px;
  align-items: end;
  padding: 16px;
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 10px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.9);
  outline: 0;
}

input,
select {
  min-height: 42px;
  padding: 0 12px;
}

textarea {
  min-height: 260px;
  padding: 14px;
  resize: both;
  overflow: auto;
  min-width: min(260px, 100%);
  max-width: min(96vw, 1400px);
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(14, 165, 233, 0.62);
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.12);
}

.table-wrap {
  margin-top: 12px;
  overflow: auto;
  max-height: calc(100vh - 300px);
  min-height: 420px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-soft);
  contain: content;
  overscroll-behavior: contain;
}

.scroll-sync {
  overflow-x: auto;
  overflow-y: hidden;
  height: 16px;
  margin-top: 12px;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.58);
}

.scroll-sync div {
  height: 1px;
}

.records-table {
  min-width: 2800px;
  width: 2800px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 13px;
  contain: layout paint;
}

.records-table th,
.records-table td {
  border-right: 1px solid rgba(148, 163, 184, 0.46);
  border-bottom: 1px solid rgba(148, 163, 184, 0.42);
  padding: 0;
  background: white;
  vertical-align: middle;
}

.records-table th {
  position: sticky;
  top: 0;
  z-index: 8;
  color: #1f2937;
  background:
    linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%),
    #f8fbff;
  font-size: 11px;
  font-weight: 950;
  text-align: left;
  padding: 10px 9px;
  white-space: normal;
  line-height: 1.18;
  box-shadow: inset 0 -1px 0 rgba(30, 64, 175, 0.18);
}

.records-table tbody tr:not(.date-header) {
  height: 43px;
}

.records-table td.readonly-cell {
  padding: 0 10px;
}

.records-table .sticky-date,
.records-table .sticky-agent {
  position: sticky;
  z-index: 9;
}

.records-table .sticky-date {
  left: 0;
  width: 118px;
  min-width: 118px;
}

.records-table .sticky-agent {
  left: 118px;
  width: 224px;
  min-width: 224px;
  box-shadow: 8px 0 14px rgba(15, 23, 42, 0.04);
}

.records-table thead .sticky-date,
.records-table thead .sticky-agent {
  z-index: 12;
}

.records-table .date-header td {
  position: sticky;
  left: 0;
  z-index: 11;
  padding: 12px 18px;
  color: #ffffff !important;
  background:
    linear-gradient(135deg, #075985 0%, #0f72b5 54%, #0ea5e9 100%) !important;
  border-top: 3px solid #083344;
  border-bottom: 3px solid #38bdf8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(8, 47, 73, 0.42),
    0 6px 14px rgba(8, 47, 73, 0.16);
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0.1px;
  text-shadow: 0 1px 1px rgba(8, 47, 73, 0.36);
}

.records-table tr.waiting td {
  background: rgba(248, 251, 255, 0.98);
}

.records-table tr.inactive td {
  background: #f1f5f9;
  color: #64748b;
}

.records-table tbody tr:not(.date-header):hover td {
  background: #eef8ff;
}

.records-table tbody tr.waiting:not(.date-header):hover td {
  background: #eef8ff;
}

.records-table tbody tr:focus-within td {
  background: #ecf8ff;
}

.cell-input,
.cell-select {
  width: 100%;
  height: 42px;
  min-height: 42px;
  border: 0;
  border-radius: 0;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 750;
  background: transparent;
  box-shadow: none;
  transition: background 90ms ease, box-shadow 90ms ease;
}

.cell-input:focus,
.cell-select:focus {
  border-color: transparent;
  background: #ffffff;
  box-shadow: inset 0 0 0 2px rgba(14, 165, 233, 0.92), 0 0 0 2px rgba(14, 165, 233, 0.08);
}

.dirty-cell {
  box-shadow: inset 0 -3px 0 rgba(245, 158, 11, 0.72);
}

.save-status {
  position: sticky;
  top: 82px;
  z-index: 25;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin-top: 12px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  font-weight: 900;
}

.save-status.dirty {
  color: #92400e;
  border-color: rgba(245, 158, 11, 0.32);
  background: rgba(255, 251, 235, 0.9);
}

.cell-input[inputmode="decimal"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cell-input:disabled,
.cell-select:disabled {
  color: #94a3b8;
  background: transparent;
}

.save-flash {
  animation: saveFlash 1s ease;
}

@keyframes saveFlash {
  0% { box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.36); border-color: #4caf50; }
  100% { box-shadow: none; }
}

.danger-zone {
  display: flex;
  justify-content: flex-end;
  margin: 20px 0 8px;
}

.leader-banner {
  align-items: center;
  justify-content: flex-start;
  padding: 22px;
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 16px;
  background: #e8f5e9;
  box-shadow: 0 14px 34px rgba(34, 197, 94, 0.12);
}

.leader-banner strong {
  display: block;
  font-size: 28px;
  font-weight: 950;
}

.performance-grid {
  display: grid;
  gap: 16px;
}

.performance-card {
  border-radius: 16px;
  overflow: hidden;
}

.performance-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.performance-table th,
.performance-table td {
  padding: 13px 12px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.82);
  text-align: left;
  font-size: 12px;
}

.performance-table th {
  color: #475569;
  background: #f8fafc;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.performance-table tr.leader-row td {
  background: #e8f5e9;
}

.score-bar {
  min-width: 120px;
}

.score-bar span {
  display: block;
  margin-bottom: 4px;
  font-weight: 950;
}

.score-bar i {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.92);
}

.score-bar em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--green));
}

.info-card {
  padding: 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
}

.info-card h3 {
  margin-bottom: 12px;
}

.info-card ul {
  margin: 0;
  padding-left: 20px;
  color: #334155;
  font-weight: 750;
  line-height: 1.8;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.46);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.modal.active {
  display: flex;
}

.modal-card {
  position: relative;
  width: min(920px, 96vw);
  max-height: 90vh;
  overflow: auto;
  padding: 24px;
  border-radius: 18px;
  background: var(--panel-strong);
}

.modal-card.small {
  width: min(520px, 94vw);
}

.modal-card.wide,
.snapshot-card {
  width: min(1180px, 96vw);
}

.modal-card.wide {
  max-height: calc(100vh - 48px);
}

.agent-manager-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.agent-manager-card .modal-split-head,
.agent-manager-card .agent-form,
.agent-manager-card .agent-search-row {
  flex: 0 0 auto;
}

.agent-manager-card .agent-list {
  flex: 1 1 auto;
  min-height: 360px;
  max-height: none;
  transform: translateZ(0);
  will-change: scroll-position;
}

.snapshot-card {
  display: flex;
  flex-direction: column;
  width: min(1500px, 96vw);
  max-height: calc(100vh - 48px);
  overflow: hidden;
}

.paste-card {
  width: min(920px, 96vw);
}

.excel-import-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin: 18px 0 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.74);
}

.excel-import-box span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--text);
  font-size: 28px;
  line-height: 1;
}

.form-grid,
.agent-form,
.access-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.agent-form {
  grid-template-columns: 1.3fr 1fr 0.8fr 0.5fr auto auto;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.74);
}

.agent-search-row {
  display: grid;
  grid-template-columns: minmax(280px, 420px) auto;
  align-items: end;
  gap: 14px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(14, 165, 233, 0.16);
  border-radius: 16px;
  background:
    radial-gradient(circle at 0% 0%, rgba(14, 165, 233, 0.10), transparent 34%),
    rgba(248, 250, 252, 0.82);
}

.agent-search-row span {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  border: 1px solid rgba(14, 165, 233, 0.16);
  border-radius: 999px;
  padding: 0 14px;
  color: #075985;
  background: rgba(224, 242, 254, 0.7);
  font-size: 12px;
  font-weight: 950;
}

.access-form {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.74);
}

.report-access-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.report-access-card h2,
.report-access-card label,
.report-access-card button,
.report-access-card select,
.report-access-card input {
  letter-spacing: 0;
  text-transform: none;
}

.report-access-card label {
  color: #52647a;
  font-size: 12px;
  font-weight: 780;
}

.report-access-card .primary-btn,
.report-access-card .secondary-btn,
.report-access-card .ghost-btn {
  min-height: 40px;
  border-radius: 999px;
  font-weight: 820;
}

.report-access-card .modal-split-head,
.report-access-card .access-toolbar,
.report-access-card .access-filter-row,
.report-access-card .access-summary,
.report-access-card .access-actions {
  flex: 0 0 auto;
}

.access-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.74);
  flex-wrap: wrap;
}

.access-toolbar .active {
  color: white;
  border-color: var(--blue);
  background: linear-gradient(135deg, var(--blue), var(--blue-strong));
}

.access-filter-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 220px;
  gap: 12px;
  margin-top: 12px;
}

.access-summary {
  min-height: 34px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.access-summary strong {
  color: var(--text);
}

.toggle-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}

.toggle-line input {
  width: auto;
  min-height: auto;
}

.agent-list,
.access-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.agent-list {
  max-height: min(58vh, 720px);
  overflow-y: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
  contain: strict;
}

.agent-list:not(.virtualized) {
  display: grid;
  gap: 10px;
  align-content: start;
}

.agent-list[aria-busy="true"] {
  cursor: progress;
}

.access-list {
  flex: 1 1 auto;
  min-height: 300px;
  max-height: min(58vh, 720px);
  overflow-y: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.agent-row,
.access-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 1fr 100px 92px auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
}

.agent-row,
.access-row,
.period-card {
  content-visibility: auto;
  contain-intrinsic-size: 92px;
}

.access-row {
  grid-template-columns: 34px minmax(0, 1fr) 120px;
}

.access-row input {
  width: 20px;
  min-height: 20px;
  accent-color: var(--blue);
}

.access-person {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.access-avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: #0284c7;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(34, 197, 94, 0.12));
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.access-person > div {
  min-width: 0;
}

.agent-row.passive,
.access-row.passive {
  opacity: 0.55;
}

.agent-row strong,
.agent-row span,
.access-row strong,
.access-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.access-row div {
  display: grid;
  gap: 3px;
}

.access-row span:not(.status-pill) {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.snapshot-content {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 2px;
}

.snapshot-overview {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.snapshot-overview article {
  min-height: 84px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(239, 248, 255, 0.76));
  box-shadow: var(--shadow-soft);
}

.snapshot-overview span,
.snapshot-panel-head span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.snapshot-overview strong {
  display: block;
  margin-top: 8px;
  overflow: hidden;
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.snapshot-tabs {
  display: inline-flex;
  align-self: flex-start;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.8);
}

.snapshot-tab {
  min-width: 150px;
  min-height: 40px;
  border: 0;
  border-radius: 11px;
  color: var(--muted);
  background: transparent;
  font-weight: 950;
}

.snapshot-tab.active {
  color: white;
  background: linear-gradient(135deg, var(--blue), var(--blue-strong));
  box-shadow: 0 10px 24px rgba(14, 165, 233, 0.22);
}

.snapshot-panel {
  display: none;
  min-height: 0;
  flex: 1;
}

.snapshot-panel.active {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.snapshot-panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.snapshot-panel-head h3 {
  margin-bottom: 4px;
  font-size: 20px;
}

.snapshot-panel-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.snapshot-table-wrap {
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
}

.snapshot-full-table {
  max-height: min(58vh, 680px);
  flex: 1;
}

.snapshot-table {
  min-width: 1320px;
  width: 100%;
  border-collapse: collapse;
}

.snapshot-performance-table {
  min-width: 980px;
}

.snapshot-table th,
.snapshot-table td {
  border-bottom: 1px solid rgba(226, 232, 240, 0.82);
  padding: 10px;
  font-size: 12px;
  text-align: left;
}

.snapshot-table th,
.snapshot-performance-table th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.snapshot-table tbody tr,
.snapshot-performance-table tbody tr {
  content-visibility: auto;
  contain-intrinsic-size: 44px;
}

.empty-state {
  padding: 34px;
  border: 1px dashed rgba(148, 163, 184, 0.5);
  border-radius: 16px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.58);
  font-weight: 850;
  text-align: center;
}

body.report-access-denied .report-shell {
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.access-denied-panel {
  width: min(100%, 520px);
  margin: 0 auto;
  padding: 42px 32px;
  text-align: center;
  border-radius: 24px;
  border: 1px solid rgba(239, 68, 68, 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(254, 242, 242, 0.72));
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.access-denied-icon {
  font-size: 42px;
  margin-bottom: 14px;
}

.access-denied-panel h1 {
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 950;
  color: #991b1b;
}

.access-denied-panel p {
  margin: 0 0 18px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
}

body.report-embedded.report-access-denied {
  background: transparent;
}

body.report-embedded.report-access-denied .access-denied-panel {
  box-shadow: none;
  border-style: dashed;
}

body.report-dark .access-denied-panel {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(69, 10, 10, 0.28));
  border-color: rgba(248, 113, 113, 0.24);
}

body.report-dark .access-denied-panel h1 {
  color: #fca5a5;
}

body.report-dark .access-denied-panel p {
  color: #cbd5e1;
}

.toast-root {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 3000;
  display: grid;
  gap: 10px;
}

.toast {
  min-width: 280px;
  max-width: 420px;
  padding: 13px 15px;
  border-radius: 14px;
  color: white;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.22);
  font-size: 13px;
  font-weight: 900;
  animation: toastIn 180ms ease;
}

.toast.success { background: #16a34a; }
.toast.error { background: #dc2626; }
.toast.warning { background: #d97706; }
.toast.info { background: #0284c7; }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  color: var(--text);
  background: rgba(248, 250, 252, 0.76);
  backdrop-filter: blur(10px);
  font-weight: 900;
}

.loading-overlay.active {
  display: flex;
}

.spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 4px solid rgba(14, 165, 233, 0.18);
  border-top-color: var(--blue);
  animation: spin 780ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

body.report-dark {
  --bg: #07111f;
  --panel: rgba(15, 23, 42, 0.78);
  --panel-strong: rgba(15, 23, 42, 0.97);
  --text: #e5efff;
  --muted: #9aacc7;
  --line: rgba(148, 163, 184, 0.22);
  --blue: #38bdf8;
  --blue-strong: #2563eb;
  --green: #34d399;
  --shadow: 0 24px 72px rgba(0, 0, 0, 0.34);
  --shadow-soft: 0 14px 40px rgba(0, 0, 0, 0.22);
  color-scheme: dark;
  background: linear-gradient(135deg, #06101e 0%, #0f172a 52%, #0c241d 100%);
}

body.report-dark .page-hero::before,
body.report-dark .detail-header::before {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.16), transparent 44%, rgba(52, 211, 153, 0.12));
}

body.report-dark .primary-btn {
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.26);
}

body.report-dark .secondary-btn,
body.report-dark .ghost-btn,
body.report-dark .back-btn {
  color: #dbeafe;
  border-color: rgba(125, 211, 252, 0.22);
  background: rgba(15, 23, 42, 0.72);
}

body.report-dark .subtle-danger {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(127, 29, 29, 0.28);
}

body.report-dark .period-card.closed,
body.report-dark .period-stats span,
body.report-dark .detail-tabs,
body.report-dark .snapshot-tabs,
body.report-dark .info-card,
body.report-dark .agent-form,
body.report-dark .agent-search-row,
body.report-dark .access-form,
body.report-dark .access-toolbar,
body.report-dark .excel-import-box,
body.report-dark .agent-row,
body.report-dark .access-row,
body.report-dark .snapshot-overview article,
body.report-dark .empty-state,
body.report-dark .save-status {
  background: rgba(15, 23, 42, 0.72);
}

body.report-dark .agent-search-row span {
  color: #bae6fd;
  border-color: rgba(56, 189, 248, 0.24);
  background: rgba(14, 165, 233, 0.14);
}

body.report-dark .access-avatar {
  color: #7dd3fc;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(34, 197, 94, 0.14));
}

body.report-dark .period-stats span b,
body.report-dark .period-card h3,
body.report-dark .modal-card h2,
body.report-dark .section-head h2,
body.report-dark .access-summary strong {
  color: var(--text);
}

body.report-dark .progress-track,
body.report-dark .scroll-sync,
body.report-dark .score-bar i {
  background: rgba(51, 65, 85, 0.9);
}

body.report-dark input,
body.report-dark select,
body.report-dark textarea {
  color: var(--text);
  border-color: rgba(148, 163, 184, 0.34);
  background: rgba(15, 23, 42, 0.82);
}

body.report-dark .cell-input,
body.report-dark .cell-select {
  color: var(--text);
  border-color: transparent;
  background: transparent;
}

body.report-dark input:focus,
body.report-dark select:focus,
body.report-dark textarea:focus {
  border-color: rgba(56, 189, 248, 0.7);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.14);
}

body.report-dark .cell-input:focus,
body.report-dark .cell-select:focus {
  border-color: transparent;
  background: #101c31;
  box-shadow: inset 0 0 0 2px rgba(56, 189, 248, 0.9), 0 0 0 2px rgba(56, 189, 248, 0.12);
}

body.report-dark input::placeholder,
body.report-dark textarea::placeholder {
  color: #7c8da8;
}

body.report-dark .table-wrap,
body.report-dark .snapshot-table-wrap {
  background: rgba(8, 15, 28, 0.94);
  border-color: rgba(148, 163, 184, 0.24);
}

body.report-dark .records-table th,
body.report-dark .performance-table th {
  color: #d9e7ff;
  background: #111c2f;
}

body.report-dark .records-table td,
body.report-dark .performance-table td,
body.report-dark .snapshot-table th,
body.report-dark .snapshot-table td,
body.report-dark .snapshot-performance-table td {
  color: #e5efff;
  border-color: rgba(148, 163, 184, 0.16);
  background: #0f172a;
}

body.report-dark .snapshot-panel-head p,
body.report-dark .snapshot-overview span,
body.report-dark .snapshot-panel-head span {
  color: #9aacc7;
}

body.report-dark .snapshot-overview strong {
  color: var(--text);
}

body.report-dark .records-table .sticky-agent {
  box-shadow: 8px 0 18px rgba(0, 0, 0, 0.18);
}

body.report-dark .records-table .date-header td {
  color: #ffffff !important;
  background:
    linear-gradient(135deg, #082f49 0%, #075985 54%, #0ea5e9 100%) !important;
  border-top-color: #020617;
  border-bottom-color: #38bdf8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(2, 6, 23, 0.66),
    0 6px 14px rgba(2, 6, 23, 0.28);
}

body.report-dark .records-table tr.waiting td {
  background: #111827;
}

body.report-dark .records-table tr.inactive td {
  color: #8da0bd;
  background: #172033;
}

body.report-dark .records-table tbody tr:not(.date-header):hover td,
body.report-dark .records-table tbody tr.waiting:not(.date-header):hover td {
  background: #142238;
}

body.report-dark .records-table tbody tr:focus-within td {
  background: #13243c;
}

body.report-dark .cell-input:disabled,
body.report-dark .cell-select:disabled {
  color: #71819b;
  background: transparent;
}

body.report-dark .dirty-cell {
  border-color: transparent;
  box-shadow: inset 0 -3px 0 rgba(251, 191, 36, 0.78);
}

body.report-dark .save-status.dirty {
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.36);
  background: rgba(120, 53, 15, 0.32);
}

body.report-dark .closed-banner {
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(120, 53, 15, 0.28);
}

body.report-dark .closed-banner button,
body.report-dark .modal-close {
  color: var(--text);
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.78);
}

body.report-dark .leader-banner,
body.report-dark .performance-table tr.leader-row td {
  color: #dcfce7;
  background: rgba(20, 83, 45, 0.46);
  border-color: rgba(74, 222, 128, 0.24);
}

body.report-dark .info-card ul {
  color: #cbd5e1;
}

body.report-dark .loading-overlay {
  background: rgba(2, 6, 23, 0.78);
}

@media (max-width: 980px) {
  body {
    min-height: 100dvh;
    overflow-x: hidden;
  }

  .report-shell {
    width: 100vw;
    margin: 0;
    padding: 10px;
  }

  .page-hero,
  .closed-banner,
  .section-head,
  .modal-split-head {
    flex-direction: column;
    align-items: stretch;
  }

  .detail-header,
  .period-list,
  .period-stats,
  .snapshot-overview {
    grid-template-columns: 1fr;
  }

  .toolbar,
  .form-grid,
  .agent-form,
  .agent-row,
  .access-form,
  .access-filter-row,
  .access-row,
  .excel-import-box {
    grid-template-columns: 1fr;
  }

  .hero-actions,
  .detail-actions,
  .toolbar-actions,
  .modal-actions {
    justify-content: flex-start;
  }

  .page-hero,
  .detail-header,
  .toolbar {
    border-radius: 18px;
  }

  .page-hero h1,
  .detail-header h1 {
    font-size: 36px;
  }

  .detail-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(170px, 1fr));
    width: 100%;
    overflow-x: auto;
  }

  .tab-btn {
    min-width: 0;
  }

  .table-wrap {
    min-height: 55dvh;
    max-height: 62dvh;
    border-radius: 16px;
  }

  .modal {
    align-items: flex-start;
    overflow-y: auto;
    padding: 10px;
  }

  .modal-card,
  .modal-card.small,
  .modal-card.wide,
  .snapshot-card,
  .paste-card {
    width: 100%;
    max-height: none;
    padding: 20px;
  }

  .snapshot-card {
    overflow: auto;
  }

  .snapshot-tabs {
    width: 100%;
  }

  .snapshot-tab {
    min-width: 0;
    flex: 1;
  }

  .snapshot-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Yönetici paneli embed entegrasyonu */
body.report-embedded {
  background: transparent !important;
  color: var(--text);
}

body.report-embedded .page-hero,
body.report-embedded .detail-header,
body.report-embedded .glass-panel,
body.report-embedded .period-card,
body.report-embedded .performance-card,
body.report-embedded .closed-banner {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.08);
}

body.report-embedded.report-dark .page-hero,
body.report-embedded.report-dark .detail-header,
body.report-embedded.report-dark .glass-panel,
body.report-embedded.report-dark .period-card,
body.report-embedded.report-dark .performance-card,
body.report-embedded.report-dark .closed-banner {
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.24);
}

body.report-dark .glass-panel,
body.report-dark .performance-card,
body.report-dark .section-head,
body.report-dark .modal-split-head {
  color: var(--text);
  background: rgba(15, 23, 42, 0.78);
  border-color: rgba(148, 163, 184, 0.2);
}

body.report-dark label,
body.report-dark .field-label,
body.report-dark .metric-label,
body.report-dark .tab-btn {
  color: #cbd5e1;
}

body.report-dark .tab-btn.active,
body.report-dark .snapshot-tabs button.active {
  color: #7dd3fc;
  background: transparent;
  border-color: rgba(56, 189, 248, 0.3);
}

body.report-dark .records-table tbody tr:not(.date-header) td:first-child,
body.report-dark .performance-table tbody tr td:first-child {
  color: #e5efff;
}

body.report-dark .modal-card {
  background: rgba(15, 23, 42, 0.96);
  border-color: rgba(148, 163, 184, 0.22);
}

body.report-dark .loading-overlay .loader-card,
body.report-dark .toast {
  color: #e5efff;
  background: rgba(15, 23, 42, 0.94);
  border-color: rgba(148, 163, 184, 0.22);
}

/* Günlük rapor performans katmanı */
.table-wrap,
.agent-list,
.access-list {
  scrollbar-gutter: stable;
  scroll-behavior: auto;
  transform: translateZ(0);
}

.records-table th,
.records-table td,
.records-table tbody tr,
.cell-input,
.cell-select,
.agent-row,
.access-row {
  transition: none !important;
}

.agent-row,
.access-row {
  contain: layout paint style;
}

.records-table tbody[aria-busy="true"] .cell-input,
.records-table tbody[aria-busy="true"] .cell-select {
  pointer-events: none;
}

body.report-embedded .table-wrap,
body.report-embedded .agent-list,
body.report-embedded .access-list {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}

@media (max-width: 620px) {
  .primary-btn,
  .secondary-btn,
  .ghost-btn,
  .danger-btn,
  .back-btn {
    width: 100%;
    justify-content: center;
  }

  .period-list {
    grid-template-columns: 1fr;
  }

  .period-stats {
    grid-template-columns: 1fr;
  }
}

/* 2026 operasyon merkezi uyumlu yenileme */
body.report-dark {
  --bg: #0f172a;
  --panel: #111c31;
  --panel-strong: #17233a;
  --panel-soft: #0b1222;
  --text: #f8fafc;
  --muted: #a8b4c7;
  --line: #2d3b52;
  --blue: #38bdf8;
  --blue-strong: #1476d4;
  --green: #0f9f6e;
  --amber: #f59e0b;
  --red: #dc2626;
  --shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
  --shadow-soft: 0 12px 24px rgba(0, 0, 0, 0.22);
}

body.report-dark {
  min-height: 100vh;
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(20, 118, 212, 0.14), rgba(20, 118, 212, 0.04) 34%, transparent 62%),
    linear-gradient(315deg, rgba(15, 159, 110, 0.11), rgba(15, 159, 110, 0.03) 30%, transparent 60%),
    var(--bg);
}

body.report-dark .report-shell {
  width: calc(100vw - 20px);
  max-width: none;
  margin: 10px auto 28px;
  padding: 0;
}

body.report-dark .page-hero,
body.report-dark .detail-header,
body.report-dark .glass-panel,
body.report-dark .period-card,
body.report-dark .modal-card,
body.report-dark .performance-card,
body.report-dark .closed-banner {
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(17, 28, 49, 0.98), rgba(11, 18, 34, 0.94)),
    var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.report-dark .page-hero,
body.report-dark .detail-header {
  padding: 18px 20px;
}

body.report-dark .page-hero::before,
body.report-dark .detail-header::before,
body.report-dark .period-card::before {
  background: linear-gradient(180deg, #1476d4, #38bdf8, #0f9f6e);
  inset: 0 auto 0 0;
  width: 5px;
  height: auto;
}

body.report-dark .page-hero h1,
body.report-dark .detail-header h1 {
  margin-bottom: 6px;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.08;
}

body.report-dark .page-hero p,
body.report-dark .detail-header p,
body.report-dark .modal-card p {
  color: var(--muted);
}

body.report-dark .eyebrow,
body.report-dark .section-head span,
body.report-dark .op-kicker {
  color: var(--blue);
  letter-spacing: 0;
}

body.report-dark .primary-btn,
body.report-dark .secondary-btn,
body.report-dark .ghost-btn,
body.report-dark .danger-btn,
body.report-dark .back-btn,
body.report-dark .tab-btn,
body.report-dark .snapshot-tab,
body.report-dark .closed-banner button,
body.report-dark .modal-close {
  min-height: 40px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 850;
  box-shadow: none;
}

body.report-dark .primary-btn {
  color: #ffffff;
  border-color: rgba(56, 189, 248, 0.3);
  background: linear-gradient(135deg, #1476d4, #0ea5e9);
}

body.report-dark .secondary-btn,
body.report-dark .ghost-btn,
body.report-dark .back-btn,
body.report-dark .tab-btn,
body.report-dark .snapshot-tab,
body.report-dark .closed-banner button {
  color: var(--text);
  border-color: var(--line);
  background: rgba(15, 23, 42, 0.72);
}

body.report-dark .secondary-btn:hover,
body.report-dark .ghost-btn:hover,
body.report-dark .back-btn:hover,
body.report-dark .tab-btn:hover,
body.report-dark .snapshot-tab:hover {
  border-color: rgba(56, 189, 248, 0.42);
  background: rgba(20, 118, 212, 0.16);
}

body.report-dark .danger-btn {
  color: #ffffff;
  border-color: rgba(239, 68, 68, 0.32);
  background: #dc2626;
}

body.report-dark .subtle-danger {
  color: #fecaca;
  border-color: rgba(239, 68, 68, 0.28);
  background: rgba(127, 29, 29, 0.28);
}

body.report-dark input,
body.report-dark select,
body.report-dark textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(11, 18, 34, 0.94)),
    var(--panel-soft);
  outline: none;
}

body.report-dark input:focus,
body.report-dark select:focus,
body.report-dark textarea:focus {
  border-color: rgba(56, 189, 248, 0.72);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
}

body.report-dark .period-control-band {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  margin: 16px 0 12px;
  padding: 14px;
}

body.report-dark .period-picker,
body.report-dark .toolbar label,
body.report-dark .agent-search-row label,
body.report-dark .agent-form label,
body.report-dark .form-grid label,
body.report-dark .access-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

body.report-dark .report-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

body.report-dark .report-summary-strip article,
body.report-dark .period-stats span,
body.report-dark .snapshot-overview article,
body.report-dark .performance-metrics article,
body.report-dark .metric-card {
  min-height: 58px;
  border: 1px solid rgba(125, 211, 252, 0.14);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.64);
}

body.report-dark .report-summary-strip span,
body.report-dark .period-stats span,
body.report-dark .snapshot-overview span,
body.report-dark .performance-metrics span,
body.report-dark .metric-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

body.report-dark .report-summary-strip strong,
body.report-dark .period-stats b,
body.report-dark .snapshot-overview strong,
body.report-dark .performance-metrics strong,
body.report-dark .metric-card strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 19px;
  line-height: 1;
}

body.report-dark .toolbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr)) auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
}

body.report-dark .toolbar-actions {
  justify-content: flex-end;
}

body.report-dark .save-status {
  position: static;
  min-height: 34px;
  margin: 0 0 10px;
  border-radius: 8px;
  color: var(--muted);
  background: rgba(15, 23, 42, 0.7);
}

body.report-dark .save-status.dirty {
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.36);
  background: rgba(120, 53, 15, 0.32);
}

body.report-dark .table-wrap {
  min-height: 50vh;
  max-height: calc(100vh - 360px);
  margin-top: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  box-shadow: var(--shadow-soft);
  overflow: auto;
  overscroll-behavior: contain;
}

body.report-dark .scroll-sync {
  height: 14px;
  margin: 10px 0;
  border: 1px solid rgba(125, 211, 252, 0.12);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
}

body.report-dark .records-table {
  border-collapse: separate;
  border-spacing: 0;
  background: var(--panel-soft);
}

body.report-dark .records-table th,
body.report-dark .records-table td {
  border-right: 1px solid rgba(45, 59, 82, 0.96);
  border-bottom: 1px solid rgba(45, 59, 82, 0.96);
  background: #0f172a;
}

body.report-dark .records-table th {
  position: sticky;
  top: 0;
  z-index: 18;
  color: #dbeafe;
  background:
    linear-gradient(135deg, rgba(17, 28, 49, 0.98), rgba(11, 18, 34, 0.98)),
    #111c31;
  font-size: 11px;
  font-weight: 900;
}

body.report-dark .records-table .sticky-date,
body.report-dark .records-table .sticky-agent {
  position: sticky;
  background: #111c31;
}

body.report-dark .records-table .sticky-date {
  left: 0;
  z-index: 20;
}

body.report-dark .records-table .sticky-agent {
  left: 118px;
  z-index: 20;
  box-shadow: 10px 0 16px rgba(0, 0, 0, 0.22);
}

body.report-dark .records-table thead .sticky-date,
body.report-dark .records-table thead .sticky-agent {
  z-index: 28;
}

body.report-dark .records-table .date-header td {
  position: sticky;
  left: 0;
  z-index: 24;
  color: #ffffff !important;
  background:
    linear-gradient(135deg, #082f49 0%, #075985 54%, #0ea5e9 100%) !important;
  border-top-color: #020617;
  border-bottom-color: #38bdf8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(2, 6, 23, 0.66),
    0 6px 14px rgba(2, 6, 23, 0.28);
}

body.report-dark .records-table tr.waiting td {
  background: rgba(17, 28, 49, 0.76);
}

body.report-dark .records-table tr.inactive td {
  color: #94a3b8;
  background: rgba(11, 18, 34, 0.92);
}

body.report-dark .records-table tbody tr:not(.date-header):hover td,
body.report-dark .records-table tbody tr:focus-within td {
  background: rgba(20, 118, 212, 0.13);
}

body.report-dark .cell-input,
body.report-dark .cell-select {
  height: 42px;
  min-height: 42px;
  border: 0;
  border-radius: 0;
  color: var(--text);
  background: transparent;
}

body.report-dark .cell-input:focus,
body.report-dark .cell-select:focus {
  background: rgba(2, 6, 23, 0.72);
  box-shadow: inset 0 0 0 2px rgba(56, 189, 248, 0.92);
}

body.report-dark .dirty-cell {
  box-shadow: inset 0 -3px 0 rgba(245, 158, 11, 0.84);
}

body.report-dark .report-table-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.72);
}

body.report-dark .detail-tabs {
  margin-top: 14px;
}

body.report-dark .tab-btn.active,
body.report-dark .snapshot-tabs button.active {
  color: #ffffff;
  background: transparent;
  border-color: rgba(56, 189, 248, 0.3);
}

body.report-dark .period-list-wrap {
  margin-top: 18px;
}

body.report-dark .period-list {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}

body.report-dark .period-card {
  padding: 16px;
}

body.report-dark .period-card h3 {
  font-size: 21px;
}

body.report-dark .progress-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.86);
}

body.report-dark .progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1476d4, #38bdf8, #0f9f6e);
}

body.report-dark .modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 23, 0.62);
}

body.report-dark .modal-card {
  max-height: min(86vh, 900px);
  overflow: auto;
}

body.report-dark .agent-form,
body.report-dark .agent-search-row,
body.report-dark .access-form,
body.report-dark .access-toolbar {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.64);
}

body.report-dark .agent-list {
  position: relative;
  max-height: min(56vh, 680px);
  min-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
  contain: strict;
}

body.report-dark .agent-list:not(.virtualized) {
  display: grid;
  gap: 10px;
  align-content: start;
}

body.report-dark .agent-list.virtualized {
  display: block;
}

body.report-dark .agent-virtual-spacer {
  position: relative;
  min-height: 100%;
}

body.report-dark .agent-virtual-window {
  position: absolute;
  inset: 0 0 auto 0;
  will-change: transform;
}

body.report-dark .agent-virtual-window .agent-row {
  height: 74px;
  margin-bottom: 8px;
  content-visibility: visible;
}

body.report-dark .agent-row {
  grid-template-columns: minmax(0, 1.3fr) minmax(110px, 0.8fr) 82px 82px auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.68);
}

body.report-dark .access-row {
  grid-template-columns: 34px minmax(0, 1fr) 120px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.68);
}

body.report-dark .agent-row.passive,
body.report-dark .access-row.passive {
  opacity: 0.58;
}

body.report-dark .toast {
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #111c31;
}

body.report-dark .performance-breakdown {
  display: grid;
  gap: 12px;
}

body.report-dark .metric-agent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}

body.report-dark .metric-agent-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: rgba(15, 23, 42, 0.58);
}

body.report-dark .metric-agent-card.leader-row {
  border-color: rgba(52, 211, 153, 0.3);
  background: rgba(6, 78, 59, 0.22);
}

body.report-dark .metric-agent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body.report-dark .metric-agent-head strong {
  color: var(--text);
}

body.report-dark .metric-agent-head span {
  color: #7dd3fc;
  font-size: 12px;
  font-weight: 900;
}

body.report-dark .metric-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

body.report-dark .metric-card small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

body.report-dark .loading-overlay {
  background: rgba(2, 6, 23, 0.74);
}

@media (max-width: 980px) {
  body.report-dark .report-shell {
    width: 100%;
    padding: 10px;
  }

  body.report-dark .period-control-band,
  body.report-dark .toolbar {
    grid-template-columns: 1fr;
  }

  body.report-dark .report-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.report-dark .report-table-actions {
    align-items: stretch;
    flex-direction: column;
  }

  body.report-dark .table-wrap {
    max-height: 62vh;
  }
}

.period-control-band {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  margin: 16px 0 12px;
  padding: 14px;
}

.period-picker {
  display: grid;
  gap: 6px;
}

.report-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.report-summary-strip article {
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--panel);
}

.report-summary-strip span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.report-summary-strip strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 19px;
  line-height: 1;
}

.report-table-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.agent-list.virtualized {
  position: relative;
  display: block;
}

.agent-virtual-spacer {
  position: relative;
  min-height: 100%;
}

.agent-virtual-window {
  position: absolute;
  inset: 0 0 auto 0;
  transform: translateZ(0);
  will-change: transform;
}

.agent-virtual-window .agent-row {
  height: 74px;
  margin-bottom: 8px;
  content-visibility: visible;
  contain: layout paint style;
}

body.report-dark .agent-manager-card,
.agent-manager-card {
  overflow: hidden;
}

body.report-dark .agent-manager-card .agent-list {
  flex: 1 1 auto;
  max-height: none;
  contain: strict;
  transform: translateZ(0);
  will-change: scroll-position;
}

@media (max-width: 980px) {
  .period-control-band {
    grid-template-columns: 1fr;
  }

  .report-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-table-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

body.report-embedded.report-dark .report-shell {
  width: 100%;
  margin: 0;
  padding: 0;
}

.records-table tbody tr.shift-plan-early td {
  color: #064e3b !important;
  background: #dcfce7 !important;
}

.records-table tbody tr.shift-plan-day td {
  color: #1e3a8a !important;
  background: #dbeafe !important;
}

.records-table tbody tr.shift-plan-mid td {
  color: #7c2d12 !important;
  background: #ffedd5 !important;
}

.records-table tbody tr.shift-plan-late td {
  color: #713f12 !important;
  background: #fef9c3 !important;
}

.records-table tbody tr.shift-plan-night td {
  color: #4a2c16 !important;
  background: #ead7c0 !important;
}

.records-table tbody tr.shift-plan-flag td {
  color: #ffffff !important;
  background: #dc2626 !important;
}

.records-table tbody tr.shift-plan-early:hover td,
.records-table tbody tr.shift-plan-early:focus-within td {
  background: #bbf7d0 !important;
}

.records-table tbody tr.shift-plan-day:hover td,
.records-table tbody tr.shift-plan-day:focus-within td {
  background: #bfdbfe !important;
}

.records-table tbody tr.shift-plan-mid:hover td,
.records-table tbody tr.shift-plan-mid:focus-within td {
  background: #fed7aa !important;
}

.records-table tbody tr.shift-plan-late:hover td,
.records-table tbody tr.shift-plan-late:focus-within td {
  background: #fef08a !important;
}

.records-table tbody tr.shift-plan-night:hover td,
.records-table tbody tr.shift-plan-night:focus-within td {
  background: #dfc3a0 !important;
}

.records-table tbody tr.shift-plan-flag:hover td,
.records-table tbody tr.shift-plan-flag:focus-within td {
  background: #b91c1c !important;
}

.records-table tbody tr[class*="shift-plan-"] .cell-input,
.records-table tbody tr[class*="shift-plan-"] .cell-select {
  color: inherit;
}

.records-table tbody tr.shift-plan-flag .cell-input,
.records-table tbody tr.shift-plan-flag .cell-select,
.records-table tbody tr.shift-plan-flag .cell-input:disabled,
.records-table tbody tr.shift-plan-flag .cell-select:disabled {
  color: #ffffff !important;
}

body.report-dark .records-table tbody tr.shift-plan-early td {
  color: #dcfce7 !important;
  background: #14532d !important;
}

body.report-dark .records-table tbody tr.shift-plan-day td {
  color: #dbeafe !important;
  background: #1e3a8a !important;
}

body.report-dark .records-table tbody tr.shift-plan-mid td {
  color: #ffedd5 !important;
  background: #7c2d12 !important;
}

body.report-dark .records-table tbody tr.shift-plan-late td {
  color: #fef9c3 !important;
  background: #713f12 !important;
}

body.report-dark .records-table tbody tr.shift-plan-night td {
  color: #f3e4d4 !important;
  background: #4a2c16 !important;
}

body.report-dark .records-table tbody tr.shift-plan-flag td {
  color: #ffffff !important;
  background: #b91c1c !important;
}

.performance-report {
  gap: 14px;
}

.performance-panel-head,
.performance-section-head,
.performance-actions,
.performance-leader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.performance-panel-head {
  padding: 16px 18px;
}

.performance-panel-head h2,
.performance-section-head h3 {
  margin: 0;
}

.performance-actions {
  flex-wrap: wrap;
}

.performance-filter {
  min-width: 260px;
}

.performance-leader {
  border-radius: 8px;
}

.performance-leader small {
  display: block;
  margin-top: 5px;
  color: #166534;
  font-size: 12px;
  font-weight: 800;
}

.performance-personal-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid rgba(14, 165, 233, 0.28);
  border-radius: 10px;
  padding: 18px 20px;
  background:
    radial-gradient(circle at 88% 18%, rgba(34, 197, 94, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(224, 242, 254, 0.96), rgba(240, 253, 250, 0.96));
}

.performance-personal-overview > div:first-child {
  display: grid;
  gap: 4px;
}

.performance-personal-overview span,
.performance-personal-overview small {
  color: #475569;
  font-size: 12px;
  font-weight: 850;
}

.performance-personal-overview > div:first-child > span {
  color: #0369a1;
  letter-spacing: 0.08em;
}

.performance-personal-overview strong {
  color: #0f172a;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.05;
}

.performance-personal-score {
  display: grid;
  min-width: 220px;
  justify-items: end;
  gap: 3px;
  text-align: right;
}

.performance-personal-score b {
  color: #0284c7;
  font-size: 34px;
  line-height: 1;
}

.performance-personal-score > span {
  color: #166534;
}

.performance-personal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.performance-personal-meta span {
  display: grid;
  min-width: 150px;
  gap: 3px;
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 8px;
  padding: 8px 10px;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 900;
}

.performance-personal-meta b {
  color: #64748b;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.feedback-panel .feedback-actions {
  border-color: rgba(14, 165, 233, 0.26);
  background: rgba(224, 242, 254, 0.62);
}

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

.performance-summary-grid article {
  min-height: 92px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.88);
}

.performance-summary-grid span,
.performance-summary-grid small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.performance-summary-grid strong {
  display: block;
  margin: 8px 0 5px;
  color: var(--text);
  font-size: 20px;
  line-height: 1;
}

.performance-analytics-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1.4fr) minmax(260px, 1fr) minmax(260px, 1fr);
  gap: 12px;
}

.performance-chart-card,
.performance-breakdown,
.agent-feedback,
.metric-board {
  border-radius: 8px;
  padding: 14px;
}

.performance-section-head {
  margin-bottom: 12px;
}

.performance-section-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

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

.bar-line {
  display: grid;
  gap: 6px;
}

.bar-line div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #334155;
  font-size: 12px;
}

.bar-line strong,
.bar-line span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-line i {
  display: block;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.bar-line em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0ea5e9, #22c55e);
}

.bar-line.missed em,
.bar-line.late em {
  background: linear-gradient(90deg, #f97316, #ef4444);
}

.bar-line.outbound em {
  background: linear-gradient(90deg, #6366f1, #0ea5e9);
}

.bar-empty {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 18px;
  color: var(--muted);
  font-weight: 850;
  text-align: center;
}

.performance-table-wrap {
  overflow-x: auto;
}

.performance-table-dense {
  min-width: 1340px;
}

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

.agent-feedback-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1.4fr) minmax(280px, 0.8fr);
  gap: 12px;
}

.metric-agent-grid.compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.metric-agent-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.86);
}

.metric-agent-card.leader-row {
  border-color: rgba(34, 197, 94, 0.32);
  background: #ecfdf5;
}

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

.metric-agent-head span {
  color: #0284c7;
  font-size: 12px;
  font-weight: 900;
}

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

.mini-metric-grid span {
  border-radius: 6px;
  padding: 8px;
  color: #475569;
  background: #f8fafc;
  font-size: 12px;
}

.mini-metric-grid b {
  display: block;
  margin-top: 3px;
  color: #0f172a;
}

.metric-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.metric-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: rgba(248, 250, 252, 0.9);
}

.metric-card.penalty {
  border-color: rgba(239, 68, 68, 0.22);
  background: #fff1f2;
}

.metric-card span,
.metric-card small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.35;
}

.metric-card strong {
  display: block;
  margin: 6px 0;
  color: var(--text);
  font-size: 18px;
}

.comparison-report {
  gap: 14px;
}

.comparison-workbench {
  padding: 16px;
}

.comparison-title-row {
  align-items: flex-start;
}

.comparison-controls {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(260px, 1fr) minmax(280px, 1fr);
  gap: 12px;
  align-items: stretch;
}

.comparison-preset-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
}

.comparison-preset {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.74);
  font-size: 12px;
  font-weight: 900;
}

.comparison-preset.active {
  color: #ffffff;
  border-color: rgba(14, 165, 233, 0.42);
  background: linear-gradient(135deg, var(--blue), var(--blue-strong));
  box-shadow: 0 12px 28px rgba(14, 165, 233, 0.18);
}

.comparison-select {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.comparison-select span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.comparison-select select {
  min-height: 154px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  font-weight: 800;
}

.comparison-select option {
  padding: 8px;
  border-radius: 6px;
}

.comparison-results {
  display: grid;
  gap: 14px;
}

.comparison-summary-grid,
.comparison-trend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.comparison-agent-card,
.comparison-trend-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(239, 248, 255, 0.72)),
    var(--panel);
  box-shadow: var(--shadow-soft);
}

.comparison-agent-card.good {
  border-color: rgba(34, 197, 94, 0.32);
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.98), rgba(240, 253, 250, 0.84));
}

.comparison-agent-card.bad {
  border-color: rgba(239, 68, 68, 0.28);
  background: linear-gradient(135deg, rgba(255, 241, 242, 0.98), rgba(255, 247, 237, 0.84));
}

.comparison-agent-card.same,
.comparison-agent-card.neutral {
  border-color: rgba(14, 165, 233, 0.22);
}

.comparison-agent-card > div:first-child {
  display: grid;
  gap: 4px;
}

.comparison-agent-card span,
.comparison-agent-card small,
.comparison-trend-card header span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.comparison-agent-card > div:first-child > span {
  color: #0369a1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.comparison-agent-card strong {
  color: var(--text);
  font-size: 22px;
  line-height: 1.08;
}

.comparison-agent-score {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.comparison-agent-score b {
  color: #0284c7;
  font-size: 34px;
  line-height: 1;
}

.comparison-agent-score em {
  border-radius: 999px;
  padding: 5px 9px;
  color: #075985;
  background: rgba(14, 165, 233, 0.12);
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.comparison-agent-mini {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.comparison-agent-mini span {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  padding: 8px;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.74);
  overflow-wrap: anywhere;
}

.comparison-agent-mini b {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.comparison-chart-card,
.comparison-breakdown,
.comparison-period-breakdown {
  border-radius: 8px;
  padding: 14px;
}

.comparison-trend-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.comparison-table-wrap {
  max-width: 100%;
}

.comparison-table {
  min-width: 1180px;
}

.comparison-table.compact {
  min-width: 1280px;
}

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

.comparison-delta {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 8px;
  font-weight: 950;
}

.comparison-delta.good {
  color: #047857;
  background: rgba(34, 197, 94, 0.13);
}

.comparison-delta.bad {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.12);
}

.comparison-delta.same,
.comparison-delta.neutral {
  color: #075985;
  background: rgba(14, 165, 233, 0.11);
}

.feedback-panel {
  display: grid;
  gap: 10px;
}

.feedback-panel div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.82);
}

.feedback-panel h4 {
  margin: 0 0 8px;
}

.feedback-panel ul {
  margin: 0;
  padding-left: 18px;
  color: #334155;
  font-weight: 760;
  line-height: 1.55;
}

.daily-head {
  margin-top: 16px;
}

body.report-dark .performance-summary-grid article,
body.report-dark .performance-chart-card,
body.report-dark .performance-breakdown,
body.report-dark .agent-feedback,
body.report-dark .metric-board,
body.report-dark .performance-panel-head,
body.report-dark .metric-agent-card,
body.report-dark .metric-card,
body.report-dark .feedback-panel div,
body.report-dark .comparison-workbench,
body.report-dark .comparison-chart-card,
body.report-dark .comparison-breakdown,
body.report-dark .comparison-period-breakdown,
body.report-dark .comparison-agent-card,
body.report-dark .comparison-trend-card {
  border-color: var(--line);
  background: rgba(15, 23, 42, 0.72);
}

body.report-dark .performance-leader small,
body.report-dark .bar-line div,
body.report-dark .feedback-panel ul,
body.report-dark .comparison-agent-mini span {
  color: #cbd5e1;
}

body.report-dark .comparison-preset {
  color: var(--text);
  border-color: var(--line);
  background: rgba(15, 23, 42, 0.72);
}

body.report-dark .comparison-preset.active {
  color: #ffffff;
  border-color: rgba(56, 189, 248, 0.36);
  background: linear-gradient(135deg, #1476d4, #0ea5e9);
}

body.report-dark .comparison-select select,
body.report-dark .comparison-agent-mini span {
  border-color: var(--line);
  background: rgba(15, 23, 42, 0.72);
}

body.report-dark .comparison-agent-card.good {
  border-color: rgba(52, 211, 153, 0.28);
  background: rgba(6, 78, 59, 0.24);
}

body.report-dark .comparison-agent-card.bad {
  border-color: rgba(248, 113, 113, 0.26);
  background: rgba(127, 29, 29, 0.24);
}

body.report-dark .comparison-agent-card strong,
body.report-dark .comparison-agent-mini b,
body.report-dark .comparison-trend-card strong {
  color: var(--text);
}

body.report-dark .comparison-delta.good {
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.16);
}

body.report-dark .comparison-delta.bad {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.16);
}

body.report-dark .comparison-delta.same,
body.report-dark .comparison-delta.neutral {
  color: #bae6fd;
  background: rgba(14, 165, 233, 0.14);
}

body.report-dark .performance-personal-overview {
  border-color: rgba(56, 189, 248, 0.26);
  background:
    radial-gradient(circle at 88% 18%, rgba(34, 197, 94, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(6, 78, 59, 0.36));
}

body.report-dark .performance-personal-overview strong {
  color: #f8fafc;
}

body.report-dark .performance-personal-overview span,
body.report-dark .performance-personal-overview small {
  color: #cbd5e1;
}

body.report-dark .performance-personal-meta span {
  border-color: rgba(56, 189, 248, 0.18);
  background: rgba(15, 23, 42, 0.62);
}

body.report-dark .performance-personal-meta b {
  color: #94a3b8;
}

body.report-dark .bar-line i {
  background: rgba(51, 65, 85, 0.95);
}

body.report-dark .metric-agent-card.leader-row {
  background: rgba(6, 78, 59, 0.28);
}

body.report-dark .mini-metric-grid span,
body.report-dark .metric-card.penalty {
  background: rgba(127, 29, 29, 0.28);
}

body.report-dark .mini-metric-grid b,
body.report-dark .metric-card strong,
body.report-dark .performance-summary-grid strong {
  color: var(--text);
}

@media (max-width: 1100px) {
  .performance-summary-grid,
  .performance-analytics-grid,
  .agent-feedback-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .detail-tabs {
    grid-template-columns: repeat(3, minmax(170px, 1fr));
    overflow-x: auto;
  }

  .performance-panel-head,
  .performance-leader,
  .performance-personal-overview,
  .comparison-title-row {
    align-items: stretch;
    flex-direction: column;
  }

  .performance-personal-score {
    min-width: 0;
    justify-items: start;
    text-align: left;
  }

  .performance-summary-grid,
  .performance-analytics-grid,
  .agent-feedback-grid,
  .comparison-controls,
  .comparison-summary-grid,
  .comparison-trend-grid {
    grid-template-columns: 1fr;
  }

  .comparison-agent-mini {
    grid-template-columns: 1fr;
  }
}

/* Performans karşılaştırma infografik deneyimi */
body.report-dark .detail-tabs {
  border-color: rgba(125, 211, 252, 0.18);
  background:
    linear-gradient(135deg, rgba(17, 28, 49, 0.9), rgba(15, 23, 42, 0.72)),
    rgba(15, 23, 42, 0.72);
}

body.report-dark .detail-tabs::before {
  background: linear-gradient(135deg, #1476d4, #38bdf8);
  box-shadow:
    0 14px 34px rgba(14, 165, 233, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

body.report-dark .snapshot-tabs button.active {
  color: #7dd3fc;
  background: rgba(20, 118, 212, 0.18);
}

.comparison-workbench {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(240, 249, 255, 0.72) 48%, rgba(240, 253, 250, 0.78)),
    var(--panel);
}

.comparison-workbench::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(14, 165, 233, 0.13), transparent 34%),
    linear-gradient(245deg, rgba(244, 114, 182, 0.12), transparent 38%),
    linear-gradient(0deg, rgba(34, 197, 94, 0.08), transparent 42%);
}

.comparison-workbench > * {
  position: relative;
}

.comparison-hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
  border: 1px solid rgba(14, 165, 233, 0.18);
  border-radius: 18px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.44)),
    rgba(255, 255, 255, 0.46);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(18px) saturate(1.16);
  -webkit-backdrop-filter: blur(18px) saturate(1.16);
}

.comparison-hero-copy {
  display: grid;
  gap: 6px;
}

.comparison-hero-copy > span,
.comparison-cluster-head span,
.comparison-agent-lane header span {
  color: #0369a1;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.comparison-hero-copy h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.02;
  font-weight: 950;
}

.comparison-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.comparison-hero-chips i {
  border: 1px solid rgba(14, 165, 233, 0.16);
  border-radius: 999px;
  padding: 6px 10px;
  color: #075985;
  background: rgba(224, 242, 254, 0.64);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.comparison-range-deck {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
  gap: 14px;
  margin-bottom: 14px;
}

.comparison-preset-group {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid rgba(14, 165, 233, 0.14);
  border-radius: 16px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.48);
}

.comparison-preset {
  min-height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.52);
}

.comparison-month-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 180px);
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 8px;
  border: 1px solid rgba(14, 165, 233, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.46);
}

.comparison-month-chip {
  display: grid;
  gap: 5px;
  min-height: 64px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  padding: 10px 12px;
  color: #334155;
  background: rgba(255, 255, 255, 0.72);
  text-align: left;
  transform: none;
}

.comparison-month-chip.active {
  color: #ffffff;
  border-color: rgba(14, 165, 233, 0.26);
  background: linear-gradient(135deg, #0ea5e9, #22c55e);
  box-shadow: 0 14px 28px rgba(14, 165, 233, 0.18);
}

.comparison-month-chip span,
.comparison-month-chip small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comparison-month-chip span {
  font-weight: 950;
}

.comparison-month-chip small {
  opacity: 0.78;
  font-size: 11px;
  font-weight: 850;
}

.comparison-agent-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.comparison-agent-lane {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.52);
}

.comparison-agent-lane.peer {
  border-color: rgba(244, 114, 182, 0.24);
}

.comparison-agent-lane header,
.comparison-cluster-head,
.comparison-trend-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.comparison-agent-lane header strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  border-radius: 999px;
  color: #075985;
  background: rgba(14, 165, 233, 0.12);
}

.comparison-agent-lane.peer header strong {
  color: #be185d;
  background: rgba(244, 114, 182, 0.13);
}

.comparison-agent-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  gap: 8px;
  max-height: 238px;
  overflow-y: auto;
  padding-right: 2px;
}

.comparison-agent-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 50px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 14px;
  padding: 8px 10px;
  color: #334155;
  background: rgba(255, 255, 255, 0.7);
  text-align: left;
  transform: none;
}

.comparison-agent-chip b {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 11px;
  color: #0284c7;
  background: rgba(14, 165, 233, 0.12);
  font-size: 11px;
}

.comparison-agent-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 900;
}

.comparison-agent-chip.active {
  color: #ffffff;
  border-color: rgba(14, 165, 233, 0.28);
  background: linear-gradient(135deg, #0284c7, #2563eb);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.16);
}

.comparison-agent-lane.peer .comparison-agent-chip.active {
  border-color: rgba(244, 114, 182, 0.3);
  background: linear-gradient(135deg, #be185d, #f97316);
}

.comparison-agent-chip.active b {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
}

.comparison-vs-mark {
  align-self: center;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  color: #0f172a;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(224, 242, 254, 0.74)),
    #ffffff;
  border: 1px solid rgba(14, 165, 233, 0.18);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.10);
  font-size: 14px;
  font-weight: 950;
}

.comparison-picker-shell {
  display: grid;
  gap: 14px;
}

.comparison-selection-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.comparison-selection-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 22px;
  padding: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(240, 249, 255, 0.56)),
    rgba(255, 255, 255, 0.62);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
}

.comparison-selection-card.peer {
  border-color: rgba(244, 114, 182, 0.24);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(253, 242, 248, 0.58)),
    rgba(255, 255, 255, 0.62);
}

.comparison-selection-card header,
.comparison-selection-card label {
  display: grid;
  gap: 6px;
}

.comparison-selection-card header span,
.comparison-selection-card label b {
  color: #0369a1;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.comparison-selection-card.peer header span,
.comparison-selection-card.peer label b {
  color: #be185d;
}

.comparison-selection-card header strong {
  color: var(--text);
  font-size: 23px;
  line-height: 1.08;
}

.comparison-selection-card select {
  min-height: 48px;
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 14px;
  padding: 0 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.76);
  font-size: 14px;
  font-weight: 900;
}

.comparison-selection-note {
  border-radius: 16px;
  padding: 12px;
  color: #075985;
  background: rgba(14, 165, 233, 0.10);
  font-size: 13px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.comparison-selection-card.peer .comparison-selection-note {
  color: #be185d;
  background: rgba(244, 114, 182, 0.12);
}

.comparison-result-board,
.comparison-category-board,
.comparison-change-board {
  display: grid;
  gap: 18px;
  border-radius: 20px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(14, 165, 233, 0.16);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(240, 249, 255, 0.66) 50%, rgba(236, 253, 245, 0.72)),
    rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
}

.comparison-result-board {
  background:
    radial-gradient(circle at 88% 14%, rgba(244, 114, 182, 0.18), transparent 28%),
    radial-gradient(circle at 10% 90%, rgba(45, 212, 191, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(239, 246, 255, 0.78));
}

.comparison-result-board.good {
  border-color: rgba(34, 197, 94, 0.24);
}

.comparison-result-board.bad {
  border-color: rgba(239, 68, 68, 0.24);
}

.comparison-poster-hero {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(360px, 1.12fr) minmax(300px, 0.9fr);
  gap: 16px;
  align-items: stretch;
}

.comparison-poster-number,
.comparison-poster-mini,
.comparison-score-visual {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 22px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}

.comparison-poster-number {
  display: grid;
  align-content: center;
  gap: 8px;
}

.comparison-poster-number span,
.comparison-poster-number small {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.comparison-poster-number strong {
  display: block;
  color: #ef4444;
  font-size: clamp(46px, 6vw, 82px);
  line-height: 1.16;
  font-weight: 950;
}

.comparison-result-board.good .comparison-poster-number strong {
  color: #059669;
}

.comparison-score-visual {
  display: grid;
  align-content: center;
  gap: 14px;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 12%, rgba(125, 211, 252, 0.24), transparent 30%),
    linear-gradient(135deg, rgba(224, 242, 254, 0.74), rgba(236, 253, 245, 0.7)),
    rgba(255, 255, 255, 0.64);
}

.comparison-score-visual-head,
.comparison-score-lane {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(120px, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.comparison-score-visual-head {
  grid-template-columns: minmax(0, 1fr) auto;
}

.comparison-score-visual-head span {
  color: #0369a1;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.comparison-score-visual-head b {
  border-radius: 999px;
  padding: 7px 10px;
  color: #075985;
  background: rgba(14, 165, 233, 0.12);
  font-size: 12px;
  line-height: 1;
}

.comparison-score-lane div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.comparison-score-lane strong,
.comparison-score-lane b {
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.15;
}

.comparison-score-lane span {
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
}

.comparison-score-lane i {
  display: block;
  height: 20px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.88);
}

.comparison-score-lane i em {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.comparison-score-lane.focus i em {
  background: linear-gradient(90deg, #0ea5e9, #22c55e);
}

.comparison-score-lane.peer i em {
  background: linear-gradient(90deg, #f472b6, #f97316);
}

.comparison-score-visual p {
  margin: 0;
  border-radius: 16px;
  padding: 12px 14px;
  color: #1e293b;
  background: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  font-weight: 880;
  line-height: 1.38;
}

.comparison-poster-mini {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.comparison-poster-mini-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  border-radius: 18px;
  padding: 12px;
  background: rgba(248, 250, 252, 0.8);
}

.comparison-poster-mini-card b {
  color: #64748b;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.comparison-poster-mini-card i {
  color: #075985;
  font-size: 22px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
}

.comparison-poster-mini-card small {
  grid-column: 1 / -1;
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}

.comparison-value-pair {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}

.comparison-value-pair > span {
  display: grid;
  min-width: 0;
  gap: 3px;
  border-radius: 14px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.64);
}

.comparison-value-pair > i {
  align-self: center;
  color: #94a3b8;
  font-style: normal;
  font-weight: 950;
}

.comparison-value-pair b {
  color: #0369a1;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.comparison-value-pair strong {
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comparison-value-pair small {
  color: #64748b;
  font-size: 10px;
  font-weight: 850;
}

.comparison-value-pair em {
  color: #0f172a;
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
}

.comparison-value-pair.row {
  grid-column: auto;
  min-width: 0;
}

.comparison-value-pair.row > span {
  min-width: 0;
  padding: 6px 7px;
}

.comparison-value-pair.row small {
  display: none;
}

.comparison-value-pair.row strong {
  display: block;
  max-width: 88px;
  font-size: 10px;
}

.comparison-value-pair.change-card > span {
  background: rgba(248, 250, 252, 0.86);
}

.comparison-poster-mini-card.good i {
  color: #047857;
}

.comparison-poster-mini-card.bad i {
  color: #b91c1c;
}

.comparison-board-head {
  display: grid;
  max-width: 780px;
  gap: 7px;
}

.comparison-board-head.compact {
  max-width: none;
}

.comparison-board-head span,
.comparison-category-card header span,
.comparison-change-card > span {
  color: #0369a1;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.comparison-board-head h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(22px, 2.3vw, 32px);
  line-height: 1.08;
  font-weight: 950;
}

.comparison-board-head p {
  margin: 0;
  color: #475569;
  font-size: 14px;
  font-weight: 760;
  line-height: 1.45;
}

.comparison-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 14px;
}

.comparison-result-card {
  display: grid;
  gap: 16px;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 20px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.7)),
    rgba(255, 255, 255, 0.76);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
}

.comparison-result-card.focus {
  box-shadow: inset 5px 0 0 #0ea5e9, 0 16px 34px rgba(15, 23, 42, 0.07);
}

.comparison-result-card.peer {
  box-shadow: inset 5px 0 0 #f472b6, 0 16px 34px rgba(15, 23, 42, 0.07);
}

.comparison-result-card.both {
  box-shadow:
    inset 5px 0 0 #0ea5e9,
    inset -5px 0 0 #f472b6,
    0 16px 34px rgba(15, 23, 42, 0.07);
}

.comparison-result-card.good {
  border-color: rgba(34, 197, 94, 0.24);
}

.comparison-result-card.bad {
  border-color: rgba(239, 68, 68, 0.24);
}

.comparison-result-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.comparison-result-person {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.comparison-result-person span,
.comparison-result-score span {
  color: #64748b;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.comparison-result-person strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.05;
}

.comparison-result-person small {
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}

.comparison-result-score {
  display: grid;
  justify-items: end;
  gap: 6px;
  min-width: 128px;
}

.comparison-result-score b {
  color: #0284c7;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.06;
}

.comparison-result-story {
  margin: 0;
  border-radius: 16px;
  padding: 14px 16px;
  color: #1e293b;
  background:
    linear-gradient(135deg, rgba(224, 242, 254, 0.62), rgba(240, 253, 250, 0.58)),
    rgba(255, 255, 255, 0.66);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.42;
}

.comparison-result-pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.comparison-result-pill {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.comparison-result-pill b {
  color: #64748b;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.comparison-result-pill i {
  overflow: hidden;
  color: #334155;
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comparison-result-pill em {
  justify-self: start;
  border-radius: 999px;
  padding: 5px 9px;
  color: #075985;
  background: rgba(14, 165, 233, 0.11);
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
}

.comparison-result-pill.good em {
  color: #047857;
  background: rgba(34, 197, 94, 0.13);
}

.comparison-result-pill.bad em {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.12);
}

.comparison-score-path {
  display: grid;
  gap: 8px;
}

.comparison-score-path span {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 58px;
  gap: 10px;
  align-items: center;
}

.comparison-score-path b,
.comparison-score-path strong {
  color: #334155;
  font-size: 12px;
  font-weight: 950;
}

.comparison-score-path i {
  display: block;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.9);
}

.comparison-score-path i em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0ea5e9, #22c55e);
}

.comparison-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
  gap: 16px;
}

.comparison-category-card {
  display: grid;
  gap: 13px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 20px;
  padding: 17px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(248, 250, 252, 0.68)),
    rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}

.comparison-category-card.tone-aqua {
  background: linear-gradient(135deg, rgba(224, 242, 254, 0.9), rgba(240, 253, 250, 0.74));
}

.comparison-category-card.tone-sky {
  background: linear-gradient(135deg, rgba(219, 234, 254, 0.88), rgba(224, 242, 254, 0.72));
}

.comparison-category-card.tone-green {
  background: linear-gradient(135deg, rgba(220, 252, 231, 0.88), rgba(236, 253, 245, 0.72));
}

.comparison-category-card.tone-amber {
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.88), rgba(255, 247, 237, 0.74));
}

.comparison-category-card.tone-rose {
  background: linear-gradient(135deg, rgba(255, 228, 230, 0.86), rgba(253, 242, 248, 0.72));
}

.comparison-category-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.comparison-category-card header div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.comparison-category-card header strong {
  color: var(--text);
  font-size: 21px;
  line-height: 1.12;
}

.comparison-category-card header b {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 7px 10px;
  color: #075985;
  background: rgba(14, 165, 233, 0.12);
  font-size: 12px;
  font-weight: 950;
}

.comparison-category-card.good header b {
  color: #047857;
  background: rgba(34, 197, 94, 0.14);
}

.comparison-category-card.bad header b {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.12);
}

.comparison-category-body {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
}

.comparison-category-icon {
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.8), transparent 24%),
    linear-gradient(135deg, rgba(14, 165, 233, 0.26), rgba(34, 197, 94, 0.22));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.64);
}

.comparison-category-icon span {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: #0ea5e9;
}

.comparison-category-icon span:nth-child(1) {
  left: 14px;
  bottom: 15px;
  width: 10px;
  height: 34px;
}

.comparison-category-icon span:nth-child(2) {
  left: 31px;
  bottom: 15px;
  width: 10px;
  height: 46px;
  background: #22c55e;
}

.comparison-category-icon span:nth-child(3) {
  left: 48px;
  bottom: 15px;
  width: 10px;
  height: 24px;
  background: #f472b6;
}

.comparison-category-icon.calls span {
  width: 42px;
  height: 42px;
  border: 9px solid #0ea5e9;
  background: transparent;
}

.comparison-category-icon.calls span:nth-child(1) {
  left: 14px;
  top: 14px;
}

.comparison-category-icon.calls span:nth-child(2) {
  right: 10px;
  bottom: 10px;
  left: auto;
  top: auto;
  width: 20px;
  height: 20px;
  border-color: #22c55e;
}

.comparison-category-icon.calls span:nth-child(3) {
  display: none;
}

.comparison-category-icon.production span {
  border-radius: 10px;
}

.comparison-category-icon.time span {
  left: 15px;
  top: 15px;
  width: 40px;
  height: 40px;
  border: 8px solid #f59e0b;
  background: transparent;
}

.comparison-category-icon.time span:nth-child(2) {
  left: 34px;
  top: 21px;
  width: 5px;
  height: 19px;
  border: 0;
  background: #f97316;
  transform-origin: bottom;
  transform: rotate(38deg);
}

.comparison-category-icon.time span:nth-child(3) {
  display: none;
}

.comparison-category-icon.discipline span {
  width: 13px;
  height: 13px;
  border-radius: 6px;
}

.comparison-category-icon.discipline span:nth-child(1) {
  left: 14px;
  top: 16px;
}

.comparison-category-icon.discipline span:nth-child(2) {
  left: 34px;
  top: 29px;
}

.comparison-category-icon.discipline span:nth-child(3) {
  left: 47px;
  top: 48px;
}

.comparison-category-card p {
  margin: 0;
  color: #334155;
  font-size: 14px;
  font-weight: 820;
  line-height: 1.42;
}

.comparison-category-meter {
  display: flex;
  height: 13px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.88);
}

.comparison-category-meter span {
  min-width: 4px;
}

.comparison-category-meter .good {
  background: linear-gradient(90deg, #22c55e, #14b8a6);
}

.comparison-category-meter .same {
  background: rgba(148, 163, 184, 0.65);
}

.comparison-category-meter .bad {
  background: linear-gradient(90deg, #fb7185, #ef4444);
}

.comparison-category-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.comparison-category-counts span {
  display: grid;
  gap: 2px;
  border-radius: 14px;
  padding: 9px;
  color: #64748b;
  background: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  font-weight: 850;
}

.comparison-category-counts b {
  color: var(--text);
  font-size: 18px;
}

.comparison-category-list {
  display: grid;
  gap: 8px;
}

.comparison-change-row,
.comparison-empty-line {
  display: grid;
  grid-template-columns: minmax(108px, 0.78fr) minmax(0, 1.35fr) auto;
  gap: 10px;
  align-items: center;
  border-radius: 14px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.72);
}

.comparison-change-row > b,
.comparison-empty-line {
  color: var(--text);
  font-size: 12px;
  font-weight: 950;
}

.comparison-change-row i {
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.25;
}

.comparison-change-row > em {
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.comparison-change-row.good > em {
  color: #047857;
  background: rgba(34, 197, 94, 0.13);
}

.comparison-change-row.bad > em {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.12);
}

.comparison-change-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}

.comparison-change-card {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.comparison-change-card.focus {
  box-shadow: inset 4px 0 0 #0ea5e9, 0 12px 28px rgba(15, 23, 42, 0.05);
}

.comparison-change-card.peer {
  box-shadow: inset 4px 0 0 #f472b6, 0 12px 28px rgba(15, 23, 42, 0.05);
}

.comparison-change-card.both {
  box-shadow:
    inset 4px 0 0 #0ea5e9,
    inset -4px 0 0 #f472b6,
    0 12px 28px rgba(15, 23, 42, 0.05);
}

.comparison-change-card strong {
  color: var(--text);
  font-size: 16px;
  line-height: 1.2;
}

.comparison-change-card > div:not(.comparison-value-pair):not(.comparison-change-bars) {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  color: #334155;
  font-size: 15px;
  font-weight: 950;
}

.comparison-change-card .comparison-change-bars {
  display: grid;
  gap: 6px;
  width: 100%;
}

.comparison-change-bars span {
  display: block;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.9);
}

.comparison-change-bars span i {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.comparison-change-bars span:first-child i {
  background: linear-gradient(90deg, #0ea5e9, #22c55e);
}

.comparison-change-bars span:last-child i {
  background: linear-gradient(90deg, #f472b6, #f97316);
}

.comparison-change-card i,
.comparison-change-card em {
  font-style: normal;
}

.comparison-change-card > em {
  justify-self: start;
}

.comparison-results > .performance-card,
.comparison-result-card,
.comparison-category-card,
.comparison-change-card,
.comparison-period-card {
  contain: layout paint style;
}

.comparison-results > .performance-card {
  content-visibility: auto;
  contain-intrinsic-size: 520px;
}

.comparison-category-card,
.comparison-change-card,
.comparison-period-card {
  content-visibility: auto;
  contain-intrinsic-size: 260px;
}

body.report-is-scrolling .detail-tabs,
body.report-is-interacting .detail-tabs {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.report-is-scrolling .comparison-result-board,
body.report-is-scrolling .comparison-category-board,
body.report-is-scrolling .comparison-change-board,
body.report-is-scrolling .comparison-period-breakdown,
body.report-is-scrolling .comparison-result-card,
body.report-is-scrolling .comparison-category-card,
body.report-is-scrolling .comparison-change-card,
body.report-is-scrolling .comparison-period-card,
body.report-is-interacting .comparison-result-board,
body.report-is-interacting .comparison-category-board,
body.report-is-interacting .comparison-change-board,
body.report-is-interacting .comparison-period-breakdown {
  box-shadow: none;
}

@keyframes comparisonSoftEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes comparisonBarGrow {
  from {
    transform: scaleX(0.08);
  }
  to {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .comparison-results > .performance-card,
  .comparison-result-card,
  .comparison-category-card,
  .comparison-change-card,
  .comparison-period-card {
    animation: comparisonSoftEnter 260ms cubic-bezier(.16, 1, .3, 1) both;
  }

  .comparison-score-lane i em,
  .comparison-score-path i em,
  .comparison-category-meter span,
  .comparison-change-bars span i,
  .comparison-period-score-meter span {
    transform-origin: left center;
    animation: comparisonBarGrow 360ms cubic-bezier(.16, 1, .3, 1) both;
  }
}

.comparison-score-stage {
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(236, 253, 245, 0.74)),
    var(--panel);
}

.comparison-metric-cluster {
  display: grid;
  gap: 14px;
  border-radius: 18px;
  padding: 16px;
  overflow: hidden;
}

.comparison-metric-cluster.tone-aqua {
  background: linear-gradient(135deg, rgba(224, 242, 254, 0.9), rgba(240, 253, 250, 0.78));
}

.comparison-metric-cluster.tone-sky {
  background: linear-gradient(135deg, rgba(219, 234, 254, 0.9), rgba(224, 242, 254, 0.74));
}

.comparison-metric-cluster.tone-green {
  background: linear-gradient(135deg, rgba(220, 252, 231, 0.9), rgba(236, 253, 245, 0.72));
}

.comparison-metric-cluster.tone-amber {
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.92), rgba(255, 247, 237, 0.74));
}

.comparison-metric-cluster.tone-rose {
  background: linear-gradient(135deg, rgba(255, 228, 230, 0.92), rgba(253, 242, 248, 0.74));
}

.comparison-cluster-head strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
}

.comparison-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.comparison-metric-tile {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.comparison-metric-tile header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.comparison-metric-tile header strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.2;
}

.comparison-metric-tile header span {
  border-radius: 999px;
  padding: 4px 8px;
  color: #475569;
  background: rgba(248, 250, 252, 0.82);
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.comparison-metric-agent-list {
  display: grid;
  gap: 9px;
}

.comparison-metric-agent-line {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) auto auto 64px;
  gap: 10px;
  align-items: center;
  border-radius: 12px;
  padding: 9px;
  background: rgba(248, 250, 252, 0.78);
}

.comparison-metric-agent-line.focus {
  box-shadow: inset 3px 0 0 #0ea5e9;
}

.comparison-metric-agent-line.peer {
  box-shadow: inset 3px 0 0 #f472b6;
}

.comparison-metric-agent-name {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.comparison-metric-agent-name b,
.comparison-metric-agent-name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comparison-metric-agent-name b {
  color: var(--text);
  font-size: 12px;
}

.comparison-metric-agent-name span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.comparison-metric-values {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.comparison-metric-values em,
.comparison-metric-values i {
  font-style: normal;
}

.comparison-metric-values i {
  color: #94a3b8;
}

.comparison-sparkline {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 3px;
  height: 34px;
}

.comparison-sparkline span {
  width: 7px;
  min-height: 12px;
  border-radius: 999px 999px 3px 3px;
  background: linear-gradient(180deg, #22c55e, #0ea5e9);
}

.comparison-period-atlas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 14px;
}

.comparison-period-card {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 252, 0.66)),
    rgba(255, 255, 255, 0.68);
}

.comparison-period-card > header {
  display: grid;
  gap: 4px;
}

.comparison-period-card > header span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.comparison-period-card > header strong {
  color: var(--text);
  font-size: 21px;
  line-height: 1.1;
}

.comparison-period-agent-grid {
  display: grid;
  gap: 10px;
}

.comparison-period-agent-card {
  display: grid;
  gap: 12px;
  border-radius: 14px;
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(248, 250, 252, 0.72)),
    rgba(248, 250, 252, 0.86);
}

.comparison-period-agent-card.focus {
  box-shadow: inset 4px 0 0 #0ea5e9;
}

.comparison-period-agent-card.peer {
  box-shadow: inset 4px 0 0 #f472b6;
}

.comparison-period-agent-card.both {
  box-shadow:
    inset 4px 0 0 #0ea5e9,
    inset -4px 0 0 #f472b6;
}

.comparison-period-agent-card header {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.comparison-period-avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 17px;
  color: #0369a1;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.86), transparent 28%),
    linear-gradient(135deg, rgba(186, 230, 253, 0.9), rgba(220, 252, 231, 0.84));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 10px 22px rgba(14, 165, 233, 0.12);
  font-size: 13px;
  font-weight: 950;
}

.comparison-period-agent-card.peer .comparison-period-avatar {
  color: #be185d;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.86), transparent 28%),
    linear-gradient(135deg, rgba(252, 231, 243, 0.92), rgba(255, 237, 213, 0.86));
}

.comparison-period-agent-card.both .comparison-period-avatar {
  color: #4338ca;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.86), transparent 28%),
    linear-gradient(135deg, rgba(186, 230, 253, 0.92), rgba(252, 231, 243, 0.9));
}

.comparison-period-agent-card strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  line-height: 1.2;
}

.comparison-period-agent-card > p,
.comparison-period-agent-card header span {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.comparison-period-agent-card header b {
  color: #0284c7;
  font-size: 28px;
  line-height: 1.12;
}

.comparison-period-score-meter {
  display: block;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.9);
}

.comparison-period-score-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0ea5e9, #22c55e);
}

.comparison-period-agent-card.peer .comparison-period-score-meter span {
  background: linear-gradient(90deg, #f472b6, #f97316);
}

.comparison-period-agent-card.both .comparison-period-score-meter span {
  background: linear-gradient(90deg, #0ea5e9, #f472b6);
}

.comparison-period-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.comparison-period-mini-grid span {
  display: grid;
  gap: 2px;
  border-radius: 10px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.68);
}

.comparison-period-mini-grid b {
  color: #64748b;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.comparison-period-mini-grid em {
  color: var(--text);
  font-style: normal;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.comparison-data-vault {
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
}

.comparison-data-vault summary {
  cursor: pointer;
  padding: 16px 18px;
  color: var(--text);
  font-weight: 950;
}

.comparison-data-vault .comparison-table-wrap {
  padding: 0 14px 14px;
}

body.report-dark .comparison-workbench,
body.report-dark .comparison-hero-card,
body.report-dark .comparison-selection-card,
body.report-dark .comparison-agent-lane,
body.report-dark .comparison-preset-group,
body.report-dark .comparison-month-rail,
body.report-dark .comparison-result-board,
body.report-dark .comparison-category-board,
body.report-dark .comparison-change-board,
body.report-dark .comparison-result-card,
body.report-dark .comparison-category-card,
body.report-dark .comparison-change-card,
body.report-dark .comparison-metric-tile,
body.report-dark .comparison-period-card {
  border-color: rgba(125, 211, 252, 0.16);
  background:
    linear-gradient(135deg, rgba(17, 28, 49, 0.84), rgba(11, 18, 34, 0.72)),
    rgba(15, 23, 42, 0.78);
}

body.report-dark .comparison-workbench::before {
  background:
    linear-gradient(115deg, rgba(56, 189, 248, 0.12), transparent 34%),
    linear-gradient(245deg, rgba(244, 114, 182, 0.10), transparent 38%),
    linear-gradient(0deg, rgba(52, 211, 153, 0.08), transparent 42%);
}

body.report-dark .comparison-hero-copy > span,
body.report-dark .comparison-board-head span,
body.report-dark .comparison-selection-card header span,
body.report-dark .comparison-selection-card label b,
body.report-dark .comparison-category-card header span,
body.report-dark .comparison-score-visual-head span,
body.report-dark .comparison-change-card > span,
body.report-dark .comparison-cluster-head span,
body.report-dark .comparison-agent-lane header span {
  color: #7dd3fc;
}

body.report-dark .comparison-board-head h3,
body.report-dark .comparison-selection-card header strong,
body.report-dark .comparison-result-person strong,
body.report-dark .comparison-category-card header strong,
body.report-dark .comparison-score-lane strong,
body.report-dark .comparison-score-lane b,
body.report-dark .comparison-value-pair strong,
body.report-dark .comparison-value-pair em,
body.report-dark .comparison-change-card strong,
body.report-dark .comparison-category-counts b,
body.report-dark .comparison-change-row > b,
body.report-dark .comparison-empty-line,
body.report-dark .comparison-score-path b,
body.report-dark .comparison-score-path strong {
  color: var(--text);
}

body.report-dark .comparison-board-head p,
body.report-dark .comparison-category-card p,
body.report-dark .comparison-result-person small,
body.report-dark .comparison-result-person span,
body.report-dark .comparison-result-score span,
body.report-dark .comparison-score-lane span,
body.report-dark .comparison-poster-mini-card small,
body.report-dark .comparison-value-pair small,
body.report-dark .comparison-change-row i,
body.report-dark .comparison-category-counts span {
  color: #cbd5e1;
}

body.report-dark .comparison-result-story {
  color: #e2e8f0;
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.14), rgba(20, 184, 166, 0.12)),
    rgba(15, 23, 42, 0.68);
}

body.report-dark .comparison-hero-chips i,
body.report-dark .comparison-selection-note,
body.report-dark .comparison-poster-number,
body.report-dark .comparison-poster-mini,
body.report-dark .comparison-poster-mini-card,
body.report-dark .comparison-value-pair > span,
body.report-dark .comparison-score-visual,
body.report-dark .comparison-score-visual p,
body.report-dark .comparison-result-pill,
body.report-dark .comparison-category-counts span,
body.report-dark .comparison-change-row,
body.report-dark .comparison-empty-line,
body.report-dark .comparison-metric-tile header span,
body.report-dark .comparison-agent-lane header strong {
  color: #bae6fd;
  background: rgba(14, 165, 233, 0.14);
  border-color: rgba(56, 189, 248, 0.18);
}

body.report-dark .comparison-agent-lane.peer header strong {
  color: #fbcfe8;
  background: rgba(244, 114, 182, 0.14);
}

body.report-dark .comparison-month-chip,
body.report-dark .comparison-agent-chip,
body.report-dark .comparison-selection-card select,
body.report-dark .comparison-result-pill,
body.report-dark .comparison-change-card > div:not(.comparison-value-pair):not(.comparison-change-bars),
body.report-dark .comparison-value-pair.change-card > span,
body.report-dark .comparison-metric-agent-line,
body.report-dark .comparison-period-agent-card,
body.report-dark .comparison-period-mini-grid span {
  color: var(--text);
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.62);
}

body.report-dark .comparison-metric-cluster.tone-aqua,
body.report-dark .comparison-metric-cluster.tone-sky,
body.report-dark .comparison-metric-cluster.tone-green,
body.report-dark .comparison-metric-cluster.tone-amber,
body.report-dark .comparison-metric-cluster.tone-rose,
body.report-dark .comparison-category-card.tone-aqua,
body.report-dark .comparison-category-card.tone-sky,
body.report-dark .comparison-category-card.tone-green,
body.report-dark .comparison-category-card.tone-amber,
body.report-dark .comparison-category-card.tone-rose {
  background:
    linear-gradient(135deg, rgba(17, 28, 49, 0.86), rgba(15, 23, 42, 0.7)),
    rgba(15, 23, 42, 0.78);
}

body.report-dark .comparison-metric-values,
body.report-dark .comparison-result-pill i,
body.report-dark .comparison-poster-mini-card i {
  color: #dbeafe;
}

body.report-dark .comparison-poster-number strong {
  color: #fca5a5;
}

body.report-dark .comparison-result-board.good .comparison-poster-number strong {
  color: #86efac;
}

body.report-dark .comparison-score-path i,
body.report-dark .comparison-score-lane i,
body.report-dark .comparison-category-meter,
body.report-dark .comparison-change-bars span,
body.report-dark .comparison-period-score-meter {
  background: rgba(51, 65, 85, 0.9);
}

@media (max-width: 1100px) {
  .comparison-range-deck,
  .comparison-selection-stage,
  .comparison-poster-hero,
  .comparison-agent-stage {
    grid-template-columns: 1fr;
  }

  .comparison-vs-mark {
    width: 100%;
    height: 42px;
    border-radius: 14px;
  }
}

@media (max-width: 760px) {
  .comparison-hero-card {
    align-items: stretch;
    flex-direction: column;
  }

  .comparison-preset-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .comparison-result-grid,
  .comparison-category-grid,
  .comparison-change-grid {
    grid-template-columns: 1fr;
  }

  .comparison-result-main {
    grid-template-columns: 1fr;
  }

  .comparison-score-visual-head,
  .comparison-score-lane,
  .comparison-category-body,
  .comparison-period-agent-card header {
    grid-template-columns: 1fr;
  }

  .comparison-result-score {
    justify-items: start;
  }

  .comparison-result-pills,
  .comparison-poster-mini,
  .comparison-category-counts {
    grid-template-columns: 1fr;
  }

  .comparison-score-path span,
  .comparison-change-row,
  .comparison-empty-line {
    grid-template-columns: 1fr;
  }

  .comparison-metric-agent-line {
    grid-template-columns: 1fr;
  }

  .comparison-sparkline {
    justify-content: flex-start;
  }

  .comparison-period-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .comparison-period-atlas {
    grid-template-columns: 1fr;
  }
}

#performance-print-root,
#performance-comparison-print-root {
  display: none;
}

body.printing-performance-comparison #performance-comparison-print-root {
  display: block;
}

@media screen {
  body.printing-performance-comparison #performance-comparison-print-root {
    position: absolute;
    top: 0;
    left: -99999px;
    width: 210mm;
  }
}

@media print {
  @page {
    size: A4 portrait;
    margin: 9mm;
  }

  body.printing-personal-performance {
    color: #0f172a !important;
    background: #ffffff !important;
  }

  body.printing-personal-performance .report-shell,
  body.printing-personal-performance .modal,
  body.printing-personal-performance .toast-root,
  body.printing-personal-performance .loading-overlay {
    display: none !important;
  }

  body.printing-personal-performance #performance-print-root {
    display: block !important;
  }

  .performance-print-page {
    width: 100%;
    color: #0f172a;
    font-family: Inter, Arial, sans-serif;
    font-size: 9.5px;
    line-height: 1.35;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .performance-print-header,
  .performance-print-brand,
  .performance-print-hero,
  .performance-print-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .performance-print-header {
    position: relative;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 11px 13px 14px;
    background: #ffffff;
  }

  .performance-print-header::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 4px;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(90deg, #075985, #0f766e, #16a34a);
  }

  .performance-print-brand img {
    width: 82px;
    height: auto;
    object-fit: contain;
  }

  .performance-print-brand div,
  .performance-print-period {
    display: grid;
    gap: 3px;
  }

  .performance-print-brand span,
  .performance-print-period span,
  .performance-print-hero span,
  .performance-print-summary span {
    color: #64748b;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .performance-print-brand strong {
    font-size: 15px;
  }

  .performance-print-period {
    justify-items: end;
  }

  .performance-print-period strong {
    color: #075985;
    font-size: 14px;
  }

  .performance-print-hero {
    margin-top: 8px;
    border-radius: 10px;
    padding: 13px 15px;
    color: #ffffff;
    background: linear-gradient(120deg, #0f172a, #075985 58%, #0f766e);
  }

  .performance-print-hero > div:first-child {
    display: grid;
    gap: 3px;
  }

  .performance-print-hero span,
  .performance-print-hero small {
    color: #dbeafe;
  }

  .performance-print-hero > div:first-child > strong {
    font-size: 22px;
    line-height: 1.1;
  }

  .performance-print-score {
    display: grid;
    justify-items: end;
    text-align: right;
  }

  .performance-print-score b {
    font-size: 30px;
    line-height: 1;
  }

  .performance-print-score span {
    margin-top: 4px;
    color: #bbf7d0;
    font-size: 10px;
  }

  .performance-print-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
  }

  .performance-print-summary div {
    display: grid;
    gap: 4px;
    border: 1px solid #d8e1ea;
    border-radius: 8px;
    padding: 7px 8px;
    background: #f8fafc;
  }

  .performance-print-summary strong {
    color: #0f172a;
    font-size: 12px;
  }

  .performance-print-section {
    margin-top: 9px;
    break-inside: avoid;
  }

  .performance-print-section h2 {
    margin: 0 0 6px;
    color: #0f172a;
    font-size: 13px;
  }

  .performance-print-page table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .performance-print-page th,
  .performance-print-page td {
    border: 1px solid #d8e1ea;
    padding: 4px 5px;
    text-align: left;
    vertical-align: middle;
    overflow-wrap: anywhere;
  }

  .performance-print-page th {
    color: #ffffff;
    background: #075985;
    font-size: 8px;
    text-transform: uppercase;
  }

  .performance-print-page tbody tr:nth-child(even) td {
    background: #f8fafc;
  }

  .performance-print-feedback {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 9px;
    break-inside: avoid;
  }

  .performance-print-feedback > div {
    border: 1px solid #d8e1ea;
    border-top: 4px solid #0ea5e9;
    border-radius: 8px;
    padding: 8px;
    background: #ffffff;
  }

  .performance-print-feedback > div:first-child {
    border-top-color: #22c55e;
  }

  .performance-print-feedback > div:nth-child(2) {
    border-top-color: #f97316;
  }

  .performance-print-feedback h3 {
    margin: 0 0 5px;
    font-size: 10px;
  }

  .performance-print-feedback ul {
    margin: 0;
    padding-left: 14px;
    color: #334155;
    line-height: 1.35;
  }

  .performance-print-daily {
    break-before: auto;
    break-inside: auto;
  }

  .performance-print-daily table {
    font-size: 6.5px;
  }

  .performance-print-daily tr {
    break-inside: avoid;
  }

  .performance-print-section-head span {
    color: #64748b;
    font-size: 8px;
    font-weight: 800;
  }

  .performance-print-page footer {
    margin-top: 9px;
    border-top: 1px solid #cbd5e1;
    padding-top: 6px;
    color: #64748b;
    text-align: center;
    font-size: 8px;
  }

  body.printing-performance {
    color: #0f172a !important;
    background: #ffffff !important;
  }

  body.printing-performance .report-shell {
    width: 100% !important;
    margin: 0 !important;
  }

  body.printing-performance #view-periods,
  body.printing-performance .detail-header,
  body.printing-performance .closed-banner,
  body.printing-performance .detail-tabs,
  body.printing-performance #tab-entry,
  body.printing-performance .performance-actions,
  body.printing-performance .toast-root,
  body.printing-performance .loading-overlay {
    display: none !important;
  }

  body.printing-performance #view-detail,
  body.printing-performance #tab-performance {
    display: block !important;
  }

  body.printing-performance .performance-card,
  body.printing-performance .leader-banner,
  body.printing-performance .info-card {
    box-shadow: none !important;
    break-inside: avoid;
  }

  body.printing-performance .performance-summary-grid,
  body.printing-performance .performance-analytics-grid,
  body.printing-performance .agent-feedback-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.printing-performance .performance-table-wrap {
    overflow: visible !important;
  }

  body.printing-performance .performance-table-dense {
    min-width: 0 !important;
    font-size: 10px;
  }
}

@media print {
  body.printing-performance-comparison {
    color: #0f172a !important;
    background: #ffffff !important;
  }

  body.printing-performance-comparison .report-shell,
  body.printing-performance-comparison .modal,
  body.printing-performance-comparison .toast-root,
  body.printing-performance-comparison .loading-overlay {
    display: none !important;
  }

  body.printing-performance-comparison #performance-comparison-print-root {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .performance-comparison-print-page {
    width: 190mm;
    margin: 0 auto;
    color: #0f172a;
    font-family: Inter, Arial, sans-serif;
    font-size: 8.6px;
    line-height: 1.32;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    page-break-before: avoid;
  }

  .comparison-print-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    border-radius: 10px;
    padding: 13px 15px;
    color: #ffffff;
    background: linear-gradient(120deg, #0f172a, #075985 58%, #0f766e);
    break-inside: avoid;
  }

  .comparison-print-hero div {
    display: grid;
    gap: 4px;
  }

  .comparison-print-hero span,
  .comparison-print-hero small {
    color: #dbeafe;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .comparison-print-hero strong {
    color: #ffffff;
    font-size: 18px;
    line-height: 1.15;
  }

  .comparison-print-hero b {
    flex: 0 0 auto;
    color: #ffffff;
    font-size: 28px;
    line-height: 1;
  }

  .comparison-print-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 8px;
  }

  .comparison-print-summary div {
    border: 1px solid #d8e1ea;
    border-radius: 8px;
    padding: 8px;
    background: #f8fafc;
    break-inside: avoid;
  }

  .comparison-print-summary span {
    color: #0369a1;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .comparison-print-summary strong {
    display: block;
    margin: 4px 0;
    font-size: 12px;
  }

  .comparison-print-summary small {
    color: #475569;
    font-weight: 800;
  }

  .comparison-print-cover,
  .comparison-print-duo,
  .comparison-print-kpis,
  .comparison-print-section {
    margin-top: 8px;
    break-inside: avoid;
  }

  .comparison-print-cover {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border-radius: 12px;
    padding: 14px 16px;
    color: #ffffff;
    background: linear-gradient(120deg, #0f172a, #075985 54%, #0f766e);
  }

  .comparison-print-cover.bad {
    background: linear-gradient(120deg, #0f172a, #991b1b 54%, #7f1d1d);
  }

  .comparison-print-cover span,
  .comparison-print-section > header span,
  .comparison-print-subject header span,
  .comparison-print-kpi > span,
  .comparison-print-category header span {
    color: #0369a1;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .comparison-print-cover span,
  .comparison-print-cover small {
    color: #dbeafe;
  }

  .comparison-print-cover strong {
    display: block;
    margin: 3px 0;
    color: #ffffff;
    font-size: 18px;
    line-height: 1.12;
  }

  .comparison-print-cover small {
    font-size: 8px;
    font-weight: 800;
    line-height: 1.3;
  }

  .comparison-print-cover > b {
    color: #ffffff;
    font-size: 30px;
    line-height: 1;
  }

  .comparison-print-duo,
  .comparison-print-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .comparison-print-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .comparison-print-subject,
  .comparison-print-kpi,
  .comparison-print-category,
  .comparison-print-changes article,
  .comparison-print-periods article {
    border: 1px solid #d8e1ea;
    border-radius: 9px;
    padding: 8px;
    background: #ffffff;
    break-inside: avoid;
  }

  .comparison-print-subject {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    border-left: 4px solid #0ea5e9;
  }

  .comparison-print-subject.peer {
    border-left-color: #f472b6;
  }

  .comparison-print-subject header {
    display: grid;
    gap: 2px;
  }

  .comparison-print-subject header strong {
    color: #0f172a;
    font-size: 13px;
    line-height: 1.1;
  }

  .comparison-print-subject header small {
    color: #64748b;
    font-size: 8px;
    font-weight: 800;
  }

  .comparison-print-subject > b {
    color: #0284c7;
    font-size: 24px;
    line-height: 1;
  }

  .comparison-print-subject > i,
  .comparison-print-period-agent > i {
    grid-column: 1 / -1;
    display: block;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
  }

  .comparison-print-subject > i em,
  .comparison-print-period-agent > i em {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0ea5e9, #22c55e);
  }

  .comparison-print-subject.peer > i em,
  .comparison-print-period-agent.peer > i em {
    background: linear-gradient(90deg, #f472b6, #f97316);
  }

  .comparison-print-subject > div {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }

  .comparison-print-subject > div span {
    border-radius: 6px;
    padding: 5px;
    color: #64748b;
    background: #f8fafc;
    font-size: 7px;
    font-weight: 800;
  }

  .comparison-print-subject > div strong {
    display: block;
    color: #0f172a;
    font-size: 8px;
  }

  .comparison-print-kpi {
    display: grid;
    gap: 4px;
  }

  .comparison-print-kpi strong {
    color: #047857;
    font-size: 15px;
    line-height: 1;
  }

  .comparison-print-kpi.bad strong {
    color: #b91c1c;
  }

  .comparison-print-kpi div {
    display: grid;
    gap: 1px;
    border-radius: 6px;
    padding: 5px;
    background: #f8fafc;
  }

  .comparison-print-kpi b,
  .comparison-print-kpi em {
    color: #334155;
    font-size: 7px;
    font-style: normal;
    font-weight: 850;
  }

  .comparison-print-section > header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
  }

  .comparison-print-section > header strong {
    color: #0f172a;
    font-size: 13px;
  }

  .comparison-print-changes > div,
  .comparison-print-map > div,
  .comparison-print-periods > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .comparison-print-map {
    break-before: page;
  }

  .comparison-print-map > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .comparison-print-category {
    display: grid;
    gap: 5px;
  }

  .comparison-print-category header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px;
  }

  .comparison-print-category header span {
    grid-column: 1 / -1;
  }

  .comparison-print-category header strong {
    color: #0f172a;
    font-size: 12px;
    line-height: 1.08;
  }

  .comparison-print-category header b {
    border-radius: 999px;
    padding: 4px 6px;
    color: #047857;
    background: #dcfce7;
    font-size: 7px;
    line-height: 1;
  }

  .comparison-print-category.bad header b {
    color: #b91c1c;
    background: #fee2e2;
  }

  .comparison-print-category p {
    margin: 0;
    color: #334155;
    font-size: 7.4px;
    font-weight: 800;
    line-height: 1.28;
  }

  .comparison-print-meter {
    display: flex;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
  }

  .comparison-print-meter .good {
    background: linear-gradient(90deg, #22c55e, #14b8a6);
  }

  .comparison-print-meter .same {
    background: #94a3b8;
  }

  .comparison-print-meter .bad {
    background: linear-gradient(90deg, #fb7185, #ef4444);
  }

  .comparison-print-counts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }

  .comparison-print-counts span {
    border-radius: 6px;
    padding: 5px;
    color: #64748b;
    background: #f8fafc;
    font-size: 7px;
    font-weight: 800;
  }

  .comparison-print-counts b {
    display: block;
    color: #0f172a;
    font-size: 11px;
  }

  .comparison-print-category ul {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .comparison-print-category li,
  .comparison-print-changes article {
    display: grid;
    gap: 2px;
  }

  .comparison-print-category li {
    border-radius: 6px;
    padding: 5px;
    background: #f8fafc;
  }

  .comparison-print-category li strong,
  .comparison-print-changes article strong {
    color: #0f172a;
    font-size: 8px;
  }

  .comparison-print-category li span,
  .comparison-print-changes article p,
  .comparison-print-period-agent small {
    margin: 0;
    color: #64748b;
    font-size: 7px;
    font-weight: 800;
    line-height: 1.25;
  }

  .comparison-print-category li b,
  .comparison-print-changes article em {
    justify-self: start;
    border-radius: 999px;
    padding: 3px 6px;
    color: #047857;
    background: #dcfce7;
    font-size: 7px;
    font-style: normal;
    font-weight: 900;
  }

  .comparison-print-changes article.bad em {
    color: #b91c1c;
    background: #fee2e2;
  }

  .comparison-print-periods {
    break-before: page;
  }

  .comparison-print-periods > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .comparison-print-periods article > header {
    display: grid;
    gap: 2px;
    margin-bottom: 5px;
  }

  .comparison-print-periods article > header span {
    color: #0369a1;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .comparison-print-periods article > header strong {
    color: #0f172a;
    font-size: 13px;
  }

  .comparison-print-period-agent {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px;
    border-radius: 7px;
    padding: 6px;
    background: #f8fafc;
  }

  .comparison-print-period-agent + .comparison-print-period-agent {
    margin-top: 4px;
  }

  .comparison-print-period-agent span {
    grid-column: 1 / -1;
    color: #0369a1;
    font-size: 7px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .comparison-print-period-agent strong {
    color: #0f172a;
    font-size: 10px;
  }

  .comparison-print-period-agent > b {
    color: #0284c7;
    font-size: 14px;
    line-height: 1;
  }

  .performance-comparison-print-page .comparison-result-board,
  .performance-comparison-print-page .comparison-category-board,
  .performance-comparison-print-page .comparison-change-board,
  .performance-comparison-print-page .comparison-period-breakdown {
    margin-top: 8px;
    border: 1px solid #d8e1ea;
    border-radius: 10px;
    padding: 9px;
    background: #f8fafc !important;
    box-shadow: none !important;
    break-inside: auto;
  }

  .performance-comparison-print-page .comparison-board-head {
    gap: 2px;
    margin-bottom: 2px;
  }

  .performance-comparison-print-page .comparison-board-head h3 {
    font-size: 14px;
  }

  .performance-comparison-print-page .comparison-board-head p,
  .performance-comparison-print-page .comparison-result-story,
  .performance-comparison-print-page .comparison-category-card p {
    font-size: 8px;
    line-height: 1.28;
  }

  .performance-comparison-print-page .comparison-result-grid,
  .performance-comparison-print-page .comparison-category-grid,
  .performance-comparison-print-page .comparison-change-grid,
  .performance-comparison-print-page .comparison-period-atlas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .performance-comparison-print-page .comparison-poster-hero {
    grid-template-columns: 0.72fr 1.15fr 0.9fr;
    gap: 6px;
  }

  .performance-comparison-print-page .comparison-result-card,
  .performance-comparison-print-page .comparison-category-card,
  .performance-comparison-print-page .comparison-change-card,
  .performance-comparison-print-page .comparison-period-card {
    border: 1px solid #d8e1ea;
    border-radius: 8px;
    padding: 8px;
    background: #ffffff !important;
    box-shadow: none !important;
    break-inside: avoid;
  }

  .performance-comparison-print-page .comparison-poster-number,
  .performance-comparison-print-page .comparison-score-visual,
  .performance-comparison-print-page .comparison-poster-mini,
  .performance-comparison-print-page .comparison-poster-mini-card,
  .performance-comparison-print-page .comparison-category-counts span,
  .performance-comparison-print-page .comparison-change-row,
  .performance-comparison-print-page .comparison-period-agent-card,
  .performance-comparison-print-page .comparison-period-mini-grid span {
    border: 1px solid #d8e1ea;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  .performance-comparison-print-page .comparison-score-visual {
    gap: 6px;
  }

  .performance-comparison-print-page .comparison-score-visual-head,
  .performance-comparison-print-page .comparison-score-lane {
    grid-template-columns: 70px minmax(0, 1fr) 26px;
    gap: 4px;
  }

  .performance-comparison-print-page .comparison-score-visual-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .performance-comparison-print-page .comparison-score-lane i,
  .performance-comparison-print-page .comparison-period-score-meter {
    height: 7px;
  }

  .performance-comparison-print-page .comparison-score-visual p {
    padding: 5px;
    font-size: 7px;
  }

  .performance-comparison-print-page .comparison-category-body {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 6px;
  }

  .performance-comparison-print-page .comparison-category-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .performance-comparison-print-page .comparison-category-icon span:nth-child(1) {
    left: 7px;
    bottom: 7px;
    width: 5px;
    height: 16px;
  }

  .performance-comparison-print-page .comparison-category-icon span:nth-child(2) {
    left: 15px;
    bottom: 7px;
    width: 5px;
    height: 22px;
  }

  .performance-comparison-print-page .comparison-category-icon span:nth-child(3) {
    left: 23px;
    bottom: 7px;
    width: 5px;
    height: 12px;
  }

  .performance-comparison-print-page .comparison-result-main {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
  }

  .performance-comparison-print-page .comparison-result-person strong {
    font-size: 13px;
  }

  .performance-comparison-print-page .comparison-result-score b {
    font-size: 24px;
  }

  .performance-comparison-print-page .comparison-result-pills,
  .performance-comparison-print-page .comparison-category-counts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }

  .performance-comparison-print-page .comparison-result-pill,
  .performance-comparison-print-page .comparison-category-counts span,
  .performance-comparison-print-page .comparison-change-row {
    border-radius: 6px;
    padding: 5px;
    background: #f8fafc !important;
  }

  .performance-comparison-print-page .comparison-result-pill i,
  .performance-comparison-print-page .comparison-result-pill em,
  .performance-comparison-print-page .comparison-score-path b,
  .performance-comparison-print-page .comparison-score-path strong,
  .performance-comparison-print-page .comparison-change-card div,
  .performance-comparison-print-page .comparison-change-card strong,
  .performance-comparison-print-page .comparison-change-row b,
  .performance-comparison-print-page .comparison-change-row em {
    font-size: 7px;
  }

  .performance-comparison-print-page .comparison-score-path {
    gap: 4px;
  }

  .performance-comparison-print-page .comparison-score-path span {
    grid-template-columns: 70px minmax(0, 1fr) 30px;
    gap: 4px;
  }

  .performance-comparison-print-page .comparison-score-path i,
  .performance-comparison-print-page .comparison-category-meter {
    height: 7px;
  }

  .performance-comparison-print-page .comparison-period-mini-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }

  .performance-comparison-print-page table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
  }

  .performance-comparison-print-page th,
  .performance-comparison-print-page td {
    border: 1px solid #d8e1ea;
    padding: 3px 4px;
    text-align: left;
    vertical-align: middle;
    overflow-wrap: anywhere;
  }

  .performance-comparison-print-page th {
    color: #ffffff;
    background: #075985;
    font-size: 7px;
    text-transform: uppercase;
  }

  .performance-comparison-print-page tbody tr:nth-child(even) td {
    background: #f8fafc;
  }

  .comparison-print-metrics table {
    font-size: 6.2px;
  }

  .performance-comparison-print-page footer {
    margin-top: 9px;
    border-top: 1px solid #cbd5e1;
    padding-top: 6px;
    color: #64748b;
    text-align: center;
    font-size: 8px;
  }
}