:root {
  color-scheme: light;
  --ui-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  --ui-bg: #f5f6f8;
  --ui-panel: #ffffff;
  --ui-panel-2: #fbfbfd;
  --ui-line: #e9ebef;
  --ui-line-2: #dfe2e7;
  --ui-ink: #0d0f14;
  --ui-ink-2: #3d4350;
  --ui-muted: #8b909c;

  --ui-accent: #0ea968;
  --ui-accent-2: #34d399;
  --ui-accent-soft: rgba(14, 169, 104, 0.12);
  --ui-indigo: #5b6cff;
  --ui-indigo-soft: rgba(91, 108, 255, 0.12);
  --ui-amber: #f59e0b;
  --ui-amber-soft: rgba(245, 158, 11, 0.14);
  --ui-rose: #f43f5e;
  --ui-rose-soft: rgba(244, 63, 94, 0.12);
  --ui-sky: #0ea5e9;
  --ui-sky-soft: rgba(14, 165, 233, 0.12);

  --ui-rail: #0b0d12;
  --ui-rail-line: #181b22;
  --ui-rail-text: #aab0bb;

  --ui-shadow-sm: 0 1px 2px rgba(13, 15, 20, 0.04), 0 1px 3px rgba(13, 15, 20, 0.06);
  --ui-shadow-md: 0 8px 30px -12px rgba(13, 15, 20, 0.18);
  --ui-shadow-lg: 0 24px 60px -20px rgba(13, 15, 20, 0.28);
  --ui-radius: 16px;
  --ui-radius-sm: 11px;
}

html[data-theme="dark"],
body.dark {
  color-scheme: dark;
  --ui-bg: #0a0b0f;
  --ui-panel: #121419;
  --ui-panel-2: #15171d;
  --ui-line: #20242c;
  --ui-line-2: #2a2f39;
  --ui-ink: #f3f5f8;
  --ui-ink-2: #c2c7d0;
  --ui-muted: #7c828e;
  --ui-accent-soft: rgba(14, 169, 104, 0.16);
  --ui-indigo-soft: rgba(91, 108, 255, 0.16);
  --ui-amber-soft: rgba(245, 158, 11, 0.18);
  --ui-rose-soft: rgba(244, 63, 94, 0.18);
  --ui-sky-soft: rgba(14, 165, 233, 0.18);
  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --ui-shadow-md: 0 10px 34px -14px rgba(0, 0, 0, 0.6);
  --ui-shadow-lg: 0 28px 70px -24px rgba(0, 0, 0, 0.7);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-width: 0;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 12%, rgba(14, 169, 104, 0.12), transparent 28%),
    radial-gradient(circle at 82% 0, rgba(91, 108, 255, 0.1), transparent 24%),
    var(--ui-bg);
  color: var(--ui-ink);
  font-family: var(--ui-font);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.011em;
  transition: background 0.35s ease, color 0.35s ease;
}

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

button {
  color: inherit;
}

a {
  color: inherit;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--ui-accent-soft);
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-thumb {
  background: var(--ui-line-2);
  border-radius: 999px;
}

.mono {
  font-family: var(--ui-font-mono);
  font-variant-numeric: tabular-nums;
}

.stagger > * {
  opacity: 0;
  animation: ui-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.stagger > *:nth-child(1) { animation-delay: 0.02s; }
.stagger > *:nth-child(2) { animation-delay: 0.07s; }
.stagger > *:nth-child(3) { animation-delay: 0.12s; }
.stagger > *:nth-child(4) { animation-delay: 0.17s; }
.stagger > *:nth-child(5) { animation-delay: 0.22s; }
.stagger > *:nth-child(6) { animation-delay: 0.27s; }

@keyframes ui-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.card,
.card-surface,
.panel-surface,
.empty,
.kpi {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow-sm);
}

.card-pad {
  padding: 20px 22px;
}

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

.badge,
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--ui-panel-2);
  color: var(--ui-ink-2);
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}

.badge.success,
.chip.success {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

.badge.warning,
.chip.warning {
  background: var(--ui-amber-soft);
  color: var(--ui-amber);
}

.badge.danger,
.chip.danger {
  background: var(--ui-rose-soft);
  color: var(--ui-rose);
}

.button-primary,
.button-outline,
.button-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: var(--ui-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.button-primary:hover,
.button-outline:hover,
.button-ghost:hover {
  transform: translateY(-1px);
}

.button-primary {
  color: #042b1b;
  background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-2));
  box-shadow: 0 12px 30px -18px rgba(14, 169, 104, 0.75);
}

.button-outline {
  color: var(--ui-ink);
  background: var(--ui-panel);
  border-color: var(--ui-line);
}

.button-ghost {
  color: var(--ui-ink-2);
  background: transparent;
  border-color: var(--ui-line);
}

.empty {
  padding: 34px 28px;
  text-align: center;
}

.empty h3 {
  margin: 0 0 8px;
  font-size: 20px;
  letter-spacing: -0.03em;
}

.empty p {
  margin: 0;
  color: var(--ui-muted);
  font-size: 14px;
  line-height: 1.6;
}

.field input,
.field select,
.field textarea,
.ui-input,
.ui-select,
.ui-textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--ui-panel) 88%, transparent);
  color: var(--ui-ink);
  padding: 12px 13px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--ui-accent) 20%, transparent);
  outline-offset: 1px;
  border-color: var(--ui-accent);
}

.rail-brand,
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
  color: #042b1b;
  background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-2));
  box-shadow: 0 6px 18px -6px rgba(14, 169, 104, 0.8);
  font-size: 16px;
  font-weight: 800;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  white-space: nowrap;
}

.brand-text b {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.brand-text span {
  margin-top: 2px;
  color: #6b7280;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.rail-shell {
  background: var(--ui-rail);
  border-right: 1px solid var(--ui-rail-line);
  color: #e7e9ee;
}

.nav-group-h {
  padding: 16px 12px 7px;
  color: #565b66;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--ui-rail-text);
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  text-align: left;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.nav-item:hover {
  background: #15181f;
  color: #fff;
}

.nav-item.active {
  background: #16191f;
  color: #fff;
}

.nav-item.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--ui-accent);
}

.topbar-glass {
  background: color-mix(in srgb, var(--ui-bg) 82%, transparent);
  border: 1px solid var(--ui-line);
  backdrop-filter: saturate(180%) blur(14px);
}

.kpi {
  padding: 19px 20px;
  transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}

.kpi:hover {
  transform: translateY(-3px);
  box-shadow: var(--ui-shadow-md);
  border-color: var(--ui-line-2);
}

.kpi-k {
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.kpi-v {
  margin-top: 8px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-family: var(--ui-font-mono);
  font-variant-numeric: tabular-nums;
}

.kpi-d,
.kpi-src {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--ui-muted);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--ui-font-mono);
  font-variant-numeric: tabular-nums;
}

.kpi-d.up {
  color: var(--ui-accent);
}

.kpi-d.down {
  color: var(--ui-rose);
}

.kpi-src::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  text-align: left;
}

@media (max-width: 760px) {
  .button-primary,
  .button-outline,
  .button-ghost {
    width: 100%;
  }
}

/* Client portal: This week and Performance depth */
.week-strip {
  display: grid;
  grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.week-strip > * {
  min-width: 0;
}

.week-loading {
  grid-column: 1 / -1;
  padding: 28px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-panel);
  color: var(--ui-muted);
  text-align: center;
}

.week-hero,
.week-mini {
  display: flex;
  min-height: 150px;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--ui-radius);
}

.week-hero {
  position: relative;
  padding: 22px;
  background: linear-gradient(140deg, var(--ui-accent), #08784a);
  color: #fff;
  box-shadow: var(--ui-shadow-md);
}

.week-hero::after {
  position: absolute;
  inset: 0;
  background: radial-gradient(110% 90% at 92% 8%, rgba(255, 255, 255, 0.24), transparent 56%);
  content: "";
  pointer-events: none;
}

.week-hero.empty {
  background: var(--ui-panel);
  color: var(--ui-ink);
  border: 1px solid var(--ui-line);
  box-shadow: var(--ui-shadow-sm);
}

.week-hero.empty::after {
  background: radial-gradient(circle at 92% 8%, var(--ui-accent-soft), transparent 52%);
}

.week-mini {
  padding: 18px;
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  box-shadow: var(--ui-shadow-sm);
}

.week-mini.empty {
  background: color-mix(in srgb, var(--ui-panel) 78%, var(--ui-panel-2));
}

.week-hero span,
.week-mini span {
  position: relative;
  z-index: 1;
  color: inherit;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.week-mini span {
  color: var(--ui-muted);
}

.week-hero strong,
.week-mini strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 10px;
  overflow-wrap: anywhere;
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.05em;
}

.week-mini strong {
  font-size: clamp(19px, 2vw, 25px);
}

.week-hero small,
.week-mini small {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 9px;
  color: inherit;
  font-size: 11.5px;
  line-height: 1.45;
  opacity: 0.88;
}

.week-mini small {
  color: var(--ui-muted);
  opacity: 1;
}

.home-actions,
.performance-head-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.home-actions button,
.performance-head-actions button,
.next-move button {
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-sm);
  background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-2));
  color: #042b1b;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.home-actions button.outline {
  background: var(--ui-panel);
  border-color: var(--ui-line);
  color: var(--ui-ink);
}

.next-move {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--ui-accent) 30%, var(--ui-line));
  border-radius: var(--ui-radius);
  background: radial-gradient(100% 180% at 0 0, var(--ui-accent-soft), transparent 48%), var(--ui-panel);
  box-shadow: var(--ui-shadow-sm);
}

.next-move > * {
  min-width: 0;
}

.next-move-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-2));
  color: #042b1b;
  font-family: var(--ui-font-mono);
  font-size: 18px;
  font-weight: 900;
}

.next-move h3 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.02em;
}

.next-move p {
  margin: 5px 0 0;
  color: var(--ui-ink-2);
  font-size: 12.5px;
  line-height: 1.55;
}

.home-list-grid,
.performance-insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.home-list-card {
  overflow: hidden;
}

.home-count {
  display: inline-flex;
  max-width: min(48vw, 260px);
  padding: 5px 9px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ui-panel-2);
  color: var(--ui-muted);
  font: 700 10.5px var(--ui-font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-count.success {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

.home-count.warning {
  background: var(--ui-amber-soft);
  color: var(--ui-amber);
}

.home-count.danger {
  background: var(--ui-rose-soft);
  color: var(--ui-rose);
}

.home-list {
  display: grid;
  padding: 5px 20px;
}

.home-list-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 13px 0;
  border-top: 1px solid var(--ui-line);
}

.home-list-item:first-child {
  border-top: 0;
}

.home-list-mark {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 9px;
  background: var(--ui-amber-soft);
  color: var(--ui-amber);
  font: 900 10px var(--ui-font-mono);
}

.home-list-item.done .home-list-mark {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

.home-list-item strong,
.home-list-item small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.home-list-item strong {
  font-size: 12.5px;
}

.home-list-item small {
  margin-top: 4px;
  color: var(--ui-muted);
  font: 600 10.5px var(--ui-font-mono);
}

.home-list-empty {
  padding: 22px 0;
  color: var(--ui-muted);
  font-size: 12px;
  line-height: 1.55;
}

.home-pulse-card {
  margin-top: 0;
}

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

.performance-insight-grid {
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr);
}

.retention-card,
.leaderboard-card {
  min-width: 0;
  padding: 20px;
}

.performance-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.performance-card-heading h3 {
  margin: 0;
  font-size: 14.5px;
}

.performance-card-heading p {
  margin: 6px 0 0;
  color: var(--ui-muted);
  font-size: 12px;
  line-height: 1.5;
}

.retention-curve {
  min-width: 0;
  margin-top: 14px;
}

.retention-curve svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 190px;
  overflow: visible;
}

.retention-area {
  fill: url(#portalRetentionGradient);
}

.retention-line {
  fill: none;
  stroke: var(--ui-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.retention-curve circle {
  fill: var(--ui-accent);
  stroke: var(--ui-panel);
  stroke-width: 3;
}

.retention-curve circle.cliff {
  fill: var(--ui-rose);
}

.retention-curve text {
  fill: var(--ui-muted);
  font: 600 10px var(--ui-font-mono);
}

.retention-empty {
  display: grid;
  min-height: 148px;
  place-content: center;
  gap: 7px;
  padding: 24px;
  border: 1px dashed var(--ui-line-2);
  border-radius: 14px;
  color: var(--ui-muted);
  text-align: center;
}

.retention-empty strong {
  color: var(--ui-ink);
  font-size: 13px;
}

.retention-empty span {
  font-size: 11.5px;
  line-height: 1.5;
}

.curve-note {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  color: var(--ui-muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.curve-cliff-badge {
  flex: none;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--ui-rose-soft);
  color: var(--ui-rose);
  font: 800 10px var(--ui-font-mono);
}

.type-leaderboard {
  display: grid;
  gap: 2px;
  margin-top: 12px;
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) 52px;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
}

.leaderboard-row > span {
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
}

.leaderboard-row > strong {
  font-size: 11px;
  text-align: right;
}

.leaderboard-row.empty {
  opacity: 0.48;
}

.leaderboard-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ui-panel-2);
}

.leaderboard-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ui-accent), var(--ui-accent-2));
}

/* Client portal: Revenue, Team, Plans, and Studio insight */
.revenue-head-actions,
.client-settings-actions,
.studio-insight-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.revenue-head-actions button,
.client-settings-actions button,
.studio-insight-actions button {
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-sm);
  background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-2));
  color: #042b1b;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.revenue-head-actions button.outline,
.studio-insight-actions button.outline {
  background: var(--ui-panel);
  border-color: var(--ui-line);
  color: var(--ui-ink);
}

.client-settings-actions button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.revenue-head-actions .panel-note {
  margin-right: 4px;
}

.metric-grid.revenue-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.revenue-table-card {
  overflow: hidden;
  margin-bottom: 16px;
}

.revenue-entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.revenue-entry-card {
  min-width: 0;
  overflow: hidden;
}

.revenue-entry-card .card-head {
  align-items: flex-start;
}

.revenue-entry-card .card-head h3 {
  margin-bottom: 5px;
}

.revenue-entry-card .card-head p,
.studio-pipeline-head p {
  margin: 0;
  color: var(--ui-muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.integration-status-list {
  display: grid;
  padding: 5px 20px;
}

.integration-status-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 13px 0;
  border-top: 1px solid var(--ui-line);
}

.integration-status-row:first-child {
  border-top: 0;
}

.integration-provider-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: var(--ui-panel-2);
  color: var(--ui-muted);
  font: 900 11px var(--ui-font-mono);
}

.integration-status-row.connected .integration-provider-mark {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

.integration-status-row strong,
.integration-status-row small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.integration-status-row strong {
  font-size: 12.5px;
}

.integration-status-row small {
  margin-top: 4px;
  color: var(--ui-muted);
  font-size: 10.5px;
  line-height: 1.45;
}

.integration-state {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--ui-panel-2);
  color: var(--ui-muted);
  font: 800 9.5px var(--ui-font-mono);
}

.integration-status-row.connected .integration-state {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

.revenue-inline-empty {
  padding: 24px 0;
  color: var(--ui-muted);
  font-size: 12px;
  line-height: 1.6;
}

.client-settings-form {
  display: grid;
  gap: 13px;
  padding: 20px;
}

.client-settings-form label {
  display: grid;
  gap: 7px;
  color: var(--ui-ink-2);
  font-size: 11.5px;
  font-weight: 800;
}

.client-settings-form input,
.client-settings-form textarea {
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  outline: none;
  background: var(--ui-panel-2);
  color: var(--ui-ink);
  resize: vertical;
}

.client-settings-form input:focus,
.client-settings-form textarea:focus {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px var(--ui-accent-soft);
}

.client-settings-actions span {
  flex: 1 1 220px;
  color: var(--ui-muted);
  font-size: 10.5px;
  line-height: 1.45;
}

.team-card-grid,
.plan-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}

.team-card-grid > .empty-card,
.plan-card-grid > .empty-card {
  grid-column: 1 / -1;
}

.team-member-card,
.plan-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-panel);
  box-shadow: var(--ui-shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.team-member-card:hover,
.plan-card:hover {
  transform: translateY(-2px);
  border-color: var(--ui-line-2);
  box-shadow: var(--ui-shadow-md);
}

.team-member-head {
  display: flex;
  gap: 12px;
  align-items: center;
}

.team-avatar {
  display: grid;
  width: 44px;
  height: 44px;
  flex: none;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-2));
  color: #042b1b;
  font: 900 13px var(--ui-font-mono);
}

.team-member-head h3,
.plan-card h3 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 15px;
  letter-spacing: -0.02em;
}

.team-member-head p {
  margin: 4px 0 0;
  color: var(--ui-muted);
  font-size: 11.5px;
}

.team-contact-list {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.team-contact-list span {
  max-width: 100%;
  padding: 5px 8px;
  overflow-wrap: anywhere;
  border-radius: 8px;
  background: var(--ui-panel-2);
  color: var(--ui-muted);
  font-size: 10px;
}

.team-now {
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--ui-line);
}

.team-now span {
  display: block;
  color: var(--ui-muted);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.team-now strong {
  display: block;
  margin-top: 6px;
  color: var(--ui-ink-2);
  font-size: 12.5px;
  line-height: 1.5;
}

.plan-card-top,
.plan-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.plan-status {
  flex: none;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--ui-panel-2);
  color: var(--ui-muted);
  font: 800 9.5px var(--ui-font-mono);
}

.plan-status.active,
.plan-status.complete {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

.plan-status.blocked {
  background: var(--ui-rose-soft);
  color: var(--ui-rose);
}

.plan-progress {
  height: 8px;
  margin: 15px 0 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ui-panel-2);
}

.plan-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ui-accent), var(--ui-accent-2));
}

.plan-progress.unmeasured {
  border: 1px dashed var(--ui-line-2);
  background: transparent;
}

.plan-card > p {
  margin: 0;
  color: var(--ui-ink-2);
  font-size: 12px;
  line-height: 1.55;
}

.plan-meta {
  margin-top: 13px;
  color: var(--ui-muted);
  font-size: 10.5px;
}

.plan-meta strong {
  color: var(--ui-muted);
  font-size: 9.5px;
  text-align: right;
}

.studio-insight {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
  margin-bottom: 18px;
  overflow: hidden;
  background: radial-gradient(110% 150% at 0 0, var(--ui-accent-soft), transparent 48%), var(--ui-panel);
}

.studio-insight-main {
  min-width: 0;
  padding: 22px 24px;
}

.studio-insight-label {
  color: var(--ui-accent);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.studio-insight-lines {
  display: grid;
  gap: 10px;
  margin-top: 13px;
}

.studio-insight-line {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.studio-insight-line p {
  margin: 1px 0 0;
  color: var(--ui-ink-2);
  font-size: 12.5px;
  line-height: 1.55;
}

.insight-mark {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 7px;
  background: var(--ui-panel-2);
  color: var(--ui-muted);
  font: 900 9px var(--ui-font-mono);
}

.insight-mark.success {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

.insight-mark.danger {
  background: var(--ui-rose-soft);
  color: var(--ui-rose);
}

.studio-insight-actions {
  margin-top: 17px;
}

.studio-insight-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 14px;
  align-content: center;
  padding: 20px;
  border-left: 1px solid var(--ui-line);
  background: var(--ui-panel-2);
}

.studio-stat span,
.studio-stat strong,
.studio-stat small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.studio-stat span {
  color: var(--ui-muted);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.studio-stat strong {
  margin-top: 5px;
  font-size: 20px;
  letter-spacing: -0.04em;
}

.studio-stat small {
  margin-top: 4px;
  color: var(--ui-muted);
  font-size: 10.5px;
}

.studio-pipeline-card {
  margin-bottom: 18px;
  padding: 18px 20px;
}

.studio-pipeline-head h3 {
  margin: 0 0 4px;
  font-size: 14.5px;
}

.studio-pipeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 14px;
}

.studio-pipeline-stage {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--ui-line);
  border-radius: 13px;
  background: var(--ui-panel-2);
}

.studio-pipeline-stage span,
.studio-pipeline-stage strong,
.studio-pipeline-stage small {
  display: block;
}

.studio-pipeline-stage span {
  color: var(--ui-muted);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.studio-pipeline-stage strong {
  margin-top: 6px;
  font-size: 21px;
}

.studio-pipeline-stage small {
  margin-top: 3px;
  color: var(--ui-muted);
  font-size: 10px;
}

.studio-pipeline-stage.review {
  border-color: color-mix(in srgb, var(--ui-amber) 30%, var(--ui-line));
}

.studio-pipeline-stage.approved {
  border-color: color-mix(in srgb, var(--ui-accent) 30%, var(--ui-line));
}

@media (max-width: 1120px) {
  .week-strip,
  .performance-kpi-grid,
  .metric-grid.revenue-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .revenue-entry-grid,
  .studio-insight {
    grid-template-columns: minmax(0, 1fr);
  }

  .studio-insight-stats {
    border-top: 1px solid var(--ui-line);
    border-left: 0;
  }
}

@media (max-width: 820px) {
  .week-strip,
  .performance-kpi-grid,
  .metric-grid.revenue-kpi-grid,
  .home-list-grid,
  .performance-insight-grid,
  .team-card-grid,
  .plan-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .next-move {
    grid-template-columns: minmax(0, 1fr);
  }

  .next-move-icon {
    display: none;
  }

  .next-move button,
  .home-actions button,
  .performance-head-actions button {
    width: 100%;
  }

  .home-actions,
  .performance-head-actions,
  .revenue-head-actions {
    width: 100%;
  }

  .revenue-head-actions button,
  .studio-insight-actions button {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .week-hero,
  .week-mini,
  .next-move,
  .retention-card,
  .leaderboard-card {
    padding: 16px;
  }

  .studio-insight-main,
  .studio-insight-stats,
  .studio-pipeline-card,
  .client-settings-form,
  .team-member-card,
  .plan-card {
    padding: 16px;
  }

  .studio-insight-stats,
  .studio-pipeline {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .integration-state {
    grid-column: 2;
    justify-self: start;
  }

  .plan-card-top,
  .plan-meta,
  .client-settings-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .performance-card-heading,
  .curve-note {
    align-items: flex-start;
    flex-direction: column;
  }

  .leaderboard-row {
    grid-template-columns: 90px minmax(0, 1fr) 45px;
    gap: 7px;
  }
}