:root {
  --base: #1a1d26;
  --base-warm: #232736;
  --panel: #232630;
  --raised: #2c303c;
  --inset: #14161d;

  --text-1: #eef1f6;
  --text-2: #b4bac5;
  --text-3: #7a8191;
  --text-4: #4d5260;

  --runner-head: #ffffff;
  --drift-color: 255,255,255;
  --drift-alpha: 0.18;
  --drift-spacing: 520;
  --halo-color: 255,255,255;
  --glass-bg: rgba(35, 38, 48, 0.42);

  --aurora-a: #00e4ff;  --aurora-b: #3effc7;
  --ember-a:  #ff7a1a;  --ember-b:  #ffd166;
  --flux-a:   #ff4fa3;  --flux-b:   #b76bff;
  --moss-a:   #4ade80;  --moss-b:   #e3f26b;
  --halo-a:   #7aa2ff;  --halo-b:   #a8ecff;

  --hairline: rgba(255,255,255,0.06);
  --hairline-strong: rgba(255,255,255,0.10);
  --divider: #1a1d24;
  --inset-text: rgba(255,255,255,0.04);

  --accent: var(--halo-a);
  --accent-2: var(--halo-b);
  --accent-rgb: 122, 162, 255;
  --accent-2-rgb: 168, 236, 255;

  --font-ui: "JetBrains Mono", "Cascadia Code", ui-monospace, SF Mono, Menlo, monospace;
  --font-display: "JetBrains Mono", "Cascadia Code", ui-monospace, monospace;
  --font-mono: "JetBrains Mono", "Cascadia Code", ui-monospace, SF Mono, Menlo, monospace;

  --chf-x: 14px;
  --chf-y: 24px;
  --chamfer-2: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 24px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes runner { to { --angle: 360deg; } }

@keyframes breathe {
  from { opacity: 0.7; box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5); }
  to   { opacity: 1; box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.9); }
}

html, body {
  background: var(--base);
  color: var(--text-1);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv01";
  min-height: 100%;
}

body {
  background:
    radial-gradient(ellipse 80% 60% at 70% -10%, var(--base-warm) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 10% 110%, rgba(var(--accent-rgb), 0.07) 0%, transparent 60%),
    var(--base);
  background-attachment: fixed;
  position: relative;
  min-height: 100vh;
}

body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(var(--drift-color), 0.065) 0.45px, transparent 0.85px);
  background-size: 6px 6px;
}

.drift {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  width: 100vw; height: 100vh;
}
.drift canvas { width: 100%; height: 100%; display: block; }

.wrap {
  position: relative;
  z-index: 1;
  max-width: 64rem;
  margin: 0 auto;
  padding: 64px 32px 96px;
}

.hidden { display: none !important; }

/* ─────────────────────────────────────── Hero / Headlines ─── */

.hero-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text-3); font-size: 13px; font-weight: 500;
  margin-bottom: 24px;
}
.hero-kicker .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.8);
  animation: breathe 3s ease-in-out infinite alternate;
}

h1 {
  font-family: var(--font-display);
  font-weight: 500; font-size: clamp(36px, 5.5vw, 56px);
  line-height: 1.05; letter-spacing: -0.02em;
  color: var(--text-1); margin-bottom: 20px; max-width: 22ch;
}
h1 em {
  font-style: normal; color: var(--accent); font-weight: 500;
  text-shadow: 0 0 24px rgba(var(--accent-rgb), 0.45);
}

p.lede {
  font-size: 17px; line-height: 1.6; color: var(--text-2);
  max-width: 60ch; margin-bottom: 32px;
}

h3 {
  font-size: 20px; font-weight: 600; letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.muted {
  color: var(--text-3); font-size: 14px;
}

/* ─────────────────────────────────────── Glass-Card ─── */

.card {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  padding: 28px;
  isolation: isolate;
  clip-path: var(--chamfer-2);
  --card-a-rgb: var(--accent-rgb);
  --card-b-rgb: var(--accent-2-rgb);
  filter: drop-shadow(0 0 24px rgba(var(--card-a-rgb), 0.32));
  margin-bottom: 24px;
}

.card .card-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 14px;
}
.card .card-label .swatch {
  width: 8px; height: 8px;
}
.swatch-aurora { background: linear-gradient(115deg, var(--aurora-a), var(--aurora-b)); box-shadow: 0 0 8px rgba(0,228,255,0.6); }
.swatch-ember  { background: linear-gradient(115deg, var(--ember-a), var(--ember-b));  box-shadow: 0 0 8px rgba(255,122,26,0.6); }
.swatch-flux   { background: linear-gradient(115deg, var(--flux-a),  var(--flux-b));   box-shadow: 0 0 8px rgba(255,79,163,0.6); }
.swatch-moss   { background: linear-gradient(115deg, var(--moss-a),  var(--moss-b));   box-shadow: 0 0 8px rgba(74,222,128,0.6); }

/* ─────────────────────────────────────── Form-Card / Inputs ─── */

.form-card {
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  padding: 32px;
  clip-path: var(--chamfer-2);
  max-width: 520px;
  filter: drop-shadow(0 0 18px rgba(var(--accent-rgb), 0.18));
}
.form-card-wide { max-width: 720px; }

.field {
  display: block;
  margin-bottom: 20px;
}
.field-label {
  display: block;
  font-size: 13px; font-weight: 600;
  color: var(--text-1);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.field-label em {
  font-style: normal; color: var(--accent); font-weight: 600;
}
.field-hint {
  display: block;
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 8px;
  line-height: 1.45;
}

input[type="text"],
textarea {
  width: 100%;
  background: var(--inset);
  color: var(--text-1);
  border: 1px solid var(--hairline);
  padding: 12px 14px;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
  resize: vertical;
  transition: border-color 240ms;
}
input[type="text"]:focus,
textarea:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.3),
              0 0 24px rgba(var(--accent-rgb), 0.2);
}
input[type="text"]::placeholder,
textarea::placeholder {
  color: var(--text-4);
}

.form-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 12px;
}
.form-error {
  margin-top: 12px;
  color: var(--flux-a);
  font-size: 13px;
  min-height: 16px;
}

/* ─────────────────────────────────────── Buttons ─── */

.btn-primary, .btn-ghost {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  font-family: var(--font-ui);
  font-size: 14px; font-weight: 500;
  border: none;
  color: var(--text-1);
  text-decoration: none; cursor: pointer;
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(1.55) brightness(1.04);
  -webkit-backdrop-filter: blur(20px) saturate(1.55) brightness(1.04);
  isolation: isolate;
  clip-path: var(--chamfer-2);
  transition: transform 240ms cubic-bezier(0.2,0.8,0.2,1);
}
.btn-primary { font-weight: 600; }
.btn-ghost {
  --btn-a-rgb: var(--drift-color);
  --btn-b-rgb: var(--drift-color);
}
.btn-primary { filter: drop-shadow(0 0 14px rgba(var(--accent-rgb), 0.45)); }
.btn-ghost   { filter: drop-shadow(0 0 8px rgba(var(--drift-color), 0.18)); }
.btn-primary:hover, .btn-ghost:hover { transform: translateY(-1px); }
.btn-primary:disabled, .btn-ghost:disabled {
  opacity: 0.5; cursor: not-allowed; transform: none;
}
.arrow { transition: transform 240ms; }
.btn-primary:hover .arrow, .btn-ghost:hover .arrow { transform: translateX(3px); }

/* ─────────────────────────────────────── Topbar / Tabs ─── */

.topbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 32px;
}
.topbar-left .hero-kicker { margin-bottom: 0; }

.tabs {
  display: flex; gap: 4px;
  background: var(--inset);
  padding: 4px;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
}
.tab {
  padding: 8px 16px;
  font-family: var(--font-ui);
  font-size: 13px; font-weight: 500;
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  transition: color 240ms, background 240ms;
  display: inline-flex; align-items: center; gap: 6px;
}
.tab:hover { color: var(--text-2); }
.tab.active {
  color: var(--text-1);
  background: var(--raised);
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
}
.badge {
  display: inline-block;
  min-width: 18px; padding: 0 6px;
  height: 18px; line-height: 18px;
  font-size: 11px; font-weight: 600;
  text-align: center;
  background: var(--accent);
  color: var(--base);
  border-radius: 0;
}

/* ─────────────────────────────────────── Compose ─── */

.compose-grid {
  display: grid; gap: 20px;
}
@media (min-width: 1000px) {
  .compose-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

.compose-card { margin-bottom: 0; }

#reformulation-card {
  --card-a-rgb: 255, 79, 163;
  --card-b-rgb: 183, 107, 255;
}

.coach-details {
  margin: 16px 0 24px;
  padding: 14px 16px;
  background: var(--inset);
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
}
.coach-details summary {
  cursor: pointer;
  font-size: 13px; font-weight: 500;
  color: var(--text-2);
  letter-spacing: 0.02em;
  user-select: none;
}
.coach-details[open] summary {
  margin-bottom: 14px;
  color: var(--text-1);
}
.coach-section { margin-bottom: 14px; }
.coach-section:last-child { margin-bottom: 0; }
.coach-section-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 4px;
}
.coach-section p {
  font-size: 14px; line-height: 1.55; color: var(--text-2);
}

/* ─────────────────────────────────────── Inbox / Thread ─── */

.inbox-list, .thread-list {
  display: flex; flex-direction: column; gap: 16px;
}

.empty-state {
  text-align: center;
  padding: 48px 24px;
}

.message-card {
  --card-a-rgb: var(--accent-rgb);
  --card-b-rgb: var(--accent-2-rgb);
}
.message-card.outgoing {
  --card-a-rgb: 0, 228, 255;
  --card-b-rgb: 62, 255, 199;
}
.message-card.incoming {
  --card-a-rgb: 255, 209, 102;
  --card-b-rgb: 255, 122, 26;
}

.message-meta {
  font-size: 12px; color: var(--text-3);
  margin-bottom: 10px;
  display: flex; gap: 12px; align-items: center;
}
.message-text {
  white-space: pre-wrap;
  line-height: 1.65;
  color: var(--text-1);
  font-size: 16px;
}

.steelman-gate {
  background: var(--inset);
  padding: 16px;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
  margin-bottom: 14px;
}
.steelman-gate-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}
.steelman-gate p {
  font-size: 14px; color: var(--text-2); line-height: 1.55;
  margin-bottom: 12px;
}
.steelman-gate.hidden-content .message-text-wrap { display: none; }

/* ─────────────────────────────────────── Runner-SVG ─── */

.runner-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: -1; overflow: visible;
}
.runner-svg path { fill: none; }
.runner-outline {
  stroke: rgba(var(--col-rgb, 255,255,255), 0.10);
  stroke-width: 0.8;
}
.runner-outline-glow {
  stroke: rgba(var(--col-rgb, 255,255,255), 0.10);
  stroke-width: 3;
  filter: blur(2px);
}
.runner-trail-halo { stroke: rgba(var(--col-rgb, 255,255,255), 0.10); stroke-width: 5; filter: blur(4px); }
.runner-trail-4 { stroke: rgba(var(--col-rgb, 255,255,255), 0.12); stroke-width: 2; filter: blur(1.5px); }
.runner-trail-3 { stroke: rgba(var(--col-rgb, 255,255,255), 0.20); stroke-width: 1.1; }
.runner-trail-2 { stroke: rgba(var(--col-rgb, 255,255,255), 0.30); stroke-width: 1.3; }
.runner-trail-1 { stroke: rgba(var(--col-rgb, 255,255,255), 0.45); stroke-width: 1.5; }
.runner-trail-0 { stroke: rgba(var(--col-rgb, 255,255,255), 0.62); stroke-width: 1.7; filter: blur(0.4px); }
.runner-head-burst { stroke: rgba(var(--col-rgb, 255,255,255), 0.35); stroke-width: 10; filter: blur(5px); }

.card { --col-rgb: var(--card-a-rgb); }
.btn-primary { --col-rgb: var(--accent-rgb); }
.btn-ghost { --col-rgb: var(--drift-color); }