:root {
  --tfa-bg: #0f1419;
  --tfa-panel: #1a1f2e;
  --tfa-panel-soft: rgba(26, 31, 46, 0.88);
  --tfa-border: rgba(201, 169, 97, 0.24);
  --tfa-border-strong: rgba(201, 169, 97, 0.45);
  --tfa-accent: #c9a961;
  --tfa-text: #f5f1ed;
  --tfa-muted: #d4c5b9;
  --tfa-danger: #ef4444;
  --tfa-success: #22c55e;
  --tfa-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

#deployment-enhancement-root {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background:
    radial-gradient(circle at top right, rgba(201, 169, 97, 0.18), transparent 28%),
    linear-gradient(180deg, #10151c 0%, #0f1419 100%);
  color: var(--tfa-text);
  overflow: auto;
}

#deployment-enhancement-root *,
#deployment-enhancement-root *::before,
#deployment-enhancement-root *::after {
  box-sizing: border-box;
}

.tfa-app {
  min-height: 100vh;
  color: var(--tfa-text);
  line-height: 1.5;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.tfa-shell {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 280px minmax(0, 1fr);
}

.tfa-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 28px 20px;
  border-right: 1px solid var(--tfa-border);
  background: rgba(12, 17, 24, 0.92);
  backdrop-filter: blur(12px);
}

.tfa-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 28px;
}

.tfa-brand-lockup {
  display: grid;
  gap: 4px;
}

.tfa-brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tfa-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(201, 169, 97, 0.18), rgba(201, 169, 97, 0.06));
  border: 1px solid var(--tfa-border-strong);
  color: var(--tfa-accent);
  font-family: "Bodoni Moda", serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.08em;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.tfa-brand-wordmark {
  font-family: "Bodoni Moda", serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tfa-text);
}

.tfa-brand-title {
  font-family: "Bodoni Moda", serif;
  font-size: 1.3rem;
  color: var(--tfa-accent);
}

.tfa-brand-subtitle {
  font-size: 0.85rem;
  color: var(--tfa-muted);
}

.tfa-nav {
  display: grid;
  gap: 10px;
}

.tfa-nav button {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 14px 16px;
  text-align: left;
  background: transparent;
  color: var(--tfa-muted);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tfa-nav button:hover,
.tfa-nav button.is-active {
  border-color: var(--tfa-border-strong);
  background: rgba(201, 169, 97, 0.14);
  color: var(--tfa-text);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.tfa-main {
  padding: 28px;
}

.tfa-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.tfa-topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.tfa-card,
.tfa-panel {
  border: 1px solid var(--tfa-border);
  border-radius: 20px;
  background: var(--tfa-panel-soft);
  backdrop-filter: blur(12px);
  box-shadow: var(--tfa-shadow);
}

.tfa-card {
  padding: 22px;
}

.tfa-grid {
  display: grid;
  gap: 20px;
}

.tfa-grid.metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tfa-grid.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tfa-grid.docs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tfa-page-title {
  font-family: "Bodoni Moda", serif;
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0 0 8px;
}

.tfa-page-subtitle {
  margin: 0;
  color: var(--tfa-muted);
}

.tfa-metric-label {
  color: var(--tfa-muted);
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.tfa-metric-value {
  font-size: 1.9rem;
  font-weight: 700;
}

.tfa-metric-change {
  margin-top: 10px;
  color: var(--tfa-accent);
  font-size: 0.9rem;
  font-weight: 600;
}

.tfa-section-title {
  margin: 0 0 16px;
  color: var(--tfa-accent);
  font-family: "Bodoni Moda", serif;
  font-size: 1.5rem;
}

.tfa-list {
  display: grid;
  gap: 12px;
}

.tfa-list-item,
.tfa-table-card {
  border: 1px solid rgba(201, 169, 97, 0.14);
  border-radius: 16px;
  padding: 16px;
  background: rgba(15, 20, 25, 0.56);
}

.tfa-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.tfa-muted {
  color: var(--tfa-muted);
}

.tfa-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(201, 169, 97, 0.12);
  color: var(--tfa-accent);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tfa-button,
.tfa-button-secondary,
.tfa-button-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid transparent;
  padding: 12px 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.tfa-button {
  background: var(--tfa-accent);
  color: #0f1419;
}

.tfa-button:hover {
  box-shadow: 0 0 24px rgba(201, 169, 97, 0.3);
}

.tfa-button-secondary {
  background: rgba(201, 169, 97, 0.08);
  color: var(--tfa-accent);
  border-color: var(--tfa-border-strong);
}

.tfa-button-danger {
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.25);
}

.tfa-form-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tfa-field {
  display: grid;
  gap: 8px;
}

.tfa-field.full {
  grid-column: 1 / -1;
}

.tfa-field label {
  color: var(--tfa-muted);
  font-size: 0.92rem;
  font-weight: 600;
}

.tfa-field input,
.tfa-field textarea,
.tfa-field select {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(201, 169, 97, 0.22);
  background: rgba(8, 12, 18, 0.9);
  color: var(--tfa-text);
  padding: 12px 14px;
  font: inherit;
}

.tfa-field textarea {
  min-height: 120px;
  resize: vertical;
}

.tfa-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.tfa-auth-card {
  width: min(520px, 100%);
  padding: 30px;
}

.tfa-auth-brand {
  margin-bottom: 24px;
}

.tfa-auth-brand .tfa-brand-lockup {
  justify-items: center;
  text-align: center;
}

.tfa-auth-brand .tfa-brand-row {
  justify-content: center;
}

.tfa-auth-brand .tfa-brand-mark {
  width: 88px;
  height: 88px;
  border-radius: 24px;
  font-size: 3rem;
}

.tfa-auth-brand .tfa-brand-wordmark {
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
}

.tfa-auth-card h1 {
  font-family: "Bodoni Moda", serif;
  margin: 0 0 10px;
  color: var(--tfa-accent);
  font-size: 2.2rem;
}

.tfa-auth-card p {
  margin: 0 0 24px;
  color: var(--tfa-muted);
}

.tfa-auth-hint {
  margin-top: 18px;
  font-size: 0.9rem;
  color: var(--tfa-muted);
}

.tfa-status {
  margin-bottom: 18px;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 600;
}

.tfa-status.error {
  background: rgba(239, 68, 68, 0.1);
  color: #fecaca;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.tfa-status.success {
  background: rgba(34, 197, 94, 0.1);
  color: #bbf7d0;
  border: 1px solid rgba(34, 197, 94, 0.22);
}

.tfa-table {
  width: 100%;
  border-collapse: collapse;
}

.tfa-table-card {
  overflow-x: auto;
}

.tfa-table th,
.tfa-table td {
  padding: 12px 10px;
  border-bottom: 1px solid rgba(201, 169, 97, 0.12);
  text-align: left;
  vertical-align: top;
}

.tfa-table th {
  color: var(--tfa-accent);
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tfa-table td {
  color: var(--tfa-text);
}

.tfa-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tfa-empty {
  padding: 18px;
  border-radius: 14px;
  background: rgba(15, 20, 25, 0.5);
  color: var(--tfa-muted);
  border: 1px dashed rgba(201, 169, 97, 0.2);
}

.tfa-mobile-toggle {
  display: none;
}

/* ---------------------------------------------------------------
   Mobile QA fixes (marketing site) — added after screenshot review
   Targets the two elements by their exact source location so
   nothing else on the site is affected.
   1) Hero H1 ("Timeless Stewardship. Enduring Value.") was breaking
      mid-word on phones because text-6xl (60px) is too wide for the
      viewport at that font weight.
   2) Fund stat row (Fund Size / Structure / Timeline) was hard-coded
      to grid-cols-3 with no mobile override, forcing values like
      "Cayman SPC" to wrap letter-by-letter.
   ------------------------------------------------------------- */
@media (max-width: 767px) {
  [data-loc="client/src/pages/Home.tsx:81"] {
    font-size: clamp(1.9rem, 8vw, 2.75rem) !important;
    line-height: 1.15 !important;
  }

  [data-loc="client/src/pages/Home.tsx:107"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 1080px) {
  .tfa-shell {
    grid-template-columns: 1fr;
  }

  .tfa-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(320px, 84vw);
    transform: translateX(-105%);
    transition: transform 0.2s ease;
    z-index: 3;
  }

  .tfa-shell.sidebar-open .tfa-sidebar {
    transform: translateX(0);
  }

  .tfa-mobile-toggle {
    display: inline-flex;
  }

  .tfa-main {
    padding: 20px;
  }

  .tfa-grid.metrics,
  .tfa-grid.two-col,
  .tfa-grid.docs,
  .tfa-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .tfa-brand {
    align-items: flex-start;
    flex-direction: column;
  }

  .tfa-brand-row {
    align-items: flex-start;
  }

  .tfa-brand-wordmark {
    font-size: 1rem;
  }

  .tfa-topbar,
  .tfa-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .tfa-main {
    padding: 16px;
  }

  .tfa-card,
  .tfa-panel,
  .tfa-auth-card {
    padding: 18px;
    border-radius: 16px;
  }

  .tfa-table {
    display: block;
    overflow-x: auto;
  }
}