/**
 * slivhub.to — FaceMatch page styles (v3)
 * Inherits the site theme tokens (--c-surface / --c-text / --c-border /
 * --c-primary / --ff-sans) so it tracks light + dark themes automatically.
 * Brand accent: coral→pink gradient (the site's premium palette).
 */

.fm-page{
	/* Local tokens layered on top of the inherited site theme. Fallbacks match
	   the site's light theme; in dark mode the inherited --c-* take over. */
	--fm-text:        var(--c-text, #1a1d21);
	--fm-text-mute:   var(--c-text-muted, #6b7280);
	--fm-border:      var(--c-border, #e6e8ec);
	--fm-surface:     var(--c-surface, #ffffff);
	--fm-surface-2:   var(--c-surface-2, #fafbfc);
	--fm-accent:      var(--c-primary, #f47a6d);
	--fm-accent-hover:var(--c-primary-hover, #e8665a);
	--fm-accent-soft: color-mix(in srgb, var(--c-primary, #f47a6d) 12%, transparent);
	--fm-accent-line: color-mix(in srgb, var(--c-primary, #f47a6d) 26%, transparent);
	--fm-grad: linear-gradient(135deg, #f47a6d 0%, #f2368f 100%);
	--fm-grad-soft: linear-gradient(135deg, color-mix(in srgb, #f47a6d 9%, transparent), color-mix(in srgb, #f2368f 7%, transparent));
	--fm-success: #16a34a;
	--fm-success-soft: color-mix(in srgb, #16a34a 13%, transparent);
	--fm-warn: #d97706;
	--fm-warn-soft: color-mix(in srgb, #d97706 14%, transparent);
	--fm-danger: #dc2626;
	--fm-tg: #229ED9;
	--fm-radius: 18px;
	--fm-radius-sm: 12px;
	--fm-shadow: 0 6px 24px rgba(15, 23, 42, 0.07);
	--fm-shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.12);

	max-width: 100%;
	margin: 0 auto;
	color: var(--fm-text);
	font-family: var(--ff-sans, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
	font-size: 14.5px;
	line-height: 1.55;
}
html[data-theme="dark"] .fm-page{
	--fm-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
	--fm-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55);
}

.fm-page *{ box-sizing: border-box; }

/* ── Breadcrumbs (SlivHub / CheckFace) ──────────────────────────────────── */
.fm-breadcrumbs{ margin: 4px 0 14px; }
.fm-breadcrumbs ol{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; padding: 0; margin: 0; font-size: 13px; color: var(--fm-text-mute); }
.fm-breadcrumbs li{ display: inline-flex; align-items: center; }
.fm-breadcrumbs a{ color: var(--fm-text-mute); text-decoration: none; transition: color .12s ease; }
.fm-breadcrumbs a:hover{ color: var(--fm-accent); }
.fm-breadcrumbs .sep svg{ width: 12px; height: 12px; color: var(--fm-border); display: block; }
.fm-breadcrumbs [aria-current="page"]{ color: var(--fm-text); font-weight: 600; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.fm-hero{
	position: relative;
	text-align: center;
	margin-bottom: 22px;
	padding: 34px 24px 30px;
	border-radius:2px;
	background: var(--fm-grad-soft);
	border: 1px solid var(--fm-border);
	overflow: hidden;
}
.fm-hero:before{
	content: "";
	position: absolute; inset: 0;
	background: radial-gradient(120% 80% at 50% -20%, color-mix(in srgb, #f2368f 14%, transparent), transparent 60%);
	pointer-events: none;
}
.fm-hero > *{ position: relative; }
.fm-hero .fm-kicker{
	display: inline-flex; align-items: center; gap: 7px;
	padding: 5px 13px; margin-bottom: 14px;
	border-radius:2px;
	background: var(--fm-surface);
	border: 1px solid var(--fm-accent-line);
	color: var(--fm-accent);
	font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em;
	box-shadow: var(--fm-shadow);
}
.fm-hero .fm-kicker svg{ width: 14px; height: 14px; }
.fm-hero h1{
	margin: 0 0 10px;
	font-size: 38px; font-weight: 800; line-height: 1.1; letter-spacing: -0.025em;
	color: var(--fm-text);
}
.fm-hero h1 .accent{
	background: var(--fm-grad);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
.fm-hero .lead{ margin: 0 auto 20px; max-width: 580px; color: var(--fm-text-mute); font-size: 16px; }
.fm-stats{ display: inline-flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.fm-stats .stat{ display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius:2px; background: var(--fm-surface); border: 1px solid var(--fm-border); color: var(--fm-text); font-size: 13px; font-weight: 500; box-shadow: var(--fm-shadow); }
.fm-stats .stat b{ color: var(--fm-accent); font-weight: 700; }
.fm-stats .stat svg{ width: 15px; height: 15px; color: var(--fm-accent); }

/* ── Card / panel base ────────────────────────────────────────────────────── */
.fm-card{
	background: var(--fm-surface);
	border: 1px solid var(--fm-border);
	border-radius:2px;
	box-shadow: var(--fm-shadow);
	padding: 22px 24px;
	margin-bottom: 16px;
}
.fm-card .fm-section-title{
	margin: 0 0 14px;
	font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
	color: var(--fm-text-mute);
	display: flex; align-items: center; gap: 8px;
}
.fm-card .fm-section-title:before{ content: ""; width: 16px; height: 2px; border-radius:2px; background: var(--fm-grad); }

/* ── Status block (tier + quota) ──────────────────────────────────────────── */
.fm-status{ display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px 22px; }
.fm-tier{
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 15px; border-radius:2px;
	font-weight: 700; font-size: 13px; letter-spacing: 0.01em;
	border: 1px solid; white-space: nowrap;
}
.fm-tier svg{ width: 15px; height: 15px; }
.fm-tier.tier-premium{ background: var(--fm-warn-soft);   color: var(--fm-warn);  border-color: color-mix(in srgb, var(--fm-warn) 30%, transparent); }
.fm-tier.tier-tg     { background: color-mix(in srgb, var(--fm-tg) 12%, transparent); color: var(--fm-tg); border-color: color-mix(in srgb, var(--fm-tg) 30%, transparent); }
.fm-tier.tier-dle    { background: var(--fm-accent-soft); color: var(--fm-accent); border-color: var(--fm-accent-line); }
.fm-tier.tier-admin  { background: color-mix(in srgb, #7c3aed 12%, transparent); color: #7c3aed; border-color: color-mix(in srgb, #7c3aed 30%, transparent); }
html[data-theme="dark"] .fm-page .fm-tier.tier-admin{ color: #a78bfa; }

.fm-quota{ min-width: 0; }
.fm-quota-line{ display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.fm-quota-num{ font-size: 26px; font-weight: 800; color: var(--fm-text); font-variant-numeric: tabular-nums; line-height: 1; }
.fm-quota-of{ font-size: 14px; color: var(--fm-text-mute); }
.fm-quota-of b{ color: var(--fm-text); font-weight: 700; }
.fm-quota-period{ font-size: 13px; color: var(--fm-text-mute); }
.fm-quota-bar{ position: relative; height: 8px; background: var(--fm-surface-2); border-radius:2px; overflow: hidden; border: 1px solid var(--fm-border); }
.fm-quota-bar .fill{ position: absolute; left: 0; top: 0; bottom: 0; background: var(--fm-grad); border-radius:2px; transition: width 0.5s cubic-bezier(.4,0,.2,1); }
.fm-quota-bar.exhausted .fill{ background: var(--fm-danger); }
.fm-status-actions{ display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.fm-status-actions .reset-hint{ font-size: 12px; color: var(--fm-text-mute); text-align: right; white-space: nowrap; }

/* ── Rules strip ──────────────────────────────────────────────────────────── */
.fm-rules{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--fm-border); }
.fm-rule{ display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; }
.fm-rule .ico{ width: 32px; height: 32px; border-radius:2px; flex-shrink: 0; background: var(--fm-accent-soft); color: var(--fm-accent); display: flex; align-items: center; justify-content: center; }
.fm-rule .ico svg{ width: 17px; height: 17px; }
.fm-rule .text{ color: var(--fm-text); padding-top: 2px; }
.fm-rule .text b{ color: var(--fm-text); font-weight: 700; }
.fm-rule .text .mute{ color: var(--fm-text-mute); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.fm-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; font-size: 14px; font-weight: 700; border-radius:2px; cursor: pointer; transition: transform .08s, box-shadow .15s, filter .15s, background .15s, border-color .15s; border: 1px solid transparent; text-decoration: none; line-height: 1; font-family: inherit; }
.fm-btn:active{ transform: translateY(1px); }
.fm-btn:disabled{ opacity: 0.5; cursor: not-allowed; }
.fm-btn svg{ width: 16px; height: 16px; }
.fm-btn.primary{ background: var(--fm-grad); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, #f2368f 30%, transparent); }
.fm-btn.primary:hover{ filter: brightness(1.05); box-shadow: 0 8px 24px color-mix(in srgb, #f2368f 40%, transparent); }
.fm-btn.ghost{ background: var(--fm-surface); color: var(--fm-text); border-color: var(--fm-border); }
.fm-btn.ghost:hover{ background: var(--fm-surface-2); border-color: var(--fm-text-mute); }
.fm-btn.tg{ background: var(--fm-tg); color: #fff; }
.fm-btn.tg:hover{ filter: brightness(1.08); }

/* ── Dropzone ─────────────────────────────────────────────────────────────── */
.fm-drop{ position: relative; border: 2px dashed var(--fm-border); border-radius:2px; background: var(--fm-surface); padding: 52px 20px; text-align: center; cursor: pointer; transition: border-color .18s, background .18s, transform .06s, box-shadow .18s; }
.fm-drop:hover{ border-color: var(--fm-accent); background: var(--fm-accent-soft); }
.fm-drop.drag{ border-color: var(--fm-accent); background: var(--fm-accent-soft); transform: scale(1.005); box-shadow: var(--fm-shadow-lg); }
.fm-drop:focus-visible{ outline: 3px solid var(--fm-accent-soft); outline-offset: 2px; }
.fm-drop input[type="file"]{ position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.fm-drop .drop-ico{ width: 66px; height: 66px; margin: 0 auto 16px; color: #fff; display: flex; align-items: center; justify-content: center; background: var(--fm-grad); border-radius:2px; box-shadow: 0 10px 26px color-mix(in srgb, #f2368f 32%, transparent); }
.fm-drop .drop-ico svg{ width: 30px; height: 30px; }
.fm-drop .drop-title{ font-size: 18px; font-weight: 700; color: var(--fm-text); margin: 0 0 6px; }
.fm-drop .drop-sub{ font-size: 13.5px; color: var(--fm-text-mute); margin: 0; }
.fm-drop.disabled{ cursor: default; }
.fm-drop.disabled:hover{ border-color: var(--fm-border); background: var(--fm-surface); }
/* When exhausted, the invisible overlay <input type=file> must NOT swallow clicks
   meant for the CTA ("Оформить Премиум") rendered inside .drop-empty. */
.fm-drop.disabled input[type="file"]{ pointer-events: none; }
.fm-drop.disabled .drop-empty{ position: relative; z-index: 2; }
.fm-drop.disabled .drop-empty a,
.fm-drop.disabled .drop-empty button{ pointer-events: auto; }

.fm-drop.has-file{ padding: 20px; cursor: default; background: var(--fm-surface); border-style: solid; border-color: var(--fm-accent-line); }
.fm-drop.has-file:hover{ background: var(--fm-surface); }
.fm-drop.has-file .drop-empty{ display: none; }
.fm-drop-preview{ display: none; align-items: center; gap: 18px; text-align: left; }
.fm-drop.has-file .fm-drop-preview{ display: flex; }
.fm-drop-preview .thumb{ width: 96px; height: 120px; border-radius:2px; overflow: hidden; background: var(--fm-surface-2); border: 1px solid var(--fm-border); flex-shrink: 0; }
.fm-drop-preview .thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.fm-drop-preview .meta{ flex: 1; min-width: 0; }
.fm-drop-preview .meta .name{ font-weight: 700; color: var(--fm-text); margin-bottom: 4px; word-break: break-all; }
.fm-drop-preview .meta .size{ font-size: 13px; color: var(--fm-text-mute); margin-bottom: 14px; }
.fm-drop-preview .meta .actions{ display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Progress ─────────────────────────────────────────────────────────────── */
/* Vertical stack centered: spinner on top, label, then sub.
   flex-column overrides any global flex/grid that might land on this card. */
.fm-progress{ display: none; padding: 30px 24px; text-align: center; background: var(--fm-surface); border: 1px solid var(--fm-border); border-radius:2px; box-shadow: var(--fm-shadow); margin-bottom: 16px; }
.fm-progress.show{ display: flex; flex-direction: column; align-items: center; justify-content: center; animation: fm-fade-in .2s ease; }
.fm-spinner{ display: block; width: 44px; height: 44px; border: 3px solid var(--fm-border); border-top-color: var(--fm-accent); border-radius:2px; animation: fm-spin 0.9s linear infinite; margin: 0 auto 14px; }
@keyframes fm-spin{ to{ transform: rotate(360deg); } }
@keyframes fm-fade-in{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: translateY(0); } }
.fm-progress .label{ color: var(--fm-text); font-weight: 700; font-size: 16px; margin: 0 0 4px; }
.fm-progress .sub{ color: var(--fm-text-mute); font-size: 13px; margin: 0; }

/* ── Toasts ───────────────────────────────────────────────────────────────── */
.fm-toasts{ position: fixed; top: 84px; right: 18px; z-index: 100000; display: flex; flex-direction: column; gap: 10px; max-width: 360px; pointer-events: none; }
.fm-toast{ pointer-events: auto; background: var(--fm-surface); border: 1px solid var(--fm-border); border-left-width: 4px; border-radius:2px; padding: 13px 15px; box-shadow: var(--fm-shadow-lg); font-size: 14px; line-height: 1.45; color: var(--fm-text); animation: fm-toast-in .22s ease; }
.fm-toast.error{ border-left-color: var(--fm-danger); }
.fm-toast.warn{ border-left-color: var(--fm-warn); }
.fm-toast.info{ border-left-color: var(--fm-accent); }
.fm-toast.success{ border-left-color: var(--fm-success); }
.fm-toast .close{ float: right; cursor: pointer; color: var(--fm-text-mute); margin-left: 12px; font-size: 18px; line-height: 1; }
.fm-toast .close:hover{ color: var(--fm-text); }
@keyframes fm-toast-in{ from{ opacity: 0; transform: translateX(40px); } to{ opacity: 1; transform: translateX(0); } }

/* ── Results: verdict ─────────────────────────────────────────────────────── */
.fm-results{ display: none; }
.fm-results.show{ display: block; animation: fm-fade-in .3s ease; }
.fm-verdict{ display: grid; grid-template-columns: 116px 1fr auto; gap: 20px; align-items: center; padding: 20px 24px; border-radius:2px; background: var(--fm-surface); border: 1px solid var(--fm-border); box-shadow: var(--fm-shadow); margin-bottom: 18px; position: relative; overflow: hidden; }
.fm-verdict:before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.fm-verdict.strong:before{ background: var(--fm-success); }
.fm-verdict.weak:before{ background: var(--fm-warn); }
.fm-verdict.none:before{ background: var(--fm-text-mute); }
.fm-verdict-qf{ width: 116px; height: 146px; border-radius:2px; overflow: hidden; background: var(--fm-surface-2); border: 1px solid var(--fm-border); display: flex; align-items: center; justify-content: center; }
.fm-verdict-qf img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.fm-verdict-qf .empty{ color: var(--fm-text-mute); font-size: 12px; text-align: center; padding: 8px; }
.fm-verdict-text h2{ margin: 0 0 5px; font-size: 20px; font-weight: 800; }
.fm-verdict.strong .fm-verdict-text h2{ color: var(--fm-success); }
.fm-verdict.weak .fm-verdict-text h2{ color: var(--fm-warn); }
.fm-verdict.none .fm-verdict-text h2{ color: var(--fm-text); }
.fm-verdict-text p{ margin: 0; color: var(--fm-text-mute); font-size: 14px; }
.fm-verdict-text p b{ color: var(--fm-text); font-weight: 700; }

/* ── Results: cards ───────────────────────────────────────────────────────── */
.fm-list{ display: grid; gap: 14px; grid-template-columns: 1fr; }
.fm-result{ display: grid; grid-template-columns: 168px 1fr; gap: 18px; align-items: stretch; background: var(--fm-surface); border: 1px solid var(--fm-border); border-radius:2px; box-shadow: var(--fm-shadow); padding: 16px; transition: transform .12s, box-shadow .12s, border-color .12s; }
.fm-result:hover{ transform: translateY(-2px); box-shadow: var(--fm-shadow-lg); border-color: var(--fm-accent-line); }
.fm-result .photos{ display: flex; flex-direction: column; gap: 6px; }
.fm-result .photos .main{ width: 168px; height: 210px; border-radius:2px; overflow: hidden; background: var(--fm-surface-2); cursor: pointer; position: relative; border: 1px solid var(--fm-border); }
.fm-result .photos .main img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.fm-result .photos .main:hover img{ transform: scale(1.05); }
.fm-result .photos .main .badge{ position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.62); color: #fff; padding: 3px 9px; border-radius:2px; font-size: 11px; font-weight: 700; backdrop-filter: blur(4px); }
.fm-result .photos .thumbs{ display: flex; gap: 5px; }
.fm-result .photos .thumbs .th{ flex: 1; aspect-ratio: 1/1; border-radius:2px; overflow: hidden; background: var(--fm-surface-2); cursor: pointer; border: 1px solid var(--fm-border); }
.fm-result .photos .thumbs .th img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.fm-result .info{ display: flex; flex-direction: column; justify-content: center; gap: 11px; min-width: 0; }
.fm-result .info .name-row{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fm-result .info .name{ font-size: 19px; font-weight: 800; color: var(--fm-text); line-height: 1.25; }
.fm-result .strength-pill{ display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius:2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.fm-result.strong .strength-pill{ background: var(--fm-success-soft); color: var(--fm-success); }
.fm-result.weak .strength-pill{ background: var(--fm-warn-soft); color: var(--fm-warn); }

.fm-result .score-row{ display: flex; align-items: center; gap: 12px; }
.fm-result .score-bar{ flex: 1; height: 8px; background: var(--fm-surface-2); border-radius:2px; overflow: hidden; border: 1px solid var(--fm-border); }
.fm-result .score-bar .fill{ height: 100%; transition: width .6s cubic-bezier(.4,0,.2,1); }
.fm-result.strong .score-bar .fill{ background: var(--fm-grad); }
.fm-result.weak .score-bar .fill{ background: var(--fm-warn); }
.fm-result .score-pct{ font-weight: 800; color: var(--fm-text); min-width: 50px; text-align: right; font-variant-numeric: tabular-nums; font-size: 15px; }

.fm-result .meta-row{ display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--fm-text-mute); }
.fm-result .meta-row .meta-item b{ color: var(--fm-text); font-weight: 700; }
.fm-result .sources{ display: flex; flex-wrap: wrap; gap: 8px; }
.fm-result .src{ display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius:2px; background: var(--fm-surface-2); border: 1px solid var(--fm-border); text-decoration: none; color: var(--fm-text); font-size: 13px; transition: border-color .12s, background .12s, transform .08s; }
.fm-result .src:hover{ border-color: var(--fm-accent); background: var(--fm-accent-soft); transform: translateY(-1px); }
.fm-result .src .domain-pill{ display: inline-flex; align-items: center; padding: 2px 9px; border-radius:2px; font-size: 11.5px; font-weight: 700; }
.fm-result .src.checkyou .domain-pill{ background: var(--fm-accent-soft); color: var(--fm-accent); }
.fm-result .src.shluha .domain-pill{ background: var(--fm-warn-soft); color: var(--fm-warn); }
.fm-result .src.rynok .domain-pill{ background: var(--fm-success-soft); color: var(--fm-success); }
.fm-result .src.other .domain-pill{ background: var(--fm-surface); color: var(--fm-text-mute); border: 1px solid var(--fm-border); }
.fm-result .src .open{ font-weight: 700; color: var(--fm-accent); display: inline-flex; align-items: center; gap: 3px; }
.fm-result .src .open svg{ width: 13px; height: 13px; }

/* ── CTA panels (guest / TG) ──────────────────────────────────────────────── */
.fm-cta{ padding: 30px 28px; background: var(--fm-grad-soft); border: 1px solid var(--fm-accent-line); border-radius:2px; box-shadow: var(--fm-shadow); text-align: center; }
/* Air between guest CTA and the "Как работает" card right after it. Targets only
   the guest flow — in [logged] the .fm-cta (upsell) sits AFTER the .fm-card chain,
   so this adjacent-sibling selector doesn't hit it. */
.fm-cta + .fm-card{ margin-top: 26px; }
.fm-cta h3{ margin: 0 0 8px; font-size: 21px; font-weight: 800; color: var(--fm-text); }

/* ── CTA header animation (biometric scan motif) ──────────────────────────── */
.fm-cta-anim{ display: block; width: min(420px, 92%); height: 140px; margin: -6px auto 6px; }
.fm-cta-anim .fma-grid       { opacity: .28; animation: fma-gridFade 5s ease-in-out infinite; }
.fm-cta-anim .fma-orbit      { transform-origin: 210px 79px; animation: fma-orbitRotate 18s linear infinite; }
.fm-cta-anim .fma-orbit-2    { transform-origin: 210px 79px; animation: fma-orbitRotateReverse 24s linear infinite; }
.fm-cta-anim .fma-ring       { transform-origin: 210px 79px; animation: fma-ringPulse 4.2s ease-in-out infinite; }
.fm-cta-anim .fma-ring.r2    { animation-delay: .5s; }
.fm-cta-anim .fma-core       { transform-origin: 210px 79px; animation: fma-coreFloat 5.2s ease-in-out infinite; }
.fm-cta-anim .fma-scan       { animation: fma-scanY 2.9s ease-in-out infinite; }
.fm-cta-anim .fma-node       { animation: fma-nodePulse 2.6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.fm-cta-anim .fma-node.n2    { animation-delay: .35s; }
.fm-cta-anim .fma-node.n3    { animation-delay: .7s; }
.fm-cta-anim .fma-node.n4    { animation-delay: 1.05s; }
.fm-cta-anim .fma-node.n5    { animation-delay: 1.4s; }
.fm-cta-anim .fma-dash       { stroke-dasharray: 8 10; animation: fma-dashMove 9s linear infinite; }
.fm-cta-anim .fma-lock-line  { stroke-dasharray: 120; stroke-dashoffset: 120; animation: fma-drawLine 3.2s ease-in-out infinite; }
.fm-cta-anim .fma-percent    { animation: fma-percentGlow 2.4s ease-in-out infinite; }
.fm-cta-anim .fma-logo-link  { stroke-dasharray: 8 10; animation: fma-logoLinkMove 6s linear infinite; }
.fm-cta-anim .fma-logo-satellite{ transform-origin: 329px 48px; animation: fma-logoPulse 4.4s ease-in-out infinite; }
.fm-cta-anim .fma-logo-aura  { transform-origin: 329px 48px; animation: fma-logoAura 3.6s ease-in-out infinite; }
@keyframes fma-orbitRotate        { to { transform: rotate(360deg); } }
@keyframes fma-orbitRotateReverse { to { transform: rotate(-360deg); } }
@keyframes fma-ringPulse  { 0%,100%{ transform: scale(.95); opacity: .28; } 50%{ transform: scale(1.08); opacity: .68; } }
@keyframes fma-coreFloat  { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-4px); } }
@keyframes fma-scanY      { 0%,100%{ transform: translateY(-34px); opacity: .05; } 18%,82%{ opacity: .88; } 50%{ transform: translateY(36px); opacity: .72; } }
@keyframes fma-nodePulse  { 0%,100%{ opacity: .45; transform: scale(.88); } 50%{ opacity: 1; transform: scale(1.16); } }
@keyframes fma-dashMove   { to { stroke-dashoffset: -100; } }
@keyframes fma-drawLine   { 0%{ stroke-dashoffset: 120; opacity: .2; } 45%,70%{ stroke-dashoffset: 0; opacity: .75; } 100%{ stroke-dashoffset: -120; opacity: .2; } }
@keyframes fma-percentGlow{ 0%,100%{ opacity: .68; } 50%{ opacity: 1; } }
@keyframes fma-gridFade   { 0%,100%{ opacity: .18; } 50%{ opacity: .34; } }
@keyframes fma-logoLinkMove{ to { stroke-dashoffset: -80; } }
@keyframes fma-logoPulse  { 0%,100%{ opacity: .72; } 50%{ opacity: 1; } }
@keyframes fma-logoAura   { 0%,100%{ opacity: .18; transform: scale(.88); } 50%{ opacity: .42; transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce){
	.fm-cta-anim .fma-grid, .fm-cta-anim .fma-orbit, .fm-cta-anim .fma-orbit-2,
	.fm-cta-anim .fma-ring, .fm-cta-anim .fma-core, .fm-cta-anim .fma-scan,
	.fm-cta-anim .fma-node, .fm-cta-anim .fma-dash, .fm-cta-anim .fma-lock-line,
	.fm-cta-anim .fma-percent, .fm-cta-anim .fma-logo-link,
	.fm-cta-anim .fma-logo-satellite, .fm-cta-anim .fma-logo-aura{ animation: none !important; }
}
@media (max-width: 520px){ .fm-cta-anim{ height: 120px; } }
.fm-cta p{ margin: 0 auto; max-width: 540px; color: var(--fm-text-mute); font-size: 14.5px; }
.fm-cta ul.steps{ list-style: none; padding: 0; margin: 16px auto; max-width: 420px; text-align: left; counter-reset: fm-step; }
.fm-cta ul.steps li{ position: relative; padding: 9px 8px 9px 42px; color: var(--fm-text); font-size: 14px; }
.fm-cta ul.steps li:before{ position: absolute; left: 0; top: 7px; width: 28px; height: 28px; border-radius:2px; background: var(--fm-grad); color: #fff; text-align: center; line-height: 28px; font-weight: 800; font-size: 13px; counter-increment: fm-step; content: counter(fm-step); }
.fm-cta .actions{ display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.fm-cta .tg-mount{ display: flex; justify-content: center; margin-top: 14px; }

/* Inline guest login form */
.fm-login{ display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 16px auto 10px; max-width: 520px; }
/* .fm-field: label-wrapper around input + leading icon. Padding-left uses
   !important because of the site-global `input { padding: 10px 12px !important }`
   in modern.css. Margin reset for the same reason — the global `label { margin: 10px 0 6px }`
   would push the field down. */
.fm-login .fm-field{ flex: 1; min-width: 160px; position: relative; display: block; margin: 0; }
.fm-login .fm-field-icon{ position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--fm-text-mute); pointer-events: none; transition: color .15s ease; }
.fm-login .fm-field input{ width: 100%; padding: 10px 14px 10px 40px !important; font-size: 14px; border-radius:2px; border: 1px solid var(--fm-border); background: var(--fm-surface); color: var(--fm-text); font-family: inherit; box-sizing: border-box; transition: border-color .15s ease, box-shadow .15s ease; }
.fm-login .fm-field input:focus{ outline: none; border-color: var(--fm-accent); box-shadow: 0 0 0 3px var(--fm-accent-soft); }
.fm-login .fm-field:focus-within .fm-field-icon{ color: var(--fm-accent); }
.fm-login .fm-field input::placeholder{ color: var(--fm-text-mute); opacity: .85; }
.fm-login .fm-btn{ flex-shrink: 0; }
.fm-login-links{ font-size: 13px; color: var(--fm-text-mute); }
.fm-login-links a{ color: var(--fm-accent); text-decoration: none; font-weight: 600; }
.fm-login-links a:hover{ text-decoration: underline; }
.fm-login-links span{ margin: 0 6px; opacity: .5; }
@media (max-width: 520px){ .fm-login{ flex-direction: column; } .fm-login .fm-btn{ width: 100%; } }

/* ── Recent history ───────────────────────────────────────────────────────── */
.fm-history{ display: none; margin-top: 16px; }
.fm-history.show{ display: block; }
.fm-history-list{ display: grid; gap: 8px; }
.fm-history-item{ display: grid; grid-template-columns: 130px 1fr auto auto; gap: 14px; align-items: center; padding: 11px 15px; background: var(--fm-surface-2); border: 1px solid var(--fm-border); border-radius:2px; font-size: 13px; }
.fm-history-item .when{ color: var(--fm-text-mute); font-variant-numeric: tabular-nums; }
.fm-history-item .strength{ display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.fm-history-item .strength .dot{ width: 8px; height: 8px; border-radius:2px; }
.fm-history-item .strength.strong .dot{ background: var(--fm-success); }
.fm-history-item .strength.weak .dot{ background: var(--fm-warn); }
.fm-history-item .strength.none .dot{ background: var(--fm-text-mute); }
.fm-history-item .tier-mini{ display: inline-flex; padding: 3px 9px; border-radius:2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; background: var(--fm-surface); border: 1px solid var(--fm-border); color: var(--fm-text-mute); }
.fm-history-item .counted{ color: var(--fm-text-mute); font-size: 12px; }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.fm-faq{ display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 768px){ .fm-faq{ grid-template-columns: 1fr 1fr; } }
.fm-faq-item{ background: var(--fm-surface-2); border: 1px solid var(--fm-border); border-radius:2px; padding: 15px 17px; }
.fm-faq-item h4{ margin: 0 0 6px; font-size: 14.5px; font-weight: 700; color: var(--fm-text); display: flex; align-items: center; gap: 8px; }
.fm-faq-item h4:before{ content: ""; width: 6px; height: 6px; border-radius:2px; background: var(--fm-accent); flex-shrink: 0; }
.fm-faq-item p{ margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--fm-text-mute); }

/* ── Lightbox ─────────────────────────────────────────────────────────────── */
.fm-lightbox{ position: fixed; inset: 0; background: rgba(10, 12, 16, 0.94); display: none; align-items: center; justify-content: center; z-index: 99999; padding: 24px; }
.fm-lightbox.show{ display: flex; animation: fm-fade-in .18s ease; }
.fm-lightbox img{ max-width: 100%; max-height: 100%; object-fit: contain; border-radius:2px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.fm-lightbox .close, .fm-lightbox .nav{ position: absolute; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); cursor: pointer; border-radius:2px; display: flex; align-items: center; justify-content: center; transition: background .12s; }
.fm-lightbox .close:hover, .fm-lightbox .nav:hover{ background: rgba(255,255,255,.22); }
.fm-lightbox .close{ top: 16px; right: 16px; width: 42px; height: 42px; font-size: 22px; }
.fm-lightbox .nav{ top: 50%; transform: translateY(-50%); width: 50px; height: 50px; font-size: 26px; }
.fm-lightbox .nav.prev{ left: 16px; }
.fm-lightbox .nav.next{ right: 16px; }
.fm-lightbox .counter{ position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #fff; background: rgba(0,0,0,.5); padding: 8px 15px; border-radius:2px; font-size: 13px; }
.fm-lightbox .lb-busy{ position: absolute; width: 36px; height: 36px; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius:2px; animation: fm-spin .9s linear infinite; }

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 720px){
	.fm-hero{ padding: 26px 18px 24px; }
	.fm-hero h1{ font-size: 28px; }
	.fm-hero .lead{ font-size: 14.5px; }
	.fm-status{ grid-template-columns: 1fr; }
	.fm-status-actions{ align-items: flex-start; }
	.fm-status-actions .reset-hint{ text-align: left; }
	.fm-verdict{ grid-template-columns: 92px 1fr; }
	.fm-verdict-cta{ grid-column: 1 / -1; }
	.fm-verdict-cta .fm-btn{ width: 100%; }
	.fm-verdict-qf{ width: 92px; height: 116px; }
	.fm-result{ grid-template-columns: 1fr; }
	.fm-result .photos{ flex-direction: row; height: 150px; }
	.fm-result .photos .main{ flex: 1.4; width: auto; height: 100%; }
	.fm-result .photos .thumbs{ flex: 1; flex-direction: column; }
	.fm-history-item{ grid-template-columns: 1fr auto; row-gap: 6px; }
	.fm-history-item .when{ grid-column: 1 / -1; }
	.fm-drop{ padding: 38px 16px; }
	.fm-drop .drop-ico{ width: 56px; height: 56px; }
	.fm-drop .drop-title{ font-size: 16px; }
	.fm-cta{ padding: 24px 18px; }
}

/* ── Telegram link panel (account management; pairs with checkyou-tglink.js) ── */
.fm-tglink{ display: flex; flex-direction: column; gap: 10px; }
.fm-tglink__row{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fm-tglink__badge{ display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--fm-text); }
.fm-tglink__badge svg{ width: 18px; height: 18px; color: var(--fm-tg); flex: none; }
.fm-tglink__badge b{ color: var(--fm-tg); font-weight: 700; }
.fm-tglink__unbind{ padding: 7px 14px; font-size: 13px; background: var(--fm-surface); color: var(--fm-text-mute); border-color: var(--fm-border); }
.fm-tglink__unbind:hover{ color: var(--fm-warn, #d97706); border-color: var(--fm-warn, #d97706); background: var(--fm-surface-2); }
.fm-tglink__hint{ margin: 0; font-size: 13px; color: var(--fm-text-mute); }
.fm-tglink__hint:empty{ display: none; }
.fm-tglink__hint a{ color: var(--fm-tg); font-weight: 600; }
.fm-tglink__msg{ font-size: 13px; color: var(--fm-text-mute); }
.fm-tglink__msg:empty{ display: none; }
.fm-tglink__msg[data-state="error"]{ color: var(--fm-warn, #d97706); }
.fm-tglink__msg[data-state="ok"]{ color: #16a34a; }