.fangindex-preview {
  --fi-bg: #edf4f6;
  --fi-card: rgba(255, 255, 255, .91);
  --fi-text: #102733;
  --fi-muted: #667d88;
  --fi-line: rgba(28, 57, 70, .12);
  --fi-blue: #10739e;
  --fi-blue-soft: #e4f3f8;
  --fi-green: #238054;
  --fi-green-soft: #e6f4eb;
  --fi-amber: #a96413;
  --fi-amber-soft: #fff3e2;
  --fi-red: #ad3840;
  --fi-red-soft: #fcebed;
  --fi-radius-xl: 27px;
  --fi-radius-lg: 20px;
  --fi-radius-md: 13px;
  box-sizing: border-box;
  min-height: 0;
  margin: 0;
  color: var(--fi-text);
  background: transparent;
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  line-height: 1.45;
}

.fangindex-preview *,
.fangindex-preview *::before,
.fangindex-preview *::after {
  box-sizing: border-box;
}

.fangindex-preview h1,
.fangindex-preview h2,
.fangindex-preview p,
.fangindex-preview ul,
.fangindex-preview dl,
.fangindex-preview dt,
.fangindex-preview dd {
  margin: 0;
}

.fangindex-preview button {
  cursor: pointer;
  font: inherit;
}

.fangindex-preview button:disabled {
  cursor: wait;
  opacity: .58;
}

.fangindex-preview :focus-visible {
  outline: 3px solid rgba(16, 115, 158, .35);
  outline-offset: 2px;
}

.fangindex-preview .fi-shell {
  width: 100%;
  margin: 0 auto;
  padding: 0 0 38px;
}

.fangindex-preview.fi-setup-open {
  min-height: min(740px, calc(100dvh - 20px));
}

.fangindex-preview.fi-setup-open .fi-shell,
.fangindex-preview.fi-setup-open .fi-mini-dock {
  display: none;
}

.fangindex-preview .fi-widget {
  display: grid;
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.fangindex-preview .fi-card {
  min-width: 0;
  padding: clamp(15px, 2.2vw, 20px);
  border: 1px solid var(--fi-line);
  border-radius: var(--fi-radius-lg);
  background: var(--fi-card);
}

.fangindex-preview .fi-index-hero {
  position: relative;
  display: grid;
  gap: 14px;
  overflow: hidden;
  min-height: 305px;
  padding: clamp(18px, 3.5vw, 27px);
  border: 1px solid var(--fi-line);
  border-radius: var(--fi-radius-lg);
  background:
    radial-gradient(circle at 91% 75%, rgba(12, 116, 153, .13), transparent 18rem),
    linear-gradient(115deg, rgba(255, 255, 255, .99), rgba(226, 243, 247, .88));
}

.fangindex-preview .fi-index-hero::after {
  position: absolute;
  right: -58px;
  bottom: -104px;
  width: 320px;
  height: 235px;
  content: "";
  border-radius: 50%;
  background: repeating-radial-gradient(ellipse, transparent 0 17px, rgba(16, 115, 158, .075) 18px 20px, transparent 21px 38px);
}

.fangindex-preview .fi-index-top {
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

.fangindex-preview .fi-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  color: var(--fi-blue);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.fangindex-preview .fi-eyebrow::before {
  width: 8px;
  height: 8px;
  content: "";
  border-radius: 50%;
  background: #087b71;
  box-shadow: 0 0 0 5px rgba(8, 123, 113, .12);
}

.fangindex-preview .fi-fish {
  font-size: clamp(1.55rem, 3.2vw, 2.15rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.045em;
}

.fangindex-preview .fi-latin {
  margin-top: 4px;
  color: var(--fi-muted);
  font-size: .8rem;
  font-style: italic;
}

.fangindex-preview .fi-index-actions {
  z-index: 1;
  display: flex;
  gap: 8px;
  align-items: center;
}

.fangindex-preview .fi-pill {
  min-height: 33px;
  padding: 6px 11px;
  border-radius: 999px;
  color: var(--fi-blue);
  background: var(--fi-blue-soft);
  font-size: .78rem;
  font-weight: 500;
  white-space: nowrap;
}

.fangindex-preview .fi-location-control {
  border: 1px solid transparent;
  transition: border-color .16s ease, background .16s ease;
}

.fangindex-preview .fi-location-control:hover {
  border-color: rgba(16, 115, 158, .16);
  background: #dceef4;
}

.fangindex-preview .fi-pill[data-tone="success"] {
  color: var(--fi-green);
  background: var(--fi-green-soft);
}

.fangindex-preview .fi-pill[data-tone="warning"] {
  color: var(--fi-amber);
  background: var(--fi-amber-soft);
}

.fangindex-preview .fi-refresh {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(16, 115, 158, .18);
  border-radius: 50%;
  color: var(--fi-blue);
  background: #fff;
}

.fangindex-preview .fi-refresh svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fangindex-preview .fi-index-body {
  z-index: 1;
  display: grid;
  grid-template-columns: 135px minmax(205px, .75fr) minmax(300px, 1fr);
  gap: clamp(16px, 3vw, 29px);
  align-items: center;
}

.fangindex-preview .fi-ring {
  --fi-angle: 0deg;
  --fi-color: var(--fi-blue);
  position: relative;
  display: grid;
  place-items: center;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 50px, transparent 51px),
    conic-gradient(var(--fi-color) 0 var(--fi-angle), rgba(115, 143, 157, .19) var(--fi-angle) 360deg);
  box-shadow: inset 0 0 0 1px rgba(16, 115, 158, .04), 0 9px 22px rgba(16, 115, 158, .08);
}

.fangindex-preview .fi-ring::after {
  position: absolute;
  top: 4px;
  left: calc(50% - 6px);
  width: 12px;
  height: 12px;
  content: "";
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--fi-color);
  box-shadow: 0 3px 8px rgba(9, 58, 73, .2);
  transform: rotate(var(--fi-angle));
  transform-origin: 6px 63px;
}

.fangindex-preview .fi-score-number {
  display: block;
  font-size: 2.22rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.06em;
  text-align: center;
}

.fangindex-preview .fi-score-unit {
  display: block;
  margin-top: 2px;
  color: var(--fi-muted);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
}

.fangindex-preview .fi-result-copy {
  display: grid;
  gap: 8px;
}

.fangindex-preview .fi-result-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fangindex-preview .fi-score-label,
.fangindex-preview .fi-confidence {
  display: inline-flex;
  width: max-content;
  min-height: 29px;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 500;
}

.fangindex-preview .fi-score-label[data-level="good"],
.fangindex-preview .fi-score-label[data-level="very_good"] {
  color: var(--fi-green);
  background: var(--fi-green-soft);
}

.fangindex-preview .fi-score-label[data-level="medium"] {
  color: var(--fi-amber);
  background: var(--fi-amber-soft);
}

.fangindex-preview .fi-score-label[data-level="bad"],
.fangindex-preview .fi-score-label[data-level="very_bad"] {
  color: var(--fi-red);
  background: var(--fi-red-soft);
}

.fangindex-preview .fi-score-label[data-level="pending"],
.fangindex-preview .fi-confidence {
  color: var(--fi-blue);
  background: var(--fi-blue-soft);
}

.fangindex-preview .fi-window-inline {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 8px;
  align-items: center;
  margin-top: 2px;
  font-size: .84rem;
  font-weight: 500;
}

.fangindex-preview .fi-hero-place {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  width: max-content;
  max-width: 100%;
  color: #426171;
  font-size: .76rem;
}

.fangindex-preview .fi-hero-place svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--fi-blue);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fangindex-preview .fi-hero-place .is-muted {
  color: var(--fi-muted);
}

.fangindex-preview .fi-window-inline strong {
  grid-column: 2;
  font-size: 1.14rem;
  font-weight: 500;
  letter-spacing: -.03em;
}

.fangindex-preview .fi-now-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--fi-amber);
}

.fangindex-preview .fi-now-dot[data-tone="success"] {
  background: var(--fi-green);
}

.fangindex-preview .fi-hero-fish {
  width: 100%;
  max-height: 166px;
  object-fit: contain;
  object-position: right center;
  filter: drop-shadow(0 12px 10px rgba(16, 38, 51, .17));
}

.fangindex-preview .fi-dashboard {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
}

.fangindex-preview .fi-metric {
  position: relative;
  min-height: 102px;
  padding: 13px 12px;
  border: 1px solid var(--fi-line);
  border-radius: var(--fi-radius-md);
  background: var(--fi-card);
  transition: background .18s ease, border-color .18s ease;
}

.fangindex-preview .fi-metric[data-tone="good"] {
  border-color: rgba(35, 128, 84, .18);
  background: linear-gradient(145deg, #fff, rgba(230, 244, 235, .7));
}

.fangindex-preview .fi-metric[data-tone="good"] .fi-metric-icon {
  color: var(--fi-green);
  background: var(--fi-green-soft);
}

.fangindex-preview .fi-metric[data-tone="warning"] {
  border-color: rgba(169, 100, 19, .18);
  background: linear-gradient(145deg, #fff, rgba(255, 243, 226, .68));
}

.fangindex-preview .fi-metric[data-tone="warning"] .fi-metric-icon {
  color: var(--fi-amber);
  background: var(--fi-amber-soft);
}

.fangindex-preview .fi-metric[data-tone="bad"] {
  border-color: rgba(173, 56, 64, .17);
  background: linear-gradient(145deg, #fff, rgba(252, 235, 237, .7));
}

.fangindex-preview .fi-metric[data-tone="bad"] .fi-metric-icon {
  color: var(--fi-red);
  background: var(--fi-red-soft);
}

.fangindex-preview .fi-metric[data-tone="muted"] {
  background: rgba(255, 255, 255, .74);
}

.fangindex-preview .fi-metric-icon {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  margin-bottom: 9px;
  border-radius: 9px;
  color: var(--fi-blue);
  background: var(--fi-blue-soft);
}

.fangindex-preview .fi-metric-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fangindex-preview .fi-metric-name {
  display: block;
  margin-bottom: 5px;
  color: var(--fi-muted);
  font-size: .67rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.fangindex-preview .fi-metric-value {
  display: block;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fangindex-preview .fi-metric-value.is-muted {
  color: #9aaab0;
  font-size: .9rem;
  font-weight: 500;
}

.fangindex-preview .fi-metric-note {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--fi-muted);
  font-size: .7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fangindex-preview .fi-info-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.fangindex-preview .fi-section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 13px;
}

.fangindex-preview .fi-section-title {
  font-size: .98rem;
  font-weight: 500;
  letter-spacing: -.02em;
}

.fangindex-preview .fi-tactics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.fangindex-preview .fi-tactic {
  overflow: hidden;
  min-width: 0;
  padding: 0;
  border: 1px solid rgba(16, 115, 158, .11);
  border-radius: 16px;
  background: #fff;
}

.fangindex-preview .fi-tactic-thumb {
  display: block;
  width: 100%;
  height: 92px;
  object-fit: cover;
  object-position: center;
  filter: saturate(.92) contrast(1.04);
}

.fangindex-preview .fi-tactic-copy {
  display: grid;
  gap: 3px;
  padding: 10px 12px 11px;
}

.fangindex-preview .fi-tactic-name {
  margin-bottom: 1px;
  color: var(--fi-muted);
  font-size: .67rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.fangindex-preview .fi-tactic strong {
  display: block;
  font-size: .89rem;
  font-weight: 500;
  line-height: 1.23;
}

.fangindex-preview .fi-tactic small {
  display: block;
  color: var(--fi-muted);
  font-size: .69rem;
}

.fangindex-preview .fi-card-title {
  margin-bottom: 3px;
  color: var(--fi-muted);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.fangindex-preview .fi-activity-badge {
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--fi-blue);
  background: var(--fi-blue-soft);
  font-size: .71rem;
  font-weight: 500;
  white-space: nowrap;
}

.fangindex-preview .fi-activity-badge[data-tone="success"] {
  color: var(--fi-green);
  background: var(--fi-green-soft);
}

.fangindex-preview .fi-activity-badge[data-tone="warning"] {
  color: var(--fi-amber);
  background: var(--fi-amber-soft);
}

.fangindex-preview .fi-chart {
  position: relative;
  height: 145px;
  margin-top: 2px;
}

.fangindex-preview .fi-bite-range {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: var(--fi-start, 20%);
  width: var(--fi-width, 8%);
  border: 1px solid rgba(35, 128, 84, .12);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(35, 128, 84, .15), rgba(35, 128, 84, .045));
}

.fangindex-preview .fi-bite-range-dusk {
  background: linear-gradient(180deg, rgba(35, 128, 84, .17), rgba(35, 128, 84, .05));
}

.fangindex-preview .fi-bite-range small {
  position: absolute;
  bottom: 7px;
  left: 50%;
  padding: 2px 5px;
  border-radius: 7px;
  color: var(--fi-green);
  background: #fff;
  font-size: .57rem;
  font-weight: 500;
  white-space: nowrap;
  transform: translateX(-50%);
}

.fangindex-preview .fi-chart svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.fangindex-preview .fi-chart-area {
  fill: url(#activity-area);
}

.fangindex-preview .fi-chart-line {
  fill: none;
  stroke: #1684a5;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.fangindex-preview .fi-chart-marker {
  position: absolute;
  top: 0;
  left: var(--fi-now, 50%);
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  width: 38px;
  transform: translateX(-50%);
}

.fangindex-preview .fi-chart-marker::before {
  position: absolute;
  top: 17px;
  bottom: 0;
  width: 1px;
  content: "";
  background: rgba(16, 115, 158, .31);
}

.fangindex-preview .fi-chart-marker strong {
  z-index: 1;
  width: 13px;
  height: 13px;
  margin-top: 34px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--fi-blue);
  box-shadow: 0 2px 8px rgba(16, 115, 158, .32);
}

.fangindex-preview .fi-chart-marker small {
  position: absolute;
  top: 0;
  padding: 2px 6px;
  border-radius: 8px;
  color: var(--fi-blue);
  background: var(--fi-blue-soft);
  font-size: .63rem;
  font-weight: 500;
}

.fangindex-preview .fi-chart-scale {
  display: flex;
  justify-content: space-between;
  margin-top: -2px;
  color: var(--fi-muted);
  font-size: .63rem;
}

.fangindex-preview .fi-insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 15px;
}

.fangindex-preview .fi-insight {
  position: relative;
  display: grid;
  gap: 3px;
  min-height: 64px;
  padding: 10px 10px 10px 27px;
  border: 1px solid rgba(16, 115, 158, .06);
  border-radius: 13px;
  background: rgba(237, 244, 246, .62);
}

.fangindex-preview .fi-insight::before {
  position: absolute;
  left: 9px;
  top: 13px;
  width: 9px;
  height: 9px;
  content: "";
  border-radius: 50%;
  background: var(--fi-amber);
}

.fangindex-preview .fi-insight[data-type="positive"]::before {
  background: var(--fi-green);
}

.fangindex-preview .fi-insight[data-type="negative"]::before {
  background: var(--fi-red);
}

.fangindex-preview .fi-insight-title {
  font-size: .73rem;
  font-weight: 500;
}

.fangindex-preview .fi-insight-text {
  color: var(--fi-muted);
  font-size: .67rem;
  line-height: 1.35;
}

.fangindex-preview .fi-legal {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px 45px 9px 12px;
  border: 1px solid rgba(169, 97, 17, .14);
  border-radius: var(--fi-radius-md);
  color: #745126;
  background: var(--fi-amber-soft);
  font-size: .75rem;
}

.fangindex-preview .fi-legal[hidden] {
  display: none;
}

.fangindex-preview .fi-legal p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fangindex-preview .fi-legal-mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: .75rem;
  font-weight: 500;
}

.fangindex-preview .fi-legal-close {
  position: absolute;
  top: 50%;
  right: 10px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #89652c;
  background: rgba(169, 100, 19, .09);
  font-size: 1.1rem;
  line-height: 1;
  transform: translateY(-50%);
}

.fangindex-preview .fi-details {
  overflow: hidden;
  border: 1px solid var(--fi-line);
  border-radius: var(--fi-radius-lg);
  background: var(--fi-card);
}

.fangindex-preview .fi-details summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  align-items: center;
  padding: 14px 17px;
  cursor: pointer;
  list-style: none;
  font-size: .87rem;
  font-weight: 500;
}

.fangindex-preview .fi-details summary::-webkit-details-marker {
  display: none;
}

.fangindex-preview .fi-details summary span:last-child {
  color: var(--fi-muted);
  font-size: .75rem;
  font-weight: 500;
}

.fangindex-preview .fi-detail-body {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 18px;
  padding: 16px 17px 18px;
  border-top: 1px solid var(--fi-line);
}

.fangindex-preview .fi-detail-spacer {
  margin-top: 22px;
}

.fangindex-preview .fi-bars,
.fangindex-preview .fi-data-list {
  display: grid;
  gap: 9px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.fangindex-preview .fi-bar {
  display: grid;
  grid-template-columns: 105px 1fr 110px;
  gap: 8px;
  align-items: center;
  color: var(--fi-muted);
  font-size: .72rem;
}

.fangindex-preview .fi-track {
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: #e1e9ec;
}

.fangindex-preview .fi-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--fi-blue);
}

.fangindex-preview .fi-data-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(28, 57, 70, .08);
  color: var(--fi-muted);
  font-size: .77rem;
}

.fangindex-preview .fi-data-list strong {
  color: var(--fi-text);
  font-weight: 500;
}

.fangindex-preview .fi-variable-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 15px;
  margin-top: 12px;
}

.fangindex-preview .fi-variable {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(28, 57, 70, .08);
  font-size: .75rem;
}

.fangindex-preview .fi-variable span {
  color: var(--fi-muted);
}

.fangindex-preview .fi-variable strong {
  font-weight: 500;
  text-align: right;
}

.fangindex-preview .fi-foot {
  padding: 1px 4px 0;
  color: var(--fi-muted);
  font-size: .74rem;
}

.fangindex-preview .fi-foot a {
  color: var(--fi-blue);
}

.fangindex-preview .fi-button {
  min-height: 45px;
  padding: 10px 16px;
  border: 1px solid rgba(28, 57, 70, .18);
  border-radius: 999px;
  color: var(--fi-text);
  background: #fff;
  font-size: .9rem;
  font-weight: 500;
}

.fangindex-preview .fi-button-primary {
  border-color: var(--fi-blue);
  color: #fff;
  background: var(--fi-blue);
}

.fangindex-preview .fi-button-primary:hover:not(:disabled) {
  background: #0c5c80;
}

.fangindex-preview .fi-button-success {
  border-color: #168451;
  color: #fff;
  background: linear-gradient(110deg, #168451, #20a56e);
  box-shadow: 0 9px 20px rgba(25, 135, 84, .18);
}

.fangindex-preview .fi-button-success:hover:not(:disabled) {
  background: linear-gradient(110deg, #126b41, #188d5d);
}

.fangindex-preview .fi-toast-stack {
  position: fixed;
  z-index: 70;
  top: 17px;
  left: 50%;
  display: grid;
  gap: 8px;
  width: min(410px, calc(100vw - 34px));
  transform: translateX(-50%);
  pointer-events: none;
}

.fangindex-preview.fi-has-mini-index .fi-toast-stack {
  top: 76px;
}

.fangindex-preview .fi-toast {
  padding: 12px 14px;
  border-radius: var(--fi-radius-md);
  color: #15536d;
  background: rgba(228, 242, 247, .98);
  box-shadow: 0 16px 42px rgba(20, 44, 57, .17);
  transform: translateY(-14px);
  opacity: 0;
  animation: fi-toast-in .23s ease forwards;
  font-size: .83rem;
}

.fangindex-preview .fi-toast[data-tone="success"] {
  color: var(--fi-green);
  background: rgba(231, 244, 235, .98);
}

.fangindex-preview .fi-toast[data-tone="warning"] {
  color: #80500f;
  background: rgba(255, 243, 226, .98);
}

.fangindex-preview .fi-toast.is-leaving {
  animation: fi-toast-out .22s ease forwards;
}

@keyframes fi-toast-in {
  to { transform: translateY(0); opacity: 1; }
}

@keyframes fi-toast-out {
  to { transform: translateY(-9px); opacity: 0; }
}

.fangindex-preview .fi-modal-backdrop {
  position: relative;
  z-index: 10000;
  display: grid;
  place-items: center;
  min-height: min(740px, calc(100dvh - 20px));
  padding: clamp(22px, 5vw, 52px) 16px;
  background: transparent;
}

.fangindex-preview .fi-modal-backdrop[hidden],
.fangindex-preview .fi-step[hidden] {
  display: none;
}

.fangindex-preview .fi-modal {
  display: flex;
  flex-direction: column;
  width: min(475px, 100%);
  max-height: min(calc(100dvh - 26px), 760px);
  overflow: hidden;
  padding: clamp(21px, 4vw, 28px);
  border-radius: 27px;
  background: #fff;
  box-shadow: 0 28px 75px rgba(7, 25, 35, .28);
}

.fangindex-preview .fi-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}

.fangindex-preview .fi-modal-title {
  font-size: clamp(1.46rem, 4vw, 1.72rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.04em;
}

.fangindex-preview .fi-step {
  min-height: 0;
}

.fangindex-preview .fi-progress {
  display: flex;
  gap: 6px;
  margin-top: 7px;
}

.fangindex-preview .fi-progress-dot {
  width: 26px;
  height: 6px;
  border-radius: 10px;
  background: #dce6e9;
}

.fangindex-preview .fi-progress-dot.is-active {
  background: var(--fi-blue);
}

.fangindex-preview .fi-step-copy {
  margin-bottom: 15px;
  color: var(--fi-muted);
  font-size: .88rem;
}

.fangindex-preview .fi-step-copy-short {
  max-width: 365px;
}

.fangindex-preview .fi-location-art {
  display: grid;
  place-items: center;
  height: 122px;
  margin: -5px 0 6px;
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(228, 243, 248, .42), rgba(245, 250, 251, .12));
}

.fangindex-preview .fi-location-art svg {
  width: min(240px, 100%);
  height: 122px;
}

.fangindex-preview .fi-location-art.is-collapsed {
  height: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  transition: height .22s ease, margin .22s ease, opacity .18s ease;
}

.fangindex-preview .fi-location-wave {
  fill: none;
  stroke: rgba(16, 115, 158, .26);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.fangindex-preview .fi-location-wave-light {
  opacity: .48;
}

.fangindex-preview .fi-location-pin {
  fill: var(--fi-blue);
  filter: drop-shadow(0 9px 12px rgba(16, 115, 158, .2));
}

.fangindex-preview .fi-location-pin-center {
  fill: #fff;
}

.fangindex-preview .fi-location-scan {
  fill: none;
  stroke: rgba(16, 115, 158, .28);
  stroke-width: 2;
  transform-origin: 120px 66px;
  animation: fi-location-scan 2.25s ease-out infinite;
}

.fangindex-preview .fi-location-scan-delay {
  animation-delay: 1.1s;
}

@keyframes fi-location-scan {
  0% { transform: scale(.22); opacity: 0; }
  25% { opacity: .8; }
  100% { transform: scale(1.18); opacity: 0; }
}

.fangindex-preview .fi-consent-links {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 19px;
}

.fangindex-preview .fi-small-disclosure {
  position: relative;
}

.fangindex-preview .fi-small-disclosure summary {
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--fi-blue);
  background: var(--fi-blue-soft);
  cursor: pointer;
  font-size: .74rem;
  font-weight: 500;
  list-style: none;
}

.fangindex-preview .fi-small-disclosure summary::-webkit-details-marker {
  display: none;
}

.fangindex-preview .fi-small-disclosure p {
  position: absolute;
  z-index: 5;
  left: 0;
  width: min(390px, calc(100vw - 72px));
  margin-top: 7px;
  padding: 10px 11px;
  border-radius: 11px;
  color: var(--fi-muted);
  background: #f3f7f8;
  font-size: .76rem;
  box-shadow: 0 10px 26px rgba(15, 43, 56, .12);
}

.fangindex-preview .fi-small-disclosure:last-child p {
  right: 0;
  left: auto;
}

.fangindex-preview .fi-permission-action {
  display: inline-flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 56px;
  font-size: 1rem;
}

.fangindex-preview .fi-button-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: fi-spin .72s linear infinite;
}

.fangindex-preview .fi-permission-action[data-state="loading"] .fi-button-spinner {
  display: inline-block;
}

.fangindex-preview .fi-permission-action[data-state="ready"] {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, #237f54, #22a16c);
}

@keyframes fi-spin {
  to { transform: rotate(360deg); }
}

.fangindex-preview .fi-modal-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.fangindex-preview .fi-fish-search {
  display: flex;
  gap: 9px;
  align-items: center;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid rgba(16, 115, 158, .15);
  border-radius: 15px;
  background: #f3f8fa;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.fangindex-preview .fi-fish-search:focus-within {
  border-color: var(--fi-blue);
  box-shadow: 0 0 0 4px rgba(16, 115, 158, .09);
}

.fangindex-preview .fi-fish-search svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--fi-blue);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.fangindex-preview .fi-fish-search input {
  width: 100%;
  border: 0;
  color: var(--fi-text);
  background: transparent;
  font: inherit;
  font-size: .91rem;
  outline: 0;
}

.fangindex-preview .fi-fish-search input::placeholder {
  color: #78909a;
}

.fangindex-preview .fi-search-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 3px 10px;
  color: var(--fi-muted);
  font-size: .72rem;
}

.fangindex-preview .fi-search-meta span {
  color: var(--fi-blue);
  font-weight: 500;
}

.fangindex-preview .fi-empty-result {
  margin: 12px 0 18px;
  padding: 13px;
  border-radius: 13px;
  color: var(--fi-muted);
  background: #f3f7f8;
  font-size: .84rem;
}

.fangindex-preview .fi-choice {
  position: relative;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 74px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--fi-line);
  border-radius: 15px;
  color: inherit;
  background: rgba(255, 255, 255, .92);
  text-align: left;
  box-shadow: 0 8px 18px rgba(16, 39, 51, .05);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.fangindex-preview .fi-choice:hover,
.fangindex-preview .fi-choice:focus-visible {
  border-color: rgba(16, 115, 158, .42);
  background: #fff;
  box-shadow: 0 12px 24px rgba(16, 39, 51, .08);
  transform: translateY(-1px);
}

.fangindex-preview .fi-choice-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-height: 330px;
  margin: 8px 0 20px;
  overflow-y: auto;
}

.fangindex-preview .fi-choice-list .fi-choice {
  margin: 0;
}

.fangindex-preview .fi-choice[hidden],
.fangindex-preview .fi-empty-result[hidden] {
  display: none;
}

.fangindex-preview .fi-choice img {
  width: 74px;
  height: 52px;
  object-fit: contain;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(16, 115, 158, .08), rgba(255, 255, 255, .75));
  filter: drop-shadow(0 5px 5px rgba(16, 38, 51, .12));
}

.fangindex-preview .fi-choice span {
  width: 100%;
}

.fangindex-preview .fi-choice-name {
  display: block;
  font-size: .96rem;
  font-weight: 500;
  line-height: 1.2;
}

.fangindex-preview .fi-choice-scientific {
  display: block;
  margin-top: 2px;
  color: var(--fi-muted);
  font-size: .76rem;
  font-style: italic;
}

@media (max-width: 560px) {
  .fangindex-preview .fi-choice-list {
    grid-template-columns: 1fr;
  }
}

.fangindex-preview .fi-mini-dock {
  position: fixed;
  z-index: 45;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 5px;
  align-items: center;
  transform: translateY(-16px);
  opacity: 0;
  pointer-events: none;
  transition: transform .2s ease, opacity .2s ease;
}

.fangindex-preview .fi-mini-dock.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.fangindex-preview .fi-mini-index {
  --fi-mini-angle: 0deg;
  --fi-mini-color: var(--fi-green);
  display: grid;
  grid-template-columns: 46px 42px;
  gap: 4px 6px;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 17px;
  color: #fff;
  background: rgba(12, 92, 119, .94);
  box-shadow: 0 12px 32px rgba(15, 43, 56, .2);
}

.fangindex-preview .fi-mini-refresh {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  color: rgba(12, 92, 119, .82);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 9px 20px rgba(15, 43, 56, .12);
}

.fangindex-preview .fi-mini-refresh svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fangindex-preview .fi-mini-ring {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(12, 92, 119, .94) 0 16px, transparent 17px),
    conic-gradient(var(--fi-mini-color) 0 var(--fi-mini-angle), rgba(255,255,255,.2) var(--fi-mini-angle) 360deg);
}

.fangindex-preview .fi-mini-ring strong {
  font-size: .95rem;
  font-weight: 500;
}

.fangindex-preview .fi-mini-index img {
  width: 37px;
  height: 19px;
  object-fit: contain;
}

.fangindex-preview .fi-mini-index > span:last-child {
  grid-column: 2;
  display: grid;
  line-height: 1.05;
}

.fangindex-preview .fi-mini-index > span:last-child strong {
  font-size: .65rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.fangindex-preview .fi-mini-index > span:last-child small {
  font-size: .62rem;
  opacity: .84;
}

@media (max-width: 920px) {
  .fangindex-preview .fi-index-body {
    grid-template-columns: 128px 1fr;
  }

  .fangindex-preview .fi-hero-fish {
    grid-column: 1 / -1;
    height: 125px;
    object-position: center;
  }

  .fangindex-preview .fi-dashboard {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fangindex-preview .fi-tactics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 650px) {
  .fangindex-preview .fi-shell {
    width: 100%;
    padding: 8px 8px 28px;
  }

  .fangindex-preview .fi-widget {
    gap: 9px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .fangindex-preview .fi-index-hero {
    padding: 14px;
    min-height: 0;
  }

  .fangindex-preview .fi-index-top {
    align-items: center;
  }

  .fangindex-preview .fi-index-body {
    grid-template-columns: 127px 1fr;
    gap: 12px;
  }

  .fangindex-preview .fi-ring {
    width: 127px;
    height: 127px;
    background:
      radial-gradient(circle, rgba(255,255,255,.98) 0 47px, transparent 48px),
      conic-gradient(var(--fi-color) 0 var(--fi-angle), rgba(115, 143, 157, .19) var(--fi-angle) 360deg);
    box-shadow: 0 14px 30px rgba(16, 115, 158, .14);
  }

  .fangindex-preview .fi-ring::after {
    transform-origin: 6px 59.5px;
  }

  .fangindex-preview .fi-score-number {
    font-size: 2.16rem;
  }

  .fangindex-preview .fi-hero-fish {
    grid-column: 2;
    grid-row: 1;
    height: 84px;
    object-position: center;
  }

  .fangindex-preview .fi-pill {
    min-height: 31px;
    padding: 5px 8px;
    font-size: .68rem;
  }

  .fangindex-preview .fi-result-copy {
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 7px;
  }

  .fangindex-preview .fi-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .fangindex-preview .fi-metric {
    min-height: 93px;
    padding: 11px;
  }

  .fangindex-preview .fi-metric-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 25px;
    height: 25px;
  }

  .fangindex-preview .fi-info-layout,
  .fangindex-preview .fi-detail-body {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .fangindex-preview .fi-chart {
    height: 142px;
  }

  .fangindex-preview .fi-insights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fangindex-preview .fi-insight:first-child {
    grid-column: 1 / -1;
  }

  .fangindex-preview .fi-tactic {
    min-height: 0;
  }

  .fangindex-preview .fi-tactic-thumb {
    width: 100%;
    height: 70px;
  }

  .fangindex-preview .fi-tactic-copy {
    padding: 8px 9px 9px;
  }

  .fangindex-preview .fi-tactic-name {
    margin-bottom: 3px;
  }

  .fangindex-preview .fi-tactic strong {
    font-size: .83rem;
  }

  .fangindex-preview .fi-tactic small {
    font-size: .66rem;
    line-height: 1.3;
  }

  .fangindex-preview .fi-legal {
    gap: 7px;
    min-height: 45px;
    padding: 7px 38px 7px 9px;
    font-size: .68rem;
    line-height: 1.28;
  }

  .fangindex-preview .fi-legal-mark {
    width: 18px;
    height: 18px;
  }

  .fangindex-preview .fi-legal p {
    display: -webkit-box;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .fangindex-preview .fi-legal-close {
    right: 7px;
    width: 24px;
    height: 24px;
  }

  .fangindex-preview .fi-bite-range small {
    font-size: .53rem;
  }

  .fangindex-preview .fi-variable-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .fangindex-preview .fi-variable {
    display: grid;
    gap: 2px;
  }

  .fangindex-preview .fi-variable strong {
    text-align: left;
  }

  .fangindex-preview .fi-modal-backdrop {
    padding: 8px;
  }

  .fangindex-preview .fi-modal {
    max-height: calc(100dvh - 16px);
    padding: 16px 14px;
    border-radius: 22px;
  }

  .fangindex-preview .fi-modal-head {
    margin-bottom: 11px;
  }

  .fangindex-preview .fi-modal-title {
    font-size: 1.37rem;
  }

  .fangindex-preview .fi-step-copy {
    margin-bottom: 10px;
    font-size: .8rem;
  }

  .fangindex-preview .fi-location-art {
    height: 91px;
    margin-bottom: 5px;
  }

  .fangindex-preview .fi-location-art svg {
    height: 91px;
  }

  .fangindex-preview .fi-consent-links {
    margin-bottom: 12px;
  }

  .fangindex-preview .fi-permission-action {
    min-height: 50px;
  }

  .fangindex-preview #setup-step-2 .fi-choice {
    margin-bottom: 13px;
    grid-template-columns: 62px minmax(0, 1fr);
    min-height: 66px;
    padding: 9px 10px;
  }

  .fangindex-preview #setup-step-2 .fi-choice img {
    width: 62px;
    height: 46px;
  }
}

@media (max-width: 650px) and (max-height: 620px) {
  .fangindex-preview .fi-modal {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .fangindex-preview .fi-modal-head {
    margin-bottom: 7px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .fangindex-preview *,
  .fangindex-preview *::before,
  .fangindex-preview *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}