/* FinPulse — finalytics.ae design language on a dark app surface. */

:root {
  --bg: #060a14;
  --surface: #0b1120;
  --surface-2: #101830;
  --card-border: rgba(255, 255, 255, 0.08);
  --card-border-strong: rgba(255, 255, 255, 0.14);
  --text: #f3f5fa;
  --text-2: #aab2c5;
  --text-3: #6f7890;
  --blue: #2e6bff;
  --mint: #2dd79f;
  --grad: linear-gradient(92deg, #2e6bff, #1e9bd7 55%, #2dd79f);
  /* validated chart series (dark surface #0b1120) */
  --s1: #3f7ef2;
  --s2: #17a97d;
  --s3: #c98500;
  --s4: #e66767;
  --good: #2dd79f;
  --warn: #f5b83d;
  --bad: #ff7a7a;
  --radius: 16px;
  --font: "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(46, 107, 255, 0.14), transparent 60%),
    radial-gradient(700px 420px at -10% 110%, rgba(45, 215, 159, 0.08), transparent 60%);
}
#app { position: relative; z-index: 1; }

h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; }
a { color: inherit; }
button { font-family: inherit; }

.num { font-variant-numeric: tabular-nums; }

/* ---------------------------------- nav */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; row-gap: 6px;
  padding: 9px 20px; min-height: 64px;
  background: rgba(6, 10, 20, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--card-border);
}
.logo { display: flex; align-items: flex-start; white-space: nowrap; flex-shrink: 0; }
.logo .pulse-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--mint); margin-left: 6px;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45, 215, 159, 0.5); }
  50% { box-shadow: 0 0 0 7px rgba(45, 215, 159, 0); }
}
.logo em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Module tabs get their own full-width row under the logo/account row, so every
   module is visible instead of the last few being clipped off the right edge.
   When the row is still too narrow to fit them all, updateNavFade() applies a
   fading mask on whichever edge has more tabs to scroll to. */
.nav {
  display: flex; gap: 2px; order: 10; flex: 1 1 100%;
  overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth;
  margin-top: 2px;
}
.nav::-webkit-scrollbar { display: none; }
/* logo eats the free space on row 1 so the sync chip + account controls group on
   the right (rather than the chip floating in the middle) */
.topbar > .logo { margin-right: auto; }
.nav a {
  padding: 8px 12px; border-radius: 10px; text-decoration: none;
  color: var(--text-2); font-weight: 600; font-size: 13px; white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.nav a.active { color: var(--text); background: rgba(46, 107, 255, 0.16); }

.sync-chip {
  display: flex; align-items: center; gap: 7px; flex-shrink: 0;
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid rgba(45, 215, 159, 0.35);
  color: var(--mint); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.sync-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); animation: pulse 2.4s infinite; }
/* sync freshness tiers: amber past 4h, red past 8h (green = inside cadence) */
.sync-chip.amber { border-color: rgba(245, 184, 61, 0.4); color: var(--warn); }
.sync-chip.amber .dot { background: var(--warn); }
.sync-chip.red { border-color: rgba(255, 122, 122, 0.45); color: var(--bad); }
.sync-chip.red .dot { background: var(--bad); animation: none; }
.user-menu { display: flex; align-items: center; gap: 8px; flex-shrink: 0; color: var(--text-3); font-size: 12.5px; white-space: nowrap; }
.user-menu button {
  background: none; border: 1px solid var(--card-border); color: var(--text-2);
  padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 12.5px;
}
.user-menu button:hover { border-color: var(--card-border-strong); color: var(--text); }

/* ---------------------------------- layout */
.page { max-width: 1240px; margin: 0 auto; padding: 28px 28px 80px; }
.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { font-size: 26px; }
.page-head .asof { color: var(--text-3); font-size: 12.5px; }

.grid { display: grid; gap: 16px; }
.kpis { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.two-col { grid-template-columns: 1.6fr 1fr; align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

/* ---------------------------------- cards */
.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 20px;
  animation: rise 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.card:nth-child(2) { animation-delay: 0.05s; } .card:nth-child(3) { animation-delay: 0.1s; }
.card:nth-child(4) { animation-delay: 0.15s; } .card:nth-child(5) { animation-delay: 0.2s; }
/* failsafe: entrance animation must never gate visibility (frozen animation
   clocks in embedded webviews / reduced-motion environments) */
body.settled .card, body.settled .login-card { animation: none; }

.card h3 { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }
.card .h3row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.card .h3row h3 { margin-bottom: 0; }

.tile .label { font-size: 12px; color: var(--text-2); font-weight: 600; }
.tile .value { font-size: 27px; font-weight: 800; letter-spacing: -0.02em; margin: 6px 0 2px; }
.tile .sub { font-size: 12px; color: var(--text-3); }
.delta { font-size: 12px; font-weight: 700; }
.delta.up { color: var(--good); }
.delta.down { color: var(--bad); }
.delta.flat { color: var(--text-3); }

/* ---------------------------------- chips & badges */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  border: 1px solid;
}
.chip.good { color: var(--good); border-color: rgba(45, 215, 159, 0.4); }
.chip.warn { color: var(--warn); border-color: rgba(245, 184, 61, 0.4); }
.chip.bad { color: var(--bad); border-color: rgba(255, 122, 122, 0.45); }
.chip.muted { color: var(--text-3); border-color: var(--card-border); }
.badge-cur { font-size: 10px; font-weight: 700; color: var(--text-3); border: 1px solid var(--card-border); border-radius: 5px; padding: 1px 5px; }

/* ---------------------------------- tables */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); padding: 8px 10px; border-bottom: 1px solid var(--card-border); }
td { padding: 10px; font-size: 13px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
th.r, td.r { text-align: right; }
tr.clickable { cursor: pointer; transition: background 0.12s; }
tr.clickable:hover { background: rgba(255, 255, 255, 0.03); }
.caret { display: inline-block; transition: transform 0.18s; color: var(--text-3); margin-right: 8px; font-size: 10px; }
.open > td .caret { transform: rotate(90deg); }
.subrow { background: rgba(0, 0, 0, 0.22); }
.subrow td { padding: 6px 10px; font-size: 12.5px; color: var(--text-2); }
.overdue-days { color: var(--bad); font-weight: 700; }

/* sticky first column for wide statements */
.scroll-x { overflow-x: auto; }
.statement th:first-child, .statement td:first-child {
  position: sticky; left: 0; background: #0d1322; min-width: 210px; z-index: 2;
}
.statement th, .statement td { white-space: nowrap; }

/* ---------------------------------- charts */
.chart-wrap { position: relative; }
.chart-tip {
  position: absolute; pointer-events: none; z-index: 10; display: none;
  background: #141c33; border: 1px solid var(--card-border-strong);
  border-radius: 10px; padding: 9px 12px; font-size: 12px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45); min-width: 130px;
}
.chart-tip .t-title { color: var(--text-3); font-size: 11px; margin-bottom: 5px; font-weight: 700; }
.chart-tip .t-row { display: flex; justify-content: space-between; gap: 14px; }
.chart-tip .t-row .k { display: flex; align-items: center; gap: 6px; color: var(--text-2); }
.chart-tip .t-row .sw { width: 8px; height: 8px; border-radius: 2px; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend .sw { width: 9px; height: 9px; border-radius: 3px; }

/* aging bar */
.aging-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; background: transparent; }
.aging-bar div { min-width: 2px; }
.aging-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--text-2); }

/* ---------------------------------- login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card {
  width: 100%; max-width: 420px; text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--card-border); border-radius: 20px; padding: 44px 36px;
  animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.login-card .logo { font-size: 26px; margin-bottom: 6px; }
.login-card p { color: var(--text-2); font-size: 13.5px; margin: 10px 0 24px; }
.login-card input {
  width: 100%; padding: 13px 16px; border-radius: 11px; font-size: 14px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--card-border);
  color: var(--text); outline: none; margin-bottom: 12px;
}
.login-card input:focus { border-color: rgba(46, 107, 255, 0.6); }
.btn-grad {
  width: 100%; padding: 13px 18px; border: none; border-radius: 11px;
  background: var(--grad); color: #fff; font-weight: 700; font-size: 14px;
  cursor: pointer; transition: transform 0.12s, box-shadow 0.12s;
}
.btn-grad:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(46, 107, 255, 0.35); }

/* Connect-accounting-software empty state + its animated CTA button */
.connect-cta {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  padding: 36px 24px 30px; border: 1px dashed var(--card-border-strong); border-radius: var(--radius);
  background:
    radial-gradient(130% 100% at 50% -20%, rgba(46, 107, 255, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0));
}
.connect-cta__icon {
  position: relative; width: 54px; height: 54px; border-radius: 15px; margin-bottom: 12px;
  display: grid; place-items: center; color: #fff; background: var(--grad);
  box-shadow: 0 12px 30px rgba(46, 107, 255, 0.4);
}
.connect-cta__icon::after {
  content: ""; position: absolute; inset: -5px; border-radius: 19px;
  border: 1px solid rgba(45, 215, 159, 0.45); animation: pulse 2.6s infinite;
}
.connect-cta h4 { font-size: 15px; font-weight: 700; color: var(--text); margin: 0; }
.connect-cta p { font-size: 12.5px; color: var(--text-2); max-width: 400px; margin: 4px 0 16px; line-height: 1.5; }
.connect-cta__logos { font-size: 11px; color: var(--text-3); margin-top: 14px; letter-spacing: 0.02em; }

.btn-cta {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px; border: none; border-radius: 12px;
  font-family: inherit; font-weight: 700; font-size: 13.5px; color: #fff; cursor: pointer;
  background: var(--grad); background-size: 180% 100%; background-position: 0% 50%;
  box-shadow: 0 8px 24px rgba(46, 107, 255, 0.32);
  transition: transform 0.14s ease, box-shadow 0.24s ease, background-position 0.6s ease;
}
.btn-cta:hover { transform: translateY(-1px); background-position: 100% 50%; box-shadow: 0 14px 40px rgba(45, 215, 159, 0.36); }
.btn-cta svg { transition: transform 0.18s ease; }
.btn-cta:hover svg { transform: translateX(3px); }
.btn-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.45) 50%, transparent 80%);
  transform: translateX(-120%); animation: sheen 3.8s ease-in-out infinite;
}
@keyframes sheen { 0%, 55% { transform: translateX(-120%); } 82%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) {
  .btn-cta::before, .connect-cta__icon::after { animation: none; }
}
.login-note { font-size: 12px; color: var(--text-3); margin-top: 18px; }
.login-msg { font-size: 13px; margin-top: 14px; color: var(--mint); }
.login-msg.err { color: var(--bad); }

/* compliance strip */
.comp-strip { display: grid; gap: 10px; }
.comp-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 15px; border-radius: 11px;
  background: rgba(255, 255, 255, 0.028); border: 1px solid var(--card-border);
}
.comp-item .l { font-size: 13px; font-weight: 600; }
.comp-item .d { font-size: 11.5px; color: var(--text-3); }

/* footer */
.foot { max-width: 1240px; margin: 0 auto; padding: 0 28px 40px; color: var(--text-3); font-size: 12px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* empty state */
.empty { text-align: center; color: var(--text-3); padding: 48px 20px; font-size: 13.5px; }

/* skeleton shimmer */
.skel { position: relative; overflow: hidden; background: rgba(255,255,255,0.04); border-radius: 8px; min-height: 16px; }
.skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

@media (max-width: 1220px) {
  .sync-when { display: none; }
  .user-menu .email { display: none; }
}

@media (max-width: 720px) {
  /* two-row header: logo + account controls on top, full-width tab scroller
     underneath (a one-row header left room for barely one tab) */
  .topbar { flex-wrap: wrap; height: auto; padding: 10px 14px 6px; gap: 8px; row-gap: 4px; }
  .topbar .logo { font-size: 18px; }
  .nav { order: 10; flex-basis: 100%; padding-bottom: 4px; }
  .user-menu { margin-left: auto; }
  .user-menu .email { display: none; }
  .user-menu select { max-width: 140px; }
  .user-menu button { padding: 6px 10px; font-size: 12px; }
  .sync-chip { display: none; }
  .page { padding: 18px 14px 70px; }
  .page-head h1 { font-size: 21px; }
  .tile .value { font-size: 23px; }
  .card { padding: 16px 14px; }
  .card .h3row { flex-wrap: wrap; row-gap: 4px; }
  /* statement-style tables: slimmer sticky first column, names may wrap */
  .statement th:first-child, .statement td:first-child {
    min-width: 128px; max-width: 150px; white-space: normal; overflow-wrap: break-word;
  }
}

/* ---------------------------------- manage users (admin) */
.ubtn {
  background: none; border: 1px solid var(--card-border); color: var(--text-2);
  padding: 5px 11px; border-radius: 8px; cursor: pointer; font-size: 11.5px; font-family: inherit;
  margin-left: 6px;
}
.ubtn:hover { border-color: var(--card-border-strong); color: var(--text); }

/* ---------------------------------- finchat conversations sidebar */
.chat-conv {
  padding: 8px 10px; border-radius: 9px; cursor: pointer; margin-bottom: 4px;
  border: 1px solid transparent;
}
.chat-conv:hover { background: var(--surface-2); }
.chat-conv.active { background: var(--surface-2); border-color: var(--card-border); }
.chat-conv .t {
  font-size: 12px; color: var(--text-2); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-conv.active .t { color: var(--text); }
.chat-conv .d { font-size: 10.5px; color: var(--text-3); margin-top: 2px; }
@media (max-width: 760px) {
  .chat-wrap { flex-direction: column; height: auto !important; }
  .chat-side { width: 100% !important; max-height: 180px; }
}

/* finchat conversation ops (rename/delete on hover) */
.chat-conv { position: relative; }
.chat-conv .ops { position: absolute; right: 6px; top: 7px; display: none; gap: 3px; }
.chat-conv:hover .ops { display: flex; }
.chat-conv:hover .t { padding-right: 50px; }
.chat-conv .op {
  background: var(--surface-2); border: 1px solid var(--card-border); color: var(--text-3);
  border-radius: 6px; width: 20px; height: 20px; font-size: 11px; cursor: pointer;
  line-height: 1; padding: 0; font-family: inherit;
}
.chat-conv .op:hover { color: var(--text); border-color: var(--card-border-strong); }

/* ---------------------------------- loading skeleton (slow-network paints) */
.skel {
  border-radius: 8px;
  background: linear-gradient(100deg, var(--surface-2) 40%, rgba(255, 255, 255, 0.07) 50%, var(--surface-2) 60%);
  background-size: 200% 100%;
  animation: skel-sheen 1.1s linear infinite;
}
@keyframes skel-sheen { to { background-position: -200% 0; } }
.skel-title { width: 200px; height: 26px; }
.skel-label { width: 55%; height: 11px; margin-bottom: 10px; }
.skel-value { width: 80%; height: 24px; margin-bottom: 10px; }
.skel-block { height: 300px; }

/* ---------------------------------- 2.0 additions (same tokens as above) */
.field-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin: 12px 0 6px; text-align: left; }
.tin {
  width: 100%; padding: 13px 16px; border-radius: 11px; font-size: 14px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--card-border);
  color: var(--text); outline: none; font-family: inherit;
}
.tin:focus { border-color: rgba(46, 107, 255, 0.6); }
.tin.code { letter-spacing: 10px; font-size: 21px; text-align: center; font-weight: 800; }
select.tin, .sel {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--card-border);
  border-radius: 9px; padding: 7px 10px; font-family: inherit; font-size: 12.5px; outline: none; cursor: pointer;
}
.sel:hover, select.tin:hover { border-color: var(--card-border-strong); }
.user-menu select {
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--card-border);
  border-radius: 8px; padding: 6px 9px; font-family: inherit; font-size: 12.5px; max-width: 190px;
}
.banner {
  border-radius: 11px; padding: 12px 16px; font-size: 13px; margin-bottom: 18px;
  border: 1px solid; background: rgba(255, 255, 255, 0.028);
}
.banner a { font-weight: 700; }
.banner.warn { color: var(--warn); border-color: rgba(245, 184, 61, 0.4); }
.banner.bad { color: var(--bad); border-color: rgba(255, 122, 122, 0.45); }
.provider-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border-radius: 11px; background: rgba(255, 255, 255, 0.028); border: 1px solid var(--card-border); margin-bottom: 10px; }
.provider-row .pname { font-size: 13px; font-weight: 600; }
.inline-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inline-form .tin { width: auto; flex: 1; min-width: 210px; padding: 9px 13px; }
.btn-grad.slim { width: auto; padding: 9px 18px; font-size: 13px; }
.form-msg { font-size: 12.5px; margin-top: 10px; color: var(--bad); min-height: 16px; text-align: left; }
.dev-note { margin-top: 12px; border: 1px solid rgba(245, 184, 61, 0.4); color: var(--warn); border-radius: 10px; padding: 9px 12px; font-size: 12px; text-align: left; }

/* landing */
.land-hero { text-align: center; padding: 96px 24px 84px; position: relative; z-index: 1; }
.land-hero h1 { font-size: clamp(30px, 5vw, 52px); max-width: 780px; margin: 0 auto 18px; }
.land-hero h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.land-hero p { color: var(--text-2); font-size: 16px; max-width: 620px; margin: 0 auto 30px; }
.land-nav { display: flex; align-items: center; justify-content: space-between; max-width: 1100px; margin: 0 auto; padding: 18px 24px; position: relative; z-index: 1; }
.land-nav .links { display: flex; gap: 20px; align-items: center; font-size: 13px; color: var(--text-2); }
.land-nav .links a { text-decoration: none; font-weight: 600; }
.land-nav .links a:hover { color: var(--text); }
.land-section { max-width: 1100px; margin: 0 auto; padding: 40px 24px 72px; position: relative; z-index: 1; }
.land-section h2 { font-size: 26px; text-align: center; margin-bottom: 32px; }
.price-num { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; margin: 6px 0 2px; }
.check-list { list-style: none; text-align: left; margin: 18px 0 24px; }
.check-list li { padding: 6px 0; font-size: 13.5px; color: var(--text-2); }
.check-list li::before { content: "✓"; color: var(--mint); font-weight: 800; margin-right: 10px; }
.land-foot { text-align: center; color: var(--text-3); font-size: 12px; padding: 28px 24px 48px; position: relative; z-index: 1; }
.hidden { display: none !important; }

/* ---- FinPulse 2.0 signed-in journey ------------------------------------ */
/* Demo banner that sits at the top of the portal page. */
.jbanner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-radius: 12px; padding: 13px 16px; margin-bottom: 18px;
  border: 1px solid rgba(245, 184, 61, 0.38);
  background: linear-gradient(92deg, rgba(46,107,255,0.10), rgba(45,215,159,0.08));
}
.jbanner.subtle { border-color: var(--card-border); background: rgba(255,255,255,0.03); }
.jbanner-main { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.jbanner-main strong { color: var(--text); }
.jbanner-cta { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.src-switch {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--card-border);
  border-radius: 8px; padding: 6px 10px; font-size: 12.5px; font-family: inherit; max-width: 172px;
}

/* Lightweight modal (subscribe disclaimer, connect prompt). */
.fp-modal-veil {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(3, 6, 14, 0.72); backdrop-filter: blur(3px);
}
.fp-modal-card {
  width: 100%; max-width: 460px; background: var(--surface); border: 1px solid var(--card-border-strong);
  border-radius: var(--radius); padding: 26px 26px 22px; box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.fp-modal-card h2 { font-size: 18px; }
.sw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.sw-grid span {
  font-size: 12.5px; font-weight: 600; color: var(--text); text-align: center;
  padding: 9px 8px; border-radius: 9px; background: rgba(255,255,255,0.04); border: 1px solid var(--card-border);
}
.sw-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text-2); cursor: pointer; line-height: 1.45; }
.sw-check input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--mint); flex-shrink: 0; }