:root {
  --bg: #f4f6f9;
  --panel: #fff;
  --text: #1b2733;
  --muted: #66788a;
  --line: #dce3eb;
  --blue: #1f73b7;
  --green: #2f9e6d;
  --red: #c9443e;
  --amber: #c98218;
  --purple: #7357c8;
  --teal: #1b9a94;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Malgun Gothic", "Apple SD Gothic Neo", Arial, sans-serif;
}

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

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
}

.is-locked .app-shell {
  filter: blur(2px);
  pointer-events: none;
  user-select: none;
}

.login-screen {
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 244, 214, 0.46), transparent 24%),
    radial-gradient(circle at 78% 70%, rgba(201, 162, 75, 0.22), transparent 28%),
    linear-gradient(126deg, #ece6d9 0%, #d2c8b6 24%, #17233a 42%, #0b1222 66%, #151b2d 100%);
  display: grid;
  inset: 0;
  overflow: auto;
  padding: 32px;
  place-items: center;
  position: fixed;
  z-index: 20;
}

.login-screen[hidden] {
  display: none;
}

.login-stage {
  align-items: center;
  display: grid;
  gap: clamp(28px, 6vw, 82px);
  grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 460px);
  max-width: 1120px;
  width: min(100%, 1120px);
}

.login-copy {
  color: #eef5ff;
  display: grid;
  gap: 22px;
  min-width: 0;
}

.login-eyebrow {
  color: #d7b96b;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.32em;
}

.login-copy h1 {
  color: #fff;
  font-size: clamp(48px, 7vw, 82px);
  letter-spacing: 0;
  line-height: 0.95;
  margin: 0;
}

.login-copy h1 b {
  color: #82d8ff;
}

.login-copy p {
  color: #c7d5e7;
  font-size: 17px;
  line-height: 1.7;
  margin: 0;
  max-width: 560px;
}

.login-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.login-proof span {
  background: rgba(13, 25, 43, 0.62);
  border: 1px solid rgba(215, 185, 107, 0.34);
  border-radius: 999px;
  color: #f1db97;
  font-size: 13px;
  font-weight: 900;
  padding: 10px 14px;
}

.login-card {
  background: linear-gradient(160deg, rgba(20, 27, 44, 0.92), rgba(9, 15, 29, 0.96));
  border: 1px solid rgba(215, 185, 107, 0.36);
  border-radius: 22px;
  box-shadow: 0 34px 100px rgba(4, 8, 18, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #f4f7fb;
  display: grid;
  gap: 18px;
  padding: 34px;
  position: relative;
  width: 100%;
}

.login-card::before {
  background: linear-gradient(90deg, transparent, #d7b96b, #fff1b7, #d7b96b, transparent);
  content: "";
  height: 2px;
  left: 22px;
  opacity: 0.85;
  position: absolute;
  right: 22px;
  top: 0;
}

.login-brand {
  align-items: center;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  margin-bottom: 4px;
}

.login-brand strong,
.login-brand span {
  display: block;
}

.login-brand span,
.login-card label,
.login-hint {
  color: #9fb0c6;
  font-size: 13px;
}

.login-card label {
  display: grid;
  gap: 7px;
  font-weight: 800;
}

.login-card input {
  background: rgba(8, 15, 28, 0.84);
  border: 1px solid rgba(215, 185, 107, 0.24);
  border-radius: 12px;
  color: #f4f7fb;
  min-height: 48px;
  outline: none;
  padding: 0 14px;
}

.login-card input:focus {
  border-color: #d7b96b;
  box-shadow: 0 0 0 3px rgba(215, 185, 107, 0.14);
}

.login-card .primary-button {
  background: linear-gradient(100deg, #b8862f, #f3e3a6 48%, #c9a24b);
  border: 0;
  border-radius: 999px;
  color: #251b07;
  font-weight: 900;
  min-height: 52px;
  text-transform: none;
}

.auth-tabs {
  background: rgba(8, 15, 28, 0.72);
  border: 1px solid rgba(215, 185, 107, 0.2);
  border-radius: 999px;
  display: grid;
  gap: 4px;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
}

.auth-tabs button {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: #9fb0c6;
  cursor: pointer;
  font-weight: 900;
  min-height: 38px;
}

.auth-tabs button.is-active {
  background: rgba(215, 185, 107, 0.16);
  color: #ffe7a8;
  box-shadow: inset 0 0 0 1px rgba(215, 185, 107, 0.3);
}

.auth-panel {
  display: none;
  gap: 14px;
}

.auth-panel.is-active {
  display: grid;
}

.signup-note {
  color: #9fb0c6;
  font-size: 12px;
  line-height: 1.6;
  margin: -2px 0 0;
}

.sidebar {
  background: #122235;
  color: #e8f0f8;
  padding: 22px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 24px;
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--blue);
  font-weight: 800;
}

.brand strong, .brand span {
  display: block;
}

.brand span {
  color: #aebed0;
  font-size: 12px;
  margin-top: 2px;
}

.nav {
  display: grid;
  gap: 5px;
}

.nav-item {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #dce8f4;
  cursor: pointer;
  padding: 12px 14px;
  text-align: left;
}

.nav-item:hover, .nav-item.is-active {
  background: #203a58;
}

.nav-item[hidden] {
  display: none;
}

.main {
  min-width: 0;
}

.topbar {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 18px 24px;
  position: sticky;
  top: 0;
  z-index: 2;
}

h1, h2, p {
  margin: 0;
}

h1 {
  font-size: 22px;
}

h2 {
  font-size: 17px;
}

.topbar p, .panel-head span {
  color: var(--muted);
  font-size: 13px;
  margin-top: 5px;
}

.top-actions, .inline-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.user-badge {
  background: #101722;
  border: 1px solid #303846;
  border-radius: 999px;
  color: #f4f7fb;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  min-height: 38px;
  align-items: center;
  padding: 0 12px;
}

.modal-backdrop {
  align-items: center;
  background: rgba(8, 14, 24, 0.62);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 20;
}

.modal-backdrop[hidden] {
  display: none;
}

.modal-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
  display: grid;
  gap: 14px;
  max-width: 420px;
  padding: 22px;
  width: min(100%, 420px);
}

.modal-card label {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 7px;
}

.ghost-button {
  background: #f4f7fb;
}

.form-note {
  color: var(--muted);
  font-size: 12px;
}

.permission-grid {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(3, minmax(70px, 1fr));
  min-width: 260px;
}

.permission-toggle {
  background: #eef3f8;
  border-color: #d6e0eb;
  color: #5f6f82;
  font-size: 11px;
  min-height: 30px;
  padding: 0 7px;
}

.permission-toggle.is-open {
  background: #e5f7ee;
  border-color: #8bd3ad;
  color: #167044;
}

.permission-toggle.is-locked {
  background: #fff1f1;
  border-color: #f1b6b6;
  color: #9c3131;
}

.permission-toggle:disabled {
  cursor: default;
  opacity: 0.78;
}

.temporary-admin {
  color: var(--muted);
  display: grid;
  font-size: 11px;
  gap: 6px;
  min-width: 150px;
}

select, input, textarea, button {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
}

select, input, button {
  min-height: 38px;
  padding: 0 11px;
}

button {
  cursor: pointer;
}

.primary-button {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  font-weight: 700;
}

.view {
  display: none;
  padding: 22px 24px 36px;
}

.view.is-active {
  display: grid;
  gap: 18px;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 12px;
}

.metric, .panel, .mini-card, .compare-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.metric {
  padding: 15px;
  min-height: 112px;
}

.metric label {
  color: var(--muted);
  display: block;
  font-size: 13px;
  margin-bottom: 12px;
}

.metric strong {
  display: block;
  font-size: 29px;
  line-height: 1;
}

.metric span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-top: 10px;
}

.two-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.panel {
  padding: 17px;
  min-width: 0;
}

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

.panel-head h2 {
  flex: 0 0 auto;
  word-break: keep-all;
}

.bar-list, .compare-list, .risk-list, .report-outline {
  display: grid;
  gap: 10px;
}

.compare-dashboard {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.compare-kpi {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 118px;
  padding: 16px;
}

.compare-kpi span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 900;
}

.compare-kpi strong {
  display: block;
  font-size: 25px;
  margin: 9px 0 7px;
}

.compare-kpi p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.kda-compare-table {
  min-width: 1180px;
}

.kda-compare-table th {
  background: #f7f9fc;
  color: #50657c;
  text-align: center;
}

.kda-compare-table td {
  vertical-align: middle;
}

.kda-compare-table strong,
.kda-compare-table small {
  display: block;
}

.kda-compare-table small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  margin-top: 4px;
}

.score-meter {
  align-items: center;
  background: #edf2f7;
  border-radius: 999px;
  display: grid;
  grid-template-columns: minmax(64px, 1fr) 34px;
  gap: 7px;
  height: 26px;
  min-width: 96px;
  overflow: hidden;
  padding: 0 7px 0 0;
}

.score-meter i {
  align-self: stretch;
  background: var(--green);
  border-radius: 999px;
  display: block;
  min-width: 8px;
}

.score-meter.warn i { background: var(--amber); }
.score-meter.risk i { background: var(--red); }
.score-meter.info i { background: var(--blue); }

.score-meter b {
  color: #25364a;
  font-size: 12px;
  text-align: right;
}

.sentiment-pill {
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  justify-content: center;
  min-width: 52px;
  padding: 6px 9px;
}

.sentiment-pill.positive {
  background: #e7f6ee;
  color: var(--green);
}

.sentiment-pill.negative {
  background: #fde8e7;
  color: var(--red);
}

.sentiment-pill.neutral {
  background: #e8f2fb;
  color: var(--blue);
}

.bar-row {
  display: grid;
  grid-template-columns: 116px 1fr 58px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.bar-track {
  background: #edf2f7;
  border-radius: 99px;
  height: 13px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 99px;
}

.donut-layout {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  align-items: center;
}

.donut {
  width: 152px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.donut::after {
  content: attr(data-total);
  width: 84px;
  aspect-ratio: 1;
  background: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 20px;
}

.legend {
  display: grid;
  gap: 8px;
  font-size: 13px;
}

.legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 8px;
}

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

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

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

.collection-grid {
  display: grid;
  grid-template-columns: repeat(9, minmax(90px, 1fr));
  gap: 10px;
}

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

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

.mini-card, .compare-card {
  padding: 14px;
}

.source-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 14px;
}

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

.source-card strong {
  font-size: 16px;
}

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

.source-card dl {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 6px 10px;
  margin: 0;
  font-size: 12px;
}

.source-card dt {
  color: var(--muted);
  font-weight: 700;
}

.source-card dd {
  margin: 0;
}

.source-card a {
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.source-card code {
  background: #f4f6f9;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #31445a;
  display: block;
  font-size: 11px;
  overflow: auto;
  padding: 8px;
  white-space: nowrap;
}

.source-priority {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.traffic-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.target-card, .sns-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.target-card span, .sns-card span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 8px;
}

.target-card strong, .sns-card strong {
  display: block;
  font-size: 20px;
  margin-bottom: 8px;
}

.target-card p, .sns-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.score-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.score-row b {
  background: #f4f6f9;
  border-radius: 6px;
  color: #31445a;
  font-size: 12px;
  padding: 6px 8px;
}

.matrix-wrap {
  overflow: auto;
}

.matrix-table {
  min-width: 900px;
  table-layout: fixed;
}

.matrix-table th small,
.matrix-table td span,
.matrix-table td small {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-weight: 400;
  margin-top: 4px;
}

.matrix-table td strong {
  display: block;
  margin-top: 8px;
}

.matrix-empty {
  color: var(--muted);
}

.compact-form {
  margin-bottom: 16px;
}

.community-card, .strategy-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.community-card span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 5px;
}

.community-card strong, .strategy-card strong {
  display: block;
  font-size: 16px;
}

.community-card p, .strategy-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.community-card dl {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 5px 8px;
  margin: 0;
  font-size: 12px;
}

.community-card dt {
  color: var(--muted);
  font-weight: 800;
}

.community-card dd {
  margin: 0;
}

.community-card a {
  color: var(--blue);
  font-size: 12px;
  text-decoration: none;
}

.traffic-card span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 8px;
}

.traffic-card strong {
  display: block;
  font-size: 19px;
  margin-bottom: 8px;
}

.traffic-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.admin-panel {
  background: #0f131a;
  border-color: #252a34;
  color: #f4f7fb;
}

.admin-panel .panel-head h2 {
  color: #ff5a1f;
  font-size: 22px;
}

.payment-panel {
  min-height: calc(100vh - 120px);
}

.admin-add-button {
  background: #101722;
  border-color: #303846;
  color: #f4f7fb;
  font-weight: 800;
  min-width: 108px;
}

.admin-panel .panel-head span,
.admin-panel label {
  color: #8fa1ba;
}

.panel-subhead {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
  margin: 22px 0 12px;
}

.panel-subhead h3 {
  color: #f4f7fb;
  font-size: 16px;
  margin: 0;
}

.panel-subhead span {
  color: #8fa1ba;
  font-size: 12px;
  font-weight: 800;
}

.action-subhead {
  align-items: center;
}

.action-subhead > div {
  min-width: 0;
}

.secondary-button {
  background: #182232;
  border: 1px solid #33445c;
  border-radius: 10px;
  color: #dff4ff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  padding: 11px 14px;
}

.secondary-button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.admin-panel input,
.admin-panel select {
  background: #121821;
  border-color: #2b3340;
  color: #f4f7fb;
}

.admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin: 12px 0 16px;
}

.admin-summary-card {
  background: #121821;
  border: 1px solid #2b3340;
  border-radius: 8px;
  padding: 14px;
}

.admin-summary-card span {
  color: #8fa1ba;
  display: block;
  font-size: 12px;
  font-weight: 800;
}

.admin-summary-card strong {
  color: #fff;
  display: block;
  font-size: 26px;
  margin-top: 8px;
}

.jarvis-monitor-panel {
  margin: 16px 0 22px;
}

.jarvis-monitor-hero {
  align-items: start;
  background: linear-gradient(135deg, #10253a 0%, #0e1721 100%);
  border: 1px solid #2b405a;
  border-radius: 14px;
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr auto;
  padding: 18px;
}

.jarvis-monitor-hero.warning {
  border-color: #8a6a28;
  box-shadow: 0 0 0 1px rgba(255, 204, 102, 0.08);
}

.jarvis-monitor-hero.critical {
  border-color: #8a3737;
  box-shadow: 0 0 0 1px rgba(255, 120, 120, 0.10);
}

.jarvis-monitor-hero span {
  color: #66d9ff;
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.jarvis-monitor-hero strong {
  color: #fff;
  display: block;
  font-size: 22px;
  margin-top: 6px;
}

.jarvis-monitor-hero p {
  color: #9eb2cf;
  line-height: 1.6;
  margin: 8px 0 0;
}

.jarvis-monitor-hero code {
  color: #c8f2ff;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.jarvis-monitor-hero dl {
  display: grid;
  gap: 8px 14px;
  grid-template-columns: auto auto;
  margin: 0;
  min-width: 260px;
}

.jarvis-monitor-hero dt {
  color: #8fa1ba;
  font-size: 12px;
  font-weight: 900;
}

.jarvis-monitor-hero dd {
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  margin: 0;
  text-align: right;
}

.jarvis-monitor-kpis {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 12px;
}

.jarvis-kpi {
  background: #121821;
  border: 1px solid #2b3340;
  border-radius: 12px;
  padding: 14px;
}

.jarvis-kpi.warning {
  border-color: #7a6229;
}

.jarvis-kpi.critical {
  border-color: #7a3333;
}

.jarvis-kpi span {
  color: #8fa1ba;
  display: block;
  font-size: 12px;
  font-weight: 900;
}

.jarvis-kpi strong {
  color: #fff;
  display: block;
  font-size: 28px;
  margin-top: 7px;
}

.jarvis-kpi.warning strong {
  color: #ffd36f;
}

.jarvis-kpi.critical strong {
  color: #ff8b8b;
}

.jarvis-kpi small {
  color: #8fa1ba;
  font-size: 12px;
  margin-left: 3px;
}

.jarvis-monitor-notes {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.jarvis-monitor-notes p {
  background: #111822;
  border-left: 4px solid #4fc3e8;
  border-radius: 10px;
  color: #c9d6e5;
  line-height: 1.6;
  margin: 0;
  padding: 12px 14px;
}

.jarvis-monitor-table {
  margin-top: 12px;
}

.jarvis-monitor-table small {
  color: #7f91aa;
  display: block;
  font-size: 11px;
  margin-top: 5px;
}

.jarvis-status {
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 900;
  padding: 6px 9px;
}

.jarvis-status.stable {
  background: rgba(55, 198, 138, 0.14);
  color: #60e4ad;
}

.jarvis-status.warning {
  background: rgba(255, 205, 93, 0.14);
  color: #ffd36f;
}

.jarvis-status.critical,
.jarvis-status.blocked {
  background: rgba(255, 111, 111, 0.14);
  color: #ff8b8b;
}

.jarvis-status.unknown {
  background: rgba(158, 178, 207, 0.14);
  color: #9eb2cf;
}

.collection-sample-panel {
  margin: 16px 0 22px;
}

.sample-crawl-toolbar {
  align-items: start;
  background: linear-gradient(135deg, #112033 0%, #0f1721 100%);
  border: 1px solid #2b405a;
  border-radius: 14px;
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr auto;
  padding: 18px;
}

.sample-crawl-toolbar span,
.sample-speech-head span {
  color: #66d9ff;
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sample-crawl-toolbar strong {
  color: #fff;
  display: block;
  font-size: 22px;
  margin-top: 6px;
}

.sample-crawl-toolbar p {
  color: #9eb2cf;
  line-height: 1.6;
  margin: 8px 0 0;
}

.sample-crawl-toolbar dl {
  display: grid;
  gap: 8px 14px;
  grid-template-columns: auto auto;
  margin: 0;
  min-width: 180px;
}

.sample-crawl-toolbar dt {
  color: #8fa1ba;
  font-size: 12px;
  font-weight: 900;
}

.sample-crawl-toolbar dd {
  color: #fff;
  font-weight: 900;
  margin: 0;
  text-align: right;
}

.sample-source-table {
  margin-top: 14px;
}

.sample-source-table td {
  vertical-align: top;
}

.sample-source-table small {
  color: #7f91aa;
  display: block;
  font-size: 11px;
  margin-top: 5px;
}

.sample-endpoint-cell {
  max-width: 260px;
  overflow-wrap: anywhere;
}

.sample-endpoint-cell a,
.sample-speech-meta a,
.metric-detail-link a {
  color: #59d8ff;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.muted-link {
  color: #7f91aa;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.sample-speech-head {
  align-items: end;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 10px;
}

.sample-speech-head h3 {
  color: #f4f7fb;
  font-size: 16px;
  margin: 0;
}

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

.sample-speech-item {
  background: #101720;
  border: 1px solid #2b3340;
  border-radius: 12px;
  color: #f4f7fb;
  overflow: hidden;
}

.sample-speech-item summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: 150px 1fr auto;
  list-style: none;
  padding: 14px 16px;
}

.sample-speech-item summary::-webkit-details-marker {
  display: none;
}

.sample-speech-item summary span {
  color: #66d9ff;
  font-size: 12px;
  font-weight: 900;
}

.sample-speech-item summary strong {
  color: #fff;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sample-speech-item summary em {
  background: #182232;
  border-radius: 999px;
  color: #9eb2cf;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  padding: 6px 9px;
}

.sample-speech-body {
  border-top: 1px solid #243347;
  padding: 14px 16px 16px;
}

.sample-speech-body p {
  color: #c9d6e5;
  line-height: 1.7;
  margin: 0;
}

.sample-speech-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin-top: 12px;
}

.sample-speech-meta span {
  color: #8fa1ba;
  font-size: 12px;
  font-weight: 800;
}

.fallback-table td {
  vertical-align: top;
}

.fallback-route-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fallback-route-list span {
  border: 1px solid #2b3340;
  border-radius: 999px;
  padding: 5px 9px;
  background: #151c27;
  color: #9eb2cf;
  font-size: 12px;
  font-weight: 800;
}

.fallback-legal-note,
.ocr-probe-card {
  margin-top: 14px;
  border: 1px solid #2b3340;
  border-radius: 14px;
  background: #111822;
  padding: 18px;
  color: #f4f7fb;
}

.fallback-legal-note strong,
.ocr-probe-card span {
  display: block;
  color: #5ed5ff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fallback-legal-note p,
.ocr-probe-card p {
  margin: 8px 0 0;
  color: #9eb2cf;
  line-height: 1.6;
}

.ocr-probe-panel {
  margin: 16px 0 22px;
}

.ocr-probe-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: start;
}

.ocr-probe-card strong {
  display: block;
  margin-top: 6px;
  font-size: 26px;
  color: #fff;
}

.ocr-probe-card dl {
  display: grid;
  grid-template-columns: auto auto;
  gap: 8px 14px;
  margin: 0;
}

.ocr-probe-card dt {
  color: #9eb2cf;
  font-size: 12px;
  font-weight: 800;
}

.ocr-probe-card dd {
  margin: 0;
  color: #fff;
  font-weight: 900;
}

.ocr-step-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.ocr-step {
  border: 1px solid #2b3340;
  border-radius: 14px;
  padding: 14px;
  background: #0f131a;
  color: #f4f7fb;
}

.ocr-step span {
  color: #9eb2cf;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.ocr-step strong {
  display: block;
  margin-top: 6px;
  color: #fff;
}

.ocr-step p {
  margin: 8px 0 0;
  color: #9eb2cf;
  font-size: 13px;
  line-height: 1.5;
}

.ocr-step.ok,
.ocr-step.ready {
  border-color: rgba(61, 213, 146, 0.35);
  background: #102119;
}

.ocr-step.error,
.ocr-step.needs_ocr_engine {
  border-color: rgba(255, 101, 128, 0.35);
  background: #211116;
}

.admin-table {
  background: #0f131a;
  color: #f4f7fb;
  min-width: 1100px;
}

.admin-table th {
  background: #101722;
  border-bottom-color: #292f3b;
  color: #6f86a7;
  text-align: center;
}

.admin-table td {
  border-bottom-color: #222834;
  color: #f4f7fb;
  padding: 18px 12px;
  vertical-align: middle;
}

.admin-table strong {
  display: block;
  font-weight: 800;
}

.admin-table small {
  color: #93a4bb;
  display: block;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 5px;
}

.admin-status {
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  min-width: 64px;
  justify-content: center;
  padding: 7px 10px;
}

.admin-status.active,
.admin-status.running,
.admin-status.ready {
  color: #39d47b;
}

.admin-status.inactive,
.admin-status.paused,
.admin-status.error,
.admin-status.rejected {
  color: #ff5e66;
}

.admin-status.pending,
.admin-status.needs_key {
  color: #ffbd4a;
}

.engine-table {
  min-width: 1680px;
}

.engine-url-cell {
  min-width: 260px;
}

.engine-url-cell small {
  max-width: 320px;
  overflow-wrap: anywhere;
}

.engine-edit {
  background: #121821;
  border-color: #303846;
  color: #f4f7fb;
  min-height: 34px;
  width: 100%;
}

.engine-edit[type="number"] {
  min-width: 64px;
}

.engine-limit-grid {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.engine-limit-grid label {
  color: #8fa1ba;
  display: grid;
  font-size: 11px;
  font-weight: 800;
  gap: 4px;
}

.engine-state {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  font-size: 13px;
  font-weight: 900;
}

.engine-state i {
  background: #ffbd4a;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(255, 189, 74, 0.12);
  display: inline-block;
  height: 13px;
  width: 13px;
}

.engine-state.normal {
  color: #39d47b;
}

.engine-state.normal i {
  background: #39d47b;
  box-shadow: 0 0 0 5px rgba(57, 212, 123, 0.13);
}

.engine-state.abnormal {
  color: #ff5e66;
}

.engine-state.abnormal i {
  background: #ff5e66;
  box-shadow: 0 0 0 5px rgba(255, 94, 102, 0.13);
}

.admin-actions {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}

.admin-actions button,
.admin-table td > button {
  background: #101722;
  border-color: #303846;
  color: #f4f7fb;
  min-height: 34px;
  padding: 0 10px;
}

.admin-actions button:hover,
.admin-table td > button:hover {
  border-color: #ff5a1f;
  color: #ff8a55;
}

.admin-pagination {
  align-items: center;
  color: #f4f7fb;
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 26px 0 4px;
}

.admin-pagination span {
  color: #f4f7fb;
  font-weight: 900;
  margin-right: 8px;
}

.admin-pagination strong,
.admin-pagination button {
  align-items: center;
  background: #101722;
  border: 1px solid #303846;
  border-radius: 8px;
  color: #f4f7fb;
  display: inline-flex;
  height: 38px;
  justify-content: center;
  min-width: 38px;
  padding: 0 10px;
}

.admin-pagination select {
  background: #101722;
  border-color: #303846;
  color: #f4f7fb;
}

.collection-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 92px;
  padding: 12px;
}

.collection-card span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 800;
}

.collection-card strong {
  display: block;
  font-size: 25px;
  margin: 8px 0 6px;
}

.collection-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.collection-card em.ok {
  color: var(--green);
}

.mini-card strong, .compare-card strong {
  display: block;
  margin-bottom: 8px;
}

.mini-card p, .compare-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.badge {
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
}

.badge.risk { background: #fde8e7; color: var(--red); }
.badge.warn { background: #fff1da; color: var(--amber); }
.badge.good { background: #e7f6ee; color: var(--green); }
.badge.info { background: #e8f2fb; color: var(--blue); }

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

.form-grid label {
  color: var(--muted);
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.form-grid button {
  align-self: end;
}

.project-builder-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.project-builder-form .project-wide {
  grid-column: 1 / -1;
}

.project-builder-form textarea {
  min-height: 96px;
  resize: vertical;
}

.project-admin-table {
  min-width: 1180px;
}

.project-admin-table td strong,
.project-admin-table td small {
  display: block;
}

.project-admin-table td small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  margin-top: 5px;
}

.keyword-groups {
  display: grid;
  gap: 7px;
  min-width: 260px;
}

.keyword-groups p,
.keyword-chip-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
}

.keyword-groups b {
  color: #33465b;
  font-size: 12px;
  min-width: 46px;
}

.keyword-groups span,
.keyword-chip-row span {
  background: #edf6ff;
  border: 1px solid #cfe4f8;
  border-radius: 999px;
  color: #0b6fb3;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 6px 9px;
}

.project-actions {
  min-width: 220px;
}

.project-actions button:nth-child(2) {
  background: #e7f6ee;
  border-color: #b9e6ca;
  color: var(--green);
}

.project-actions button:nth-child(3) {
  background: #e8f2fb;
  border-color: #cce1f4;
  color: var(--blue);
}

.table-wrap {
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}

th, td {
  border-bottom: 1px solid var(--line);
  padding: 10px 9px;
  text-align: left;
  vertical-align: top;
}

th {
  background: #f1f5f9;
  color: #33465b;
  font-size: 12px;
  white-space: nowrap;
}

.report-sheet {
  background: #fff;
  color: #111;
  min-width: 1060px;
  padding: 30px 34px 38px;
}

.report-logo-row {
  align-items: start;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.report-brand {
  align-items: center;
  display: flex;
  gap: 10px;
}

.report-symbol {
  align-items: center;
  background: linear-gradient(135deg, #1196cf, #e0176a);
  border-radius: 6px;
  color: #fff;
  display: flex;
  font-size: 24px;
  font-weight: 900;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.report-brand strong {
  display: block;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0;
}

.report-brand span {
  color: #8b949e;
  display: block;
  font-size: 12px;
  font-weight: 700;
}

.report-client {
  color: #0a77bd;
  text-align: right;
}

.report-client strong {
  display: block;
  font-size: 24px;
  font-weight: 900;
}

.report-client span {
  color: #b7c1cc;
  display: block;
  font-size: 15px;
  letter-spacing: 4px;
  margin-top: 2px;
}

.report-title-row {
  align-items: stretch;
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.report-title-box {
  align-items: center;
  border: 4px solid #e25762;
  border-radius: 8px;
  color: #d10000;
  display: flex;
  font-size: 22px;
  font-weight: 900;
  min-height: 50px;
  padding: 0 18px;
}

.report-channel-badge {
  align-items: center;
  background: #e45d64;
  border-radius: 8px;
  color: #fff;
  display: flex;
  font-size: 22px;
  font-weight: 900;
  justify-content: center;
  min-width: 130px;
  padding: 0 24px;
}

.report-meta-grid {
  border: 1px solid #d9d9d9;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 12px;
}

.report-meta-grid div {
  border-right: 1px solid #d9d9d9;
  min-height: 50px;
  padding: 8px 10px;
}

.report-meta-grid div:last-child {
  border-right: 0;
}

.report-meta-grid span {
  color: #666;
  display: block;
  font-size: 11px;
  margin-bottom: 4px;
}

.report-meta-grid strong {
  display: block;
  font-size: 13px;
}

.report-table-scroll {
  border: 1px solid #d6d6d6;
  overflow: auto;
}

.report-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.report-table th,
.report-table td {
  border-bottom: 1px solid #d9d9d9;
  border-right: 1px solid #d9d9d9;
  color: #111;
  font-size: 12px;
  line-height: 1.45;
  padding: 10px 8px;
  word-break: keep-all;
}

.report-table th:last-child,
.report-table td:last-child {
  border-right: 0;
}

.report-table thead th {
  background: #f8cfd2;
  color: #111;
  font-weight: 900;
  text-align: center;
  vertical-align: middle;
}

.report-table tbody td {
  min-height: 76px;
  vertical-align: middle;
}

.report-table tbody tr:nth-child(even) td {
  background: #fbfbfb;
}

.report-table tbody tr:hover td {
  background: #fff8f8;
}

.col-no { width: 38px; }
.col-dim { width: 70px; }
.col-keyword { width: 84px; }
.col-title { width: 180px; }
.col-content { width: auto; }
.col-score { width: 70px; }
.col-author { width: 78px; }
.col-date { width: 98px; }

.cell-center {
  text-align: center;
  white-space: pre-line;
}

.cell-content {
  text-align: center;
}

.report-status {
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 900;
  height: 24px;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 0 8px;
}

.report-status.risk {
  background: #fde5e4;
  color: #c72424;
}

.report-status.warn {
  background: #fff0d8;
  color: #9c5b00;
}

.report-status.good {
  background: #e5f5ed;
  color: #177c4f;
}

.report-status.info {
  background: #e7f1fb;
  color: #1769a8;
}

.report-empty {
  color: #777;
  height: 120px;
  text-align: center;
}

.report-footnote {
  color: #e05b62;
  font-size: 11px;
  margin-top: 10px;
  text-align: right;
}

.risk-item {
  border-left: 4px solid var(--red);
  background: #fffafa;
  border-radius: 0 6px 6px 0;
  padding: 12px;
}

.risk-item p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  margin-top: 6px;
}

.report-step {
  border-left: 4px solid var(--blue);
  background: #f7fbff;
  border-radius: 0 6px 6px 0;
  padding: 12px;
}

.summary-box {
  min-height: 260px;
  padding: 12px;
  resize: vertical;
  width: 100%;
  line-height: 1.6;
}

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

.report-page {
  background: #fff;
  border: 1px solid #d8dfe8;
  border-radius: 8px;
  display: grid;
  gap: 18px;
  margin: 0 auto;
  max-width: 1180px;
  min-width: 980px;
  padding: 26px;
}

.report-cover {
  align-items: center;
  background: linear-gradient(135deg, #f5fafe 0%, #ffffff 54%, #fff7f8 100%);
  border: 1px solid #d9e8f5;
  border-bottom: 5px solid #0d73b9;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 22px;
}

.report-cover span {
  color: #0d73b9;
  font-size: 13px;
  font-weight: 900;
}

.report-cover h2 {
  font-size: 30px;
  margin: 5px 0;
}

.report-cover p {
  color: var(--muted);
  font-size: 14px;
}

.report-score {
  align-items: center;
  background: #f2f8fd;
  border: 1px solid #cfe3f5;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  height: 116px;
  justify-content: center;
  width: 116px;
}

.report-score strong {
  color: #0d73b9;
  font-size: 32px;
}

.report-score span {
  color: #31445a;
  font-size: 12px;
}

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

.report-role-note {
  background: #f8fafc;
  border: 1px solid #dce3eb;
  border-left: 5px solid #0d73b9;
  border-radius: 8px;
  padding: 14px 16px;
}

.report-role-note strong {
  display: block;
  font-size: 15px;
  margin-bottom: 6px;
}

.report-role-note p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.report-kpi, .report-block {
  border: 1px solid #dce3eb;
  border-radius: 8px;
  background: #fff;
}

.report-kpi {
  padding: 14px;
}

.report-kpi span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 800;
}

.report-kpi strong {
  display: block;
  font-size: 27px;
  margin: 8px 0;
}

.report-kpi p {
  color: var(--muted);
  font-size: 12px;
}

.report-chart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.report-block {
  padding: 16px;
}

.report-block:nth-of-type(odd) {
  box-shadow: 0 8px 22px rgba(30, 55, 90, 0.05);
}

.report-block h3 {
  font-size: 17px;
  margin: 0 0 14px;
}

.report-bars {
  display: grid;
  gap: 11px;
}

.report-bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 42px;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}

.report-bar-row div {
  background: #edf2f7;
  border-radius: 999px;
  height: 14px;
  overflow: hidden;
}

.report-bar-row i {
  background: #3aa0dd;
  border-radius: inherit;
  display: block;
  height: 100%;
}

.report-donut-wrap {
  align-items: center;
  display: grid;
  grid-template-columns: 156px 1fr;
  gap: 16px;
}

.report-donut {
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  width: 148px;
}

.report-donut::after {
  align-items: center;
  background: #fff;
  border-radius: 50%;
  content: attr(data-total);
  display: flex;
  font-size: 22px;
  font-weight: 900;
  height: 82px;
  justify-content: center;
  width: 82px;
}

.report-legend {
  display: grid;
  gap: 8px;
  font-size: 13px;
}

.report-legend i {
  border-radius: 2px;
  display: inline-block;
  height: 10px;
  margin-right: 7px;
  width: 10px;
}

.trend-chart {
  align-items: end;
  display: flex;
  gap: 12px;
  min-height: 160px;
  padding-top: 14px;
}

.trend-column {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
}

.trend-column i {
  background: #f5a524;
  border-radius: 5px 5px 0 0;
  display: block;
  min-width: 22px;
  width: 60%;
}

.trend-column span {
  color: var(--muted);
  font-size: 11px;
}

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

.report-target-card, .engine-card {
  background: #f8fafc;
  border: 1px solid #e1e8f0;
  border-radius: 8px;
  padding: 12px;
}

.report-target-card span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 800;
}

.report-target-card strong, .engine-card strong {
  display: block;
  margin: 6px 0;
}

.report-target-card p, .report-target-card small, .engine-card p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

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

.mini-result-list article {
  border-top: 1px solid #e1e8f0;
  padding-top: 10px;
}

.mini-result-list strong {
  display: block;
  margin: 7px 0;
}

.mini-result-list p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.engine-summary, .ai-prompt {
  background: #f8fafc;
  border: 1px solid #e1e8f0;
  border-radius: 8px;
  color: #243447;
  font-family: inherit;
  line-height: 1.7;
  margin: 0;
  max-height: 280px;
  overflow: auto;
  padding: 14px;
  white-space: pre-wrap;
}

.report-reference {
  background: #f8fafc;
  border: 1px solid #e1e8f0;
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.report-reference p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.report-reference strong {
  color: var(--text);
}

.kda-report-page {
  background: #f8fbff;
  border-color: #cbd8e6;
  gap: 22px;
  padding: 22px;
}

.report-slide {
  background: #fff;
  border: 1px solid #d9e1ea;
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(17, 42, 74, 0.08);
  display: grid;
  gap: 18px;
  min-height: 520px;
  overflow: hidden;
  padding: 28px;
  position: relative;
  animation: reportSlideIn 620ms ease both;
}

.report-slide:nth-child(2) { animation-delay: 60ms; }
.report-slide:nth-child(3) { animation-delay: 100ms; }
.report-slide:nth-child(4) { animation-delay: 140ms; }
.report-slide:nth-child(5) { animation-delay: 180ms; }
.report-slide:nth-child(6) { animation-delay: 220ms; }

.report-slide::before {
  background: linear-gradient(180deg, #0a8cd1, #00afd7 52%, #e40066);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 6px;
}

.slide-cover {
  align-items: center;
  background:
    radial-gradient(circle at 88% 18%, rgba(0, 173, 215, 0.16), transparent 24%),
    linear-gradient(135deg, #ffffff 0%, #f5fbff 55%, #fff7fb 100%);
  grid-template-columns: 1fr 180px;
  min-height: 560px;
}

.kda-logo-strip {
  align-items: center;
  display: flex;
  grid-column: 1 / -1;
  justify-content: space-between;
  min-height: 62px;
}

.kda-wordmark,
.kda-client-mark {
  align-items: center;
  display: flex;
  gap: 10px;
}

.kda-symbol {
  align-items: center;
  background: linear-gradient(135deg, #00a3d7 0%, #e40066 78%);
  border-radius: 8px;
  color: #fff;
  display: flex;
  font-size: 25px;
  font-weight: 900;
  height: 46px;
  justify-content: center;
  transform: rotate(-12deg);
  width: 46px;
}

.kda-wordmark strong {
  display: block;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

.kda-wordmark small,
.kda-client-mark span {
  color: #9da8b4;
  display: block;
  font-size: 12px;
  font-weight: 800;
}

.kda-client-mark {
  color: #0572b8;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}

.kda-client-mark strong {
  font-size: 21px;
  font-weight: 900;
}

.slide-cover-copy {
  max-width: 740px;
}

.slide-kicker,
.slide-section-head span {
  color: #0087c7;
  display: block;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.slide-cover-copy h2 {
  color: #071827;
  font-size: 48px;
  line-height: 1.16;
  margin: 14px 0 16px;
}

.slide-cover-copy p {
  color: #3c5268;
  font-size: 17px;
  line-height: 1.65;
}

.slide-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.slide-meta-row span {
  background: #eef8ff;
  border: 1px solid #cce9fb;
  border-radius: 999px;
  color: #175f90;
  font-size: 13px;
  font-weight: 900;
  padding: 9px 13px;
}

.slide-score-ring {
  align-items: center;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at center, #fff 0 52%, transparent 53%),
    conic-gradient(#0aa7d8 0 var(--score), #e7edf4 0 100%);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-self: center;
  min-width: 160px;
  padding: 18px;
  text-align: center;
  animation: ringPulse 1800ms ease-in-out infinite;
}

.slide-score-ring strong {
  color: #0a73b8;
  font-size: 28px;
  font-weight: 900;
}

.slide-score-ring span {
  color: #40566d;
  font-size: 12px;
  font-weight: 900;
}

.motion-orbit {
  align-items: center;
  aspect-ratio: 1;
  display: flex;
  grid-column: 1 / -1;
  height: 300px;
  justify-content: center;
  justify-self: center;
  margin-top: -16px;
  position: relative;
  width: 300px;
}

.motion-orbit::before {
  background: radial-gradient(circle, rgba(10, 167, 216, 0.2), transparent 62%);
  border-radius: 50%;
  content: "";
  inset: 42px;
  position: absolute;
}

.motion-orbit > strong {
  align-items: center;
  background: #071827;
  border: 6px solid #fff;
  border-radius: 50%;
  box-shadow: 0 18px 38px rgba(7, 24, 39, 0.24);
  color: #fff;
  display: flex;
  font-size: 30px;
  font-weight: 900;
  height: 96px;
  justify-content: center;
  position: relative;
  width: 96px;
  z-index: 3;
}

.orbit-ring {
  border: 1px solid rgba(10, 167, 216, 0.26);
  border-radius: 50%;
  position: absolute;
}

.ring-one {
  inset: 18px;
  animation: rotateOrbit 10s linear infinite;
}

.ring-two {
  border-color: rgba(228, 0, 102, 0.24);
  inset: 48px;
  animation: rotateOrbit 7s linear infinite reverse;
}

.ring-three {
  border-color: rgba(38, 166, 154, 0.26);
  inset: 78px;
  animation: rotateOrbit 12s linear infinite;
}

.orbit-node {
  align-items: center;
  background: #fff;
  border: 1px solid #dce8f4;
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(15, 54, 89, 0.14);
  display: flex;
  flex-direction: column;
  font-style: normal;
  gap: 2px;
  min-width: 86px;
  padding: 9px 12px;
  position: absolute;
  z-index: 4;
}

.orbit-node b {
  color: #0a73b8;
  font-size: 11px;
  font-weight: 900;
}

.orbit-node small {
  color: #071827;
  font-size: 18px;
  font-weight: 900;
}

.node-1 { left: 4px; top: 74px; }
.node-2 { right: 0; top: 58px; }
.node-3 { bottom: 24px; left: 50%; transform: translateX(-50%); }

.impact-ticker {
  background: #071827;
  border-radius: 8px;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
}

.impact-ticker div {
  background: linear-gradient(180deg, #102a42, #071827);
  min-height: 82px;
  padding: 16px 14px;
}

.impact-ticker span {
  color: #8db5d4;
  display: block;
  font-size: 12px;
  font-weight: 900;
}

.impact-ticker strong {
  color: #fff;
  display: block;
  font-size: 20px;
  margin-top: 8px;
  overflow-wrap: anywhere;
}

.decision-ranking-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ranking-panel {
  --rankColor: #0aa7d8;
  --rankSoft: #eaf8ff;
  background: #fff;
  border: 1px solid #dbe6f0;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(19, 52, 84, 0.08);
  min-height: 302px;
  overflow: hidden;
}

.ranking-risk {
  --rankColor: #e45d64;
  --rankSoft: #fff0f1;
}

.ranking-marketing {
  --rankColor: #f5a524;
  --rankSoft: #fff7e5;
}

.ranking-branding {
  --rankColor: #26a69a;
  --rankSoft: #eaf9f7;
}

.ranking-panel-head {
  background: linear-gradient(135deg, var(--rankSoft), #fff);
  border-bottom: 1px solid #dbe6f0;
  padding: 15px 16px;
}

.ranking-panel-head span {
  color: var(--rankColor);
  display: block;
  font-size: 12px;
  font-weight: 900;
}

.ranking-panel-head h4 {
  color: #071827;
  font-size: 20px;
  margin: 5px 0 0;
}

.ranking-list {
  display: grid;
  gap: 0;
}

.ranking-list article {
  align-items: center;
  border-bottom: 1px solid #edf2f7;
  display: grid;
  gap: 10px;
  grid-template-columns: 34px minmax(0, 1fr) 58px;
  min-height: 46px;
  padding: 10px 14px;
}

.ranking-list article:last-child {
  border-bottom: 0;
}

.ranking-list article.is-top {
  background: var(--rankSoft);
}

.ranking-list em {
  align-items: center;
  background: var(--rankColor);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.ranking-list strong {
  color: #0b1724;
  display: block;
  font-size: 14px;
  line-height: 1.25;
}

.ranking-list span {
  color: #697d91;
  display: block;
  font-size: 11px;
  font-weight: 800;
  margin: 3px 0 6px;
}

.ranking-list i {
  background: var(--rankColor);
  border-radius: 999px;
  display: block;
  height: 6px;
  width: var(--rank);
  animation: widthGrowRank 860ms ease both;
}

.ranking-list b {
  color: var(--rankColor);
  font-size: 15px;
  font-weight: 900;
  text-align: right;
}

.slide-section-head {
  align-items: end;
  border-bottom: 2px solid #e7edf4;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
}

.slide-section-head h3 {
  color: #0b1724;
  font-size: 26px;
  margin: 0;
}

.slide-summary {
  min-height: 430px;
}

.summary-callout {
  background: linear-gradient(135deg, #f7fbff, #fff);
  border: 1px solid #dce8f4;
  border-left: 6px solid #00a3d7;
  border-radius: 8px;
  padding: 18px 20px;
}

.summary-callout strong {
  display: block;
  font-size: 18px;
  margin-bottom: 8px;
}

.summary-callout p {
  color: #40566d;
  font-size: 14px;
  line-height: 1.7;
}

.slide-two-column {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.report-visual-block {
  min-height: 260px;
}

.report-block h4 {
  color: #13283d;
  font-size: 17px;
  margin: 0 0 14px;
}

.report-wide-chart {
  min-height: 230px;
}

.data-flow-diagram {
  align-items: center;
  background: linear-gradient(135deg, #f8fbff, #fff);
  border: 1px solid #dbe7f2;
  border-radius: 8px;
  display: grid;
  gap: 16px;
  grid-template-columns: 1.1fr 110px 180px 110px 1fr;
  min-height: 154px;
  padding: 18px;
}

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

.flow-source,
.flow-report-grid div {
  background: #fff;
  border: 1px solid #dbe7f2;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(18, 52, 84, 0.08);
  min-height: 54px;
  padding: 10px;
}

.flow-source span {
  color: #6d8195;
  display: block;
  font-size: 11px;
  font-weight: 900;
}

.flow-source strong {
  color: #071827;
  display: block;
  font-size: 22px;
}

.flow-pipe {
  display: grid;
  gap: 8px;
}

.flow-pipe i {
  background: linear-gradient(90deg, rgba(10, 167, 216, 0), #0aa7d8, rgba(228, 0, 102, 0));
  border-radius: 999px;
  display: block;
  height: 5px;
  overflow: hidden;
  position: relative;
}

.flow-pipe i::after {
  background: #fff;
  border-radius: inherit;
  content: "";
  height: 100%;
  left: -30%;
  position: absolute;
  top: 0;
  width: 30%;
  animation: flowPulse 1.8s linear infinite;
}

.flow-engine {
  align-items: center;
  background: linear-gradient(135deg, #071827, #0a73b8);
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex-direction: column;
  height: 150px;
  justify-content: center;
  text-align: center;
}

.flow-engine span {
  color: #aeeaff;
  font-size: 12px;
  font-weight: 900;
}

.flow-engine strong {
  font-size: 15px;
  line-height: 1.35;
  margin-top: 7px;
  max-width: 108px;
}

.flow-report-grid div {
  align-items: center;
  color: #0a73b8;
  display: flex;
  font-size: 13px;
  font-weight: 900;
  justify-content: center;
  text-align: center;
}

.report-bar-row i,
.trend-column i {
  animation: chartGrow 900ms ease both;
  transform-origin: bottom left;
}

.report-donut {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), 0 18px 34px rgba(25, 52, 80, 0.18);
  animation: donutPop 700ms ease both;
  position: relative;
}

.report-donut::before {
  background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.8), transparent 24%);
  border-radius: 50%;
  content: "";
  inset: 0;
  position: absolute;
  animation: donutSweep 2.8s linear infinite;
}

.share-ladder {
  display: grid;
  gap: 12px;
}

.share-ladder-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 38px 110px minmax(0, 1fr) 56px;
}

.share-ladder-row span {
  color: #00a3d7;
  font-size: 18px;
  font-weight: 900;
  text-align: center;
}

.share-ladder-row strong {
  color: #13283d;
  font-size: 13px;
}

.share-ladder-row div {
  background: #edf3f8;
  border-radius: 999px;
  height: 18px;
  overflow: hidden;
}

.share-ladder-row i {
  background: linear-gradient(90deg, #2fa2df, #41c2c0);
  border-radius: inherit;
  display: block;
  height: 100%;
  width: var(--bar);
  animation: widthGrow 920ms ease both;
}

.share-ladder-row b {
  color: #40566d;
  font-size: 12px;
  text-align: right;
}

.rank-card {
  border: 1px solid #d8e1ea;
  border-radius: 8px;
  overflow: hidden;
}

.rank-card div {
  align-items: center;
  background: #f8fafc;
  border-bottom: 1px solid #d8e1ea;
  display: grid;
  gap: 10px;
  grid-template-columns: 54px 1fr 62px;
  min-height: 46px;
  padding: 0 12px;
}

.rank-card div:last-child {
  border-bottom: 0;
}

.rank-card .is-first {
  background: #07aede;
  color: #fff;
}

.rank-card span,
.rank-card strong,
.rank-card em {
  font-style: normal;
  font-weight: 900;
}

.target-score-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.comparison-radar {
  align-items: stretch;
  background: #071827;
  border-radius: 8px;
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr 230px;
  min-height: 250px;
  overflow: hidden;
  padding: 18px;
}

.radar-stage {
  background:
    radial-gradient(circle at center, transparent 0 24%, rgba(255, 255, 255, 0.08) 25% 25.5%, transparent 26% 49%, rgba(255, 255, 255, 0.08) 50% 50.5%, transparent 51%),
    linear-gradient(90deg, transparent 49.5%, rgba(255, 255, 255, 0.12) 50%, transparent 50.5%),
    linear-gradient(0deg, transparent 49.5%, rgba(255, 255, 255, 0.12) 50%, transparent 50.5%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  min-height: 214px;
  position: relative;
}

.radar-bubble {
  align-items: center;
  background: rgba(10, 167, 216, 0.86);
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  box-shadow: 0 0 34px rgba(10, 167, 216, 0.38);
  color: #fff;
  display: flex;
  flex-direction: column;
  font-style: normal;
  height: var(--size);
  justify-content: center;
  padding: 8px;
  position: absolute;
  text-align: center;
  width: var(--size);
  animation: bubbleFloat 3.2s ease-in-out infinite;
}

.bubble-1 { left: 9%; top: 14%; }
.bubble-2 { left: 42%; top: 22%; animation-delay: 240ms; }
.bubble-3 { right: 10%; top: 10%; animation-delay: 480ms; }
.bubble-4 { left: 24%; bottom: 10%; animation-delay: 720ms; }
.bubble-5 { right: 20%; bottom: 15%; animation-delay: 960ms; }

.radar-bubble strong {
  font-size: 12px;
  line-height: 1.2;
  max-width: 92px;
}

.radar-bubble em {
  font-size: 18px;
  font-style: normal;
  font-weight: 900;
}

.radar-caption {
  align-content: center;
  color: #fff;
  display: grid;
}

.radar-caption strong {
  display: block;
  font-size: 26px;
  line-height: 1.25;
}

.radar-caption p {
  color: #b8d8ee;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 10px;
}

.target-score-card {
  background: #f8fbff;
  border: 1px solid #dbe6f0;
  border-radius: 8px;
  min-height: 142px;
  padding: 14px;
}

.target-score-card span {
  color: #7b8b9b;
  display: block;
  font-size: 12px;
  font-weight: 900;
}

.target-score-card strong {
  color: #0b1724;
  display: block;
  font-size: 18px;
  margin: 8px 0;
}

.target-score-card p {
  color: #52687f;
  font-size: 12px;
  line-height: 1.45;
}

.score-pair {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.score-pair em {
  background: #eaf7ef;
  border-radius: 999px;
  color: #16834e;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  padding: 5px 8px;
}

.score-pair .is-risk {
  background: #ffe9eb;
  color: #c92835;
}

.risk-matrix {
  background:
    linear-gradient(90deg, transparent 49.5%, rgba(13, 115, 185, 0.18) 50%, transparent 50.5%),
    linear-gradient(0deg, transparent 49.5%, rgba(228, 93, 100, 0.18) 50%, transparent 50.5%),
    linear-gradient(135deg, #f8fbff, #fff);
  border: 1px solid #dbe6f0;
  border-radius: 8px;
  height: 250px;
  overflow: hidden;
  position: relative;
}

.matrix-label {
  color: #6d8195;
  font-size: 11px;
  font-weight: 900;
  position: absolute;
}

.matrix-label.top { left: 14px; top: 10px; }
.matrix-label.right { right: 12px; top: 50%; transform: translateY(-50%); }
.matrix-label.bottom { bottom: 10px; left: 14px; }

.matrix-dot {
  background: #0aa7d8;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(8, 46, 82, 0.22);
  height: 16px;
  position: absolute;
  transform: translate(-50%, 50%);
  width: 16px;
  animation: matrixPop 900ms ease both;
}

.matrix-dot.is-risk {
  background: #e45d64;
}

.matrix-dot.is-opportunity {
  background: #26a69a;
}

.sentiment-ribbon {
  background: #fff;
  border: 1px solid #dbe6f0;
  border-radius: 8px;
  padding: 14px;
}

.ribbon-track {
  background: #eef3f8;
  border-radius: 999px;
  display: flex;
  height: 28px;
  overflow: hidden;
}

.ribbon-track i {
  display: block;
  height: 100%;
  min-width: 4px;
  animation: widthGrowVar 900ms ease both;
}

.ribbon-track .positive {
  background: #0aa7d8;
  width: var(--pos);
}

.ribbon-track .negative {
  background: #e45d64;
  width: var(--neg);
}

.ribbon-track .neutral {
  background: #b8c1ca;
  width: var(--neu);
}

.ribbon-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.ribbon-labels span {
  color: #40566d;
  font-size: 12px;
  font-weight: 900;
}

.brand-funnel {
  display: grid;
  gap: 12px;
}

.funnel-row {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 94px minmax(0, 1fr) 48px;
}

.funnel-row span {
  color: #40566d;
  font-size: 12px;
  font-weight: 900;
}

.funnel-row i {
  background: linear-gradient(90deg, var(--funnelColor), color-mix(in srgb, var(--funnelColor) 68%, #fff));
  border-radius: 999px;
  display: block;
  height: 28px;
  width: var(--funnel);
  animation: widthGrowFunnel 1s ease both;
}

.funnel-row strong {
  color: #071827;
  font-size: 15px;
  font-weight: 900;
  text-align: right;
}

.compact-engine-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.enhanced-reference {
  border-left: 6px solid #0aa7d8;
}

.slide-final {
  min-height: 460px;
}

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

@keyframes rotateOrbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes ringPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}

@keyframes chartGrow {
  from { transform: scaleY(0.08); }
  to { transform: scaleY(1); }
}

@keyframes widthGrow {
  from { width: 0; }
  to { width: var(--bar); }
}

@keyframes donutPop {
  from { opacity: 0; transform: scale(0.88) rotate(-18deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes donutSweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes matrixPop {
  from { opacity: 0; transform: translate(-50%, 50%) scale(0.2); }
  to { opacity: 1; transform: translate(-50%, 50%) scale(1); }
}

@keyframes flowPulse {
  from { left: -30%; }
  to { left: 100%; }
}

@keyframes bubbleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes widthGrowVar {
  from { width: 0; }
}

@keyframes widthGrowFunnel {
  from { width: 0; }
  to { width: var(--funnel); }
}

@keyframes widthGrowRank {
  from { width: 0; }
  to { width: var(--rank); }
}

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

  body.printing-report {
    background: #fff;
  }

  body.printing-report .login-screen,
  body.printing-report .sidebar,
  body.printing-report .topbar,
  body.printing-report .panel-head,
  body.printing-report .toast,
  body.printing-report .view:not(#view-reports) {
    display: none !important;
  }

  body.printing-report .app-shell,
  body.printing-report .main,
  body.printing-report #view-reports,
  body.printing-report #view-reports .panel,
  body.printing-report .auto-report {
    background: #fff !important;
    border: 0 !important;
    display: block !important;
    height: auto !important;
    margin: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    padding: 0 !important;
    width: 100% !important;
  }

  body.printing-report .report-page {
    border: 0;
    box-shadow: none;
    max-width: none;
    min-width: 0;
    padding: 0;
  }

  body.printing-report .report-slide {
    break-after: page;
    box-shadow: none;
    min-height: auto;
    page-break-after: always;
  }
}

.toast {
  background: #122235;
  border-radius: 8px;
  bottom: 18px;
  color: #fff;
  display: none;
  left: 50%;
  padding: 10px 14px;
  position: fixed;
  transform: translateX(-50%);
}

.toast.is-visible {
  display: block;
}

.published-report-shell {
  background: linear-gradient(180deg, #e7eef5 0%, #f4f7fa 100%);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  min-height: 760px;
  overflow: hidden;
}

.published-report-frame {
  background: #eef3f8;
  border: 0;
  display: block;
  height: min(1180px, calc(100vh - 132px));
  min-height: 760px;
  width: 100%;
}

.dashboard-view.is-active {
  display: grid;
  gap: 20px;
}

.dashboard-hero {
  align-items: start;
  background: linear-gradient(135deg, #0e2c43 0%, #143f58 58%, #eef6fb 58.2%, #fff 100%);
  border: 1px solid rgba(15, 53, 80, 0.18);
  border-radius: 18px;
  color: #fff;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 188px;
  overflow: hidden;
  padding: 28px;
}

.dashboard-eyebrow {
  color: #6bdcff;
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  margin-bottom: 12px;
}

.dashboard-hero h2 {
  font-size: 34px;
  line-height: 1.12;
  margin: 0 0 12px;
}

.dashboard-hero p {
  color: #c8e4f4;
  font-size: 15px;
  margin: 0;
}

.dashboard-live-pill {
  align-items: center;
  align-self: start;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(10, 36, 56, 0.12);
  border-radius: 999px;
  color: #153247;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  gap: 8px;
  padding: 10px 14px;
  white-space: nowrap;
}

.dashboard-live-pill span {
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.16);
  height: 9px;
  width: 9px;
}

.dashboard-metrics {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.dashboard-metric {
  appearance: none;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #dbe7f2;
  box-shadow: 0 14px 34px rgba(31, 58, 83, 0.07);
  cursor: pointer;
  font: inherit;
  text-align: left;
  min-height: 138px;
  overflow: hidden;
  padding: 18px;
  position: relative;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  width: 100%;
}

.dashboard-metric:hover,
.dashboard-metric:focus-visible,
.dashboard-metric.is-selected {
  border-color: var(--tone, var(--blue));
  box-shadow: 0 18px 44px rgba(29, 143, 209, 0.18);
  outline: none;
  transform: translateY(-2px);
}

.dashboard-metric::before {
  background: var(--tone, var(--blue));
  content: "";
  inset: 0 auto 0 0;
  position: absolute;
  width: 5px;
}

.dashboard-metric span,
.dashboard-metric p {
  color: #7790a6;
  display: block;
  font-size: 13px;
  margin: 0;
}

.dashboard-metric strong {
  color: #10243a;
  display: block;
  font-size: 34px;
  line-height: 1;
  margin: 18px 0 10px;
}

.dashboard-metric i {
  background: var(--tone, var(--blue));
  border-radius: 999px;
  bottom: 0;
  display: block;
  height: 5px;
  left: 0;
  position: absolute;
  width: var(--metric-progress, 24%);
  animation: widthGrowVar 900ms ease both;
}

.dashboard-tone-0 { --tone: #1d8fd1; }
.dashboard-tone-1 { --tone: #d09a28; }
.dashboard-tone-2 { --tone: #229566; }
.dashboard-tone-3 { --tone: #cf5757; }
.dashboard-tone-4 { --tone: #8d5cf6; }

.dashboard-panel {
  background: #fff;
  border: 1px solid #dbe7f2;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(31, 58, 83, 0.07);
  padding: 20px;
}

.metric-detail-panel {
  background: linear-gradient(135deg, #f8fcff 0%, #ffffff 64%);
  border-color: #cfe2f2;
  padding: 22px;
}

.metric-detail-panel[hidden] {
  display: none;
}

.metric-detail-head {
  align-items: start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.metric-detail-head span {
  color: #0b79bd;
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  margin-bottom: 7px;
}

.metric-detail-head h2 {
  color: #10243a;
  font-size: 23px;
  margin: 0 0 6px;
}

.metric-detail-head p {
  color: #637e96;
  font-size: 14px;
  margin: 0;
}

.metric-detail-close {
  background: #102f4a;
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font-weight: 900;
  padding: 10px 15px;
  white-space: nowrap;
}

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

.metric-detail-card {
  background: #fff;
  border: 1px solid #dce8f3;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(25, 55, 82, 0.06);
  min-height: 170px;
  padding: 16px;
}

.metric-detail-source {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-bottom: 11px;
}

.metric-detail-source b {
  background: #e8f4fd;
  border-radius: 999px;
  color: #0876b7;
  font-size: 12px;
  padding: 6px 9px;
  white-space: nowrap;
}

.metric-detail-source span {
  color: #7b92a8;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-detail-card strong {
  color: #11263b;
  display: block;
  font-size: 16px;
  line-height: 1.45;
  margin-bottom: 8px;
}

.metric-detail-card p {
  color: #49657d;
  display: -webkit-box;
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 10px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.metric-detail-link {
  margin: 0 0 12px;
}

.metric-detail-scores {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.metric-detail-scores span,
.metric-detail-scores em {
  background: #f2f7fb;
  border-radius: 999px;
  color: #506b82;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  padding: 7px 9px;
}

.metric-detail-scores em {
  background: #fff0f0;
  color: #c94f4f;
}

.dashboard-panel-head {
  align-items: start;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.dashboard-panel-head h2 {
  color: #13283d;
  font-size: 18px;
  margin: 0 0 5px;
}

.dashboard-panel-head span,
.dashboard-panel-head b {
  color: #7891a8;
  font-size: 13px;
}

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

.dashboard-collection-card {
  border-radius: 14px;
  min-height: 108px;
  padding: 13px;
}

.dashboard-collection-card span {
  color: #607b92;
  font-size: 12px;
  font-weight: 800;
}

.dashboard-collection-card strong {
  color: #172d42;
  display: block;
  font-size: 25px;
  margin: 14px 0 8px;
}

.dashboard-collection-card em {
  color: #9aaaba;
  font-style: normal;
  font-weight: 800;
}

.dashboard-collection-card.is-active {
  background: #eef8f4;
  border-color: #bfe8d8;
}

.dashboard-split {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
}

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

.dashboard-bar-list .bar-row {
  grid-template-columns: 132px minmax(0, 1fr) 56px;
}

.dashboard-bar-list .bar-track {
  background: #e8f0f7;
  height: 16px;
}

.dashboard-bar-list .bar-fill {
  animation: widthGrowVar 850ms ease both;
}

.dashboard-donut-layout {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: 178px minmax(0, 1fr);
}

.dashboard-donut-layout .donut {
  box-shadow: 0 20px 34px rgba(37, 63, 92, 0.2);
  width: 174px;
  animation: donutPop 700ms ease both;
}

.dashboard-donut-layout .donut::after {
  box-shadow: inset 0 0 0 1px #e1ebf3;
  width: 92px;
}

.dashboard-insight-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-insight-card {
  border-radius: 16px;
  padding: 18px;
}

.dashboard-insight-card strong {
  color: #13283d;
  display: block;
  font-size: 16px;
  margin: 12px 0 8px;
}

.dashboard-insight-card p {
  color: #536c82;
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

.dashboard-report-strip {
  background: #102b42;
  border-radius: 18px;
  color: #fff;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(220px, 0.85fr) minmax(280px, 1fr) minmax(210px, 0.75fr) minmax(240px, 0.85fr);
  padding: 22px;
}

.dashboard-report-strip > div:first-child span {
  color: #6bdcff;
  display: block;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 8px;
}

.dashboard-report-strip > div:first-child strong {
  display: block;
  font-size: 24px;
  margin-bottom: 10px;
}

.dashboard-report-strip p {
  color: #b8d2e5;
  margin: 0;
}

.dashboard-ranking-preview,
.dashboard-comment-preview,
.dashboard-engine-preview {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 14px;
  padding: 14px;
}

.dashboard-ranking-preview h3,
.dashboard-comment-preview h3,
.dashboard-engine-preview h3 {
  color: #d9f5ff;
  font-size: 14px;
  margin: 0 0 12px;
}

.dashboard-rank-row {
  align-items: center;
  display: grid;
  gap: 9px;
  grid-template-columns: 24px 88px minmax(0, 1fr) 48px;
  margin-top: 9px;
}

.dashboard-rank-row span {
  color: #72dcff;
  font-weight: 900;
  text-align: center;
}

.dashboard-rank-row strong,
.dashboard-rank-row b {
  color: #fff;
  font-size: 13px;
}

.dashboard-rank-row div {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}

.dashboard-rank-row i {
  background: linear-gradient(90deg, #35c0ff, #70e4ac);
  border-radius: inherit;
  display: block;
  height: 100%;
  animation: widthGrowVar 850ms ease both;
}

.dashboard-comment-preview article {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  padding: 10px 11px;
}

.dashboard-comment-preview span {
  color: #b8d2e5;
  font-size: 13px;
}

.dashboard-comment-preview strong {
  color: #fff;
  font-size: 14px;
}

.dashboard-engine-kpis {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-engine-kpis article {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  min-width: 0;
  padding: 10px;
}

.dashboard-engine-kpis span {
  color: #9fc5dc;
  display: block;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 6px;
}

.dashboard-engine-kpis strong {
  color: #70e4ac;
  display: block;
  font-size: 22px;
  line-height: 1;
}

.dashboard-engine-preview p {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #c8e3f3;
  font-size: 13px;
  line-height: 1.55;
  margin-top: 12px;
  padding-top: 12px;
}

.dashboard-report-dock {
  background: #0f2337;
  border: 1px solid #16324c;
  border-radius: 20px;
  box-shadow: 0 24px 56px rgba(12, 29, 46, 0.20);
  color: #fff;
  overflow: hidden;
}

.dashboard-report-dock-head {
  align-items: center;
  background: linear-gradient(135deg, #0b1b2b, #123a5a);
  color: #fff;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  padding: 26px 30px;
}

.dashboard-report-dock-head span {
  color: #6bdcff;
  display: block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.2em;
  margin-bottom: 7px;
}

.dashboard-report-dock-head h2 {
  font-size: 24px;
  margin: 0 0 7px;
}

.dashboard-report-dock-head p {
  color: #c9dfef;
  font-size: 13px;
  margin: 0;
}

.dashboard-report-button {
  background: #3fc0e8;
  border: 0;
  border-radius: 10px;
  color: #062a3b;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  padding: 12px 22px;
}

.dashboard-report-dock-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 26px 30px;
}

.dashboard-report-ring-card {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  display: grid;
  gap: 36px;
  grid-template-columns: 200px 1fr;
  overflow: hidden;
  padding: 26px 30px;
  position: relative;
}

.dashboard-report-ring-card::before {
  background: radial-gradient(circle, rgba(35, 166, 201, 0.20), transparent 62%);
  content: "";
  height: 280px;
  left: 60px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 280px;
}

.dashboard-report-ring {
  align-items: center;
  background:
    radial-gradient(circle at center, #0c1b2a 0 35%, transparent 36%),
    conic-gradient(#1f8f63 0 calc(var(--positive) * 1%), #c7972e calc(var(--positive) * 1%) calc((var(--positive) + var(--opportunity)) * 1%), #ce5555 calc((var(--positive) + var(--opportunity)) * 1%) 100%);
  border-radius: 50%;
  box-shadow: 0 16px 40px rgba(6, 20, 34, 0.5);
  display: flex;
  flex-direction: column;
  height: 190px;
  justify-content: center;
  justify-self: start;
  position: relative;
  width: 190px;
}

.dashboard-report-ring strong {
  color: #fff;
  font-size: 38px;
  font-weight: 900;
}

.dashboard-report-ring span {
  color: #8fb6d6;
  font-size: 11px;
  font-weight: 900;
}

.dashboard-report-kpis {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-report-kpis article {
  background: rgba(9, 24, 40, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  padding: 16px 20px;
}

.dashboard-report-kpis span {
  color: #8fb6d6;
  display: block;
  font-size: 12px;
  font-weight: 900;
}

.dashboard-report-kpis strong {
  display: block;
  font-size: 30px;
  font-weight: 900;
  margin-top: 6px;
}

.dashboard-report-kpis .is-positive { color: #5fd3a0; }
.dashboard-report-kpis .is-risk { color: #ff9ba0; }
.dashboard-report-kpis .is-opportunity { color: #ffd98a; }

.dashboard-report-rank-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-report-rank-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  overflow: hidden;
}

.dashboard-report-rank-card header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px 18px;
}

.dashboard-report-rank-card header span {
  color: #8fb6d6;
  display: block;
  font-size: 11px;
  font-weight: 900;
}

.dashboard-report-rank-card header strong {
  color: #fff;
  display: block;
  font-size: 16px;
  margin-top: 3px;
}

.dashboard-report-rank-card div {
  padding: 6px 18px 12px;
}

.dashboard-report-rank-card p {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: grid;
  gap: 10px;
  grid-template-columns: 20px 1fr 54px;
  margin: 0;
  padding: 9px 0;
}

.dashboard-report-rank-card p:first-child {
  border-top: 0;
}

.dashboard-report-rank-card b {
  color: #3fc0e8;
  font-size: 13px;
  font-weight: 900;
}

.dashboard-report-rank-card span {
  color: #e4eef6;
  font-size: 13px;
  font-weight: 800;
}

.dashboard-report-rank-card em {
  color: #b9cddd;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  text-align: right;
}

.dashboard-report-rank-card.is-risk b,
.dashboard-report-rank-card.is-risk header span { color: #ff9ba0; }
.dashboard-report-rank-card.is-marketing b,
.dashboard-report-rank-card.is-marketing header span { color: #ffd98a; }
.dashboard-report-rank-card.is-branding b,
.dashboard-report-rank-card.is-branding header span { color: #7fd0bf; }

.dashboard-report-note {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-left: 5px solid #3fc0e8;
  border-radius: 14px;
  padding: 18px 22px;
}

.dashboard-report-note span {
  color: #3fc0e8;
  display: block;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 8px;
}

.dashboard-report-note p {
  color: #cfe2ef;
  font-size: 13.5px;
  line-height: 1.8;
  margin: 0;
}

@media (max-width: 1120px) {
  .login-stage {
    grid-template-columns: 1fr;
    max-width: 720px;
  }

  .login-copy {
    text-align: center;
  }

  .login-copy p {
    margin-inline: auto;
  }

  .login-proof {
    justify-content: center;
  }

  .metric-grid, .insight-grid, .card-grid, .form-grid, .compare-dashboard,
  .target-score-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-metrics,
  .dashboard-insight-grid,
  .metric-detail-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-collection-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .dashboard-split,
  .dashboard-report-strip,
  .dashboard-report-rank-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-report-ring-card {
    grid-template-columns: 1fr;
  }

  .ocr-probe-card,
  .jarvis-monitor-hero,
  .sample-crawl-toolbar,
  .ocr-step-grid {
    grid-template-columns: 1fr;
  }

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

  .dashboard-report-ring {
    justify-self: center;
  }

  .slide-cover,
  .slide-two-column,
  .data-flow-diagram,
  .comparison-radar {
    grid-template-columns: 1fr;
  }

  .slide-score-ring {
    justify-self: start;
  }

  .flow-pipe {
    grid-template-columns: repeat(3, 1fr);
  }

  .flow-source-grid,
  .flow-report-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    height: auto;
    position: static;
  }

  .nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .topbar {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .topbar h1 {
    word-break: keep-all;
  }

  .topbar p {
    max-width: 680px;
    line-height: 1.55;
    word-break: keep-all;
  }

  .top-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 820px) {
  .login-screen {
    padding: 18px;
  }

  .login-copy h1 {
    font-size: 42px;
  }

  .login-card {
    border-radius: 18px;
    padding: 24px;
  }

  .app-shell, .topbar, .two-column {
    grid-template-columns: 1fr;
  }

  .sidebar {
    height: auto;
    position: static;
  }

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

  .metric-grid, .insight-grid, .card-grid, .source-grid, .traffic-grid, .collection-grid, .target-grid, .sns-grid, .community-grid, .strategy-grid, .admin-summary-grid, .form-grid, .donut-layout, .compare-dashboard {
    grid-template-columns: 1fr;
  }

  .action-subhead,
  .sample-speech-head {
    align-items: stretch;
    flex-direction: column;
  }

  .sample-speech-item summary {
    grid-template-columns: 1fr;
  }

  .jarvis-monitor-kpis {
    grid-template-columns: 1fr;
  }

  .sample-speech-item summary strong {
    white-space: normal;
  }

  .main {
    padding: 14px;
  }

  .top-actions {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
  }

  .dashboard-hero {
    background: #102b42;
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 22px;
  }

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

  .dashboard-metrics,
  .dashboard-collection-grid,
  .dashboard-insight-grid,
  .dashboard-donut-layout,
  .metric-detail-list {
    grid-template-columns: 1fr;
  }

  .metric-detail-head {
    flex-direction: column;
  }

  .metric-detail-close {
    width: 100%;
  }

  .dashboard-bar-list .bar-row {
    grid-template-columns: 88px minmax(0, 1fr) 44px;
  }

  .dashboard-donut-layout .donut {
    justify-self: center;
  }

  .dashboard-report-strip {
    padding: 18px;
  }

  .dashboard-engine-kpis {
    grid-template-columns: 1fr;
  }

  .dashboard-report-dock-head {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-report-dock-body {
    padding: 18px;
  }

  .dashboard-report-kpis {
    grid-template-columns: 1fr;
  }

  .dashboard-report-rank-card p {
    grid-template-columns: 20px minmax(0, 1fr) 50px;
  }

  .published-report-frame {
    height: 820px;
  }

  .project-builder-form {
    grid-template-columns: 1fr;
  }

  .project-actions {
    min-width: 0;
  }

  .keyword-groups {
    min-width: 0;
  }
}