/* Kynet — dark + purple ─────────────────────────────────────────────── */
:root {
  --bg: #08070d;
  --bg-2: #0d0b16;
  --bg-3: #131124;
  --ink: #ece9f5;
  --ink-dim: #a39fb8;
  --ink-mute: #6b6780;
  --line: rgba(192, 132, 252, 0.14);
  --line-strong: rgba(192, 132, 252, 0.28);
  --accent: #c084fc;
  --accent-2: #a855f7;
  --accent-deep: #6d28d9;
  --accent-glow: rgba(192, 132, 252, 0.55);
  --danger: #ff5d8f;
  --ok: #6ee7b7;

  --f-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --f-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); }
body {
  font-family: var(--f-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ── shared atoms ─────────────────────────────────────────────────── */
.kn-mono { font-family: var(--f-mono); letter-spacing: 0.02em; }
.kn-display { font-family: var(--f-display); letter-spacing: -0.02em; }
.kn-eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.kn-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px;
  border-radius: 4px;
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  transition: all .18s ease;
}
.kn-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.kn-btn:disabled { opacity: .5; cursor: not-allowed; }
.kn-btn--primary {
  background: var(--accent);
  color: #1a0b2e;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 30px -8px var(--accent-glow);
}
.kn-btn--primary:hover:not(:disabled) { background: #d4a3ff; color: #1a0b2e; border-color: #d4a3ff; }
.kn-btn--primary:disabled {
  background: var(--line-strong); border-color: var(--line-strong);
  color: var(--ink-mute); box-shadow: none;
}
.kn-btn--danger {
  background: rgba(255,93,143,0.08);
  border-color: rgba(255,93,143,0.4);
  color: var(--danger);
}
.kn-btn--danger:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); background: rgba(255,93,143,0.14); }
.kn-btn--block { width: 100%; justify-content: center; padding: 15px 20px; }

.kn-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 14px;
  padding: 12px 0;
  outline: none;
  transition: border-color .15s ease;
}
.kn-input:focus { border-bottom-color: var(--accent); }
.kn-input::placeholder { color: var(--ink-mute); }
.kn-input--ok { border-bottom-color: var(--ok); }
.kn-input--err { border-bottom-color: var(--danger); }

/* logo */
.kn-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 18px;
  color: var(--ink);
  cursor: pointer;
}
.kn-logo-mark {
  width: 22px; height: 22px;
  position: relative;
  display: inline-block;
}
.kn-logo-mark::before, .kn-logo-mark::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--accent);
}
.kn-logo-mark::before { transform: rotate(45deg); }
.kn-logo-mark::after { transform: rotate(0deg); border-color: var(--accent); opacity: .35; }

/* aura glow used in hero */
.kn-aura {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: .55;
}

/* grid lines */
.kn-grid-bg {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* scanlines */
.kn-scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(192,132,252,0.02) 0px,
    rgba(192,132,252,0.02) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
}

/* shared frame — a full-viewport canvas */
.kn-frame {
  width: 100%;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
}
.kn-frame--auth { display: flex; flex-direction: column; }

/* status pill */
.kn-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.kn-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 2s ease-in-out infinite;
}
.kn-pill--danger {
  border-color: rgba(255,93,143,0.4);
  color: var(--danger);
}
.kn-pill--danger .dot {
  background: var(--danger);
  box-shadow: 0 0 8px var(--danger);
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* corner brackets */
.kn-bracket {
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--accent);
}
.kn-bracket--tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.kn-bracket--tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.kn-bracket--bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.kn-bracket--br { bottom: 0; right: 0; border-left: none; border-top: none; }
.kn-bracket--danger { border-color: var(--danger); }

/* caret + spinner */
@keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes kn-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── page entrance ─────────────────────────────────────────────────────────
   Applied to the content area inside _ConsoleLayout so navigating between
   Overview / Keys / Subscriptions / Audit doesn't snap. The aura easing in
   slightly after the content gives it the same "console booting" feel the
   rest of the design has (bracket reveals, eyebrow scan). Both animations
   collapse to instant when the user opts out of motion. */
@keyframes kn-page-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes kn-aura-in {
  from { opacity: 0; }
}
.kn-page-enter {
  animation: kn-page-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
  /* Hint to the compositor — we're animating opacity + transform together. */
  will-change: opacity, transform;
}

/* In-pane swap — used by master-detail layouts (/Keys) where the list
   sidebar is persistent and we only want the detail pane to crossfade.
   Shorter than kn-page-enter and no translate, so switching between rows
   feels like the detail content was always there. */
@keyframes kn-detail-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.kn-detail-enter {
  animation: kn-detail-in 140ms ease-out both;
}
.kn-frame > .kn-aura {
  animation: kn-aura-in 600ms ease-out both;
}
/* Optional opt-in stagger for direct children of a row/grid — used where a
   page has a stat strip or a few major panels to cascade in. */
.kn-stagger > * {
  animation: kn-page-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.kn-stagger > *:nth-child(1) { animation-delay:   0ms; }
.kn-stagger > *:nth-child(2) { animation-delay:  60ms; }
.kn-stagger > *:nth-child(3) { animation-delay: 120ms; }
.kn-stagger > *:nth-child(4) { animation-delay: 180ms; }
.kn-stagger > *:nth-child(5) { animation-delay: 240ms; }
.kn-stagger > *:nth-child(n+6) { animation-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .kn-page-enter,
  .kn-detail-enter,
  .kn-frame > .kn-aura,
  .kn-stagger > * {
    animation: none;
  }
}
.kn-caret {
  display: inline-block;
  width: 10px;
  height: 1.2em;
  background: var(--accent);
  vertical-align: text-bottom;
  margin-left: 4px;
  animation: blink 1s step-end infinite;
}
.kn-spin { display: inline-block; animation: kn-spin 1s linear infinite; }

/* ── public/auth nav ─────────────────────────────────────────────── */
.kn-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 48px;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 5;
}
.kn-nav-links {
  display: flex; gap: 28px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.kn-nav-links a, .kn-nav-links span { cursor: pointer; transition: color .15s; color: inherit; }
.kn-nav-links a:hover, .kn-nav-links span:hover { color: var(--accent); }

/* ── landing (terminal) ──────────────────────────────────────────── */
.kn-hero { padding: 80px 48px 0; position: relative; z-index: 2; }
.kn-hero h1 {
  font-size: 84px;
  line-height: 0.96;
  margin: 0 0 36px;
  font-weight: 500;
  max-width: 920px;
  color: var(--ink);
}
.kn-hero h1 .accent { color: var(--accent); }
.kn-hero p {
  font-size: 17; line-height: 1.55;
  color: var(--ink-dim); max-width: 560px;
  margin: 0 0 48px;
}
.kn-terminal {
  max-width: 720px;
  border: 1px solid var(--line-strong);
  background: rgba(13,11,22,0.6);
  padding: 20px 24px;
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 40px;
  position: relative;
}
/* Generic terminal-ish diagnostic block — same chrome, no fixed margin. */
.kn-cli-block {
  max-width: 720px;
  width: 100%;
  border: 1px solid var(--line-strong);
  background: rgba(13,11,22,0.6);
  padding: 20px 24px;
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.7;
  position: relative;
}
/* Hero/stage container used on landing-style content pages (404, 500, 503). */
.kn-stage {
  position: relative; z-index: 2;
  padding: 80px 48px;
  display: flex; flex-direction: column;
  gap: 48px;
  align-items: flex-start;
}

/* Document-style content pages (legal, help, status, profile-closed). */
.kn-doc-page {
  position: relative; z-index: 2;
  max-width: 780px;
  margin: 0 auto;
  padding: 64px 48px 96px;
}
.kn-doc-page--wide { max-width: 980px; }

.kn-doc {
  border: 1px solid var(--line-strong);
  background: rgba(13,11,22,0.4);
  padding: 36px 40px;
  position: relative;
}
.kn-doc__lead {
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.65;
  margin: 0;
}
.kn-doc__list {
  line-height: 1.85;
  padding-left: 20px;
}

/* Quick-path / link tiles (Help page, future hub pages). */
.kn-card-link {
  display: block;
  border: 1px solid var(--line-strong);
  background: rgba(13,11,22,0.4);
  padding: 20px 24px;
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease;
}
.kn-card-link:hover { border-color: var(--accent); }

/* FAQ-style accordion (used on Help). */
.kn-faq__item {
  border-bottom: 1px solid var(--line);
  padding: 16px 20px;
}
.kn-faq__item:last-child { border-bottom: none; }
.kn-faq__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--ink);
}
.kn-faq__summary::-webkit-details-marker { display: none; }
.kn-faq__answer {
  margin-top: 12px;
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.65;
}

/* SEV table row layout (Help). */
.kn-sev-row { grid-template-columns: 120px 1fr 140px; }
/* Component row (Status). */
.kn-comp-row { grid-template-columns: 1.6fr 1fr 1.4fr 1fr; }

/* Keys detail two-pane content (seats + lifecycle). */
.kn-keys-content {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 20px;
}
.kn-bound-foot {
  border-top: 1px solid var(--line);
  padding: 12px 20px;
}
.kn-life__time {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: 0.12em;
}
.kn-life__head {
  font-size: 13px;
  color: var(--ink);
  margin-top: 2px;
}
.kn-life__detail {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  margin-top: 2px;
}

/* Subscription card right-action column. */
.kn-sub__action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
/* Invoice row layout. */
.kn-inv-row { grid-template-columns: 1.2fr 0.9fr 2fr 0.9fr 0.9fr; }

/* Identity row content (Profile/Index). */
.kn-identity__name {
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 4px;
}
.kn-identity__email {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
}
.kn-identity__meta {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: 0.14em;
  text-align: right;
}

/* Inline framed inset (verification chain box, etc.) */
.kn-inset {
  border: 1px solid var(--line);
  padding: 18px;
  background: rgba(8,7,13,0.5);
}

/* Read-only "field row" (current email block in Profile/Index). */
.kn-field-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--ink-dim);
}

/* Toggle-row (sign-out-other-devices on Profile/Security). */
.kn-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  cursor: pointer;
}
.kn-checkbox--filled {
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border: 1px solid var(--line-strong);
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: border-color 120ms ease, background 120ms ease;
}
.kn-checkbox--filled:hover { border-color: var(--accent); }
.kn-checkbox--filled:checked {
  border-color: var(--accent);
  background: var(--accent);
}
.kn-checkbox--filled:checked::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: #1a0b2e;
}
.kn-checkbox--filled:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Notification channel row (Profile/Notifications). */
.kn-notif-row {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--line);
}
.kn-notif-row:last-child { border-bottom: none; }
.kn-notif-row__title {
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 4px;
}
.kn-notif-row__sub {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
}

/* ── Close-account impact rows + confirmation chain (Profile/Close) ─ */
.kn-impact-row { grid-template-columns: 180px 1fr 24px; padding: 14px 20px; }

.kn-confirm-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  cursor: pointer;
}
.kn-confirm-row__title {
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 4px;
}
.kn-confirm-row__sub {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.kn-confirm-checkbox {
  width: 14px; height: 14px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.kn-confirm-input {
  padding: 14px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
}
.kn-final-step {
  padding: 14px;
  border: 1px solid var(--line);
  background: rgba(8,7,13,0.5);
  font-family: var(--f-mono);
  font-size: 12px;
}
.kn-form-card--danger { border-color: rgba(255,93,143,0.33); }

/* Single-column doc page used on /Profile/Closed (760px center). */
.kn-doc-page--narrow { max-width: 760px; }

/* Generic timeline panel — bordered card with brackets used for multi-step stories. */
.kn-timeline-card {
  border: 1px solid var(--line-strong);
  background: rgba(13,11,22,0.4);
  padding: 24px 28px;
  position: relative;
}

/* ── passphrase strength meter ─────────────────────────────────── */
.kn-strength {
  display: flex; gap: 4px; align-items: center;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--ink-mute);
}
.kn-strength__bar {
  flex: 1;
  height: 2px;
  background: var(--line-strong);
  transition: background 240ms ease, box-shadow 240ms ease;
}
.kn-strength__label {
  margin-left: 8px;
  min-width: 48px;
  text-align: right;
  color: var(--ink-mute);
  transition: color 200ms ease;
}
/* Larger variant used on /Profile/Security */
.kn-strength--lg .kn-strength__bar { height: 4px; }

/* ── terms-checkbox label (Register) ───────────────────────────── */
.kn-checkbox-label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
  line-height: 1.6;
  cursor: pointer;
  user-select: none;
}
.kn-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 14px; height: 14px;
  margin-top: 2px;
  border: 1px solid var(--line-strong);
  background: transparent;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 160ms ease;
}
.kn-checkbox:hover { border-color: var(--accent); }
.kn-checkbox:checked {
  border-color: var(--accent);
  background: var(--accent);
}
.kn-checkbox:checked::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #1a0b2e;
  line-height: 1;
}

/* ── username availability hint ────────────────────────────────── */
.kn-form-hint {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--ink-mute);
}

/* ── auth split footer + cross-link rows ───────────────────────── */
.kn-split__crosslink {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-dim);
  letter-spacing: 0.14em;
}

/* Reusable display headline 56px (legal pages, status, help, etc.) */
.kn-display-h1 {
  font-family: var(--f-display);
  font-size: 56px;
  line-height: 1.0;
  font-weight: 400;
  margin: 0 0 18px;
  letter-spacing: -0.02em;
}
/* Smaller content hero (verify-email, success/expired pages). */
.kn-display-h2 {
  font-family: var(--f-display);
  font-size: 48px;
  line-height: 1.05;
  font-weight: 400;
  margin: 0 0 16px;
}

/* Single-column content page (verify-email, profile/closed). */
.kn-page-pad {
  position: relative;
  z-index: 2;
  padding: 120px 48px;
  max-width: 680px;
}
.kn-footer-strip {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 18px 48px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 11px; color: var(--ink-mute); letter-spacing: 0.12em;
  font-family: var(--f-mono);
  background: rgba(8,7,13,0.6);
  backdrop-filter: blur(4px);
}
.kn-footer-strip a { transition: color .15s ease; }
.kn-footer-strip a:hover { color: var(--accent); }

/* ── auth split (login/register/awaiting/profile) ─────────────────── */
.kn-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  min-height: 100vh;
  position: relative;
  z-index: 2;
}
.kn-split__left {
  padding: 40px 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--line);
  position: relative;
}
.kn-split__right {
  padding: 40px 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.kn-split__form {
  max-width: 400px; width: 100%; align-self: center;
}
.kn-eyebrow--accent { color: var(--accent); }
.kn-headline {
  font-family: var(--f-display);
  font-size: 52px;
  line-height: 1.05;
  font-weight: 400;
  margin: 0 0 28px;
  letter-spacing: -0.02em;
  max-width: 520px;
}
.kn-headline--sm {
  font-size: 44px;
  margin: 0 0 12px;
  line-height: 1.0;
}
.kn-headline--xs {
  font-size: 40px;
  margin: 0 0 12px;
  line-height: 1.0;
}
.kn-lead {
  color: var(--ink-dim);
  font-size: 14px;
  margin: 0 0 36px;
  line-height: 1.55;
}
.kn-lead--lg {
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.6;
  max-width: 460px;
  margin: 0;
}
.kn-headline .accent { color: var(--accent); }

/* ledger panel (left side) */
.kn-ledger {
  margin-top: 40px;
  max-width: 460px;
  border: 1px solid var(--line-strong);
  padding: 20px;
  background: rgba(13,11,22,0.6);
  position: relative;
}
.kn-ledger__head {
  display: flex; justify-content: space-between; margin-bottom: 14px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
}
.kn-ledger__head .accent { color: var(--accent); }
.kn-ledger__row {
  display: grid; grid-template-columns: 24px 1fr; gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.kn-ledger__row:last-child { border-bottom: none; }
.kn-ledger__row--pending { opacity: 0.5; }
.kn-ledger__step {
  width: 22px; height: 22px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 10px;
  color: var(--accent);
}
.kn-ledger__step--active { border-color: var(--accent); box-shadow: 0 0 10px var(--accent); }
.kn-ledger__step--done { border-color: var(--accent); background: var(--accent); color: #1a0b2e; font-weight: 700; }
.kn-ledger__t { font-family: var(--f-mono); font-size: 12px; color: var(--ink); letter-spacing: 0.04em; }
.kn-ledger__d { font-size: 12px; color: var(--ink-mute); margin-top: 2px; }

/* mini ledger (right side under awaiting) */
.kn-mini-ledger {
  margin-top: 20px; padding: 14px 16px;
  border: 1px solid var(--line);
  font-family: var(--f-mono); font-size: 11px;
  line-height: 1.85;
}
.kn-mini-ledger > div { color: var(--ink-mute); }
.kn-mini-ledger .ok { color: var(--ok); }
.kn-mini-ledger .accent { color: var(--accent); }

/* email capsule */
.kn-capsule {
  border: 1px solid rgba(192,132,252,0.33);
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(192,132,252,0.05) 0%, rgba(13,11,22,0.4) 100%);
  font-family: var(--f-mono); font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ink);
  display: flex; justify-content: space-between; align-items: center;
  position: relative;
}

/* expiry bar */
.kn-progress {
  height: 2px; background: var(--line-strong);
  margin-top: 8px; position: relative; overflow: hidden;
}
.kn-progress__fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  transition: width 1s linear;
}

/* ── console nav ─────────────────────────────────────────────────── */
.kn-console-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 32px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
  background: rgba(8,7,13,0.85);
  backdrop-filter: blur(8px);
}
.kn-console-nav__left { display: flex; align-items: center; gap: 32px; }
.kn-console-nav__links {
  display: flex; gap: 24px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.kn-console-nav__links a {
  color: var(--ink-dim);
  transition: color .15s;
}
.kn-console-nav__links a:hover { color: var(--accent); }
.kn-console-nav__links a.is-active { color: var(--accent); }

.kn-console-nav__right { display: flex; align-items: center; gap: 12px; }

.kn-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(192,132,252,0.5);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 12px; color: var(--accent); font-weight: 500;
  background: rgba(192,132,252,0.08);
  cursor: pointer; padding: 0;
  transition: all .15s;
}
.kn-avatar.is-open {
  border-color: var(--accent);
  background: rgba(192,132,252,0.14);
  box-shadow: 0 0 0 3px rgba(192,132,252,0.14), 0 0 18px -4px var(--accent);
}

.kn-menu-wrap { position: relative; }
.kn-menu {
  position: absolute; top: calc(100% + 12px); right: 0;
  min-width: 280px;
  background: rgba(13,11,22,0.96);
  border: 1px solid var(--line-strong);
  box-shadow: 0 20px 60px -20px rgba(192,132,252,0.33), 0 4px 12px rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
  padding: 4px 0;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  z-index: 60;
  display: none;
}
.kn-menu.is-open { display: block; }
.kn-menu__head {
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px;
}
.kn-menu__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--accent); font-weight: 600;
  background: rgba(192,132,252,0.14);
  letter-spacing: 0.10em;
  font-family: var(--f-mono);
  box-shadow: 0 0 14px -4px var(--accent);
  flex-shrink: 0;
}
.kn-menu__name {
  color: var(--ink); font-size: 14px; letter-spacing: 0.01em;
  font-weight: 500; line-height: 1.1;
}
.kn-menu__email {
  color: var(--ink-dim); font-size: 11px; letter-spacing: 0.02em;
  font-family: var(--f-mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.2; margin-top: 4px;
  max-width: 200px;
}
.kn-menu__item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 16px;
  color: var(--ink-dim);
  cursor: pointer;
  transition: background .12s, color .12s;
  background: transparent; border: none;
  font: inherit; width: 100%; text-align: left;
}
.kn-menu__item:hover { background: rgba(192,132,252,0.08); color: var(--accent); }
.kn-menu__item--danger:hover { background: rgba(255,93,143,0.08); color: var(--danger); }
.kn-menu__divider { height: 1px; background: var(--line); margin: 4px 0; }
.kn-menu__hint { font-size: 11px; opacity: 0.7; }

/* ── console layout ──────────────────────────────────────────────── */
.kn-console { padding: 28px 32px; position: relative; z-index: 2; }
.kn-console__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 24px;
}
.kn-h1 {
  font-family: var(--f-display);
  font-size: 36px; font-weight: 400; margin: 0;
  letter-spacing: -0.02em;
}
.kn-h2 {
  font-family: var(--f-display);
  font-size: 22px; font-weight: 400; margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.kn-stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line-strong);
  margin-bottom: 24px;
}
.kn-stat {
  padding: 20px 24px;
  border-right: 1px solid var(--line);
}
.kn-stat:last-child { border-right: none; }
.kn-stat--accent { background: linear-gradient(180deg, rgba(192,132,252,0.06) 0%, transparent 100%); }
.kn-stat__label { margin-bottom: 10px; }
.kn-stat__value {
  font-family: var(--f-display);
  font-size: 36px; font-weight: 400; line-height: 1;
  color: var(--ink); letter-spacing: -0.02em;
}
.kn-stat__value--accent { color: var(--accent); }
.kn-stat__sub {
  font-family: var(--f-mono);
  font-size: 10px; color: var(--ink-mute);
  letter-spacing: 0.10em; margin-top: 6px;
}

/* table-ish panels */
.kn-panel {
  border: 1px solid var(--line-strong);
  background: rgba(13,11,22,0.4);
  position: relative;
}
.kn-panel__head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-mono);
  font-size: 11px; color: var(--ink-mute); letter-spacing: 0.18em;
}

.kn-chips { display: flex; gap: 6px; }
.kn-chip {
  font-family: var(--f-mono);
  font-size: 10px; padding: 5px 10px;
  border: 1px solid var(--line);
  color: var(--ink-mute);
  background: transparent;
  letter-spacing: 0.14em; cursor: pointer;
  user-select: none;
  transition: all 160ms ease;
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
}
.kn-chip.is-on {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(192,132,252,0.08);
}
/* Status-specific active styling: ACTIVE → ok-green, EXPIRING → accent-amber,
   EXPIRED → mute. Stronger visual cue than the default purple-everywhere. */
.kn-chip.is-on[data-kn-chip="ACTIVE"] {
  border-color: var(--ok);
  color: var(--ok);
  background: rgba(74,222,128,0.10);
}
.kn-chip.is-on[data-kn-chip="EXPIRING"] {
  border-color: rgba(250,204,21,0.55);
  color: #facc15;
  background: rgba(250,204,21,0.10);
}
.kn-chip.is-on[data-kn-chip="EXPIRED"] {
  border-color: var(--ink-mute);
  color: var(--ink-dim);
  background: rgba(255,255,255,0.04);
}
.kn-chip__count {
  font-size: 9px; padding: 1px 5px; border-radius: 2px;
  background: var(--bg-2);
}
.kn-chip.is-on .kn-chip__count { background: rgba(192,132,252,0.14); color: var(--accent); }
.kn-chip.is-on[data-kn-chip="ACTIVE"]   .kn-chip__count { background: rgba(74,222,128,0.16);  color: var(--ok); }
.kn-chip.is-on[data-kn-chip="EXPIRING"] .kn-chip__count { background: rgba(250,204,21,0.16);  color: #facc15; }
.kn-chip.is-on[data-kn-chip="EXPIRED"]  .kn-chip__count { background: rgba(255,255,255,0.06); color: var(--ink-dim); }

/* Live indicator: pulsing green dot. Replaces the inline "● LIVE" string. */
.kn-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ok);
}
.kn-live::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px rgba(74,222,128,0.6);
  animation: kn-live-pulse 1.8s ease-in-out infinite;
}
@keyframes kn-live-pulse {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.65); }
}

/* table grid */
.kn-th, .kn-tr {
  display: grid; align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-mono);
}
.kn-th {
  font-size: 10px; color: var(--ink-mute); letter-spacing: 0.18em;
  background: rgba(8,7,13,0.5);
}
.kn-tr {
  font-size: 12px;
  transition: background 0.12s;
}
.kn-tr:hover { background: rgba(192,132,252,0.04); }
.kn-tr:last-child { border-bottom: none; }

/* Clickable row variant — for when the whole row navigates. */
a.kn-tr {
  color: inherit;
  text-decoration: none;
}
a.kn-tr--link { cursor: pointer; }
a.kn-tr--link:hover { background: rgba(192,132,252,0.07); }

.kn-text-right { text-align: right; }

/* keys overview row layout (overview page) */
.kn-overview-tr { grid-template-columns: 1.6fr 1.1fr 1.4fr 0.9fr; padding: 16px 20px; }

/* Overview content grid (main + side rail). */
.kn-overview-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
}
.kn-overview-grid > aside {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Table row body cells used on overview rows. */
.kn-tr__name {
  font-size: 14px;
  color: var(--ink);
  font-family: var(--f-body);
  margin-bottom: 4px;
}
.kn-tr__sub {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: 0.14em;
}

.kn-bar {
  height: 2px; background: var(--line-strong);
  position: relative; overflow: hidden;
}
.kn-bar__fill {
  height: 100%; background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}
.kn-bar__fill--ok { background: var(--ok); box-shadow: none; }
.kn-bar__fill--mute { background: var(--ink-mute); box-shadow: none; }

.kn-status {
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.16em;
  text-align: right;
}
.kn-status--ok { color: var(--ok); }
/* amber = "warning/expiring" — matches the EXPIRING chip filter so the same
   semantic uses the same colour everywhere it appears. The brand's purple
   --accent stays for non-status accents (attention cards, section eyebrows). */
.kn-status--accent { color: #facc15; }
.kn-status--mute { color: var(--ink-mute); }
.kn-status--danger { color: var(--danger); }

/* Pill treatment when a status modifier is paired with kn-mono-section.
   Used for the Keys hero badge ("◐ EXPIRING · 29d 20h …") and the Status
   page indicator. The bordered tinted background gives the status real
   visual weight at a glance. */
.kn-mono-section.kn-status--ok,
.kn-mono-section.kn-status--accent,
.kn-mono-section.kn-status--mute,
.kn-mono-section.kn-status--danger {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: 2px;
}
.kn-mono-section.kn-status--ok     { background: rgba(110,231,183,0.10); }
.kn-mono-section.kn-status--accent { background: rgba(250,204,21,0.10); border-color: rgba(250,204,21,0.55); }
.kn-mono-section.kn-status--mute   { background: rgba(255,255,255,0.04); border-color: var(--ink-mute); }
.kn-mono-section.kn-status--danger { background: rgba(255,93,143,0.10); }

.kn-empty {
  padding: 36px 20px; text-align: center;
  font-family: var(--f-mono); font-size: 11px;
  color: var(--ink-mute); letter-spacing: 0.16em;
}
.kn-empty a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* right rail card */
.kn-card-accent {
  border: 1px solid rgba(192,132,252,0.33);
  padding: 20px;
  background: linear-gradient(180deg, rgba(192,132,252,0.06) 0%, rgba(13,11,22,0.4) 100%);
  position: relative;
}

/* activity feed */
.kn-feed { padding: 8px 20px 12px; }
.kn-feed__row {
  display: grid; grid-template-columns: 46px 1fr;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-mono); font-size: 11px;
}
.kn-feed__row:last-child { border-bottom: none; }
.kn-feed__t { color: var(--ink-mute); letter-spacing: 0.06em; }
.kn-feed__m { color: var(--ink); }
.kn-feed__m--ok { color: var(--ok); }
.kn-feed__m--accent { color: var(--accent); }
.kn-feed__d { color: var(--ink-mute); font-size: 10px; letter-spacing: 0.04em; margin-top: 2px; }

/* ── keys (master/detail) ────────────────────────────────────────── */
.kn-keys-grid { display: grid; grid-template-columns: 340px 1fr; min-height: calc(100vh - 73px); }
.kn-keys-list {
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.kn-keys-list__head { padding: 20px 20px 12px; }
.kn-keys-list__search { position: relative; margin-bottom: 12px; }
.kn-keys-list__search .kn-input { padding-left: 22px; padding-right: 22px; font-size: 13px; }
.kn-keys-list__search-icon {
  position: absolute; left: 0; top: 14px; color: var(--ink-mute); font-size: 12px;
}
.kn-keys-list__search-clear {
  position: absolute; right: 0; top: 14px; color: var(--ink-mute); font-size: 11px;
  background: none; border: none; cursor: pointer; padding: 0; font-family: var(--f-mono);
}
.kn-keys-list__rows {
  flex: 1; overflow-y: auto; border-top: 1px solid var(--line);
}
.kn-keys-list__row {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent;
  cursor: pointer;
  display: block; color: inherit;
}
.kn-keys-list__row.is-selected {
  background: linear-gradient(90deg, rgba(192,132,252,0.07) 0%, transparent 80%);
  border-left-color: var(--accent);
}
.kn-keys-list__row .kn-mono { font-size: 12px; letter-spacing: 0.04em; }
.kn-keys-list__row.is-selected .kn-id { color: var(--accent); }
.kn-id { color: var(--ink); }

.kn-keys-detail { overflow-y: auto; padding: 24px 32px; }
.kn-key-hero {
  border: 1px solid var(--line-strong); padding: 28px;
  background: linear-gradient(180deg, rgba(192,132,252,0.05) 0%, rgba(13,11,22,0.4) 100%);
  position: relative; margin-bottom: 20px;
}
.kn-key-hero__id {
  font-family: var(--f-mono);
  font-size: 28px; color: var(--ink);
  letter-spacing: 0.06em; margin-bottom: 24px;
  word-break: break-all;
}
.kn-timeline {
  height: 4px; background: var(--line-strong); position: relative;
}
.kn-timeline__fill {
  height: 100%; background: linear-gradient(90deg, var(--ok), var(--accent));
  box-shadow: 0 0 12px rgba(192,132,252,0.55);
}
.kn-timeline__fill--mute { background: var(--ink-mute); box-shadow: none; }
.kn-timeline__fill--accent { background: var(--accent); }
.kn-timeline__marker {
  position: absolute; top: -4px; width: 2px; height: 12px; background: var(--ink);
}
.kn-timeline-row {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-family: var(--f-mono); font-size: 10px; color: var(--ink-mute); letter-spacing: 0.12em;
}

.kn-meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-strong); margin-bottom: 20px; }
.kn-meta {
  padding: 16px 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.kn-meta:nth-child(3n) { border-right: none; }
.kn-meta:nth-last-child(-n+3) { border-bottom: none; }
.kn-meta__l { margin-bottom: 6px; }
.kn-meta__v { font-family: var(--f-mono); font-size: 13px; color: var(--ink); }

.kn-seat-grid { padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(18px, 24px)); gap: 4px; }
.kn-seat { aspect-ratio: 1; background: transparent; border: 1px solid var(--line-strong); }
.kn-seat--bound { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 4px rgba(192,132,252,0.33); }

/* Single-seat status (shown instead of the grid when total seats == 1). */
.kn-seat-single {
  padding: 28px 20px;
  display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid var(--line);
}
.kn-seat-single__indicator {
  width: 14px; height: 14px;
  border: 1px solid var(--line-strong);
  background: transparent;
}
.kn-seat-single__indicator.is-bound {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 6px rgba(192,132,252,0.4);
}
.kn-seat-single__label {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* lifecycle vertical timeline */
.kn-life { padding: 12px 20px; }
.kn-life__row { display: grid; grid-template-columns: 12px 1fr; gap: 12px; padding: 8px 0; }
.kn-life__bullet { position: relative; padding-top: 4px; }
.kn-life__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-mute); }
.kn-life__dot--ok { background: var(--ok); }
.kn-life__dot--accent { background: var(--accent); }
.kn-life__dot--current { box-shadow: 0 0 8px var(--accent); }
.kn-life__line { position: absolute; left: 3.5px; top: 14px; bottom: -8px; width: 1px; background: var(--line); }

/* ── subscriptions ─────────────────────────────────────────────── */
.kn-sub {
  border: 1px solid var(--line-strong);
  padding: 20px 24px;
  background: rgba(13,11,22,0.4);
  position: relative;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr 1fr;
  gap: 24px; align-items: center;
}
.kn-sub--expiring {
  background: linear-gradient(90deg, rgba(192,132,252,0.06) 0%, rgba(13,11,22,0.4) 60%);
  border-color: rgba(192,132,252,0.33);
}
.kn-sub--expiring::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent);
}
.kn-sub--cancelled { opacity: 0.6; }

.kn-tag {
  font-family: var(--f-mono);
  font-size: 9px; padding: 3px 8px;
  border: 1px solid var(--line-strong);
  color: var(--ink-mute);
  letter-spacing: 0.14em;
}

/* ── audit ─────────────────────────────────────────────────────── */
.kn-audit-filter {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 12px; margin-bottom: 20px; align-items: center;
}
.kn-search-box {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line-strong);
  padding: 10px 14px;
  background: rgba(13,11,22,0.4);
  font-family: var(--f-mono); font-size: 12px;
}
.kn-search-box input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--ink); font-family: inherit; font-size: inherit;
  letter-spacing: 0.04em;
}

.kn-audit-tr { grid-template-columns: 110px 1.5fr 1.4fr 1.6fr 110px; }
.kn-date-row {
  padding: 10px 20px;
  background: rgba(8,7,13,0.4);
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  font-family: var(--f-mono); font-size: 10px;
  color: var(--ink-mute); letter-spacing: 0.20em;
}

/* ── audit range picker ────────────────────────────────────────── */
.kn-range-picker { position: relative; }
.kn-range-trigger {
  background: transparent;
  border: 1px solid var(--line);
  padding: 8px 12px;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-dim); font-family: var(--f-mono);
  cursor: pointer;
}
.kn-range-trigger:hover { border-color: var(--line-strong); color: var(--ink); }
.kn-range-menu {
  position: absolute; top: calc(100% + 4px); right: 0;
  list-style: none; margin: 0; padding: 4px;
  background: rgba(13,11,22,0.98);
  border: 1px solid var(--line-strong);
  min-width: 140px; z-index: 20;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
.kn-range-menu li { margin: 0; }
.kn-range-menu button {
  width: 100%; text-align: left;
  background: transparent; border: none;
  padding: 8px 12px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--ink-dim); cursor: pointer;
}
.kn-range-menu button:hover { background: rgba(192,132,252,0.08); color: var(--ink); }
.kn-range-menu button.is-on { color: var(--accent); }

/* ── audit load-more ───────────────────────────────────────────── */
.kn-load-more-wrap {
  display: flex; justify-content: center;
  padding: 20px;
  border-top: 1px solid var(--line);
}
.kn-load-more {
  background: transparent;
  border: 1px solid var(--line-strong);
  padding: 10px 24px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--ink-dim); cursor: pointer;
}
.kn-load-more:hover { border-color: var(--accent); color: var(--accent); }
.kn-load-more[disabled] { opacity: 0.5; cursor: default; }

/* ── activate-key modal page ───────────────────────────────────── */
.kn-modal-stage {
  position: relative;
  min-height: calc(100vh - 73px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.kn-modal-stage__dim {
  position: absolute; inset: 0;
  background: rgba(8,7,13,0.85);
  backdrop-filter: blur(6px);
  z-index: 2;
}
.kn-modal-stage__ring {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 800px; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(192,132,252,0.10);
  z-index: 3; pointer-events: none;
}
.kn-modal {
  position: relative; z-index: 4;
  width: 540px;
  padding: 36px 44px 32px;
  border: 1px solid rgba(192,132,252,0.33);
  background: linear-gradient(180deg, rgba(192,132,252,0.06) 0%, rgba(13,11,22,0.6) 100%);
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 100px -20px rgba(192,132,252,0.33), inset 0 1px 0 rgba(255,255,255,0.05);
}
.kn-modal__headline {
  font-family: var(--f-display);
  font-size: 32px;
  line-height: 1.05;
  font-weight: 400;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.kn-modal__lead {
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1.55;
  margin: 0 0 28px;
}
.kn-modal__foot {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: 0.14em;
}
.kn-bracket--md { width: 16px; height: 16px; }
.kn-bracket--ok { border-color: var(--ok); }

/* Success-themed modal variant (e.g. /Activate/Success). */
.kn-modal--ok {
  border-color: rgba(110,231,183,0.45);
  background: linear-gradient(180deg, rgba(110,231,183,0.06) 0%, rgba(13,11,22,0.6) 100%);
  box-shadow: 0 30px 100px -20px rgba(110,231,183,0.33), inset 0 1px 0 rgba(255,255,255,0.05);
}
.kn-modal--danger {
  border-color: rgba(255,93,143,0.40);
  background: linear-gradient(180deg, rgba(255,93,143,0.06) 0%, rgba(13,11,22,0.6) 100%);
  box-shadow: 0 30px 100px -20px rgba(255,93,143,0.33), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Receipt-style framed value strip (used on /Activate/Success). */
.kn-receipt {
  border: 1px solid var(--line-strong);
  background: rgba(8,7,13,0.5);
  padding: 18px 20px;
}
.kn-receipt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line-strong);
}
.kn-receipt-grid > div {
  padding: 16px 20px;
}
.kn-receipt-grid > div + div {
  border-left: 1px solid var(--line);
}
.kn-code-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
/* Two-block variant — used for the verification code (4 + 4). */
.kn-code-grid--2 { grid-template-columns: repeat(2, 1fr); }
.kn-code-grid input {
  text-align: center;
  font-size: 16px;
  letter-spacing: 0.18em;
  padding: 14px 0;
  text-transform: uppercase;
  transition: border-color 0.2s;
}
.kn-code-grid input.is-valid { border-bottom-color: rgba(110,231,183,0.65); }
.kn-code-grid input.is-invalid { border-bottom-color: rgba(255,93,143,0.65); }

.kn-ledger-row {
  margin-top: 24px; padding: 12px 14px;
  border: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-mono); font-size: 11px;
  transition: all 0.2s;
}
.kn-ledger-row.is-checking {
  border-color: rgba(192,132,252,0.33);
  background: rgba(192,132,252,0.04);
}
.kn-ledger-row.is-valid {
  border-color: rgba(110,231,183,0.45);
  background: rgba(110,231,183,0.05);
}
.kn-ledger-row.is-invalid {
  border-color: rgba(255,93,143,0.45);
  background: rgba(255,93,143,0.05);
}

/* ── profile ────────────────────────────────────────────────────── */
.kn-crumb {
  font-family: var(--f-mono);
  font-size: 11px; color: var(--ink-mute); letter-spacing: 0.18em;
  margin-bottom: 8px;
}
.kn-crumb a { color: var(--accent); cursor: pointer; }

.kn-profile-grid {
  display: grid; grid-template-columns: 220px 1fr; gap: 32px;
}
.kn-profile-nav {
  border-right: 1px solid var(--line);
  padding-right: 24px;
}
.kn-profile-nav__head {
  font-family: var(--f-mono);
  font-size: 10px; color: var(--ink-mute); letter-spacing: 0.18em;
  margin-bottom: 14px; padding-left: 12px;
}
.kn-profile-nav a {
  display: block;
  padding: 10px 12px;
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  border-left: 2px solid transparent;
  margin-bottom: 2px;
}
.kn-profile-nav a:hover { color: var(--accent); }
.kn-profile-nav a.is-active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: rgba(192,132,252,0.06);
}
.kn-profile-nav a.is-danger { color: rgba(255,93,143,0.65); }
.kn-profile-nav a.is-danger:hover { color: var(--danger); }
.kn-profile-nav a.is-danger.is-active {
  color: var(--danger);
  border-left-color: var(--danger);
  background: rgba(255,93,143,0.05);
}
.kn-profile-content { max-width: 720px; }

.kn-identity {
  border: 1px solid var(--line-strong);
  padding: 20px 24px;
  display: flex; align-items: center; gap: 20px;
  margin-bottom: 32px;
  background: rgba(13,11,22,0.4);
}
.kn-identity__avatar {
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 18px; color: var(--accent);
  background: rgba(192,132,252,0.08);
  box-shadow: 0 0 18px -4px var(--accent);
}
.kn-form-card {
  border: 1px solid var(--line-strong);
  padding: 24px 28px;
  background: rgba(13,11,22,0.4);
  position: relative;
}

/* notification matrix toggle */
.kn-toggle {
  width: 28px; height: 18px; border-radius: 9px;
  background: var(--line-strong);
  border: 1px solid var(--line);
  position: relative; cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  display: inline-block;
}
.kn-toggle::after {
  content: '';
  position: absolute; top: 1px; left: 1px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ink-mute);
  transition: left 0.15s;
}
.kn-toggle.is-on {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 8px -2px var(--accent);
}
.kn-toggle.is-on::after { left: 11px; background: #08070d; }
.kn-toggle.is-disabled { opacity: 0.35; cursor: not-allowed; }

/* close-account warning */
.kn-warning {
  border: 1px solid rgba(255,93,143,0.4);
  background: rgba(255,93,143,0.04);
  padding: 20px 24px;
  margin-bottom: 32px;
  position: relative;
}

/* generic flash messages */
.kn-flash {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.10em;
  padding: 10px 14px; margin-bottom: 12px;
  border: 1px solid var(--line-strong);
}
.kn-flash--err { border-color: rgba(255,93,143,0.4); color: var(--danger); background: rgba(255,93,143,0.04); }
.kn-flash--ok { border-color: rgba(110,231,183,0.4); color: var(--ok); background: rgba(110,231,183,0.04); }
.kn-flash--info { border-color: rgba(192,132,252,0.33); color: var(--accent); background: rgba(192,132,252,0.04); }

/* utilities */
.kn-spacer { flex: 1; }
.kn-row { display: flex; align-items: center; }
.kn-flex { display: flex; }
.kn-flex-col { display: flex; flex-direction: column; }
.kn-items-start { align-items: flex-start; }
.kn-items-end { align-items: flex-end; }
.kn-items-baseline { align-items: baseline; }
.kn-grow { flex: 1; }
.kn-shrink-0 { flex-shrink: 0; }
.kn-text-center { text-align: center; }
.kn-block { display: block; }
.kn-inline-block { display: inline-block; }
.kn-relative { position: relative; }
.kn-tabular { font-variant-numeric: tabular-nums; }
.kn-break-all { word-break: break-all; }

.kn-gap-4 { gap: 4px; }
.kn-gap-6 { gap: 6px; }
.kn-gap-8 { gap: 8px; }
.kn-gap-10 { gap: 10px; }
.kn-gap-12 { gap: 12px; }
.kn-gap-14 { gap: 14px; }
.kn-gap-16 { gap: 16px; }
.kn-gap-20 { gap: 20px; }
.kn-gap-24 { gap: 24px; }
.kn-gap-32 { gap: 32px; }
.kn-justify-end { justify-content: flex-end; }
.kn-justify-between { justify-content: space-between; }
.kn-justify-center { justify-content: center; }

.kn-mt-2  { margin-top: 2px;  }
.kn-mt-4  { margin-top: 4px;  }
.kn-mt-6  { margin-top: 6px;  }
.kn-mt-8  { margin-top: 8px;  }
.kn-mt-10 { margin-top: 10px; }
.kn-mt-12 { margin-top: 12px; }
.kn-mt-14 { margin-top: 14px; }
.kn-mt-16 { margin-top: 16px; }
.kn-mt-18 { margin-top: 18px; }
.kn-mt-20 { margin-top: 20px; }
.kn-mt-24 { margin-top: 24px; }
.kn-mt-28 { margin-top: 28px; }
.kn-mt-32 { margin-top: 32px; }
.kn-mt-40 { margin-top: 40px; }
.kn-mb-4  { margin-bottom: 4px;  }
.kn-mb-6  { margin-bottom: 6px;  }
.kn-mb-8  { margin-bottom: 8px;  }
.kn-mb-10 { margin-bottom: 10px; }
.kn-mb-12 { margin-bottom: 12px; }
.kn-mb-14 { margin-bottom: 14px; }
.kn-mb-16 { margin-bottom: 16px; }
.kn-mb-18 { margin-bottom: 18px; }
.kn-mb-20 { margin-bottom: 20px; }
.kn-mb-24 { margin-bottom: 24px; }
.kn-mb-28 { margin-bottom: 28px; }
.kn-mb-32 { margin-bottom: 32px; }
.kn-mb-40 { margin-bottom: 40px; }
.kn-ml-4  { margin-left: 4px; }
.kn-ml-6  { margin-left: 6px; }
.kn-ml-8  { margin-left: 8px; }

/* ── color helpers ─────────────────────────────────────────────── */
.kn-c-mute   { color: var(--ink-mute); }
.kn-c-dim    { color: var(--ink-dim); }
.kn-c-ink    { color: var(--ink); }
.kn-c-accent { color: var(--accent); }
.kn-c-deep   { color: var(--accent-deep); }
.kn-c-ok     { color: var(--ok); }
.kn-c-danger { color: var(--danger); }

/* ── background tints ──────────────────────────────────────────── */
.kn-bg-soft   { background: rgba(13,11,22,0.4); }
.kn-bg-deeper { background: rgba(8,7,13,0.5); }
.kn-bg-deepest { background: rgba(8,7,13,0.6); }

/* ── font-size ramp ─────────────────────────────────────────────── */
.kn-fs-9  { font-size: 9px; }
.kn-fs-10 { font-size: 10px; }
.kn-fs-11 { font-size: 11px; }
.kn-fs-12 { font-size: 12px; }
.kn-fs-13 { font-size: 13px; }
.kn-fs-14 { font-size: 14px; }
.kn-fs-15 { font-size: 15px; }
.kn-fs-16 { font-size: 16px; }
.kn-fs-18 { font-size: 18px; }
.kn-fs-20 { font-size: 20px; }
.kn-fs-22 { font-size: 22px; }
.kn-fs-26 { font-size: 26px; }
.kn-fs-28 { font-size: 28px; }
.kn-fs-32 { font-size: 32px; }
.kn-fs-34 { font-size: 34px; }
.kn-fs-36 { font-size: 36px; }
.kn-fs-44 { font-size: 44px; }
.kn-fs-48 { font-size: 48px; }
.kn-fs-52 { font-size: 52px; }
.kn-fs-56 { font-size: 56px; }
.kn-fs-84 { font-size: 84px; }
.kn-fs-120 { font-size: 120px; }

/* ── line-height presets ───────────────────────────────────────── */
.kn-lh-09  { line-height: 0.9; }
.kn-lh-1   { line-height: 1.0; }
.kn-lh-105 { line-height: 1.05; }
.kn-lh-11  { line-height: 1.1; }
.kn-lh-15  { line-height: 1.5; }
.kn-lh-155 { line-height: 1.55; }
.kn-lh-16  { line-height: 1.6; }
.kn-lh-165 { line-height: 1.65; }
.kn-lh-17  { line-height: 1.7; }
.kn-lh-185 { line-height: 1.85; }
.kn-lh-2   { line-height: 2; }

/* ── letter-spacing presets ─────────────────────────────────────── */
.kn-ls-tight    { letter-spacing: -0.02em; }
.kn-ls-snug     { letter-spacing: -0.01em; }
.kn-ls-04       { letter-spacing: 0.04em; }
.kn-ls-06       { letter-spacing: 0.06em; }
.kn-ls-08       { letter-spacing: 0.08em; }
.kn-ls-10       { letter-spacing: 0.10em; }
.kn-ls-12       { letter-spacing: 0.12em; }
.kn-ls-14       { letter-spacing: 0.14em; }
.kn-ls-16       { letter-spacing: 0.16em; }
.kn-ls-18       { letter-spacing: 0.18em; }
.kn-ls-20       { letter-spacing: 0.20em; }

/* ── font-weight ───────────────────────────────────────────────── */
.kn-fw-400 { font-weight: 400; }
.kn-fw-500 { font-weight: 500; }
.kn-fw-600 { font-weight: 600; }
.kn-fw-700 { font-weight: 700; }

/* ── compound mono labels (the kn-mono + size + tracking pattern) ─ */
/* Used for ── HEADER labels, footer strips, status pills, ledger ticks */
.kn-mono-meta {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}
.kn-mono-meta--accent { color: var(--accent); }
.kn-mono-meta--ok     { color: var(--ok); }
.kn-mono-meta--danger { color: var(--danger); }

.kn-mono-section {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
}
.kn-mono-section--accent { color: var(--accent); }

.kn-mono-tag {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  color: var(--ink-mute);
}
.kn-mono-tag--accent { color: var(--accent); }
.kn-mono-tag--danger { color: var(--danger); }
.kn-mono-tag--ok     { color: var(--ok); }

/* ── button size variants ───────────────────────────────────────── */
.kn-btn--xs { padding: 7px 12px;  font-size: 10px; }
.kn-btn--sm { padding: 9px 14px;  font-size: 11px; }
.kn-btn--md { padding: 10px 16px; font-size: 11px; }
.kn-btn--lg { padding: 13px 0;    font-size: 11px; justify-content: center; }
.kn-btn--bare {
  background: none; border: none; padding: 0;
  font-family: var(--f-mono);
  color: var(--ink-mute);
  cursor: pointer;
  line-height: inherit;
}
.kn-btn--bare:hover { color: var(--accent); }

/* Inline form wrapper — keeps the form from introducing a block box that shifts
   button baselines when it sits next to inline siblings inside a flex row. */
.kn-form-inline { display: contents; }

/* ── small framed boxes (the ledger ticker / note panels) ──────── */
.kn-note {
  border: 1px solid var(--line);
  padding: 14px 16px;
  background: rgba(8,7,13,0.4);
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.85;
}
.kn-note--padded { padding: 16px 20px; }

/* ── inline anchors that should look like links ────────────────── */
.kn-link {
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
}
.kn-link--underline {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── overflow ellipsis (account menu emails) ──────────────────── */
.kn-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── grid templates (the ones we used inline most often) ───────── */
.kn-grid-1-1   { display: grid; grid-template-columns: 1fr 1fr; }
.kn-grid-2-1   { display: grid; grid-template-columns: 2fr 1fr; }
.kn-grid-1-2   { display: grid; grid-template-columns: 1fr 2fr; }
.kn-grid-3     { display: grid; grid-template-columns: repeat(3, 1fr); }
.kn-grid-4     { display: grid; grid-template-columns: repeat(4, 1fr); }

/* ── nav-link hover for footer-strip + stack lists ─────────────── */
a.kn-link, a.kn-link-soft { transition: color .15s ease; }
a.kn-link-soft { color: inherit; }
a.kn-link-soft:hover { color: var(--accent); }

/* ── radial-masked grid backdrop (landing hero) ────────────────── */
.kn-grid-mask {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(192,132,252,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(192,132,252,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 30% 50%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 50%, black 0%, transparent 70%);
}

/* ── aura color modifiers (positions stay inline — page-specific) ── */
.kn-aura--accent { background: var(--accent); }
.kn-aura--deep   { background: var(--accent-deep); }
.kn-aura--danger { background: #ff5d8f; }
.kn-aura--ok     { background: var(--ok); }
.kn-aura--soft   { opacity: .14; }
.kn-aura--mid    { opacity: .18; }
.kn-aura--strong { opacity: .30; }
.kn-aura--blur-far { filter: blur(120px); }

/* responsive: collapse splits at narrow viewports */
@media (max-width: 960px) {
  .kn-split { grid-template-columns: 1fr; min-height: auto; }
  .kn-split__left { border-right: none; border-bottom: 1px solid var(--line); }
  .kn-keys-grid { grid-template-columns: 1fr; }
  .kn-keys-list { border-right: none; border-bottom: 1px solid var(--line); }
  .kn-stat-strip { grid-template-columns: repeat(2, 1fr); }
  .kn-sub { grid-template-columns: 1fr; gap: 12px; }
  .kn-meta-grid { grid-template-columns: 1fr; }
  .kn-meta { border-right: none; }
  .kn-profile-grid { grid-template-columns: 1fr; }
  .kn-profile-nav { border-right: none; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: 16px; }
  .kn-hero h1 { font-size: 56px; }
}