/* APX Templates v2 — undressaitool.com. Fully dark, immersive, mobile-first.
   This stylesheet is only enqueued on APX pages, so page-level paints are scoped. */
:root{color-scheme:dark}
html{background:#07040f}
body{background:#07040f !important}
body.apx-locked{position:fixed;left:0;right:0;overflow:hidden}

.apx-wrap,.apx-modal,.apx-favs-wrap,.apx-topup-modal{--apx-bg:#0a0618;--apx-panel:#171233;--apx-panel2:#1f1845;--apx-line:#342a66;--apx-text:#f4f1fd;--apx-body:#e9e4fb;--apx-dim:#c9bfea;--apx-pink:#ff4d8d;--apx-violet:#8b5cf6;--apx-grad:linear-gradient(92deg,#8b5cf6,#ff4d8d)}
.apx-wrap{max-width:1280px;margin:0 auto;padding:22px 14px 56px;color:var(--apx-text);font-family:inherit}
.apx-modal{color:var(--apx-text);font-family:inherit}
.apx-wrap a{color:#dccfff}
.apx-wrap p{color:var(--apx-body)}

/* hero */
.apx-hero{text-align:center;padding:30px 6px 8px}
.apx-hero h1{font-size:1.8rem;line-height:1.25;margin:0 0 12px;color:#fff;font-weight:800}
@media(min-width:760px){.apx-hero h1{font-size:2.3rem}}
.apx-hero-sm h1{font-size:1.5rem}
.apx-lede{color:var(--apx-dim);max-width:700px;margin:0 auto 14px;line-height:1.65;font-size:1rem}
.apx-hero-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.apx-count{color:var(--apx-dim)}

/* buttons */
.apx-btn{display:inline-block;border:0;cursor:pointer;background:var(--apx-grad);color:#fff;font-weight:700;border-radius:999px;padding:10px 20px;font-size:.95rem;text-decoration:none;box-shadow:0 6px 18px rgba(255,77,141,.28)}
.apx-btn:hover{filter:brightness(1.1)}
.apx-btn-lg{padding:13px 26px;font-size:1.02rem}
.apx-btn-sm{padding:7px 14px;font-size:.85rem}
.apx-btn-ghost{background:transparent;border:1px solid var(--apx-line);box-shadow:none;color:var(--apx-text)}

/* filters */
.apx-filters{margin:20px 0 16px;display:flex;flex-direction:column;gap:10px}
.apx-filter-kinds,.apx-filter-tags{display:flex;gap:8px;flex-wrap:wrap}
.apx-chip{border:1px solid var(--apx-line);background:var(--apx-panel);color:var(--apx-text);border-radius:999px;padding:8px 15px;font-size:.9rem;cursor:pointer;text-decoration:none;display:inline-block;min-height:38px}
.apx-chip.is-active{background:var(--apx-grad);border-color:transparent;color:#fff;font-weight:700}
.apx-chip-tag{background:rgba(23,18,51,.6);color:var(--apx-dim)}
/* Theme link-state leak guard (v0.5.8): goldy-mex paints a{color:#4169e1},
   a:visited{color:#800080}, a:hover/focus/active{color:#191970} at
   specificity 0,1,1 — above the plugin's single-class base rules (0,1,0).
   Visited tag chips rendered dark-blue-on-dark (user screenshot), and every
   plugin anchor was one state away from the same leak (same family as the
   v0.5.3 textarea :focus hijack). Pin every plugin anchor's states. */
a.apx-chip-tag:link,a.apx-chip-tag:visited{color:var(--apx-dim)}
a.apx-chip-tag:hover,a.apx-chip-tag:focus,a.apx-chip-tag:active{color:var(--apx-text)}
a.apx-card-link:link,a.apx-card-link:visited,a.apx-card-link:hover,a.apx-card-link:focus,a.apx-card-link:active{color:#fff}
a.apx-btn:link,a.apx-btn:visited,a.apx-btn:hover,a.apx-btn:focus,a.apx-btn:active{color:#fff}
.apx-tool-links a:link,.apx-tool-links a:visited,.apx-tool-links a:hover,.apx-tool-links a:focus,.apx-tool-links a:active{color:var(--apx-text)}
.apx-crumbs a:link,.apx-crumbs a:visited,.apx-crumbs a:hover,.apx-crumbs a:focus,.apx-crumbs a:active{color:var(--apx-dim)}
.apx-fineprint a:link,.apx-fineprint a:visited,.apx-fineprint a:hover,.apx-fineprint a:focus,.apx-fineprint a:active{color:#dccfff}
.apx-modal-tpllink a:link,.apx-modal-tpllink a:visited,.apx-modal-tpllink a:hover,.apx-modal-tpllink a:focus,.apx-modal-tpllink a:active{color:var(--apx-dim)}
.apx-body a:link,.apx-body a:visited,.apx-body a:hover,.apx-body a:focus,.apx-body a:active{color:#dccfff}

/* grid + cards (overlay design: media fills the card, click opens the generator modal) */
.apx-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:640px){.apx-grid{grid-template-columns:repeat(3,1fr);gap:14px}}
@media(min-width:1024px){.apx-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1280px){.apx-grid{grid-template-columns:repeat(5,1fr)}}
.apx-card{position:relative;border-radius:18px;overflow:hidden;background:#150f30;border:1px solid var(--apx-line)}
.apx-card-link{display:block;text-decoration:none;color:#fff}
.apx-card-media{display:block;position:relative;aspect-ratio:9/16;background:linear-gradient(160deg,#2a1b5e,#150f30 65%,#3b1150)}
.apx-card-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.apx-card-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .25s}
.apx-card-video.is-playing{opacity:1}
.apx-befores{display:flex;flex-direction:column;align-items:center;gap:4px}
.apx-befores img{object-fit:cover;border:2px solid #fff;border-radius:9px;box-shadow:0 4px 14px rgba(0,0,0,.5);display:block;background:#241b4d}
.apx-befores .apx-before-plus{display:flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;background:rgba(7,4,15,.85);color:#fff;font-weight:800;font-size:.8rem;border:1.5px solid #fff;flex:none}
.apx-befores--card{position:absolute;left:6px;top:6px;z-index:3}
.apx-befores--card img{width:69px;height:104px}
.apx-befores--dual img{width:46px;height:64px}
.apx-card-before{position:absolute;left:6px;top:6px;z-index:3}
.apx-card-before img{width:69px;height:104px;object-fit:cover;border:2px solid #fff;border-radius:9px;display:block}
.apx-card-new{position:absolute;right:8px;top:8px;z-index:3;background:var(--apx-pink);color:#fff;border-radius:7px;padding:3px 9px;font-size:.7rem;font-weight:800;letter-spacing:.04em}
.apx-card-dur{position:absolute;right:8px;bottom:64px;z-index:3;background:rgba(7,4,15,.72);color:#fff;border-radius:7px;padding:3px 8px;font-size:.72rem;font-weight:600}
.apx-card-gen{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.92);z-index:3;background:linear-gradient(90deg,#9333ea,#db2777);color:#fff;font-weight:600;font-size:.9rem;border-radius:.6rem;padding:.55rem 1.15rem;opacity:0;transition:opacity .2s,transform .2s;box-shadow:0 10px 26px rgba(0,0,0,.45);pointer-events:none;white-space:nowrap}
@media(hover:hover){.apx-card:hover .apx-card-gen{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.apx-card-info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 12px 11px;background:linear-gradient(to top,rgba(5,3,12,.92) 30%,rgba(5,3,12,.45) 65%,transparent)}
.apx-card-info h3{margin:0 0 3px;font-size:.98rem;line-height:1.3;color:#fff;font-weight:700}
.apx-card-meta{display:block;color:#ddd3ff;font-size:.78rem}
.apx-fav{position:absolute;right:8px;top:40px;z-index:4;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(10,6,24,.66);color:#ffb9d2;font-size:1.05rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.apx-fav.is-on{color:#fff;background:var(--apx-pink);border-color:transparent}
.apx-card .apx-fav{top:40px}
.apx-card:not(:has(.apx-card-new)) .apx-fav{top:8px}
.apx-empty{color:var(--apx-dim);text-align:center;padding:22px 0}

/* how + tools */
.apx-how,.apx-tools-band,.apx-related,.apx-faq,.apx-body,.apx-collection-block,.apx-more-tags,.apx-seo{margin-top:40px}
.apx-how h2,.apx-tools-band h2,.apx-related h2,.apx-faq h2,.apx-collection-block h2,.apx-more-tags h2,.apx-seo h2{color:#fff;font-size:1.3rem}
.apx-seo{line-height:1.75;color:var(--apx-body);max-width:880px}
.apx-seo h3{color:#fff;margin:22px 0 6px;font-size:1.05rem}
.apx-seo p{margin:0 0 14px}
.apx-seo .apx-cat-list{margin:6px 0 14px}
.apx-seo p a{color:#dccfff;text-decoration:underline;text-underline-offset:3px}
.apx-steps{display:grid;gap:12px}
@media(min-width:760px){.apx-steps{grid-template-columns:repeat(3,1fr)}}
.apx-step{background:var(--apx-panel);border:1px solid var(--apx-line);border-radius:16px;padding:18px}
.apx-step-n{display:inline-flex;width:30px;height:30px;border-radius:50%;background:var(--apx-grad);color:#fff;align-items:center;justify-content:center;font-weight:800}
.apx-step h3{margin:10px 0 5px;color:#fff}
.apx-step p{color:var(--apx-dim);margin:0;line-height:1.6}
.apx-tool-links{display:flex;gap:8px;flex-wrap:wrap}
.apx-tool-links a{border:1px solid var(--apx-line);background:var(--apx-panel);color:var(--apx-text);border-radius:999px;padding:9px 15px;text-decoration:none}

/* single */
.apx-crumbs{color:var(--apx-dim);font-size:.88rem;margin-bottom:14px}
.apx-crumbs a{color:var(--apx-dim)}
.apx-single-head h1{color:#fff;font-size:1.6rem;line-height:1.3;margin:0 0 8px;font-weight:800}
@media(min-width:760px){.apx-single-head h1{font-size:2rem}}
.apx-type-line{color:var(--apx-dim);margin:0 0 12px}
.apx-card-tags{margin:0 0 12px;display:flex;gap:6px;flex-wrap:wrap}
.apx-card-tags a{font-size:.78rem;color:var(--apx-dim);border:1px solid var(--apx-line);border-radius:999px;padding:4px 11px;text-decoration:none}
.apx-tags-lg a{font-size:.85rem;padding:5px 12px}
.apx-hint-box{background:var(--apx-panel);border:1px solid var(--apx-line);border-left:4px solid var(--apx-pink);border-radius:12px;padding:13px 15px;line-height:1.6;color:var(--apx-body);margin:0 0 18px}
.apx-fineprint{color:var(--apx-dim);font-size:.84rem;line-height:1.55}
.apx-fineprint a{color:#dccfff}
.apx-body{line-height:1.75;color:var(--apx-body)}
.apx-body h2{color:#fff;margin-top:28px}
.apx-body table{width:100%;border-collapse:collapse}
.apx-body th,.apx-body td{border:1px solid var(--apx-line);padding:8px 10px}
.apx-faq details{background:var(--apx-panel);border:1px solid var(--apx-line);border-radius:12px;padding:13px 15px;margin-bottom:10px}
.apx-faq summary{cursor:pointer;font-weight:600;color:#fff}
.apx-faq p{color:var(--apx-dim);line-height:1.65}

/* generation panel (modal + inline share this) */
.apx-panel{display:grid;gap:16px;background:#100b28;border:1px solid var(--apx-line);border-radius:20px;padding:14px}
.apx-panel [hidden]{display:none!important}
@media(min-width:860px){.apx-panel{grid-template-columns:minmax(0,46fr) minmax(0,54fr);padding:20px}}
.apx-panel-topbar{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.apx-pill{display:inline-flex;align-items:center;background:transparent;border:1px solid rgba(255,255,255,.2);color:#e5e7eb;border-radius:999px;padding:.45rem 1rem;font-size:.9rem;font-weight:500;line-height:1.35}
.apx-single .apx-panel{margin-top:6px}
.apx-panel-preview{position:relative;border-radius:16px;overflow:hidden;background:linear-gradient(160deg,#2a1b5e,#150f30 60%,#3b1150);aspect-ratio:9/16;width:min(100%,330px);margin-inline:auto;align-self:start}
/* v0.5.27: on desktop the preview height is capped to the viewport
   (100vh - 140px: header + breathing room); the width follows from the
   height cap at the box 9/16 ratio, so the frame can never outgrow the
   screen and the media inside keeps filling the exact 9:16 box. */
@media(min-width:860px){.apx-panel-preview{width:min(100%,calc((100vh - 140px) * .5625));margin:0 auto}}
.apx-panel-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.apx-panel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.apx-panel-badge{position:absolute;z-index:3;background:rgba(7,4,15,.72);color:#fff;border-radius:8px;padding:4px 10px;font-size:.75rem;font-weight:700}
.apx-panel-tag{position:absolute;left:.9rem;top:.9rem;z-index:4;background:rgba(12,12,34,.85);border:1.5px solid rgba(168,85,247,.7);border-radius:999px;box-shadow:0 0 14px rgba(168,85,247,.45);color:#fff;font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:.3rem 1.1rem}
.apx-panel-befores{position:absolute;left:10px;top:56px;z-index:3}
.apx-panel-befores img{width:44px;height:62px}
.apx-panel-audiobadge{left:10px;bottom:10px;top:auto}
.apx-panel-fav{position:absolute;right:10px;top:10px;z-index:3;top:10px}
/* inline result layer (v0.5.20): sits over the template preview inside
   the same 9:16 frame; media letterboxed whole (contain) on a dark
   ground, Download bar in flow below it, switcher thumbs when a run
   produced more than one result. The befores combo yields with the
   rest of the preview; the tag (relabeled "Result" by apx.js) and
   the fav button stay above the layer. */
.apx-panel-result{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;background:#0a0618}
.apx-result-media{position:relative;flex:1 1 auto;min-height:0}
.apx-result-img,.apx-result-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.apx-result-vid{background:#000}
.apx-result-bar{flex:none;display:flex;align-items:center;gap:10px;padding:10px;background:rgba(10,6,24,.94)}
.apx-result-dl{display:inline-flex;align-items:center;gap:.45rem;background:linear-gradient(90deg,#7c3aed,#db2777);color:#fff;font-weight:700;border-radius:999px;padding:.5rem 1.25rem;text-decoration:none;font-size:.95rem;line-height:1.2;white-space:nowrap}
.apx-result-dl:hover{color:#fff;filter:brightness(1.12)}
.apx-result-thumbs{display:flex;gap:6px;margin-left:auto}
.apx-result-thumbs button{width:38px;height:50px;border-radius:6px;overflow:hidden;border:2px solid transparent;padding:0;background:#171233;cursor:pointer;display:block}
.apx-result-thumbs button.is-on{border-color:#a855f7;box-shadow:0 0 0 2px rgba(168,85,247,.35)}
.apx-result-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.apx-result-th-vid{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#fff;font-size:1rem}
.apx-panel-preview.has-result .apx-panel-befores{display:none}
/* generating stage (v0.5.21): while a job runs, this layer takes over
   the preview frame — the template art (or the visitor's own upload,
   set as the bg by apx.js) heavily blurred under a vignette, a light
   sweep crossing the frame, a breathing glow behind a spinner ring,
   rotating status lines, an elapsed timer and an indeterminate
   progress bar. All motion is transform/opacity so low-end phones
   stay smooth; the sweep/glow/bar keep moving even though the wait
   itself is static. The tag above it reads "Generating" (set by
   apx.js); the befores combo yields like it does for the result. */
.apx-panel-stage{position:absolute;inset:0;z-index:2;overflow:hidden;background:#0a0618}
.apx-stage-bg{position:absolute;inset:-26px;background-size:cover;background-position:center;filter:blur(17px) brightness(.48) saturate(1.15)}
.apx-panel-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(92% 72% at 50% 42%,transparent 26%,rgba(5,3,14,.6) 100%)}
.apx-stage-glow{position:absolute;inset:0;background:radial-gradient(46% 34% at 50% 40%,rgba(168,85,247,.34),transparent 70%);animation:apxGlow 3.4s ease-in-out infinite alternate}
@keyframes apxGlow{from{opacity:.35;transform:scale(.94)}to{opacity:.8;transform:scale(1.07)}}
.apx-stage-sweep{position:absolute;top:-12%;bottom:-12%;left:0;width:55%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.12) 42%,rgba(196,141,255,.17) 55%,transparent);transform:translateX(-140%) skewX(-8deg);animation:apxSweep 3.6s ease-in-out infinite}
@keyframes apxSweep{0%{transform:translateX(-140%) skewX(-8deg)}55%,100%{transform:translateX(330%) skewX(-8deg)}}
.apx-stage-core{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:1.3rem;text-align:center}
.apx-stage-ring{width:52px;height:52px;flex:none;border-radius:50%;border:3px solid rgba(255,255,255,.16);border-top-color:#e879f9;border-right-color:#a855f7;box-shadow:0 0 26px rgba(168,85,247,.35);animation:apxSpin 1.05s linear infinite}
@keyframes apxSpin{to{transform:rotate(360deg)}}
.apx-stage-msg{color:#fff;font-size:1.06rem;font-weight:700;line-height:1.35;margin:.2rem 0 0}
.apx-stage-sub{color:rgba(235,230,255,.85);font-size:.87rem;line-height:1.5;margin:0;max-width:27ch}
.apx-stage-bar{position:relative;width:min(230px,74%);height:5px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:.4rem}
.apx-stage-fill{position:absolute;top:0;bottom:0;left:0;width:38%;border-radius:99px;background:linear-gradient(90deg,#7c3aed,#db2777);animation:apxBar 1.7s ease-in-out infinite}
@keyframes apxBar{0%{transform:translateX(-110%)}100%{transform:translateX(295%)}}
.apx-stage-time{color:rgba(235,230,255,.55);font-size:.8rem;margin:0;letter-spacing:.1em;font-variant-numeric:tabular-nums}
.apx-panel-preview.is-generating .apx-panel-befores{display:none}
@media (prefers-reduced-motion: reduce){.apx-stage-glow,.apx-stage-sweep,.apx-stage-ring,.apx-stage-fill{animation:none}}
.apx-panel-main{display:flex;flex-direction:column;min-width:0}
.apx-hint{color:var(--apx-dim);font-size:.9rem;line-height:1.55;margin:0 0 12px}
.apx-uploads{display:grid;gap:12px}
.apx-uploads[data-count="2"]{grid-template-columns:1fr 1fr}
.apx-upload{position:relative;border:1.5px dashed rgba(139,92,246,.6);border-radius:1rem;padding:18px 14px;text-align:center;background:radial-gradient(60% 60% at 50% 45%,rgba(99,70,220,.18),transparent 70%),#10112e;cursor:pointer;min-height:11rem;display:flex;align-items:center;justify-content:center;transition:border-color .2s}
.apx-upload:hover{border-color:rgba(168,85,247,.9)}
.apx-upload--sm{min-height:8.5rem;padding:12px 8px}
.apx-upload.is-filled{border-style:solid;border-color:rgba(139,92,246,.85)}
.apx-upload-empty{display:flex;flex-direction:column;align-items:center;justify-content:center}
.apx-upload-tile{display:flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:1.1rem;background:linear-gradient(145deg,#8b5cf6,#6d3df0 55%,#b146e8);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 30px rgba(124,58,237,.55)}
.apx-upload--sm .apx-upload-tile{width:64px;height:64px;border-radius:.95rem;background:linear-gradient(145deg,#a855f7,#d946ef 55%,#ec4899);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 30px rgba(217,70,239,.5)}
.apx-upload-headline{color:#fff;font-size:1.3rem;font-weight:600;line-height:1.35;margin:16px 0 0}
.apx-wrap p.apx-upload-headline{color:#fff}
.apx-wrap p.apx-notice{color:#ffd7e7}
.apx-upload-headline--shared{grid-column:1/-1;text-align:center;margin:0 0 2px;font-size:1.25rem}
.apx-upload-browse{margin-top:14px;display:inline-flex;align-items:center;gap:.5rem;border:1px solid rgba(168,85,247,.8);background:rgba(168,85,247,.12);color:#fff;border-radius:999px;padding:.55rem 1.4rem;font-weight:600;font-size:.95rem}
.apx-upload--sm .apx-upload-browse{font-size:.85rem;padding:.35rem 1rem}
.apx-upload img,.apx-upload video{max-width:100%;max-height:280px;border-radius:12px;margin:0 auto;display:block}
.apx-upload-clear{position:absolute;right:10px;top:10px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(12,12,30,.85);color:#fff;cursor:pointer;z-index:2}
.apx-upload-label{position:absolute;left:10px;top:10px;z-index:2;pointer-events:none;background:rgba(12,12,30,.85);border:1px solid rgba(168,85,247,.55);color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.02em;line-height:1;padding:.42rem .7rem;border-radius:999px;white-space:nowrap}
.apx-examples{margin-top:14px}
.apx-examples-label{color:#9ca3af;font-size:.78rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase}
.apx-example-row{display:grid;grid-template-columns:repeat(5,1fr);gap:.9rem;margin-top:.8rem}
.apx-example-thumb{width:100%;aspect-ratio:3/4;border-radius:.6rem;border:2px solid transparent;object-fit:contain;cursor:pointer;padding:0;background:#171233;display:block}
.apx-example-thumb:hover{border-color:rgba(168,85,247,.6)}
.apx-example-thumb.is-on{border-color:#a855f7;box-shadow:0 0 0 2px rgba(168,85,247,.35)}
/* settings: summary bar + collapsible card (mirrors the source tdm spec) */
.apx-settings-bar{margin-top:14px;display:flex;align-items:center;width:100%;background:linear-gradient(90deg,#13134a,#0f1033);border:1.5px solid rgba(99,102,241,.7);border-radius:.9rem;gap:.6rem;padding:.55rem 1.1rem .55rem .55rem;cursor:pointer;color:#fff;font-family:inherit;text-align:left}
.apx-settings-bar:hover,.apx-settings-bar[aria-expanded="true"]{border-color:#8b5cf6;box-shadow:0 0 18px rgba(139,92,246,.35)}
.apx-settings-icon{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;flex:none;border-radius:.6rem;background:linear-gradient(145deg,#8b5cf6,#ec4899);color:#fff}
.apx-set-chip{border:1px solid rgba(255,255,255,.2);border-radius:.6rem;color:#fff;font-size:1.05rem;padding:.45rem 1.1rem;white-space:nowrap}
@media(max-width:560px){.apx-set-chip{font-size:.92rem;padding:.4rem .7rem}.apx-modal-head{gap:7px}.apx-modal-head h3{font-size:1.12rem}.apx-modal-head .apx-pill{padding:.32rem .68rem;font-size:.8rem}.apx-modal-x{width:34px;height:34px}}
.apx-set-chev{margin-left:auto;color:#fff;display:flex;flex:none;transition:transform .2s}
.apx-settings-bar[aria-expanded="true"] .apx-set-chev{transform:rotate(180deg)}
/* settings card is an OVERLAY (source behaviour): absolutely positioned
   against the .apx-setwrap wrapper, expanding UP from the summary bar over
   the upload/example zone. The left preview never moves, the summary bar
   and Generate stay visible below it, and panel/modal height never grows.
   Header and Save stay pinned; the middle scrolls internally (thin bar). */
.apx-setwrap{position:relative;margin-top:14px}
.apx-setwrap>.apx-settings-bar{margin-top:0}
.apx-settings-card{position:absolute;left:0;right:0;bottom:calc(100% + 10px);z-index:40;display:flex;flex-direction:column;max-height:min(440px,60vh);background:linear-gradient(180deg,#1b1547,#120f36);border:1.5px solid rgba(236,72,153,.55);border-radius:1.25rem;box-shadow:0 0 34px rgba(236,72,153,.35),0 24px 60px rgba(0,0,0,.55);padding:0;counter-reset:apxstep}
.apx-settings-card[hidden]{display:none}
/* v0.5.8: JS clamps the card inside the modal box / panel (inline max-height);
   when the space above the summary bar is cramped it flips the card to open
   downward instead (class set by clampSettings in apx.js). */
.apx-settings-card.apx-set-drop{bottom:auto;top:calc(100% + 10px)}
.apx-settings-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1.1rem .4rem;flex:none}
.apx-settings-title{color:#fff;font-weight:700;font-size:1rem}
.apx-settings-x{width:30px;height:30px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;font-size:.85rem;line-height:1;cursor:pointer;font-family:inherit}
.apx-settings-x:hover{border-color:rgba(236,72,153,.7);color:#fff}
.apx-settings-inner{background:rgba(255,255,255,.04);border-radius:1rem;padding:.25rem 1rem;margin:0 1.1rem;overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(139,92,246,.55) transparent}
.apx-settings-inner::-webkit-scrollbar{width:6px}
.apx-settings-inner::-webkit-scrollbar-thumb{background:rgba(139,92,246,.55);border-radius:3px}
.apx-settings-inner::-webkit-scrollbar-track{background:transparent}
@media(max-width:859px){.apx-settings-card{max-height:64vh}}
.apx-set-section{padding:.8rem 0}
.apx-set-section+.apx-set-section{border-top:1px solid rgba(255,255,255,.08)}
.apx-set-label{display:flex;align-items:center;gap:.6rem;color:#fff;font-size:.9rem;font-weight:700;margin-bottom:.6rem}
.apx-set-label em{font-style:normal;color:var(--apx-dim);font-weight:400}
/* settings number badge — named apx-stepnum, NOT apx-step: that class is
   the homepage "how it works" step CARD (see .apx-steps above). The two
   shared the name until v0.5.6 and the badge rule (later in the cascade,
   equal specificity) crushed the cards to 1.5rem inline-flex circles. */
.apx-stepnum{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;flex:none;border-radius:999px;background:linear-gradient(135deg,#8b5cf6,#c04ee8);box-shadow:0 0 10px rgba(168,85,247,.5);font-size:.75rem;font-weight:700;color:#fff}
.apx-stepnum::after{counter-increment:apxstep;content:counter(apxstep)}
.apx-prompt{width:100%;box-sizing:border-box;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.15);border-radius:.75rem;color:#f4f1ff;font-size:.85rem;line-height:1.5;padding:.7rem 1rem;resize:vertical;font-family:inherit}
.apx-prompt::placeholder{color:#a79fd0}
/* typed form text must stay near-white on the dark panel no matter what
   the theme's form defaults say (the prompt box inherited a near-black
   theme color/-webkit-text-fill-color, making typed text invisible) */
.apx-panel input,.apx-panel textarea,.apx-modal input,.apx-modal textarea{color:#f4f1ff;-webkit-text-fill-color:#f4f1ff;caret-color:#f4f1ff}
/* the theme's textarea:focus{color:#111} (0,1,1) beats .apx-prompt (0,1,0)
   the moment the box is focused — i.e. exactly while typing. Out-specify
   it so `color` itself (not just the fill) stays near-white on focus too. */
.apx-panel textarea:focus,.apx-panel input:focus,.apx-modal textarea:focus,.apx-modal input:focus{color:#f4f1ff;-webkit-text-fill-color:#f4f1ff}
.apx-panel textarea::placeholder,.apx-modal textarea::placeholder{color:#a79fd0;-webkit-text-fill-color:#a79fd0;opacity:1}
.apx-prompt:focus{border-color:rgba(139,92,246,.7);outline:none}
.apx-seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:.9rem}
.apx-seg button{background:rgba(13,12,40,.8);border:1px solid rgba(255,255,255,.15);color:#fff;border-radius:.75rem;padding:.65rem .5rem;cursor:pointer;font-weight:700;min-height:44px;font-size:.9rem;font-family:inherit}
.apx-seg button:hover{border-color:rgba(168,85,247,.6)}
.apx-seg button.is-on{background:linear-gradient(90deg,#8b5cf6,#ec4899);border-color:transparent;color:#fff;box-shadow:0 6px 18px rgba(192,38,211,.4)}
.apx-save{margin:.9rem 1.1rem 1rem;width:auto;flex:none;display:flex;align-items:center;justify-content:center;gap:.6rem;background:linear-gradient(90deg,#7c3aed,#8b5cf6);border:1.5px solid #ec4899;border-radius:.9rem;box-shadow:0 0 20px rgba(236,72,153,.45);color:#fff;font-size:1.3rem;font-weight:600;padding:.75rem;cursor:pointer;font-family:inherit}
.apx-save:hover{filter:brightness(1.08)}
.apx-save-price{display:inline-flex;align-items:center;gap:.35rem;color:#fbbf24;font-size:1.05rem}
.apx-audio-row{margin-top:14px;display:flex;align-items:center;gap:.6rem;background:linear-gradient(135deg,rgba(88,28,135,.2),rgba(131,24,67,.2));border:1px solid rgba(168,85,247,.3);border-radius:.5rem;padding:.75rem}
.apx-audio-icon{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;flex:none;border-radius:.5rem;background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff}
.apx-audio-label{color:#fff;font-weight:600;font-size:.875rem}
.apx-audio-note{color:#d8b4fe;font-size:.75rem}
.apx-audio-note.is-included{color:#7ee2a8}
.apx-switch{margin-left:auto;position:relative;width:48px;height:27px;border-radius:999px;border:1px solid transparent;background:#374151;cursor:pointer;flex:none;padding:0}
.apx-switch::after{content:"";position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;background:#fff;transition:left .18s,background .18s}
.apx-switch[aria-checked="true"]{background:var(--apx-grad);border-color:transparent}
.apx-switch[aria-checked="true"]::after{left:23px;background:#fff}
.apx-switch:disabled{opacity:.55;cursor:not-allowed}
.apx-notice{background:#2a1140;border:1px solid var(--apx-pink);color:#ffd7e7;border-radius:12px;padding:12px 14px;line-height:1.55;margin:14px 0 0}
/* balance bar + in-page top-up (v0.5.28): the bar sits in every panel
   directly above Generate (painted by apx.js once the balance is
   known; guests never see it). The top-up modal mirrors the
   generation modal's shell — bottom sheet on mobile, centered card
   on desktop — and layers above it (z 99950) but below the in-place
   login overlay (99990), which a guest may be routed through first. */
.apx-balbar{margin-top:14px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);border:1px solid var(--apx-line);border-radius:.75rem;padding:.55rem .8rem}
.apx-bal-label{display:inline-flex;align-items:center;gap:.45rem;color:var(--apx-dim);font-size:.92rem;white-space:nowrap}
.apx-bal-label .apx-bal-num{color:#fbbf24;font-size:1rem}
.apx-bal-label svg{flex:none}
.apx-topup-btn{margin-left:auto;border:0;cursor:pointer;background:var(--apx-grad);color:#fff;font-weight:700;border-radius:999px;padding:.5rem 1.15rem;font-size:.9rem;font-family:inherit;box-shadow:0 6px 18px rgba(255,77,141,.28);white-space:nowrap}
.apx-topup-btn:hover{filter:brightness(1.1)}
/* Title-row top-up entry (v0.5.29): feed modal head (left of the close X) + detail-page H1 row */
.apx-head-topup{flex:none}
.apx-modal-head .apx-head-topup + .apx-modal-x{margin-left:0}
.apx-single-title-row{display:flex;align-items:flex-start;gap:12px;margin:0 0 8px}
.apx-single-title-row h1{flex:1;min-width:0;margin:0}
.apx-single-title-row .apx-head-topup{margin:4px 0 0}
.apx-notice-topup{border:0;cursor:pointer;background:var(--apx-grad);color:#fff;font-weight:700;border-radius:999px;padding:.28rem .95rem;font-size:.88rem;font-family:inherit;vertical-align:baseline}
.apx-notice-topup:hover{filter:brightness(1.1)}
.apx-topup-modal{position:fixed;inset:0;z-index:99995;display:flex;align-items:flex-end;justify-content:center;color:var(--apx-text);font-family:inherit}
.apx-topup-modal[hidden]{display:none}
@media(min-width:860px){.apx-topup-modal{align-items:center;padding:22px}}
.apx-topup-backdrop{position:absolute;inset:0;background:rgba(4,2,10,.86);backdrop-filter:blur(3px)}
.apx-topup-box{position:relative;background:#0d0921;border:1px solid var(--apx-line);border-radius:22px 22px 0 0;width:100%;max-width:580px;max-height:92vh;overflow:auto;padding:18px 16px 20px}
@media(min-width:860px){.apx-topup-box{border-radius:22px;padding:20px 22px}}
.apx-topup-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.apx-topup-head h3{color:#fff;margin:0;font-size:1.25rem;line-height:1.3}
.apx-topup-bal{margin-left:auto;color:var(--apx-dim);font-size:.9rem;white-space:nowrap}
.apx-topup-bal b{color:#fbbf24}
.apx-topup-head .apx-modal-x{margin-left:0}
.apx-topup-context{background:#2a1140;border:1px solid var(--apx-pink);color:#ffd7e7;border-radius:12px;padding:10px 13px;line-height:1.55;margin:10px 0 0;font-size:.93rem}
.apx-topup-context[hidden]{display:none}
.apx-topup-body{margin-top:6px}
.apx-topup-empty{color:var(--apx-dim);text-align:center;padding:24px 0}
.apx-topup-status{color:var(--apx-body);line-height:1.6;margin:12px 0 0;font-size:.93rem}
.apx-topup-status:empty{margin:0}
.apx-topup-status a:link,.apx-topup-status a:visited,.apx-topup-status a:hover,.apx-topup-status a:focus,.apx-topup-status a:active{color:#dccfff}
.apx-billing{display:flex;gap:6px;background:rgba(255,255,255,.05);border:1px solid var(--apx-line);border-radius:999px;padding:4px;margin:12px 0 4px}
.apx-billing button{flex:1;border:0;background:transparent;color:var(--apx-dim);border-radius:999px;padding:.5rem .4rem;font-weight:700;cursor:pointer;font-family:inherit;font-size:.92rem;min-height:40px}
.apx-billing button.active{background:var(--apx-grad);color:#fff}
.apx-pay-section-label{color:var(--apx-dim);font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:16px 0 8px}
.apx-packs{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:9px}
.apx-pack{position:relative;overflow:visible;text-align:left;background:var(--apx-panel);border:1.5px solid var(--apx-line);border-radius:14px;padding:13px 14px;cursor:pointer;color:var(--apx-text);font-family:inherit;display:flex;flex-direction:column;gap:1px;min-height:44px}
.apx-pack b{font-size:1.45rem;color:#fff;line-height:1.15}
.apx-pack>span{color:var(--apx-dim);font-size:.82rem}
.apx-pack-price{font-style:normal;color:#fbbf24;font-weight:700;margin-top:7px;font-size:.95rem}
.apx-pack-unit{font-size:.76rem}
.apx-pack.active{border-color:#a855f7;box-shadow:0 0 0 2px rgba(168,85,247,.35)}
.apx-pack.popular{border-color:rgba(236,72,153,.6)}
.apx-pack-badge{position:absolute;top:-9px;right:10px;z-index:2;display:inline-flex;align-items:center;line-height:1.5;background:var(--apx-pink);color:#fff;border-radius:999px;padding:2px 9px;font-size:.68rem;font-weight:800;letter-spacing:.03em}
.apx-hide{display:none!important}
.apx-paylist{display:flex;flex-direction:column;gap:8px;padding-top:9px}
.apx-payrow{display:flex;overflow:visible;align-items:center;gap:12px;width:100%;text-align:left;background:var(--apx-panel);border:1px solid var(--apx-line);border-radius:12px;padding:10px 12px;cursor:pointer;color:var(--apx-text);font-family:inherit;min-height:44px}
.apx-payrow:hover{border-color:rgba(168,85,247,.6)}
.apx-payrow[hidden]{display:none}
.apx-payrow:disabled{opacity:.55;cursor:not-allowed}
.apx-payrow-ico{width:38px;height:38px;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1rem}
.apx-payrow-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.apx-payrow-name{color:#fff;font-weight:700;font-size:.95rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.apx-payrow-sub{color:var(--apx-dim);font-size:.8rem;line-height:1.4}
.apx-paytag{background:rgba(139,92,246,.25);color:#d8b4fe;border-radius:999px;padding:1px 8px;font-size:.68rem;font-weight:700}
.apx-paytag.anon{background:rgba(247,147,26,.2);color:#fbbf24}
.apx-paytag.rec{background:rgba(34,197,94,.18);color:#86efac}
.apx-payrow-amt{margin-left:auto;color:#fbbf24;font-weight:800;white-space:nowrap}
.apx-payrow-arrow{color:var(--apx-dim);flex:none}
.apx-pay-featured{position:relative;border-color:rgba(236,72,153,.55);background:linear-gradient(135deg,rgba(88,28,135,.25),rgba(131,24,67,.25))}
.apx-feat-badge{position:absolute;top:-9px;left:12px;z-index:2;display:inline-flex;align-items:center;line-height:1.5;background:var(--apx-grad);color:#fff;border-radius:999px;padding:2px 9px;font-size:.68rem;font-weight:800}
.apx-pay-divider{display:flex;align-items:center;gap:10px;color:var(--apx-dim);font-size:.78rem;margin:4px 0}
.apx-pay-divider::before,.apx-pay-divider::after{content:"";flex:1;height:1px;background:var(--apx-line)}
.apx-generate{position:relative;width:100%;margin-top:16px;display:flex;align-items:center;justify-content:center;gap:12px;padding:1rem 22px;background:linear-gradient(90deg,#8b5cf6,#b451e8 50%,#ec4899);border-radius:.9rem;box-shadow:0 10px 30px rgba(139,92,246,.4)}
.apx-gen-label{font-size:1.05rem}
.apx-gen-price{position:absolute;right:.6rem;top:50%;transform:translateY(-50%);background:rgba(20,12,50,.6);border-radius:999px;padding:.3rem .75rem .3rem .4rem;font-size:.95rem;color:#fbbf24;display:inline-flex;align-items:center;gap:.35rem}
.apx-gen-price b{font-weight:800}
.apx-panel .apx-fineprint{margin:10px 0 0}
.apx-shake{animation:apxshake .3s}
@keyframes apxshake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* modal */
.apx-modal{position:fixed;inset:0;z-index:99985;display:flex;align-items:flex-end;justify-content:center}
@media(min-width:860px){.apx-modal{align-items:center;padding:22px}}
.apx-modal-backdrop{position:absolute;inset:0;background:rgba(4,2,10,.82);backdrop-filter:blur(3px)}
.apx-modal-box{position:relative;background:#0d0921;border:1px solid var(--apx-line);border-radius:22px 22px 0 0;width:100%;max-height:94vh;overflow:auto;padding:18px 16px 20px}
@media(min-width:860px){.apx-modal-box{max-width:960px;border-radius:22px;padding:20px 22px}}
.apx-modal-box .apx-panel{background:transparent;border:0;padding:0}
.apx-modal-head{display:flex;gap:9px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.apx-modal-head .apx-pill{background:rgba(36,27,77,.35)}
.apx-modal-box .apx-panel-topbar{display:none}
.apx-modal-head h3{color:#fff;margin:0;font-size:1.3rem;line-height:1.3;flex:0 1 auto}
.apx-modal-x{flex:none;margin-left:auto;width:38px;height:38px;border-radius:50%;border:1px solid var(--apx-line);background:var(--apx-panel);color:#fff;cursor:pointer;font-size:1rem}
/* Settings card open inside the modal: hide the modal's own × so only the card's × shows (v0.5.7) */
.apx-modal.apx-settings-open .apx-modal-x{display:none}
.apx-modal-tpllink{margin:14px 0 0;text-align:right}
.apx-modal-tpllink a{color:var(--apx-dim);font-size:.88rem}
/* ---------- In-place login (v0.5.19): Sign in entry + login layer ----------
   The layer's visible face is our branded sign-in card only. The one
   platform-widget instance sits in .apx-login-engine as a pure
   sign-in engine: clipped to 2px, visibility-hidden, pointer-events
   off — the full generator UI must never paint (v0.5.18 defect).
   The widget's auth modal is position:fixed (z-index 2147483000)
   and lives inside the engine subtree, so it is explicitly
   re-shown below; no ancestor of the engine uses transform/filter,
   which keeps the fixed modal viewport-anchored and unclipped. */
.apx-signin-entry{position:fixed;top:14px;right:14px;z-index:99980;background:linear-gradient(90deg,#9333ea,#db2777);color:#fff;border:0;border-radius:999px;padding:.55rem 1.25rem;font-weight:700;font-size:.9rem;line-height:1.2;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.apx-signin-entry.is-docked{position:static;box-shadow:none;margin-left:0;flex:none;align-self:center;white-space:nowrap;padding:.5rem .8rem;font-size:.85rem}
/* v0.5.23 header-row fit: the docked entry shares the header flex row with the menu, the language selector and the Generate CTA. Tighten the menu item margins so all seven menu items stay on one line in both the Sign in and the wider My Collection states. The widget-scoped selector + !important are required: the theme prints an inline `.elementor-13 .wpr-nav-menu > .menu-item` rule with 7px !important margins that otherwise wins the cascade.
   v0.5.25 margin finalisation (measured live at 1440, logged-in state): at 2px the seven items sum to 677px + 4px inline gaps and Gallery needed a 988px row end against the menu widget's 688px width (row end 973px) — 15px over, Gallery still wrapped when logged in. Zero margins reclaim 28px (row span ~673px), leaving ~13px spare with the 114px My Collection button; the guest state (71px Sign in) has more room still. */
/* v0.5.26 header polish (supersedes the v0.5.23/0.5.25 margin squeeze above):
   zero margins alone left the seven items glued together with no visible
   spacing. The menu list becomes a flex row with a real 14px column gap;
   item margins stay zeroed (gap, not margins, carries the spacing, so no
   trailing waste). Width is reclaimed honestly instead of by squeezing:
   the header content row flex-grows into the slack beside the logo column,
   the language widget is capped at 130px, the Generate button and the
   docked entry lose a few px of padding, and the row gap tightens to 6px.
   Measured at 15px the seven items sum to 677px of text; with the trims
   the full-size font still fits at >=1440. In the 1280-1439 band the same
   stack only fits with the menu font at 13px (text sum ~589px, ~22px of
   slack in the worst logged-in cell) -- gap stays 14px in every band.
   All rules are desktop-scoped; the mobile hamburger layout is untouched. */
@media (min-width:1280px){
.elementor-13 .elementor-element-7a05e66{gap:0 !important}
.elementor-13 .elementor-element-4507246{flex-grow:1 !important;column-gap:6px !important}
.elementor-13 .elementor-element-3397505{flex:none !important}
.elementor-13 .elementor-element-3397505 .wpr-nav-menu{display:flex !important;flex-wrap:nowrap;align-items:center;column-gap:14px}
.elementor-13 .elementor-element-3397505 .wpr-nav-menu>.menu-item{margin-left:0 !important;margin-right:0 !important;flex:none}
.elementor-13 .elementor-element-99af468{width:130px !important;max-width:130px !important}
.elementor-13 .elementor-element-99af468 select{width:100% !important}
.elementor-13 .elementor-element-279f1e8 .elementor-button{padding:12px 14px !important}
.elementor-13 .apx-signin-entry.is-docked{padding:.5rem .65rem !important}
}
@media (min-width:1280px) and (max-width:1439.98px){
.elementor-13 .elementor-element-3397505 .wpr-nav-menu>.menu-item>a{font-size:13px}
}
.apx-login-overlay{position:fixed;inset:0;z-index:99990;display:flex;align-items:center;justify-content:center}
.apx-login-overlay[hidden]{display:none}
.apx-login-backdrop{position:absolute;inset:0;background:rgba(5,3,12,.8)}
.apx-login-box{position:relative;width:min(430px,94vw);background:#0d0b1e;border:1px solid rgba(168,85,247,.35);border-radius:20px;padding:36px 28px 26px;box-shadow:0 30px 90px rgba(0,0,0,.6);text-align:center}
.apx-login-x{position:absolute;top:10px;right:12px;z-index:5;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(12,12,30,.9);color:#fff;cursor:pointer;font-size:1rem;line-height:1}
.apx-login-brand{font-size:1.9rem;font-weight:800;color:#fff;line-height:1.15}
.apx-login-brand span{background:linear-gradient(90deg,#f472b6,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent}
.apx-login-sub{margin:10px 0 0;color:#c9c4e6;font-size:.98rem}
.apx-login-wait{margin:22px 0 0;color:#8f8ab0;font-size:.85rem}
.apx-login-note{margin-top:14px;color:#6f6a92;font-size:.75rem}
.apx-login-engine{position:absolute;left:0;top:0;width:2px;height:2px;overflow:hidden;visibility:hidden;pointer-events:none}
.apx-login-engine .aiw-modal{visibility:visible;pointer-events:auto}
@media(max-width:640px){.apx-login-box{padding:28px 18px 20px}}

/* ---- AI Tools page (page-tools.php): TOOLBOX grid, spicylab-style ---- */
.apx-kicker{color:#ff8ab1;font-size:12px;font-weight:850;text-transform:uppercase;letter-spacing:.2em}
.apx-toolbox{margin:8px 0 40px}
.apx-tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.apx-tool-card{position:relative;min-height:235px;padding:24px;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));overflow:hidden;transition:.22s;text-decoration:none;display:block;color:inherit}
.apx-tool-card:hover{transform:translateY(-4px);border-color:rgba(255,119,169,.5);box-shadow:0 20px 50px rgba(0,0,0,.3)}
.apx-tool-card:after{content:"";position:absolute;width:150px;height:150px;right:-55px;bottom:-65px;border-radius:50%;background:var(--glow,rgba(255,71,126,.18));filter:blur(7px);pointer-events:none}
.apx-tool-icon{width:42px;height:42px;border:1px solid rgba(255,255,255,.12);border-radius:13px;display:grid;place-items:center;font-weight:900;background:rgba(255,255,255,.05);font-size:15px}
.apx-tool-card h3{font-size:21px;margin:42px 0 8px;position:relative;z-index:1}
.apx-tool-card p{margin:0;color:#b9b3c9;font-size:14px;position:relative;z-index:1}
.apx-tool-arrow{position:absolute;right:22px;top:22px;font-size:22px;z-index:1}
.apx-tools-feed{margin-top:16px}
.apx-section-head{max-width:760px;margin-bottom:24px}
.apx-section-head p{color:#b9b3c9}
@media(max-width:900px){.apx-tool-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.apx-tool-grid{grid-template-columns:1fr}}