/* ============================================================================
   DNA Invest — global stylesheet
   Palette derived from the Monte Carlo simulator: teal-green primary (#1D9E75),
   blue (#378ADD), orange (#D85A30). One system across marketing + tools + admin.
   ========================================================================== */

:root {
  --green: #1C9E76;              /* Emerald Teal  */
  --green-dark: #17835F;
  --green-soft: #E7F5EF;
  --blue: #335192;               /* Sapphire Blue */
  --blue-soft: #E8ECF5;
  --orange: #d85a30;
  --orange-soft: #faece7;
  --amber: #f59e0b;

  --ink: #0D182B;                /* Midnight Navy */
  --slate: #424243;              /* Graphite Grey */
  --muted: #6B6E70;
  --line: #e6 ebe9;
  --line: #E4E6E6;
  --bg: #ffffff;
  --bg-soft: #F2F4F3;
  --bg-deep: #0D182B;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(16, 40, 33, 0.06), 0 1px 3px rgba(16, 40, 33, 0.05);
  --shadow: 0 6px 24px rgba(16, 40, 33, 0.08);
  --shadow-lg: 0 18px 50px rgba(16, 40, 33, 0.14);
  --maxw: 1160px;
  /* Outfit is the DNA Invest CI brand font; system stack as fallback so the
     app still looks right if the webfont is slow or blocked. */
  --font: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --z-nav: 50;
  --focus-ring: 0 0 0 3px rgba(28, 158, 118, 0.35);
  --sky: #4DC0EF;                /* Picton Blue    */
  --turq: #25BDBF;               /* Turquoise Teal */
  --lime: #A5D067;               /* Fresh Lime     */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--green-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 0.5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2.15rem); font-weight: 750; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1rem; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 650; font-size: 0.95rem; line-height: 1;
  padding: 13px 22px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--green); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--green-dark); box-shadow: var(--shadow); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--green); color: var(--green-dark); }
.btn-light { background: #fff; color: var(--ink); border-color: transparent; }
.btn-sm { padding: 8px 14px; font-size: 0.85rem; }
.btn-block { width: 100%; justify-content: center; }

/* ---- top navigation ---- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; color: var(--ink); letter-spacing: -0.02em; }
.brand:hover { text-decoration: none; }
/* Global default so the mark never balloons to its intrinsic size outside .brand
   (this was making the footer helix huge). */
.mark { width: 30px; height: 30px; flex-shrink: 0; }
.brand .mark { width: 30px; height: 30px; }
.brand em { color: var(--green); font-style: normal; }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a { color: var(--slate); font-weight: 550; font-size: 0.94rem; padding: 8px 12px; border-radius: 8px; }
.nav-links a:hover { color: var(--ink); background: var(--bg-soft); text-decoration: none; }
.nav-links a.active { color: var(--green-dark); }
.nav-toggle { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--ink); }

@media (max-width: 820px) {
  .nav-links { display: none; position: absolute; top: 66px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: #fff; border-bottom: 1px solid var(--line); padding: 8px; gap: 2px; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px; }
  .nav-toggle { display: block; }
}

/* ---- compact page header (minimal, consistent across tool pages) ---- */
.page { padding: 40px 0 6px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.page-head h1 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); margin: 4px 0 6px; }
.page-head p { max-width: 640px; margin: 0; }
.eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); margin-bottom: 4px; }
.lead { font-size: 1.12rem; color: var(--slate); max-width: 640px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

/* ---- generic section ---- */
.section { padding: 62px 0; }
.section.soft { background: var(--bg-soft); }
.section-head { max-width: 640px; margin-bottom: 34px; }
.section-head .eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); }
.section-head p { color: var(--slate); font-size: 1.05rem; }

/* ---- fund grid + cards ---- */
.fund-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 26px; }
.fund-tabs button { border: 1px solid var(--line); background: #fff; color: var(--slate); padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: 0.88rem; cursor: pointer; transition: all 0.14s ease; }
.fund-tabs button:hover { border-color: var(--green); color: var(--green-dark); }
.fund-tabs button.active { background: var(--green); color: #fff; border-color: var(--green); }

.fund-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.fund-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); transition: transform 0.12s ease, box-shadow 0.16s ease, border-color 0.16s ease; }
.fund-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #d5e3de; }
.fund-card .cat { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.fund-card h3 { margin: 6px 0 4px; font-size: 1.28rem; }
.fund-card .tagline { color: var(--slate); font-size: 0.95rem; margin-bottom: 16px; min-height: 2.9em; }
.fund-meta { display: flex; gap: 18px; margin: 4px 0 16px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fund-meta div { flex: 1; }
.fund-meta .k { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.fund-meta .v { font-size: 1.05rem; font-weight: 750; color: var(--ink); }
.fund-card .actions { display: flex; gap: 8px; margin-top: auto; }
.badge-featured { align-self: flex-start; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--green-dark); background: var(--green-soft); padding: 3px 8px; border-radius: 6px; margin-bottom: 10px; }

/* risk dots */
.risk-dots { display: inline-flex; gap: 3px; align-items: center; }
.risk-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); display: inline-block; }
/* Filled = green, empty = grey — a clean rating dot, on-palette. */
.risk-dots i.on-1, .risk-dots i.on-2, .risk-dots i.on-3, .risk-dots i.on-4, .risk-dots i.on-5 { background: var(--green); }

/* ---- allocation bar ---- */
.alloc-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--bg-soft); }
.alloc-bar span { display: block; height: 100%; }
.alloc-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 12px; }
.alloc-legend span { font-size: 0.85rem; color: var(--slate); display: inline-flex; align-items: center; gap: 6px; }
.alloc-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ---- calculator + simulator shells ---- */
.tool-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }

.calc { display: grid; grid-template-columns: 320px 1fr; }
.calc .controls { background: var(--bg-soft); border-right: 1px solid var(--line); padding: 24px; }
.calc .output { padding: 26px; }
@media (max-width: 760px) { .calc { grid-template-columns: 1fr; } .calc .controls { border-right: none; border-bottom: 1px solid var(--line); } }

.field { margin-bottom: 18px; }
.field label { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--slate); font-weight: 600; margin-bottom: 6px; }
.field label b { color: var(--green-dark); font-weight: 750; }
input[type="range"] { width: 100%; accent-color: var(--green); }
/* One rule for every text-like control so all forms (contact, admin login, fund
   form) style identically — previously password/tel/etc. fell through unstyled. */
.field input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea,
textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; font-size: 0.95rem; color: var(--ink); background: #fff; transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.field input[type="file"] { padding: 9px 12px; background: var(--bg-soft); cursor: pointer; }
.field input:not([type="range"]):focus,
.field select:focus,
.field textarea:focus,
textarea:focus { outline: none; border-color: var(--green); box-shadow: var(--focus-ring); }
.field input::placeholder, textarea::placeholder { color: var(--muted); }

/* Consistent keyboard focus ring across all interactive elements. */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: none; box-shadow: var(--focus-ring); border-radius: 6px;
}

.big-figure { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; color: var(--green-dark); letter-spacing: -0.02em; }
.stat-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.stat { flex: 1; min-width: 130px; background: var(--bg-soft); border-radius: var(--radius-sm); padding: 12px 14px; }
.stat .k { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.stat .v { font-size: 1.35rem; font-weight: 750; }

/* ---- risk profiler quiz ---- */
.quiz-progress { height: 8px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; margin-bottom: 26px; }
.quiz-progress i { display: block; height: 100%; background: var(--green); border-radius: 999px; transition: width 0.3s ease; }
.quiz-step { display: none; }
.quiz-step.active { display: block; animation: fade 0.3s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.q-num { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); }
.q-text { font-size: 1.4rem; font-weight: 700; margin: 6px 0 22px; }
.q-options { display: grid; gap: 12px; }
.q-option { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.12s ease; background: #fff; font-size: 1rem; text-align: left; }
.q-option:hover { border-color: var(--green); background: var(--green-soft); }
.q-option.selected { border-color: var(--green); background: var(--green-soft); box-shadow: inset 0 0 0 1px var(--green); }
.q-option .dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--muted); flex-shrink: 0; }
.q-option.selected .dot { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 3px #fff; }
.quiz-nav { display: flex; justify-content: space-between; margin-top: 26px; }

/* ---- generic pieces ---- */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 650; padding: 5px 11px; border-radius: 999px; background: var(--bg-soft); color: var(--slate); }
.pill.green { background: var(--green-soft); color: var(--green-dark); }
/* Keep the whole UI green/white/grey — non-positive states are just neutral grey. */
.pill.blue, .pill.orange { background: var(--bg-soft); color: var(--slate); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 760px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }

.note { background: var(--green-soft); border: 1px solid #bfe6d4; color: var(--green-dark); border-radius: var(--radius-sm); padding: 14px 16px; font-size: 0.92rem; }
.note.warn { background: var(--orange-soft); border-color: #f2c9ba; color: #9a3d1c; }

/* ---- footer (light, minimal) ---- */
.footer { background: var(--bg-soft); color: var(--slate); border-top: 1px solid var(--line); padding: 26px 0; margin-top: 52px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 800; font-size: 1.02rem; }
.footer-brand .mark { width: 26px; height: 26px; }
.footer-brand em { color: var(--green); font-style: normal; }
.footer-links { display: flex; gap: 18px; font-size: 0.9rem; flex-wrap: wrap; }
.footer a { color: var(--slate); }
.footer a:hover { color: var(--green-dark); }
.footer-bottom { font-size: 0.8rem; color: var(--muted); margin-top: 12px; }
.disclaimer { font-size: 0.74rem; color: var(--muted); line-height: 1.6; margin-top: 8px; max-width: 900px; }

/* ---- monte carlo simulator ---- */
.mc { display: flex; min-height: 560px; }
.mc-side { width: 268px; min-width: 268px; background: var(--bg-soft); border-right: 1px solid var(--line); padding: 16px 15px; overflow-y: auto; max-height: 84vh; flex-shrink: 0; }
.mc-side h4.mc-title { font-size: 0.82rem; font-weight: 700; color: var(--ink); margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.mc-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mc-sec { font-size: 0.68rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; margin: 0 0 8px; }
.mc-hr { border-top: 1px solid var(--line); margin: 12px 0 13px; }
.mc-row { margin-bottom: 12px; }
.mc-row .lab { display: flex; justify-content: space-between; margin-bottom: 3px; font-size: 0.78rem; color: var(--slate); }
.mc-row .lab b { font-weight: 700; color: var(--ink); }
.mc-row input[type="range"] { width: 100%; accent-color: var(--green); }
.mc-seg { display: flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; margin-bottom: 10px; }
.mc-seg button { flex: 1; padding: 6px 2px; font-size: 0.72rem; background: #fff; color: var(--slate); border: none; border-right: 1px solid var(--line); cursor: pointer; }
.mc-seg button:last-child { border-right: none; }
.mc-seg button.on { background: var(--green); color: #fff; font-weight: 650; }
.mc-mode { display: flex; border-radius: 9px; overflow: hidden; border: 2px solid var(--green); margin-bottom: 14px; }
.mc-mode button { flex: 1; padding: 8px 4px; border: none; cursor: pointer; background: #fff; color: var(--slate); }
.mc-mode button:first-child { border-right: 2px solid var(--green); }
.mc-mode button.on { background: var(--green); color: #fff; }
.mc-mode button .t { font-size: 0.78rem; font-weight: 700; }
.mc-mode button .d { font-size: 0.63rem; opacity: 0.8; margin-top: 2px; }
.mc-lump { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.mc-lump .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-size: 0.78rem; font-weight: 650; color: var(--green-dark); }
.mc-lump .rm { background: none; border: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; line-height: 1; }
.mc-addlump { font-size: 0.72rem; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--green); background: none; color: var(--green-dark); cursor: pointer; font-weight: 650; }
.mc-run { width: 100%; margin-top: 6px; padding: 10px 0; font-size: 0.9rem; font-weight: 650; border-radius: 9px; border: none; background: var(--green); color: #fff; cursor: pointer; }
.mc-run:hover { background: var(--green-dark); }

.mc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.mc-head .t { font-size: 1rem; font-weight: 700; }
.mc-head .badges { display: flex; gap: 6px; flex-wrap: wrap; }
.mc-metrics { display: flex; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.mc-metric { flex: 1; min-width: 120px; padding: 11px 14px; border-right: 1px solid var(--line); }
.mc-metric .k { font-size: 0.72rem; color: var(--muted); margin-bottom: 3px; }
.mc-metric .v { font-size: 1.25rem; font-weight: 750; }
.mc-metric .sub { font-size: 0.72rem; color: var(--muted); }
.mc-metric .extra { font-size: 0.72rem; color: var(--slate); margin-top: 3px; }
.mc-gauge { padding: 8px 16px; display: flex; align-items: center; gap: 10px; }
.mc-chart-block { padding: 14px 16px; }
.mc-chart-title { font-size: 0.85rem; font-weight: 650; color: var(--ink); margin-bottom: 8px; }
.mc-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; font-size: 0.72rem; color: var(--muted); }
.mc-legend span { display: flex; align-items: center; gap: 4px; }
.mc-legend i { display: inline-block; width: 18px; height: 2px; }
.mc-canvas { position: relative; height: 240px; }
.mc-foot { padding: 9px 16px; border-top: 1px solid var(--line); display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.8rem; color: var(--muted); margin-top: auto; }
@media (max-width: 820px) {
  .mc { flex-direction: column; }
  .mc-side { width: auto; min-width: 0; max-height: none; border-right: none; border-bottom: 1px solid var(--line); }
}

/* ---- admin ---- */
/* Same white/grey/green chrome as the public nav — one consistent top bar. */
.adm-bar { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,0.9); backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--line); color: var(--ink); }
.adm-bar-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.adm-bar .brand { color: var(--ink); }
.adm-bar .brand em { color: var(--green); }
.adm-bar .right { display: flex; align-items: center; gap: 6px; font-size: 0.92rem; }
.adm-bar .right a { color: var(--slate); font-weight: 550; padding: 8px 12px; border-radius: 8px; }
.adm-bar .right a:hover { color: var(--ink); background: var(--bg-soft); text-decoration: none; }
.adm-wrap { max-width: 1160px; margin: 0 auto; padding: 26px 22px 60px; }
@media (min-width:1400px){ .adm-wrap{ max-width:1340px; } }
.adm-login { max-width: 380px; margin: 8vh auto; padding: 0 22px; }
.adm-login .card { padding: 30px; }
.adm-section-title { display: flex; align-items: center; justify-content: space-between; margin: 30px 0 16px; }
.adm-section-title h2 { margin: 0; font-size: 1.3rem; }
.fund-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.fund-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.fund-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 0.92rem; vertical-align: middle; }
.fund-table tr:last-child td { border-bottom: none; }
.fund-table .actions { display: flex; gap: 6px; justify-content: flex-end; }
.tag { display: inline-block; font-size: 0.7rem; font-weight: 650; padding: 2px 8px; border-radius: 5px; background: var(--green-soft); color: var(--green-dark); }
.btn-danger { background: #fff; color: var(--orange); border-color: #f2c9ba; }
.btn-danger:hover { background: var(--orange); color: #fff; border-color: var(--orange); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .full { grid-column: 1 / -1; }

/* ---- redesigned admin login ---- */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px;
  background: radial-gradient(1000px 500px at 50% -20%, var(--green-soft), transparent 60%), var(--bg-soft); }
.login-card { width: 100%; max-width: 400px; }
.login-brand { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 800; font-size: 1.25rem; color: var(--ink); margin-bottom: 22px; letter-spacing: -0.02em; }
.login-brand em { color: var(--green); font-style: normal; }
.login-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.login-box .top { padding: 28px 28px 4px; }
.login-box .top .tile { width: 44px; height: 44px; border-radius: 11px; background: var(--green-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.login-box .top h1 { font-size: 1.35rem; margin: 0 0 4px; color: var(--ink); }
.login-box .top p { margin: 0; color: var(--slate); font-size: 0.9rem; }
.login-box .body { padding: 18px 28px 26px; }
.login-secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; font-size: 0.78rem; color: var(--muted); }
.login-secure svg { width: 13px; height: 13px; }
.login-back { text-align: center; margin-top: 18px; font-size: 0.85rem; }

/* ---- utilities ---- */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.muted { color: var(--muted); }
.hidden { display: none !important; }

/* Respect users who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ============================================================
   CI v2 brand chrome: real logo art in the nav, footer and
   login cards. The tagline is baked into the artwork, so these
   heights keep it legible and no strapline is ever set as text.
   ============================================================ */
.brand-logo { height: 52px; width: auto; display: block; }
.brand, .login-brand, .footer-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.footer-brand .brand-logo { height: 62px; }
.login-brand .brand-logo { height: 58px; }
.brand-sub {
  font-size: 12px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase;
  color: var(--green); background: var(--green-soft);
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.nav .brand-sub { align-self: center; }
@media (max-width: 640px) {
  .brand-logo { height: 42px; }
  .footer-brand .brand-logo { height: 50px; }
}

/* ============================================================
   PORTAL CHROME, aligned to the marketing site
   Floating pill navbar, account monogram with a hover/focus menu,
   and a navy footer carrying the brand rule, FSP number and POPIA.
   ============================================================ */
:root {
  --glow:      0 8px 26px rgba(23, 131, 95, 0.15), 0 2px 6px rgba(13, 24, 43, 0.04);
  --glow-lift: 0 14px 38px rgba(23, 131, 95, 0.26), 0 3px 10px rgba(13, 24, 43, 0.06);
  --sky: #4DC0EF;
  --lime: #A5D067;
  --turq: #25BDBF;
}

/* ---------- Navbar as a floating pill ---------- */
.nav {
  background: transparent;
  border-bottom: none;
  padding: 14px 20px;
}
.nav-inner {
  height: 74px;
  padding: 0 14px 0 26px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--glow);
  gap: 18px;
}
.brand-logo { height: 52px; width: auto; display: block; }
.nav-links { gap: 4px; }
.nav-links a { font-weight: 600; border-radius: 999px; padding: 8px 14px; }
.nav-links a.active { color: var(--green-dark); background: var(--green-soft); }

/* ---------- Account monogram + menu ---------- */
.acct { position: relative; margin-left: 8px; }
.acct-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer; padding: 3px;
  border-radius: 999px; font-family: inherit;
}
.acct-trigger:focus-visible { outline: 3px solid rgba(28, 158, 118, 0.4); outline-offset: 2px; }
.avatar {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; line-height: 1; letter-spacing: 0.03em;
  box-shadow: 0 0 0 3px rgba(28, 158, 118, 0.14);
}
.avatar.lg { width: 50px; height: 50px; flex: 0 0 50px; font-size: 16px; }
.acct-caret { color: var(--muted); font-size: 11px; }
.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;
}

.acct-menu {
  position: absolute; top: calc(100% + 14px); right: 0; width: 292px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--glow-lift); padding: 18px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 60; text-align: left;
}
/* Opens on hover, on keyboard focus, and on click (the click toggles .open,
   so it works on touch where hover does not exist). */
.acct:hover .acct-menu,
.acct:focus-within .acct-menu,
.acct.open .acct-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.acct-head { display: flex; align-items: center; gap: 13px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.acct-id { min-width: 0; }
.acct-id b { display: block; font-size: 15px; color: var(--ink); line-height: 1.25; }
.acct-type {
  display: inline-block; margin-top: 4px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--green); background: var(--green-soft);
  padding: 3px 9px; border-radius: 999px;
}
.acct-mail { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; overflow-wrap: anywhere; }
.acct-rows { padding: 12px 0 4px; }
.acct-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--muted); padding: 5px 0; }
.acct-row b { color: var(--ink); }
.acct-status { text-transform: capitalize; }
.acct-status.ok { color: var(--green); }
.acct-out { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.acct-out .btn { width: 100%; text-align: center; }

/* ---------- Footer, matching the site ---------- */
.footer {
  background: var(--bg-deep);
  color: #9FB0C4;
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg, var(--green), var(--turq) 40%, var(--sky) 70%, var(--lime)) 1;
  padding: 44px 0 28px;
  margin-top: 64px;
}
.footer-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 26px 40px; flex-wrap: wrap; padding-bottom: 26px;
}
.footer-brand { display: block; }
.footer-brand .brand-logo { height: 64px; }
.footer-fsp { margin: 12px 0 0; font-size: 13px; font-weight: 700; color: #fff; }
.footer-links { display: flex; gap: 10px 22px; flex-wrap: wrap; font-size: 14px; }
.footer-links a { color: #C9D6E6; }
.footer-links a:hover { color: #fff; text-decoration: none; }
.footer-legal { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 20px; }
.footer-legal p { margin: 0 0 10px; font-size: 12px; line-height: 1.65; color: #8FA4BC; }
.footer-legal strong { color: #fff; }
.footer-legal a { color: var(--sky); }
.footer-copy { color: #7C8FA6; }

@media (max-width: 860px) {
  .nav { padding: 10px 12px; }
  .nav-inner { height: 64px; padding: 0 10px 0 16px; }
  .brand-logo { height: 42px; }
  .acct-menu { right: -6px; width: 270px; }
  .footer-top { flex-direction: column; }
}

/* ============================================================
   FUND FACTSHEET PAGE
   One row shape for every labelled figure, so the eye reads down
   a single column of values instead of hunting across cards.
   ============================================================ */
.fs-wrap { max-width: 880px; }
.fs-back { display: inline-block; font-size: .9rem; color: var(--muted); margin-bottom: 14px; }
.fs-back:hover { color: var(--green-dark); text-decoration: none; }

.fs-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px 26px; flex-wrap: wrap;
  padding-bottom: 22px; border-bottom: 1px solid var(--line);
}
.fs-head h1 { margin: 10px 0 4px; font-size: 1.9rem; letter-spacing: -.02em; }
.fs-tagline { margin: 0; color: var(--slate); font-size: 1.02rem; }
.fs-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.fs-block { padding: 26px 0; border-bottom: 1px solid var(--line); }
.fs-block:last-child { border-bottom: none; }
.fs-block h2 {
  margin: 0 0 14px; font-size: .82rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .09em; color: var(--green);
}
.fs-block p { margin: 0 0 12px; color: var(--slate); line-height: 1.65; }
.fs-block p:last-child { margin-bottom: 0; }

/* Definition rows: label left, value right, one per line. */
.facts { margin: 0; }
.fact {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--line);
}
.fact:last-child { border-bottom: none; }
.fact dt { color: var(--muted); font-size: .93rem; }
.fact dd { margin: 0; color: var(--ink); font-weight: 700; font-size: .97rem; text-align: right; }

.risk-scale { display: inline-flex; align-items: center; gap: 5px; }
.rd { width: 9px; height: 9px; border-radius: 50%; background: var(--line); display: inline-block; }
.rd.on { background: var(--green); }
.risk-word { margin-left: 7px; font-weight: 700; color: var(--ink); font-size: .93rem; }

.alloc-list { display: grid; gap: 11px; }
.alloc-row { display: grid; grid-template-columns: 150px 1fr 46px; align-items: center; gap: 12px; }
.alloc-label { font-size: .92rem; color: var(--slate); }
.alloc-track { height: 9px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; }
.alloc-fill { display: block; height: 100%; background: var(--green); border-radius: 999px; }
.alloc-pct { text-align: right; font-weight: 700; font-size: .92rem; font-variant-numeric: tabular-nums; }

.fs-highlights { margin: 12px 0 0; padding: 0; list-style: none; }
.fs-highlights li { position: relative; padding: 6px 0 6px 28px; color: var(--slate); }
.fs-highlights li::before {
  content: "✓"; position: absolute; left: 0; top: 6px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--green-soft); color: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
}

.fs-legal p, .fs-note { font-size: .82rem; color: var(--muted); line-height: 1.6; }
.fs-contact { font-size: .88rem !important; color: var(--slate) !important; }

@media (max-width: 640px) {
  .fs-head h1 { font-size: 1.5rem; }
  .fs-actions { width: 100%; }
  .fs-actions .btn { flex: 1; text-align: center; }
  .fact { flex-direction: column; align-items: flex-start; gap: 3px; }
  .fact dd { text-align: left; }
  .alloc-row { grid-template-columns: 1fr 46px; }
  .alloc-track { grid-column: 1 / -1; order: 3; }
}

/* Printing a factsheet should give a clean document, not the app chrome. */
@media print {
  .nav, .footer, .fs-actions, .fs-back { display: none !important; }
  .fs-wrap { max-width: none; }
  .fs-block { break-inside: avoid; }
}

/* ============================================================
   CLIENT PROFILE
   Same label/value rows and section rhythm as the fund factsheet,
   so both data views in the portal read the same way.
   ============================================================ */
.client-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 26px; flex-wrap: wrap;
  padding: 6px 0 20px; border-bottom: 1px solid var(--line); margin-bottom: 22px;
}
.client-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.client-id h1 { margin: 0 0 3px; font-size: 1.7rem; letter-spacing: -.02em; }
.client-id .muted { margin: 0; font-size: .95rem; overflow-wrap: anywhere; }
.client-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.client-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 8px; }
.panel-h {
  margin: 0 0 12px; font-size: .78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; color: var(--green);
}
.client-notes { margin: 0; color: var(--slate); line-height: 1.65; white-space: pre-wrap; }

/* One empty state, used everywhere something can be absent. */
.empty {
  padding: 18px; text-align: center; color: var(--muted);
  font-size: .9rem; line-height: 1.55;
  background: var(--bg-soft); border-radius: 10px;
}
.empty a { color: var(--green-dark); font-weight: 600; }

.upload-row { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin-bottom: 14px; }

@media (max-width: 760px) {
  .client-grid { grid-template-columns: 1fr; }
  .client-head { align-items: flex-start; }
  .client-actions { width: 100%; }
  .client-actions .btn { flex: 1; text-align: center; }
  .client-id h1 { font-size: 1.4rem; }
}

/* ============================================================
   CLIENT BOOK: tabs, filterable list, pipeline board, toast
   ============================================================ */
.book-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-bottom: 18px; }
.book-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.tabs { display: inline-flex; gap: 4px; background: var(--bg-soft); padding: 4px; border-radius: 999px; margin-bottom: 16px; }
.tab {
  border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: .92rem; font-weight: 600; color: var(--slate);
  padding: 8px 20px; border-radius: 999px;
}
.tab.active { background: #fff; color: var(--ink); box-shadow: var(--glow); }
.tab:focus-visible { outline: 3px solid rgba(28,158,118,.4); outline-offset: 2px; }

.filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.filters input[type="search"], .filters select {
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: .92rem; background: #fff;
}
.filters input[type="search"] { flex: 1; min-width: 200px; }
.filter-count { font-size: .85rem; color: var(--muted); }

.cl-table td { vertical-align: middle; }
.cl-name { display: flex; align-items: center; gap: 11px; }
.cl-name:hover { text-decoration: none; }
.cl-name strong { display: block; color: var(--ink); }
.cl-name small { display: block; font-size: .8rem; color: var(--muted); }
.avatar.sm { width: 34px; height: 34px; flex: 0 0 34px; font-size: 12px; }
.cl-table .num { text-align: right; font-variant-numeric: tabular-nums; }

.stage-tag {
  display: inline-block; font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--green); background: var(--green-soft);
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}

/* Import result bubble */
.toast {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-left: 4px solid var(--green); border-radius: 12px;
  padding: 16px 44px 16px 18px; margin-bottom: 18px; box-shadow: var(--glow-lift);
}
.toast.warn { border-left-color: var(--orange); }
.toast-title { display: block; color: var(--ink); font-size: 1rem; }
.toast-sub { font-size: .88rem; color: var(--muted); }
.toast-list { margin: 8px 0 0; padding-left: 18px; }
.toast-list li { font-size: .88rem; color: var(--slate); padding: 3px 0; }
.toast-detail { display: block; font-size: .8rem; color: var(--muted); }
.toast-x {
  position: absolute; top: 10px; right: 12px; border: none; background: none;
  font-size: 1.3rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px 8px;
}
.toast-x:hover { color: var(--ink); }

/* Client form */
.client-form fieldset { border: none; padding: 0; margin: 0; }
.client-form legend {
  font-size: .78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--green); padding: 0; margin-bottom: 12px;
}
.fld-note { font-size: .85rem; color: var(--muted); margin: -4px 0 14px; line-height: 1.55; }
.form-actions { display: flex; gap: 10px; padding-top: 20px; flex-wrap: wrap; }
.hold-list { display: grid; gap: 10px; }
.hold-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hold-row:last-child { border-bottom: none; }
.hold-row label { font-size: .93rem; color: var(--ink); font-weight: 600; margin: 0; }
.hold-row label small { display: block; font-weight: 400; font-size: .78rem; color: var(--muted); }
.hold-amt { display: flex; align-items: center; gap: 6px; }
.hold-amt span { color: var(--muted); font-weight: 700; }
.hold-amt input { width: 140px; text-align: right; }

/* Client profile extras */
.client-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 0; font-size: .88rem; color: var(--muted); }
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.stat-strip > div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; box-shadow: var(--glow); }
.s-lbl { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.s-val { display: block; font-size: 1.5rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; margin-top: 3px; }
.s-val small { font-size: .9rem; color: var(--muted); font-weight: 600; }
.s-val.sm { font-size: .98rem; line-height: 1.3; }
.unset { color: var(--muted); font-weight: 400; font-style: italic; }
.alloc-row .alloc-amt { text-align: right; font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; min-width: 92px; }
.client-grid .card { margin: 0; }

/* Import wizard */
.wiz { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.wiz-step { counter-increment: step; position: relative; padding: 0 0 26px 52px; }
.wiz-step::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .95rem;
}
.wiz-step h2 { margin: 4px 0 8px; font-size: 1.05rem; }
.wiz-step p { color: var(--slate); margin: 0 0 10px; line-height: 1.6; }
.wiz-step code { background: var(--bg-soft); padding: 2px 6px; border-radius: 5px; font-size: .88em; }
.tbl-scroll { overflow-x: auto; }

@media (max-width: 860px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .hold-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hold-amt input { width: 100%; }
  .hold-amt { width: 100%; }
  .book-actions { width: 100%; }
  .book-actions .btn { flex: 1; text-align: center; }
  .wiz-step { padding-left: 44px; }
}
@media (max-width: 560px) {
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .alloc-row { grid-template-columns: 1fr auto; }
  .alloc-row .alloc-track { grid-column: 1 / -1; order: 3; }
}

/* ============================================================
   ATTENTION QUEUE + BOOK OVERVIEW
   Severity is carried by a left rule and the chip colour, so the
   eye lands on "act now" before reading a single word.
   ============================================================ */
.overview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.overview > div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; box-shadow: var(--glow); }
.overview .s-val.alert { color: var(--orange); }

.tab-badge {
  display: inline-block; margin-left: 6px; min-width: 20px;
  padding: 1px 7px; border-radius: 999px;
  background: var(--orange); color: #fff;
  font-size: .72rem; font-weight: 800; vertical-align: 1px;
}
.tab.active .tab-badge { background: var(--orange); }
.view-note { font-size: .88rem; color: var(--muted); margin: 0 0 14px; line-height: 1.55; }

.q-list { display: grid; gap: 10px; }
.q-row {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--line);
  border-radius: 12px; padding: 14px 16px; box-shadow: var(--glow);
  transition: box-shadow .16s, transform .16s;
}
.q-row:hover { box-shadow: var(--glow-lift); transform: translateY(-1px); text-decoration: none; }
.q-row.sev-3 { border-left-color: var(--orange); }
.q-row.sev-2 { border-left-color: var(--amber); }
.q-row.sev-1 { border-left-color: var(--line); }

.q-main { flex: 1; min-width: 0; }
.q-name { display: block; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.q-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.q-chip {
  font-size: .78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  background: var(--bg-soft); color: var(--slate);
}
.q-chip.s3 { background: var(--orange-soft); color: var(--orange); }
.q-chip.s2 { background: #FCF3E3; color: #8A6212; }

.q-side { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.q-sev { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.q-row.sev-3 .q-sev { color: var(--orange); }
.q-open { font-size: .86rem; font-weight: 700; color: var(--green-dark); white-space: nowrap; }

@media (max-width: 860px) {
  .overview { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .q-row { flex-wrap: wrap; align-items: flex-start; }
  .q-side { width: 100%; justify-content: space-between; padding-left: 48px; }
  .q-chip { font-size: .74rem; }
}

/* ============================================================
   LIST DENSITY
   Both the summary line and the detail line are rendered; the
   detailed view just reveals the second one, so switching never
   refetches and filtering keeps working across both.
   ============================================================ */
.density { display: inline-flex; gap: 2px; background: var(--bg-soft); padding: 3px; border-radius: 999px; margin-left: auto; }
.dbtn {
  border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: .84rem; font-weight: 600; color: var(--slate);
  padding: 6px 14px; border-radius: 999px;
}
.dbtn.active { background: #fff; color: var(--ink); box-shadow: var(--glow); }
.dbtn:focus-visible { outline: 3px solid rgba(28,158,118,.4); outline-offset: 2px; }

.cl-group { border-bottom: 1px solid var(--line); }
.cl-group:last-child { border-bottom: none; }
.cl-detail { display: none; }
.cl-table.detailed .cl-detail { display: table-row; }
.cl-table.detailed .cl-row td { border-bottom: none; padding-bottom: 4px; }
.cl-detail > td { padding: 0 16px 16px; background: var(--bg-soft); }

.cl-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 24px; margin: 12px 0 0; }
.cl-facts dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cl-facts dd { margin: 2px 0 0; font-size: .9rem; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.cl-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

/* Count of outstanding flags, so the list hints at what the queue holds. */
.flag-dot {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; margin-right: 8px;
  border-radius: 999px; font-size: .74rem; font-weight: 800;
  background: var(--bg-soft); color: var(--muted); vertical-align: middle;
}
.flag-dot.s3 { background: var(--orange-soft); color: var(--orange); }
.flag-dot.s2 { background: #FCF3E3; color: #8A6212; }

@media (max-width: 860px) {
  .density { margin-left: 0; width: 100%; justify-content: center; }
  .cl-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .cl-facts { grid-template-columns: 1fr; }
}

/* ============================================================
   Admin dashboard: tabs, stat tiles, allocation bars, billing
   ============================================================ */

.adm-tabs{
  display:flex; gap:4px; flex-wrap:wrap;
  border-bottom:1px solid rgba(13,24,43,.10);
  margin:0 0 22px;
}
.adm-tab{
  padding:11px 18px; font-weight:600; font-size:.94rem;
  color:#5a6472; text-decoration:none; border-bottom:2px solid transparent;
  margin-bottom:-1px; transition:color .15s, border-color .15s;
}
.adm-tab:hover{ color:#0D182B; }
.adm-tab.active{ color:#1C9E76; border-bottom-color:#1C9E76; }

.adm-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin:0 0 20px;
}
.adm-head h1{ margin:0; font-size:1.6rem; letter-spacing:-.01em; }
.adm-head .muted{ margin:6px 0 0; font-size:.94rem; }

.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
@media (max-width:900px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .grid-4{ grid-template-columns:1fr; } }

.adm-tile{ padding:16px 18px; }
.adm-tile-label{
  font-size:.74rem; text-transform:uppercase; letter-spacing:.06em;
  color:#5a6472; font-weight:600;
}
.adm-tile-value{
  font-size:1.9rem; font-weight:700; color:#0D182B;
  letter-spacing:-.02em; line-height:1.15; margin-top:4px;
}
.adm-tile-sub{ font-size:.82rem; color:#5a6472; margin-top:2px; }

.adm-block{ padding:20px 22px; margin:22px 0; }
.adm-block-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin:0 0 14px;
}
.adm-block-head h2{ margin:0; font-size:1.12rem; }
.adm-block-head .muted{ font-size:.88rem; }

/* Fund allocation: one bar, one segment per fund */
.alloc-bar{
  display:flex; height:10px; border-radius:999px; overflow:hidden;
  background:rgba(13,24,43,.06); margin:0 0 12px;
}
.alloc-seg{ display:block; height:100%; }
.alloc-seg.c1,.dot.c1{ background:#1C9E76; }
.alloc-seg.c2,.dot.c2{ background:#4DC0EF; }
.alloc-seg.c3,.dot.c3{ background:#335192; }
.alloc-seg.c4,.dot.c4{ background:#25BDBF; }
.alloc-seg.c5,.dot.c5{ background:#A5D067; }
.alloc-seg.c6,.dot.c6{ background:#0D182B; }
.alloc-seg.c7,.dot.c7{ background:#8aa0b8; }

.alloc-chips{ display:flex; flex-wrap:wrap; gap:6px 14px; }
.alloc-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.82rem; color:#424243; white-space:nowrap;
}
.alloc-chip b{ color:#0D182B; font-weight:650; }
.dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  flex:0 0 auto;
}

/* Wide tables scroll inside their own box, never the page */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-scroll .fund-table{ min-width:900px; }
.fund-table td.num, .fund-table th.num{ text-align:right; white-space:nowrap; }
.adv-table{ min-width:1000px; }
.adv-table .actions{ justify-content:flex-end; flex-wrap:nowrap; gap:5px; }
.adv-table .actions .btn{ padding:5px 9px; font-size:.78rem; }
.adv-table th, .adv-table td{ padding-left:8px; padding-right:8px; }
.adv-table td a[href^="mailto"]{ font-size:.84rem; }
.adv-table th:last-child, .adv-table td:last-child{ padding-right:0; }
.adv-table th, .adv-table td{ padding-left:10px; padding-right:10px; font-size:.88rem; }
.adv-table .alloc-chip{ font-size:.78rem; }

.fund-table td.nw, .fund-table th.nw{ white-space:nowrap; }
.adv-cell{ display:flex; align-items:center; gap:9px; }
.avatar.sm{ width:28px; height:28px; font-size:.72rem; flex:0 0 auto; }

.bill-table tfoot td{
  border-top:2px solid rgba(13,24,43,.14);
  padding-top:12px; font-size:.96rem;
}
.money-adv strong{ color:#1C9E76; }
.money-dna strong{ color:#335192; }

.import-form{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:14px 0 0; }
.import-form input[type=file]{ flex:1 1 260px; min-width:0; font-size:.9rem; }
.adm-details{ margin-top:14px; }
.adm-details summary{ cursor:pointer; font-weight:600; font-size:.9rem; color:#1C9E76; }
.code-block{
  display:block; margin:10px 0; padding:10px 12px; border-radius:8px;
  background:rgba(13,24,43,.05); font-size:.82rem; line-height:1.6;
  word-break:break-word; color:#0D182B;
}

.sim-presets{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; }
.sim-presets .muted{ font-size:.86rem; }

.note.ok{
  border-left:3px solid #1C9E76;
  background:rgba(28,158,118,.07);
}
svg.acct-caret{ color:#5a6472; flex:0 0 auto; }

/* Advisors table: fund allocation sits on its own full-width row */
.adv-main td{ border-bottom:none; padding-bottom:6px; }
.adv-funds td{ padding-top:0; padding-bottom:16px; }
.adv-funds-inner{ display:flex; align-items:flex-start; gap:14px; }
.adv-funds-label{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.06em;
  color:#8a93a0; font-weight:600; padding-top:2px; flex:0 0 auto;
}
.adv-funds-body{ flex:1 1 auto; min-width:0; }
.adv-funds-body .alloc-bar{ max-width:520px; margin-bottom:8px; }
.adv-funds-body .alloc-chips{ gap:4px 16px; }
.sim-preset.on{ background:#1C9E76; border-color:#1C9E76; color:#fff; }

/* Admin: simple list rows and the advisor detail page */
.list-table tbody tr.row-link{ cursor:pointer; }
.list-table tbody tr.row-link:hover{ background:rgba(28,158,118,.04); }
.list-table td a{ text-decoration:none; color:inherit; }
.list-table td a:hover strong{ color:#1C9E76; }

/* Advisor detail: stacked label-over-value cards, distinct from the
   client-profile .fact rows above, which are label-left / value-right. */
.adv-facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px 26px; margin:0;
}
.adv-facts .adv-fact{
  margin:0; min-width:0; display:block; padding:0; border:none;
}
.adv-facts dt{
  display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color:#8a93a0; font-weight:600; margin:0 0 3px;
}
.adv-facts dd{
  display:block; margin:0; font-size:.95rem; color:#0D182B;
  font-weight:600; text-align:left; word-break:break-word;
}
.adv-facts dd .muted{ font-weight:400; font-size:.84rem; }

.mini-funds{ list-style:none; margin:0; padding:0; }
.mini-funds li{
  display:flex; align-items:center; gap:6px;
  font-size:.83rem; color:#424243; padding:1px 0; white-space:nowrap;
}
.mini-funds li b{ color:#0D182B; font-weight:650; }

.client-table{ min-width:900px; }
.client-table tfoot td{
  border-top:2px solid rgba(13,24,43,.14);
  padding-top:12px;
}

.adm-actions{
  display:flex; gap:10px; flex-wrap:wrap;
  margin:26px 0 0; padding-top:20px;
  border-top:1px solid rgba(13,24,43,.10);
}

/* Billing: sortable headers and the filter box */
.table-tools{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.filter-input{
  padding:7px 12px; border:1px solid rgba(13,24,43,.16); border-radius:999px;
  font-size:.88rem; font-family:inherit; color:#0D182B; background:#fff;
  min-width:190px;
}
.filter-input:focus{ outline:none; border-color:#1C9E76; box-shadow:0 0 0 3px rgba(28,158,118,.14); }

.fund-table th.sortable{ cursor:pointer; user-select:none; white-space:nowrap; }
.fund-table th.sortable:hover{ color:#1C9E76; }
.fund-table th.sortable:focus-visible{ outline:2px solid #1C9E76; outline-offset:2px; }
.sort-caret{
  display:inline-block; width:0; height:0; margin-left:6px; vertical-align:middle;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid rgba(13,24,43,.28);
}
th.asc .sort-caret{ border-top:none; border-bottom:5px solid #1C9E76; }
th.desc .sort-caret{ border-top:5px solid #1C9E76; }

.bill-table tbody tr.row-link{ cursor:pointer; }
.bill-table tbody tr.row-link:hover{ background:rgba(28,158,118,.04); }
.bill-table td a{ text-decoration:none; color:inherit; }
.bill-table td a:hover strong{ color:#1C9E76; }
.bill-table{ min-width:820px; }

/* ============================================================
   Admin billing section: sub-navigation, filters, reference lists
   ============================================================ */

.sub-tabs{
  display:flex; gap:6px; flex-wrap:wrap; margin:0 0 24px;
  padding:4px; border-radius:999px; background:rgba(13,24,43,.05);
  width:fit-content; max-width:100%;
}
.sub-tab{
  padding:7px 16px; border-radius:999px; font-size:.88rem; font-weight:600;
  color:#5a6472; text-decoration:none; white-space:nowrap;
  transition:background .15s, color .15s;
}
.sub-tab:hover{ color:#0D182B; }
.sub-tab.active{ background:#fff; color:#1C9E76; box-shadow:0 1px 3px rgba(13,24,43,.10); }

.filter-card{ padding:20px 22px; }
.filter-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px 18px; margin-bottom:16px;
}
.filter-grid .field{ margin:0; }
.filter-grid label{
  display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color:#8a93a0; font-weight:600; margin-bottom:5px;
}
.filter-grid select, .filter-grid input{
  width:100%; padding:8px 11px; border:1px solid rgba(13,24,43,.16);
  border-radius:8px; font-size:.9rem; font-family:inherit; color:#0D182B;
  background:#fff; min-width:0;
}
.filter-grid select:focus, .filter-grid input:focus{
  outline:none; border-color:#1C9E76; box-shadow:0 0 0 3px rgba(28,158,118,.14);
}
.filter-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.ref-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; }
.ref-h{
  margin:0 0 8px; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color:#8a93a0; font-weight:600;
}
.ref-list{ list-style:none; margin:0; padding:0; }
.ref-list li{
  display:flex; justify-content:space-between; gap:14px;
  padding:6px 0; border-bottom:1px solid rgba(13,24,43,.07);
  font-size:.86rem; color:#0D182B;
}
.ref-list li:last-child{ border-bottom:none; }
.ref-list .muted{ font-size:.8rem; white-space:nowrap; }

.import-form input[type=month]{
  padding:8px 11px; border:1px solid rgba(13,24,43,.16); border-radius:8px;
  font-size:.9rem; font-family:inherit; color:#0D182B; background:#fff;
}
.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;
}

/* ============================================================
   Billing filters: month range, searchable combos, fund picker
   ============================================================ */

.filter-row{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px 20px; margin-bottom:16px;
}
.filter-block{ min-width:0; }
.filter-block.wide{ grid-column:span 2; }
@media (max-width:820px){ .filter-block.wide{ grid-column:span 1; } }
.filter-label{
  display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color:#8a93a0; font-weight:600; margin-bottom:6px;
}

.range-pair{ display:flex; align-items:center; gap:8px; }
.range-pair input{
  flex:1 1 0; min-width:0; padding:8px 10px; border:1px solid rgba(13,24,43,.16);
  border-radius:8px; font-size:.88rem; font-family:inherit; color:#0D182B; background:#fff;
}
.range-pair input:focus{ outline:none; border-color:#1C9E76; box-shadow:0 0 0 3px rgba(28,158,118,.14); }
.range-sep{ font-size:.8rem; color:#8a93a0; flex:0 0 auto; }

.quick-range{ display:flex; gap:5px; flex-wrap:wrap; margin-top:8px; }
.chip{
  padding:4px 11px; border-radius:999px; border:1px solid rgba(13,24,43,.14);
  background:#fff; font-size:.76rem; font-family:inherit; color:#5a6472; cursor:pointer;
}
.chip:hover{ border-color:#1C9E76; color:#1C9E76; }

/* Searchable combo */
.combo{ position:relative; }
.combo-input{
  width:100%; padding:8px 30px 8px 11px; border:1px solid rgba(13,24,43,.16);
  border-radius:8px; font-size:.9rem; font-family:inherit; color:#0D182B; background:#fff;
}
.combo-input:focus{ outline:none; border-color:#1C9E76; box-shadow:0 0 0 3px rgba(28,158,118,.14); }
.combo-clear{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border:none; background:none; cursor:pointer;
  color:#8a93a0; font-size:17px; line-height:1; border-radius:50%;
}
.combo-clear:hover{ background:rgba(13,24,43,.06); color:#0D182B; }
.combo-list{
  display:none; position:absolute; z-index:30; left:0; right:0; top:calc(100% + 4px);
  max-height:250px; overflow-y:auto; margin:0; padding:5px; list-style:none;
  background:#fff; border:1px solid rgba(13,24,43,.12); border-radius:10px;
  box-shadow:0 10px 28px rgba(13,24,43,.14);
}
.combo.open .combo-list{ display:block; }
.combo-opt{
  display:flex; flex-direction:column; gap:1px; padding:7px 10px;
  border-radius:6px; cursor:pointer; font-size:.87rem;
}
.combo-opt:hover{ background:rgba(28,158,118,.08); }
.combo-opt .muted{ font-size:.76rem; }

/* Fund picker */
.fund-picker{ border:1px solid rgba(13,24,43,.14); border-radius:10px; overflow:hidden; background:#fff; }
.fund-picker-head{
  display:flex; align-items:center; gap:8px; padding:8px;
  border-bottom:1px solid rgba(13,24,43,.10); background:#fafcfb;
}
.fund-search{
  flex:1 1 auto; min-width:0; padding:6px 10px; border:1px solid rgba(13,24,43,.14);
  border-radius:7px; font-size:.85rem; font-family:inherit;
}
.fund-search:focus{ outline:none; border-color:#1C9E76; }
.link-btn{
  border:none; background:none; padding:2px 4px; font-size:.78rem; font-family:inherit;
  color:#1C9E76; cursor:pointer; font-weight:600; white-space:nowrap;
}
.link-btn:hover{ text-decoration:underline; }
.fund-list{ list-style:none; margin:0; padding:4px; max-height:168px; overflow-y:auto; }
.fund-opt{
  display:flex; align-items:center; gap:9px; padding:6px 8px;
  border-radius:6px; cursor:pointer; font-size:.87rem;
}
.fund-opt:hover{ background:rgba(28,158,118,.07); }
.fund-opt input{ width:auto; margin:0; flex:0 0 auto; accent-color:#1C9E76; }
.fund-opt-name{ flex:1 1 auto; min-width:0; }
.fund-opt-cat{ font-size:.75rem; white-space:nowrap; }
.fund-picker-foot{ padding:7px 12px; border-top:1px solid rgba(13,24,43,.08); font-size:.78rem; }

.filter-card input[type=search]{
  width:100%; padding:8px 11px; border:1px solid rgba(13,24,43,.16);
  border-radius:8px; font-size:.9rem; font-family:inherit; color:#0D182B; background:#fff;
}
.filter-card input[type=search]:focus{ outline:none; border-color:#1C9E76; box-shadow:0 0 0 3px rgba(28,158,118,.14); }

.active-filters{ display:flex; gap:5px; flex-wrap:wrap; margin-top:9px; }
.fchip{
  display:inline-block; padding:3px 9px; border-radius:999px;
  background:rgba(28,158,118,.10); color:#157a5a; font-size:.74rem; font-weight:600;
}

/* Traffic lights */
.rag{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-size:.82rem; font-weight:600;
}
.rag-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.rag-green  .rag-dot{ background:#1C9E76; box-shadow:0 0 0 3px rgba(28,158,118,.16); }
.rag-yellow .rag-dot{ background:#E5A93B; box-shadow:0 0 0 3px rgba(229,169,59,.18); }
.rag-red    .rag-dot{ background:#D4544A; box-shadow:0 0 0 3px rgba(212,84,74,.16); }
.rag-grey   .rag-dot{ background:#b3bcc6; }
.rag-green{ color:#157a5a; } .rag-yellow{ color:#9a6a10; }
.rag-red{ color:#a83a31; }   .rag-grey{ color:#8a93a0; }

/* Review: segmented control, holdings inline, rating summary */
.seg{ display:inline-flex; padding:3px; border-radius:999px; background:rgba(13,24,43,.06); }
.seg-opt{
  padding:6px 16px; border-radius:999px; font-size:.85rem; font-weight:600;
  color:#5a6472; cursor:pointer; transition:background .15s,color .15s;
}
.seg-opt.on{ background:#fff; color:#1C9E76; box-shadow:0 1px 3px rgba(13,24,43,.10); }
.seg-opt input{ position:absolute; opacity:0; width:0; height:0; }

.hold-line{
  display:flex; align-items:center; gap:6px;
  font-size:.83rem; color:#424243; padding:1px 0; white-space:nowrap;
}
.hold-line b{ color:#0D182B; font-weight:650; }
.hold-line .rag{ gap:0; }

.rag-summary{ display:inline-flex; gap:14px; align-items:center; }
.rag-summary .rag{ font-size:1.35rem; font-weight:700; gap:6px; }
.rag-summary .rag-dot{ width:11px; height:11px; }

.filter-card select{
  width:100%; padding:8px 11px; border:1px solid rgba(13,24,43,.16);
  border-radius:8px; font-size:.9rem; font-family:inherit; color:#0D182B; background:#fff;
}
.filter-card select:focus{ outline:none; border-color:#1C9E76; box-shadow:0 0 0 3px rgba(28,158,118,.14); }

/* ============================================================
   Capital by fund: ranked horizontal bar chart
   One measure across categories, so one hue and length does the
   encoding. Bars scale to the largest fund, not to the total.
   ============================================================ */

.cap-chart{ margin:0; }
.cc-plot{ position:relative; display:grid; gap:3px; }

/* Recessive hairline grid at quarters of the longest bar. */
.cc-grid{
  position:absolute; left:var(--cc-label,190px); right:var(--cc-val,132px);
  top:0; bottom:0; pointer-events:none;
}
.cc-grid-line{
  position:absolute; top:0; bottom:0; width:1px;
  background:rgba(13,24,43,.07);
}

.cc-row{
  display:grid;
  grid-template-columns:var(--cc-label,190px) 1fr var(--cc-val,132px);
  align-items:center; gap:0;
  padding:3px 0; border-radius:6px;
  transition:background .12s;
}
.cc-row:hover, .cc-row:focus-visible{ background:rgba(28,158,118,.05); outline:none; }
.cc-row:focus-visible{ box-shadow:0 0 0 2px rgba(28,158,118,.35); }

.cc-name{
  font-size:.87rem; font-weight:600; color:#0D182B;
  padding-right:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.cc-track{ position:relative; display:block; height:18px; }
.cc-bar{
  display:block; height:100%; min-width:2px;
  background:#1C9E76;
  /* Square where it grows from, rounded at the data end. */
  border-radius:0 4px 4px 0;
  transition:width .35s cubic-bezier(.4,0,.2,1);
}
.cc-row:hover .cc-bar, .cc-row:focus-visible .cc-bar{ background:#157a5a; }

.cc-val{
  text-align:right; padding-left:14px; white-space:nowrap;
  font-size:.86rem; color:#0D182B;
}
.cc-val b{ font-weight:700; }
.cc-share{
  display:inline-block; min-width:44px; text-align:right;
  color:#5a6472; font-size:.8rem; font-weight:600;
}

.cc-foot{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-top:14px;
  padding-top:12px; border-top:1px solid rgba(13,24,43,.08);
  font-size:.82rem;
}
.cc-table{ margin-top:14px; }

@media (max-width:760px){
  .cc-row{ grid-template-columns:1fr; gap:3px; padding:8px 0; }
  .cc-grid{ display:none; }
  .cc-name{ padding-right:0; white-space:normal; }
  .cc-val{ text-align:left; padding-left:0; display:flex; gap:10px; align-items:baseline; }
  .cc-share{ min-width:0; }
}

/* ============================================================
   Review tab: scope bar, header, send dialog
   ============================================================ */

.scope-bar{
  display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap;
  padding:18px 20px; margin-bottom:20px;
}
.scope-field{ min-width:0; }
.scope-advisor{ flex:1 1 260px; max-width:340px; }
.scope-go{ margin-left:auto; }
.scope-field .filter-label{ margin-bottom:6px; }
.scope-field select{
  padding:8px 11px; border:1px solid rgba(13,24,43,.16); border-radius:8px;
  font-size:.9rem; font-family:inherit; color:#0D182B; background:#fff; min-width:170px;
}
.scope-field select:focus{ outline:none; border-color:#1C9E76; box-shadow:0 0 0 3px rgba(28,158,118,.14); }

.review-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin:0 0 20px;
}
.review-who{ display:flex; align-items:center; gap:12px; min-width:0; }
.review-who b{ display:block; font-size:1.05rem; color:#0D182B; }
.review-who .muted{ display:block; font-size:.84rem; }
.review-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---- Modal ------------------------------------------------ */
.modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal[hidden]{ display:none; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(13,24,43,.48); backdrop-filter:blur(2px); }
.modal-card{
  position:relative; width:100%; max-width:470px; max-height:90vh; overflow-y:auto;
  background:#fff; border-radius:16px; box-shadow:0 24px 60px rgba(13,24,43,.28);
  animation:modalIn .16s ease-out;
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(8px) scale(.99); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .modal-card{ animation:none; } }

.modal-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:20px 22px 14px; border-bottom:1px solid rgba(13,24,43,.09);
}
.modal-head h2{ margin:0; font-size:1.12rem; }
.modal-head .muted{ margin:3px 0 0; font-size:.88rem; }
.modal-x{
  border:none; background:none; font-size:24px; line-height:1; color:#8a93a0;
  cursor:pointer; padding:0 4px; border-radius:6px; flex:0 0 auto;
}
.modal-x:hover{ color:#0D182B; background:rgba(13,24,43,.06); }

.modal-body{ padding:18px 22px; }
.modal-foot{
  display:flex; justify-content:flex-end; gap:10px;
  padding:14px 22px 20px; border-top:1px solid rgba(13,24,43,.09);
}

.mf{ border:none; padding:0; margin:0 0 18px; }
.mf legend{
  padding:0; margin-bottom:8px; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.06em; color:#8a93a0; font-weight:600;
}
.mf input[type=text], .mf input[type=email], .mf select{
  width:100%; padding:8px 11px; border:1px solid rgba(13,24,43,.16);
  border-radius:8px; font-size:.9rem; font-family:inherit; color:#0D182B; background:#fff;
}
.mf input:focus, .mf select:focus{ outline:none; border-color:#1C9E76; box-shadow:0 0 0 3px rgba(28,158,118,.14); }
.mf-nest{ margin-top:9px; padding-left:26px; }
.mf-note{ font-size:.82rem; margin:0; }

.radio-row{
  display:flex; align-items:flex-start; gap:10px; padding:8px 10px;
  border-radius:8px; cursor:pointer; font-size:.89rem;
}
.radio-row:hover{ background:rgba(28,158,118,.05); }
.radio-row input{ width:auto; margin:2px 0 0; flex:0 0 auto; accent-color:#1C9E76; }
.radio-row strong{ display:block; color:#0D182B; font-weight:600; }
.radio-row .muted{ display:block; font-size:.79rem; }

.seg-block{ display:flex; width:100%; }
.seg-block .seg-opt{ flex:1 1 0; text-align:center; }

/* ============================================================
   Native date and month pickers, brought onto the brand
   ============================================================ */
input[type=month], input[type=date], input[type=datetime-local]{
  font-family:inherit; font-size:.88rem; color:#0D182B; background:#fff;
  border:1px solid rgba(13,24,43,.16); border-radius:8px; padding:8px 11px;
  min-height:38px;
}
input[type=month]:hover, input[type=date]:hover{ border-color:rgba(28,158,118,.45); }
input[type=month]:focus, input[type=date]:focus, input[type=datetime-local]:focus{
  outline:none; border-color:#1C9E76; box-shadow:0 0 0 3px rgba(28,158,118,.14);
}
/* The calendar button: brand-tinted, and it grows on hover so the hit target
   is obvious. Chromium only; other engines keep their own affordance. */
input[type=month]::-webkit-calendar-picker-indicator,
input[type=date]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator{
  cursor:pointer; opacity:.55; padding:3px; border-radius:5px;
  filter:invert(46%) sepia(64%) saturate(455%) hue-rotate(112deg) brightness(93%) contrast(89%);
  transition:opacity .12s, background .12s;
}
input[type=month]::-webkit-calendar-picker-indicator:hover,
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=datetime-local]::-webkit-calendar-picker-indicator:hover{
  opacity:1; background:rgba(28,158,118,.12);
}
input[type=month]::-webkit-datetime-edit,
input[type=date]::-webkit-datetime-edit{ padding:0; }
input[type=month]::-webkit-datetime-edit-fields-wrapper{ padding:0; }

/* Commission timeline */
.tl-table{ min-width:760px; }
.tl-table thead th a{ color:inherit; text-decoration:none; font-weight:600; }
.tl-table thead th a:hover{ color:#1C9E76; }
.tl-total{ background:rgba(28,158,118,.05); }
.tl-table tfoot td{ border-top:2px solid rgba(13,24,43,.14); padding-top:11px; }
.chip.on{ background:#1C9E76; border-color:#1C9E76; color:#fff; }
.table-tools .chip{ text-decoration:none; }

/* ============================================================
   Month picker — replaces the native calendar panel, which is
   browser chrome and cannot be styled with CSS.
   ============================================================ */
.mp-wrap{ position:relative; display:inline-flex; align-items:center; width:100%; }
.mp-wrap input[type=month]{ width:100%; padding-right:34px; }
/* The native trigger is hidden so only the branded panel can open. */
.mp-wrap input[type=month]::-webkit-calendar-picker-indicator{ display:none; opacity:0; }
.mp-btn{
  position:absolute; right:5px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  border:none; background:none; border-radius:6px; cursor:pointer; color:#5a6472;
  transition:background .12s, color .12s;
}
.mp-btn:hover{ background:rgba(28,158,118,.12); color:#1C9E76; }
.mp-wrap.open .mp-btn{ background:rgba(28,158,118,.14); color:#1C9E76; }
.mp-btn:focus-visible{ outline:2px solid #1C9E76; outline-offset:1px; }

.mp-pop{
  position:absolute; z-index:60; top:calc(100% + 6px); left:0; width:252px;
  background:#fff; border:1px solid rgba(13,24,43,.12); border-radius:12px;
  box-shadow:0 14px 38px rgba(13,24,43,.16); padding:12px;
}
.mp-pop.up{ top:auto; bottom:calc(100% + 6px); }
.mp-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.mp-year{ font-weight:700; font-size:.98rem; color:#0D182B; }
.mp-nav{
  width:28px; height:28px; border:1px solid rgba(13,24,43,.12); background:#fff;
  border-radius:7px; cursor:pointer; font-size:16px; line-height:1; color:#0D182B;
}
.mp-nav:hover:not(:disabled){ border-color:#1C9E76; color:#1C9E76; }
.mp-nav:disabled{ opacity:.32; cursor:default; }
.mp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.mp-cell{
  padding:9px 0; border:1px solid transparent; border-radius:8px; background:#f6f8f7;
  font-family:inherit; font-size:.84rem; font-weight:600; color:#424243; cursor:pointer;
  transition:background .12s, color .12s;
}
.mp-cell:hover:not(:disabled){ background:rgba(28,158,118,.14); color:#157a5a; }
.mp-cell.today{ border-color:rgba(28,158,118,.45); }
.mp-cell.on{ background:#1C9E76; color:#fff; }
.mp-cell:disabled{ opacity:.3; cursor:default; }
.mp-foot{
  display:flex; justify-content:space-between; margin-top:10px;
  padding-top:9px; border-top:1px solid rgba(13,24,43,.08);
}
.mp-link{
  border:none; background:none; font-family:inherit; font-size:.79rem;
  font-weight:600; color:#1C9E76; cursor:pointer; padding:2px 4px; border-radius:5px;
}
.mp-link:hover{ text-decoration:underline; }

/* Confirm dialog — replaces window.confirm() */
.cf-card{ max-width:400px; }
.cf-text{ margin:0; font-size:.92rem; color:#424243; line-height:1.55; }
.cf-modal .modal-head h2{ font-size:1.06rem; }

/* MFA */
.acct-link{
  display:block; padding:8px 12px; font-size:.86rem; color:#424243;
  text-decoration:none; border-radius:7px; margin:0 4px;
}
.acct-link:hover{ background:rgba(28,158,118,.08); color:#157a5a; }
.mfa-steps{ margin:0; padding-left:20px; }
.mfa-steps li{ margin-bottom:18px; line-height:1.6; }
.mfa-qr{ margin:10px 0; padding:10px; background:#fff; border:1px solid rgba(13,24,43,.12); border-radius:10px; width:fit-content; }
.mfa-secret{ margin:8px 0 0; }
.mfa-secret code{
  display:inline-block; background:#f0f4f3; padding:8px 12px; border-radius:8px;
  font-size:.95rem; letter-spacing:.09em; color:#0D182B; font-weight:600;
}
.mfa-form{ display:flex; gap:9px; margin-top:10px; flex-wrap:wrap; }
.mfa-form input{
  flex:1 1 150px; padding:10px 13px; border:1px solid rgba(13,24,43,.18); border-radius:9px;
  font-size:1.15rem; letter-spacing:.22em; font-family:ui-monospace,Menlo,monospace; text-align:center;
}
.mfa-form input:focus{ outline:none; border-color:#1C9E76; box-shadow:0 0 0 3px rgba(28,158,118,.14); }
.mfa-codes{
  display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:0 0 18px;
  padding:14px; background:#f7faf9; border:1px solid rgba(13,24,43,.10); border-radius:10px;
}
.mfa-codes code{ font-size:.92rem; letter-spacing:.06em; color:#0D182B; font-weight:600; }
.mfa-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ============================================================
   Sign-in backdrop — animated double helix

   Decorative only: aria-hidden, behind the card, and removed
   entirely for anyone who has asked for less motion. Animates
   transform alone so it stays on the compositor and never
   competes with typing in the form.
   ============================================================ */

.login-page { position: relative; overflow: hidden; isolation: isolate; }

.dna-bg {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.dna-col {
  position: absolute; top: 0; bottom: 0;
  display: block; overflow: hidden;
}
/* Taller than the column so the strip still covers while mid-translate. */
.dna-strip {
  position: absolute; left: 0; right: 0; top: 0; height: calc(100% + var(--tile, 300px));
  background-repeat: repeat-y;
  animation-name: dna-drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

/* Exactly one tile of travel, so the loop point is invisible. */
@keyframes dna-drift {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(var(--tile, 300px) * -1)); }
}

.login-page .login-card { position: relative; z-index: 1; }

/* Softens the helix behind the card so text never sits on a moving edge. */
.login-page::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(620px 460px at 50% 50%, rgba(246,248,250,.94), rgba(246,248,250,.58) 46%, transparent 74%);
}

@media (max-width: 640px) {
  .dna-col:nth-child(2), .dna-col:nth-child(3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dna-strip { animation: none; }
}