/* ==========================================================================
   AgentSecrets.net — Design Tokens
   Atomic Design Tokens derived from DESIGN.md (Factory Style #13d6fc89)
   Terminal war room at midnight: deep black canvas, flat Geist typography,
   minimal 3px/10px radii, hairline borders, and signal orange/metric green accents.
   ========================================================================== */
:root {
  /* ------------------------------------------------------------------------
     1. Primitive Color Palette (Factory Palette)
     ------------------------------------------------------------------------ */
  --color-obsidian-canvas: #101010;
  /* Page background, footer base — the void */
  --color-carbon-lift: #1d1a18;
  /* Raised dark surfaces, nav wells, button fills */
  --color-ash-stroke: #3d3a39;
  /* Hairline borders, ghost outlines, separator lines */
  --color-graphite-mid: #4d4947;
  /* Mid-tone fills, neutral secondary surfaces */
  --color-warm-granite: #8a8380;
  /* Muted body text, secondary copy, inactive labels */
  --color-pale-stone: #b8b3b0;
  /* Tertiary text, section eyebrows, subdued supporting copy */
  --color-bone: #eeeeee;
  /* Primary text, light card surfaces */
  --color-chalk: #fafafa;
  /* High-emphasis light button fill, log-in button */
  --color-signal-orange: #ee6018;
  /* Orange decorative accent for icons, marks, and small graphic details */
  --color-metric-green: #a0ca92;
  /* Green decorative accent for icons, marks, and small graphic details */
  /* Legacy & Semantic Color Aliases */
  --color-obsidian: var(--color-obsidian-canvas);
  --color-charcoal: var(--color-ash-stroke);
  --color-slate: var(--color-ash-stroke);
  --color-graphite: var(--color-graphite-mid);
  --color-ash: var(--color-carbon-lift);
  --color-snow: var(--color-bone);
  --color-silver-mist: var(--color-pale-stone);
  --color-smoke: var(--color-warm-granite);
  --color-phosphor-green: var(--color-metric-green);
  --color-mint-pulse: var(--color-metric-green);
  --color-forest-depth: #1b2619;
  /* ------------------------------------------------------------------------
     2. Typography — Font Families & Weights
     ------------------------------------------------------------------------ */
  --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 500;
  /* Factory style explicitly avoids heavy bold weights */
  --font-weight-bold: 500;
  /* ------------------------------------------------------------------------
     3. Type Scale & Tracking (Factory Tight Negative Tracking)
     ------------------------------------------------------------------------ */
  --text-caption: 12px;
  --leading-caption: 1;
  --tracking-caption: -0.24px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --tracking-body-sm: -0.025em;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.025em;
  --text-subheading: 18px;
  --leading-subheading: 1.35;
  --tracking-subheading: -0.025em;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: -0.031em;
  --text-heading: 36px;
  --leading-heading: 1.1;
  --tracking-heading: -1.12px;
  --text-heading-lg: 44px;
  --leading-heading-lg: 1.12;
  --tracking-heading-lg: -1.1px;
  --text-display: 72px;
  --leading-display: 1;
  --tracking-display: -2.88px;
  /* ------------------------------------------------------------------------
     4. Spacing Scale (8px Grid)
     ------------------------------------------------------------------------ */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-56: 56px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-120: 120px;
  /* ------------------------------------------------------------------------
     5. Border Radius Hierarchy (Factory Flat Geometry: 3px / 10px / 20px)
     ------------------------------------------------------------------------ */
  --radius-sm: 3px;
  /* nav, buttons, inputs, tags */
  --radius-lg: 10px;
  /* cards, modals */
  --radius-2xl: 20px;
  /* large panels */
  --radius-tags: var(--radius-sm);
  --radius-buttons: var(--radius-sm);
  --radius-inputs: var(--radius-sm);
  --radius-cards: var(--radius-lg);
  --radius-md: var(--radius-sm);
  --radius-xl: var(--radius-lg);
  --radius-full: var(--radius-sm);
  /* ------------------------------------------------------------------------
     6. Layout & Dimensions
     ------------------------------------------------------------------------ */
  --page-max-width: 1200px;
  --section-gap: 96px;
  --card-padding: 24px;
  --element-gap: 24px;
  /* ------------------------------------------------------------------------
     7. Elevation (Strictly Zero Shadow / Hairline Ash Strokes)
     ------------------------------------------------------------------------ */
  --border-hairline: 1px solid var(--color-ash-stroke);
  --shadow-sm: none;
  /* ------------------------------------------------------------------------
     8. High-Level Semantic Theme Tokens
     ------------------------------------------------------------------------ */
  --bg-primary: var(--color-obsidian-canvas);
  --bg-secondary: var(--color-carbon-lift);
  --bg-tertiary: #161413;
  --bg-card: var(--color-carbon-lift);
  --bg-card-hover: #262320;
  --bg-canvas: var(--color-obsidian-canvas);
  --border-color: var(--color-ash-stroke);
  --border-subtle: #2d2a29;
  --border-hover: var(--color-graphite-mid);
  --border-focus: var(--color-signal-orange);
  --text-main: var(--color-bone);
  --text-primary: var(--color-bone);
  --text-secondary: var(--color-pale-stone);
  --text-muted: var(--color-warm-granite);
  --accent-primary: var(--color-signal-orange);
  --accent-secondary: var(--color-metric-green);
  --accent-dark: var(--color-carbon-lift);
  --accent-cyan: var(--color-metric-green);
  --accent-blue: var(--color-metric-green);
  --accent-emerald: var(--color-metric-green);
  --accent-orange: var(--color-signal-orange);
  --accent-rose: #ea3943;
  --font-sans: var(--font-geist);
  --font-mono: var(--font-geist-mono);
  --font-circular: var(--font-geist);
  --font-source-code-pro: var(--font-geist-mono);
}
/* ==========================================================================
   AgentSecrets.net — Factory Style (Refero #13d6fc89)
   Terminal war room at midnight: deep black canvas, flat Geist typography,
   minimal 3px/10px radii, hairline borders, and signal orange/metric green accents.
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background-color: var(--color-obsidian-canvas);
  color: var(--color-bone);
  font-family: var(--font-geist);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  letter-spacing: -0.025em;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
body > main.container {
  margin-top: 30px;
  margin-bottom: 60px;
}
/* Container */
.container {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 1.75rem;
}
/* Header / Navbar */
.navbar {
  border-bottom: 1px solid var(--color-ash-stroke);
  background: rgba(16, 16, 16, 0.95);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0.75rem 0;
}
.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1600px;
  width: 100%;
}
.logo-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--color-bone);
  flex-shrink: 0;
}
.logo-icon-svg {
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-text {
  font-size: 1.4375rem;
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--color-bone);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.logo-net-pill {
  font-size: 0.875rem;
  font-family: var(--font-geist-mono);
  font-weight: 400;
  color: var(--color-chalk);
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  line-height: 1.3;
}
/* Both nav clusters are the same strip: same shape, same gap, no wrapping. */
.nav-links,
.nav-group {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: nowrap;
}
.nav-link {
  color: var(--color-warm-granite);
  text-decoration: none;
  font-size: 1rem;
  font-family: var(--font-geist-mono);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.35rem 0.55rem;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.nav-link:hover {
  color: var(--color-chalk);
  background: var(--color-carbon-lift);
}
/* The active dashboard section in the header nav. */
.nav-link-active {
  color: var(--color-chalk);
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
}
/* Header controls used to derive their height from their own padding, so a nav link, the
   account chip and the Log Out button all sat at slightly different sizes. One shared
   height lines them up. The three selectors are deliberately kept in one rule: the point
   is that they are the same control, and splitting them per component would hide that. */
.nav-link,
#nav-user-section .btn,
#nav-user-section .user-chip {
  min-height: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 0.92rem;
}
.nav-skill-highlight {
  color: var(--color-metric-green) !important;
  border: 1px solid rgba(160, 202, 146, 0.35);
  background: rgba(160, 202, 146, 0.08);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.6rem !important;
  font-weight: 500 !important;
}
.nav-skill-highlight:hover {
  background: rgba(160, 202, 146, 0.18) !important;
  border-color: rgba(160, 202, 146, 0.6) !important;
  color: #ffffff !important;
}
#nav-user-section {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1.0625rem;
  font-weight: 400;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  font-family: var(--font-geist);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-chalk);
  color: var(--color-obsidian-canvas);
  font-weight: 500;
  border: 1px solid var(--color-chalk);
}
.btn-primary:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #000000;
}
.btn-secondary {
  background: var(--color-carbon-lift);
  color: var(--color-bone);
  border: 1px solid var(--color-ash-stroke);
}
.btn-secondary:hover {
  background: #252220;
  border-color: var(--color-graphite-mid);
  color: var(--color-chalk);
}
.btn-outline {
  background: transparent;
  color: var(--color-bone);
  border: 1px solid var(--color-ash-stroke);
}
.btn-outline:hover {
  border-color: var(--color-chalk);
  color: var(--color-chalk);
}
.btn-danger {
  background: transparent;
  color: var(--color-signal-orange);
  border: 1px solid rgba(238, 96, 24, 0.4);
}
.btn-danger:hover {
  background: rgba(238, 96, 24, 0.12);
  border-color: var(--color-signal-orange);
}
.btn-sm {
  padding: 4px 10px;
  font-size: 0.9rem;
  font-family: var(--font-geist-mono);
  line-height: 24px;
}
/* Hero Section */
.hero {
  padding: 3.5rem 0 2rem;
  text-align: center;
}
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  color: var(--color-pale-stone);
  font-size: 15px;
  font-family: var(--font-geist-mono);
  text-transform: uppercase;
  letter-spacing: -0.24px;
  margin-bottom: 1.25rem;
}
.hero-title {
  font-size: 3.5625rem;
  font-weight: 400;
  letter-spacing: -1.12px;
  margin-bottom: 1rem;
  color: var(--color-bone);
  line-height: 1.15;
}
.hero-subtitle {
  font-size: 1.3125rem;
  color: var(--color-warm-granite);
  max-width: 680px;
  margin: 0 auto 2rem;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.025em;
}
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
/* ==========================================================================
   Landing hero — what the service is, and who can hand what to whom
   --------------------------------------------------------------------------
   The first block a visitor sees. It says what the thing is (a fast, free,
   private, encrypted vault for credentials an agent fetches on its own), then
   draws the sharing model — the three directions — and only then offers the
   one-line quick start that used to stand in for the whole explanation.

   Everything decorative is CSS: three drifting colour fields, a fading grid, a
   shimmer on the headline, a travelling pulse on every direction rail. No image
   request, no JavaScript, and every animation is off under
   `prefers-reduced-motion`, where the blocks simply render in place.
   ========================================================================== */
/* The showcase block predates the design tokens and keeps its own three font
   stacks; this alias only shortens the two rules that spell one of them out. */
/* One accent per sharing direction, the same three the sharing matrix further
   down the page gives its cards. */
.hero {
  /* The colour fields bleed past the edges on purpose. */
  position: relative;
  overflow: hidden;
}
.hero-inner {
  /* Above the backdrop, which is absolutely positioned behind it. */
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
}
/* --- Decorative backdrop -------------------------------------------------- */
.hero-aurora {
  position: absolute;
  inset: -12rem -10% auto;
  height: calc(100% + 12rem);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.5;
  will-change: transform;
}
.hero-aurora-blob-a {
  top: -4rem;
  left: 4%;
  width: 34rem;
  height: 34rem;
  background: radial-gradient(circle, rgba(238, 96, 24, 0.55), transparent 68%);
  animation: hero-blob-drift 24s ease-in-out infinite;
}
.hero-aurora-blob-b {
  top: -1rem;
  right: 3%;
  width: 30rem;
  height: 30rem;
  background: radial-gradient(circle, rgba(160, 202, 146, 0.42), transparent 70%);
  animation: hero-blob-drift 31s ease-in-out infinite reverse;
}
.hero-aurora-blob-c {
  /* Lowest of the three and the faintest: it sits behind the property tiles and
     the flow cards, where body text has to stay readable. */
  top: 21rem;
  left: 38%;
  width: 28rem;
  height: 28rem;
  background: radial-gradient(circle, rgba(192, 132, 252, 0.3), transparent 70%);
  animation: hero-blob-drift 38s ease-in-out infinite;
  animation-delay: -9s;
}
/* Graph paper, faded out at the edges so it never competes with the headline,
   drifting one cell at a time. */
.hero-aurora-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  -webkit-mask-image: radial-gradient(120% 78% at 50% 0%, #000 18%, transparent 70%);
  mask-image: radial-gradient(120% 78% at 50% 0%, #000 18%, transparent 70%);
  animation: hero-grid-drift 9s linear infinite;
}
@keyframes hero-blob-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(3%, -5%, 0) scale(1.14);
  }
}
@keyframes hero-grid-drift {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 48px 48px, 48px 48px;
  }
}
/* --- Headline block ------------------------------------------------------- */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1.15rem;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-ash-stroke);
  color: var(--color-pale-stone);
  font-size: 15px;
  font-family: var(--font-geist-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  animation: hero-rise 0.55s ease-out both;
}
.hero-eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-metric-green);
  animation: hero-dot-pulse 2.4s ease-out infinite;
}
.hero-headline {
  font-size: 4.25rem;
  line-height: 1.06;
  letter-spacing: -1.12px;
  font-weight: 500;
  color: var(--color-bone);
  margin: 0 0 1.25rem;
  animation: hero-rise 0.6s ease-out 0.06s both;
}
/* The accent word keeps a solid colour first and only takes the moving gradient
   where `background-clip: text` is really supported: if it were applied to a
   browser that ignores the clip, transparent text would paint nothing at all. */
.hero-headline-accent {
  color: var(--color-signal-orange);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-headline-accent {
    background-image: linear-gradient(100deg, #ee6018 0%, #ffb27a 22%, #ee6018 46%, #ff9660 68%, #ee6018 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: hero-shimmer 8s linear infinite;
  }
}
@keyframes hero-shimmer {
  from {
    background-position: 0% center;
  }
  to {
    background-position: 200% center;
  }
}
.hero-lead {
  max-width: 780px;
  margin: 0 auto;
  color: var(--color-pale-stone);
  font-size: 1.25rem;
  line-height: 1.6;
  animation: hero-rise 0.6s ease-out 0.12s both;
}
.hero-lead code {
  font-family: var(--font-geist-mono);
  font-size: 0.92em;
  color: var(--color-bone);
  background: rgba(255, 255, 255, 0.07);
  padding: 1px 6px;
  border-radius: 4px;
}
.hero-lead-quiet {
  margin-top: 0.6rem;
  font-size: 1.1rem;
  color: var(--color-metric-green);
  animation-delay: 0.18s;
}
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes hero-dot-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(160, 202, 146, 0.55);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(160, 202, 146, 0);
  }
}
/* --- Fast / Free / Private / Encrypted ------------------------------------ */
.hero-props {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 0.75rem;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.hero-prop {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.05rem 1.15rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-lg);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  animation: hero-rise 0.6s ease-out both;
  /* A coloured rule along the top edge: one hue per property, so the four read
     as a set without four competing fills. */
}
.hero-prop::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--hero-prop-accent), transparent);
  opacity: 0.8;
}
.hero-prop:hover {
  transform: translateY(-3px);
  border-color: var(--color-graphite-mid);
  box-shadow: 0 18px 34px -22px rgba(0, 0, 0, 0.95), inset 0 0 34px -18px var(--hero-prop-accent);
}
.hero-prop-fast {
  --hero-prop-accent: #ee6018;
  animation-delay: 0.24s;
}
.hero-prop-free {
  --hero-prop-accent: var(--color-metric-green);
  animation-delay: 0.3s;
}
.hero-prop-private {
  --hero-prop-accent: #c084fc;
  animation-delay: 0.36s;
}
.hero-prop-encrypted {
  --hero-prop-accent: #38bdf8;
  animation-delay: 0.42s;
}
.hero-prop-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--hero-prop-accent);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  animation: hero-icon-breathe 5s ease-in-out infinite;
}
.hero-prop-title {
  color: var(--color-bone);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.hero-prop-note {
  color: var(--color-warm-granite);
  font-size: 0.95rem;
  line-height: 1.55;
}
.hero-prop-note a {
  color: var(--color-pale-stone);
  text-decoration: underline;
}
.hero-prop-note a:hover {
  color: var(--color-bone);
}
@keyframes hero-icon-breathe {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  50% {
    box-shadow: 0 0 22px -6px var(--hero-prop-accent);
  }
}
/* --- The sharing model, drawn --------------------------------------------- */
.hero-flow {
  margin-top: 3.25rem;
  animation: hero-rise 0.7s ease-out 0.34s both;
}
.hero-flow-heading {
  margin: 0 0 0.5rem;
  font-size: 2rem;
  letter-spacing: -1.12px;
  color: var(--color-bone);
}
.hero-flow-lead {
  max-width: 720px;
  margin: 0 auto 1.6rem;
  color: var(--color-warm-granite);
  font-size: 1.05rem;
  line-height: 1.55;
}
.hero-flow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 1rem;
}
.hero-flow-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.15rem 1.2rem 1.3rem;
  text-align: left;
  background: radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012) 62%), var(--color-carbon-lift);
  /* The top edge carries the direction's accent, exactly like the sharing
     matrix cards further down the page. */
  border: 1px solid var(--color-ash-stroke);
  border-top: 2px solid var(--hero-accent);
  border-radius: var(--radius-lg);
  box-shadow: 0 22px 44px -34px rgba(0, 0, 0, 0.95);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-flow-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 52px -32px var(--hero-accent);
}
.hero-flow-card-ha {
  --hero-accent: var(--color-metric-green);
}
.hero-flow-card-ah {
  --hero-accent: var(--color-signal-orange);
}
.hero-flow-card-aa {
  --hero-accent: #c084fc;
}
.hero-flow-track {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.2rem;
}
.hero-flow-node {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: var(--hero-accent);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--hero-accent);
  /* The ring that leaves the node and fades, so the eye starts at the sender. */
}
.hero-flow-node::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--hero-accent);
  pointer-events: none;
  animation: hero-node-ping 3.4s ease-out infinite;
}
@keyframes hero-node-ping {
  0% {
    transform: scale(0.9);
    opacity: 0.5;
  }
  70% {
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
.hero-flow-link {
  position: relative;
  flex: 1 1 auto;
  min-width: 44px;
  height: 2px;
  /* The dashed rail and the travelling spark are two elements because a child
     cannot be more opaque than its parent: at 0.5 on one box, the spark would
     dim with it. */
}
.hero-flow-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background-image: linear-gradient(90deg, var(--hero-accent) 0 6px, transparent 6px 14px);
  background-size: 14px 2px;
  background-repeat: repeat-x;
  opacity: 0.55;
  animation: hero-flow-dash 1.1s linear infinite;
}
.hero-flow-link::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--hero-accent);
  box-shadow: 0 0 12px 2px var(--hero-accent);
  animation: hero-flow-pulse 2.8s ease-in-out infinite;
}
@keyframes hero-flow-dash {
  to {
    background-position-x: 14px;
  }
}
@keyframes hero-flow-pulse {
  0% {
    left: 0;
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  86% {
    opacity: 1;
  }
  100% {
    left: calc(100% - 8px);
    opacity: 0;
  }
}
.hero-flow-title {
  margin: 0;
  color: var(--color-bone);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.hero-flow-arrow {
  color: var(--hero-accent);
}
.hero-flow-copy {
  margin: 0;
  color: var(--color-warm-granite);
  font-size: 0.95rem;
  line-height: 1.55;
}
.hero-flow-foot {
  margin: 1.3rem 0 0;
  color: var(--color-warm-granite);
  font-size: 0.95rem;
}
.hero-flow-foot a {
  color: var(--color-metric-green);
  text-decoration: underline;
}
.hero-flow-foot a:hover {
  color: var(--color-chalk);
}
/* --- The quick start under it --------------------------------------------- */
.hero-start-heading {
  margin: 0 0 0.3rem;
  font-size: 1.5rem;
  letter-spacing: -1.12px;
  color: var(--color-bone);
}
.hero-start-lead {
  margin: 0;
  color: var(--color-warm-granite);
  font-size: 1rem;
}
.molt-showcase-wrapper {
  max-width: 1000px;
  /* The hero's own bottom padding closes the block now, so the widget only needs
     its distance from the flow above. */
  margin: 3rem auto 0;
  text-align: center;
  animation: hero-rise 0.7s ease-out 0.4s both;
}
/* --- Responsive and motion ------------------------------------------------ */
@media (max-width: 900px) {
  .hero-headline {
    font-size: 3rem;
  }
  .hero-lead {
    font-size: 1.125rem;
  }
  .hero-flow {
    margin-top: 2.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow,
  .hero-eyebrow-dot,
  .hero-headline,
  .hero-headline-accent,
  .hero-lead,
  .hero-prop,
  .hero-prop-icon,
  .hero-flow,
  .hero-flow-node::after,
  .hero-flow-link::before,
  .hero-flow-link::after,
  .hero-aurora-blob,
  .hero-aurora-grid,
  .molt-showcase-wrapper {
    animation: none;
  }
  .hero-prop:hover,
  .hero-flow-card:hover {
    transform: none;
  }
}
/* Three unified toggle tabs (Segmented Bar) */
.molt-tabs-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 1.5rem auto 1.25rem;
  max-width: max-content;
  width: 100%;
  background: #141211;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  padding: 4px;
}
.molt-tab-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--font-geist);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  border: 1px solid transparent;
  user-select: none;
  white-space: nowrap;
  max-width: max-content;
  /* One accent colour for the selected tab. The strip previously changed colour per tab
     (green / orange / violet), which made the same widget look like three different
     widgets and fought with the logo accent. */
}
.molt-tab-btn.active {
  background: rgba(238, 96, 24, 0.16);
  color: #ff7a29;
  border-color: rgba(238, 96, 24, 0.5);
  box-shadow: 0 1px 6px rgba(238, 96, 24, 0.15);
}
.molt-tab-btn.inactive {
  background: transparent;
  color: var(--color-warm-granite);
  border-color: transparent;
}
.molt-tab-btn.inactive:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-chalk);
}
.molt-tab-icon {
  flex: 0 0 auto;
  margin-right: 7px;
  opacity: 0.9;
}
/* Card Container */
.molt-card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-lg);
  padding: 26px 30px;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  transition: border-color 0.2s ease;
}
.molt-card-title {
  font-size: 20.5px;
  font-weight: 700;
  color: #f0f0f0;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
/* Inner Code Box */
.molt-code-box {
  background: #101010;
  border: 1px solid #222222;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 20px;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease;
  /* The copy hint only exists while the box is hovered. */
}
.molt-code-box:hover {
  border-color: #383838;
  background: #131313;
}
.molt-code-box:hover .molt-code-copy-hint {
  opacity: 1;
}
.molt-code-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 17px;
  line-height: 1.5;
  color: #00e5a3;
  word-break: break-word;
  display: block;
}
.molt-code-copy-hint {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #666;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
/* Numbered Steps List */
.molt-steps-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  font-size: 17.5px;
  line-height: 1.45;
}
.molt-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.molt-step-num {
  font-weight: 700;
  color: #ee6018;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  flex-shrink: 0;
  min-width: 14px;
}
.molt-step-text {
  color: #9e9e9e;
}
.molt-card-sublink {
  margin-top: 18px;
  font-size: 16px;
  color: #777777;
}
.molt-card-sublink a {
  color: #00d26a;
  text-decoration: underline;
}
.molt-card-sublink a:hover {
  color: #00e5a3;
}
/* Responsive overrides stay in their own block at the end of the section: they
   set properties (`gap`, `padding`) that the base rules above also set, so LESS
   must not hoist them above those rules. */
@media (max-width: 640px) {
  .hero-headline {
    font-size: 2.3rem;
  }
  .hero-flow-heading {
    font-size: 1.6rem;
  }
  /* A 72px blur on a phone is expensive for what it adds; the fields stay, the
     cost does not. */
  .hero-aurora-blob {
    filter: blur(46px);
  }
  .hero-prop {
    padding: 0.9rem 0.95rem 1rem;
  }
  .molt-tabs-row {
    flex-direction: column;
    width: calc(100% - 24px);
    margin-left: 12px;
    margin-right: 12px;
    gap: 4px;
  }
  .molt-tab-btn {
    width: 100%;
    white-space: normal;
  }
  .molt-card {
    padding: 18px 16px;
    margin: 0 12px;
  }
}
/* ==========================================================================
   Tested AI Agents & Autonomous Runtimes Section
   ========================================================================== */
.tested-agents-section {
  padding: 3rem 0 3rem 0;
  border-top: 1px solid var(--color-ash-stroke);
  border-bottom: 1px solid var(--color-ash-stroke);
  margin-bottom: 3.5rem;
}
.tested-agents-header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 2.25rem;
}
.tested-agents-title {
  font-size: 2.6875rem;
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--color-bone);
  margin-bottom: 0.75rem;
  line-height: 1.15;
}
.tested-agents-subtitle {
  font-size: 19px;
  color: var(--color-warm-granite);
  line-height: 1.55;
  margin-bottom: 1.5rem;
}
/* High-Tech CI Telemetry Strip */
.agent-telemetry-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin-bottom: 1.75rem;
}
.agent-telemetry-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  font-family: var(--font-geist-mono);
  font-size: 14px;
  letter-spacing: -0.01em;
}
.agent-telemetry-label {
  color: var(--color-warm-granite);
  font-weight: 400;
}
.agent-telemetry-val {
  color: var(--color-bone);
  font-weight: 500;
}
.agent-telemetry-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.agent-telemetry-dot.dot-green {
  background-color: var(--color-metric-green);
}
.agent-telemetry-dot.dot-cyan {
  background-color: #38bdf8;
}
.agent-telemetry-dot.dot-orange {
  background-color: var(--color-signal-orange);
}
.agent-telemetry-dot.dot-purple {
  background-color: #a78bfa;
}
.agent-telemetry-dot.dot-emerald {
  background-color: #10b981;
}
/* Filter Tabs Bar */
.agent-controls-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}
.agent-filter-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-md);
  padding: 6px;
}
.agent-tab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-warm-granite);
  font-family: var(--font-geist-mono);
  font-size: 15px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.agent-tab:hover {
  color: var(--color-bone);
  border-color: var(--color-ash-stroke);
}
.agent-tab.active {
  background: var(--color-bone);
  color: var(--color-obsidian-canvas);
  border-color: var(--color-bone);
  font-weight: 500;
}
/* Agent Cards Grid */
.agent-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.15rem;
  margin-bottom: 2.5rem;
}
.agent-card {
  position: relative;
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.agent-card:hover {
  border-color: var(--color-pale-stone);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  /* The card's own logo mark lifts with it. */
}
.agent-card:hover .agent-logo-box {
  transform: scale(1.06);
}
.agent-card-accent-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  opacity: 0.9;
}
.agent-card-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 1rem;
}
.agent-card-identity {
  display: flex;
  align-items: center;
  gap: 12px;
}
.agent-logo-box {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #141211;
  border: 1px solid #2e2a28;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.agent-name-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.agent-name {
  font-size: 19px;
  font-weight: 500;
  color: var(--color-bone);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.agent-creator {
  font-family: var(--font-geist-mono);
  font-size: 14px;
  color: var(--color-pale-stone);
}
.agent-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 0.75rem;
  border-top: 1px solid #2a2725;
}
.agent-chip {
  font-family: var(--font-geist-mono);
  font-size: 12.5px;
  color: var(--color-pale-stone);
  background: #141211;
  border: 1px solid #2e2a28;
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  letter-spacing: 0.02em;
}
.agent-chip-metric {
  font-family: var(--font-geist-mono);
  font-size: 12.5px;
  color: var(--color-metric-green);
  background: rgba(160, 202, 146, 0.08);
  border: 1px solid rgba(160, 202, 146, 0.2);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font-weight: 500;
}
/* Agent Methodology Bar */
.agent-methodology-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-md);
  padding: 1.5rem;
}
.method-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.method-num {
  font-family: var(--font-geist-mono);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-signal-orange);
  line-height: 1;
  padding-top: 2px;
}
.method-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-bone);
  margin-bottom: 4px;
}
.method-desc {
  font-size: 15px;
  color: var(--color-warm-granite);
  line-height: 1.45;
}
.method-desc code {
  background: #141211;
  padding: 1px 4px;
  border-radius: 3px;
  font-family: var(--font-geist-mono);
  color: var(--color-pale-stone);
}
@media (max-width: 640px) {
  .agent-cards-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  .agent-tab {
    padding: 5px 10px;
    font-size: 14px;
  }
}
/* Auth Modal & Container */
.modal-card.auth-modal-card {
  max-width: 500px;
  width: 100%;
}
.auth-container {
  max-width: 100%;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}
.auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-ash-stroke);
  background: #141211;
}
.auth-tab {
  flex: 1;
  text-align: center;
  padding: 0.85rem;
  font-size: 1.0625rem;
  font-weight: 400;
  font-family: var(--font-geist);
  color: var(--color-warm-granite);
  cursor: pointer;
  background: transparent;
  border: none;
  transition: all 0.15s;
}
.auth-tab.active {
  color: var(--color-bone);
  border-bottom: 2px solid var(--color-signal-orange);
  background: var(--color-carbon-lift);
}
.auth-body {
  padding: 1.75rem;
}
.form-group {
  margin-bottom: 1.25rem;
}
.form-label {
  display: block;
  font-size: 1.025rem;
  font-weight: 400;
  color: var(--color-pale-stone);
  margin-bottom: 0.4rem;
  font-family: var(--font-geist);
}
.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: #12100f;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  color: var(--color-bone);
  font-size: 1.125rem;
  font-family: var(--font-geist);
  transition: border-color 0.15s;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-signal-orange);
  box-shadow: none;
}
.form-mono {
  font-family: var(--font-geist-mono);
}
/* Password fields with a show/hide eye toggle. */
.password-wrap {
  position: relative;
}
.password-wrap .form-input {
  padding-right: 2.75rem;
}
.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  /* No dimming: at 0.7 the eye sank into the dark field and was easy to miss. */
  opacity: 1;
  transition: background 0.15s;
  /* The button holds both eyes and paints exactly one, so the glyph reports the state
     the field is in rather than the action the click would take: struck through while
     the value is masked, open while it is on screen.
     The state cannot be read off `.active`: the password inputs are masked until the
     button is engaged, while the secret-value textarea is shown by default and is
     masked BY engaging it. `is-revealed` is therefore set by the script that owns the
     field, and both eyes ship here rather than being swapped in the markup. */
}
.password-toggle:hover,
.password-toggle.active {
  background: var(--color-carbon-lift);
}
.password-toggle .icon-eye,
.password-toggle .icon-eye-off {
  /* Near-white rather than the muted grey inherited from the surrounding text. */
  color: #fafafa;
}
.password-toggle .icon-eye {
  display: block;
}
.password-toggle .icon-eye-off {
  display: none;
}
.password-toggle.is-revealed .icon-eye {
  display: none;
}
.password-toggle.is-revealed .icon-eye-off {
  display: block;
}
/* The secret-value field header: label on the left, Generate + eye on the right. */
.value-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}
.value-field-head .form-label {
  margin-bottom: 0;
}
.value-field-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
/* In this header the eye sits in the flow, not floating over an input. */
.value-field-actions .password-toggle {
  position: static;
  transform: none;
  width: 28px;
  height: 28px;
}
/* The value is visible by default; toggling the eye hides it behind dots. The field is a
   textarea, so this uses the browser's own password-masking rather than a type switch. */
.secret-value-masked {
  -webkit-text-security: disc;
  text-security: disc;
}
/* Dashboard View */
.dashboard-view {
  padding: 1.5rem 0 4rem;
}
.dashboard-panel {
  margin-top: 1.5rem;
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
}
/* User Chip in Navbar */
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-geist-mono);
  font-size: 15px;
  color: var(--color-bone);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.user-chip .dot-pulse-green {
  width: 6px;
  height: 6px;
}
/* User Command Center Banner */
.user-banner {
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}
@media (max-width: 992px) {
  .user-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
}
.user-identity-group {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  min-width: 0;
}
.user-avatar-badge {
  width: 40px;
  height: 40px;
  background: #141211;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.user-identity-text {
  min-width: 0;
}
.user-heading {
  font-family: var(--font-geist);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-bone);
  letter-spacing: -0.02em;
  /* Nothing sits under the name any more (the account-type pill is gone), so the
     heading no longer needs a bottom margin. */
  margin: 0;
}
.user-id-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #12100f;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font-family: var(--font-geist-mono);
  font-size: 15px;
  color: var(--color-warm-granite);
  transition: all 0.15s ease;
}
.user-id-chip:hover {
  border-color: var(--color-pale-stone);
  color: var(--color-bone);
}
.user-id-chip code {
  color: var(--color-pale-stone);
}
/* Compact stat chips that replaced the three-row telemetry column. */
.vault-stats-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.vault-stat-chip {
  background: #12100f;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  font-family: var(--font-geist-mono);
  font-size: 15px;
  padding: 6px 10px;
  color: var(--color-pale-stone);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.vault-stat-chip b {
  color: var(--color-bone);
  font-weight: 600;
}
/* Right Token Management Column */
.token-mgmt-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.token-box {
  display: flex;
  gap: 0.5rem;
  background: #12100f;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.75rem;
  font-family: var(--font-geist-mono);
  font-size: 15px;
  max-width: 360px;
  align-items: center;
}
.token-value {
  color: var(--color-metric-green);
  letter-spacing: 0.04em;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.token-actions {
  display: flex;
  gap: 0.65rem;
}
.token-actions .btn {
  font-family: var(--font-geist-mono);
  font-size: 15px;
  padding: 7px 14px;
}
/* Dashboard Action Toolbar */
.dashboard-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.75rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 1 auto;
  min-width: 0;
  max-width: none;
  flex-wrap: nowrap;
}
.search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 180px;
  min-width: 140px;
}
.search-icon-svg {
  position: absolute;
  left: 12px;
  color: var(--color-warm-granite);
  pointer-events: none;
}
.search-input {
  width: 100%;
  height: 42px;
  padding-left: 2.45rem;
  padding-right: 1rem;
  font-family: var(--font-geist);
  font-size: 17px;
}
/* A search that is actually narrowing the list says so at the field itself, not only in the
   row count someone has to go looking for. The class is set by renderSecretsTable(). */
.search-input.is-filtering {
  border-color: var(--color-signal-orange);
  box-shadow: 0 0 0 3px rgba(238, 96, 24, 0.08);
  background: #151312;
}
.search-wrapper:has(.search-input.is-filtering) .search-icon-svg {
  color: var(--color-signal-orange);
}
/* How much the search is showing and how much it is hiding. Empty and inert until a filter
   is typed, so the toolbar does not carry a permanent label. */
.search-note {
  font-family: var(--font-geist-mono);
  font-size: 12.5px;
  color: var(--color-warm-granite);
  white-space: nowrap;
}
.search-note.is-active {
  color: var(--color-signal-orange);
}
.env-select {
  width: auto;
  height: 42px;
  min-width: 155px;
  font-family: var(--font-geist-mono);
  font-size: 15.5px;
  padding: 0 1rem;
}
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.btn-group-export {
  display: inline-flex;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #141211;
  height: 42px;
}
.btn-group-export .btn {
  border: none;
  border-radius: 0;
  border-right: 1px solid var(--color-ash-stroke);
  background: transparent;
  color: var(--color-pale-stone);
  font-family: var(--font-geist-mono);
  font-size: 15px;
  padding: 0 1rem;
  display: inline-flex;
  align-items: center;
}
.btn-group-export .btn:last-child {
  border-right: none;
}
.btn-group-export .btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-bone);
}
.toolbar-right .btn-secondary {
  height: 42px;
  font-family: var(--font-geist-mono);
  font-size: 15px;
  padding: 0 1.15rem;
  display: inline-flex;
  align-items: center;
}
.btn-new-secret {
  background: var(--color-bone);
  color: #101010;
  border: 1px solid var(--color-bone);
  font-family: var(--font-geist);
  font-weight: 500;
  font-size: 17px;
  height: 42px;
  padding: 0 1.35rem;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-new-secret:hover {
  background: #ffffff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.15);
}
/* Secrets Table */
/* The vault table wears the shared vault's row language: a row is its own small card
   inside the panel, not a line in a spreadsheet. The card gets the same inset padding the
   shared-vault card has, so the row cards float inside it. */
.secrets-card {
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
  box-shadow: none;
  margin-bottom: 2.25rem;
}
/* The table owns its header, its cells, its last row and its hover state. These
   five rules were already adjacent, so nesting them changes nothing in the
   compiled order. The column widths that also target .secrets-table live in
   _inline-extracted.less, which has to stay last. */
/* A vault longer than 20 rows scrolls inside its own card instead of stretching the page
   and pushing the rest of the dashboard out of reach. `is-scrollable` is only set past that
   count (renderSecretsTable), so a short vault has no scrollbar and no wasted height; the
   box below is the visible ceiling, not a fixed height. */
.secrets-scroll.is-scrollable {
  max-height: 500px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius-sm);
  /* The header rides the scroll, so the reader never loses the column names. */
  /* A visible track on a dark sheet, or the reader cannot tell there is more below. */
  scrollbar-width: thin;
  scrollbar-color: var(--color-graphite-mid) transparent;
}
.secrets-scroll.is-scrollable .secrets-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-left: 18px;
}
.secrets-scroll.is-scrollable::-webkit-scrollbar {
  width: 10px;
}
.secrets-scroll.is-scrollable::-webkit-scrollbar-thumb {
  background: var(--color-graphite-mid);
  border-radius: 999px;
}
.secrets-scroll.is-scrollable::-webkit-scrollbar-track {
  background: transparent;
}
/* The date this version was written. Narrow and quiet: it is context, not the thing the eye
   should land on first. */
.cell-updated {
  font-family: var(--font-geist-mono);
  font-size: 12.5px;
  color: var(--color-warm-granite);
  white-space: nowrap;
}
/* The header is a legend line above the row cards, not a plated title bar. Its background
   stays an opaque card fill even though it looks transparent: `position: sticky` needs it,
   or the rows scroll through the labels. */
.secrets-table {
  width: 100%;
  /* Separate borders are what lets one row be a rounded card with air around it. */
  border-collapse: separate;
  border-spacing: 0 6px;
  text-align: left;
  /* The two edges of the row card: side strokes and the rounded corners live on the first
     and last cell, because a radius on a <tr> is not reliably painted. */
}
.secrets-table th {
  background: var(--color-carbon-lift);
  color: var(--color-warm-granite);
  font-size: 12.5px;
  font-family: var(--font-geist-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 0.7rem 0.35rem;
  border-bottom: none;
  font-weight: 500;
  /* "TYPE & FLAGS" was wrapping onto two lines in the narrow column. */
  white-space: nowrap;
}
.secrets-table td {
  padding: 0.6rem 0.7rem;
  background: #12100f;
  border-top: 1px solid var(--color-ash-stroke);
  border-bottom: 1px solid var(--color-ash-stroke);
  font-size: 15px;
  vertical-align: middle;
}
.secrets-table td:first-child {
  border-left: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  padding-left: 18px;
}
.secrets-table td:last-child {
  border-right: 1px solid var(--color-ash-stroke);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.secrets-table tbody tr:hover td {
  background: #252220;
}
.key-cell {
  display: flex;
  gap: 0.55rem;
  /* A key that wraps must keep its icon on the first line and stay inside the column. */
  align-items: center;
  min-width: 0;
}
.key-icon {
  color: var(--color-signal-orange);
  font-size: 1rem;
  opacity: 0.8;
}
.key-name {
  font-family: var(--font-geist-mono);
  font-weight: 500;
  /* The same size the key has in a shared vault's rows: one key should not be louder
     depending on which panel it is in. */
  font-size: 1rem;
  color: var(--color-bone);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  min-width: 0;
  /* A key with spaces used to wrap to three or four lines and stretch the whole row.
     Two lines, then clipped — the full value is in the cell's title attribute. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* A secret (or a shared key) with no tags: a quiet dash instead of the words
   "no tags" repeated down the whole column. */
.tag-none {
  color: var(--color-warm-granite);
  opacity: 0.6;
}
/* The masked value is plain text in the row, exactly like a shared vault's: no second well
   inside a row that is already a well. */
.secret-value-box {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-geist-mono);
  font-size: 0.95rem;
  min-width: 0;
}
.secret-mask-text {
  color: var(--color-warm-granite);
  letter-spacing: 0.12em;
  font-size: 1rem;
}
.secret-revealed-text {
  color: var(--color-metric-green);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 190px;
  font-weight: 500;
}
.btn-table-icon {
  background: #181615;
  border: 1px solid var(--color-ash-stroke);
  color: var(--color-pale-stone);
  cursor: pointer;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-geist-mono);
  transition: all 0.15s ease;
  text-transform: uppercase;
}
.btn-table-icon:hover {
  color: var(--color-bone);
  background: var(--color-ash-stroke);
}
/* The ONE definition of the environment palette. It used to be written twice in this
   file, and the later copy won on equal specificity: the base `.badge-env` there was
   indigo, so it repainted `.badge-env-global` blue (same specificity, later rule) and
   silently replaced the violet `staging` with amber. Keep every env colour here. */
.badge-env {
  font-family: var(--font-geist-mono);
  font-size: 14px;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.03em;
  font-weight: 500;
  /* Custom environments set through the API have no colour of their own: neutral, so a
     missing palette entry can never be mistaken for a meaningful one. */
  background: #141211;
  color: var(--color-warm-granite);
  border: 1px solid var(--color-ash-stroke);
}
.badge-env-global {
  background: #141211;
  color: var(--color-warm-granite);
  border: 1px solid var(--color-ash-stroke);
}
.badge-env-production,
.badge-env-prod {
  background: rgba(238, 96, 24, 0.12);
  color: var(--color-signal-orange);
  border: 1px solid rgba(238, 96, 24, 0.28);
}
.badge-env-staging {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fcd34d;
}
.badge-env-dev,
.badge-env-development {
  background: rgba(160, 202, 146, 0.12);
  color: var(--color-metric-green);
  border: 1px solid rgba(160, 202, 146, 0.28);
}
.badge-ver {
  font-family: var(--font-geist-mono);
  font-size: 15px;
  color: var(--color-warm-granite);
  background: #141211;
  border: 1px solid var(--color-ash-stroke);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}
.table-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
}
/* The row's own buttons are the same control as REVEAL/COPY beside them: one button style
   per row, the way a shared vault's rows work. */
.btn-action-curl,
.btn-action-edit {
  background: #181615;
  border: 1px solid var(--color-ash-stroke);
  color: var(--color-pale-stone);
  font-family: var(--font-geist-mono);
  font-size: 14px;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.15s ease;
}
.btn-action-curl:hover,
.btn-action-edit:hover {
  color: var(--color-bone);
  background: var(--color-ash-stroke);
}
/* Import result line: green when every parsed key landed, red when any did not. */
.import-status {
  font-family: var(--font-geist-mono);
  font-size: 12.5px;
  color: var(--color-warm-granite);
  min-height: 1.2rem;
}
.import-status.import-status-ok {
  color: var(--color-metric-green);
}
.import-status.import-status-error {
  color: #fb7185;
}
/* Import preview: how many keys parsed, and the first few names. */
.import-preview {
  margin-top: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: #12100f;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-pale-stone);
}
.import-key-list {
  font-family: var(--font-geist-mono);
  font-size: 0.85rem;
  color: var(--color-warm-granite);
  overflow-wrap: anywhere;
}
/* Export modal: the three choices and the plaintext warning. */
/* "New Secret" typed over a key that already exists: the same call writes version N+1 and
   takes the tags and burn flag from the form, so the reuse is stated while it is typed
   instead of only after the vault has changed. Two classes so it also wins over the
   generic `.form-hint` it shares the element with. */
.form-hint.key-collision-hint {
  display: block;
  margin-top: 0.45rem;
  padding: 0.5rem 0.7rem;
  background: rgba(238, 96, 24, 0.08);
  border-left: 3px solid rgba(238, 96, 24, 0.4);
  border-radius: var(--radius-sm);
  color: var(--color-pale-stone);
  font-size: 0.88rem;
  line-height: 1.45;
}
/* Export modal (dashboard → Export vault). Two protection levels, each an option card
   that owns its fields. The old markup interleaved them — radio, its fields, radio, its
   fields — so nothing on screen said which control belonged to which choice, and the
   plain-text warning sat inside the very label it was warning about. */
.export-group {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.export-option {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  background: #12100f;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
  /* The chosen level is the one Download will act on, so it carries the accent — the same
     idiom as the settings tiles and the access-delivery options. */
}
.export-option:has(input[name="export-protection"]:checked) {
  border-color: rgba(238, 96, 24, 0.4);
  background: rgba(255, 255, 255, 0.02);
}
.export-option-head {
  display: flex;
  align-items: center;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
}
.export-option-head input {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--color-signal-orange);
}
.export-option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.export-option-title {
  color: var(--color-bone);
  font-weight: var(--font-weight-semibold);
  font-size: 15px;
  line-height: 1.35;
}
.export-option-sub {
  color: var(--color-warm-granite);
  font-size: 0.9rem;
  line-height: 1.4;
}
.export-plain-fields,
.export-zip-fields {
  /* Indented to the option title rather than to the radio, so the fields read as
     belonging to the choice above them. Spacing is an adjacent-sibling margin rather
     than a flex `gap`: transfer.js switches these two between `block` and `none` with an
     inline style, and an inline `display: block` would silently drop a flex gap. */
  padding-left: 1.55rem;
}
.export-plain-fields > * + *,
.export-zip-fields > * + * {
  margin-top: 0.75rem;
}
/* transfer.js toggles `#export-password-current-field` and `#export-password-new-fields`
   with an inline `display`, so those two keep block boxes and the grid lives on this
   inner wrapper instead. */
.export-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0 0.9rem;
  align-items: start;
}
.export-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
/* Where the file password comes from: two tags side by side instead of two more full
   width rows stacked under the format select. */
.export-pills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.5rem;
}
.export-pill {
  display: flex;
  align-items: center;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-pale-stone);
  font-size: 0.95rem;
  line-height: 1.35;
  transition: all 0.15s ease;
}
.export-pill:hover {
  border-color: var(--color-graphite-mid);
}
.export-pill:has(input:checked) {
  border-color: rgba(238, 96, 24, 0.4);
  background: rgba(238, 96, 24, 0.08);
  color: var(--color-bone);
}
.export-pill input {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-signal-orange);
}
.export-include {
  display: flex;
  align-items: center;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-pale-stone);
  font-size: 0.95rem;
}
.export-include input {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-signal-orange);
}
/* The plain-text warning is a callout with its own flag, not a red sentence wedged into
   the label it warns about. */
.export-danger {
  display: flex;
  align-items: center;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0;
  padding: 0.6rem 0.75rem;
  background: rgba(248, 113, 113, 0.08);
  border-left: 3px solid #fb7185;
  border-radius: var(--radius-sm);
  color: #fb7185;
  font-size: 0.9rem;
  line-height: 1.45;
}
.export-danger-flag {
  flex-shrink: 0;
  padding: 0.1rem 0.4rem;
  border: 1px solid rgba(248, 113, 113, 0.5);
  border-radius: 3px;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.export-note {
  color: var(--color-warm-granite);
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}
.export-status {
  font-family: var(--font-geist-mono);
  font-size: 12.5px;
  color: var(--color-warm-granite);
  min-height: 1.2rem;
}
.export-status.export-status-ok {
  color: var(--color-metric-green);
}
.export-status.export-status-error {
  color: #fb7185;
}
/* Settings page: password/delete status line and the export-before-delete hint. */
.account-status {
  font-family: var(--font-geist-mono);
  font-size: 12.5px;
  color: var(--color-warm-granite);
  min-height: 1.2rem;
}
.account-status.account-status-ok {
  color: var(--color-metric-green);
}
.account-status.account-status-error {
  color: #fb7185;
}
.account-export-hint {
  display: flex;
  /* One line: the sentence and the button that exports the vault before it is deleted.
     The Export button hugs its label instead of stretching across the whole card. */
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.7rem;
  background: #12100f;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  margin-bottom: 0.75rem;
}
.account-export-hint-line {
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--color-pale-stone);
}
.account-export-hint-disabled {
  color: var(--color-warm-granite);
}
.account-danger-panel {
  border-color: rgba(248, 113, 113, 0.35);
}
.account-danger-warning {
  margin: 0.9rem 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #fb7185;
}
/* ---------------------------------------------------------------------------
   Settings page (/dashboard/settings/)

   The page used to be four full-width panels stacked down a 1600px container: one
   sentence per line, a lot of dead space to the right of every card, and a result that
   read as an intimidating wall of prose. It is now a grid of compact cards. Nothing was
   removed — the same sentences simply sit in a card sized for them.
   --------------------------------------------------------------------------- */
.settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  margin-top: 1.25rem;
  /* The panels carry a top margin for the old stacked layout; inside the grid the gap
     already separates them, and the margin would make the first row sit lower. The padding
     is tighter than a full dashboard panel: this page is four cards, not one. */
}
.settings-layout > .dashboard-panel {
  margin-top: 0;
  height: 100%;
  padding: 1rem 1.15rem 1.1rem;
}
@media (max-width: 1100px) {
  .settings-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* The danger card and the encryption note read better across the page than squeezed
   into half of it. */
.settings-card-wide {
  grid-column: 1 / -1;
}
/* Options as tiles instead of stacked paragraphs: side by side, the eye compares titles
   rather than reading three sentences to find the one it wants. `auto-fit` collapses the
   tracks an odd count leaves empty, so two tiles fill the row as readily as three. */
.settings-choices {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.settings-choice {
  display: flex;
  align-items: center;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.7rem;
  background: #12100f;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  /* The whole tile is the control, so the chosen one has to look chosen: a 12px radio
     dot is not enough signal once the label wraps to three lines. */
}
.settings-choice:hover {
  border-color: var(--color-graphite-mid);
}
.settings-choice:has(input:checked) {
  border-color: rgba(238, 96, 24, 0.4);
  background: rgba(238, 96, 24, 0.08);
}
.settings-choice:has(input:focus-visible) {
  outline: 2px solid rgba(238, 96, 24, 0.4);
  outline-offset: 1px;
}
.settings-choice input {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--color-signal-orange);
}
.settings-choice-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.settings-choice-title {
  color: var(--color-bone);
  font-weight: var(--font-weight-semibold);
  font-size: 0.95rem;
  line-height: 1.3;
}
.settings-choice-note {
  color: var(--color-warm-granite);
  font-size: 0.85rem;
  line-height: 1.4;
}
/* The card's own action, in the card's header: Save and the status line it writes sit where
   the other panels keep Refresh, which is one row less per card and puts the answer to the
   click next to the button that caused it. */
.settings-head-actions .account-status {
  margin: 0;
  text-align: right;
}
.settings-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0 0.9rem;
  align-items: start;
}
/* Danger card: what the choice does on the left, the one irreversible action on the
   right, together instead of stacked into a single long red block. */
.settings-danger-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(250px, 1fr);
  gap: 0.85rem;
  align-items: end;
}
@media (max-width: 820px) {
  .settings-danger-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.settings-danger-action {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.7rem 0.85rem;
  background: rgba(248, 113, 113, 0.06);
  border: 1px solid rgba(248, 113, 113, 0.28);
  border-radius: var(--radius-sm);
  height: 100%;
}
.settings-danger-action .account-danger-warning {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
}
.settings-danger-action .btn {
  align-self: center;
}
/* Notes: Edit vs Preview. The toggle sits next to Save Notes, so the two ways of looking
   at the same note are one control apart. */
.notes-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.notes-mode-btn {
  background: transparent;
  border: 0;
  color: var(--color-warm-granite);
  cursor: pointer;
  font-family: var(--font-geist);
  font-size: 12.5px;
  padding: 0.4rem 0.75rem;
  transition: all 0.15s ease;
}
.notes-mode-btn:hover {
  color: var(--color-bone);
}
.notes-mode-btn.active {
  background: #252220;
  color: var(--color-bone);
}
/* The preview reuses the textarea's box so switching modes does not move the panel. */
.notes-preview {
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  background: #0d0d0d;
  color: var(--color-pale-stone);
  font-size: 1.0625rem;
  line-height: 1.6;
  padding: 1rem 1.1rem;
  min-height: 6.5rem;
  overflow-wrap: anywhere;
}
.notes-preview > :first-child {
  margin-top: 0;
}
.notes-preview > :last-child {
  margin-bottom: 0;
}
.notes-preview h3,
.notes-preview h4,
.notes-preview h5 {
  color: var(--color-chalk);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 1.1rem 0 0.5rem;
}
.notes-preview h3 {
  font-size: 1.2rem;
}
.notes-preview h4 {
  font-size: 1.1rem;
}
.notes-preview h5 {
  font-size: 1.02rem;
}
.notes-preview p {
  margin: 0.6rem 0;
}
.notes-preview ul,
.notes-preview ol {
  margin: 0.6rem 0;
  padding-left: 1.35rem;
}
.notes-preview li {
  margin: 0.25rem 0;
}
.notes-preview code {
  font-family: var(--font-geist-mono);
  font-size: 0.92em;
  background: #141211;
  border: 1px solid var(--color-ash-stroke);
  border-radius: 4px;
  padding: 1px 5px;
}
.notes-preview .md-pre {
  background: #12100f;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  margin: 0.7rem 0;
  overflow-x: auto;
  padding: 0.8rem 0.95rem;
}
.notes-preview .md-pre code {
  background: transparent;
  border: 0;
  padding: 0;
}
.notes-preview a {
  color: var(--color-signal-orange);
  text-decoration: underline;
}
.notes-preview hr {
  border: 0;
  border-top: 1px solid var(--color-ash-stroke);
  margin: 1rem 0;
}
.notes-preview-empty {
  color: var(--color-warm-granite);
  margin: 0;
}
.btn-action-delete {
  background: #181615;
  border: 1px solid rgba(244, 63, 94, 0.3);
  color: #fb7185;
  font-family: var(--font-geist-mono);
  font-size: 14px;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.15s ease;
}
.btn-action-delete:hover {
  background: rgba(244, 63, 94, 0.12);
  border-color: #fb7185;
}
/* Agent Profile Notes Card */
.profile-notes-card {
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-lg);
  padding: 1.85rem 2rem;
  margin-bottom: 3rem;
}
.profile-notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.notes-title-group {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.notes-avatar-badge {
  width: 42px;
  height: 42px;
  background: #141211;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6875rem;
  flex-shrink: 0;
}
.notes-title {
  font-family: var(--font-geist);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--color-bone);
  letter-spacing: -0.02em;
  margin-bottom: 2px;
}
.notes-subtitle {
  font-size: 1rem;
  color: var(--color-warm-granite);
  font-family: var(--font-geist-mono);
}
.notes-textarea {
  width: 100%;
  background: #12100f;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  color: var(--color-chalk);
  font-family: var(--font-geist-mono);
  font-size: 1.1rem;
  line-height: 1.6;
  padding: 1rem;
  resize: vertical;
  min-height: 120px;
  transition: border-color 0.15s ease;
}
.notes-textarea:focus {
  outline: none;
  border-color: var(--color-signal-orange);
}
.notes-status-badge {
  font-family: var(--font-geist-mono);
  font-size: 14px;
  color: var(--color-warm-granite);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-family: var(--font-geist-mono);
  font-weight: 400;
}
.badge-text {
  background: #252220;
  color: var(--color-pale-stone);
}
.badge-json {
  background: rgba(139, 92, 246, 0.15);
  color: #c084fc;
  border: 1px solid rgba(139, 92, 246, 0.3);
}
.badge-burn {
  background: rgba(238, 96, 24, 0.15);
  color: var(--color-signal-orange);
  border: 1px solid rgba(238, 96, 24, 0.3);
}
.badge-ttl {
  background: rgba(160, 202, 146, 0.15);
  color: var(--color-metric-green);
  border: 1px solid rgba(160, 202, 146, 0.3);
}
/* A user-defined tag on a secret. */
.badge-tag {
  background: rgba(125, 148, 255, 0.14);
  color: #a5b4fc;
  border: 1px solid rgba(125, 148, 255, 0.32);
}
/* Modals */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  padding: 1.5rem;
}
.modal-overlay.active {
  opacity: 1 !important;
  pointer-events: auto !important;
  display: flex !important;
}
.modal-card {
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 3rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  position: relative;
}
.modal-card.modal-spec {
  max-width: 880px;
  width: 100%;
  max-height: 85vh;
}
.modal-card.modal-lg {
  max-width: 900px;
  width: 100%;
  max-height: 88vh;
}
.modal-header {
  padding: 1.15rem 1.5rem;
  border-bottom: 1px solid var(--color-ash-stroke);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: #141211;
}
.modal-title {
  font-size: 1.4375rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--color-bone);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.modal-close,
.modal-close-btn {
  background: transparent;
  border: none;
  color: var(--color-warm-granite);
  font-size: 1.5625rem;
  cursor: pointer;
  line-height: 1;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.modal-close:hover,
.modal-close-btn:hover {
  color: var(--color-chalk);
  background: rgba(255, 255, 255, 0.08);
}
.modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.modal-footer {
  padding: 0.9rem 1.5rem;
  border-top: 1px solid var(--color-ash-stroke);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  background: #141211;
  flex-shrink: 0;
}
/* Reveal Confirmation Modal — Factory Styling */
.reveal-modal-card {
  max-width: 520px;
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.85);
}
.reveal-modal-header {
  padding: 1.25rem 1.65rem;
  border-bottom: 1px solid var(--color-ash-stroke);
  background: #141211;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.reveal-modal-title-group {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.reveal-modal-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: rgba(238, 96, 24, 0.12);
  border: 1px solid rgba(238, 96, 24, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-signal-orange);
  flex-shrink: 0;
}
.reveal-modal-title {
  font-size: 1.3125rem;
  font-weight: 500;
  color: var(--color-bone);
  letter-spacing: -0.02em;
  margin: 0 0 2px 0;
  font-family: var(--font-geist);
}
.reveal-modal-eyebrow {
  font-family: var(--font-geist-mono);
  font-size: 14px;
  color: var(--color-warm-granite);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.reveal-modal-body {
  padding: 1.65rem 1.65rem;
}
.reveal-target-card {
  background: #12100f;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.15rem;
  margin: 1.15rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.reveal-target-key {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-geist-mono);
  font-size: 1.1875rem;
  color: var(--color-bone);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reveal-target-key code {
  color: var(--color-chalk);
  font-family: var(--font-geist-mono);
  font-size: 1.1875rem;
}
.reveal-warning-box {
  background: #141211;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.reveal-warning-burn {
  background: rgba(238, 96, 24, 0.08);
  border: 1px solid rgba(238, 96, 24, 0.35);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.reveal-modal-footer {
  padding: 1rem 1.65rem;
  border-top: 1px solid var(--color-ash-stroke);
  background: #141211;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}
.spec-content-box {
  background: #100f0e;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  padding: 1.25rem;
  font-family: var(--font-geist-mono);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-chalk);
  overflow: auto;
  max-height: 52vh;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}
.ecosystem-title-link {
  color: var(--color-chalk);
  text-decoration: none;
  transition: color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.ecosystem-title-link:hover {
  color: var(--color-signal-orange);
}
/* Notification Toast (Fixed Viewport Anchor) */
#toast-container,
.toast-container {
  position: fixed !important;
  bottom: 2rem !important;
  right: 2rem !important;
  z-index: 99999 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  pointer-events: none !important;
}
.toast {
  pointer-events: auto !important;
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  padding: 0.95rem 1.35rem;
  color: var(--color-bone);
  font-size: 16px;
  font-family: var(--font-geist);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.75);
  animation: slideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  min-width: 280px;
  max-width: 440px;
}
.toast-success {
  border-left: 3px solid var(--color-metric-green);
}
.toast-error {
  border-left: 3px solid var(--color-signal-orange);
}
@keyframes slideIn {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* Code Snippet Box */
.code-box {
  background: #0d0d0d;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-family: var(--font-geist-mono);
  font-size: 1.025rem;
  color: var(--color-metric-green);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  overflow-x: auto;
}
.copy-icon-btn {
  background: transparent;
  border: none;
  color: var(--color-warm-granite);
  cursor: pointer;
  padding: 4px;
}
.copy-icon-btn:hover {
  color: var(--color-chalk);
}
/* Utilities */
.text-center {
  text-align: center;
}
.text-muted {
  color: var(--color-warm-granite);
}
.text-sm {
  font-size: 1.025rem;
}
.mt-1 {
  margin-top: 0.5rem;
}
.mt-2 {
  margin-top: 1rem;
}
.mt-3 {
  margin-top: 1.5rem;
}
.mb-1 {
  margin-bottom: 0.5rem;
}
.mb-2 {
  margin-bottom: 1rem;
}
.mb-3 {
  margin-bottom: 1.5rem;
}
.d-none {
  display: none !important;
}
.flex {
  display: flex;
}
.items-center {
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-1 {
  gap: 0.5rem;
}
.gap-2 {
  gap: 1rem;
}
/* Ways-In Component */
.ways-in-section {
  margin: 3.5rem 0 6rem 0;
}
.ways-in-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.ways-in-header h2 {
  font-size: 2.75rem;
  font-weight: 400;
  letter-spacing: -1.12px;
  color: var(--color-bone);
  margin-bottom: 0.5rem;
}
.ways-in-header p {
  color: var(--color-warm-granite);
  font-size: 1.25rem;
  max-width: 620px;
  margin: 0 auto;
}
.ways-in-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 1200px) {
  .ways-in-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .ways-in-grid {
    grid-template-columns: 1fr;
  }
}
.way-card-mcp {
  border: 1px solid rgba(139, 92, 246, 0.45);
  background: #15121c;
}
.way-card-mcp:hover {
  border-color: #a855f7;
}
.way-pill-mcp {
  background: rgba(139, 92, 246, 0.15);
  color: #c084fc;
  border: 1px solid rgba(139, 92, 246, 0.3);
}
/* Two fixed tracks instead of a wrapping flex row: the title always yields space to the
   trailing badge, so a badge such as "CURRENT: FULL" can never drop onto its own line. */
.dashboard-panel-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 1rem;
  margin-bottom: 1rem;
}
.dashboard-panel-header > .notes-title-group {
  min-width: 0;
}
.dashboard-panel-header > *:not(.notes-title-group) {
  white-space: nowrap;
}
.connect-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  /* Cards share one height so the "skill.md + token" footer lands on the same line in
     all three; the footer itself is pinned to the bottom with margin-top: auto. */
  align-items: stretch;
}
/* One technology at a time: the mode tabs pick the single visible pane, so the grid
   collapses to one full-width column instead of three side by side. */
.connect-grid.connect-grid-modes {
  grid-template-columns: 1fr;
}
.connect-mode-tabs {
  margin-bottom: 0.9rem;
}
.connect-block {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.connect-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 1.025rem;
  font-weight: 500;
  color: var(--color-chalk);
}
.connect-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* A fixed 18px circle cannot hold a five-letter label such as "SKILL", so the badge
     is a pill that sizes itself to its content. */
  min-width: 26px;
  height: 21px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(238, 96, 24, 0.16);
  border: 1px solid rgba(238, 96, 24, 0.42);
  color: #ff7a29;
  font-family: var(--font-geist-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  flex: 0 0 auto;
}
.connect-copy-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.connect-copy-row code {
  flex: 1;
  min-width: 0;
  /* Clip instead of scrolling: a scrollbar inside the card was the only way to see the
     tail of a value nobody needs to read in full anyway (the token is masked). */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-geist-mono);
  font-size: 0.95rem;
  color: var(--color-metric-green);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
}
.connect-pre {
  margin: 0;
  font-family: var(--font-geist-mono);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-pale-stone);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  /* Wrap instead of scrolling: a horizontal scrollbar inside a card hides exactly the
     part of the command (the token) the user came to check. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.connect-hint {
  margin: 0;
  font-size: 0.975rem;
  line-height: 1.5;
  color: var(--color-warm-granite);
}
.connect-tech-foot {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-ash-stroke);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.connect-skill-link {
  font-family: var(--font-geist-mono);
  font-size: 0.975rem;
  color: var(--color-metric-green);
  text-decoration: none;
}
.connect-skill-link:hover {
  text-decoration: underline;
}
.connect-block .connect-copy-row code.connect-token-display {
  color: var(--color-warm-granite);
}
.tokens-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tokens-empty {
  font-size: 1.0625rem;
  color: var(--color-warm-granite);
  padding: 0.5rem 0;
}
.token-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
}
.token-row-main {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.token-row-name {
  font-size: 1.1rem;
  color: var(--color-bone);
}
/* Name and badges lead; the credential prefix and the two dates drop to a dimmed
   second line, which is what makes the list scannable (same shape as the hand-off rows). */
.token-row-meta {
  font-family: var(--font-geist-mono);
  font-size: 0.9rem;
  color: var(--color-warm-granite);
  flex-basis: 100%;
  overflow-wrap: anywhere;
}
/* Hand-offs: accepting an agent's vault, and the tokens this account has handed out.
   Same card idiom as the storage-scheme block on the landing page — an icon, a title
   and a count in the header, then the rows themselves. */
.handoff-panel {
  /* Roomier than the token list above it: this card carries a form as well as two
     lists, so it gets the extra breathing space rather than another separator. */
  padding-bottom: 1.4rem;
}
/* Give and Get read as two separate cards: they are two ends of the same primitive, and a
   single divider between them made them look like one long form. */
.handoff-create,
.handoff-accept {
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  background: #0d0d0d;
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.15rem;
}
/* The four controls wrap into as many columns as the card can hold, so a narrow
   dashboard stacks them instead of squeezing two selects onto one line. */
.handoff-create-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.9rem 1.1rem;
  margin: 0.75rem 0 1rem;
}
/* The one-time code panel. It borrows the accepted-token dialog's warning and mono box
   so the two one-time values read the same way, and it stays inline in the card so the
   code is still on screen while it is handed over. Its `display: none` stays inline
   because main.js reveals it by setting .display. */
.handoff-issued {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.15rem;
  padding: 1rem 1.05rem;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  /* The borrowed pieces carry the dialog's own margins; the flex gap above is what
     spaces them here, so those margins are dropped rather than added to it. */
}
.handoff-issued .modal-lead-text,
.handoff-issued .handoff-once-warning,
.handoff-issued .handoff-token-box,
.handoff-issued .handoff-token-actions {
  margin: 0;
}
/* Top line of the result panel: what arrived, and the way out of it. */
.issued-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.issued-head .modal-lead-text {
  flex: 1 1 auto;
  min-width: 0;
}
.issued-head .issued-dismiss {
  flex-shrink: 0;
}
/* The credential and the button that copies it are one control. The box already lays out as
   `space-between` for exactly this, so Copy sits inside the same line as the value instead
   of on a row of its own. */
.issued-value-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}
.issued-value-row .code-box {
  flex: 1 1 auto;
  min-width: 0;
}
.issued-value-row .issued-copy {
  flex-shrink: 0;
}
.handoff-accept-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
/* The delivery choice inside the single grant form: two stacked options that say who ends
   up holding the credential. It replaced a whole second panel, so it is deliberately the
   plainest control on the page — one radio each, a name and a sentence. */
.access-delivery {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 1.15rem;
  padding: 0;
  border: none;
}
.access-delivery legend {
  padding: 0;
  margin-bottom: 0.55rem;
}
.access-delivery-option-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.access-delivery-option-wrap .access-delivery-option {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: all 0.15s ease;
  /* The chosen option is the one the form will act on, so it is the one that carries the
       accent — the same signal colour the active FAQ filter and the open accordion use. */
}
.access-delivery-option-wrap .access-delivery-option:hover {
  border-color: var(--color-graphite-mid);
}
.access-delivery-option-wrap .access-delivery-option:has(input:checked) {
  border-color: rgba(238, 96, 24, 0.4);
  background: rgba(238, 96, 24, 0.08);
}
.access-delivery-option-wrap .access-delivery-option input {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--color-signal-orange);
}
.access-delivery-option-wrap .access-delivery-option span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.access-delivery-option-wrap .access-delivery-option strong {
  color: var(--color-bone);
  font-weight: 500;
  font-size: 15px;
}
.access-delivery-option-wrap .access-delivery-option small {
  color: var(--color-pale-stone);
  font-size: 12.5px;
  line-height: 1.45;
}
/* Which receiver an option is for. The real choice is "a machine or a person", and that is
   the part a newcomer cannot guess from "keep the key" versus "send a code" — so it is said
   on the option itself instead of in a paragraph above the form. */
.access-delivery-for {
  font-family: var(--font-geist-mono);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--color-warm-granite);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-xs);
  padding: 1px 6px;
  margin-left: 3px;
  white-space: nowrap;
}
/* The hand-over kit inside the result panel: what you actually send the other side. It sits
   under the credential rather than beside it, because reading a key and then working out how
   to hand it on is exactly the step this removes. It is one box: the dashed hairline that
   used to separate it cut the panel in two, and the message inside carried a second border
   of its own. */
.access-handoff {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding: 0.8rem 0.9rem;
  background: #12100f;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
}
.access-handoff-title {
  font-family: var(--font-geist-mono);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-warm-granite);
}
/* `pre-wrap` on purpose: the prompt and the message are meant to be read as the other side
   will receive them, line breaks included. No border and no fill of its own — the box above
   is the box. */
.access-handoff-pre {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  font-family: var(--font-geist-mono);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-chalk);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.handoff-accept-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.handoff-code-input {
  flex: 1;
  min-width: 0;
}
.handoff-accept-btn {
  flex-shrink: 0;
  white-space: nowrap;
}
.handoff-status {
  margin: 0.6rem 0 0;
  min-height: 1.35em;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--color-warm-granite);
}
.handoff-status-error {
  color: #ef4444;
}
.handoff-status-ok {
  color: var(--color-metric-green);
}
/* The two directions are two blocks, not one list with two headings over it: the hairline
   down the middle says so at a glance, and each block keeps its own heading and count.
   They stay side by side even when one side is empty — the empty one carries its own
   sentence, which is the honest answer to "who has what", and stacking them would read as
   a single list again. */
.handoff-groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.handoff-groups > .handoff-group + .handoff-group {
  border-left: 1px solid var(--color-ash-stroke);
  padding-left: 1.5rem;
}
/* Below this width the grid is one column, so the divider turns into a rule between two
   stacked blocks instead of hanging off the left edge of the page. */
@media (max-width: 699px) {
  .handoff-groups {
    grid-template-columns: minmax(0, 1fr);
  }
  .handoff-groups > .handoff-group + .handoff-group {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--color-ash-stroke);
    padding-top: 1.5rem;
  }
}
.handoff-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}
.handoff-group-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  /* A section heading inside a card needs air above it. This used to come from
     `.handoff-panel > .handoff-group-title`, and the Access card stopped matching that when
     its two panels were merged into one — so its headings lost every margin and "Have a code
     from someone else?" ran straight into the paragraph above it. The margin lives on the
     heading now, so it does not depend on which class the surrounding card happens to carry. */
  margin: 1.3rem 0 0.6rem;
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-pale-stone);
}
/* The first heading of a block already has something spacing it above. */
.handoff-create > .handoff-group-title:first-child,
.handoff-group > .handoff-group-title:first-child {
  margin-top: 0;
}
.handoff-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.handoff-empty {
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--color-warm-granite);
  padding: 0.5rem 0;
}
.handoff-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
}
/* The folded-away half of the outgoing list. `outgoing` is append-only on the server, so
   every grant ever issued comes back; the ones that grant nothing are held behind the
   toggle below and, when shown, sit back visually — they are history, not state. */
.handoff-ended-toggle {
  align-self: flex-start;
  font-family: var(--font-geist-mono);
  font-size: 12.5px;
  color: var(--color-warm-granite);
  background: transparent;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-xs);
  padding: 4px 10px;
  margin-top: 2px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.handoff-ended-toggle:hover {
  border-color: var(--color-graphite-mid);
  color: var(--color-chalk);
}
.handoff-rows-ended {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}
.handoff-row-ended {
  opacity: 0.62;
}
.handoff-row-ended:hover {
  opacity: 1;
}
/* Delete is offered only on an ended row, and it is not a destructive action: the access
   is already gone. It stays visually quieter than Revoke for exactly that reason. */
.handoff-row-delete {
  color: var(--color-pale-stone);
}
.handoff-row-main {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.handoff-row-title {
  font-size: 1.1rem;
  color: var(--color-bone);
  overflow-wrap: anywhere;
}
/* A share created without a label is the common case. The placeholder is dimmed so it
   does not read as repeated content, and the row's real differentiators (scope, state,
   acceptor) are what stands out. */
.handoff-row-untitled {
  color: var(--color-warm-granite);
}
/* The row reads as two lines: what the share is and its state on the first, and who
   accepted it (plus when) dimmed on the second. On one line the long "accepted by …"
   text pushed the badges around at every panel width. */
.handoff-row-meta {
  font-family: var(--font-geist-mono);
  font-size: 0.9rem;
  color: var(--color-warm-granite);
  flex-basis: 100%;
  overflow-wrap: anywhere;
}
/* The badge keeps the scope and the grant's own state legible without shouting:
   the scope is the access level, the tone is what the hand-off is doing. */
.handoff-badge {
  font-size: 9px;
}
.handoff-badge-ok {
  color: var(--color-metric-green);
  border-color: rgba(160, 202, 146, 0.35);
}
.handoff-badge-warn {
  color: var(--color-signal-orange);
  border-color: rgba(238, 96, 24, 0.4);
}
.handoff-badge-wait {
  color: #c084fc;
  border-color: rgba(139, 92, 246, 0.35);
}
.handoff-token-note {
  font-family: var(--font-geist-mono);
  font-size: 0.95rem;
  color: var(--color-metric-green);
}
.handoff-token-gone {
  color: var(--color-signal-orange);
}
/* The one-time token dialog and the access page's result panel. The orange bar alone used
   to float next to the text with nothing holding it: the sunken fill is invisible against a
   panel this dark, so the warning did not read as a callout at all. */
.handoff-once-warning {
  background: #12100f;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  background: rgba(238, 96, 24, 0.08);
  border: 1px solid rgba(238, 96, 24, 0.35);
  border-left: 3px solid rgba(238, 96, 24, 0.4);
  padding: 0.6rem 0.8rem;
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-pale-stone);
}
.handoff-once-warning strong {
  color: var(--color-signal-orange);
  font-weight: 500;
}
/* The value is the only thing in the box, so it lays out as text rather than as a flex row
   with room reserved on the right for a button that is not there. Wrapping beats a sideways
   scrollbar here: a code the reader has to scroll to read is a code they will mis-copy. */
.handoff-token-box {
  display: block;
  overflow-x: visible;
  word-break: break-all;
  margin-bottom: 0.75rem;
  color: var(--color-bone);
  -webkit-user-select: all;
  user-select: all;
}
.handoff-token-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.9rem;
}
/* Below this width the code field and the accept button stop fitting on one line,
   and a half-width "Accept access" label wraps into two lines. */
@media (max-width: 560px) {
  .handoff-accept-row {
    flex-wrap: wrap;
  }
  .handoff-accept-btn {
    width: 100%;
  }
}
/* The note owns its paragraphs; the last one drops the trailing margin. */
.security-note {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  border-left: 3px solid rgba(238, 96, 24, 0.5);
}
.security-note p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-warm-granite);
  margin: 0 0 0.6rem;
}
.security-note p:last-child {
  margin-bottom: 0;
}
.security-note-icon {
  flex: 0 0 auto;
  color: var(--color-signal-orange);
  margin-top: 2px;
}
.security-note-title {
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--color-bone);
  margin-bottom: 0.5rem;
}
.agent-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
  /* Was 5rem, which left a dead 80px band between the hints and the toolbar. */
  margin-bottom: 0.9rem;
}
.agent-hints:empty {
  display: none;
}
.agent-hint {
  font-size: 0.975rem;
  line-height: 1.4;
  color: var(--color-warm-granite);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  /* A long unbroken path or URL must wrap inside its chip, not spill out of the card. */
  overflow-wrap: anywhere;
  max-width: 100%;
}
.agent-hint-warn {
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.08);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* ---- Secrets table: selection, bulk actions, env summary ---- */
.col-select {
  width: 34px;
  text-align: center;
}
.col-select input {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--color-signal-orange);
  display: block;
}
/* A ticked row is the selected card: tinted fill and an accent stroke on all four sides,
   since the row card's edges now live on its first and last cell. */
tr.row-selected td {
  background: rgba(238, 96, 24, 0.08);
  border-color: rgba(238, 96, 24, 0.4);
}
/* The row hover rule is more specific than the one above, so the ticked card needs its own
   hover or it would turn grey the moment the pointer crossed it. */
.secrets-table tbody tr.row-selected:hover td {
  background: rgba(238, 96, 24, 0.12);
}
.bulk-bar {
  /* Count and hint stay together on the left; the actions are pushed to the right, so the
     hint no longer floats in the middle of the bar looking like a title. */
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  /* The bar now sits above the table, so it spaces the table rather than following it. */
  margin-bottom: 0.85rem;
  padding: 0.7rem 0.95rem;
  border: 1px solid rgba(238, 96, 24, 0.4);
  background: rgba(238, 96, 24, 0.08);
  border-radius: var(--radius-sm);
}
/* Nothing selected: the bar keeps its place but reads as a hint instead of an alarm, so
   the checkbox column explains itself before anyone has guessed what it does. */
.bulk-bar-idle {
  border-color: var(--color-ash-stroke);
  background: rgba(255, 255, 255, 0.02);
}
.bulk-hint {
  font-family: var(--font-geist-mono);
  font-size: 12.5px;
  color: var(--color-warm-granite);
}
.bulk-bar-idle .bulk-count {
  color: var(--color-warm-granite);
}
/* The bulk actions are disabled at zero selection; make that readable instead of looking
   like a broken control. */
.bulk-bar-idle .bulk-actions button {
  opacity: 0.45;
  cursor: not-allowed;
}
.bulk-count {
  font-family: var(--font-geist-mono);
  font-size: 1rem;
  color: var(--color-bone);
}
.bulk-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-left: auto;
}
.bulk-danger {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.45);
}
.env-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.env-summary:empty {
  display: none;
}
.env-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  height: 42px;
  padding: 0 14px;
  font-family: var(--font-geist-mono);
  font-size: 0.9rem;
  color: var(--color-warm-granite);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
}
.env-chip strong {
  color: var(--color-bone);
}
.badge-stale {
  background: rgba(245, 158, 11, 0.14);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
  font-size: 11px;
}
/* ---- Version history ---- */
.versions-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.version-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
}
.version-row-current {
  border-color: rgba(160, 202, 146, 0.4);
  background: rgba(160, 202, 146, 0.07);
}
.version-row-main {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.version-row-meta {
  font-family: var(--font-geist-mono);
  font-size: 0.9rem;
  color: var(--color-warm-granite);
}
/* ---- MCP tool scope list ---- */
.tool-scope-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 340px;
  overflow-y: auto;
}
.tool-scope-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  flex-wrap: wrap;
}
.tool-scope-row code {
  font-family: var(--font-geist-mono);
  font-size: 0.975rem;
  color: var(--color-metric-green);
  flex: 0 0 auto;
  min-width: 175px;
}
.tool-scope-desc {
  flex: 1;
  min-width: 180px;
  font-size: 0.975rem;
  color: var(--color-warm-granite);
}
.tool-scope-need {
  font-family: var(--font-geist-mono);
  font-size: 0.875rem;
  color: var(--color-pale-stone);
  flex: 0 0 auto;
}
.tool-scope-blocked {
  opacity: 0.55;
}
.tool-scope-blocked .tool-scope-need {
  color: #f87171;
}
/* .claimed-agent-badge went away with the claimed-agents panel. */
.way-card {
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-lg);
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 0.15s ease;
  /* Grid items default to min-width: auto, so an unbreakable code line would stretch the
     track and push the four cards onto separate rows. Let the card shrink and scroll the
     code instead. */
  min-width: 0;
}
.way-card:hover {
  border-color: var(--color-graphite-mid);
}
.way-card-highlight {
  border: 1px solid var(--color-signal-orange);
  background: #171413;
}
.way-card-highlight:hover {
  border-color: #ff7530;
}
.way-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.way-card-icon {
  font-size: 1.875rem;
  line-height: 1;
}
.way-pill {
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font-size: 0.85rem;
  font-weight: 400;
  font-family: var(--font-geist-mono);
  color: var(--color-pale-stone);
  text-transform: uppercase;
  letter-spacing: -0.24px;
}
.way-pill-highlight {
  border-color: var(--color-signal-orange);
  color: var(--color-signal-orange);
  background: rgba(238, 96, 24, 0.08);
  width: auto;
  max-width: 160px;
  display: inline-block;
  text-align: center;
}
.way-card-title {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-bone);
  letter-spacing: -0.03em;
  margin-bottom: 0.5rem;
}
.way-card-desc {
  font-size: 1.1rem;
  color: var(--color-warm-granite);
  line-height: 1.45;
  margin-bottom: 1.25rem;
}
.way-tabs {
  display: inline-flex;
  /* Three tabs did not fit and wrapped onto a second row inside the bordered strip,
     which read like a stray label. Keep them on one row; scroll only if a translation
     makes the labels wider than the card. */
  flex-wrap: nowrap;
  max-width: 100%;
  overflow-x: auto;
  background: #131110;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 3px;
  margin-bottom: 0.85rem;
  width: fit-content;
}
.way-tab {
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font-size: 0.85rem;
  font-family: var(--font-geist-mono);
  color: var(--color-warm-granite);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.way-tab:hover {
  color: var(--color-bone);
}
.way-tab.active {
  background: var(--color-carbon-lift);
  color: var(--color-chalk);
  border: 1px solid var(--color-ash-stroke);
}
.way-code-box {
  background: #0d0d0d;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  /* Hug the snippet instead of absorbing the leftover card height: an empty dark pane
     reads worse than plain card background, and the footer is already pinned by
     margin-top: auto. */
  flex-grow: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.way-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.way-code-label {
  font-size: 0.9rem;
  font-family: var(--font-geist-mono);
  color: var(--color-warm-granite);
}
.way-copy-btn {
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  color: var(--color-pale-stone);
  font-size: 0.875rem;
  padding: 2px 8px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-geist-mono);
}
.way-copy-btn:hover {
  background: #252220;
  border-color: var(--color-graphite-mid);
  color: var(--color-chalk);
}
.way-code-content {
  font-family: var(--font-geist-mono);
  font-size: 1rem;
  color: var(--color-bone);
  /* Keep the command verbatim: `pre-wrap` + `break-all` split it mid-word
     ("Conte / nt-Type"), which makes a copy-paste snippet look broken. A horizontal
     scrollbar is the honest affordance for a long one-liner. */
  overflow-x: auto;
  white-space: pre;
  margin: 0;
  line-height: 1.45;
}
.way-bullets {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: -0.3rem;
  flex-grow: 1;
  padding: 0.5rem 0;
}
.way-bullet {
  font-family: var(--font-geist-mono);
  font-size: 1.025rem;
  color: var(--color-pale-stone);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.bullet-icon {
  font-size: 1.1875rem;
  line-height: 1;
  color: var(--color-signal-orange);
}
.bullet-dollar {
  color: var(--color-signal-orange);
  font-weight: 500;
}
.way-action-btn {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  color: var(--color-bone);
  font-size: 1.0625rem;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.15s ease;
  display: block;
  text-align: center;
  text-decoration: none;
  font-family: var(--font-geist);
}
.way-action-btn:hover {
  border-color: var(--color-chalk);
  color: var(--color-chalk);
  background: #252220;
}
.way-card-footer {
  padding: 1.5rem 0.5rem 0.5rem 0.5rem;
}
.way-check {
  font-family: var(--font-geist-mono);
  font-size: 0.975rem;
  color: var(--color-metric-green);
}
.way-footer-link {
  font-family: var(--font-geist-mono);
  font-size: 0.975rem;
  font-weight: 400;
  color: var(--color-warm-granite);
  text-decoration: none;
  letter-spacing: -0.24px;
  transition: color 0.15s;
}
.way-footer-link:hover {
  color: var(--color-chalk);
}
.ways-in-banner {
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.25rem;
  font-size: 1.0625rem;
  color: var(--color-warm-granite);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  line-height: 1.4;
}
.ways-in-banner code {
  background: #0d0d0d;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: var(--font-geist-mono);
  color: var(--color-bone);
  font-size: 1rem;
}
/* Footer */
footer {
  margin-top: auto;
  border-top: 1px solid var(--color-ash-stroke);
  padding: 2.5rem 0;
  font-size: 1.025rem;
  font-family: var(--font-geist);
  color: var(--color-warm-granite);
  text-align: center;
}
/* Anonymous & Zero-Knowledge Badges */
.anon-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(160, 202, 146, 0.1);
  border: 1px solid rgba(160, 202, 146, 0.35);
  color: var(--color-metric-green);
  font-size: 0.975rem;
  font-family: var(--font-geist-mono);
  font-weight: 400;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-sm);
  margin-top: 0.75rem;
}
.form-hint {
  display: block;
  font-size: 0.9rem;
  font-family: var(--font-geist-mono);
  color: var(--color-warm-granite);
  margin-top: 0.25rem;
}
/* A hint that is carrying a warning rather than a note: the edit form could not load the
   current value, or deliberately must not (a burn-after-read secret is destroyed by being
   read). Orange like the other cautions in the sheet, never red — nothing is broken. */
.form-hint.secret-edit-hint-warn {
  color: var(--color-signal-orange);
}
.form-hint.secret-edit-hint-warn strong {
  color: var(--color-signal-orange);
}
/* Seed Phrase Grid */
.seed-phrase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  background: #0d0d0d;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  padding: 1rem;
}
@media (max-width: 480px) {
  .seed-phrase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.seed-word-item {
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-geist-mono);
  font-size: 1.0625rem;
}
.seed-word-num {
  color: var(--color-warm-granite);
  font-size: 0.9rem;
  min-width: 1.25rem;
}
.seed-word-val {
  color: var(--color-signal-orange);
  font-weight: 500;
}
/* Environment & Version Badges */
/* The environment colours live in one place near the table styles; a second copy here
   used to override them, which is how `global` ended up blue. Only the version badge
   belongs in this block. */
.badge-ver {
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  color: var(--color-pale-stone);
  font-family: var(--font-geist-mono);
  font-size: 0.9rem;
  padding: 0.12rem 0.45rem;
  border-radius: var(--radius-sm);
}
/* Startup Transparency & Free Tier Banner */
.startup-banner {
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1.25rem;
  margin: 1.25rem 0 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.startup-banner-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 1.0625rem;
  color: var(--color-bone);
}
.startup-badge {
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-signal-orange);
  color: var(--color-signal-orange);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-family: var(--font-geist-mono);
  letter-spacing: -0.24px;
  text-transform: uppercase;
}
.startup-link {
  color: var(--color-chalk);
  text-decoration: underline;
  font-weight: 400;
  font-size: 1.025rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: color 0.15s ease;
}
.startup-link:hover {
  color: #ffffff;
}
/* Profile Notes & Scratchpad Card */
.profile-notes-card {
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-top: 1.5rem;
  transition: border-color 0.2s ease;
}
.profile-notes-card:hover {
  border-color: var(--color-graphite-mid);
}
.profile-notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.notes-textarea {
  width: 100%;
  box-sizing: border-box;
  background: #0d0d0d;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  color: var(--color-bone);
  font-family: var(--font-geist-mono);
  font-size: 1.0625rem;
  line-height: 1.5;
  padding: 0.75rem 1rem;
  resize: vertical;
  min-height: 110px;
}
.notes-textarea:focus {
  border-color: var(--color-signal-orange);
  outline: none;
}
/* Startup Support & Free Pricing Section */
.support-section {
  margin: 3.5rem 0 2.5rem;
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-2xl);
  padding: 2.5rem 2rem;
}
.support-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 2rem;
}
.support-header h2 {
  font-size: 2.5rem;
  font-weight: 400;
  letter-spacing: -1.12px;
  color: var(--color-bone);
  margin-bottom: 0.5rem;
}
.support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
.support-card {
  background: #141211;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
}
/* Signature Bone Card on dark ground. Every colour the inverse palette flips
   lives in this one block. */
.support-card.highlight {
  background: var(--color-bone);
  color: var(--color-obsidian-canvas);
  border: 1px solid var(--color-bone);
}
.support-card.highlight h3,
.support-card.highlight p,
.support-card.highlight .support-features-list {
  color: var(--color-obsidian-canvas);
}
.support-card.highlight .support-price-tag {
  color: var(--color-obsidian-canvas);
}
.support-card.highlight .support-features-list li::before {
  color: var(--color-signal-orange);
}
.support-card.highlight .btn-primary {
  background: var(--color-obsidian-canvas);
  color: var(--color-bone);
  border-color: var(--color-obsidian-canvas);
}
.support-card.highlight .btn-primary:hover {
  background: #000000;
  color: #ffffff;
}
/* The pricing card on the left now uses the same dark frame as the one on the
   right, and its feature list uses the same rows as the wallet address boxes. */
.support-features-list {
  gap: 0.5rem;
}
.support-price-tag {
  font-size: 2.75rem;
  font-weight: 400;
  font-family: var(--font-geist);
  letter-spacing: -1.12px;
  color: var(--color-metric-green);
  margin: 0.5rem 0;
}
.support-features-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 1.0625rem;
  color: var(--color-pale-stone);
}
.support-features-list li {
  padding: 0.5rem 1.7rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1rem;
  line-height: 1.35;
}
.support-features-list li::before {
  content: "✓ ";
  color: var(--color-metric-green);
  font-weight: bold;
}
.donation-box {
  background: #0d0d0d;
  border: 1px dashed var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  padding: 0.85rem;
  margin-top: 0.75rem;
  font-family: var(--font-geist-mono);
  font-size: 0.975rem;
  color: var(--color-warm-granite);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.modal-card.modal-lg {
  max-width: 960px;
  width: 96%;
  max-height: 90vh;
}
.monitor-resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.monitor-card {
  background: #0d0d0d;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  padding: 1rem;
  display: flex;
  flex-direction: column;
}
.monitor-card-label {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-warm-granite);
  text-transform: uppercase;
  letter-spacing: -0.24px;
  font-family: var(--font-geist-mono);
}
.monitor-card-value {
  font-size: 2rem;
  font-weight: 400;
  color: var(--color-signal-orange);
  margin: 0.35rem 0;
  font-family: var(--font-geist-mono);
  letter-spacing: -1.12px;
}
.meter-bar {
  width: 100%;
  height: 4px;
  background: var(--color-carbon-lift);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-top: 4px;
}
.meter-fill {
  height: 100%;
  background: var(--color-signal-orange);
  border-radius: var(--radius-sm);
  transition: width 0.3s ease;
}
/* ==========================================================================
   Token Guide (Dashboard) — "which credential do I hand over?"
   The lead sentence carries the whole mental model (a token is a key, a code is
   a ticket that mints the receiver their own key); the two lanes then show that
   difference in their flows and answer the practical questions — what the
   receiver gets, when it dies, which control to press, how to end it. Built
   from the vocabulary the landing page already uses for its sharing matrix.
   ========================================================================== */
.token-guide {
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-lg);
  padding: 1.85rem 2rem;
  margin-bottom: 2rem;
  margin-top: 2rem;
}
.token-guide-head {
  display: flex;
  align-items: center;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 1.15rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-ash-stroke);
}
.token-guide-head-text {
  min-width: 0;
}
.token-guide-title {
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.24px;
  color: var(--color-bone);
  margin: 0 0 0.5rem;
}
/* The one sentence a reader should remember. */
.token-guide-lead {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--color-pale-stone);
  margin: 0 0 0.5rem;
  max-width: 860px;
}
.token-guide-lead strong {
  color: var(--color-chalk);
  font-weight: 500;
}
.token-guide-lead-key {
  color: var(--color-signal-orange);
  font-weight: 500;
}
.token-guide-lead-ticket {
  color: var(--color-metric-green);
  font-weight: 500;
}
.token-guide-sub {
  color: var(--color-warm-granite);
  font-size: 1rem;
  line-height: 1.45;
  margin: 0;
}
/* The one-line answer. Sits above the two lanes so a newcomer can decide without reading the
   rest of the page; the lanes below are the full version of the same two choices. */
.token-guide-simple {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  margin-top: 1rem;
  border: 1px solid var(--color-ash-stroke);
  border-left: 3px solid var(--color-signal-orange);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: 1rem;
}
.token-guide-simple-q {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--color-bone);
}
.token-guide-simple-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}
@media (min-width: 720px) {
  .token-guide-simple-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.token-guide-simple-cell {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--color-pale-stone);
}
.token-guide-simple-cell .token-guide-prefix {
  flex-shrink: 0;
}
.token-guide-simple-cell strong {
  color: var(--color-bone);
  font-weight: 500;
}
.token-guide-simple-note {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-warm-granite);
}
/* The full guarantee, collapsed by default so the simple answer stays the first thing a
   reader meets; opening it is a deliberate "tell me everything". */
.token-guide-fineprint {
  margin-top: 1.1rem;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
}
.token-guide-fineprint summary {
  padding: 0.7rem 1rem;
  cursor: pointer;
  font-family: var(--font-geist-mono);
  font-size: 14px;
  color: var(--color-bone);
  letter-spacing: -0.01em;
}
.token-guide-fineprint summary:hover {
  color: var(--color-chalk);
}
.token-guide-fineprint ul {
  margin: 0;
  padding: 0 1rem 0.85rem 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-pale-stone);
}
.token-guide-fineprint li strong {
  color: var(--color-bone);
  font-weight: 500;
}
/* The two lanes: a program on the left, a person on the right. */
.token-guide-lanes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 900px) {
  .token-guide-lanes {
    grid-template-columns: 1fr 1fr;
  }
}
.token-guide-lane {
  background: #0d0d0d;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
}
.token-guide-lane-agent {
  border-color: rgba(238, 96, 24, 0.35);
}
.token-guide-lane-human {
  border-color: rgba(160, 202, 146, 0.35);
}
.token-guide-lane-head {
  display: flex;
  align-items: center;
  align-items: flex-start;
  gap: 0.85rem;
}
.token-guide-prefix {
  font-family: var(--font-geist-mono);
  flex: 0 0 auto;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid;
}
.token-guide-lane-agent .token-guide-prefix {
  color: var(--color-signal-orange);
  border-color: rgba(238, 96, 24, 0.35);
  background: rgba(238, 96, 24, 0.08);
}
.token-guide-lane-human .token-guide-prefix {
  color: var(--color-metric-green);
  border-color: rgba(160, 202, 146, 0.35);
  background: rgba(160, 202, 146, 0.08);
}
.token-guide-lane-title {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-chalk);
  margin: 0 0 0.3rem;
}
.token-guide-lane-when {
  color: var(--color-warm-granite);
  font-size: 1rem;
  line-height: 1.45;
  margin: 0;
}
.token-guide-lane-when strong {
  color: var(--color-pale-stone);
  font-weight: 500;
}
/* Node-and-arrow flow — the same idiom as the landing page's sharing matrix.
   The last node is the one that differs between the lanes, so it carries the
   weight: the agent ends up holding YOUR key, the person holds their own. */
.token-guide-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.9rem 1rem;
  background: #12100f;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
}
.token-guide-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 84px;
  gap: 3px;
  min-width: 84px;
  text-align: center;
}
.token-guide-node-icon {
  color: var(--color-pale-stone);
}
.token-guide-node-key .token-guide-node-icon {
  color: var(--color-signal-orange);
}
.token-guide-node-ticket .token-guide-node-icon {
  color: var(--color-metric-green);
}
.token-guide-node-title {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-bone);
}
.token-guide-node-sub {
  font-family: var(--font-geist-mono);
  font-size: 0.85rem;
  color: var(--color-warm-granite);
}
.token-guide-node-result .token-guide-node-title {
  color: var(--color-chalk);
}
.token-guide-node-result .token-guide-node-sub {
  color: var(--color-pale-stone);
}
.token-guide-lane-agent .token-guide-node-result .token-guide-node-sub {
  color: var(--color-signal-orange);
}
.token-guide-lane-human .token-guide-node-result .token-guide-node-sub {
  color: var(--color-metric-green);
}
.token-guide-arrow {
  flex: 0 0 auto;
  color: var(--color-graphite-mid);
  font-size: 1rem;
}
/* Facts: label on the left, answer on the right. */
.token-guide-facts {
  margin: 0;
  display: grid;
  gap: 0.5rem;
}
.token-guide-facts > div {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 0.6rem;
  align-items: baseline;
}
.token-guide-facts dt {
  font-family: var(--font-geist-mono);
  color: var(--color-warm-granite);
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.token-guide-facts dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--color-pale-stone);
}
.token-guide-facts strong {
  color: var(--color-chalk);
  font-weight: 500;
}
.token-guide-facts code {
  font-family: var(--font-geist-mono);
  font-size: 0.95em;
}
.token-guide-legend-title {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-chalk);
  margin: 0 0 0.85rem;
}
/* Never-share warning: the one destructive mistake this panel prevents. */
.token-guide-warning {
  display: flex;
  align-items: center;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0.9rem 1.1rem;
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.35);
  border-radius: var(--radius-sm);
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--color-pale-stone);
}
.token-guide-warning strong {
  color: #fb7185;
  font-weight: 500;
}
.token-guide-warning code {
  font-family: var(--font-geist-mono);
  font-size: 0.95em;
}
.token-guide-warning-icon {
  flex: 0 0 auto;
  color: #fb7185;
}
/* Badge legend: five rows, the ones a decision actually turns on. */
.token-guide-legend {
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--color-ash-stroke);
}
.token-guide-legend-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem 1.5rem;
}
@media (min-width: 760px) {
  .token-guide-legend-list {
    grid-template-columns: 1fr 1fr;
  }
}
.token-guide-legend-list li {
  display: grid;
  grid-template-columns: 132px 1fr;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-pale-stone);
}
.token-guide-legend-list .badge {
  justify-self: start;
}
/* Narrow screens: the label column above each answer is the first thing to go. */
@media (max-width: 620px) {
  .token-guide {
    padding: 1.25rem 1.1rem;
  }
  .token-guide-facts > div,
  .token-guide-legend-list li {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}
/* ==========================================================================
   Vaults shared with me (Dashboard) — the read-only side of a hand-off
   The panel exists only while the page holds the credential a code minted, so it
   is built like the vault table above it, minus every action that writes.
   ========================================================================== */
.shared-vaults-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.shared-vault-card {
  background: #0d0d0d;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.2rem;
}
.shared-vault-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.shared-vault-head-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.shared-vault-owner {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-chalk);
}
.shared-vault-scope {
  color: var(--color-warm-granite);
  font-size: 1rem;
  line-height: 1.4;
}
.shared-vault-expiry {
  font-family: var(--font-geist-mono);
  font-size: 0.875rem;
  color: var(--color-pale-stone);
}
.shared-vault-head-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.shared-vault-keys {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 1rem;
}
/* Past 20 keys the list scrolls inside the card, exactly like the reader's own vault, so a
   large shared vault cannot push the rest of the page out of reach. */
.shared-vault-keys.is-scrollable {
  max-height: 500px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-graphite-mid) transparent;
}
.shared-vault-keys.is-scrollable::-webkit-scrollbar {
  width: 10px;
}
.shared-vault-keys.is-scrollable::-webkit-scrollbar-thumb {
  background: var(--color-graphite-mid);
  border-radius: 999px;
}
.shared-vault-keys.is-scrollable::-webkit-scrollbar-track {
  background: transparent;
}
/* The extra column is the date the key was last written; see the vault table for the same
   value in the reader's own vault. */
.shared-vault-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.1fr) auto auto auto minmax(150px, 1.3fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  background: #12100f;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
}
.shared-vault-updated {
  font-family: var(--font-geist-mono);
  font-size: 12.5px;
  color: var(--color-warm-granite);
  white-space: nowrap;
}
.shared-vault-key {
  font-family: var(--font-geist-mono);
  font-size: 1rem;
  color: var(--color-bone);
  overflow-wrap: anywhere;
}
.shared-vault-flags {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.shared-vault-value {
  font-family: var(--font-geist-mono);
  font-size: 0.95rem;
  color: var(--color-warm-granite);
  overflow-wrap: anywhere;
}
.shared-vault-value-open {
  color: var(--color-chalk);
}
.shared-vault-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}
.shared-vault-empty,
.shared-vault-error {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
}
.shared-vault-empty {
  color: var(--color-warm-granite);
}
.shared-vault-error {
  color: #fb7185;
}
/* The incoming row's note about a credential this page no longer holds. */
.handoff-row-note {
  font-family: var(--font-geist-mono);
  font-size: 0.85rem;
  color: var(--color-signal-orange);
}
@media (max-width: 780px) {
  .shared-vault-row {
    grid-template-columns: 1fr;
  }
  .shared-vault-row-actions {
    justify-content: flex-start;
  }
}
/* The shares behind one vault: several codes from the same owner are one card with a row
   each, so the reader sees one vault and the individual ways into it. */
.shared-vault-shares {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 0.9rem;
}
.shared-vault-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
}
.shared-vault-share-scope {
  font-size: 0.975rem;
  color: var(--color-pale-stone);
}
.shared-vault-share-expiry {
  font-family: var(--font-geist-mono);
  font-size: 0.85rem;
  color: var(--color-warm-granite);
}
.shared-vault-share-error {
  font-family: var(--font-geist-mono);
  font-size: 0.85rem;
  color: #fb7185;
}
.shared-vault-share-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}
/* The line that tells the reader they are about to change someone else's vault. */
.shared-vault-write-note {
  margin: 0.75rem 0 0;
  padding: 0.7rem 0.9rem;
  background: rgba(238, 96, 24, 0.08);
  border: 1px solid rgba(238, 96, 24, 0.35);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--color-pale-stone);
}
.shared-vault-write-note strong {
  color: var(--color-bone);
  font-weight: 500;
}
/* Deleting inside a shared vault is the one destructive control in this panel. */
.shared-vault-danger {
  color: #fb7185;
  border-color: rgba(248, 113, 113, 0.45);
}
/* ==========================================================================
   The claim page — where a share link lands
   One card and nothing else. The visitor followed a link to accept one specific thing, so
   the page is that card: no marketing, no nav anchors, no second decision to make.
   ========================================================================== */
.claim-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: flex-start;
  max-width: 620px;
  margin: 3.5rem auto 4rem;
  padding: 2rem 2rem 2.25rem;
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-lg);
}
.claim-badge {
  margin-bottom: 0.15rem;
}
.claim-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-bone);
}
.claim-lead {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-pale-stone);
}
.claim-lead strong {
  color: var(--color-bone);
  font-weight: 500;
}
.claim-code-box {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
}
.claim-code-label {
  font-family: var(--font-geist-mono);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-warm-granite);
}
.claim-code {
  font-family: var(--font-geist-mono);
  font-size: 15px;
  color: var(--color-bone);
  overflow-wrap: anywhere;
}
.claim-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.15rem;
}
.claim-status {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-pale-stone);
}
.claim-status-error {
  color: #fb7185;
}
.claim-status-ok {
  color: var(--color-metric-green);
}
/* The sender opened their own link. Nothing is broken — accepting is simply refused — so this
   is a caution, not an error: the accent says "read this", where red would say "you broke
   something". */
.claim-card-self {
  border-color: rgba(238, 96, 24, 0.4);
}
.claim-card-self .claim-title {
  color: var(--color-signal-orange);
}
/* ==========================================================================
   Metrics Section & Factory macOS Dashboard Frame
   ========================================================================== */
.metrics-section {
  margin: 3.5rem 0 3rem;
}
.metrics-header {
  text-align: center;
  margin-bottom: 2rem;
}
.metrics-header h2 {
  font-size: 2.75rem;
  font-weight: 400;
  letter-spacing: -1.12px;
  color: var(--color-bone);
  margin-bottom: 0.5rem;
}
.metrics-header p {
  color: var(--color-warm-granite);
  font-size: 1.25rem;
  max-width: 680px;
  margin: 0 auto;
}
.mac-window {
  background: #0d0d0d;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.mac-header {
  background: #141211;
  border-bottom: 1px solid var(--color-ash-stroke);
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mac-dots {
  display: flex;
  gap: 6px;
}
/* Traffic-light colours, one per dot. Three one-declaration rules are not worth
   a loop: the map plus each() would be longer than the rules it replaces. */
.mac-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.mac-dot-red {
  background: #ff5f56;
}
.mac-dot-yellow {
  background: #ffbd2e;
}
.mac-dot-green {
  background: #27c93f;
}
.mac-title {
  font-family: var(--font-geist-mono);
  font-size: 14px;
  text-transform: uppercase;
  color: var(--color-pale-stone);
  letter-spacing: -0.24px;
}
.mac-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-geist-mono);
  font-size: 14px;
  color: var(--color-signal-orange);
}
.dot-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-signal-orange);
  animation: pulseDot 2s infinite;
}
.dot-pulse-green {
  background: var(--color-metric-green);
}
@keyframes pulseDot {
  0% {
    transform: scale(0.95);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
  100% {
    transform: scale(0.95);
    opacity: 0.7;
  }
}
/* The tile borders are one family: which edge is drawn depends on the tile's
   position, which in turn depends on how many columns the grid has. Keeping the
   base geometry, the position rules and both breakpoints in one nested block is
   the only way to see that. The order inside the block is load-bearing — the
   `2n` rule has to beat the `4n` rule, and `:last-child` has to beat
   `:nth-last-child(-n+2)` — so it is kept as written. */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.metrics-grid > .metric-tile:nth-child(4n) {
  border-right: none;
}
.metrics-grid > .metric-tile:nth-last-child(-n+4) {
  border-bottom: none;
}
@media (max-width: 992px) {
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .metrics-grid > .metric-tile:nth-child(4n) {
    border-right: 1px solid var(--color-ash-stroke);
  }
  .metrics-grid > .metric-tile:nth-child(2n) {
    border-right: none;
  }
  .metrics-grid > .metric-tile:nth-last-child(-n+4) {
    border-bottom: 1px solid var(--color-ash-stroke);
  }
  .metrics-grid > .metric-tile:nth-last-child(-n+2) {
    border-bottom: none;
  }
}
@media (max-width: 576px) {
  .metrics-grid {
    grid-template-columns: 1fr;
  }
  .metrics-grid > .metric-tile {
    border-right: none !important;
  }
  .metrics-grid > .metric-tile:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--color-ash-stroke);
  }
  .metrics-grid > .metric-tile:last-child {
    border-bottom: none;
  }
}
.metric-tile {
  padding: 1.5rem 1.25rem;
  border-right: 1px solid var(--color-ash-stroke);
  border-bottom: 1px solid var(--color-ash-stroke);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 125px;
  transition: background 0.15s ease;
}
.metric-tile:hover {
  background: rgba(255, 255, 255, 0.015);
}
.metric-label {
  font-family: var(--font-geist-mono);
  font-size: 14px;
  text-transform: uppercase;
  color: var(--color-pale-stone);
  letter-spacing: -0.24px;
  margin-bottom: 0.5rem;
}
.metric-value {
  font-family: var(--font-geist);
  font-size: 2.4375rem;
  font-weight: 400;
  color: var(--color-bone);
  letter-spacing: -1.12px;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}
.metric-sub {
  font-family: var(--font-geist-mono);
  font-size: 14px;
  color: var(--color-warm-granite);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.metric-sub-green {
  color: var(--color-metric-green);
}
.metric-sub-orange {
  color: var(--color-signal-orange);
}
.sparkline-svg {
  height: 20px;
  width: 70px;
}
/* ==========================================================================
   Testimonials Section (Agent & Human Cards)
   ========================================================================== */
.testimonials-section {
  margin: 4.5rem 0 3rem;
}
.testimonials-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.testimonials-header h2 {
  font-size: 2.75rem;
  font-weight: 400;
  letter-spacing: -1.12px;
  color: var(--color-bone);
  margin-bottom: 0.5rem;
}
.testimonials-header p {
  color: var(--color-warm-granite);
  font-size: 1.25rem;
  max-width: 680px;
  margin: 0 auto;
}
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}
@media (max-width: 840px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
}
.testimonial-card {
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 0.15s ease;
}
.testimonial-card:hover {
  border-color: var(--color-graphite-mid);
}
.testimonial-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.testimonial-author-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.testimonial-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: #141211;
  border: 1px solid var(--color-ash-stroke);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
}
.testimonial-name {
  font-family: var(--font-geist);
  font-weight: 500;
  font-size: 1.1875rem;
  color: var(--color-bone);
}
.testimonial-meta {
  font-family: var(--font-geist-mono);
  font-size: 14px;
  color: var(--color-warm-granite);
}
.testimonial-badge {
  font-family: var(--font-geist-mono);
  font-size: 12.5px;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}
.testimonial-quote {
  font-family: var(--font-geist);
  font-size: 1.15rem;
  color: var(--color-pale-stone);
  line-height: 1.55;
  margin-bottom: 1.25rem;
}
.testimonial-footer {
  border-top: 1px solid var(--color-ash-stroke);
  padding-top: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-geist-mono);
  font-size: 14px;
  color: var(--color-warm-granite);
}
.testimonial-telemetry-badge {
  color: var(--color-metric-green);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* ==========================================================================
   Interactive Questions & Answers (FAQ Accordion)
   ========================================================================== */
.faq-section {
  margin: 4.5rem 0 3.5rem;
}
.faq-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.faq-header h2 {
  font-size: 2.75rem;
  font-weight: 400;
  letter-spacing: -1.12px;
  color: var(--color-bone);
  margin-bottom: 0.5rem;
}
.faq-header p {
  color: var(--color-warm-granite);
  font-size: 1.25rem;
  max-width: 680px;
  margin: 0 auto;
}
/* FAQ Category Filters */
.faq-filters {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.faq-filter-btn {
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  color: var(--color-warm-granite);
  padding: 0.45rem 1rem;
  border-radius: var(--radius-xs);
  font-family: var(--font-geist-mono);
  font-size: 1.025rem;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: -0.01em;
}
.faq-filter-btn:hover {
  border-color: var(--color-graphite-mid);
  color: var(--color-chalk);
}
.faq-filter-btn.active {
  background: #151312;
  border-color: var(--color-signal-orange);
  color: var(--color-bone);
  box-shadow: 0 0 12px rgba(238, 96, 24, 0.15);
}
/* FAQ List & Item Enhancement */
.faq-list {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.faq-item {
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item:hover {
  border-color: var(--color-graphite-mid);
}
/* Everything that changes while an answer is open, in one place: the frame, the
   index chip, the answer panel and the rotating "plus". Each nested selector is
   more specific than the base rule below, so the pair still resolves the same
   way now that the open state is emitted first. */
.faq-item.active {
  border-color: rgba(238, 96, 24, 0.45);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  background: #1b1917;
}
.faq-item.active .faq-index {
  color: var(--color-signal-orange);
  border-color: rgba(238, 96, 24, 0.5);
  background: rgba(238, 96, 24, 0.08);
}
.faq-item.active .faq-answer {
  max-height: 3000px;
  padding: 0 1.4rem 1.4rem 1.4rem;
  border-top: 1px solid rgba(61, 58, 57, 0.5);
}
.faq-item.active .faq-icon {
  transform: rotate(45deg);
}
.faq-question {
  width: 100%;
  text-align: left;
  padding: 1.15rem 1.4rem;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-family: var(--font-geist);
  color: var(--color-bone);
  letter-spacing: -0.02em;
  gap: 1rem;
}
.faq-question-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  text-align: left;
}
.faq-index {
  font-family: var(--font-geist-mono);
  font-size: 14px;
  color: var(--color-warm-granite);
  background: #131110;
  border: 1px solid var(--color-ash-stroke);
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.faq-title-text {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-bone);
}
.faq-question-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.faq-tag-chip {
  font-family: var(--font-geist-mono);
  font-size: 12.5px;
  color: var(--color-warm-granite);
  background: #141211;
  border: 1px solid var(--color-ash-stroke);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.faq-icon {
  font-family: var(--font-geist-mono);
  font-size: 1.5625rem;
  color: var(--color-signal-orange);
  line-height: 1;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 20px;
  text-align: center;
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.25s ease;
  padding: 0 1.4rem;
  color: var(--color-pale-stone);
  font-size: 1.15rem;
  line-height: 1.6;
}
/* Visual Components Inside FAQ Answers */
.faq-desc-lead {
  margin: 1.15rem 0 1rem;
  color: var(--color-chalk);
  font-size: 1.1625rem;
  line-height: 1.65;
}
.faq-visual-block {
  background: #110f0e;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-top: 0.9rem;
}
.faq-visual-title {
  font-family: var(--font-geist-mono);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-warm-granite);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.faq-pipeline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
}
.faq-pipe-step {
  background: #181514;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.85rem;
  font-family: var(--font-geist-mono);
  font-size: 14px;
  color: var(--color-chalk);
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.faq-pipe-step small {
  color: var(--color-warm-granite);
  font-size: 12.5px;
}
.faq-pipe-step.highlight-green {
  border-color: rgba(160, 202, 146, 0.4);
  background: rgba(160, 202, 146, 0.06);
}
.faq-pipe-step.highlight-green strong {
  color: var(--color-metric-green);
}
.faq-pipe-arrow {
  color: var(--color-signal-orange);
  font-size: 16px;
  flex-shrink: 0;
}
.faq-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.65rem;
  margin-top: 0.85rem;
}
.faq-spec-chip {
  background: #161413;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
}
.faq-spec-chip .spec-label {
  font-family: var(--font-geist-mono);
  font-size: 12.5px;
  color: var(--color-warm-granite);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.2rem;
}
.faq-spec-chip .spec-val {
  font-family: var(--font-geist-mono);
  font-size: 14.5px;
  color: var(--color-bone);
}
.faq-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-top: 0.85rem;
}
@media (max-width: 680px) {
  .faq-comparison {
    grid-template-columns: 1fr;
  }
}
.faq-compare-card {
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  font-family: var(--font-geist-mono);
  font-size: 14.5px;
}
.faq-compare-card.bad {
  background: #191212;
  border: 1px solid rgba(239, 68, 68, 0.35);
}
.faq-compare-card.bad .compare-tag {
  color: #ef4444;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
  font-weight: 600;
}
.faq-compare-card.good {
  background: #111a14;
  border: 1px solid rgba(160, 202, 146, 0.4);
}
.faq-compare-card.good .compare-tag {
  color: var(--color-metric-green);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
  font-weight: 600;
}
.faq-seed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.45rem;
  margin: 0.75rem 0;
}
.faq-seed-word {
  background: #181514;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-xs);
  padding: 0.35rem 0.55rem;
  font-family: var(--font-geist-mono);
  font-size: 14px;
  color: var(--color-chalk);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.faq-seed-num {
  color: var(--color-signal-orange);
  font-size: 12.5px;
}
.faq-code-pre {
  background: #0d0c0b;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-family: var(--font-geist-mono);
  font-size: 15px;
  color: var(--color-chalk);
  line-height: 1.55;
  overflow-x: auto;
  margin-top: 0.5rem;
}
.faq-assurance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-top: 0.85rem;
}
.faq-assurance-card {
  background: #171514;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  padding: 0.85rem;
}
.faq-assurance-title {
  font-family: var(--font-geist-mono);
  font-size: 14px;
  color: var(--color-metric-green);
  margin-bottom: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.faq-assurance-desc {
  font-size: 15px;
  color: var(--color-warm-granite);
  line-height: 1.45;
}
/* ==========================================================================
   AI Agent Protocols & Specifications High-Density Grid
   ========================================================================== */
.ecosystem-section {
  margin: 4.5rem 0 3rem;
}
.ecosystem-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.ecosystem-header h2 {
  font-size: 2.75rem;
  font-weight: 400;
  letter-spacing: -1.12px;
  color: var(--color-bone);
  margin-bottom: 0.5rem;
}
.ecosystem-header p {
  color: var(--color-warm-granite);
  font-size: 1.25rem;
  max-width: 680px;
  margin: 0 auto;
}
.ecosystem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.25rem;
}
.ecosystem-card {
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 0.15s ease;
}
.ecosystem-card:hover {
  border-color: var(--color-graphite-mid);
}
.ecosystem-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
span.ecosystem-card-icon {
  font-size: 24px;
  line-height: 1px;
  text-indent: -5px;
}
.ecosystem-card-title {
  font-family: var(--font-geist-mono);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--color-chalk);
  margin-bottom: 0.5rem;
}
.ecosystem-title-link {
  color: var(--color-chalk);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.15s ease;
}
.ecosystem-title-link:hover {
  color: var(--color-signal-orange);
}
.ecosystem-card-desc {
  font-size: 1.1rem;
  color: var(--color-warm-granite);
  line-height: 1.45;
  margin-bottom: 1.25rem;
}
.ecosystem-card-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: auto;
}
/* ==========================================================================
   Enhanced 4-Column Factory Footer
   ========================================================================== */
.footer-wrapper {
  margin-top: auto;
  border-top: 1px solid var(--color-ash-stroke);
  padding: 3.5rem 0 2rem;
  background: #0d0d0d;
}
.footer-cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
  text-align: left;
}
@media (max-width: 880px) {
  .footer-cols {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .footer-cols {
    grid-template-columns: 1fr;
  }
}
/* On the dashboard the "Platform" column is shown like everywhere else: its links are
   root-absolute, so they lead to the landing page sections. */
.footer-col-title {
  font-family: var(--font-geist-mono);
  font-size: 15px;
  text-transform: uppercase;
  color: var(--color-bone);
  margin-bottom: 1.25rem;
  letter-spacing: -0.24px;
}
.footer-col-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer-link {
  color: var(--color-warm-granite);
  text-decoration: none;
  font-size: 1.0625rem;
  transition: color 0.15s ease;
}
.footer-link:hover {
  color: var(--color-chalk);
}
.footer-bottom {
  border-top: 1px solid var(--color-ash-stroke);
  padding-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: var(--font-geist-mono);
  font-size: 15px;
  color: var(--color-warm-granite);
}
/* Responsive Navbar Safeguards */
@media (max-width: 1360px) {
  .nav-links,
  .nav-group {
    gap: 0.35rem;
  }
  .nav-link {
    padding: 0.3rem 0.45rem;
    font-size: 0.9625rem;
  }
  #nav-user-section {
    gap: 0.35rem;
  }
}
@media (max-width: 1120px) {
  .navbar {
    padding: 0.65rem 0;
  }
  .nav-content {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav-content::-webkit-scrollbar {
    display: none;
  }
}
/* "Four ways in": one full-width door on top, three below in a row. */
.ways-in-grid-split {
  margin-bottom: 1.25rem;
}
.ways-in-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 1100px) {
  .ways-in-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .ways-in-row {
    grid-template-columns: minmax(0, 1fr);
  }
}
.way-card-wide {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  margin-bottom: 1.25rem;
}
.way-wide-left,
.way-wide-right {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.way-wide-right {
  justify-content: center;
  align-items: center;
}
.way-wide-right .way-card-action-container {
  margin-top: 0.75rem;
}
.way-wide-right .way-action-btn {
  max-width: 220px;
}
@media (max-width: 900px) {
  .way-card-wide {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }
}
/* --- "Four ways in": keeping the cards aligned ----------------------------
   Icon on the left, title to its right, pill at the right edge - a single row
   in all four cards. */
.way-card-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
  /* Title and pill must fit on one row: otherwise the header grows to two lines
     and everything below drifts out of line with the neighbouring cards. */
  flex-wrap: nowrap;
}
.way-card-top .way-card-title {
  margin-bottom: 0;
  line-height: 1.2;
  font-size: 1.25rem;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.way-card-top .way-pill {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 0.68rem;
  padding: 2px 7px;
  white-space: nowrap;
}
/* Descriptions of different lengths pushed the tabs and the code around. Pin the
   height to four lines in the three lower cards only, so tabs, code boxes and
   footers line up. The wide card on top does not need it.
   Left flat rather than nested under .ways-in-row: it is a one-property
   correction that belongs beside this comment, and nesting it would hoist it
   above the two .ways-in-row media blocks that follow. */
.ways-in-row .way-card-desc {
  min-height: 5.8em;
}
/* Code boxes take the remaining card height, which makes them equal in all three. */
.way-code-box {
  flex-grow: 1;
}
/* Wrap long commands and JSON instead of scrolling them sideways: a clipped line
   with a scrollbar reads worse. The code itself stays a single line, so the
   clipboard still receives exactly one line. */
.way-code-content {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
}
/* The wide card header spans both columns, so the pill sits at the card's own
   right edge instead of the left column's edge. */
.way-card-wide > .way-card-top {
  grid-column: 1 / -1;
  margin-bottom: -0.6rem;
}
/* Tells which data a number refers to: global versus personal. */
.scope-note {
  display: block;
  font-size: 0.72em;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-warm-granite);
  opacity: 0.85;
}
/* Empty-state styling lives at the end of this file. */
/* Expanding the tool list. */
.tool-scope-toggle {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.55rem;
  background: transparent;
  border: 1px dashed var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  color: var(--color-warm-granite);
  font-family: var(--font-geist-mono);
  font-size: 0.9rem;
  cursor: pointer;
}
.tool-scope-toggle:hover {
  color: var(--color-bone);
  border-color: var(--color-warm-granite);
}
/* Token and buttons on one row: they used to leave an empty area underneath.
   flex-direction is required here because a rule above sets column. */
.token-mgmt-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.token-mgmt-group .token-box {
  flex: 1 1 260px;
  min-width: 0;
}
.token-mgmt-group .token-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 0.5rem;
}
/* Expiry and provenance of whatever token this page is showing. It sits directly
   next to the mask in the compact banner, because "when does this die and who issued
   it" is the first thing a reader needs and it must not be something to hover for. */
.token-meta {
  display: inline;
  margin-top: 0;
  font-family: var(--font-geist-mono);
  font-size: 0.76rem;
  color: var(--color-warm-granite);
  overflow-wrap: anywhere;
}
/* One sentence explaining that no token exists until the human asks for one. */
.token-note {
  margin: 0.6rem 0 0 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-warm-granite);
}
/* Welcome heading: a long nickname no longer stretches the block. */
.user-heading {
  overflow-wrap: anywhere;
}
/* ---------------------------------------------------------------------------
   Vault empty state
   A raw emoji, a boxed button floating inside a sentence and an endpoint split
   across lines made this block look accidental. Icon, inline action and the
   endpoint chip are now styled like the rest of the dashboard.
   --------------------------------------------------------------------------- */
.empty-state {
  padding: 3.25rem 1.5rem;
  text-align: center;
}
.empty-state .empty-text {
  max-width: 470px;
  margin: 0 auto 0.55rem;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-warm-granite);
}
.empty-state .empty-api {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  font-size: 0.975rem;
  margin-bottom: 1.7rem;
}
.empty-state .empty-api code {
  font-family: var(--font-geist-mono);
  font-size: 0.9rem;
  color: var(--color-pale-stone);
  background: #0d0d0d;
  border: 1px solid var(--color-ash-stroke);
  border-radius: 6px;
  padding: 3px 9px;
}
.empty-badge {
  width: 58px;
  height: 58px;
  margin: 0 auto 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(238, 96, 24, 0.12);
  border: 1px solid rgba(238, 96, 24, 0.35);
  color: var(--color-signal-orange);
}
.empty-title {
  font-size: 1.4375rem;
  margin: 0 0 0.6rem;
  color: var(--color-bone);
}
/* Reads as part of the sentence: a soft pill, not a hard-edged box. */
.empty-inline-cta {
  display: inline-flex;
  align-items: center;
  background: rgba(238, 96, 24, 0.12);
  border: 1px solid rgba(238, 96, 24, 0.4);
  color: var(--color-signal-orange);
  border-radius: 999px;
  padding: 1px 11px;
  font: inherit;
  font-size: 0.95em;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.empty-inline-cta:hover {
  background: rgba(238, 96, 24, 0.22);
  border-color: var(--color-signal-orange);
}
/* ---------------------------------------------------------------------------
   Search field icon
   The icon was rendered in flow to the left of the input instead of sitting
   inside its left padding: the absolute positioning did not stick, so the
   containing block ended up being a distant ancestor. These selectors are more
   specific on purpose.
   --------------------------------------------------------------------------- */
.toolbar-left .search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 240px;
  min-width: 190px;
}
.toolbar-left .search-icon-svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
  color: var(--color-warm-granite);
}
.toolbar-left .search-input {
  width: 100%;
  padding-left: 2.6rem;
}
.ways-in-title {
  font-size: 2.75rem;
  font-weight: 400;
  letter-spacing: -1.12px;
  color: var(--color-bone);
  margin-bottom: 0.5rem;
}
.ways-in-subtitle {
  color: var(--color-warm-granite);
  font-size: 1.2rem;
  line-height: 1.55;
  max-width: 760px;
  margin: 0 auto;
}
/* Dashboard counterpart: one line under the encryption panel. */
.security-note .security-note-footnote {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-warm-granite);
  border-left: 2px solid var(--color-ash-stroke);
  padding-left: 0.75rem;
  margin-bottom: 0;
}
.security-note .security-note-footnote a {
  color: var(--color-signal-orange);
  text-decoration: none;
}
.security-note .security-note-footnote a:hover {
  text-decoration: underline;
}
/* --- Storage scheme: what the database stores, and in what form -------------
   Three visual layers: the journey of one value, the three column groups, and a
   dump mock that shows the difference instead of asserting it. */
.storage-scheme-section {
  margin: 4.5rem 0 3.5rem;
}
.storage-scheme-section .ways-in-header {
  text-align: center;
  margin-bottom: 2.25rem;
}
/* 1. the journey ---------------------------------------------------------- */
.scheme-diagram {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0.6rem;
  margin: 2.25rem 0 1.75rem;
}
.scheme-zone {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}
.scheme-zone-label {
  font-family: var(--font-geist-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-warm-granite);
  text-align: center;
}
.scheme-zone-memory .scheme-node {
  border-style: dashed;
}
.scheme-node {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 0;
  padding: 1.15rem 0.9rem;
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-lg);
  text-align: center;
}
.scheme-node-icon {
  display: flex;
  color: var(--color-warm-granite);
}
.scheme-node-title {
  font-size: 1.05rem;
  color: var(--color-bone);
}
.scheme-node-sub {
  font-family: var(--font-geist-mono);
  font-size: 12px;
  color: var(--color-warm-granite);
}
.scheme-node-crypto {
  border-color: rgba(238, 96, 24, 0.4);
}
.scheme-node-crypto .scheme-node-icon {
  color: var(--color-signal-orange);
}
.scheme-node-safe {
  border-color: rgba(160, 202, 146, 0.35);
  background: rgba(160, 202, 146, 0.06);
}
.scheme-node-safe .scheme-node-icon {
  color: var(--color-metric-green);
}
.scheme-arrow {
  align-self: center;
  color: var(--color-graphite-mid);
  font-size: 1.35rem;
  line-height: 1;
}
/* 2. the three groups ------------------------------------------------------ */
.scheme-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}
.scheme-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
  padding: 1.35rem 1.4rem;
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  border-top: 3px solid var(--color-graphite-mid);
  border-radius: var(--radius-lg);
}
.scheme-card-encrypted {
  border-top-color: var(--color-metric-green);
}
.scheme-card-hashed {
  border-top-color: var(--color-signal-orange);
}
.scheme-card-readable {
  border-top-color: #c084fc;
}
/* Direction four deliberately has no accent colour of its own: person to person runs on
   the same one-time code as the other three, so it gets the neutral pale stroke rather
   than a fourth hue that would imply a different mechanism. */
.scheme-card-shared {
  border-top-color: var(--color-pale-stone);
}
.scheme-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
}
.scheme-card-icon {
  display: flex;
  color: var(--color-warm-granite);
}
.scheme-card-encrypted .scheme-card-icon {
  color: var(--color-metric-green);
}
.scheme-card-hashed .scheme-card-icon {
  color: var(--color-signal-orange);
}
.scheme-card-readable .scheme-card-icon {
  color: #c084fc;
}
.scheme-card-shared .scheme-card-icon {
  color: var(--color-pale-stone);
}
.scheme-card-title {
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--color-bone);
}
.scheme-count {
  font-family: var(--font-geist-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--color-warm-granite);
  border: 1px solid var(--color-ash-stroke);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
}
.scheme-card-desc {
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--color-warm-granite);
}
.scheme-fields {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}
.scheme-fields li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.6rem 0;
  border-top: 1px solid var(--color-ash-stroke);
}
.scheme-fields code {
  font-family: var(--font-geist-mono);
  font-size: 0.92rem;
  color: var(--color-pale-stone);
  overflow-wrap: anywhere;
}
.scheme-fields .field-label {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-warm-granite);
}
/* 3. the dump mock --------------------------------------------------------- */
.scheme-dump {
  margin-top: 1.5rem;
  background: #0d0d0d;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.scheme-dump-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.85rem 1.1rem;
  background: var(--color-carbon-lift);
  border-bottom: 1px solid var(--color-ash-stroke);
}
.scheme-dump-head code {
  font-family: var(--font-geist-mono);
  font-size: 0.9rem;
  color: var(--color-pale-stone);
}
.scheme-dump-title {
  font-size: 1rem;
  color: var(--color-bone);
}
.scheme-dump-sub {
  font-family: var(--font-geist-mono);
  font-size: 12px;
  color: var(--color-warm-granite);
}
.scheme-dump-body {
  margin: 0;
  padding: 1.05rem 1.1rem;
  font-family: var(--font-geist-mono);
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--color-pale-stone);
  white-space: pre;
  overflow-x: auto;
}
.scheme-dump-body .dump-readable {
  color: var(--color-signal-orange);
}
.scheme-dump-body .dump-sealed {
  color: var(--color-metric-green);
}
.scheme-dump-body .dump-note {
  color: var(--color-warm-granite);
}
.scheme-dump-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.8rem 1.1rem;
  border-top: 1px solid var(--color-ash-stroke);
}
.scheme-pill {
  font-family: var(--font-geist-mono);
  font-size: 12px;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.6rem;
}
.scheme-pill-readable {
  color: var(--color-signal-orange);
  border-color: rgba(238, 96, 24, 0.35);
}
.scheme-pill-sealed {
  color: var(--color-metric-green);
  border-color: rgba(160, 202, 146, 0.35);
}
.scheme-pill-plain {
  color: var(--color-pale-stone);
}
/* 4. the three takeaways ---------------------------------------------------- */
.scheme-points {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.75rem 0 0;
  padding: 0;
}
.scheme-points li {
  min-width: 0;
  padding-top: 0.85rem;
  border-top: 2px solid var(--color-ash-stroke);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-warm-granite);
}
.scheme-points strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--color-bone);
}
@media (max-width: 900px) {
  .scheme-diagram,
  .scheme-grid,
  .scheme-points {
    grid-template-columns: minmax(0, 1fr);
  }
  .scheme-arrow {
    transform: rotate(90deg);
  }
}
/* Small motion: the cards lift, the transform node breathes. */
.scheme-card {
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.scheme-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-graphite-mid);
}
.scheme-node-crypto .scheme-node-icon {
  animation: scheme-pulse 2.6s ease-in-out infinite;
}
@keyframes scheme-pulse {
  0%,
  100% {
    opacity: 0.72;
  }
  50% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scheme-card {
    transition: none;
  }
  .scheme-node-crypto .scheme-node-icon {
    animation: none;
  }
}
/* The two zone labels carry the reading: plain text exists in memory, the sealed
   copy is what reaches disk. Colour them to match the nodes underneath. */
.scheme-zone-memory .scheme-zone-label {
  color: var(--color-warm-granite);
}
.scheme-zone-disk .scheme-zone-label {
  color: var(--color-metric-green);
}
/* --- Sharing model: who grants, who receives, what they get ----------------
   The same three-column grammar as the storage scheme, pointed at delegation
   instead of storage. What is added here is only what the four directions
   need: one accent per direction, and the scope ladder inside direction one.
   The direction cards, the three-column diagrams, the arrow and the guarantee
   list reuse the scheme classes verbatim, so the two blocks read as one
   system rather than as two visual languages. */
.sharing-section {
  margin: 4.5rem 0 3.5rem;
  /* The same header treatment the storage-scheme block gives its own. */
}
.sharing-section .ways-in-header {
  text-align: center;
  margin-bottom: 2.25rem;
}
.sharing-diagram {
  margin: 0.2rem 0 0;
  /* The flow arrows carry the reading here, so they are an accent rather than the dim
     hairline colour the storage diagram uses. `align-self: start` plus the top margin
     level the arrow with the node row rather than with the GRANTS/RECEIVES/GETS labels
     above it, and the size stays at the base value so that offset remains correct. */
}
.sharing-diagram .scheme-node {
  padding: 1rem 0.75rem;
}
.sharing-diagram .scheme-arrow {
  color: var(--color-signal-orange);
  opacity: 0.9;
  align-self: start;
  margin-top: 1.55rem;
}
/* The scope ladder: one mechanism per line, in mono, with the plain-English
   consequence beside it. It is a scheme-dump because that is what it is: a
   readout, not prose. Its head says which four scopes and who picks them. */
.sharing-ladder {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-family: var(--font-geist-mono);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-pale-stone);
}
/* Two columns so the four consequences start at the same x. As a wrapping flex row the
   scope name pushed each description to a different position, which read as noise. */
.sharing-ladder-row {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
}
@media (max-width: 640px) {
  .sharing-ladder-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
  }
}
.sharing-ladder code {
  color: var(--color-bone);
}
.sharing-ladder .dump-note {
  color: var(--color-warm-granite);
  white-space: normal;
}
/* The five guarantees are wider than the three storage takeaways and some of
   them carry a second line, so the note under each is a block rather than a
   continuation of the same paragraph. */
.scheme-guarantees-detail {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--color-warm-granite);
}
.scheme-guarantees code {
  font-family: var(--font-geist-mono);
  font-size: 0.9rem;
  color: var(--color-pale-stone);
  overflow-wrap: anywhere;
}
/* Responsive and motion overrides for the sharing block. Last in the file on
   purpose: the base rules above sit beside the storage-scheme block they
   mirror, while these carry the same specificity as the rules at the end of
   the file and would otherwise lose to them by source order. */
@media (max-width: 900px) {
  /* The storage rules above already collapse a scheme-diagram to one column;
     these two only tighten what the four directions made taller. */
  .sharing-diagram .scheme-node {
    padding: 0.85rem 0.6rem;
  }
  .sharing-points {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 680px) {
  .sharing-card {
    padding: 1.1rem 1.05rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sharing-card:hover {
    transform: none;
  }
}
.sharing-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin: 2.5rem 0;
}
.sharing-matrix-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  border-top: 3px solid var(--color-graphite-mid);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.sharing-matrix-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-warm-granite);
}
.sharing-matrix-card-ha {
  border-top-color: var(--color-metric-green);
}
.sharing-matrix-card-ah {
  border-top-color: var(--color-signal-orange);
}
.sharing-matrix-card-aa {
  border-top-color: #c084fc;
}
.sharing-matrix-card-pp {
  border-top-color: var(--color-pale-stone);
}
.sharing-matrix-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.5rem;
}
.sharing-matrix-head-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--color-carbon);
  border: 1px solid var(--color-ash-stroke);
  border-radius: 8px;
}
.sharing-matrix-card-ha .sharing-matrix-head-icon {
  color: var(--color-metric-green);
}
.sharing-matrix-card-ah .sharing-matrix-head-icon {
  color: var(--color-signal-orange);
}
.sharing-matrix-card-aa .sharing-matrix-head-icon {
  color: #c084fc;
}
.sharing-matrix-card-pp .sharing-matrix-head-icon {
  color: var(--color-pale-stone);
}
.sharing-matrix-title {
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--color-bone);
  margin: 0;
  line-height: 1.2;
}
.sharing-matrix-flow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem;
  background: var(--color-carbon);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-ash-stroke);
}
.sharing-matrix-node {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
  gap: 0.3rem;
  align-items: center;
}
.sharing-matrix-node-icon {
  color: var(--color-warm-granite);
  margin-bottom: 0.2rem;
}
.sharing-matrix-node-title {
  font-size: 0.95rem;
  color: var(--color-bone);
  font-weight: 500;
}
.sharing-matrix-node-sub {
  font-size: 0.75rem;
  color: var(--color-warm-granite);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--font-geist-mono);
}
.sharing-matrix-arrow {
  color: var(--color-warm-granite);
  font-size: 1.2rem;
}
.sharing-matrix-desc {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-silver);
  margin: 0;
}
.sharing-matrix-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  /* Increased gap */
  background: var(--color-carbon-lift);
  border: 1px solid var(--color-ash-stroke);
  border-top: 3px solid var(--color-graphite-mid);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  /* Increased padding */
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.sharing-matrix-node-icon {
  color: var(--color-warm-granite);
  margin-bottom: 0.5rem;
  /* Better spacing for icons */
  display: inline-flex;
  justify-content: center;
}
.scheme-dump-body .dump-hashed {
  color: var(--color-signal-orange);
}
.scheme-pill-hashed {
  border-color: var(--color-signal-orange);
  color: var(--color-signal-orange);
}
.ways-in-section {
  --lux-accent: var(--color-signal-orange);
}
.tested-agents-section {
  --lux-accent: var(--color-metric-green);
}
.metrics-section {
  --lux-accent: #38bdf8;
}
.testimonials-section {
  --lux-accent: #c084fc;
}
.ecosystem-section {
  --lux-accent: var(--color-signal-orange);
}
.storage-scheme-section {
  --lux-accent: var(--color-metric-green);
}
.sharing-section {
  --lux-accent: #c084fc;
}
.faq-section {
  --lux-accent: var(--color-signal-orange);
}
.support-section {
  --lux-accent: var(--color-metric-green);
}
.startup-banner {
  --lux-accent: var(--color-signal-orange);
}
@keyframes lux-reveal {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ways-in-section,
    .tested-agents-section,
    .metrics-section,
    .testimonials-section,
    .ecosystem-section,
    .storage-scheme-section,
    .sharing-section,
    .faq-section,
    .support-section {
      animation: lux-reveal 1s linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 85%;
    }
  }
}
@keyframes lux-glow-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(2%, -3%, 0) scale(1.12);
  }
}
.ways-in-section,
.tested-agents-section,
.metrics-section,
.testimonials-section,
.ecosystem-section,
.storage-scheme-section,
.sharing-section,
.faq-section,
.support-section {
  position: relative;
}
.ways-in-section::before,
.tested-agents-section::before,
.metrics-section::before,
.testimonials-section::before,
.ecosystem-section::before,
.storage-scheme-section::before,
.sharing-section::before,
.faq-section::before,
.support-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -6rem;
  left: 50%;
  width: min(46rem, 82vw);
  height: 26rem;
  margin-left: -23rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lux-accent), transparent 68%);
  filter: blur(90px);
  opacity: 0.11;
  pointer-events: none;
  animation: lux-glow-drift 26s ease-in-out infinite;
}
.hero-tag,
.ways-in-badge {
  position: relative;
  overflow: hidden;
  border-color: var(--lux-accent, var(--color-ash-stroke));
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  box-shadow: 0 0 22px -14px var(--lux-accent, transparent);
}
.dot-orange,
.dot-pulse-green {
  animation: lux-dot 2.6s ease-in-out infinite;
}
@keyframes lux-dot {
  0%,
  100% {
    text-shadow: 0 0 0 currentColor;
    opacity: 0.75;
  }
  50% {
    text-shadow: 0 0 10px currentColor;
    opacity: 1;
  }
}
@keyframes lux-rule {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 200% 50%;
  }
}
.ways-in-header h2::after,
.tested-agents-header h2::after,
.metrics-header h2::after,
.testimonials-header h2::after,
.ecosystem-header h2::after,
.faq-header h2::after,
.support-header h2::after {
  content: "";
  display: block;
  width: 96px;
  height: 2px;
  margin: 1rem auto 0;
  border-radius: 2px;
  background-image: linear-gradient(90deg, transparent, var(--lux-accent, var(--color-ash-stroke)), transparent);
  background-size: 200% 100%;
  animation: lux-rule 7s linear infinite;
}
@keyframes lux-sheen {
  from {
    transform: translateX(-180%) rotate(14deg);
  }
  to {
    transform: translateX(620%) rotate(14deg);
  }
}
@keyframes lux-line {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 200% 50%;
  }
}
.way-card,
.agent-card,
.testimonial-card,
.ecosystem-card,
.scheme-card,
.sharing-matrix-card,
.faq-item,
.support-card,
.metric-tile {
  position: relative;
  overflow: hidden;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.way-card:hover,
.agent-card:hover,
.testimonial-card:hover,
.ecosystem-card:hover,
.scheme-card:hover,
.sharing-matrix-card:hover,
.faq-item:hover,
.support-card:hover,
.metric-tile:hover {
  transform: translateY(-3px);
  border-color: var(--lux-accent, var(--color-graphite-mid));
  box-shadow: 0 24px 48px -32px rgba(0, 0, 0, 0.95), 0 0 30px -18px var(--lux-accent, transparent);
}
.way-card::after,
.agent-card::after,
.testimonial-card::after,
.ecosystem-card::after,
.scheme-card::after,
.sharing-matrix-card::after,
.faq-item::after,
.support-card::after,
.metric-tile::after {
  content: "";
  position: absolute;
  top: -60%;
  left: 0;
  width: 22%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.075), transparent);
  transform: translateX(-180%) rotate(14deg);
  opacity: 0;
  pointer-events: none;
}
.way-card:hover::after,
.agent-card:hover::after,
.testimonial-card:hover::after,
.ecosystem-card:hover::after,
.scheme-card:hover::after,
.sharing-matrix-card:hover::after,
.faq-item:hover::after,
.support-card:hover::after,
.metric-tile:hover::after {
  opacity: 1;
  animation: lux-sheen 1.1s ease-out;
}
.way-card::before,
.testimonial-card::before,
.ecosystem-card::before,
.scheme-card::before,
.sharing-matrix-card::before,
.faq-item::before,
.support-card::before,
.metric-tile::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background-image: linear-gradient(90deg, transparent, var(--lux-accent, var(--color-graphite-mid)), transparent);
  background-size: 200% 100%;
  opacity: 0.5;
  transition: opacity 0.22s ease;
  animation: lux-line 9s linear infinite;
  pointer-events: none;
}
.way-card:hover::before,
.testimonial-card:hover::before,
.ecosystem-card:hover::before,
.scheme-card:hover::before,
.sharing-matrix-card:hover::before,
.faq-item:hover::before,
.support-card:hover::before,
.metric-tile:hover::before {
  opacity: 1;
}
.ways-in-grid-split {
  counter-reset: lux-door;
}
.way-card {
  counter-increment: lux-door;
}
.way-card-title::before {
  content: counter(lux-door, decimal-leading-zero);
  font-family: var(--font-geist-mono);
  margin-right: 0.5rem;
  color: var(--lux-accent, var(--color-warm-granite));
  opacity: 0.75;
  font-size: 0.82em;
  letter-spacing: 0.06em;
}
@keyframes lux-breathe {
  0%,
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
  50% {
    box-shadow: 0 0 24px -6px var(--lux-accent, transparent);
  }
}
.way-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  animation: lux-breathe 5.5s ease-in-out infinite;
}
.way-code-box {
  border-left: 2px solid var(--lux-accent, var(--color-ash-stroke));
}
.way-tab.active {
  color: var(--lux-accent, var(--color-bone));
  box-shadow: inset 0 -2px 0 0 currentColor;
}
.tested-agents-section {
  position: relative;
}
.tested-agents-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(80% 60% at 50% 40%, #000 0%, transparent 72%);
  mask-image: radial-gradient(80% 60% at 50% 40%, #000 0%, transparent 72%);
  pointer-events: none;
}
.agent-card-accent-line {
  background-image: linear-gradient(90deg, transparent, var(--lux-accent, var(--color-signal-orange)), transparent);
  background-size: 200% 100%;
  animation: lux-line 9s linear infinite;
}
.agent-card:hover .agent-card-icon,
.ecosystem-card:hover .ecosystem-card-icon {
  animation: lux-icon-hop 0.6s ease;
}
@keyframes lux-icon-hop {
  0% {
    transform: translateY(0) scale(1);
  }
  45% {
    transform: translateY(-4px) scale(1.08);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
.mac-window {
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.95), 0 0 44px -30px var(--lux-accent, transparent);
}
@keyframes lux-scan {
  0% {
    transform: translateY(-40%);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translateY(560%);
    opacity: 0;
  }
}
.mac-window::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 90px;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.09), transparent);
  pointer-events: none;
  animation: lux-scan 7s ease-in-out infinite;
}
@keyframes lux-meter {
  0%,
  100% {
    transform: scaleX(0.32);
    opacity: 0.45;
  }
  50% {
    transform: scaleX(1);
    opacity: 1;
  }
}
.metric-label::after {
  content: "";
  display: block;
  height: 3px;
  margin-top: 0.5rem;
  border-radius: 3px;
  transform-origin: left center;
  background-image: linear-gradient(90deg, var(--lux-accent, var(--color-metric-green)), transparent);
  animation: lux-meter 3.4s ease-in-out infinite;
}
.metric-tile:nth-child(2) .metric-label::after {
  animation-delay: 0.4s;
}
.metric-tile:nth-child(3) .metric-label::after {
  animation-delay: 0.8s;
}
.metric-tile:nth-child(4) .metric-label::after {
  animation-delay: 1.2s;
}
.metric-tile:nth-child(5) .metric-label::after {
  animation-delay: 1.6s;
}
.metric-tile:nth-child(6) .metric-label::after {
  animation-delay: 2s;
}
.testimonial-quote {
  position: relative;
}
.testimonial-quote::before {
  content: "\201C";
  display: block;
  font-size: 3.4rem;
  line-height: 0.6;
  margin-bottom: 0.4rem;
  color: var(--lux-accent, var(--color-warm-granite));
  opacity: 0.5;
}
@keyframes lux-ring {
  0% {
    box-shadow: 0 0 0 0 var(--lux-accent, transparent);
  }
  70% {
    box-shadow: 0 0 0 7px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}
.testimonial-card:hover .testimonial-avatar {
  border-color: var(--lux-accent, var(--color-ash-stroke));
  animation: lux-ring 1.6s ease-out infinite;
}
@keyframes lux-arrow {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.5;
  }
  50% {
    transform: translateX(4px);
    opacity: 1;
  }
}
.scheme-arrow,
.sharing-matrix-arrow {
  display: inline-block;
  color: var(--lux-accent, var(--color-signal-orange));
  animation: lux-arrow 2.4s ease-in-out infinite;
}
.sharing-matrix-card-ha {
  --lux-accent: var(--color-metric-green);
}
.sharing-matrix-card-ah {
  --lux-accent: var(--color-signal-orange);
}
.sharing-matrix-card-aa {
  --lux-accent: #c084fc;
}
.faq-item.active {
  border-left: 3px solid var(--lux-accent, var(--color-signal-orange));
  box-shadow: 0 20px 44px -34px rgba(0, 0, 0, 0.95), 0 0 30px -20px var(--lux-accent, transparent);
}
.faq-filter-btn {
  transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.faq-filter-btn:hover {
  transform: translateY(-2px);
  border-color: var(--lux-accent, var(--color-graphite-mid));
  color: var(--color-bone);
}
.faq-filter-btn.active {
  color: var(--color-bone);
  border-color: var(--lux-accent, var(--color-signal-orange));
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  box-shadow: 0 0 24px -14px var(--lux-accent, transparent);
}
@keyframes lux-plus {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(90deg) scale(1.12);
  }
}
.faq-item.active .faq-icon {
  color: var(--lux-accent, var(--color-signal-orange));
  animation: lux-plus 0.5s ease;
}
.support-card.highlight {
  box-shadow: 0 26px 52px -38px rgba(0, 0, 0, 0.95), 0 0 38px -22px var(--lux-accent, transparent);
}
.startup-badge {
  position: relative;
  overflow: hidden;
}
.startup-badge::after {
  content: "";
  position: absolute;
  top: -50%;
  left: 0;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translateX(-160%) rotate(16deg);
  animation: lux-sheen 3.4s ease-in-out infinite;
  animation-delay: 1.2s;
  pointer-events: none;
}
@keyframes lux-footer-rule {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 200% 50%;
  }
}
.footer-wrapper {
  position: relative;
}
.footer-wrapper::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background-image: linear-gradient(90deg, transparent, var(--color-signal-orange), var(--color-metric-green), #c084fc, transparent);
  background-size: 200% 100%;
  animation: lux-footer-rule 12s linear infinite;
}
.footer-wrapper a {
  transition: color 0.18s ease, transform 0.18s ease;
  display: inline-block;
}
.footer-wrapper a:hover {
  transform: translateX(2px);
}
.dashboard-panel,
.profile-notes-card,
.secrets-card,
.token-row,
.handoff-row,
.shared-vault-share {
  --lux-accent: var(--color-signal-orange);
  position: relative;
}
.dashboard-panel::before,
.profile-notes-card::before,
.secrets-card::before,
.token-row::before,
.handoff-row::before,
.shared-vault-share::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background-image: linear-gradient(90deg, transparent, var(--lux-accent), transparent);
  opacity: 0.35;
  pointer-events: none;
}
.token-row,
.handoff-row,
.shared-vault-share {
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.token-row:hover,
.handoff-row:hover,
.shared-vault-share:hover {
  transform: translateY(-2px);
  border-color: var(--color-graphite-mid);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: 0 18px 34px -26px rgba(0, 0, 0, 0.9);
}
.nav-link {
  position: relative;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0.55rem;
  right: 0.55rem;
  bottom: 0.1rem;
  height: 1px;
  background: var(--color-signal-orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s ease;
}
.nav-link:hover::after {
  transform: scaleX(1);
}
.btn {
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -18px rgba(0, 0, 0, 0.9);
}
.btn:active:not(:disabled) {
  transform: translateY(0);
}
.notes-avatar-badge {
  color: var(--lux-accent, var(--color-signal-orange));
  animation: lux-breathe 6s ease-in-out infinite;
}
.empty-badge {
  animation: lux-breathe 5s ease-in-out infinite;
}
.vault-stat-chip {
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.vault-stat-chip:hover {
  transform: translateY(-2px);
  border-color: var(--color-graphite-mid);
}
.notes-mode-btn.active {
  color: var(--color-bone);
  box-shadow: inset 0 -2px 0 0 var(--color-signal-orange);
}
@media (prefers-reduced-motion: reduce) {
  @lux-sections {
    animation: none;
    ::before {
      animation: none;
    }
  }
  .dot-orange,
  .dot-pulse-green,
  .way-card-icon,
  .agent-card-accent-line,
  .mac-window::after,
  .metric-label::after,
  .testimonial-card:hover .testimonial-avatar,
  .scheme-arrow,
  .sharing-matrix-arrow,
  .faq-item.active .faq-icon,
  .startup-badge::after,
  .footer-wrapper::before,
  .notes-avatar-badge,
  .empty-badge,
  .ways-in-header h2::after,
  .tested-agents-header h2::after,
  .metrics-header h2::after,
  .testimonials-header h2::after,
  .ecosystem-header h2::after,
  .faq-header h2::after,
  .support-header h2::after {
    animation: none;
  }
  .way-card:hover,
  .agent-card:hover,
  .testimonial-card:hover,
  .ecosystem-card:hover,
  .scheme-card:hover,
  .sharing-matrix-card:hover,
  .faq-item:hover,
  .support-card:hover,
  .metric-tile:hover,
  .token-row:hover,
  .handoff-row:hover,
  .shared-vault-share:hover,
  .vault-stat-chip:hover,
  .btn:hover,
  .faq-filter-btn:hover {
    transform: none;
  }
  .way-card:hover::after,
  .agent-card:hover::after,
  .testimonial-card:hover::after,
  .ecosystem-card:hover::after,
  .scheme-card:hover::after,
  .sharing-matrix-card:hover::after,
  .faq-item:hover::after,
  .support-card:hover::after,
  .metric-tile:hover::after {
    animation: none;
    opacity: 0;
  }
}
.nav-link.nav-link-account {
  color: var(--color-signal-orange);
  font-weight: 500;
}
.profile-notes-header > .panel-header-actions,
.dashboard-panel-header > .panel-header-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.btn-glyph-plus {
  font-weight: 700;
  margin-right: 2px;
}
.btn-icon-inline-svg {
  vertical-align: -2px;
  margin-right: 4px;
}
.agent-hint.agent-hint-wide {
  width: 100%;
}
.connect-hint.connect-hint-spaced {
  margin-top: 0.85rem;
}
.badge.badge-compact {
  font-size: 11px;
}
.secrets-table .col-secret-key {
  width: 17%;
}
.secrets-table .col-decrypted-value {
  width: 21%;
}
.secrets-table .col-environment {
  width: 10%;
}
.secrets-table .col-type-flags {
  width: 15%;
}
.secrets-table .col-version {
  width: 7%;
}
.secrets-table .col-updated {
  width: 12%;
}
.secrets-table .col-actions {
  width: 12%;
  text-align: right;
}
.logo-container.logo-container-spaced {
  margin-bottom: 0.75rem;
}
.footer-brand-copy {
  font-size: 1.0625rem;
  color: var(--color-warm-granite);
  line-height: 1.5;
  margin-bottom: 1rem;
  max-width: 320px;
}
.footer-monitor-link {
  font-family: var(--font-geist-mono);
  display: inline-flex;
  font-size: 14px;
  color: var(--color-metric-green);
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.footer-link.footer-link-accent {
  color: var(--color-metric-green);
  font-weight: 500;
}
.footer-status-line {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
}
.footer-status-value {
  color: var(--color-bone);
}
.footer-status-divider {
  color: var(--color-ash-stroke);
}
.modal-card.modal-curl {
  max-width: 640px;
}
.modal-card.modal-recovery {
  max-width: 600px;
}
.modal-card.modal-token {
  max-width: 550px;
}
.modal-card.modal-versions {
  max-width: 560px;
}
.form-grid-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.form-group.form-group-inline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.form-checkbox-lg {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.form-checkbox-md {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.form-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 1rem;
  cursor: pointer;
}
.form-checkbox-burn-label {
  font-size: 1.125rem;
  cursor: pointer;
  color: #fb7185;
}
.btn.btn-block {
  width: 100%;
}
.btn.btn-form-submit {
  width: 100%;
  margin-top: 0.5rem;
}
.btn.btn-stacked {
  margin-top: 0.5rem;
}
.btn.btn-grow {
  flex: 1;
}
.btn.btn-reveal-footer {
  height: 38px;
  padding: 0 1.25rem;
  font-size: 1.0625rem;
}
.auth-intro {
  margin-bottom: 1rem;
}
.auth-intro-text {
  font-size: 1.0625rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}
.form-hint.form-hint-spaced {
  margin-bottom: 1rem;
}
.form-hint.form-hint-stacked {
  margin-top: 0.5rem;
}
.curl-snippet-block {
  margin-bottom: 1.25rem;
}
.spec-url-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.spec-url-value {
  color: var(--color-metric-green);
  font-size: 1.0625rem;
  word-break: break-all;
  font-family: var(--font-geist-mono);
}
.spec-url-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.modal-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.modal-title.modal-title-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.modal-title.modal-title-accent {
  color: var(--accent-orange);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.modal-lead-text {
  font-size: 1.0625rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.seed-privacy-notice {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 1.0625rem;
  color: #fde68a;
}
.seed-actions-row {
  margin-top: 1.25rem;
  display: flex;
  gap: 0.75rem;
}
.code-box.code-box-break-all {
  word-break: break-all;
}
.live-tag-polling {
  font-size: 12.5px;
  padding: 2px 7px;
  background: rgba(160, 202, 146, 0.12);
  border: 1px solid rgba(160, 202, 146, 0.35);
  color: var(--color-metric-green);
  border-radius: var(--radius-sm);
  font-family: var(--font-geist-mono);
  letter-spacing: -0.2px;
}
.monitor-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  background: #0d0d0d;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-geist-mono);
  font-size: 1rem;
}
.monitor-status-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.monitor-status-metrics {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.monitor-status-ok {
  color: var(--color-metric-green);
}
.monitor-status-warn {
  color: #fcd34d;
}
.monitor-status-muted {
  color: var(--color-pale-stone);
}
.monitor-status-value {
  color: var(--color-bone);
}
.monitor-status-divider {
  color: var(--color-ash-stroke);
}
.monitor-card-note {
  font-size: 0.9rem;
  color: var(--color-warm-granite);
  margin-top: 4px;
}
.monitor-card-note-ok {
  font-size: 0.9rem;
  color: var(--color-metric-green);
  margin-top: 4px;
}
.monitor-table-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1.5rem 0 0.5rem 0;
}
.monitor-table-title {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-bone);
  letter-spacing: -0.2px;
  margin: 0;
}
.monitor-table-hint {
  font-size: 0.9rem;
  color: var(--color-warm-granite);
  font-family: var(--font-geist-mono);
}
.monitor-table-scroll {
  overflow-x: auto;
  background: #0d0d0d;
  border: 1px solid var(--color-ash-stroke);
  border-radius: var(--radius-sm);
}
.secrets-table.monitor-table {
  font-size: 1rem;
  margin: 0;
}
.secrets-table td.monitor-table-empty {
  text-align: center;
  color: var(--color-warm-granite);
  padding: 1.25rem;
}
.monitor-prometheus-bar {
  margin-top: 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0d0d0d;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-ash-stroke);
  flex-wrap: wrap;
  gap: 0.5rem;
}
.monitor-prometheus-label {
  font-size: 1rem;
  color: var(--color-warm-granite);
  font-family: var(--font-geist-mono);
}
.monitor-prometheus-path {
  color: var(--color-bone);
}
.monitor-prometheus-actions {
  display: flex;
  gap: 0.5rem;
}
.reveal-intro-text {
  font-size: 1.15rem;
  color: var(--color-pale-stone);
  line-height: 1.5;
  margin: 0 0 1rem 0;
}
.reveal-target-glyph {
  font-size: 1.375rem;
  flex-shrink: 0;
}
.reveal-warning-glyph {
  font-size: 1.5625rem;
  line-height: 1;
  flex-shrink: 0;
}
.reveal-warning-icon {
  flex-shrink: 0;
  margin-top: 2px;
}
.reveal-warning-title {
  font-family: var(--font-geist-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-signal-orange);
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}
.reveal-warning-copy {
  font-size: 1.025rem;
  color: var(--color-pale-stone);
  line-height: 1.45;
}
.reveal-normal-copy {
  font-size: 1.025rem;
  color: var(--color-warm-granite);
  line-height: 1.45;
}
.versions-intro-text {
  font-size: 1.0625rem;
  color: var(--color-warm-granite);
  margin-bottom: 1rem;
  line-height: 1.5;
}
.hero.hero-compact {
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
}
.hero-actions.hero-actions-spaced {
  margin-top: 1.5rem;
}
.molt-card-sublink a.molt-sublink-skill {
  color: #888;
}
.hero-tag.hero-tag-spaced {
  margin-bottom: 0.75rem;
}
.hero-tag.hero-tag-tight {
  margin-bottom: 0.5rem;
}
.way-card-icon.way-card-icon-analytics {
  color: var(--accent-orange);
}
.way-card-icon.way-card-icon-mcp {
  color: #a855f7;
}
.way-card-desc.way-card-desc-compact {
  margin-top: 0.6rem;
  font-size: 0.75rem;
}
.way-check.way-check-mcp {
  color: #c084fc;
}
.metric-unit {
  font-size: 1.25rem;
  color: var(--color-warm-granite);
}
.metric-value.metric-value-positive {
  color: var(--color-metric-green);
}
.badge.badge-anonymous {
  font-size: 11px;
  background: rgba(160, 202, 146, 0.1);
  color: var(--color-metric-green);
  border-color: rgba(160, 202, 146, 0.3);
}
.badge.badge-mcp-protocol {
  background: rgba(139, 92, 246, 0.2);
  color: #c084fc;
  border: 1px solid rgba(139, 92, 246, 0.4);
}
.startup-banner-content a.startup-skill-link {
  color: var(--color-metric-green);
  text-decoration: underline;
  font-weight: 500;
}
.faq-tag-chip.faq-tag-chip-green {
  color: var(--color-metric-green);
  border-color: rgba(160, 202, 146, 0.3);
}
.faq-tag-chip.faq-tag-chip-orange {
  color: var(--color-signal-orange);
  border-color: rgba(238, 96, 24, 0.3);
}
.faq-tag-chip.faq-tag-chip-violet {
  color: #c084fc;
  border-color: rgba(192, 132, 252, 0.3);
}
.faq-tag-chip.faq-tag-chip-indigo {
  color: #c084fc;
  border-color: rgba(139, 92, 246, 0.3);
}
.faq-tag-chip.faq-tag-chip-blue {
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.3);
}
.faq-tag-chip.faq-tag-chip-teal {
  color: #2dd4bf;
  border-color: rgba(45, 212, 191, 0.3);
}
.faq-tag-chip.faq-tag-chip-sky {
  color: #7dd3fc;
  border-color: rgba(125, 211, 252, 0.3);
}
.spec-val.spec-val-positive {
  color: var(--color-metric-green);
}
.spec-val.spec-val-warning {
  color: var(--color-signal-orange);
}
.faq-visual-title.faq-visual-title-spaced {
  margin-top: 0.85rem;
}
.faq-compare-notes-bad {
  margin-top: 0.5rem;
  color: #fca5a5;
  font-size: 14px;
}
.faq-compare-notes-good {
  margin-top: 0.5rem;
  color: #bbf7d0;
  font-size: 14px;
}
.faq-actions-row {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.85rem;
  flex-wrap: wrap;
}
.faq-ordered-list {
  color: var(--color-warm-granite);
  font-size: 1.125rem;
  line-height: 1.6;
  margin: 0.75rem 0 0.75rem 1.5rem;
}
.support-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.support-price-suffix {
  font-size: 1.25rem;
  color: var(--text-muted);
  font-weight: normal;
}
.support-card-copy {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.support-card-glyph {
  font-size: 1.5625rem;
}
.support-card-heading {
  font-size: 1.5625rem;
  font-weight: 700;
  margin: 0.75rem 0 0.5rem 0;
  color: #f8fafc;
}
.support-donation-copy {
  font-size: 1.0625rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.support-donation-block {
  margin-top: 1rem;
}
.support-donation-label {
  font-size: 0.975rem;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}
.support-sponsor-note {
  margin-top: 1rem;
  font-size: 1rem;
  color: var(--text-muted);
}
.donation-asset-name {
  color: var(--color-bone);
}
.btn.donation-copy-btn {
  padding: 2px 8px;
  font-size: 0.9375rem;
}
.icon-brand {
  display: block;
}
.icon-agent-terminal {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask: url("/static/img/icon-agent-terminal.svg") no-repeat center / contain;
  mask: url("/static/img/icon-agent-terminal.svg") no-repeat center / contain;
}
.icon-human {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask: url("/static/img/icon-human.svg") no-repeat center / contain;
  mask: url("/static/img/icon-human.svg") no-repeat center / contain;
}
.icon-people {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask: url("/static/img/icon-people.svg") no-repeat center / contain;
  mask: url("/static/img/icon-people.svg") no-repeat center / contain;
}
.icon-bolt {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask: url("/static/img/icon-bolt.svg") no-repeat center / contain;
  mask: url("/static/img/icon-bolt.svg") no-repeat center / contain;
}
.icon-file-api {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask: url("/static/img/icon-file-api.svg") no-repeat center / contain;
  mask: url("/static/img/icon-file-api.svg") no-repeat center / contain;
}
.icon-mcp-tools {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask: url("/static/img/icon-mcp-tools.svg") no-repeat center / contain;
  mask: url("/static/img/icon-mcp-tools.svg") no-repeat center / contain;
}
.icon-live-stats {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask: url("/static/img/icon-live-stats.svg") no-repeat center / contain;
  mask: url("/static/img/icon-live-stats.svg") no-repeat center / contain;
}
.icon-lock {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask: url("/static/img/icon-lock.svg") no-repeat center / contain;
  mask: url("/static/img/icon-lock.svg") no-repeat center / contain;
}
.icon-lock-narrow {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask: url("/static/img/icon-lock-narrow.svg") no-repeat center / contain;
  mask: url("/static/img/icon-lock-narrow.svg") no-repeat center / contain;
}
.icon-lock-closed {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask: url("/static/img/icon-lock-closed.svg") no-repeat center / contain;
  mask: url("/static/img/icon-lock-closed.svg") no-repeat center / contain;
}
.icon-lock-open {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask: url("/static/img/icon-lock-open.svg") no-repeat center / contain;
  mask: url("/static/img/icon-lock-open.svg") no-repeat center / contain;
}
.icon-rules {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask: url("/static/img/icon-rules.svg") no-repeat center / contain;
  mask: url("/static/img/icon-rules.svg") no-repeat center / contain;
}
.icon-key {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask: url("/static/img/icon-key.svg") no-repeat center / contain;
  mask: url("/static/img/icon-key.svg") no-repeat center / contain;
}
.icon-database {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask: url("/static/img/icon-database.svg") no-repeat center / contain;
  mask: url("/static/img/icon-database.svg") no-repeat center / contain;
}
.icon-hash {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask: url("/static/img/icon-hash.svg") no-repeat center / contain;
  mask: url("/static/img/icon-hash.svg") no-repeat center / contain;
}
.icon-tag {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask: url("/static/img/icon-tag.svg") no-repeat center / contain;
  mask: url("/static/img/icon-tag.svg") no-repeat center / contain;
}
.icon-handoff {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask: url("/static/img/icon-handoff.svg") no-repeat center / contain;
  mask: url("/static/img/icon-handoff.svg") no-repeat center / contain;
}
.icon-sitemap {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask: url("/static/img/icon-sitemap.svg") no-repeat center / contain;
  mask: url("/static/img/icon-sitemap.svg") no-repeat center / contain;
}
.icon-plug {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask: url("/static/img/icon-plug.svg") no-repeat center / contain;
  mask: url("/static/img/icon-plug.svg") no-repeat center / contain;
}
.icon-chat {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask: url("/static/img/icon-chat.svg") no-repeat center / contain;
  mask: url("/static/img/icon-chat.svg") no-repeat center / contain;
}
.icon-list {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask: url("/static/img/icon-list.svg") no-repeat center / contain;
  mask: url("/static/img/icon-list.svg") no-repeat center / contain;
}
.icon-save {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask: url("/static/img/icon-save.svg") no-repeat center / contain;
  mask: url("/static/img/icon-save.svg") no-repeat center / contain;
}
.icon-shield-alert {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask: url("/static/img/icon-shield-alert.svg") no-repeat center / contain;
  mask: url("/static/img/icon-shield-alert.svg") no-repeat center / contain;
}
.icon-copy {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask: url("/static/img/icon-copy.svg") no-repeat center / contain;
  mask: url("/static/img/icon-copy.svg") no-repeat center / contain;
}
.icon-flame {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask: url("/static/img/icon-flame.svg") no-repeat center / contain;
  mask: url("/static/img/icon-flame.svg") no-repeat center / contain;
}
.icon-eye {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask: url("/static/img/icon-eye.svg") no-repeat center / contain;
  mask: url("/static/img/icon-eye.svg") no-repeat center / contain;
}
.icon-eye-off {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask: url("/static/img/icon-eye-off.svg") no-repeat center / contain;
  mask: url("/static/img/icon-eye-off.svg") no-repeat center / contain;
}
.icon-vault-sealed {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask: url("/static/img/icon-vault-sealed.svg") no-repeat center / contain;
  mask: url("/static/img/icon-vault-sealed.svg") no-repeat center / contain;
}
.icon-13 {
  width: 13px;
  height: 13px;
}
.icon-14 {
  width: 14px;
  height: 14px;
}
.icon-17 {
  width: 17px;
  height: 17px;
}
.icon-18 {
  width: 18px;
  height: 18px;
}
.icon-21 {
  width: 21px;
  height: 21px;
}
.icon-23 {
  width: 23px;
  height: 23px;
}
.icon-26 {
  width: 26px;
  height: 26px;
}
.icon-13,
.icon-14,
.icon-17,
.icon-18,
.icon-21,
.icon-23,
.icon-26 {
  display: inline-block;
  flex: 0 0 auto;
}
.logo-icon-svg {
  display: inline-block;
  flex: 0 0 auto;
}
.btn-icon-inline-svg.btn-icon-inline-svg {
  vertical-align: -2px;
}
.search-icon-svg {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask: url("/static/img/icon-search.svg") no-repeat center / contain;
  mask: url("/static/img/icon-search.svg") no-repeat center / contain;
  display: block;
  flex: 0 0 auto;
}
/*# sourceMappingURL=main.css.map */