/* ==========================================================================
   Catalyst Finedge — design system
   Hand-written, no framework, no build step. Read top to bottom.

   Palette is taken from the logo: vermilion red #D81A21, orange #EE7A1E and
   the amber #F8C838 of the FinEdge banner. Neutrals are warm-biased to sit
   with them — a cool grey next to this red looks like an accident.

   ONE RULE MATTERS MOST HERE. The brand colour is red, and in finance red
   already means loss, and in every interface red already means error. Three
   meanings on one hue is how a user reads "your investment fell" off a
   button. So:

     --accent   brand red. Buttons, links, the logo. Identity ONLY.
     --bad      a deep maroon, clearly darker and less saturated. Errors only,
                and never colour alone — always an icon or the word "Error".
     --ok       green. Confirmations.
     --warn     the brand orange family.

   Performance figures are not displayed anywhere on this site (an ARN holder
   may not publish scheme performance commentary), so no red-for-loss case
   arises today. If that ever changes, do not reuse --accent for it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   Every colour is declared here in the bare :root first, then redefined for
   dark. Never style a component with a raw hex — always a token — or the
   two themes drift apart.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Surfaces — warm, to sit with the logo's red and amber. */
  --paper:        #FDFAF6;
  --surface:      #FFFFFF;
  --surface-2:    #F8F1E8;
  --surface-sunk: #F3EADE;

  /* Ink — warm near-black, not a cool grey ramp. */
  --ink:    #1F1614;
  --ink-2:  #5E504A;
  --ink-3:  #8C7C74;

  /* Lines */
  --line:   #EADFD2;
  --line-2: #D8C9B9;

  /* Brand — sampled from the logo. Identity only. */
  --accent:       #D81A21;
  --accent-hover: #B2141A;
  --accent-soft:  #FCE9E7;
  --on-accent:    #FFFFFF;

  /* The logo's orange and amber. Emphasis and the FinEdge banner motif.
     Never a second call-to-action colour. */
  --orange:      #EE7A1E;
  --orange-soft: #FDEEDD;
  --amber:       #F8C838;

  /* Semantic — deliberately NOT the brand red. See the note above. */
  --ok:        #2E7D32;
  --ok-soft:   #E6F2E7;
  --warn:      #B4690E;
  --warn-soft: #FCF0DE;
  --bad:       #8E1518;
  --bad-soft:  #F9E7E6;

  --focus: #D81A21;

  /* Type */
  --font-display: Archivo, "Segoe UI", system-ui, sans-serif;
  --font-body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-ui:      Archivo, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Scale — 1.25 major third, rounded to whole pixels */
  --t-xs:   12px;
  --t-sm:   14px;
  --t-base: 17px;
  --t-md:   19px;
  --t-lg:   24px;
  --t-xl:   30px;
  --t-2xl:  38px;
  --t-3xl:  48px;

  /* Spacing — 4px base */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;

  --radius:    3px;
  --radius-lg: 6px;

  --shadow:    0 1px 2px rgba(60, 34, 26, .06), 0 8px 24px -14px rgba(60, 34, 26, .18);
  --shadow-lg: 0 2px 4px rgba(60, 34, 26, .07), 0 16px 40px -20px rgba(60, 34, 26, .26);

  --measure: 66ch;
  --page-max: 1120px;
}

/* Dark. Guarded so an explicit light choice still wins over a dark OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #17110F;
    --surface:      #201815;
    --surface-2:    #2A201B;
    --surface-sunk: #120D0C;

    --ink:   #F6EEE8;
    --ink-2: #B7A79D;
    --ink-3: #8B7A71;

    --line:   #352A24;
    --line-2: #48392F;

    /* The logo red is too dark to read on this ground — lifted, not inverted,
       so it still reads as the same brand colour. */
    --accent:       #FF5A50;
    --accent-hover: #FF7A72;
    --accent-soft:  #3A1512;
    --on-accent:    #17110F;

    --orange:      #F79A3E;
    --orange-soft: #34220F;
    --amber:       #F8C838;

    --ok:        #5BC264;
    --ok-soft:   #142515;
    --warn:      #E0A73E;
    --warn-soft: #2E2411;
    --bad:       #FF9A90;
    --bad-soft:  #331512;

    --focus: #FF5A50;

    --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -14px rgba(0, 0, 0, .6);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .5), 0 16px 40px -20px rgba(0, 0, 0, .7);
  }
}

/* The toggle, so it also wins in the other direction. */
:root[data-theme="dark"] {
  --paper:        #17110F;
  --surface:      #201815;
  --surface-2:    #2A201B;
  --surface-sunk: #120D0C;

  --ink:   #F6EEE8;
  --ink-2: #B7A79D;
  --ink-3: #8B7A71;

  --line:   #352A24;
  --line-2: #48392F;

  --accent:       #FF5A50;
  --accent-hover: #FF7A72;
  --accent-soft:  #3A1512;
  --on-accent:    #17110F;

  --orange:      #F79A3E;
  --orange-soft: #34220F;
  --amber:       #F8C838;

  --ok:        #5BC264;
  --ok-soft:   #142515;
  --warn:      #E0A73E;
  --warn-soft: #2E2411;
  --bad:       #FF9A90;
  --bad-soft:  #331512;

  --focus: #FF5A50;

  --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -14px rgba(0, 0, 0, .6);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .5), 0 16px 40px -20px rgba(0, 0, 0, .7);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

:where(a):focus-visible,
:where(button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0 0 var(--s-4);
  color: var(--ink);
}

h1 { font-size: clamp(var(--t-2xl), 5.5vw, var(--t-3xl)); }
h2 { font-size: clamp(var(--t-xl), 4vw, var(--t-2xl)); }
h3 { font-size: var(--t-lg); letter-spacing: -.012em; }
h4 { font-size: var(--t-md); letter-spacing: -.008em; font-weight: 600; }

p { margin: 0 0 var(--s-4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

strong { font-weight: 600; color: var(--ink); }

.lede {
  font-size: var(--t-md);
  color: var(--ink-2);
  max-width: 58ch;
}

/* Small uppercase label. Used for section eyebrows. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s-3);
}

/* Every figure, NAV, rupee amount and percentage on this site uses this, so
   digits line up in columns and don't jitter as values change. */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.muted { color: var(--ink-2); }
.small { font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   4. Layout
   Side gutter is set once, here. Vertical padding uses padding-block so it
   can never zero out the sides.
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
@media (max-width: 600px) { .wrap { padding-inline: var(--s-4); } }

.section { padding-block: var(--s-9); }
.section--tight { padding-block: var(--s-7); }
.section--sunk { background: var(--surface-2); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
}

.section-head { margin-bottom: var(--s-6); }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: 68px;
}

.brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; }

/* The logo is a fixed-ratio lockup (4.12:1). Height is the control; width
   follows. Do not set both, and do not squash it to fit. */
.brand__logo { height: 42px; width: auto; }
@media (max-width: 600px) { .brand__logo { height: 34px; } }

/* The logo is full-colour artwork on a light ground. On the dark theme the
   red mark still reads, but the near-black wordmark does not — so the whole
   lockup sits on its own light plate rather than being recoloured, which
   would misrepresent the brand. */
:root[data-theme="dark"] .brand__logo,
:root[data-theme="dark"] .footer-logo {
  background: #FFFFFF;
  padding: 5px 9px;
  border-radius: var(--radius);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand__logo,
  :root:not([data-theme="light"]) .footer-logo {
    background: #FFFFFF;
    padding: 5px 9px;
    border-radius: var(--radius);
  }
}

.footer-logo { height: 54px; width: auto; margin-bottom: var(--s-4); }

/* The amber-to-orange banner under "FinEdge" in the logo. Reused sparingly
   as a section motif so the identity carries through the page rather than
   sitting only in the header. */
.banner-rule {
  height: 5px;
  width: 72px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--amber) 0%, var(--orange) 100%);
  margin-bottom: var(--s-4);
}

/* The Sanskrit line from the logo lockup. */
.tagline-sa {
  font-size: var(--t-md);
  color: var(--accent);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.7;
}

.site-nav { margin-left: auto; }
.site-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  margin: 0;
  padding: 0;
}
.site-nav a {
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding-block: var(--s-2);
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  cursor: pointer;
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: var(--s-4) var(--s-5) var(--s-5);
  }
  .site-nav[data-open="true"] { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav a {
    display: block;
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--t-base);
  }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--line); color: var(--accent); }
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1;
  padding: 13px var(--s-5);
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink-3); color: var(--ink); }

.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* --------------------------------------------------------------------------
   7. Hero
   Sized to its content, not the viewport — a 100vh opener would push the
   page itself out of the first frame.
   -------------------------------------------------------------------------- */
.hero { padding-block: var(--s-9) var(--s-8); }
.hero h1 { max-width: 18ch; }
.hero .lede { margin-top: var(--s-5); }
.hero .btn-row { margin-top: var(--s-6); }

.hero__note {
  margin-top: var(--s-5);
  font-size: var(--t-sm);
  color: var(--ink-3);
  max-width: 52ch;
}

/* --------------------------------------------------------------------------
   8. Cards and panels
   Not everything is a card. Border/fill/radius each say "separate object" —
   spend them by role rather than stamping every block.
   -------------------------------------------------------------------------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-5);
}

.panel--raised { box-shadow: var(--shadow); }

/* A numbered step. The numbering is real here — the process IS a sequence. */
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: start; }
.step__n {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: grid;
  place-content: center;
  flex: none;
}
.step h3 { font-size: var(--t-md); margin-bottom: var(--s-2); }
.step p { font-size: var(--t-sm); color: var(--ink-2); margin: 0; }

/* --------------------------------------------------------------------------
   9. Forms
   -------------------------------------------------------------------------- */
.field { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }

.field label {
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
}

.field .hint { font-size: var(--t-xs); color: var(--ink-3); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 11px var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: var(--t-sm);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field textarea { min-height: 96px; resize: vertical; }

.field--error input, .field--error select, .field--error textarea { border-color: var(--bad); }
.field .error { font-size: var(--t-xs); color: var(--bad); }

/* --------------------------------------------------------------------------
   10. NAV / data display
   -------------------------------------------------------------------------- */
.nav-figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.02em;
}

/* Provenance sits with every NAV. AMFI is the source and must be named. */
.nav-source {
  font-size: var(--t-xs);
  color: var(--ink-3);
  font-family: var(--font-ui);
}

/* Shown when the nightly sync has not run. Cloudflare's scheduler does not
   report failures, so the site says so itself rather than passing off an
   old NAV as today's. */
.stale-banner {
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-sm);
  color: var(--ink);
  margin-bottom: var(--s-5);
}

/* Wide tables scroll in their own container. The page body never does. */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
th, td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
th {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--surface-2);
  white-space: nowrap;
}
tr:last-child td { border-bottom: none; }
td.numeric, th.numeric {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   11. Compliance furniture
   -------------------------------------------------------------------------- */
.disclaimer-strip {
  background: var(--surface-sunk);
  border-top: 1px solid var(--line);
  padding-block: var(--s-4);
  font-size: var(--t-xs);
  color: var(--ink-2);
  text-align: center;
}

.site-footer {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  padding-block: var(--s-7) var(--s-5);
  font-size: var(--t-sm);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s-6);
  margin-bottom: var(--s-6);
}
@media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr; } }

.site-footer h4 {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-3);
}

.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }

/* The registration line. Required on every page — never hide, shrink below
   12px, or drop it from a layout. */
.registration-line {
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-2);
}

.risk-disclaimer {
  font-size: var(--t-xs);
  color: var(--ink-2);
  margin-top: var(--s-2);
  max-width: none;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--on-accent);
  padding: var(--s-3) var(--s-4);
  z-index: 100;
  font-family: var(--font-ui);
  font-size: var(--t-sm);
}
.skip-link:focus { left: var(--s-4); top: var(--s-4); }

/* --------------------------------------------------------------------------
   12. Calculators
   -------------------------------------------------------------------------- */
.calc-tabs {
  display: flex;
  gap: var(--s-1);
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-6);
  -webkit-overflow-scrolling: touch;
}
.calc-tabs button {
  flex: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
}
.calc-tabs button:hover { color: var(--ink); }
.calc-tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }

.calc-grid { display: grid; grid-template-columns: 360px 1fr; gap: var(--s-7); align-items: start; }
@media (max-width: 840px) { .calc-grid { grid-template-columns: 1fr; gap: var(--s-5); } }

.calc-inputs { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-5); }

.calc-result {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-6);
  box-shadow: var(--shadow);
}
.calc-result--empty { box-shadow: none; background: var(--surface-2); }

.calc-result__label {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--s-2);
}
.calc-result__figure {
  font-size: clamp(var(--t-2xl), 6vw, var(--t-3xl));
  font-weight: 500;
  line-height: 1.05;
  color: var(--accent);
  margin: 0 0 var(--s-5);
  letter-spacing: -.03em;
}

.calc-chart { width: 100%; height: auto; display: block; margin-bottom: var(--s-2); }

.calc-legend {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  font-size: var(--t-xs); color: var(--ink-2);
  font-family: var(--font-ui);
  margin: 0 0 var(--s-5);
}
.calc-legend span { display: inline-flex; align-items: center; gap: var(--s-2); }
.calc-legend i { width: 10px; height: 3px; border-radius: 1px; display: inline-block; }

.calc-rows { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.calc-rows > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line);
}
.calc-rows dt { font-family: var(--font-ui); font-size: var(--t-sm); color: var(--ink-2); }
.calc-rows dd { margin: 0; font-size: var(--t-md); font-weight: 500; color: var(--ink); }
.calc-rows dd.pos { color: var(--ok); }
.calc-rows dd.neg { color: var(--bad); }

.calc-note {
  font-size: var(--t-xs);
  color: var(--ink-3);
  margin: var(--s-4) 0 0;
  max-width: none;
}

.xirr-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--s-3); align-items: end; }
.xirr-row .field { margin-bottom: var(--s-3); }
.xirr-remove {
  background: none; border: 1px solid var(--line-2); border-radius: var(--radius);
  width: 38px; height: 40px; font-size: 20px; line-height: 1; color: var(--ink-3);
  cursor: pointer; margin-bottom: var(--s-3);
}
.xirr-remove:hover { border-color: var(--bad); color: var(--bad); }

/* --------------------------------------------------------------------------
   13. Funds
   -------------------------------------------------------------------------- */
.fund-search { display: grid; grid-template-columns: 1fr 220px; gap: var(--s-3); margin-bottom: var(--s-5); }
@media (max-width: 680px) { .fund-search { grid-template-columns: 1fr; } }
.fund-search .field { margin-bottom: 0; }

.fund-empty {
  background: var(--surface-2);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  padding: var(--s-7) var(--s-5);
  text-align: center;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   14. Investor safety
   -------------------------------------------------------------------------- */
.safety-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.safety-list li {
  position: relative;
  padding-left: var(--s-6);
  font-size: var(--t-base);
  color: var(--ink-2);
  max-width: none;
}
.safety-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--orange);
}

/* --------------------------------------------------------------------------
   15. Admin
   -------------------------------------------------------------------------- */
.admin-head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-4); margin-bottom:var(--s-5); flex-wrap:wrap; }

.admin-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:var(--s-3); margin-bottom:var(--s-5); }
.stat-tile { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s-3) var(--s-4); }
.stat-tile .k { display:block; font-family:var(--font-ui); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:var(--s-1); }
.stat-tile .v { display:block; font-size:var(--t-xl); font-weight:600; font-family:var(--font-display); letter-spacing:-.02em; line-height:1.1; }
.stat-tile--new .v { color:var(--accent); }
.stat-tile--converted .v { color:var(--ok); }
.stat-tile--dropped .v { color:var(--ink-3); }
.stat-tile--warn { border-color:var(--warn); background:var(--warn-soft); }
.stat-tile--bad { border-color:var(--bad); background:var(--bad-soft); }

.admin-controls { display:grid; grid-template-columns:1fr 200px; gap:var(--s-3); margin-bottom:var(--s-5); }
@media (max-width:600px){ .admin-controls{ grid-template-columns:1fr; } }

.lead { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s-5); margin-bottom:var(--s-4); box-shadow:var(--shadow); }
.lead__top { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s-4); margin-bottom:var(--s-4); }
.lead h3 { font-size:var(--t-md); margin:0 0 var(--s-1); }
.lead__meta { font-size:var(--t-sm); color:var(--ink-2); margin:0; }
.lead__meta a { text-decoration:none; }

.pill { flex:none; font-family:var(--font-ui); font-size:var(--t-xs); font-weight:600; letter-spacing:.05em; text-transform:uppercase; padding:3px 10px; border-radius:99px; border:1px solid; }
.pill--new { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }
.pill--contacted { color:var(--warn); border-color:var(--warn); background:var(--warn-soft); }
.pill--converted { color:var(--ok); border-color:var(--ok); background:var(--ok-soft); }
.pill--dropped { color:var(--ink-3); border-color:var(--line-2); background:var(--surface-2); }

.lead__facts { display:flex; flex-wrap:wrap; gap:var(--s-5); margin:0 0 var(--s-4); padding:var(--s-3) 0; border-block:1px solid var(--line); }
.lead__facts dt { font-family:var(--font-ui); font-size:var(--t-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.lead__facts dd { margin:2px 0 0; font-size:var(--t-sm); color:var(--ink); }

.lead__message { font-size:var(--t-sm); color:var(--ink-2); background:var(--surface-2); border-left:3px solid var(--orange); padding:var(--s-3) var(--s-4); border-radius:0 var(--radius) var(--radius) 0; margin-bottom:var(--s-4); max-width:none; }

.lead__actions { display:flex; gap:var(--s-3); flex-wrap:wrap; align-items:center; margin-bottom:var(--s-4); }
.lead__actions .btn { padding:9px var(--s-4); }
.lead__status { padding:9px var(--s-3); border:1px solid var(--line-2); border-radius:var(--radius); background:var(--surface); font-family:var(--font-ui); font-size:var(--t-sm); margin-left:auto; }

.lead__notes { margin-bottom:0; position:relative; }
.lead__saved { position:absolute; right:0; top:0; font-size:var(--t-xs); color:var(--ok); font-family:var(--font-ui); }