/* ============================================================
   UPSIDE — HOME FINDER (find.html)
   Futuristic and calm: one bar, live tags, a short progress
   list, then clean cards. Dark by default; ?theme=light too.
   All colour comes from the tokens below.
   ============================================================ */
body.fx-dark {
  --fx-bg: #07070a; --fx-bg2: #0e0e13; --fx-ink: #f4f4f6; --fx-dim: rgba(244,244,246,.62); --fx-faint: rgba(244,244,246,.38);
  --fx-line: rgba(255,255,255,.10); --fx-glass: rgba(255,255,255,.045); --fx-glass2: rgba(255,255,255,.08);
  --fx-red: #ff2d36; --fx-red-soft: rgba(255,45,54,.16); --fx-ok: #3ddc84; --fx-warn: #ffb547; --fx-shadow: 0 30px 80px rgba(0,0,0,.55);
  background: var(--fx-bg); color: var(--fx-ink);
}
body.fx-light {
  --fx-bg: #f5f5f7; --fx-bg2: #ffffff; --fx-ink: #0b0b0f; --fx-dim: rgba(11,11,15,.62); --fx-faint: rgba(11,11,15,.4);
  --fx-line: rgba(11,11,15,.10); --fx-glass: rgba(255,255,255,.72); --fx-glass2: #ffffff;
  --fx-red: #ed1c24; --fx-red-soft: rgba(237,28,36,.09); --fx-ok: #12813f; --fx-warn: #a75d00; --fx-shadow: 0 24px 70px rgba(20,20,40,.12);
  background: var(--fx-bg); color: var(--fx-ink);
}
/* the site header over a dark page */
body.fx-dark .header .hdr-signin, body.fx-dark .header .hdr-saved, body.fx-dark .header .burger { color: #fff; }
body.fx-dark .header .burger span, body.fx-dark .header .burger span::before, body.fx-dark .header .burger span::after { background: #fff; }
body.fx-dark .header { background: rgba(7,7,10,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.fx-light .header { background: rgba(245,245,247,.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.fx-dark footer, body.fx-dark [data-footer] { color-scheme: dark; }

.fx { overflow: hidden; }
.fx-shell { width: min(880px, 100% - 32px); margin: 0 auto; position: relative; }

/* ---------- stage ---------- */
.fx-stage { position: relative; min-height: min(88vh, 860px); display: grid; align-items: center; padding: 130px 0 70px; isolation: isolate; }
.fx-grid {
  position: absolute; inset: -20% -10% 0; z-index: -2; opacity: .55;
  background-image: linear-gradient(var(--fx-line) 1px, transparent 1px), linear-gradient(90deg, var(--fx-line) 1px, transparent 1px);
  background-size: 56px 56px; transform: perspective(900px) rotateX(58deg) translateY(18%); transform-origin: 50% 100%;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 70%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 70%, #000 30%, transparent 75%);
}
.fx-glow { position: absolute; z-index: -1; left: 50%; top: 52%; width: 760px; height: 420px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, var(--fx-red-soft), transparent 70%); filter: blur(10px); animation: fx-breathe 9s ease-in-out infinite; }
@keyframes fx-breathe { 50% { transform: translate(-50%, -50%) scale(1.12); opacity: .75; } }

.fx-kicker { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border: 1px solid var(--fx-line); border-radius: 999px; background: var(--fx-glass); font-size: .8rem; letter-spacing: .02em; color: var(--fx-dim); backdrop-filter: blur(10px); }
.fx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fx-ok); box-shadow: 0 0 0 0 var(--fx-ok); animation: fx-ping 2.4s ease-out infinite; }
@keyframes fx-ping { 0% { box-shadow: 0 0 0 0 rgba(61,220,132,.55); } 100% { box-shadow: 0 0 0 9px rgba(61,220,132,0); } }
.fx-title { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.6rem, 7.4vw, 5.2rem); line-height: .98; letter-spacing: -.045em; margin: 22px 0 30px; }
.fx-title span { background: linear-gradient(92deg, var(--fx-red), #ff8a5c 60%, var(--fx-ink)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- the bar ---------- */
.fx-bar { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 12px 12px 20px; border-radius: 26px; background: var(--fx-glass); border: 1px solid var(--fx-line); box-shadow: var(--fx-shadow); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); transition: border-color .25s ease, box-shadow .25s ease; }
.fx-bar::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(120deg, transparent 20%, var(--fx-red) 50%, transparent 80%); background-size: 250% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s ease; pointer-events: none; animation: fx-sweep 3.5s linear infinite; }
.fx-bar:focus-within::before { opacity: 1; }
@keyframes fx-sweep { to { background-position: -250% 0; } }
.fx-bar__ico { width: 22px; height: 22px; color: var(--fx-red); }
.fx-bar textarea { resize: none; border: 0; outline: none; background: transparent; color: var(--fx-ink); font: inherit; font-size: clamp(1.02rem, 2vw, 1.2rem); line-height: 1.45; padding: 10px 0; min-height: 46px; max-height: 220px; }
.fx-bar textarea::placeholder { color: var(--fx-faint); }
.fx-go { width: 52px; height: 52px; border-radius: 18px; border: 0; background: var(--fx-red); color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease; box-shadow: 0 10px 30px rgba(255,45,54,.35); }
.fx-go svg { width: 22px; height: 22px; }
.fx-go:hover { transform: translateX(2px); }
.fx-go:active { transform: scale(.96); }
.fx-go--sm { width: 44px; height: 44px; border-radius: 14px; }

.fx-live { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; min-height: 34px; }
.fx-live li { padding: 7px 13px; border-radius: 999px; font-size: .84rem; font-weight: 600; border: 1px solid var(--fx-line); background: var(--fx-glass2); animation: fx-pop .28s cubic-bezier(.2, .9, .3, 1.2) both; }
.fx-live li.is-must { border-color: rgba(255,45,54,.45); color: var(--fx-ink); }
.fx-live li.is-price { border-color: rgba(61,220,132,.4); }
@keyframes fx-pop { from { opacity: 0; transform: translateY(4px) scale(.96); } }
.fx-ideas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.fx-ideas[hidden] { display: none; }
.fx-ideas button { padding: 8px 13px; border-radius: 999px; border: 1px dashed var(--fx-line); background: transparent; color: var(--fx-dim); font: inherit; font-size: .84rem; cursor: pointer; transition: color .15s, border-color .15s; }
.fx-ideas button:hover { color: var(--fx-ink); border-color: var(--fx-red); }
.fx-note { margin-top: 14px; font-size: .84rem; color: var(--fx-warn); }

/* ---------- progress ---------- */
.fx-work { padding: 40px 0 90px; }
.fx-work[hidden] { display: none; }
.fx-steps { list-style: none; margin: 0 auto; padding: 0; width: min(460px, 100%); display: grid; gap: 14px; }
.fx-steps li { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 14px; color: var(--fx-faint); font-size: 1.02rem; transition: color .3s; }
.fx-steps i { width: 14px; height: 14px; margin: 6px; border-radius: 50%; border: 2px solid var(--fx-line); transition: all .3s; }
.fx-steps li.is-now { color: var(--fx-ink); }
.fx-steps li.is-now i { border-color: var(--fx-red); box-shadow: 0 0 0 6px var(--fx-red-soft); animation: fx-pulse 1s ease-in-out infinite; }
.fx-steps li.is-done { color: var(--fx-dim); }
.fx-steps li.is-done i { background: var(--fx-ok); border-color: var(--fx-ok); }
@keyframes fx-pulse { 50% { box-shadow: 0 0 0 10px transparent; } }

/* ---------- results ---------- */
.fx-results { padding: 30px 0 140px; }
.fx-results[hidden] { display: none; }
.fx-results__head { margin-bottom: 20px; }
.fx-h2 { font-family: var(--f-display); font-size: clamp(1.7rem, 3.6vw, 2.4rem); letter-spacing: -.03em; margin: 0; }
.fx-h3 { font-family: var(--f-display); font-size: 1.4rem; letter-spacing: -.02em; margin: 4px 0 6px; }
.fx-sub { color: var(--fx-dim); margin: 6px 0 0; }
.fx-list { display: grid; gap: 14px; }

.fx-card { display: grid; grid-template-columns: 250px minmax(0, 1fr); border-radius: 22px; overflow: hidden; background: var(--fx-glass); border: 1px solid var(--fx-line); backdrop-filter: blur(16px); animation: fx-rise .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 70ms); transition: border-color .2s, transform .2s; }
.fx-card:hover { border-color: rgba(255,45,54,.4); transform: translateY(-2px); }
@keyframes fx-rise { from { opacity: 0; transform: translateY(14px); } }
.fx-card__img { position: relative; display: block; background: var(--fx-bg2); min-height: 210px; }
.fx-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fx-card__n { position: absolute; top: 12px; left: 12px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: rgba(0,0,0,.6); color: #fff; font-weight: 700; font-size: .85rem; backdrop-filter: blur(6px); }
.fx-card__main { padding: 18px 20px; display: grid; gap: 10px; align-content: start; }
.fx-card__head { display: flex; justify-content: space-between; gap: 14px; }
.fx-card__price { font-family: var(--f-display); font-size: 1.55rem; letter-spacing: -.03em; margin: 0; }
.fx-card__specs { margin: 2px 0 0; color: var(--fx-dim); font-size: .9rem; white-space: pre; }
.fx-card__addr { color: var(--fx-ink); text-decoration: none; font-weight: 600; font-size: .95rem; }
.fx-card__sum { margin: 0; color: var(--fx-dim); }
.fx-ring { width: 58px; height: 58px; flex: none; }
.fx-ring__bg { fill: none; stroke: var(--fx-line); stroke-width: 5; }
.fx-ring__fg { fill: none; stroke: var(--fx-red); stroke-width: 5; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; animation: fx-ring 1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 70ms + 200ms); }
@keyframes fx-ring { from { stroke-dashoffset: 140; } }
.fx-ring text { fill: var(--fx-ink); font: 700 14px var(--f-display); }
.fx-pros, .fx-cons { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: .9rem; }
.fx-pros li, .fx-cons li { position: relative; padding-left: 20px; }
.fx-pros li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--fx-ok); }
.fx-cons li { color: var(--fx-dim); }
.fx-cons li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--fx-warn); box-sizing: border-box; }
.fx-card__act { display: flex; align-items: center; gap: 14px; margin-top: 4px; flex-wrap: wrap; }
.fx-card__office { margin-left: auto; font-size: .72rem; color: var(--fx-faint); }
.fx-card.is-locked .fx-card__main > *:not(.fx-card__head), .fx-card.is-locked .fx-card__addr, .fx-card.is-locked .fx-card__specs { filter: blur(6px); user-select: none; pointer-events: none; }
.fx-card.is-locked .fx-card__img img { filter: blur(14px) saturate(.6); }

.fx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; border-radius: 14px; border: 0; background: var(--fx-red); color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; box-shadow: 0 10px 26px rgba(255,45,54,.3); }
.fx-btn--sm { padding: 9px 16px; border-radius: 11px; font-size: .88rem; }
.fx-link { color: var(--fx-ink); font-weight: 600; font-size: .9rem; text-decoration: none; }
.fx-link:hover { color: var(--fx-red); }

.fx-gate { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px; padding: 24px; border-radius: 22px; border: 1px solid rgba(255,45,54,.45); background: linear-gradient(135deg, var(--fx-red-soft), transparent 60%), var(--fx-glass); backdrop-filter: blur(16px); }
.fx-gate[hidden] { display: none; }
.fx-gate__k { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fx-red); }
.fx-gate__form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fx-gate__form input:not([type=checkbox]) { min-width: 0; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--fx-line); background: var(--fx-glass2); color: var(--fx-ink); font: inherit; }
.fx-gate__form input::placeholder { color: var(--fx-faint); }
.fx-gate__form .fx-btn, .fx-gate__form .form-ok, .fx-consent { grid-column: 1 / -1; }
.fx-consent { display: flex; gap: 8px; font-size: .68rem; line-height: 1.45; color: var(--fx-faint); }
.fx-fine { margin-top: 28px; font-size: .74rem; line-height: 1.5; color: var(--fx-faint); }

/* ---------- refine dock ---------- */
.fx-dock { --fx-dockbg: rgba(16,16,22,.94); position: fixed; z-index: 250; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(640px, 100% - 24px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 8px 8px 8px 18px; border-radius: 20px; background: var(--fx-dockbg); border: 1px solid var(--fx-line); box-shadow: var(--fx-shadow); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); animation: fx-rise .4s ease both; }
body.fx-light .fx-dock { --fx-dockbg: rgba(255,255,255,.95); }
.fx-dock[hidden] { display: none; }
.fx-dock input { min-width: 0; border: 0; outline: none; background: transparent; color: var(--fx-ink); font: inherit; font-size: 1rem; }
.fx-dock input::placeholder { color: var(--fx-faint); }
body[data-page="find"] .chat-fab, body[data-page="find"] [class*="chat-launch"] { bottom: 96px; }

@media (max-width: 720px) {
  .fx-stage { min-height: auto; padding: 110px 0 40px; }
  .fx-bar { grid-template-columns: minmax(0, 1fr) auto; padding-left: 16px; }
  .fx-bar__ico { display: none; }
  .fx-card { grid-template-columns: 1fr; }
  .fx-card__img { min-height: 0; aspect-ratio: 16 / 10; }
  .fx-gate { grid-template-columns: 1fr; }
  .fx-gate__form { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-glow, .fx-dot, .fx-bar::before, .fx-steps li.is-now i { animation: none; }
  .fx-card, .fx-live li, .fx-ring__fg, .fx-dock { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .fx-bar, .fx-card, .fx-dock, .fx-gate, .fx-kicker { backdrop-filter: none; background: var(--fx-bg2); }
}