/* Ayra ix — /tools shared styles */

body.tools-page { --accent: #a78bfa; --accent2: #22d3ee; --bg: #0a0614; --bg-deep: #05030a; }
body.tools-page .orb1 { width: 600px; height: 600px; top: -200px; left: -150px; background: rgba(167,139,250,0.022); }
body.tools-page .orb2 { width: 450px; height: 450px; bottom: 10%; right: -120px; background: rgba(34,211,238,0.015); animation-delay: -9s; }

.tools-hero.world-stage {
  padding: 0;
  text-align: left;
  position: relative; z-index: 1;
}
.tools-hero .hero-title { font-size: clamp(2rem, 5vw, 3.25rem); }
.tools-hero .hero-sub { max-width: 42ch; margin-left: 0; margin-right: 0; }

/* ── Tool worlds gate (Genix = live, Kitix = live at /kitix/) ── */
.tools-world-gate {
  position: relative; z-index: 1;
  max-width: 860px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 52px) clamp(32px, 5vw, 48px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
@media (max-width: 640px) { .tools-world-gate { grid-template-columns: 1fr; } }
.tool-world-card {
  position: relative; text-align: left; font-family: inherit; cursor: pointer;
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px 22px; border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.13);
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 8px 28px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s;
}
.tool-world-card:not(.tool-world-card-soon):hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.24); box-shadow: 0 16px 40px rgba(0,0,0,0.32); }
.tool-world-card-soon { cursor: default; opacity: 0.82; }
.tool-world-icon {
  width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); flex-shrink: 0;
}
.tool-world-icon svg { width: 21px; height: 21px; fill: #eceef2; }
.tool-world-body h2 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: #f4f4f5; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.tool-world-body p { font-size: 0.8rem; color: rgba(245,245,247,0.6); line-height: 1.5; margin: 0; }
.tool-world-badge-soon {
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; color: rgba(245,245,247,0.55);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
}
.tool-world-cta { font-size: 0.78rem; font-weight: 600; color: rgba(245,245,247,0.75); }
.tool-world-cta-disabled { color: rgba(245,245,247,0.35); }

/* ── Tools catalog (index page) ── */
.tools-catalog-section {
  position: relative; z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 52px) clamp(64px, 8vw, 96px);
}
body.tools-page[data-world="genix"] .tools-page-main,
body.tools-page[data-world="kitix"] .tools-page-main {
  background:
    radial-gradient(ellipse 70% 55% at 12% 8%, rgba(124, 92, 190, 0.045), transparent 58%),
    radial-gradient(ellipse 45% 42% at 88% 32%, rgba(34, 211, 238, 0.012), transparent 58%),
    linear-gradient(180deg, #12081f 0%, #0a0614 48%, #05030a 100%);
}
body.tools-page[data-world="genix"] .aurora-sky,
body.tools-page[data-world="kitix"] .aurora-sky {
  background:
    radial-gradient(ellipse 65% 45% at 50% 0%, rgba(139, 92, 246, 0.065), transparent 56%),
    radial-gradient(ellipse 40% 35% at 12% 65%, rgba(34, 211, 238, 0.018), transparent 62%),
    linear-gradient(180deg, #12081f 0%, #0a0614 52%, #05030a 100%);
}
body.tools-page[data-world="genix"] .aurora-band,
body.tools-page[data-world="kitix"] .aurora-band {
  opacity: 0.14;
}
.tools-catalog-head {
  text-align: center;
  margin-bottom: var(--space-8);
}
.tools-catalog-head .section-lead { margin-bottom: 0; }

.tools-catalog-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.tools-search-wrap { flex: 1; min-width: 200px; max-width: 360px; }
.tools-search {
  width: 100%;
  padding: 11px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.35);
  color: var(--text);
  font-family: inherit;
  font-size: var(--text-sm);
}
.tools-search:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.tools-search::placeholder { color: rgba(245,245,247,0.35); }

.tools-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  font-size: 0.75rem;
  color: var(--muted);
}
.tools-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tool-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tool-status-dot-live { background: #34d399; box-shadow: 0 0 8px rgba(52,211,153,0.5); }
.tool-status-dot-soon { background: rgba(245,245,247,0.25); }

.tools-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.tools-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}
.tool-filter-btn {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.25);
  color: var(--muted);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.tool-filter-btn:hover {
  border-color: rgba(255,255,255,0.2);
  color: var(--text2);
}
.tool-filter-btn.active {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
}

.tools-live-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.tools-live-toggle input {
  width: 16px; height: 16px;
  accent-color: #34d399;
  cursor: pointer;
}

.tools-stats {
  font-size: 0.75rem;
  color: rgba(245,245,247,0.4);
  margin-bottom: var(--space-4);
  letter-spacing: 0.02em;
}

.tools-catalog-rail {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
}
.tool-catalog-loading,
.tool-catalog-empty {
  padding: 32px 24px;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--muted);
}

.tool-cat-row {
  --row-accent: #818cf8;
  padding: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 0.25s;
}
.tool-cat-row:last-child { border-bottom: none; }
.tool-cat-row-link:hover {
  background: rgba(255,255,255,0.02);
}
.tool-cat-row-anchor {
  display: block;
  padding: clamp(20px, 3vw, 26px) clamp(18px, 3vw, 24px);
  text-decoration: none;
  color: inherit;
}
.tool-cat-row-anchor:hover .tool-cat-arrow,
.tool-cat-row-anchor:hover .tool-cat-explore {
  transform: translateX(4px);
  color: var(--row-accent);
}
.tool-cat-arrow {
  display: inline-block;
  font-weight: 400;
  opacity: 0.6;
  transition: transform 0.25s, opacity 0.25s;
}
.tool-cat-row-link:hover .tool-cat-arrow { opacity: 1; }
.tool-cat-headline {
  font-size: 0.9375rem;
  color: rgba(245,245,247,0.65);
  line-height: 1.55;
  margin-bottom: 14px;
  max-width: 52ch;
}
.tool-cat-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.tool-cat-preview-pill {
  font-size: 0.75rem;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(52,211,153,0.2);
  background: rgba(52,211,153,0.06);
  color: rgba(245,245,247,0.75);
}
.tool-complex-badge {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent2) 20%, transparent);
  color: var(--accent2);
  border: 1px solid color-mix(in srgb, var(--accent2) 40%, transparent);
  margin-left: 6px;
  vertical-align: middle;
}
.tool-complex-badge {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent2) 20%, transparent);
  color: var(--accent2);
  border: 1px solid color-mix(in srgb, var(--accent2) 40%, transparent);
  margin-left: 6px;
  vertical-align: middle;
}
.tool-cat-explore {
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--row-accent);
  transition: transform 0.25s, color 0.25s;
}

.tool-search-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}
.tool-pill-cat {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(245,245,247,0.35);
  flex-shrink: 0;
}
.tool-cat-row[data-cat="utility"] { --row-accent: #818cf8; }
.tool-cat-row[data-cat="social"] { --row-accent: #f472b6; }
.tool-cat-row[data-cat="finance"] { --row-accent: #22d3ee; }
.tool-cat-row[data-cat="hr"] { --row-accent: #a78bfa; }
.tool-cat-row[data-cat="legal"] { --row-accent: #fbbf24; }
.tool-cat-row[data-cat="marketing"] { --row-accent: #f472b6; }
.tool-cat-row[data-cat="ops"] { --row-accent: #60a5fa; }
.tool-cat-row[data-cat="healthcare"] { --row-accent: #34d399; }

.tool-cat-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.tool-cat-row h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--row-accent);
  letter-spacing: -0.02em;
}
.tool-cat-count {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(245,245,247,0.4);
}
.tool-cat-desc {
  font-size: 0.875rem;
  color: rgba(245,245,247,0.55);
  line-height: 1.55;
  margin-bottom: 14px;
  max-width: 56ch;
}

.tool-pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.tool-pill {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.8125rem;
  line-height: 1.45;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(245,245,247,0.78);
  text-align: left;
}
.tool-pill-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.tool-pill-name {
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.tool-pill-desc {
  font-size: 0.75rem;
  color: rgba(245,245,247,0.55);
  line-height: 1.45;
}

.tool-pill-live-link {
  text-decoration: none;
  background: rgba(52,211,153,0.06);
  border-color: rgba(52,211,153,0.22);
  transition: all 0.2s;
  cursor: pointer;
}
.tool-pill-live-link:hover {
  background: rgba(52,211,153,0.12);
  border-color: rgba(52,211,153,0.4);
  transform: translateY(-1px);
}

.tool-pill-soon-link {
  background: rgba(0,0,0,0.2);
  opacity: 0.65;
  cursor: not-allowed;
}

.tool-pill-live,
.tool-pill-soon {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  flex-shrink: 0;
  margin-top: 2px;
  align-self: flex-start;
}
.tool-pill-live {
  background: rgba(52,211,153,0.15);
  color: #34d399;
  border: 1px solid rgba(52,211,153,0.3);
}
.tool-pill-soon {
  background: rgba(255,255,255,0.05);
  color: rgba(245,245,247,0.45);
  border: 1px solid rgba(255,255,255,0.1);
}

.tools-catalog-note {
  margin-top: var(--space-6);
  font-size: 0.75rem;
  color: rgba(245,245,247,0.35);
  line-height: 1.6;
  text-align: center;
}
.tools-catalog-note code {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  color: rgba(245,245,247,0.55);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 640px) {
  .tools-catalog-controls { flex-direction: column; align-items: stretch; }
  .tools-search-wrap { max-width: none; }
  .tools-legend { justify-content: flex-start; }
}

/* ── Mobile-first touch & small-screen polish ── */
@media (max-width: 768px) {
  body.tools-page .orb1,
  body.tools-page .orb2,
  body.tool-page .orb1,
  body.tool-page .orb2 {
    opacity: 0.5;
  }

  .tools-hero {
    padding: calc(var(--nav-h) + 40px) 20px 32px;
  }
  .tools-hero .hero-sub {
    font-size: var(--text-sm);
    padding: 0 4px;
  }
  .tools-hero .hero-cta {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
  .tools-hero .hero-cta .btn {
    justify-content: center;
    width: 100%;
    min-height: 48px;
  }

  .tools-catalog-section {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: max(48px, env(safe-area-inset-bottom));
  }
  .tools-catalog-head .section-title {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  /* 16px prevents iOS input zoom */
  .tools-search {
    font-size: 16px;
    padding: 13px 16px;
    min-height: 48px;
  }

  .tools-filter-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .tools-filter-scroll {
    min-width: 0;
    max-width: 100%;
    margin: 0 -16px;
    padding: 0 16px 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tools-filter-scroll::-webkit-scrollbar { display: none; }
  .tools-filter-bar {
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
    padding-bottom: 2px;
  }
  .tool-filter-btn {
    flex-shrink: 0;
    min-height: 40px;
    padding: 10px 16px;
  }
  .tools-live-toggle {
    justify-content: center;
    min-height: 44px;
    padding: 8px 0;
  }

  .tool-cat-row-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .tool-pill-grid {
    flex-direction: column;
    gap: 8px;
  }
  .tool-pill {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    -webkit-tap-highlight-color: transparent;
  }
  .tool-pill-desc {
    font-size: 0.8125rem;
  }

  .tools-catalog-note {
    text-align: left;
    padding: 0 4px;
  }
  .tools-catalog-note code {
    word-break: break-all;
  }

  /* Individual tool pages */
  .tool-workspace {
    padding: calc(var(--nav-h) + 32px) 16px max(48px, env(safe-area-inset-bottom));
  }
  .tool-form {
    padding: 16px;
    border-radius: 14px;
  }
  .tool-field textarea {
    font-size: 16px;
    min-height: 120px;
    padding: 12px 14px;
  }
  .tool-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .tool-option span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 0.8125rem;
    text-align: center;
  }
  .tool-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .tool-actions .btn-primary {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }
  .tool-limit-note {
    text-align: center;
  }
  .tool-result-head {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
  }
  .tool-result-head h2 {
    flex: 1;
    min-width: 0;
  }
  .tool-copy-btn {
    min-height: 44px;
    min-width: 72px;
    padding: 10px 16px;
    font-size: var(--text-sm);
  }
  .tool-result-body {
    padding: 16px 14px;
    font-size: 0.9375rem;
  }
  .tool-more-links {
    flex-direction: column;
    align-items: stretch;
  }
  .tool-more-links a {
    text-align: center;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 380px) {
  .tool-options {
    grid-template-columns: 1fr;
  }
}

@media (hover: none) {
  .tool-pill-live-link:hover {
    transform: none;
  }
}

/* ── Individual tool page — unique color per tool ── */
.tool-page { --accent: #a78bfa; --accent2: #22d3ee; --accent3: #c4b5fd; --bg: #050510; --bg-deep: #03030a; }

/* Finance */
.tool-page--finance,
.tool-page[data-category="finance"] { --accent: #10b981; --accent2: #34d399; --accent3: #6ee7b7; --bg: #030a07; --bg-deep: #020604; }
.tool-page[data-tool-id="budget-explainer"] { --accent: #059669; --accent2: #2dd4bf; --accent3: #34d399; }
.tool-page[data-tool-id="expense-summarizer"] { --accent: #14b8a6; --accent2: #fbbf24; --accent3: #5eead4; }
.tool-page[data-tool-id="invoice-drafter"] { --accent: #22c55e; --accent2: #38bdf8; --accent3: #4ade80; }

/* Healthcare */
.tool-page--healthcare,
.tool-page[data-category="healthcare"] { --accent: #2dd4bf; --accent2: #67e8f9; --accent3: #99f6e4; --bg: #030a0a; --bg-deep: #020606; }
.tool-page[data-tool-id="patient-letter-writer"] { --accent: #14b8a6; --accent2: #a5b4fc; --accent3: #5eead4; }

/* HR */
.tool-page--hr,
.tool-page[data-category="hr"] { --accent: #f43f5e; --accent2: #fb7185; --accent3: #fda4af; --bg: #0c0507; --bg-deep: #060203; }
.tool-page[data-tool-id="cover-letter-generator"] { --accent: #e11d48; --accent2: #f472b6; --accent3: #fb7185; }
.tool-page[data-tool-id="feedback-writer"] { --accent: #f97316; --accent2: #f43f5e; --accent3: #fdba74; }
.tool-page[data-tool-id="jd-generator"] { --accent: #db2777; --accent2: #a78bfa; --accent3: #f472b6; }
.tool-page[data-tool-id="offer-letter-helper"] { --accent: #ea580c; --accent2: #e11d48; --accent3: #fb923c; }

/* Legal */
.tool-page--legal,
.tool-page[data-category="legal"] { --accent: #3b82f6; --accent2: #64748b; --accent3: #93c5fd; --bg: #04060c; --bg-deep: #02040a; }
.tool-page[data-tool-id="clause-simplifier"] { --accent: #2563eb; --accent2: #38bdf8; --accent3: #60a5fa; }
.tool-page[data-tool-id="contract-redliner"] { --accent: #1d4ed8; --accent2: #f87171; --accent3: #3b82f6; }
.tool-page[data-tool-id="legal-doc-scanner"] { --accent: #0ea5e9; --accent2: #6366f1; --accent3: #38bdf8; }
.tool-page[data-tool-id="nda-generator"] { --accent: #4f46e5; --accent2: #94a3b8; --accent3: #818cf8; }
.tool-page[data-tool-id="policy-summarizer"] { --accent: #0284c7; --accent2: #a78bfa; --accent3: #38bdf8; }

/* Marketing */
.tool-page--marketing,
.tool-page[data-category="marketing"] { --accent: #d946ef; --accent2: #f472b6; --accent3: #e879f9; --bg: #0a0410; --bg-deep: #050208; }
.tool-page[data-tool-id="ad-copy-writer"] { --accent: #c026d3; --accent2: #fb923c; --accent3: #e879f9; }
.tool-page[data-tool-id="email-subject-lines"] { --accent: #e879f9; --accent2: #22d3ee; --accent3: #f0abfc; }
.tool-page[data-tool-id="hashtag-suggester"] { --accent: #a21caf; --accent2: #fbbf24; --accent3: #d946ef; }

/* Ops */
.tool-page--ops,
.tool-page[data-category="ops"] { --accent: #f59e0b; --accent2: #fbbf24; --accent3: #fcd34d; --bg: #0c0802; --bg-deep: #060401; }
.tool-page[data-tool-id="meeting-recap"] { --accent: #d97706; --accent2: #22d3ee; --accent3: #fbbf24; }
.tool-page[data-tool-id="status-update-writer"] { --accent: #eab308; --accent2: #84cc16; --accent3: #facc15; }

/* Social */
.tool-page[data-category="social"],
.tool-page.excuse-page,
.tool-page.caption-page { --bg: #0c0410; --bg-deep: #060208; }
.tool-page.excuse-page { --accent: #f472b6; --accent2: #fb923c; --accent3: #fda4af; }
.tool-page.caption-page { --accent: #fbbf24; --accent2: #a78bfa; --accent3: #fde047; }
.tool-page[data-tool-id="excuse-generator"] { --accent: #ec4899; --accent2: #fb923c; --accent3: #f472b6; }
.tool-page[data-tool-id="caption-generator"] { --accent: #eab308; --accent2: #c084fc; --accent3: #fbbf24; }

/* Utility */
.tool-page--utility,
.tool-page[data-category="utility"] { --accent: #818cf8; --accent2: #22d3ee; --accent3: #a5b4fc; --bg: #050510; --bg-deep: #03030a; }
.tool-page.tone-rewriter-page,
.tool-page[data-tool-id="tone-rewriter"] { --accent: #6366f1; --accent2: #22d3ee; --accent3: #818cf8; }
.tool-page.apology-page,
.tool-page[data-tool-id="apology-writer"] { --accent: #34d399; --accent2: #60a5fa; --accent3: #6ee7b7; }
.tool-page.rent-agreement-page,
.tool-page[data-tool-id="rent-agreement-creator"] { --accent: #7c3aed; --accent2: #f59e0b; --accent3: #a78bfa; }

.tool-page .orb1 { width: 500px; height: 500px; top: -150px; right: -100px; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.tool-page .orb2 { width: 400px; height: 400px; bottom: 5%; left: -100px; background: color-mix(in srgb, var(--accent2) 8%, transparent); animation-delay: -7s; }

.tool-workspace {
  position: relative; z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 48px) clamp(20px, 4vw, 32px) clamp(64px, 8vw, 96px);
}

.tool-breadcrumb {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-bottom: var(--space-6);
}
.tool-breadcrumb a {
  color: var(--accent);
  text-decoration: none;
}
.tool-breadcrumb a:hover { text-decoration: underline; }

.tool-header {
  margin-bottom: var(--space-8);
}
.tool-header h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}
.tool-header p {
  color: var(--muted);
  line-height: var(--leading-relaxed);
  max-width: 52ch;
}

/* ── Showcase-style tool hero (utility & future nested tools) ── */
.tool-hero {
  margin-bottom: var(--space-8);
  text-align: center;
}
.tool-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  margin-bottom: var(--space-4);
}
.tool-hero-hook {
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  font-weight: 600;
  color: color-mix(in srgb, var(--accent) 75%, #fff);
  margin-bottom: var(--space-3);
  line-height: 1.4;
}
.tool-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
  margin-bottom: var(--space-4);
  background: linear-gradient(135deg, #fff 30%, color-mix(in srgb, var(--accent) 55%, #fff) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tool-hero-problem {
  font-size: var(--text-base);
  color: rgba(245,245,247,0.72);
  line-height: var(--leading-relaxed);
  max-width: 48ch;
  margin: 0 auto var(--space-3);
}
.tool-hero-desc {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: var(--leading-relaxed);
  max-width: 44ch;
  margin: 0 auto;
}
.tool-field-hint {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: rgba(245,245,247,0.4);
  line-height: 1.5;
}
.tool-page--utility.apology-page { --accent: #34d399; --accent2: #60a5fa; --accent3: #6ee7b7; }

.tool-auth-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text2);
}
.tool-auth-banner span:first-child { flex: 1; min-width: 200px; }
.tool-auth-signin {
  background: var(--accent);
  color: #0a0a0f;
  font-weight: 600;
  font-size: var(--text-xs);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  text-decoration: none;
  white-space: nowrap;
}
.tool-auth-signin:hover { opacity: 0.9; }
.tool-auth-dismiss {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
.tool-auth-dismiss:hover { color: var(--text); }

.tool-history-panel { margin-bottom: var(--space-4); }
.tool-history-toggle {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text2);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: var(--text-sm);
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.tool-history-toggle:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.tool-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.tool-history-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 10px 14px;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.tool-history-item:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: rgba(255,255,255,0.04); }
.tool-history-date { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.tool-history-preview { font-size: var(--text-xs); color: var(--text2); }

.tool-form {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  padding: clamp(20px, 4vw, 28px);
  margin-bottom: var(--space-6);
}

.tool-field {
  margin-bottom: var(--space-5);
}
.tool-field:last-of-type { margin-bottom: var(--space-6); }
.tool-field label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text2);
  margin-bottom: var(--space-2);
}

.tool-field textarea {
  width: 100%;
  min-height: 140px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  background: rgba(0,0,0,0.35);
  color: var(--text);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  resize: vertical;
  transition: border-color 0.2s;
}
.tool-field textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.tool-field textarea::placeholder { color: rgba(245,245,247,0.35); }

.tool-field input[type="text"] {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  background: rgba(0,0,0,0.35);
  color: var(--text);
  font-family: inherit;
  font-size: var(--text-base);
  transition: border-color 0.2s;
}
.tool-field input[type="text"]:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.tool-field input[type="text"]::placeholder { color: rgba(245,245,247,0.35); }

.tool-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 640px) {
  .tool-field-grid { grid-template-columns: 1fr; }
}

.tool-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tool-option {
  position: relative;
}
.tool-option input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.tool-option span {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.25);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}
.tool-option input:checked + span,
.tool-option span:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.tool-option input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tool-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.tool-actions .btn-primary {
  min-width: 140px;
}
.tool-actions .btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.tool-limit-note {
  font-size: var(--text-xs);
  color: rgba(245,245,247,0.4);
}

.tool-result {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  overflow: hidden;
  display: none;
}
.tool-result.visible { display: block; }

.tool-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.2);
}
.tool-model-note {
  margin-right: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.tool-result-head h2 {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text2);
  letter-spacing: 0.02em;
}
.tool-copy-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: var(--text2);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.tool-copy-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
}
.tool-copy-btn.copied {
  color: #34d399;
  border-color: rgba(52,211,153,0.3);
}

.tool-save-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: var(--text2);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.tool-save-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
}
.tool-save-btn.saved {
  color: #34d399;
  border-color: rgba(52,211,153,0.3);
  cursor: default;
}

.tool-result-actions { display: flex; gap: 8px; }

.tool-result-body del.diff-del {
  color: #fb7185;
  text-decoration: line-through;
  opacity: 0.7;
}
.tool-result-body ins.diff-ins {
  color: #34d399;
  text-decoration: none;
  background: rgba(52,211,153,0.12);
  border-radius: 3px;
}

.tool-result-body {
  padding: 20px 18px;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  white-space: pre-wrap;
  word-break: break-word;
}

.tool-error {
  margin-top: var(--space-4);
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(251,146,60,0.3);
  background: rgba(251,146,60,0.08);
  color: #fb923c;
  font-size: var(--text-sm);
  display: none;
}
.tool-error.visible { display: block; }

.tool-more {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}
.tool-more p {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-bottom: var(--space-4);
}
.tool-more-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.tool-more-links a {
  font-size: var(--text-sm);
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text2);
  text-decoration: none;
  transition: all 0.2s;
}
.tool-more-links a:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--text);
}

@media (max-width: 600px) {
  .tool-actions { flex-direction: column; align-items: stretch; }
  .tool-actions .btn-primary { width: 100%; }
}

/* ── Two-world hub v2: gate / worlds / wayfinding (index page only) ── */
body.tools-page { --world-hue: #a78bfa; }
body.tools-page[data-world="kitix"] { --world-hue: #22d3ee; }

/* screen visibility (only when JS has stamped data-world; no-JS shows everything) */
body.tools-page[data-world="genix"] .tools-hero,
body.tools-page[data-world="genix"] .world-doors,
body.tools-page[data-world="genix"] .gate-advisor-hint,
body.tools-page[data-world="kitix"] .tools-hero,
body.tools-page[data-world="kitix"] .world-doors,
body.tools-page[data-world="kitix"] .gate-advisor-hint { display: none; }
body.tools-page[data-world="gate"] #catalog,
body.tools-page[data-world="kitix"] #catalog { display: none; }

@keyframes worldArrive { from { opacity: 0; transform: translateY(26px) scale(.985); } to { opacity: 1; transform: none; } }
body.tools-page[data-world="gate"] .world-doors,
body.tools-page[data-world="genix"] #catalog,
body.tools-page[data-world="kitix"] #kitixWorld { animation: worldArrive .7s cubic-bezier(.22,1,.36,1) both; }

@keyframes cellPop { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
#toolsCatalog .tool-cat-row { animation: cellPop .55s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 55ms); }

/* upgraded doors */
.world-doors { max-width: 940px; perspective: 1200px; }
.world-doors .tool-world-card {
  --d: #8b5cf6;
  padding: 30px 28px 24px; border-radius: 22px; gap: 14px;
  background: linear-gradient(160deg, color-mix(in oklab, var(--d) 7%, transparent), rgba(255,255,255,0.012) 55%);
}
.world-doors .door-kitix { --d: #22d3ee; }
.world-doors .tool-world-card:hover, .world-doors .tool-world-card:focus-visible {
  transform: translateY(-7px) rotateX(1.6deg);
  border-color: color-mix(in oklab, var(--d) 55%, rgba(255,255,255,0.13));
  outline: none;
}
.world-doors .tool-world-icon {
  width: 50px; height: 50px; border-radius: 15px;
  background: color-mix(in oklab, var(--d) 16%, transparent);
  border-color: color-mix(in oklab, var(--d) 40%, transparent);
}
.world-doors .tool-world-icon svg { width: 25px; height: 25px; fill: var(--d); }
.tool-world-role {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: #8b5cf6;
}
.world-doors .door-kitix .tool-world-role { color: #22d3ee; }
.world-doors .tool-world-body h2 { font-size: 1.5rem; }
.world-doors .tool-world-body p { font-size: 0.875rem; max-width: 34ch; color: rgba(245,245,247,0.72); }
.tool-world-meta { display: flex; gap: 14px; font-size: 0.72rem; color: rgba(245,245,247,0.5); font-variant-numeric: tabular-nums; }
.tool-world-meta b { color: rgba(245,245,247,0.8); }
.world-doors .tool-world-cta { color: var(--d); display: inline-flex; align-items: center; gap: 6px; }

.gate-advisor-hint {
  position: relative; z-index: 1; text-align: center; margin: 4px auto 40px; max-width: 640px;
  font-size: 0.8125rem; color: rgba(245,245,247,0.5); padding: 0 24px;
}
.gate-advisor-hint button {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: rgba(245,245,247,0.85); font-weight: 600; text-decoration: underline;
  text-decoration-color: rgba(34,211,238,0.5); text-underline-offset: 3px;
}
.gate-advisor-hint button:hover, .gate-advisor-hint button:focus-visible { color: #22d3ee; outline: none; }

/* wayfinding: breadcrumb + world switcher */
.tools-wayfinding {
  position: relative; z-index: 1; max-width: 860px; margin: 0 auto;
  padding: calc(var(--nav-h) + 28px) clamp(20px, 4vw, 52px) 18px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.tools-wayfinding[hidden] { display: none; }
.tools-back {
  background: none; border: 0; cursor: pointer; padding: 2px 6px;
  color: rgba(245,245,247,0.5); font-size: 1rem; transition: color .2s;
}
.tools-back:hover, .tools-back:focus-visible { color: #f4f4f5; outline: none; }
.tools-crumbs { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,245,247,0.5); }
.tools-crumbs b { color: var(--world-hue); font-weight: 600; }
.tools-crumbs .sep { margin: 0 4px; opacity: .5; }
.tools-switcher {
  display: inline-flex; margin-left: auto; gap: 2px; padding: 4px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 999px;
}
.tools-switcher button {
  font-family: inherit; font-size: 0.75rem; font-weight: 600; color: rgba(245,245,247,0.5);
  background: none; border: 0; cursor: pointer; border-radius: 999px; padding: 7px 16px;
  transition: color .2s, background .2s;
}
.tools-switcher button[aria-pressed="true"] { color: #04050c; background: var(--world-hue); }
.tools-switcher button:not([aria-pressed="true"]):hover { color: #f4f4f5; }

/* kitix world grid */
.tools-kitix-world .eyebrow { color: #22d3ee; }
.kitix-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 14px; }
.kitix-cell {
  position: relative; display: block; text-decoration: none; border-radius: 16px; padding: 20px 18px 18px;
  background: rgba(255,255,255,0.022); border: 1px solid rgba(255,255,255,0.09);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .3s;
  animation: cellPop .55s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 45ms);
}
.kitix-cell:hover, .kitix-cell:focus-visible {
  transform: translateY(-4px); border-color: color-mix(in oklab, #22d3ee 55%, rgba(255,255,255,0.1)); outline: none;
}
.kitix-cell h3 { font-family: var(--font-display); font-size: 1.02rem; color: #f4f4f5; margin: 0 0 4px; }
.kitix-cell p { font-size: 0.8rem; color: rgba(245,245,247,0.6); line-height: 1.5; margin: 0; }
.kitix-live {
  display: inline-block; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #052a27; background: #22d3ee; border-radius: 5px; padding: 2px 7px; margin-bottom: 9px;
}
.kitix-soon { background: none; color: rgba(245,245,247,0.5); border: 1px solid rgba(255,255,255,0.14); }
.kitix-cell-soon { opacity: .75; cursor: default; }

/* cross-link strip */
.tools-crosslinks {
  margin-top: 34px; border-radius: 16px; padding: 18px 22px;
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  background: linear-gradient(120deg, color-mix(in oklab, var(--world-hue) 6%, transparent), rgba(255,255,255,0.02) 60%);
  border: 1px solid rgba(255,255,255,0.1);
}
.tools-crosslinks-k {
  font-family: var(--font-display); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--world-hue);
}
.tools-crosslinks-links { display: flex; gap: 10px; flex-wrap: wrap; }
.tools-crosslink-chip {
  font-family: inherit; font-size: 0.8rem; color: rgba(245,245,247,0.72); text-decoration: none;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 999px;
  padding: 7px 15px; cursor: pointer; transition: border-color .25s, color .25s;
}
.tools-crosslink-chip:hover, .tools-crosslink-chip:focus-visible {
  border-color: var(--world-hue); color: #f4f4f5; outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .world-doors .tool-world-card, #toolsCatalog .tool-cat-row, .kitix-cell,
  body.tools-page[data-world] .world-doors, body.tools-page[data-world] #catalog,
  body.tools-page[data-world] #kitixWorld { animation: none !important; transition: none !important; }
}