/* Shared app tiles for tools, studios and tests.
   Identity is keyed by data-app-icon; access remains server-side. */
.fx-app-tile {
    display: grid; place-items: center; position: relative; isolation: isolate;
    width: var(--app-size, 88px); height: var(--app-size, 88px); flex: 0 0 var(--app-size, 88px);
    border-radius: var(--app-radius, 23px); color: var(--app-ink, #fff);
    background: radial-gradient(ellipse at 20% 0, rgba(255,255,255,.3), transparent 65%), linear-gradient(145deg, var(--app-from, #9470f5), var(--app-to, #5334b8));
    box-shadow: inset 0 1px 1px rgba(255,255,255,.45), inset 0 -2px 3px rgba(0,0,0,.15), 0 10px 24px -10px var(--app-glow, rgba(122,77,245,.2));
}
.fx-app-tile::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.16); border-radius: inherit; pointer-events: none; }
.fx-app-tile > svg { width: 50%; height: 50%; filter: drop-shadow(0 2px 2px rgba(0,0,0,.16)); }
@media (forced-colors: active) { .fx-app-tile { color: LinkText; border: 1px solid LinkText; } }
.tools-index .th-section { margin-block: 30px 42px; }
.tools-index .th-section-head { margin-bottom: 20px; }
.tools-index .th-section-title { min-height: 0; border: 0; padding: 0; background: none; color: var(--th-text); font-size: 18px; gap: 10px; }
.tools-index .th-section-title em { color: var(--th-dim); font-size: 12px; }
.tools-index .th-section-icon { display: none; }
.tools-index .th-section-sub { margin: 5px 0 0; }
.tools-index .th-list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 12px; align-items: start; }
.tools-index .app-row { display: flex; flex-direction: column; gap: 10px; padding: 16px 8px; border-radius: 22px; text-align: center; transition: background-color .2s; }
.tools-index .app-row:hover { background: rgba(255,255,255,.035); }
:is(.tools-index, .studio-apps) .app-icon {
    --app-from: #9470f5; --app-to: #5334b8; --app-glow: rgba(122,77,245,.2);
    position: relative; isolation: isolate; width: 104px; height: 104px; flex: 0 0 104px; border-radius: 27px;
    color: #fff; background: radial-gradient(ellipse at 20% 0, rgba(255,255,255,.3), transparent 65%), linear-gradient(145deg,var(--app-from),var(--app-to));
    box-shadow: inset 0 1px 1px rgba(255,255,255,.45), inset 0 -2px 3px rgba(0,0,0,.15), 0 10px 24px -10px var(--app-glow);
    transition: transform .22s, box-shadow .22s;
}
:is(.tools-index, .studio-apps) .app-icon::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.16); border-radius: inherit; pointer-events: none; }
.tools-index .app-icon .th-icon { width: 52px; height: 52px; flex-basis: 52px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.16)); }
.tools-index .app-icon > .fx-tier { position: absolute; top: -6px; right: -7px; z-index: 1; padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--tier) 35%, #262530); background: #20212c; color: #d2d4df; box-shadow: 0 2px 5px rgba(0,0,0,.3); font-size: 9px; letter-spacing: .35px; text-transform: uppercase; }
.tools-index .app-icon > .fx-tier--pro { background: #292747; color: #c4caff; }
.tools-index .app-icon > .fx-tier--ultra { background: #352c19; color: #ffda6b; }
.tools-index .app-row:is(:hover,:focus-visible) .app-icon { transform: translateY(-4px); box-shadow: inset 0 1px 1px rgba(255,255,255,.5), 0 14px 28px -8px var(--app-glow); }
/* Studio disclosures keep their rows and explanations, with compact app identities. */
.studio-apps .aj-tool-icon.app-icon { width: 52px; height: 52px; flex-basis: 52px; border-radius: 14px; }
.studio-apps .app-icon .aj-icon { width: 26px; height: 26px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.16)); }
.studio-apps .aj-tool-link { border-radius: 18px; }
.tools-index .app-text { width: 100%; }
.tools-index .app-title { justify-content: center; min-height: 2.8em; font-size: 14px; text-wrap: balance; }
.tools-index .app-title .p-badge { display: none; }
.tools-index .app-desc { font-size: 11px; margin-top: 5px; color: var(--th-dim); }
.tools-index .app-note { font-size: 11px; margin-top: 5px; color: #a5b4fc; }
.tools-index .app-feature { display: block; margin-top: 4px; font-size: 11px; color: var(--fx-tier-pro); }
.tools-index[data-guide-plan="ultra"] .app-feature { color: var(--fx-gold); }
.tools-index .app-right { align-items: center; }
.tools-index .app-get { display: none; }

:is(.tools-index, .studio-apps) [data-app-icon="yt-video-maker"] .app-icon { --app-from: #ff504d; --app-to: #d40b28; --app-glow: rgba(255,45,55,.4); }
:is(.tools-index, .studio-apps) [data-app-icon="social-snippet"] .app-icon { --app-glow: rgba(229,51,130,.4); background: radial-gradient(circle at 20% 105%, #ffd76a, #ff8546 24%, transparent 58%), linear-gradient(145deg,#6745cc,#c52c9e 48%,#f33b68); }
:is(.tools-index, .studio-apps) [data-app-icon="ultra-artist"] .app-icon { --app-from: #bb70f2; --app-to: #723bce; --app-glow: rgba(169,86,241,.4); }
:is(.tools-index, .studio-apps) [data-app-icon="cover-cropper"] .app-icon { --app-from: #123b62; --app-to: #071c35; --app-glow: rgba(49,168,255,.3); color: #55baff; }
:is(.tools-index, .studio-apps) [data-app-icon="rhymes"] .app-icon { --app-from: #ffe34d; --app-to: #eacb32; --app-glow: rgba(255,227,77,.25); color: #191a1d; }
:is(.tools-index, .studio-apps) [data-app-icon="prompt-generator"] .app-icon { --app-from: #ff9061; --app-to: #ed542b; --app-glow: rgba(255,112,62,.35); }
:is(.tools-index, .studio-apps) [data-app-icon="ttml-sync"] .app-icon { --app-from: #ff557b; --app-to: #dc365e; --app-glow: rgba(255,85,123,.3); }
:is(.tools-index, .studio-apps) [data-app-icon="text-correct"] .app-icon { --app-from: #32c894; --app-to: #16835f; --app-glow: rgba(50,200,148,.3); }
:is(.tools-index, .studio-apps) [data-app-icon="bpm-scale-find"] .app-icon { --app-from: #248aff; --app-to: #1358c8; --app-glow: rgba(36,138,255,.4); }
:is(.tools-index, .studio-apps) [data-app-icon="generator-accords"] .app-icon { --app-from: #ff9b38; --app-to: #dd661b; --app-glow: rgba(255,155,56,.3); }
:is(.tools-index, .studio-apps) [data-app-icon="metronome-online"] .app-icon { --app-from: #303638; --app-to: #15191b; --app-glow: rgba(194,243,75,.2); color: #c2f34b; }
:is(.tools-index, .studio-apps) [data-app-icon="scale"] .app-icon {
    color: #2868c7; --app-glow: rgba(107,154,224,.25);
    background: repeating-linear-gradient(90deg,transparent 0 17%,rgba(40,104,199,.25) 17% 19%) left bottom / 100% 25% no-repeat, linear-gradient(145deg,#fffaf0,#dddcd6);
}
:is(.tools-index, .studio-apps) [data-app-icon="analyzer"] .app-icon { --app-from: #343b34; --app-to: #171c1a; --app-glow: rgba(169,239,85,.2); color: #a9ef55; }
:is(.tools-index, .studio-apps) [data-app-icon="delay-reverb-bpm"] .app-icon {
    --app-glow: rgba(211,70,72,.25);
    /* Три панели: две слева, красная на всю высоту справа. */
    background:
        linear-gradient(145deg,#343c48,#1d242e) left top / 29% 49% no-repeat,
        linear-gradient(145deg,#ccd2d8,#93a1ae) left bottom / 29% 49% no-repeat,
        linear-gradient(160deg,#e76a64,#b7373e) right top / 69% 100% no-repeat,
        #171d25;
}
:is(.tools-index, .studio-apps) [data-app-icon="delay-reverb-bpm"] .app-icon .th-icon { filter: drop-shadow(0 1px 1px rgba(0,0,0,.85)) drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
:is(.tools-index, .studio-apps) [data-app-icon="stem-splitter"] .app-icon { --app-from: #243647; --app-to: #101b29; --app-glow: rgba(158,190,212,.2); color: #a4c0d5; }
:is(.tools-index, .studio-apps) [data-app-icon="audio-converter"] .app-icon { --app-from: #164a3e; --app-to: #09251e; --app-glow: rgba(72,224,176,.25); color: #48e0b0; }
:is(.tools-index, .studio-apps) [data-app-icon="sample-slicer"] .app-icon { --app-from: #3d3937; --app-to: #201e20; --app-glow: rgba(255,177,125,.2); color: #ffb17d; }
:is(.tools-index, .studio-apps) [data-app-icon="ringtone-maker"] .app-icon { --app-from: #ffad42; --app-to: #e94043; --app-glow: rgba(255,115,62,.3); }
:is(.tools-index, .studio-apps) [data-app-icon="noise-generator"] .app-icon { --app-from: #7baed8; --app-to: #4d789f; --app-glow: rgba(123,174,216,.2); }
:is(.tools-index, .studio-apps) [data-app-icon="ultra-producer"] .app-icon { --app-from: #34312c; --app-to: #141416; --app-glow: rgba(233,199,131,.25); color: #e9c783; }
:is(.tools-index, .studio-apps) [data-app-icon="ultra-flow"] .app-icon {
    color: #ff873b; --app-glow: rgba(255,135,59,.25);
    background: linear-gradient(0deg,#ff873b 0 16%,transparent 16%), linear-gradient(145deg,#503449,#271c31);
}
:is(.tools-index, .studio-apps) [data-app-icon="midi"] .app-icon { --app-from: #f5f4f0; --app-to: #dadde2; --app-glow: rgba(219,223,232,.2); color: #252834; }
:is(.tools-index, .studio-apps) [data-app-icon="online-daw"] .app-icon { --app-from: #3d343c; --app-to: #1b1e26; --app-glow: rgba(236,82,100,.25); color: #ec5264; }
:is(.tools-index, .studio-apps) [data-app-icon="ai-chat"] .app-icon { --app-from: #a796ff; --app-to: #8070cc; --app-glow: rgba(167,150,255,.3); color: #241a43; }
:is(.tools-index, .studio-apps) [data-app-icon="royalty-calculator"] .app-icon { --app-from: #283c30; --app-to: #121a16; --app-glow: rgba(56,215,121,.25); color: #38d779; }
:is(.tools-index, .studio-apps) [data-app-icon="promo-generator"] .app-icon { --app-from: #49b6ec; --app-to: #207daf; --app-glow: rgba(73,182,236,.3); }
:is(.tools-index, .studio-apps) [data-app-icon="promo-tools"] .app-icon {
    color: #34313b; --app-glow: rgba(185,160,229,.25);
    background: linear-gradient(135deg,transparent 65%,#baa3e8 65%), linear-gradient(145deg,#fff8ec,#e6ddcf);
}
@container toolsIndex (max-width: 1100px) { .tools-index .th-list { grid-template-columns: repeat(5,minmax(0,1fr)); } }
@container toolsIndex (max-width: 850px) { .tools-index .th-list { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@container toolsIndex (max-width: 600px) {
    .tools-index .th-list { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px 6px; }
    .tools-index .app-row { padding: 10px 2px; gap: 10px; border-radius: 16px; }
    .tools-index .app-icon { width: 80px; height: 80px; flex-basis: 80px; border-radius: 21px; }
    .tools-index .app-icon .th-icon { width: 40px; height: 40px; }
    .tools-index .app-icon > .fx-tier { right: -5px; font-size: 8px; padding: 3px 6px; }
    .tools-index .app-title { font-size: 13px; }
    .tools-index .app-desc, .tools-index .app-note { font-size: 10px; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
    .tools-index .app-icon { transition: none; }
    .tools-index .app-row:is(:hover,:focus-visible) .app-icon { transform: none; }
}
@media (forced-colors: active) { .tools-index .app-icon { color: LinkText; border: 1px solid LinkText; } }
/* Next actions: shared app tiles, scoped away from tool/editor controls. */
.fx-next { max-width: 100%; margin: 44px auto 32px; }
.fx-next, .fx-next * { box-sizing: border-box; }
.fx-next h2 { margin: 0 0 16px; color: var(--fx-text-main); font-size: 20px; font-weight: 700; }
.fx-next-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.fx-next .fx-next-card { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px; border-radius: 18px; color: var(--fx-text-main); text-decoration: none; background: transparent; transition: background-color .2s; }
.fx-next .fx-next-card:hover { background: rgba(255,255,255,.04); }
.fx-next .fx-next-card:focus-visible { outline: 2px solid var(--fx-ac2); outline-offset: 3px; }
.fx-next .app-icon { display: grid; place-items: center; width: 56px; height: 56px; flex: 0 0 56px; border-radius: 15px; }
.fx-next .fx-next-icon { display: block; width: 28px; height: 28px; }
.fx-next-copy { display: block; min-width: 0; overflow-wrap: anywhere; }
.fx-next-title { display: block; font-size: 13px; font-weight: 650; line-height: 1.5; }
.fx-next-desc { display: block; margin-top: 4px; color: var(--fx-text-muted); font-size: 12px; line-height: 1.6; }
.fx-next-arrow { margin-left: auto; color: var(--fx-text-dim); flex: 0 0 auto; }
@media (max-width: 640px) { .fx-next-grid { grid-template-columns: minmax(0,1fr); } }
@media (prefers-reduced-motion: reduce) { .fx-next .fx-next-card { transition: none; } }
@media (forced-colors: active) { .fx-next .fx-next-card { border: 1px solid LinkText; } }