/* ============================================================ "ПОЛЕЗНОЕ" — resource center (full page) */
.use-back{ position:fixed; inset:0; z-index:600; overflow-y:auto; overscroll-behavior:contain; padding:0 var(--s7) var(--s10);
  background:
    radial-gradient(1200px 760px at 50% 118%, var(--accent-soft), transparent 62%),
    var(--bg); animation:useFade .45s cubic-bezier(.22,.61,.36,1); }
@keyframes useFade{ from{ opacity:0; transform:scale(.992); } to{ opacity:1; transform:none; } }
.use-panel{ width:100%; max-width:1180px; margin:0 auto; }

/* one cohesive opaque sticky top bar (header + tabs) so scrolled content never bleeds through */
.use-stickytop{ position:sticky; top:0; z-index:10; background:var(--bg); }
.use-stickytop::after{ content:""; position:absolute; left:0; right:0; top:100%; height:26px; background:linear-gradient(180deg, var(--bg), transparent); pointer-events:none; }

.use-head{ display:flex; align-items:flex-start; gap:var(--s5); padding:var(--s6) 0 var(--s4); }
.use-head__main{ flex:1; min-width:0; }
.use-head__kick{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent-bright); }
.use-head__kick::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px 1px var(--accent-glow); }
.use-head__t{ font-family:var(--display); font-weight:700; font-size:clamp(22px,2.4vw,28px); letter-spacing:-0.02em; color:var(--text-hi); margin:9px 0 0; }
.use-head__s{ font-size:13.5px; color:var(--text-lo); margin:8px 0 0; max-width:62ch; line-height:1.55; }
.use-close{ flex:none; width:38px; height:38px; border-radius:var(--r-pill); display:grid; place-items:center; background:var(--surface); border:1px solid var(--border-2); color:var(--text-mid); margin-top:4px; }
.use-close:hover{ color:var(--text-hi); border-color:var(--border-3); background:var(--surface-2); transform:rotate(90deg); }
.use-close svg{ width:18px; height:18px; }

.use-tabs{ display:flex; gap:7px; flex-wrap:wrap; padding-bottom:var(--s5); }
.use-tab{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:var(--r-pill); font-size:13px; font-weight:600; color:var(--text-lo); background:var(--surface); border:1px solid var(--border); white-space:nowrap; }
.use-tab svg{ width:15px; height:15px; }
.use-tab:hover{ color:var(--text-hi); border-color:var(--border-2); }
.use-tab.active{ background:var(--accent-soft); color:var(--accent-bright); border-color:var(--accent-line); }
.use-tab .ct{ font-family:var(--mono); font-size:10px; padding:1px 6px; border-radius:5px; background:var(--surface-3); color:var(--text-lo); }
.use-tab.active .ct{ background:color-mix(in oklab,var(--accent),transparent 80%); color:var(--accent-bright); }

.use-body{ padding-top:var(--s6); }

/* feature posts grid */
.use-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
@media (max-width:900px){ .use-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .use-grid{ grid-template-columns:1fr; } }
.use-post{ display:flex; flex-direction:column; padding:var(--s6); border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-card); cursor:pointer; text-align:left; transition:transform .28s cubic-bezier(.2,.7,.2,1), border-color .28s; }
.use-post:hover{ transform:translateY(-3px); border-color:var(--accent-line); }
.use-post__top{ display:flex; align-items:center; justify-content:space-between; }
.use-post__ico{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center; color:#fff; background:linear-gradient(150deg,var(--accent-bright),var(--accent) 55%,var(--accent-deep)); box-shadow:0 8px 20px -10px var(--accent-glow); }
.use-post__ico svg{ width:21px; height:21px; }
.use-post__tag{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; padding:3px 9px; border-radius:var(--r-pill); background:var(--surface-3); color:var(--text-lo); }
.use-post__t{ font-family:var(--display); font-weight:600; font-size:18px; color:var(--text-hi); letter-spacing:-0.01em; margin-top:var(--s5); }
.use-post__ex{ font-size:13.5px; color:var(--text-lo); line-height:1.6; margin-top:10px; flex:1; }
.use-post__foot{ display:flex; align-items:center; gap:8px; margin-top:var(--s5); font-size:12.5px; font-weight:600; color:var(--accent-bright); }
.use-post__foot svg{ width:15px; height:15px; transition:transform .25s; }
.use-post:hover .use-post__foot svg{ transform:translateX(3px); }
.use-post__read{ margin-left:auto; font-family:var(--mono); font-size:11px; font-weight:500; color:var(--text-dim); }

/* blog cards with covers */
.use-blog{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
@media (max-width:900px){ .use-blog{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .use-blog{ grid-template-columns:1fr; } }
.use-art{ display:flex; flex-direction:column; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-card); overflow:hidden; cursor:pointer; transition:transform .28s cubic-bezier(.2,.7,.2,1), border-color .28s; }
.use-art:hover{ transform:translateY(-4px); border-color:var(--border-2); }
.use-cover{ position:relative; aspect-ratio:1.85; overflow:hidden; display:grid; place-items:center; }
.use-cover::before{ content:""; position:absolute; inset:0; z-index:1; background-image:radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1.5px); background-size:15px 15px; opacity:.45; -webkit-mask:radial-gradient(115% 80% at 50% 38%, #000, transparent 80%); mask:radial-gradient(115% 80% at 50% 38%, #000, transparent 80%); }
.use-cover::after{ content:""; position:absolute; inset:0; z-index:1; background:radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.18), transparent 55%), radial-gradient(100% 110% at 50% 138%, rgba(0,0,0,0.34), transparent 68%); }
.use-cover__glyph{ position:relative; z-index:2; width:66px; height:66px; border-radius:19px; display:grid; place-items:center; color:#fff; background:linear-gradient(160deg, rgba(255,255,255,0.30), rgba(255,255,255,0.12)); border:1px solid rgba(255,255,255,0.28); box-shadow:0 14px 30px -14px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.35); }
.use-cover__glyph svg{ width:30px; height:30px; }
.use-cover__glyph--lg{ width:84px; height:84px; border-radius:24px; }
.use-cover__glyph--lg svg{ width:40px; height:40px; }
.use-cover__chip{ position:absolute; top:13px; left:13px; z-index:3; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:5px 11px; border-radius:var(--r-pill); background:rgba(8,12,16,0.42); color:#fff; border:1px solid rgba(255,255,255,0.26); box-shadow:inset 0 1px 0 rgba(255,255,255,0.18); }
.use-cover--a{ background:radial-gradient(125% 120% at 50% 32%, color-mix(in oklab,var(--accent),white 10%), var(--accent) 48%, color-mix(in oklab,var(--accent),black 24%)); }
.use-cover--b{ background:radial-gradient(125% 120% at 50% 32%, color-mix(in oklab,var(--vio),white 10%), var(--vio) 48%, color-mix(in oklab,var(--vio),black 26%)); }
.use-cover--c{ background:radial-gradient(125% 120% at 50% 32%, color-mix(in oklab,var(--ok),white 10%), var(--ok) 48%, color-mix(in oklab,var(--ok),black 26%)); }
.use-cover--d{ background:radial-gradient(125% 120% at 50% 32%, color-mix(in oklab,var(--info),white 10%), var(--info) 48%, color-mix(in oklab,var(--info),black 22%)); }
.use-cover--e{ background:radial-gradient(125% 120% at 50% 32%, color-mix(in oklab,var(--warn),white 10%), var(--warn) 48%, color-mix(in oklab,var(--warn),black 26%)); }
.use-cover--f{ background:radial-gradient(125% 120% at 50% 32%, color-mix(in oklab,var(--bad),white 10%), var(--bad) 48%, color-mix(in oklab,var(--bad),black 22%)); }
.use-art__body{ padding:var(--s5); display:flex; flex-direction:column; flex:1; }
.use-art__meta{ display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11px; color:var(--text-dim); }
.use-art__kick{ padding:3px 9px; border-radius:var(--r-pill); background:var(--accent-soft); color:var(--accent-bright); font-weight:600; letter-spacing:0.04em; }
.use-art__tag{ padding:3px 9px; border-radius:var(--r-pill); background:var(--accent-soft); color:var(--accent-bright); font-weight:600; letter-spacing:0.04em; }
.use-art__t{ font-family:var(--display); font-weight:600; font-size:17px; color:var(--text-hi); letter-spacing:-0.01em; margin-top:var(--s4); line-height:1.25; }
.use-art__ex{ font-size:13px; color:var(--text-lo); line-height:1.6; margin-top:10px; flex:1; }
.use-art__foot{ display:flex; align-items:center; gap:8px; margin-top:var(--s5); font-size:12.5px; font-weight:600; color:var(--accent-bright); }
.use-art__foot svg{ width:15px; height:15px; transition:transform .25s; }
.use-art:hover .use-art__foot svg{ transform:translateX(3px); }

/* section line above a card grid */
.use-secline{ display:flex; align-items:center; gap:12px; margin-bottom:var(--s5); }
.use-secline__t{ font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-mid); }
.use-secline__c{ font-family:var(--mono); font-size:10px; font-weight:700; padding:2px 8px; border-radius:var(--r-pill); background:var(--accent-soft); color:var(--accent-bright); }
.use-secline::after{ content:""; flex:1; height:1px; background:var(--border); }

/* reader (full article page) */
.use-panel--reader{ max-width:780px; }
.use-rbar{ position:sticky; top:0; z-index:6; display:flex; align-items:center; justify-content:space-between; gap:var(--s4); padding:var(--s5) 0 var(--s4); background:var(--bg); border-bottom:1px solid var(--border); }
.use-rbar .use-back-btn{ margin:0; }
.use-reader{ margin:0 auto var(--s8); padding-top:var(--s6); }
.use-back-btn{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:var(--r-pill); font-size:13px; font-weight:600; color:var(--text-mid); background:var(--surface); border:1px solid var(--border); white-space:nowrap; transition:all .2s; }
.use-back-btn:hover{ color:var(--text-hi); border-color:var(--border-2); transform:translateX(-2px); }
.use-back-btn svg{ width:15px; height:15px; }
.use-reader__cover{ position:relative; border-radius:var(--r-2xl); aspect-ratio:2.7; overflow:hidden; display:grid; place-items:center; box-shadow:var(--shadow-card); }
.use-reader__cover::before{ content:""; position:absolute; inset:0; z-index:1; background-image:radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1.5px); background-size:17px 17px; opacity:.4; -webkit-mask:radial-gradient(110% 80% at 50% 40%, #000, transparent 80%); mask:radial-gradient(110% 80% at 50% 40%, #000, transparent 80%); }
.use-reader__cover::after{ content:""; position:absolute; inset:0; z-index:1; background:radial-gradient(130% 90% at 50% 0%, rgba(255,255,255,0.18), transparent 56%), radial-gradient(110% 130% at 50% 140%, rgba(0,0,0,0.36), transparent 70%); }
.use-reader__cover-kick{ position:absolute; bottom:16px; left:18px; z-index:3; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:#fff; padding:6px 13px; border-radius:var(--r-pill); background:rgba(8,12,16,0.42); border:1px solid rgba(255,255,255,0.26); box-shadow:inset 0 1px 0 rgba(255,255,255,0.18); }
.use-reader__head{ margin-top:var(--s7); }
.use-reader__meta{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; color:var(--text-lo); flex-wrap:wrap; }
.use-reader__t{ font-family:var(--display); font-weight:700; font-size:clamp(28px,3.6vw,40px); letter-spacing:-0.025em; color:var(--text-hi); margin:16px 0 0; line-height:1.1; text-wrap:balance; }
.use-reader__lead{ font-size:17px; line-height:1.6; color:var(--text-mid); margin:16px 0 0; }
.use-reader__body{ margin-top:var(--s7); }
.use-reader__body p{ font-size:16.5px; line-height:1.82; color:var(--text-mid); margin:0 0 var(--s5); }
.use-reader__h2{ font-family:var(--display); font-weight:700; font-size:23px; letter-spacing:-0.02em; color:var(--text-hi); margin:var(--s7) 0 var(--s4); line-height:1.2; }
.use-reader__h2::before{ content:""; display:block; width:34px; height:3px; border-radius:2px; background:linear-gradient(90deg,var(--accent),var(--accent-bright)); margin-bottom:14px; }
.use-reader__ul{ list-style:none; margin:0 0 var(--s5); padding:0; display:flex; flex-direction:column; gap:11px; }
.use-reader__ul li{ position:relative; padding-left:26px; font-size:16px; line-height:1.7; color:var(--text-mid); }
.use-reader__ul li::before{ content:""; position:absolute; left:4px; top:11px; width:7px; height:7px; border-radius:2px; background:var(--accent); box-shadow:0 0 10px 0 var(--accent-glow); }
.use-reader__ol{ list-style:none; margin:0 0 var(--s5); padding:0; display:flex; flex-direction:column; gap:13px; counter-reset:ol; }
.use-reader__ol li{ display:flex; gap:14px; align-items:flex-start; font-size:16px; line-height:1.7; color:var(--text-mid); }
.use-reader__oln{ flex:none; width:28px; height:28px; border-radius:9px; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:13.5px; color:var(--accent-bright); background:var(--accent-soft); border:1px solid var(--accent-line); margin-top:1px; }
.use-reader__note{ display:flex; gap:14px; align-items:flex-start; margin:0 0 var(--s5); padding:var(--s5) var(--s6); border-radius:var(--r-lg); background:radial-gradient(130% 130% at 0% 0%, var(--accent-softer), transparent 62%), var(--surface); border:1px solid var(--accent-line); }
.use-reader__note-ico{ flex:none; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; color:#fff; background:linear-gradient(150deg,var(--accent-bright),var(--accent-deep)); }
.use-reader__note-ico svg{ width:17px; height:17px; }
.use-reader__note div{ font-size:15px; line-height:1.65; color:var(--text-mid); }
.use-reader__quote{ margin:var(--s6) 0; padding:var(--s2) 0 var(--s2) var(--s6); border-left:3px solid var(--accent); font-family:var(--display); font-weight:500; font-size:19px; line-height:1.5; color:var(--text-hi); letter-spacing:-0.01em; }
.use-reader__quote cite{ display:block; margin-top:12px; font-family:var(--mono); font-style:normal; font-size:12.5px; font-weight:600; color:var(--accent-bright); letter-spacing:0.02em; }
.use-reader__cta{ margin-top:var(--s8); padding:var(--s6) var(--s7); border-radius:var(--r-xl); border:1px solid var(--accent-line); background:radial-gradient(130% 130% at 0% 0%, var(--accent-soft), transparent 60%), var(--surface); display:flex; align-items:center; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; }
.use-reader__cta-t{ font-family:var(--display); font-weight:600; font-size:19px; color:var(--text-hi); letter-spacing:-0.01em; }
.use-reader__cta-s{ font-size:13.5px; color:var(--text-lo); margin-top:6px; }

/* niches table */
.use-niches__head{ margin-bottom:var(--s6); }
.use-niches__t{ font-family:var(--display); font-weight:600; font-size:22px; color:var(--text-hi); letter-spacing:-0.01em; }
.use-niches__s{ font-size:14px; color:var(--text-lo); margin-top:8px; max-width:64ch; line-height:1.6; }
.use-ntbl{ border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-card); }
.use-nrow{ display:grid; grid-template-columns:48px 1fr 120px 110px 110px; align-items:center; gap:var(--s4); padding:14px var(--s5); border-bottom:1px solid var(--border); }
.use-nrow:last-child{ border-bottom:0; }
.use-nrow--h{ background:var(--bg-soft); }
.use-nrow--h span{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-dim); }
.use-nrow:not(.use-nrow--h):hover{ background:var(--row-hover); }
.use-nrank{ font-family:var(--display); font-weight:700; font-size:16px; color:var(--accent-bright); }
.use-nname{ font-weight:600; color:var(--text-hi); font-size:14px; }
.use-ndemand{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; }
.use-ndemand .bdot{ width:7px; height:7px; border-radius:50%; }
.use-nnum{ font-family:var(--mono); font-size:13px; color:var(--text-mid); font-variant-numeric:tabular-nums; }
.use-nreply{ font-family:var(--mono); font-size:13px; font-weight:700; color:var(--ok); font-variant-numeric:tabular-nums; }
@media (max-width:700px){ .use-nrow{ grid-template-columns:36px 1fr 78px; } .use-ncol-hide{ display:none; } }

/* tools grid */
.use-tools{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); }
@media (max-width:700px){ .use-tools{ grid-template-columns:1fr; } }
.use-tool{ display:flex; align-items:flex-start; gap:var(--s4); padding:var(--s6); border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-card); transition:transform .28s, border-color .28s; }
.use-tool:hover{ transform:translateY(-3px); border-color:var(--accent-line); }
.use-tool__ico{ width:46px; height:46px; border-radius:13px; flex:none; display:grid; place-items:center; color:var(--accent-bright); background:var(--accent-soft); border:1px solid var(--accent-line); }
.use-tool__ico svg{ width:22px; height:22px; }
.use-tool__t{ font-family:var(--display); font-weight:600; font-size:17px; color:var(--text-hi); }
.use-tool__d{ font-size:13px; color:var(--text-lo); line-height:1.6; margin-top:8px; }
.use-tool__a{ margin-top:14px; }

/* ---- Топ ниши (большая сетка плашек) ---- */
.nstats{ display:grid; grid-template-columns:repeat(4,1fr); gap:11px; margin-bottom:var(--s5); }
@media (max-width:600px){ .nstats{ grid-template-columns:repeat(2,1fr); } }
.nstat{ padding:14px 16px; border-radius:var(--r-lg); background:radial-gradient(130% 130% at 0% 0%, var(--accent-softer), transparent 60%), var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-card); }
.nstat__v{ font-family:var(--display); font-weight:700; font-size:24px; letter-spacing:-0.03em; color:var(--text-hi); line-height:1; }
.nstat__l{ font-size:11.5px; color:var(--text-lo); margin-top:8px; }
.ngrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-height:56vh; overflow-y:auto; padding:6px 8px 18px 2px; scrollbar-width:thin;
  -webkit-mask:linear-gradient(180deg, transparent 0, #000 26px, #000 calc(100% - 30px), transparent 100%);
  mask:linear-gradient(180deg, transparent 0, #000 26px, #000 calc(100% - 30px), transparent 100%); }
@media (max-width:760px){ .ngrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .ngrid{ grid-template-columns:1fr; } }
.ntile{ position:relative; overflow:hidden; display:flex; flex-direction:column; padding:15px 15px 14px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-card); transition:transform .22s cubic-bezier(.2,.7,.2,1), border-color .22s, box-shadow .22s; }
.ntile::before{ content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 50% -15%, var(--accent-softer), transparent 62%); opacity:0; transition:opacity .25s; pointer-events:none; }
.ntile:hover{ transform:translateY(-4px); border-color:var(--accent-line); box-shadow:var(--shadow-hover); }
.ntile:hover::before{ opacity:1; }
.ntile > *{ position:relative; z-index:1; }
.ntile--top{ background:radial-gradient(135% 120% at 0% 0%, var(--accent-soft), transparent 58%), var(--surface); border-color:var(--accent-line); }
.ntile--top .ntile__rank{ color:#fff; background:linear-gradient(150deg,var(--accent-hot),var(--accent) 55%,var(--accent-deep)); border-color:transparent; box-shadow:0 5px 14px -5px var(--accent-glow); }
.ntile__top{ display:flex; align-items:center; justify-content:space-between; }
.ntile__rank{ font-family:var(--mono); font-size:11px; font-weight:700; color:var(--accent-bright); background:var(--accent-soft); border:1px solid var(--accent-line); padding:3px 9px; border-radius:var(--r-pill); }
.ntile__score{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:conic-gradient(currentColor var(--sc), var(--surface-3) 0); }
.ntile__score::before{ content:""; position:absolute; width:33px; height:33px; border-radius:50%; background:var(--surface); }
.ntile__score{ position:relative; }
.ntile__score-v{ position:relative; z-index:1; font-family:var(--display); font-weight:700; font-size:13px; color:var(--text-hi); }
.ntile__name{ font-family:var(--display); font-weight:600; font-size:14.5px; color:var(--text-hi); letter-spacing:-0.01em; margin-top:13px; line-height:1.25; min-height:2.5em; }
.ntile__bar{ height:5px; border-radius:999px; background:var(--surface-3); overflow:hidden; margin-top:12px; }
.ntile__bar i{ display:block; height:100%; border-radius:999px; box-shadow:0 0 10px -1px currentColor; transition:width .9s cubic-bezier(.2,.7,.2,1); }
.ntile__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:11px; padding-top:11px; border-top:1px solid var(--border); }
.ntile__ch{ display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:12px; font-weight:600; color:var(--text-lo); }
.ntile__ch svg{ width:12px; height:12px; opacity:.65; }
.ntile__reply{ display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-size:12.5px; font-weight:700; }
.ntile__reply svg{ width:12px; height:12px; }

/* ---- Анализ ниши (search → result) ---- */
.anz2{ display:flex; flex-direction:column; gap:var(--s5); }
.anz2__search{ display:flex; align-items:center; gap:11px; padding:8px 8px 8px var(--s5); border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--border-2); box-shadow:var(--shadow-card); }
.anz2__search:focus-within{ border-color:var(--accent-line); }
.anz2__ico{ color:var(--text-lo); display:grid; place-items:center; }
.anz2__ico svg{ width:19px; height:19px; }
.anz2__input{ flex:1; min-width:0; font-size:15px; color:var(--text-hi); background:none; border:0; outline:0; }
.anz2__input::placeholder{ color:var(--text-dim); }
.anz2__btn{ flex:none; }
.anz2__try{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.anz2__try-l{ font-size:12.5px; color:var(--text-dim); }
.anz2__chip{ padding:7px 13px; border-radius:var(--r-pill); font-size:12.5px; font-weight:600; color:var(--text-lo); background:var(--surface); border:1px solid var(--border); transition:all .2s; }
.anz2__chip:hover{ color:var(--accent-bright); border-color:var(--accent-line); background:var(--accent-soft); }
.anz2__result{ padding:var(--s6); border-radius:var(--r-xl); background:radial-gradient(130% 120% at 100% 0%, var(--accent-soft), transparent 55%), var(--surface); border:1px solid var(--accent-line); box-shadow:var(--shadow-card); animation:useUp .35s cubic-bezier(.2,.7,.2,1) both; }
.anz2__rhead{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.anz2__rname{ font-family:var(--display); font-weight:700; font-size:22px; color:var(--text-hi); letter-spacing:-0.02em; line-height:1.1; }
.anz2__rsub{ font-size:12.5px; color:var(--text-lo); margin-top:6px; }
.anz2__rdemand{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; white-space:nowrap; padding:6px 12px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--border); }
.anz2__rdemand .bdot{ width:7px; height:7px; border-radius:50%; }
.anz2__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-top:var(--s5); }
.anz2__stat{ padding:14px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--border); }
.anz2__sl{ font-size:10.5px; color:var(--text-lo); }
.anz2__sv{ font-family:var(--display); font-weight:700; font-size:22px; color:var(--text-hi); margin-top:8px; letter-spacing:-0.02em; }
.anz2__scorebar{ height:8px; border-radius:999px; background:var(--surface-3); overflow:hidden; margin-top:var(--s5); }
.anz2__scorebar i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--accent-bright)); transition:width .6s cubic-bezier(.2,.7,.2,1); }
.anz2__rec{ display:flex; align-items:center; gap:9px; margin-top:var(--s5); padding:12px 14px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--border); font-size:13.5px; font-weight:500; color:var(--text-mid); }
.anz2__rec svg{ width:16px; height:16px; flex:none; color:var(--accent-bright); }

/* anz2 loading state */
.anz2__btn--loading{ opacity:.75; pointer-events:none; min-width:130px; }
.anz2__spin{ display:inline-flex; animation:anz2Spin 1s linear infinite; }
.anz2__spin svg{ width:17px; height:17px; }
@keyframes anz2Spin{ to{ transform:rotate(360deg); } }

.anz2__skeleton{ padding:var(--s6); border-radius:var(--r-xl); background:var(--surface); border:1px solid var(--border); display:flex; flex-direction:column; gap:var(--s4); animation:useUp .3s both; }
.anz2__skel-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.anz2__skel-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }
.anz2__skel-block{ border-radius:var(--r-md); background:linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size:200% 100%; animation:skelShimmer 1.4s ease infinite; }
@keyframes skelShimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
.anz2__skel-block--name{ height:28px; width:55%; border-radius:var(--r-md); }
.anz2__skel-block--badge{ height:34px; width:88px; border-radius:var(--r-pill); }
.anz2__skel-block--stat{ height:72px; }
.anz2__skel-block--bar{ height:8px; border-radius:999px; }
.anz2__skel-block--rec{ height:42px; border-radius:var(--r-md); }

/* ---- ROI calculator ---- */
.roi{ display:grid; grid-template-columns:1.1fr 1fr; gap:var(--s5); align-items:stretch; }
@media (max-width:760px){ .roi{ grid-template-columns:1fr; } }
.roi__inputs{ padding:var(--s6); border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-card); display:flex; flex-direction:column; gap:var(--s5); }
.roi__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.roi__card{ position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-height:78px; padding:14px 14px 13px; border-radius:var(--r-md); background:var(--surface-2); border:1px solid var(--border); transition:border-color .2s, transform .18s, box-shadow .2s; }
.roi__card::after{ content:""; position:absolute; inset:0; background:radial-gradient(130% 140% at 50% 0%, color-mix(in oklab,var(--accent),transparent 84%), transparent 64%); opacity:0; transition:opacity .25s; pointer-events:none; }
.roi__card > *{ position:relative; z-index:1; }
.roi__card:hover{ border-color:var(--border-2); transform:translateY(-2px); }
.roi__card.on{ border-color:color-mix(in oklab,var(--accent),transparent 52%); box-shadow:0 6px 18px -14px var(--accent-glow); }
.roi__card.on::after{ opacity:1; }
.roi__card-name{ font-family:var(--display); font-weight:700; font-size:15px; color:var(--text-hi); letter-spacing:-0.01em; }
.roi__card.on .roi__card-name{ color:var(--accent-bright); }
.roi__card-price{ font-family:var(--display); font-weight:600; font-size:13px; color:var(--text-lo); font-variant-numeric:tabular-nums; }
.roi__card.on .roi__card-price{ color:var(--text-mid); }
.roi__card-check{ position:absolute; top:10px; right:10px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(150deg, color-mix(in oklab,var(--accent-bright),white 14%), var(--accent)); color:#fff; box-shadow:0 2px 7px -3px var(--accent-glow); z-index:2; }
.roi__card-check svg{ width:12px; height:12px; }
.roi__row{ }
.roi__rowtop{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.roi__lbl{ font-size:13px; color:var(--text-mid); }
.roi__val{ font-family:var(--mono); font-size:13.5px; font-weight:700; color:var(--text-hi); }
.roi__range{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px; outline:none; cursor:pointer;
  background:linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--fill,40%), var(--surface-3) var(--fill,40%)); }
.roi__range::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:linear-gradient(180deg,var(--accent-bright),var(--accent)); border:3px solid var(--bg-soft); box-shadow:0 4px 12px -3px var(--accent-glow); cursor:pointer; }
.roi__range::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--accent); border:3px solid var(--bg-soft); cursor:pointer; }
.roi__peracc{ font-size:11.5px; color:var(--text-dim); margin-top:-4px; }
.roi__out{ padding:var(--s6); border-radius:var(--r-lg); background:radial-gradient(130% 120% at 50% 0%, var(--accent-soft), transparent 55%), var(--surface); border:1px solid var(--accent-line); box-shadow:var(--shadow-card); display:flex; flex-direction:column; }shadow:var(--shadow-card); }
.roi__out-row{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--border); font-size:13.5px; color:var(--text-mid); }
.roi__out-row b{ font-family:var(--mono); font-size:15px; color:var(--text-hi); }
.roi__profit{ margin-top:var(--s5); flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:var(--s6) var(--s5); border-radius:var(--r-lg); background:radial-gradient(120% 130% at 50% 0%, var(--accent-soft), transparent 65%); }
.roi__profit-l{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-dim); }
.roi__profit-v{ font-family:var(--display); font-weight:700; font-size:clamp(32px,4.2vw,44px); letter-spacing:-0.03em; color:var(--text-hi); margin-top:10px; line-height:1; }
.roi__profit-v span{ font-size:22px; color:var(--accent); }
.roi__roi{ display:inline-flex; align-items:center; gap:5px; margin-top:13px; padding:6px 14px; border-radius:var(--r-pill); background:var(--ok-soft); color:var(--ok); font-family:var(--mono); font-size:13px; font-weight:700; border:1px solid color-mix(in oklab,var(--ok),transparent 76%); }
.roi__roi svg{ width:14px; height:14px; }
.roi__extra{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:var(--s5); }
.roi__xc{ text-align:center; padding:13px 10px; border-radius:var(--r-md); background:var(--surface-2); border:1px solid var(--border); }
.roi__xl{ font-size:10.5px; color:var(--text-lo); }
.roi__xv{ font-family:var(--display); font-weight:700; font-size:18px; color:var(--text-hi); margin-top:7px; letter-spacing:-0.01em; }
.roi__note{ font-size:12px; color:var(--text-dim); margin-top:var(--s5); line-height:1.5; text-align:center; }

/* ---- Templates ---- */
.tpl{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); }
@media (max-width:760px){ .tpl{ grid-template-columns:1fr; } }
.tpl__card{ padding:var(--s5) var(--s6) var(--s6); border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-card); transition:border-color .25s; }
.tpl__card:hover{ border-color:var(--border-2); }
.tpl__top{ display:flex; align-items:center; gap:11px; margin-bottom:13px; }
.tpl__title{ font-family:var(--display); font-weight:600; font-size:14px; color:var(--text-hi); min-width:0; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tpl__copy{ display:inline-flex; align-items:center; gap:6px; flex:none; padding:7px 12px; border-radius:var(--r-pill); font-size:12px; font-weight:600; color:var(--text-mid); background:var(--surface-2); border:1px solid var(--border); transition:all .2s; }
.tpl__copy svg{ width:13px; height:13px; }
.tpl__copy:hover{ color:var(--text-hi); border-color:var(--border-2); }
.tpl__copy.ok{ color:var(--ok); background:var(--ok-soft); border-color:color-mix(in oklab,var(--ok),transparent 76%); }
.tpl__text{ font-size:13.5px; color:var(--text-lo); line-height:1.65; margin:0; }

/* blog with topic sidebar */
.blogwrap{ display:grid; grid-template-columns:210px 1fr; gap:var(--s5); align-items:start; }
@media (max-width:760px){ .blogwrap{ grid-template-columns:1fr; } }
.blogside{ position:sticky; top:198px; display:flex; flex-direction:column; gap:3px; padding:10px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-card); }
@media (max-width:760px){ .blogside{ position:static; flex-direction:row; flex-wrap:wrap; } }
.blogside__t{ font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-dim); padding:8px 10px 6px; }
@media (max-width:760px){ .blogside__t{ width:100%; } }
.blogside__item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:var(--r-md); font-size:13.5px; font-weight:600; color:var(--text-mid); text-align:left; transition:all .18s; }
.blogside__item:hover{ background:var(--surface-2); color:var(--text-hi); }
.blogside__item.on{ background:var(--accent-soft); color:var(--accent-bright); }
.blogside__c{ font-family:var(--mono); font-size:11px; font-weight:700; padding:1px 8px; border-radius:var(--r-pill); background:var(--surface-3); color:var(--text-lo); }
.blogside__item.on .blogside__c{ background:color-mix(in oklab,var(--accent),transparent 80%); color:var(--accent-bright); }
.blogwrap__grid{ grid-template-columns:repeat(2,1fr); }
@media (max-width:1000px){ .blogwrap__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .blogwrap__grid{ grid-template-columns:1fr; } }

/* ---- Обзор функций (sidebar + per-function articles) ---- */
.fov{ display:grid; grid-template-columns:240px 1fr; gap:var(--s5); align-items:start; }
@media (max-width:820px){ .fov{ grid-template-columns:1fr; } }
.fov__side{ position:sticky; top:152px; display:flex; flex-direction:column; gap:3px; padding:10px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-card); }
@media (max-width:820px){ .fov__side{ position:static; flex-direction:row; flex-wrap:wrap; } }
.fov__item{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:var(--r-md); font-size:13.5px; font-weight:600; color:var(--text-mid); text-align:left; transition:all .18s; }
.fov__item:hover{ background:var(--surface-2); color:var(--text-hi); }
.fov__item.on{ background:var(--accent-soft); color:var(--accent-bright); }
.fov__item-ico{ width:28px; height:28px; border-radius:8px; flex:none; display:grid; place-items:center; color:var(--accent-bright); background:var(--accent-soft); border:1px solid var(--accent-line); }
.fov__item.on .fov__item-ico{ color:#fff; background:linear-gradient(150deg,var(--accent-hot),var(--accent-deep)); border-color:transparent; }
.fov__item-ico svg{ width:15px; height:15px; }
.fov__item-tx{ min-width:0; }
@media (max-width:820px){ .fov__item-tx{ white-space:nowrap; } }

.fov__hero{ display:grid; grid-template-columns:300px 1fr; gap:var(--s5); padding:var(--s5); border-radius:var(--r-xl); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-card); margin-bottom:var(--s6); }
@media (max-width:620px){ .fov__hero{ grid-template-columns:1fr; } }
.fov__hero-cover{ position:relative; aspect-ratio:1.7; border-radius:var(--r-lg); overflow:hidden; display:grid; place-items:center; }
.fov__hero-cover::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.1), transparent 60%); }
.fov__hero-tx{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.fov__hero-kick{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent-bright); }
.fov__hero-t{ font-family:var(--display); font-weight:700; font-size:clamp(20px,2.4vw,26px); letter-spacing:-0.02em; color:var(--text-hi); margin:10px 0 0; line-height:1.12; }
.fov__hero-d{ font-size:14px; color:var(--text-lo); line-height:1.6; margin:10px 0 var(--s5); }
.fov__grid{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1000px){ .fov__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .fov__grid{ grid-template-columns:1fr; } }

/* fade-in for body swaps — gentle, opacity-led */
.use-anim{ animation:useUp .62s cubic-bezier(.22,.61,.36,1) both; }
@keyframes useUp{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }

/* ---- Топ ниши · controls + leaderboard (redesign) ---- */
.nctrl{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.nctrl__search{ flex:1; min-width:230px; display:flex; align-items:center; gap:10px; padding:9px 12px 9px var(--s4); border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--border-2); box-shadow:var(--shadow-card); transition:border-color .2s; }
.nctrl__search:focus-within{ border-color:var(--accent-line); }
.nctrl__search > svg{ width:18px; height:18px; color:var(--text-lo); flex:none; }
.nctrl__search input{ flex:1; min-width:0; font-size:14.5px; color:var(--text-hi); background:none; border:0; outline:0; }
.nctrl__search input::placeholder{ color:var(--text-dim); }
.nctrl__clear{ flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; color:var(--text-lo); background:var(--surface-3); transition:color .2s; }
.nctrl__clear:hover{ color:var(--text-hi); }
.nctrl__clear svg{ width:13px; height:13px; }
.nctrl__sort{ display:flex; gap:3px; padding:3px; border-radius:var(--r-pill); background:var(--surface-2); border:1px solid var(--border); }
.nctrl__sort button{ padding:7px 15px; border-radius:var(--r-pill); font-size:12.5px; font-weight:600; color:var(--text-lo); white-space:nowrap; transition:color .18s, background .18s; }
.nctrl__sort button:hover{ color:var(--text-hi); }
.nctrl__sort button.on{ background:var(--accent-soft); color:var(--accent-bright); }

.nctrl__filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:var(--s5); }
.nchip{ display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:var(--r-pill); font-size:12.5px; font-weight:600; color:var(--text-lo); background:var(--surface); border:1px solid var(--border); transition:color .18s, border-color .18s, background .18s; }
.nchip:hover{ color:var(--text-hi); border-color:var(--border-2); }
.nchip.on{ background:var(--accent-soft); color:var(--accent-bright); border-color:var(--accent-line); }
.nchip__dot{ width:7px; height:7px; border-radius:50%; }
.nchip__c{ font-family:var(--mono); font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:var(--r-pill); background:var(--surface-3); color:var(--text-lo); }
.nchip.on .nchip__c{ background:color-mix(in oklab,var(--accent),transparent 80%); color:var(--accent-bright); }

.nlead{ border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-card); }
.nlrow{ display:grid; grid-template-columns:46px minmax(0,1fr) 124px 152px 92px 134px; align-items:center; gap:var(--s4); padding:12px var(--s5); border-bottom:1px solid var(--border); transition:background .18s; }
.nlrow:last-child{ border-bottom:0; }
.nlrow--h{ background:var(--bg-soft); }
.nlrow--h span{ font-family:var(--mono); font-size:10px; letter-spacing:0.09em; text-transform:uppercase; color:var(--text-dim); }
.nlrow:not(.nlrow--h):hover{ background:var(--row-hover); }
.nlrow--top{ background:radial-gradient(120% 140% at 0% 0%, var(--accent-softer), transparent 58%); }
.nlrow--top:hover{ background:radial-gradient(120% 140% at 0% 0%, var(--accent-soft), transparent 58%); }
.nlrow__rank{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:13.5px; color:var(--text-lo); background:var(--surface-2); border:1px solid var(--border); }
.nlrow__rank.rank--hot{ color:#fff; background:linear-gradient(150deg, color-mix(in oklab,var(--ok),white 22%), var(--ok) 55%, color-mix(in oklab,var(--ok),black 22%)); border-color:transparent; box-shadow:0 4px 12px -5px color-mix(in oklab,var(--ok),transparent 38%); }
.nlrow__rank.rank--warm{ color:#fff; background:linear-gradient(150deg, color-mix(in oklab,var(--warn),white 22%), var(--warn) 55%, color-mix(in oklab,var(--warn),black 22%)); border-color:transparent; box-shadow:0 4px 12px -5px color-mix(in oklab,var(--warn),transparent 48%); }
.nlrow__rank.rank--cool{ color:var(--text-mid); background:linear-gradient(150deg, var(--surface-3), var(--surface-2)); border-color:var(--border); }
.nlrow--top .nlrow__rank{ color:#fff; background:linear-gradient(150deg,var(--accent-hot),var(--accent) 55%,var(--accent-deep)); border-color:transparent; box-shadow:0 5px 14px -6px var(--accent-glow); }
.nlrow__name{ font-weight:600; font-size:14px; color:var(--text-hi); letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nlrow__demand{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; }
.nlrow__dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.nlrow__ch{ display:flex; flex-direction:column; gap:5px; }
.nlrow__chnum{ font-family:var(--mono); font-size:12.5px; color:var(--text-mid); font-variant-numeric:tabular-nums; }
.nlrow__chbar{ height:4px; border-radius:999px; background:var(--surface-3); overflow:hidden; }
.nlrow__chbar i{ display:block; height:100%; border-radius:999px; background:var(--text-dim); }
.nlrow__reply{ display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.nlrow__reply svg{ width:13px; height:13px; }
.nlrow__score{ display:flex; align-items:center; gap:10px; }
.nlrow__scbar{ flex:1; height:6px; border-radius:999px; background:var(--surface-3); overflow:hidden; }
.nlrow__scbar i{ display:block; height:100%; border-radius:999px; box-shadow:0 0 8px -1px currentColor; transition:width .8s cubic-bezier(.2,.7,.2,1); }
.nlrow__score b{ font-family:var(--display); font-weight:700; font-size:14px; color:var(--text-hi); width:24px; text-align:right; }

.nlead__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:14px; }
.nlead__count{ font-size:12.5px; color:var(--text-lo); }
.nlead__count b{ color:var(--text-hi); font-family:var(--mono); }
.nlead__more{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:var(--r-pill); font-size:13px; font-weight:600; color:var(--accent-bright); background:var(--accent-soft); border:1px solid var(--accent-line); transition:background .2s; }
.nlead__more:hover{ background:color-mix(in oklab,var(--accent),transparent 84%); }
.nlead__more svg{ width:15px; height:15px; transition:transform .25s; }
.nlead-empty{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:48px 20px; text-align:center; color:var(--text-lo); font-size:14px; border:1px dashed var(--border-2); border-radius:var(--r-lg); }
.nlead-empty svg{ width:26px; height:26px; color:var(--text-dim); }

@media (max-width:860px){
  .nlrow{ grid-template-columns:40px minmax(0,1fr) 84px 116px; gap:12px; }
  .nl-demand, .nl-ch{ display:none; }
}
@media (max-width:560px){
  .nlrow{ grid-template-columns:34px minmax(0,1fr) 76px; }
  .nl-score{ display:none; }
  .nctrl__sort{ width:100%; justify-content:space-between; }
  .nctrl__sort button{ flex:1; text-align:center; padding:7px 8px; }
}