* { box-sizing: border-box; }

:root {
  --primary: #cc785c;
  --primary-active: #a9583e;
  --primary-disabled: #e6dfd8;
  --ink: #141413;
  --body: #3d3d3a;
  --body-strong: #252523;
  --muted: #6c6a64;
  --muted-soft: #8e8b82;
  --hairline: #e6dfd8;
  --hairline-soft: #ebe6df;
  --canvas: #faf9f5;
  --surface-soft: #f5f0e8;
  --surface-card: #efe9de;
  --surface-cream-strong: #e8e0d2;
  --surface-dark: #181715;
  --surface-dark-elevated: #252320;
  --surface-dark-soft: #1f1e1b;
  --on-primary: #ffffff;
  --on-dark: #faf9f5;
  --on-dark-soft: #a09d96;
  --accent-teal: #5db8a6;
  --accent-amber: #e8a55a;
  --success: #5db872;
  --warning: #d4a017;
  --error: #c64545;
  --display: Copernicus, "Tiempos Headline", Georgia, serif;
  --sans: StyreneB, Inter, ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 8%, rgba(204,120,92,.13), transparent 32%),
    radial-gradient(circle at 88% 0%, rgba(93,184,166,.10), transparent 28%);
  z-index: -1;
}

button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid rgba(204,120,92,.3); outline-offset: 2px; }

.top-nav {
  height: 64px;
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 32px;
  background: rgba(250,249,245,.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--hairline-soft);
}

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 600; }
.brand-mark { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; background: var(--surface-dark); color: var(--on-dark); }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; }
.nav-links a.active, .nav-links a:hover { color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 10px; }

main { max-width: 1240px; margin: 0 auto; padding: 40px 24px 80px; }
.page { display: none; animation: pageIn 220ms cubic-bezier(.2,0,0,1); }
.page.active { display: block; }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.hero-band {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, .85fr);
  gap: 32px;
  align-items: stretch;
  padding: 56px 0 36px;
}
.hero-copy {
  border-radius: 16px;
  padding: 56px;
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0)), var(--surface-soft);
}
.eyebrow { margin: 0 0 14px; color: var(--primary); text-transform: uppercase; letter-spacing: 1.5px; font-size: 12px; font-weight: 600; }
h1, h2, h3 { text-wrap: balance; }
h1 { margin: 0; font-family: var(--display); font-size: clamp(42px, 7vw, 72px); line-height: 1.02; letter-spacing: -1.5px; font-weight: 400; }
h2 { margin: 0; font-family: var(--display); font-size: 36px; line-height: 1.12; letter-spacing: -.5px; font-weight: 400; }
h3 { margin: 4px 0 0; font-size: 18px; font-weight: 500; }
.hero-text { max-width: 650px; color: var(--body); font-size: 17px; line-height: 1.65; }
.hero-actions, .button-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 24px; }

.button { min-height: 40px; border-radius: 8px; border: 0; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; transition: transform 180ms cubic-bezier(.2,0,0,1), background 180ms cubic-bezier(.2,0,0,1), color 180ms cubic-bezier(.2,0,0,1); }
.button:active { transform: scale(.96); }
.button:disabled { opacity: .6; cursor: wait; }
.button.primary { background: var(--primary); color: var(--on-primary); }
.button.primary:hover { background: var(--primary-active); }
.button.secondary { background: var(--canvas); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline); }
.button.text { background: transparent; color: var(--ink); padding-inline: 4px; }
.button.danger { background: rgba(198,69,69,.12); color: var(--error); }

.status-chip { min-height: 32px; border-radius: 999px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; background: var(--surface-soft); color: var(--body); font-size: 13px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--hairline); }
.status-chip span { width: 8px; height: 8px; border-radius: 999px; background: var(--muted-soft); }
.status-chip.online span { background: var(--success); box-shadow: 0 0 0 4px rgba(93,184,114,.18); }
.status-chip.starting span, .status-chip.restarting span { background: var(--accent-amber); box-shadow: 0 0 0 4px rgba(232,165,90,.18); }
.status-chip.unhealthy span, .status-chip.stopped span { background: var(--error); box-shadow: 0 0 0 4px rgba(198,69,69,.15); }

.dark-console, .code-window-card, .metric-card.dark {
  background: var(--surface-dark);
  color: var(--on-dark);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 24px 70px rgba(24,23,21,.28);
}
.console-head { display: flex; align-items: center; gap: 8px; color: var(--on-dark-soft); margin-bottom: 20px; }
.console-head span { width: 10px; height: 10px; border-radius: 999px; background: var(--primary); }
.console-head span:nth-child(2) { background: var(--accent-amber); }
.console-head span:nth-child(3) { background: var(--accent-teal); }
.console-head strong { margin-left: auto; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; }
.console-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.console-grid div { background: var(--surface-dark-elevated); border-radius: 12px; padding: 14px; }
.console-grid small, .dark-console pre { color: var(--on-dark-soft); }
.console-grid strong { display: block; margin-top: 7px; font-family: var(--mono); font-size: 18px; }
.dark-console pre, .code-window-card pre { margin: 18px 0 0; white-space: pre-wrap; max-height: 310px; overflow: auto; font: 13px/1.55 var(--mono); }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 20px 0 28px; }
.metric-card, .feature-card, .connector-tile, .account-card-live {
  background: var(--surface-card);
  color: var(--ink);
  border-radius: 12px;
  padding: 28px;
  box-shadow: inset 0 0 0 1px rgba(20,20,19,.03);
}
.metric-card.featured { background: var(--primary); color: var(--on-primary); }
.metric-card span { display: block; color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.metric-card.featured span, .metric-card.featured small { color: rgba(255,255,255,.82); }
.metric-card.dark span, .metric-card.dark small { color: var(--on-dark-soft); }
.metric-card strong { display: block; font-family: var(--display); font-size: 42px; line-height: 1; font-weight: 400; letter-spacing: -1px; }
.metric-card small { color: var(--muted); display: block; margin-top: 14px; }

.split-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 18px; margin-top: 18px; }
.section-head, .page-title-row { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 22px; }
.page-title-row { margin-top: 36px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.detail-grid div, .account-numbers div { background: rgba(250,249,245,.52); border-radius: 10px; padding: 14px; }
dt, .account-numbers small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
dd { margin: 7px 0 0; font-family: var(--mono); overflow-wrap: anywhere; }
.identity-inline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0 0; }
.identity-inline div { background: rgba(250,249,245,.52); border-radius: 10px; padding: 12px; }
.callout-card-coral { border-radius: 12px; padding: 32px; background: var(--primary); color: var(--on-primary); }
.callout-card-coral .eyebrow { color: rgba(255,255,255,.85); }
.callout-card-coral p:last-child { line-height: 1.6; }

.account-card-live { display: grid; grid-template-columns: 1fr minmax(300px, .7fr); gap: 24px; align-items: center; }
.account-main p { color: var(--body); line-height: 1.6; }
.account-numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.account-numbers strong { display: block; margin-top: 8px; font-family: var(--mono); font-size: 18px; }
.account-card-live .button-row { grid-column: 1 / -1; margin-top: 0; }

.connector-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.connector-tile { background: var(--canvas); }
.connector-tile strong { display: block; font-size: 18px; margin-bottom: 10px; }
.connector-tile span { color: var(--body); line-height: 1.6; }
.connector-tile.warning { background: var(--surface-cream-strong); }
.event-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.event-list span { padding: 10px 12px; border-radius: 999px; background: var(--surface-soft); color: var(--body); }
.toast-viewport { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: grid; gap: 10px; }
.toast { max-width: 360px; padding: 14px 16px; border-radius: 12px; background: var(--surface-dark); color: var(--on-dark); box-shadow: 0 18px 50px rgba(24,23,21,.32); }

.account-settings { grid-column: 1 / -1; margin-top: 12px; background: var(--surface-soft); border-radius: 12px; padding: 16px; }
.account-settings summary { cursor: pointer; font-weight: 600; color: var(--body-strong); font-size: 14px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.settings-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--body); }
.settings-grid input, .settings-grid select { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--hairline); background: var(--canvas); font-size: 13px; }
.settings-grid input[type="checkbox"] { width: 18px; height: 18px; }
.account-warning { color: var(--error); font-size: 13px; margin: 8px 0 0; }
.empty-state { grid-template-columns: 1fr; text-align: center; padding: 40px; }
.empty-state h2 { font-size: 24px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.status-chip.linked span, .status-chip.online span { background: var(--success); box-shadow: 0 0 0 4px rgba(93,184,114,.18); }
.status-chip.pending span, .status-chip.auth_required span { background: var(--accent-amber); box-shadow: 0 0 0 4px rgba(232,165,90,.18); }
.status-chip.error span, .status-chip.unhealthy span { background: var(--error); box-shadow: 0 0 0 4px rgba(198,69,69,.15); }
.status-chip.unlinked span, .status-chip.blocked span, .status-chip.disabled span { background: var(--muted-soft); }

.auth-panel { margin: 18px 0 0; padding: 16px; border-radius: 12px; background: var(--surface-soft); }
.auth-panel.linked { background: rgba(93,184,114,.12); }
.auth-panel.error { background: rgba(198,69,69,.1); }
.auth-panel .field-hint { color: var(--muted); font-size: 12px; margin: 0 0 8px; }
.auth-panel a { color: var(--primary); font-weight: 600; }
.user-code { font-family: var(--mono); font-size: 28px; letter-spacing: 3px; font-weight: 700; background: var(--surface-dark); color: var(--on-dark); border-radius: 10px; padding: 12px 16px; display: inline-block; margin: 8px 0; user-select: all; }
.log-window { max-height: 220px; overflow: auto; background: var(--surface-dark); color: var(--on-dark); border-radius: 10px; padding: 14px; font: 12px/1.5 var(--mono); white-space: pre-wrap; margin-top: 10px; }

.field-hint { color: var(--muted); font-size: 12px; margin: 4px 0 12px; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(20,20,19,.45); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.modal-backdrop[hidden] { display: none; }
.modal { background: var(--canvas); border-radius: 16px; padding: 28px; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 30px 80px rgba(24,23,21,.35); }
.modal h2 { margin-bottom: 6px; }
.modal label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--body); margin: 10px 0; }
.modal label.checkbox-row { flex-direction: row; align-items: center; gap: 8px; }
.modal input[type="text"] { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--hairline); background: var(--surface-soft); font-size: 14px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

@media (max-width: 980px) {
  .top-nav { height: auto; padding: 16px; align-items: flex-start; flex-wrap: wrap; }
  .nav-links { order: 3; width: 100%; overflow-x: auto; }
  .nav-actions { flex-wrap: wrap; }
  .hero-band, .split-grid, .account-card-live { grid-template-columns: 1fr; }
  .metric-grid, .connector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  main { padding: 20px 14px 60px; }
  .hero-copy { padding: 28px; }
  .metric-grid, .connector-grid, .detail-grid, .account-numbers { grid-template-columns: 1fr; }
  h1 { font-size: 40px; }
}