/* Payora Front — /modules: CMS plugin directory (fxm-). */

/* ---------------------------------------------------------------- hero wall */
.fxm-hero .fx-h1{font-size:clamp(38px,5.4vw,72px)}
.fxm-wall{position:relative;display:grid;place-items:center;min-height:440px}
.fxm-wall-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:min(520px,100%)}
.fxm-wall-t{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1);text-align:center;opacity:0;transform:translateY(14px) scale(.96);transition:opacity .7s var(--ease-out) calc(var(--k)*55ms + 150ms),transform .9s var(--spring) calc(var(--k)*55ms + 150ms)}
.is-in .fxm-wall-t,html:not(.fx-js) .fxm-wall-t{opacity:1;transform:none}
.fxm-wall-t b{font:500 11.5px/1.25 var(--f-ui);color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fxm-wall-t .fxm-mono{animation:fxm-bob 6s var(--ease) infinite;animation-delay:calc(var(--k)*-0.5s)}
@keyframes fxm-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.fxm-hub{position:relative;grid-column:2/4;grid-row:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;margin:10px 18px;border-radius:24px;background:var(--raise);border:1px solid var(--line-2);box-shadow:var(--shadow-3),var(--glow);z-index:2}
.fxm-hub small{font-size:11.5px;color:var(--faint);letter-spacing:.04em}
.fxm-hub-ring{position:absolute;inset:-14px;border-radius:32px;border:1px dashed var(--line-3);animation:fx-spin 40s linear infinite;pointer-events:none}

/* ---------------------------------------------------------------- monogram */
.fxm-mono{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font:640 15px/1 var(--f-display);letter-spacing:-.02em;color:#fff;background:linear-gradient(145deg,color-mix(in srgb,var(--pc) 82%,#fff),var(--pc));box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 10px 20px -12px var(--pc)}

/* ---------------------------------------------------------------- toolbar */
.fxm-bar{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);grid-template-areas:"search chips" "shown chips";gap:12px 20px;align-items:start;margin-bottom:22px;padding:16px;border-radius:var(--r-lg);background:var(--surface-2);border:1px solid var(--line)}
.fxm-search{grid-area:search;min-width:0;width:100%}
.fxm-chips{grid-area:chips;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.fxm-chips .fx-fchips{justify-content:flex-end}
.fxm-chips .fx-fchip{height:34px;font-size:13.5px}
.fxm-chips .fx-fchip i{font-style:normal;font-size:11px;margin-left:4px;opacity:.6}
.fxm-shown{grid-area:shown;margin:0;align-self:end;font-size:13.5px;color:var(--muted)}
.fxm-shown b{color:var(--ink)}

/* ---------------------------------------------------------------- cards */
/* [17.09.2026] «Блок-сирота»: 22 модуля в трёх колонках оставляют последнюю карточку
   одну в ряду. Одинокая карточка занимает ВЕСЬ ряд — это читается как задуманный широкий
   блок, а не как забытый хвост. Условие считает сама сетка, число модулей может расти. */
.fxm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fxm-grid>:last-child:nth-child(3n+1){grid-column:1/-1}
.fxm-card{display:flex;flex-direction:column;gap:12px;padding:20px}
.fxm-card[hidden]{display:none}
.fxm-card-top{display:flex;align-items:center;gap:12px;min-width:0}
.fxm-card-t{flex:1;min-width:0}
.fxm-card-t h3{font-size:17.5px;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fxm-card-t small{display:block;margin-top:2px;font-size:12.5px;color:var(--faint)}
.fxm-card .fx-chip{height:24px;font-size:11px;gap:4px}
.fxm-ver{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.fxm-cb{display:flex;flex-direction:column;gap:5px}
.fxm-cb-k{font:600 11.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.fxm-cb-v{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:34px;padding:6px 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);font-size:12px;text-align:left;cursor:pointer;transition:border-color .2s,color .2s}
.fxm-cb-v span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.fxm-cb-v .fx-i{flex:none;color:var(--faint)}
button.fxm-cb-v:hover{border-color:var(--sapphire);color:var(--ink)}
button.fxm-cb-v.is-done{border-color:var(--emerald);color:var(--emerald)}
.fxm-cb-none{cursor:default;font:500 12.5px/1.3 var(--f-ui);color:var(--faint)}
.fxm-card-f{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.fxm-size{font-size:12px;color:var(--faint)}
.fxm-guide{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:600;color:var(--sapphire)!important;text-decoration:none}
.fxm-guide .fx-i{transition:transform .3s var(--ease)}
.fxm-guide:hover .fx-i{transform:translateX(3px)}
.fxm-card.is-hit{animation:fxm-hit .45s var(--ease-out)}
@keyframes fxm-hit{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- beta note + SDK card */
.fxm-beta{display:flex;gap:16px;align-items:flex-start;margin-top:22px;padding:20px 22px;border-radius:var(--r-lg);background:var(--amber-s);border:1px solid color-mix(in srgb,var(--amber) 20%,transparent)}
.fxm-beta h3{font-size:17px;margin-bottom:6px}
.fxm-beta p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:88ch}
.fxm-sdk{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(20px,4vw,48px);align-items:center;margin-top:22px;padding:clamp(22px,3.4vw,40px);border-radius:var(--r-xl);background:var(--band);color:var(--band-ink);overflow:hidden;isolation:isolate}
.fxm-sdk::before{content:"";position:absolute;right:-120px;top:-160px;width:420px;height:420px;border-radius:50%;background:radial-gradient(closest-side,rgba(113,64,218,.45),transparent);z-index:-1}
.fxm-sdk .fx-h3{color:#fff;margin:12px 0 10px}
.fxm-sdk p{margin:0 0 20px;color:var(--band-muted);font-size:15.5px;line-height:1.6;max-width:56ch}
.fxm-sdk .fx-eyebrow{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#DADDF2}
.fxm-sdk .fx-btn-ink{background:#fff;color:#0B0F26!important}
.fxm-sdk .fx-btn-ghost{color:#fff!important;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22)}
.fxm-sdk .fx-btn-ghost:hover{background:rgba(255,255,255,.12)}
.fxm-sdk-code{margin:0;padding:18px 20px;border-radius:var(--r);background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08);color:#DDE1F5;font:450 13px/1.7 var(--f-mono);overflow:auto}
.fxm-sdk-code code{background:none;border:0;padding:0;color:inherit;font-size:inherit;white-space:pre}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1180px){
  .fxm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fxm-grid>:last-child:nth-child(3n+1){grid-column:auto}
  .fxm-grid>:last-child:nth-child(2n+1){grid-column:1/-1}
  .fxm-bar{grid-template-columns:minmax(0,1fr);grid-template-areas:"search" "chips" "shown"}
  .fxm-chips{align-items:flex-start}
  .fxm-chips .fx-fchips{justify-content:flex-start}
}
@media (max-width:980px){
  .fxm-wall{min-height:0;padding:10px 0 20px}
  .fxm-sdk{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .fxm-grid{grid-template-columns:minmax(0,1fr)}
  .fxm-grid>:last-child{grid-column:auto}
  .fxm-wall-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .fxm-wall-t:nth-child(n+11){display:none}
  .fxm-hub{display:none}
  .fxm-bar{padding:12px}
  .fxm-chips .fx-fchips{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none;padding-bottom:2px}
  .fxm-chips{max-width:100%;min-width:0}
  .fxm-beta{flex-direction:column}
}