/* Leak Map funnel chart: a dark product-style panel, five stages, leaks shown at each one. */
.lfx {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 0 0 22px; padding: clamp(24px, 3.2vw, 44px);
  border-radius: 30px; background: #0b0c14; color: #f4f3ee;
}
.lfx::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 70% at 100% 0%, rgba(99, 102, 241, .32), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgba(124, 58, 237, .22), transparent 70%);
}
.lfx-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: clamp(22px, 2.6vw, 34px); }
.lfx-k { display: block; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: #a5b4fc; margin-bottom: 8px; }
.lfx-t { margin: 0; font-family: var(--display); font-size: clamp(26px, 2.8vw, 38px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }

/* segmented control on dark glass */
.lfx-tog { display: inline-flex; gap: 3px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.lfx-tog button { border: 0; border-radius: 999px; padding: 10px 18px; min-height: 42px; font: 500 14.5px var(--display); color: #c7c9d9; background: none; cursor: pointer; transition: background .3s, color .3s; }
.lfx-tog button[aria-selected="true"] { background: #fff; color: #0b0c14; }
.lfx.fixed .lfx-tog button[aria-selected="true"] { background: #34d399; color: #04261b; }

/* rows */
.lfx-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lfx-row { display: grid; grid-template-columns: minmax(150px, 230px) minmax(0, 1fr) 52px 58px; gap: 18px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .07); }
.lfx-row:first-child { border-top: 0; }
.lfx-n b { display: block; font: 600 16px var(--display); letter-spacing: -.01em; color: #f4f3ee; }
.lfx-n small { display: block; margin-top: 2px; font-size: 13px; color: #9a9cb0; }
.lfx-bar { position: relative; height: 16px; border-radius: 999px; }
.lfx-bar i {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: 0 auto; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, #8b5cf6, #6366f1, #8b5cf6);
  transition: width 1.1s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 90ms), background .6s;
}
.lfx.fixed .lfx-bar i { background: linear-gradient(90deg, #34d399, #6366f1, #34d399); }
.lfx-start .lfx-bar i { background: rgba(255, 255, 255, .28) !important; }
.lfx-v { font: 700 20px var(--display); letter-spacing: -.02em; text-align: right; font-variant-numeric: tabular-nums; color: #fff; }
.lfx-loss { justify-self: end; min-width: 52px; text-align: center; padding: 5px 9px; border-radius: 999px; font: 600 13.5px var(--display); font-variant-numeric: tabular-nums; color: #ff8a8a; background: rgba(255, 82, 82, .12); transition: color .4s, background .4s; }
.lfx-loss:empty { visibility: hidden; }
.lfx.fixed .lfx-loss { color: #fbbf9a; background: rgba(251, 146, 60, .12); }

/* the leak: drops falling off the end of each bar */
.lfx-drop { position: absolute; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #ff6b6b; opacity: 0; pointer-events: none; transition: left 1.1s cubic-bezier(.2, .8, .2, 1); }
.lfx.on .lfx-drop { animation: lfxDrip 2.4s ease-in infinite; animation-delay: calc(var(--d) * 1s); }
.lfx.fixed .lfx-drop { animation-duration: 5.5s; }
@keyframes lfxDrip { 0%, 55% { opacity: 0; transform: translate(0, 0) scale(.6); } 62% { opacity: 1; transform: translate(4px, 2px) scale(1); } 100% { opacity: 0; transform: translate(10px, 30px) scale(.7); } }

/* bottom line */
.lfx-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-top: clamp(20px, 2.4vw, 30px); padding-top: clamp(18px, 2vw, 26px); border-top: 1px solid rgba(255, 255, 255, .1); }
.lfx-sum { margin: 0; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.lfx-big { font: 800 clamp(48px, 6vw, 80px)/.9 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: #fff; transition: color .5s; }
.lfx.fixed .lfx-big { color: #34d399; }
.lfx-sum span { font-size: clamp(16px, 1.4vw, 19px); color: #c7c9d9; max-width: 26ch; }
.lfx-note { margin: 0; font-size: 12.5px; color: #8a8ca3; }

@media (max-width: 760px) {
  .lfx { border-radius: 24px; }
  .lfx-tog { width: 100%; } .lfx-tog button { flex: 1; }
  .lfx-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 10px; padding: 12px 0; }
  .lfx-n { grid-column: 1; grid-row: 1; }
  .lfx-v { grid-column: 2; grid-row: 1; }
  .lfx-loss { grid-column: 3; grid-row: 1; }
  .lfx-bar { grid-column: 1 / -1; grid-row: 2; height: 14px; }
  .lfx-n small { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .lfx-bar i, .lfx-drop { transition: none; } .lfx.on .lfx-drop { animation: none; } }

/* make the Before / After switch obviously clickable */
.lfx-ctl { display: flex; align-items: center; gap: 12px; }
.lfx-hint { font: 500 14px var(--display); color: #6ee7b7; white-space: nowrap; transition: opacity .4s; }
.lfx-hint i { display: inline-block; font-style: normal; animation: lfxNudge 1.6s ease-in-out infinite; }
@keyframes lfxNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
.lfx-tog button { cursor: pointer; }
.lfx-tog button:not([aria-selected="true"]):hover { background: rgba(255, 255, 255, .1); color: #fff; }
.lfx-tog button[data-m="a"] { position: relative; }
.lfx:not(.tried) .lfx-tog button[data-m="a"] { color: #fff; background: rgba(52, 211, 153, .16); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .55); animation: lfxCall 2s ease-in-out infinite; }
@keyframes lfxCall { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .55), 0 0 0 0 rgba(52, 211, 153, .45); } 50% { box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .9), 0 0 0 8px rgba(52, 211, 153, 0); } }
.lfx.tried .lfx-hint { opacity: 0; visibility: hidden; width: 0; overflow: hidden; }
@media (max-width: 760px) { .lfx-ctl { width: 100%; flex-direction: column; align-items: stretch; gap: 8px; } .lfx-hint { text-align: center; } }
@media (prefers-reduced-motion: reduce) { .lfx-hint i, .lfx:not(.tried) .lfx-tog button[data-m="a"] { animation: none; } }

/* ---------- dashboard / CRM feel ---------- */
.lfx { --p: clamp(24px, 3.2vw, 44px); }
.lfx-app { display: flex; align-items: center; gap: 14px; margin: calc(var(--p) * -1) calc(var(--p) * -1) var(--p); padding: 13px var(--p); border-bottom: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); font: 500 13px var(--display); color: #9a9cb0; }
.lfx-dots { display: inline-flex; gap: 7px; } .lfx-dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .25); } .lfx-dots i:nth-child(2) { background: #febc2e; } .lfx-dots i:nth-child(3) { background: #28c840; }
.lfx-crumb em { font-style: normal; opacity: .5; margin: 0 4px; } .lfx-crumb b { color: #e8e8f0; font-weight: 600; }
.lfx-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 999px; color: #ff9b9b; background: rgba(255, 82, 82, .12); transition: color .4s, background .4s; }
.lfx-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: lfxBlink 1.6s ease-in-out infinite; }
.lfx.fixed .lfx-live { color: #6ee7b7; background: rgba(52, 211, 153, .12); }
@keyframes lfxBlink { 50% { opacity: .3; } }
.lfx-range { padding: 4px 11px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .1); }

/* before / after text swap (both in the HTML so the Hindi build translates them) */
.lfx-st em { font-style: normal; } .lfx-st .sa { display: none; }
.lfx.fixed .lfx-st .sb { display: none; } .lfx.fixed .lfx-st .sa { display: inline; }

/* KPI tiles */
.lfx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: clamp(22px, 2.6vw, 30px); }
.lfx-kpi { padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.lfx-kpi > span { display: block; font-size: 12.5px; color: #9a9cb0; }
.lfx-kv { display: block; margin: 6px 0 4px; font: 700 clamp(28px, 2.8vw, 38px)/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #fff; transition: color .5s; }
.lfx-kpi small { font-size: 12.5px; color: #8a8ca3; }
.lfx-kpi-bad .lfx-kv { color: #ff8a8a; } .lfx-kpi-good .lfx-kv { color: #fff; }
.lfx.fixed .lfx-kpi-bad .lfx-kv { color: #fbbf9a; } .lfx.fixed .lfx-kpi-good .lfx-kv { color: #34d399; }
.lfx.fixed .lfx-kpi-good { box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .06); }

/* table header + status column */
.lfx-th, .lfx-row { grid-template-columns: minmax(150px, 230px) minmax(0, 1fr) 52px 58px minmax(92px, max-content); }
.lfx-th { display: grid; gap: 18px; padding: 0 0 10px; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #75778c; }
.lfx-th span:nth-child(3), .lfx-th span:nth-child(4) { text-align: right; } .lfx-th span:nth-child(5) { text-align: center; }
.lfx-row:first-child { border-top: 0; }
.lfx-stat { justify-self: center; }
.lfx-stat em { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; font: 600 12.5px var(--display); }
.lfx-stat em::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lfx-stat .bad { color: #ff8a8a; background: rgba(255, 82, 82, .12); }
.lfx-stat .warn { color: #fcd34d; background: rgba(252, 211, 77, .1); }
.lfx-stat .mid { color: #a5f3d0; background: rgba(52, 211, 153, .1); }
.lfx-stat .ok { color: #34d399; background: rgba(52, 211, 153, .16); }
.lfx-stat .neu { color: #9a9cb0; background: rgba(255, 255, 255, .06); }
.lfx-foot { border-top: 0; padding-top: 0; }

@media (max-width: 760px) {
  .lfx-range, .lfx-crumb em, .lfx-crumb > :not(b) { display: none; }
  .lfx-app { gap: 10px; padding: 12px var(--p); }
  .lfx-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .lfx-kpi { padding: 13px 14px; }
  .lfx-th { display: none; }
  .lfx-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .lfx-row .lfx-bar { grid-column: 1; grid-row: 2; }
  .lfx-stat { grid-column: 2 / -1; grid-row: 2; justify-self: end; }
  .lfx-start .lfx-bar { grid-column: 1 / -1; }
  .lfx-start .lfx-stat { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lfx-live::before { animation: none; } }