/* FBL TOOLS · what the core home adds on top of the FBL APPS look (apps.css «the look of 24.10.2026», copied by tools/dev/sync-fa.py):
   the centred login card in three steps (key → Discord → code if 2FA), the profile strip, tool cards with the 3D tilt of v9, the
   big-illustration switch, the security part of the settings, the 2FA windows, the welcome moment, the header that is only the
   centred logo at the top of the main page (David 24.10). Preview-only parts live in concepts/rework/demo.css. */

/* categories of TOOLS (FBL APPS has no «Генерация» / «Браузер») */
[data-cat=start]{--c:222,230,244}[data-cat=prompt]{--c:155,135,255}[data-cat=ext]{--c:var(--mint-rgb)}
.fa-ac{display:none}
.fa-acct-in.ft-k .dg{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fa-acct-in.ft-k:hover{border-color:rgba(var(--a),.55);background:rgba(var(--a),.08)}
.fa-acct-in.ft-k:hover .dg{fill:none}                                        /* TOOLS is the academy: no «Академия» button in its header */
body[data-page=home]{padding-top:84px}

/* ---------- first screen ---------- */
.ft-hero{text-align:center}
.ft-hero h1 em{white-space:nowrap}
.ft-hero p.lead{margin:0 auto}
.ft-entry{max-width:620px;margin:26px auto 0;perspective:1200px}

/* ---------- the login card: three steps ---------- */
.ft-login{text-align:left;animation:rise .8s var(--ease) .08s both}
.ft-login .core{padding:22px 24px 18px}
.ft-lh{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.ft-lh h3{font:700 17px/1 var(--head);letter-spacing:-.01em}
.ft-lh .r{margin-left:auto;font-size:12px;color:var(--fg-3)}
.ft-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:18px}
.ft-st{position:relative;display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:12px;border:1px solid var(--hair);background:rgba(255,255,255,.015);
  font-size:12.5px;color:var(--fg-3);transition:border-color .35s,background .35s,color .35s}
.ft-st i{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;font:700 11px/1 var(--head);font-style:normal;background:var(--bg-3);color:var(--fg-3);border:1px solid var(--hair-2)}
.ft-st i svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ft-st small{display:block;font-size:11.5px;color:var(--fg-3);margin-top:1px}
.ft-st.on{color:var(--fg);border-color:rgba(var(--a),.45);background:rgba(var(--a),.07)}
.ft-st.on i{background:linear-gradient(180deg,var(--accent),var(--accent-2));color:var(--ink);border-color:transparent}
.ft-st.done{color:var(--fg-2)}
.ft-st.done i{background:rgba(var(--ok-rgb),.14);color:var(--ok);border-color:rgba(var(--ok-rgb),.35)}
.ft-st.off{opacity:.55}
.ft-pane{animation:ftin .45s var(--ease) both}
@keyframes ftin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ft-field label{display:block;margin-bottom:7px;font-size:12.5px;font-weight:600;color:var(--fg-2)}
.ft-key{position:relative}
.ft-key svg{position:absolute;left:15px;top:50%;width:18px;height:18px;transform:translateY(-50%);stroke:var(--fg-3);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.ft-key .inp{height:56px;padding-left:46px;font-family:var(--mono);font-size:19px;letter-spacing:.14em;text-align:center}
.ft-key.valid .inp{border-color:rgba(var(--a),.6);box-shadow:0 0 0 4px rgba(var(--a),.1),inset 0 2px 5px rgba(0,0,0,.4)}
.ft-key.valid svg{stroke:var(--accent)}
.ft-key.bad .inp{border-color:rgba(var(--bad-rgb),.75);animation:ftshake .42s var(--ease)}
.ft-key.dev .inp{font-size:15px;letter-spacing:.05em}   /* dev-токен (28 знаков) влезает в то же поле */
@keyframes ftshake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.ft-err{min-height:18px;margin-top:8px;font-size:12.5px;color:var(--bad)}
.ft-acts{display:flex;align-items:center;gap:12px;margin-top:10px}
.ft-acts .btn{margin-left:auto}
.ft-back{border:0;background:none;color:var(--fg-3);font:500 12.5px var(--text);cursor:pointer;padding:6px 0}
.ft-back:hover{color:var(--fg)}
.ft-found{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:12px;background:rgba(var(--ok-rgb),.06);border:1px solid rgba(var(--ok-rgb),.25);font-size:13px;color:var(--fg-2)}
.ft-found svg{width:16px;height:16px;stroke:var(--ok);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ft-found code{font-family:var(--mono);font-size:12.5px;color:var(--fg)}
.ft-why{margin:14px 0 4px;font-size:13.5px;line-height:1.55;color:var(--fg-2)}
.ft-why b{color:var(--fg);font-weight:650}
.ft-dsb{width:100%;height:54px;margin-top:14px;border-radius:15px;border:1px solid rgba(120,132,255,.7);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:11px;
  font:700 15px/1 var(--head);color:#fff;background:linear-gradient(180deg,#6b78ff,#5865f2 60%,#4752d8);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 30px -12px rgba(88,101,242,.9);
  transition:transform .3s var(--ease),box-shadow .3s}
.ft-dsb svg{width:22px;height:22px;fill:#fff}
.ft-dsb:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 16px 36px -12px rgba(88,101,242,1)}
.ft-small{margin-top:10px;font-size:12px;color:var(--fg-3);line-height:1.5}
.ft-code{display:flex;gap:8px;justify-content:center;margin:16px 0 4px}
.ft-code input{width:48px;height:58px;border-radius:13px;border:1px solid var(--hair-2);background:var(--bg);color:var(--fg);text-align:center;font:600 24px var(--mono);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.45);outline:none;transition:border-color .25s,box-shadow .25s}
.ft-code input:focus{border-color:rgba(var(--a),.65);box-shadow:0 0 0 4px rgba(var(--a),.12),inset 0 2px 5px rgba(0,0,0,.45)}
.ft-code input:nth-child(3){margin-right:10px}
.ft-code.bad input{border-color:rgba(var(--bad-rgb),.7);animation:ftshake .42s var(--ease)}
.ft-lnk{border:0;background:none;padding:0;color:var(--fg-2);font:500 12.5px var(--text);cursor:pointer;text-decoration:underline;text-decoration-color:var(--hair-3);text-underline-offset:3px}
.ft-lnk:hover{color:var(--fg)}
.ft-lfoot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:16px;padding-top:13px;border-top:1px solid var(--hair);font-size:12px;color:var(--fg-3)}
.ft-lfoot a{color:var(--fg-2)}
.ft-lfoot .bd{display:inline-flex;align-items:center;gap:6px}
.ft-lfoot .bd svg{width:13px;height:13px;stroke:var(--ok);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- the profile strip (signed in) ---------- */
.ft-strip{max-width:1000px;margin:26px auto 0;text-align:left;animation:rise .8s var(--ease) .08s both}
.ft-strip .core{padding:16px 18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ft-av{width:52px;height:52px;flex:none;border-radius:50%;display:grid;place-items:center;font:800 20px/1 var(--head);color:#fff;position:relative;
  background:radial-gradient(circle at 30% 25%,#8e98ff,#5865f2 55%,#3a43b8);box-shadow:0 0 0 2px var(--bg-1),0 0 0 3px rgba(88,101,242,.55)}
.ft-av.sm{width:30px;height:30px;font-size:12px;box-shadow:0 0 0 1.5px rgba(88,101,242,.55)}
.ft-av b.ds{position:absolute;right:-3px;bottom:-3px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#5865f2;border:2px solid var(--bg-1)}
.ft-av b.ds svg{width:11px;height:11px;fill:#fff}
.ft-who{min-width:0}
.ft-who b{display:block;font:700 17px/1.2 var(--head)}
.ft-who span{font-size:12.5px;color:var(--fg-3)}
.ft-badges{display:flex;flex-wrap:wrap;gap:7px;margin-left:6px}
.ft-bd{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px;border-radius:15px;border:1px solid var(--line-2);background:rgba(255,255,255,.025);font-size:12.5px;color:var(--fg-2);cursor:default}
.ft-bd svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ft-bd code{font-family:var(--mono);font-size:11.5px;color:var(--fg)}
.ft-bd.ok{color:var(--ok);border-color:rgba(var(--ok-rgb),.3);background:rgba(var(--ok-rgb),.05)}
.ft-bd.warn{color:var(--fg-2);border-color:rgba(255,184,77,.35);background:rgba(255,184,77,.04)}
.ft-bd.warn svg{stroke:#ffb84d}
.ft-on{margin-left:4px;padding:0;border:0;background:none;color:var(--accent);font:650 12.5px var(--text);cursor:pointer}
.ft-on:hover{color:var(--accent-3)}
.ft-out{margin-left:auto}
.ft-recent{flex-basis:100%;display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding-top:12px;border-top:1px solid var(--hair)}
.ft-recent .ql{margin-right:4px}

/* ---------- tool cards: compact by default, the big illustration behind the switch ---------- */
.ft-cards .card .cb{padding:16px 18px 16px}
.ft-cards .card .ttl{gap:12px}
.ft-cards .card .ic.sm{display:grid;width:34px;height:34px;border-radius:10px;background:rgba(var(--c),.08);border:1px solid rgba(var(--c),.22);box-shadow:none}
.ft-cards .card .ic.sm svg{width:16px;height:16px;stroke:rgb(var(--c));filter:none;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ft-cards .card .cb>p{margin:10px 0 12px}
.ft-tags{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;color:var(--fg-3)}
.ft-tags span{display:inline-flex;align-items:center;gap:6px}
.ft-tags span::before{content:'';width:5px;height:5px;border-radius:50%;background:rgba(var(--c),.8)}
.ft-tags .soon{color:var(--gold)}
.ft-tags .soon::before{background:var(--gold)}
.card .fa-art{display:none}
html.ft-art .card .fa-art{display:block}
html.ft-art .ft-cards .card .ic.sm{display:none}
html.ft-art .ctile .ca{display:block}
html:not(.ft-art) .ctile .ca{display:none}
html:not(.ft-art) .ctile{padding-top:14px}
/* the 3D tilt of today's fbl.tools (index.html): the shell leans after the pointer */
.ft-cards .card{perspective:900px}
.ft-cards .card .shell{transform-style:preserve-3d}
html.lite .ft-cards .card .shell,html.calm .ft-cards .card .shell{transform:none!important}
/* signed out: the descriptions are veiled, a click says «Ключ не активен» and leads to the login */
html:not(.ft-in) .ft-cards .card .cb>p,html:not(.ft-in) .ft-cards .card .ft-tags{filter:blur(2.4px);opacity:.5;transition:filter .7s var(--ease),opacity .7s var(--ease)}
.card .ft-deny{position:absolute;inset:0;z-index:4;border-radius:inherit;display:grid;place-items:center;pointer-events:none;opacity:0;
  background:rgba(var(--bad-rgb),.1);font:700 13px var(--head);letter-spacing:.06em;color:#ffb3b1;transition:opacity .25s}
.card.denied .ft-deny{opacity:1}
.card.denied .shell{animation:ftshake .45s var(--ease)}
.card.soonhit .ft-deny{opacity:1;background:rgba(var(--gold-rgb),.1);color:#f3e0ac}

/* ---------- settings: account and security on top of the FBL APPS menu ---------- */
.ft-macc{display:flex;align-items:center;gap:12px;margin:4px 6px 8px;padding:12px;border-radius:14px;border:1px solid var(--hair);background:rgba(255,255,255,.02)}
.ft-macc b{display:block;font:700 14px/1.2 var(--head)}
.ft-macc small{display:block;font-size:11.5px;color:var(--fg-3);margin-top:2px}
.ft-macc code{font-family:var(--mono);font-size:11px;color:var(--fg-2)}
.fa-mi .ft-ok{font-size:11px;color:var(--ok)}

/* ---------- windows: Discord consent (mock) and 2FA set-up ---------- */
.ft-modal{position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.55);animation:fade .25s both}
.ft-modal[hidden]{display:none}
.ft-win{width:min(460px,100%);max-height:calc(100dvh - 32px);overflow:auto;border-radius:20px;background:var(--bg-1);border:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 40px 90px -30px rgba(0,0,0,.95);padding:22px;animation:ftin .4s var(--ease) both}
.ft-win h3{font:700 18px/1.25 var(--head);margin-bottom:6px}
.ft-win p{font-size:13.5px;line-height:1.55;color:var(--fg-2)}
.ft-win .ft-acts{margin-top:18px}
.ft-tfa{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center;margin-top:14px}
.ft-qr{width:150px;height:150px;border-radius:14px;background:#fff;padding:9px}
.ft-qr svg{width:100%;height:100%;display:block}
.ft-secret{display:grid;grid-template-columns:repeat(3,max-content);gap:4px 12px;font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--fg);background:var(--bg);border:1px solid var(--hair-2);border-radius:10px;padding:10px 12px}
.ft-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:12px}
.ft-codes code{font-family:var(--mono);font-size:13px;text-align:center;padding:8px 0;border-radius:9px;background:var(--bg);border:1px solid var(--hair)}
.ft-stepnum{font-size:11.5px;color:var(--fg-3);margin-bottom:10px}
.ft-win .ft-steps.sm{margin-bottom:16px}
/* ---------- the welcome moment: the checks light up one by one, then the name rises; a click or Esc skips it ---------- */
.ft-welcome{position:fixed;inset:0;z-index:130;display:grid;place-items:center;opacity:0;pointer-events:none;cursor:pointer;transition:opacity .35s var(--ease)}
.ft-welcome.on{opacity:1;pointer-events:auto}
.ft-welcome::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(var(--a),.16),transparent 70%),rgba(4,6,8,.95);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.ft-welcome>div{position:relative;text-align:center;display:grid;justify-items:center}
.ft-welcome .fa-mark{display:inline-flex;height:48px;padding:0 16px;font-size:19px;border-radius:14px;margin-bottom:20px}
.ft-wst{display:flex;gap:8px;margin-bottom:22px}
.ft-wst span{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 6px;border-radius:15px;border:1px solid var(--hair-2);font-size:13px;color:var(--fg-3);
  opacity:.35;transition:opacity .24s ease-out var(--d),color .24s ease-out var(--d),border-color .24s ease-out var(--d)}
.ft-wst i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--bg-3);transition:background .24s ease-out var(--d)}
.ft-wst i svg{width:11px;height:11px;stroke:var(--fg-4);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:stroke .24s ease-out var(--d)}
.ft-welcome.on .ft-wst span{opacity:1;color:var(--fg);border-color:rgba(var(--ok-rgb),.35)}
.ft-welcome.on .ft-wst i{background:rgba(var(--ok-rgb),.16)}
.ft-welcome.on .ft-wst i svg{stroke:var(--ok)}
.ft-welcome h2{font:700 clamp(28px,4vw,46px)/1.1 var(--head);letter-spacing:-.02em;opacity:0;transform:translateY(12px);transition:opacity .6s cubic-bezier(.2,.8,.2,1) .3s,transform .6s cubic-bezier(.2,.8,.2,1) .3s}
.ft-welcome p{margin-top:10px;color:var(--fg-2);font-size:14px;opacity:0;transition:opacity .5s ease-out .55s}
.ft-welcome .ft-skip{margin-top:26px;font-size:11.5px;color:var(--fg-4);opacity:0;transition:opacity .5s ease-out 1s}
.ft-welcome.on h2{opacity:1;transform:none}
.ft-welcome.on p,.ft-welcome.on .ft-skip{opacity:1}
.ft-welcome.still *{transition-duration:.2s!important;transition-delay:0s!important;transform:none!important}
#entry{transition:opacity .3s var(--ease),transform .3s var(--ease)}
#entry.ft-gone{opacity:0;transform:scale(.97)}

@media (max-width:760px){
  .ft-steps{grid-template-columns:1fr 1fr 1fr}.ft-st{padding:8px;font-size:11.5px}.ft-st small{display:none}
  .ft-key .inp{font-size:15px;letter-spacing:.08em}
  .ft-key.dev .inp{font-size:12px;letter-spacing:.02em;padding-left:40px}
  .ft-code input{width:40px;height:52px;font-size:20px}
  .ft-tfa{grid-template-columns:1fr;justify-items:center}
  .ft-badges{margin-left:0}.ft-out{margin-left:0}
}

/* keyboard focus and reduced motion */
.ft-dsb:focus-visible,.ft-on:focus-visible,.ft-back:focus-visible,.ft-lnk:focus-visible,.ft-dbtn:focus-visible,.ft-pre button:focus-visible,.ft-stage:focus-visible,.ft-bd:focus-visible,.pv button:focus-visible{outline:2px solid rgba(var(--a),.85);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .ft-login,.ft-strip,.ft-pane,.ft-win,.ft-key.bad .inp,.ft-code.bad input,.card.denied .shell{animation:none!important}
  .ft-welcome *,#entry{transition-duration:.2s!important;transition-delay:0s!important;transform:none!important}
}

/* ---------- David 24.10: no category tiles; FBL as tall as «Academy»; the Discord badge on whole pixels ---------- */
.ctiles{display:none}
.ft-hero h1 em{font-size:1em}                        /* Unbounded caps .75 vs Wix Madefor .72: at .9em «FBL» stood 6 % lower */
.ft-av b.ds{right:-2px;bottom:-2px;width:20px;height:20px;border:0;box-shadow:0 0 0 2px var(--bg-1)}
.ft-av b.ds svg{width:12px;height:12px;display:block}
.ft-av img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}

/* ---------- the header at the top of the main page: only the centred logo, a little bigger (as on v9);
   the bar with the profile and the settings comes back on scroll and on tool pages ---------- */
html.ft-top .fa-top{top:18px;width:fit-content;min-width:0;max-width:calc(100% - 32px);height:54px;padding:0 19px 0 9px;border-radius:16px}   /* v9: the pill hugs the logo */
html.ft-top .fa-top .in{justify-content:center;padding:0;width:auto;max-width:none}
html.ft-top .fa-top .fa-acts{display:none}
html.ft-top .fa-brand .home{gap:11px}
html.ft-top .fa-mark{height:36px;padding:0 13px;font-size:15px;border-radius:10px}
html.ft-top .fa-word{font-size:13px;letter-spacing:.14em}
.fa-mark,.fa-word{transition:height .6s var(--ease),font-size .6s var(--ease),padding .6s var(--ease)}

/* ---------- the gear lives next to «Выйти» (signed in) or in the head of the login card (signed out) ---------- */
.ft-gear{width:34px;height:34px;flex:none;border-radius:11px;display:grid;place-items:center;border:1px solid var(--line-2);background:rgba(255,255,255,.025);color:var(--fg-2);cursor:pointer;
  box-shadow:var(--hi);transition:color .25s,border-color .25s,background .25s,transform .35s var(--ease)}
.ft-gear svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s var(--ease)}
.ft-gear:hover,.ft-gear.on{color:var(--fg);border-color:rgba(var(--a),.45);background:rgba(var(--a),.07)}
.ft-gear:hover svg,.ft-gear.on svg{transform:rotate(60deg)}
.ft-gear:focus-visible{outline:2px solid rgba(var(--a),.85);outline-offset:3px}
.ft-lh .ft-gear{margin-left:auto;width:32px;height:32px}
.ft-sacts{margin-left:auto;display:flex;align-items:center;gap:8px}
.ft-sacts .ft-out{margin-left:0}

/* ---------- link Discord (sessions from before the Discord step) ---------- */
.ft-link{flex-basis:100%;display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:11px 13px;border-radius:13px;border:1px solid rgba(88,101,242,.4);background:rgba(88,101,242,.07);font-size:13px;color:var(--fg-2)}
.ft-link b{color:var(--fg);font-weight:650}
.ft-link .ft-dsb{width:auto;height:38px;margin:0 0 0 auto;padding:0 16px;font-size:13.5px;border-radius:12px}
.ft-link .ft-dsb svg{width:18px;height:18px}
.ft-move{margin-top:12px;padding:10px 12px;border-radius:12px;border:1px solid rgba(var(--gold-rgb),.3);background:rgba(var(--gold-rgb),.05);font-size:12.5px;line-height:1.5;color:var(--fg-2)}
.ft-codes-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ft-win .btn{white-space:nowrap}
.ft-qr svg{background:#fff}
@media (max-width:760px){.ft-link .ft-dsb{margin-left:0;width:100%}.ft-sacts{margin-left:0}}

/* ---------- «Скоро» и «Ключ не активен» на карточке: читаемая плашка поверх размытой карточки, рамка в цвет плашки (David 24.10) ---------- */
.card .ft-deny{background:rgba(6,7,10,.55);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);border-radius:inherit;font-size:14px;letter-spacing:.08em}
.card.denied .ft-deny{color:#ffc4c2;background:rgba(var(--bad-rgb),.14)}
.card.soonhit .ft-deny{opacity:1;color:#f6e3a8;background:rgba(var(--gold-rgb),.12)}
.card.denied .cb,.card.denied .fa-art,.card.soonhit .cb,.card.soonhit .fa-art{filter:blur(4px);transition:filter .25s}
.card.soonhit{--a:var(--gold-rgb);--accent:var(--gold);--accent-3:#f6e3a8;--c:var(--gold-rgb)}
.card.soonhit .shell{border-color:rgba(var(--gold-rgb),.75);box-shadow:0 0 0 1px rgba(var(--gold-rgb),.45),0 0 26px -4px rgba(var(--gold-rgb),.55)}
.card.denied{--a:var(--bad-rgb);--accent:var(--bad);--c:var(--bad-rgb)}
.card.denied .shell{border-color:rgba(var(--bad-rgb),.7);box-shadow:0 0 0 1px rgba(var(--bad-rgb),.4),0 0 26px -4px rgba(var(--bad-rgb),.5)}

/* ---------- экран загрузки при переходе в инструмент — тот же, что был на v9 (shared/fx.js §5), стили оттуда ---------- */
.fx-veil{position:fixed;inset:0;z-index:9500;pointer-events:none;display:grid;place-items:center;background:radial-gradient(56% 46% at 50% 44%,rgba(var(--a),.09),transparent 72%),var(--bg);opacity:0}.fx-veil.on{pointer-events:auto}html.lite .fx-veil{background:var(--bg)}
.fx-vl{display:grid;justify-items:center;gap:18px;opacity:0;transform:translateY(10px) scale(.97);filter:blur(4px);transition:opacity .5s var(--ease),transform .7s var(--ease),filter .5s var(--ease)}
.fx-veil.slow .fx-vl{opacity:1;transform:none;filter:none}
.fx-veil.slow{opacity:1!important;transition:opacity .4s}
.fx-vsh{background:rgba(14,15,22,.96)}
.fx-vsh{padding:5px;border-radius:24px;border:1px solid var(--line-2);background:rgba(255,255,255,.025);box-shadow:0 34px 90px -34px rgba(0,0,0,.95),0 0 70px -24px rgba(var(--a),.45)}
.fx-vco{display:flex;align-items:center;gap:16px;min-width:250px;padding:14px 26px 14px 14px;border-radius:19px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0)) #0b0c12;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.fx-vic{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;border:1px solid rgba(var(--a),.28);background:radial-gradient(120% 120% at 30% 20%,rgba(var(--a),.22),rgba(var(--a),.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 10px 26px -12px rgba(var(--a),.8)}
.fx-vic svg{width:23px;height:23px;fill:none;stroke:var(--accent-3);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(var(--a),.55))}
.fx-veil.slow .fx-vic{animation:fx-breathe 1.8s ease-in-out infinite}
.fx-vtx{display:grid;gap:6px;text-align:left}.fx-vtx b{font:700 14px/1 var(--head);letter-spacing:.04em;color:var(--fg);white-space:nowrap}
.fx-vtx em{font:500 10px/1 var(--mono);font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}
.fx-vtx em::after{content:"";display:inline-block;width:1.4em;text-align:left;animation:fx-dots 1.2s steps(4) infinite}
@keyframes fx-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.fx-vbar{position:relative;width:220px;height:6px;border-radius:99px;overflow:hidden;background:rgba(var(--a),.12);box-shadow:inset 0 1px 1px rgba(0,0,0,.45),0 0 0 1px rgba(var(--a),.08)}
.fx-vbar i{position:absolute;top:0;bottom:0;left:0;width:38%;border-radius:99px;background:linear-gradient(90deg,var(--accent-2),var(--accent),var(--accent-3));box-shadow:0 0 14px rgba(var(--a),.75);transform:translateX(-105%)}
.fx-veil.slow .fx-vbar i{animation:fx-vload 1.3s cubic-bezier(.45,0,.55,1) infinite}
@keyframes fx-vload{to{transform:translateX(265%)}}
html.lite .fx-vsh,html.lite .fx-vic{box-shadow:none}html.lite .fx-vic svg,html.lite .fx-vbar i{filter:none;box-shadow:none}
@keyframes fx-breathe{0%,100%{opacity:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 16px -8px rgba(var(--a),.8)}50%{opacity:.72;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 26px -6px rgba(var(--a),.95)}}

/* no login-card flash for a signed-in visitor: the login card and the profile strip stay hidden until home.js knows which one to draw (it draws at once from the last
   answer of /api/auth?fn=me, or waits for the server when there is none); if the script never runs they show up after 3 s */
html:not(.ft-ready) #entry,html:not(.ft-ready) #strip{visibility:hidden;animation:ftshow 0s 3s forwards}
@keyframes ftshow{to{visibility:visible}}

/* the settings window of the tool pages (shared/ft-menu.css) is the same card: eight colours in one row, the key never breaks */
.fa-dots{gap:7px}.ft-macc code{white-space:nowrap}

/* ---------- избранное и скрытые (Давид 02.11.2026): в поле поиска — счётчик поиска и два фильтра, на карточке — глаз и звезда ---------- */
.find .ft-fr{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:6px}
.find .ft-fr .qn{position:static;transform:none}
.ft-flt{display:flex;align-items:center;gap:4px}
.find .qn:not([hidden])+.ft-flt:not([hidden]){margin-left:2px;padding-left:8px;border-left:1px solid var(--line-2)}
.ft-fv{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:34px;height:34px;padding:0 9px;border-radius:10px;border:1px solid transparent;background:transparent;
  color:var(--fg-3);font:600 12.5px var(--text);font-variant-numeric:tabular-nums;cursor:pointer;transition:color .2s,border-color .2s,background .2s,box-shadow .3s}
.find .inwrap .ft-fv svg{position:static;left:auto;top:auto;transform:none;width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:fill .2s}   /* у поля своё правило для значка лупы — здесь отменяем */
.ft-fv b{font-weight:600}.ft-fv b:empty{display:none}
.ft-fv:hover{color:var(--fg);background:rgba(255,255,255,.06);border-color:var(--line-2)}
.ft-fv[data-view="fav"].has{color:rgba(var(--gold-rgb),.9)}
.ft-fv[data-view="fav"].on{color:var(--gold);background:rgba(var(--gold-rgb),.12);border-color:rgba(var(--gold-rgb),.5);box-shadow:0 0 18px -6px rgba(var(--gold-rgb),.75)}
.ft-fv[data-view="fav"].on svg,.ft-fv[data-view="fav"].has:hover svg{fill:currentColor}
.ft-fv[data-view="hid"].on{color:var(--accent-3);background:rgba(var(--a),.12);border-color:rgba(var(--a),.5);box-shadow:0 0 18px -6px rgba(var(--a),.75)}
/* на карточке: справа сверху глаз (скрыть) и звезда; звезда избранного видна всегда, остальное — при наведении */
.ft-fh{position:absolute;top:13px;right:13px;z-index:5;display:flex;gap:6px}
.ft-fb{width:30px;height:30px;padding:0;border-radius:9px;display:grid;place-items:center;cursor:pointer;color:var(--fg-3);background:rgba(8,9,13,.72);border:1px solid var(--line-2);
  opacity:0;transform:translateY(-3px);transition:opacity .25s var(--ease),transform .35s var(--ease),color .2s,border-color .2s,background .2s,box-shadow .3s}
.ft-fb svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:fill .2s}
.card:hover .ft-fb,.card:focus-within .ft-fb,.ft-fb.on,.card.is-hid .ft-fb[data-fh="hid"]{opacity:1;transform:none}
.ft-fb:hover{color:var(--fg);border-color:var(--hair-3);background:rgba(20,22,30,.92)}
.ft-fb[data-fh="fav"]:hover,.ft-fb[data-fh="fav"].on{color:var(--gold);border-color:rgba(var(--gold-rgb),.5)}
.ft-fb[data-fh="fav"].on{background:rgba(var(--gold-rgb),.1);box-shadow:0 0 14px -4px rgba(var(--gold-rgb),.6)}
.ft-fb[data-fh="fav"].on svg{fill:currentColor}
.card.is-hid .ft-fb[data-fh="hid"]{color:var(--accent-3);border-color:rgba(var(--a),.45);background:rgba(var(--a),.1)}
.ft-fb:focus-visible{outline:2px solid rgba(var(--a),.7);outline-offset:2px}
html.ft-in .ft-cards .card .ttl{padding-right:72px}
.card.is-hid .cb,.card.is-hid .fa-art{opacity:.55;transition:opacity .3s var(--ease)}
.card.is-hid:hover .cb,.card.is-hid:hover .fa-art{opacity:1}
.ft-cards.still .card{animation:none}
@media (pointer:coarse){.ft-fb{opacity:.9;transform:none}}
.ft-vhint{display:flex;align-items:center;justify-content:center;gap:9px;margin:26px 0 -12px;font-size:12.5px;color:var(--fg-3);text-align:center}
.ft-vhint svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ft-undo{margin-left:6px;padding:5px 11px;border-radius:8px;border:1px solid rgba(var(--a),.45);background:rgba(var(--a),.1);color:var(--accent-3);font:600 12.5px var(--text);cursor:pointer;transition:background .2s}
.ft-undo:hover{background:rgba(var(--a),.2)}
.card.is-hid .ft-fb[data-fh="hid"]{order:2}   /* у скрытого в углу — глаз (он виден всегда), как звезда у избранного */
.fa-toast:has(.ft-undo) span{white-space:nowrap}