@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Poppins:wght@400;500;600;700;800;900&display=swap');

:root {
  --tlg-white: #ffffff;
  --tlg-black: #000000;
  --tlg-soft-gray: #DBDCDB;
  --tlg-light-gray: #F4F4F4;
  --tlg-teal: #488178;
  --tlg-teal-deep: #3a685f;
  --tlg-teal-tint: #eaf0ee;
  --tlg-muted: #555759;
  --tlg-faint: #8b8d8e;
  --tlg-display: "Poppins", "Visby CF", system-ui, sans-serif;
  --tlg-body: "Montserrat", system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--tlg-light-gray) !important;
  color: var(--tlg-black) !important;
  font-family: var(--tlg-body) !important;
}

header,
.header {
  min-height: 82px !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 16px clamp(20px, 5vw, 64px) !important;
  background: var(--tlg-white) !important;
  border-bottom: 1px solid var(--tlg-soft-gray) !important;
  box-shadow: none !important;
}

header img,
.header-logo,
.logo-svg img {
  width: clamp(178px, 16vw, 240px) !important;
  max-height: 42px !important;
  height: auto !important;
  object-fit: contain !important;
}

.header-right,
.header-actions {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.hub-link,
.version-tag,
.header-tag {
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 14px !important;
  border: 1px solid var(--tlg-soft-gray) !important;
  border-radius: 999px !important;
  background: var(--tlg-white) !important;
  color: var(--tlg-black) !important;
  font-family: var(--tlg-body) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background 0.22s cubic-bezier(.22,.61,.36,1), border-color 0.22s cubic-bezier(.22,.61,.36,1), color 0.22s cubic-bezier(.22,.61,.36,1), transform 0.22s cubic-bezier(.22,.61,.36,1) !important;
}

.hub-link:hover {
  background: var(--tlg-teal-tint) !important;
  border-color: var(--tlg-teal) !important;
  color: var(--tlg-teal) !important;
  transform: translateY(-1px) !important;
}

.main,
main {
  width: min(1040px, calc(100% - 40px)) !important;
  margin: 0 auto !important;
  padding: clamp(34px, 5vw, 54px) 0 5rem !important;
}

main > section:first-child,
.main > section:first-child,
.placeholder,
.empty-state,
.nl-empty {
  text-align: center !important;
}

h1,
.empty-state .eg-title,
.placeholder-headline,
.loading-title,
.nl-empty h3,
.results-title,
.nl-preview-title,
.controls-label,
.plat-label,
.stat-num,
.stat-pill .num,
.total-block .total-amount,
.results-meta-block .rate,
.hook-text {
  color: var(--tlg-black) !important;
  font-family: var(--tlg-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.02 !important;
  text-transform: none !important;
}

h1 {
  max-width: 14ch !important;
  margin: 8px auto 0 !important;
  font-size: clamp(3rem, 6vw, 5.3rem) !important;
  text-align: center !important;
}

p {
  color: var(--tlg-muted) !important;
  font-family: var(--tlg-body) !important;
}

.eyebrow,
header span,
.section-label,
.stat-label,
.field-label,
.results-title,
.results-date,
.results-meta,
.angles-label,
.controls-label,
.plat-label,
.rec-section-label,
.version-tag,
.header-tag,
label {
  color: var(--tlg-teal) !important;
  font-family: var(--tlg-display) !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

section,
.card,
.input-card,
.controls,
.nl-controls,
.content-card,
.strategy-banner,
.stats-row,
.placeholder,
.empty-state,
.nl-empty,
.nl-preview-wrap,
.output,
.scenario-box,
.rec-card,
.disclaimer,
.week-note {
  background: var(--tlg-white) !important;
  border: 1px solid var(--tlg-soft-gray) !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
}

.card-top,
.nl-preview-bar,
.why-box,
.pulled-wrap,
.sum-cell,
.scenario-box,
.rec-caveats {
  background: var(--tlg-light-gray) !important;
  border-color: var(--tlg-soft-gray) !important;
}

input,
textarea,
select,
.topic-input,
.nl-select,
.dp-input {
  background: var(--tlg-white) !important;
  border: 1px solid var(--tlg-soft-gray) !important;
  border-radius: 4px !important;
  color: var(--tlg-black) !important;
  font-family: var(--tlg-body) !important;
}

input:focus,
textarea:focus,
select:focus,
.topic-input:focus,
.dp-input:focus {
  border-color: var(--tlg-teal) !important;
  box-shadow: 0 0 0 3px rgba(72, 129, 120, 0.12) !important;
  outline: none !important;
}

button,
.gen-btn,
.nl-btn,
.btn-generate,
.btn-reset,
.analyze-btn,
.lookup-btn {
  border: 2px solid var(--tlg-teal) !important;
  border-radius: 999px !important;
  background: var(--tlg-teal) !important;
  color: var(--tlg-white) !important;
  font-family: var(--tlg-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  transition: background 0.22s cubic-bezier(.22,.61,.36,1), border-color 0.22s cubic-bezier(.22,.61,.36,1), color 0.22s cubic-bezier(.22,.61,.36,1), transform 0.22s cubic-bezier(.22,.61,.36,1) !important;
}

button:hover,
.gen-btn:hover,
.nl-btn:hover,
.btn-generate:hover,
.btn-reset:hover,
.analyze-btn:hover,
.lookup-btn:hover {
  background: var(--tlg-teal-deep) !important;
  border-color: var(--tlg-teal-deep) !important;
  transform: translateY(-1px) !important;
}

.small-btn,
.clear-btn,
.nl-out-btn,
.card-copy-btn,
.chip,
.plat-btn,
.tab-btn {
  background: var(--tlg-white) !important;
  border: 1px solid var(--tlg-soft-gray) !important;
  border-radius: 999px !important;
  color: var(--tlg-muted) !important;
  font-family: var(--tlg-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  box-shadow: none !important;
}

.small-btn:hover,
.clear-btn:hover,
.nl-out-btn:hover,
.card-copy-btn:hover,
.chip:hover,
.chip.active,
.plat-btn:hover,
.plat-btn.on,
.tab-btn:hover,
.tab-btn.active {
  background: var(--tlg-teal-tint) !important;
  border-color: var(--tlg-teal) !important;
  color: var(--tlg-teal) !important;
}

.tab-btn.active {
  border-bottom-color: var(--tlg-teal) !important;
}

.tabs,
.results-header {
  border-bottom-color: var(--tlg-soft-gray) !important;
}

.stat-cell,
.stat-pill,
.bk-cell {
  background: var(--tlg-white) !important;
  border-color: var(--tlg-soft-gray) !important;
}

.stat-num,
.stat-pill .num,
.total-block .total-amount {
  font-size: clamp(2rem, 4vw, 3.25rem) !important;
}

.chip.active,
.rec-card.best,
.rec-card.best .fit-fill,
.fit-fill,
input[type="range"] {
  accent-color: var(--tlg-teal) !important;
}

.chip.active {
  background: var(--tlg-teal) !important;
  border-color: var(--tlg-teal) !important;
  color: var(--tlg-white) !important;
}

.rec-card.best {
  border-left-color: var(--tlg-teal) !important;
}

.best-badge,
.rec-card.best .fit-fill,
.fit-fill,
.loading-dot {
  background: var(--tlg-teal) !important;
}

.hash-text,
.rec-card.best .rec-rank,
.fit-pct,
.rec-section-label {
  color: var(--tlg-teal) !important;
}

@media (max-width: 760px) {
  header,
  .header {
    flex-wrap: wrap !important;
    padding: 16px 14px !important;
  }

  header img,
  .header-logo,
  .logo-svg img {
    width: 176px !important;
  }

  .main,
  main {
    width: min(100% - 24px, 1040px) !important;
  }

  h1 {
    font-size: clamp(3rem, 14vw, 4.7rem) !important;
  }
}