/* stylesheet */
:root {
  --clr-bg: hsl(18 22% 10%);
  --clr-surface: hsl(18 20% 14%);
  --clr-surface-2: hsl(18 19% 18%);
  --clr-border: hsl(18 16% 22%);
  --clr-teal: hsl(104 76% 54%);
  --clr-teal-dim: hsl(104 76% 42%);
  --clr-gold: hsl(254 86% 58%);
  --clr-gold-dim: hsl(254 86% 44%);
  --clr-text: hsl(250 24% 92%);
  --clr-text-dim: hsl(250 10% 65%);
  --ff-body: Verdana, Geneva, Tahoma, sans-serif;
  --rail: 218px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--clr-bg); color: var(--clr-text); font-family: var(--ff-body); line-height: 1.62; font-size: 15.5px; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--clr-teal); }
.dz15f { max-width: 980px; margin: 0 auto; padding: 22px 24px 50px; }
.hm25 { position: absolute; left: -9999px; }
.hm25:focus { left: 10px; top: 10px; background: var(--clr-teal); color: #03130a; padding: 8px 14px; z-index: 99; }
.fw92j { font-size: .83rem; color: var(--clr-text-dim); }

/* topbar + rail */
.ql10c { position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 60; display: flex; align-items: center; gap: 16px; padding: 0 18px; background: color-mix(in srgb, var(--clr-surface) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--clr-border); }
.pr43 { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 900; font-size: 1.08rem; color: var(--clr-text); }
.pm50d { color: var(--clr-teal); text-shadow: 0 0 12px var(--clr-teal); }
.ve66 { color: var(--clr-teal); }
.za80y { margin-left: auto; }
.gf70x { position: fixed; top: 56px; bottom: 0; left: 0; width: var(--rail); background: var(--clr-surface); border-right: 1px solid var(--clr-border); padding: 18px 0; display: flex; flex-direction: column; z-index: 55; }
.gf70x ul { list-style: none; flex: 1; }
.gf70x a { display: flex; align-items: center; gap: 12px; padding: 11px 20px; text-decoration: none; color: var(--clr-text-dim); font-weight: 700; font-size: .92rem; border-left: 3px solid transparent; }
.gf70x a:hover { color: var(--clr-teal); background: var(--clr-surface-2); border-left-color: var(--clr-teal); }
.kg78 { color: var(--clr-teal); width: 18px; text-align: center; }
.kq17f { padding: 14px 20px 6px; border-top: 1px solid var(--clr-border); }
.ac40q { display: none; background: none; border: 1px solid var(--clr-border); border-radius: 8px; width: 40px; height: 36px; cursor: pointer; position: relative; }
.ih50m, .ih50m::before, .ih50m::after { content: ''; position: absolute; left: 9px; right: 9px; height: 2px; background: var(--clr-text); }
.ih50m { top: 17px; } .ih50m::before { top: -6px; } .ih50m::after { top: 6px; }
.zb41 { position: fixed; top: 56px; left: 0; right: 0; z-index: 58; background: var(--clr-surface); border-bottom: 1px solid var(--clr-border); }
.zb41 ul { list-style: none; padding: 6px 0; }
.zb41 a { display: block; padding: 12px 22px; color: var(--clr-text); text-decoration: none; font-weight: 700; }
body { padding-top: 56px; padding-left: var(--rail); }
.eg39j { margin-left: 0; }

.ex28t { display: inline-block; padding: 9px 18px; border-radius: 8px; font-weight: 800; text-decoration: none; font-size: .9rem; }
.qk21 { background: var(--clr-teal); color: #03130a; box-shadow: 0 0 16px color-mix(in srgb, var(--clr-teal) 40%, transparent); }
.qk21:hover { background: var(--clr-teal-dim); color: #eafff2; }

.ko28k { margin-bottom: 20px; }
.bi83q { display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--clr-gold); border: 1px solid color-mix(in srgb, var(--clr-gold) 50%, var(--clr-border)); border-radius: 6px; padding: 3px 10px; margin-bottom: 14px; }
.ko28k h1 { font-size: clamp(1.7rem, 3.8vw, 2.4rem); line-height: 1.15; margin-bottom: 10px; }
.el16s { color: var(--clr-teal); text-shadow: 0 0 20px color-mix(in srgb, var(--clr-teal) 50%, transparent); }
.nd87 { color: var(--clr-text-dim); margin-bottom: 8px; }
.sb28j { font-size: .82rem; color: var(--clr-gold); }

.nb56r { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 26px; }
.dl88b { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.kx63e { border-color: var(--clr-teal); box-shadow: inset 0 0 22px color-mix(in srgb, var(--clr-teal) 12%, transparent); }
.pq22l { font-size: 1.7rem; font-weight: 900; color: var(--clr-teal); }
.pq22l i { font-style: normal; font-size: .9rem; color: var(--clr-text-dim); }
.fk12 { font-size: .82rem; color: var(--clr-text-dim); font-weight: 700; }
.ty36:hover { border-color: var(--clr-teal); }
.ny88 { color: var(--clr-teal); font-weight: 900; font-size: 1.2rem; }

.ep90 { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 14px; padding: 22px 24px; margin-bottom: 18px; }
.wz50 { border-color: var(--clr-gold); }
.nj77 { font-size: 1.25rem; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--clr-border); }
.ep90 h3 { margin: 20px 0 8px; font-size: 1.05rem; color: var(--clr-teal); }
.ep90 h4 { margin: 15px 0 6px; font-size: .96rem; }
.ep90 p { margin-bottom: 12px; }
.ep90 ul, .ep90 ol { margin: 0 0 13px 20px; }
.ep90 li { margin-bottom: 6px; }
.fv97t { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; }
.rd34i { background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 10px; padding: 15px; }
.rd34i.ka56m { padding: 0; overflow: hidden; }
.ox72u { border: 1px solid color-mix(in srgb, var(--clr-teal) 45%, var(--clr-border)); background: color-mix(in srgb, var(--clr-teal) 7%, var(--clr-surface-2)); border-radius: 10px; padding: 11px 14px; margin: 12px 0; font-size: .92rem; }
.ox72u.aq51 { border-color: color-mix(in srgb, var(--clr-gold) 45%, var(--clr-border)); background: color-mix(in srgb, var(--clr-gold) 7%, var(--clr-surface-2)); }
.np67a, .bw33x { list-style: none; margin-left: 0 !important; }
.np67a li, .bw33x li { padding-left: 22px; position: relative; }
.np67a li::before { content: '▲'; position: absolute; left: 0; color: var(--clr-teal); font-size: .7em; top: .45em; }
.bw33x li::before { content: '▼'; position: absolute; left: 0; color: var(--clr-gold); font-size: .7em; top: .45em; }
.sh69 { margin-left: 20px; }
.sh69 li { margin-bottom: 8px; }
.sh69 b { color: var(--clr-teal); }
.vf24e { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.dz21 { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--clr-border); text-decoration: none; }
.dz21:hover { border-color: var(--clr-teal); }
.dz21 img { width: 100%; height: 130px; object-fit: cover; }
.dz21 span { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px; background: linear-gradient(transparent, rgba(5,3,12,.9)); color: #fff; font-weight: 800; font-size: .9rem; }

.gb61 { overflow-x: auto; border: 1px solid var(--clr-border); border-radius: 10px; margin: 12px 0; }
.ez72 { width: 100%; border-collapse: collapse; min-width: 480px; font-size: .9rem; }
.ez72 th, .ez72 td { text-align: left; padding: 9px 13px; border-bottom: 1px solid var(--clr-border); }
.ez72 thead th { background: var(--clr-surface-2); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); }
.ez72 tbody tr:last-child td, .ez72 tbody tr:last-child th { border-bottom: 0; }
.ez72 th[scope="row"] { color: var(--clr-text-dim); font-weight: 600; width: 40%; }
.zd50v { display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: .74rem; font-weight: 800; }
.wo33 { background: color-mix(in srgb, var(--clr-teal) 20%, transparent); color: var(--clr-teal); }
.yo69 { background: color-mix(in srgb, var(--clr-gold) 20%, transparent); color: var(--clr-gold); }

.qv76g { display: grid; gap: 8px; }
.lw68i { background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: 10px; }
.ht36 { width: 100%; text-align: left; background: none; border: 0; color: var(--clr-text); font: inherit; font-weight: 800; font-size: .94rem; padding: 13px 44px 13px 15px; cursor: pointer; position: relative; }
.pq92r { position: absolute; right: 15px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%); }
.pq92r::before, .pq92r::after { content: ''; position: absolute; background: var(--clr-teal); transition: .2s; }
.pq92r::before { left: 0; right: 0; top: 5px; height: 2px; }
.pq92r::after { top: 0; bottom: 0; left: 5px; width: 2px; }
.ht36[aria-expanded="true"] .pq92r::after { transform: scaleY(0); }
.ta90 { padding: 0 15px 13px; color: var(--clr-text-dim); font-size: .92rem; }

.eg39j { background: var(--clr-surface); border-top: 1px solid var(--clr-border); font-size: .86rem; }
.eg39j .dz15f { padding-top: 26px; padding-bottom: 22px; }
.zu61 { margin-bottom: 12px; }
.he92 { display: flex; gap: 10px; align-items: center; margin-bottom: 13px; flex-wrap: wrap; }
.gc45s { border: 2px solid var(--clr-gold); color: var(--clr-gold); border-radius: 6px; padding: 1px 8px; font-weight: 800; }
.ii53 { color: var(--clr-text-dim); }
.av89t ul { display: flex; gap: 14px; flex-wrap: wrap; list-style: none; margin-bottom: 13px; }
.av89t a { color: var(--clr-text-dim); text-decoration: none; }
.av89t a:hover { color: var(--clr-teal); }
.hv93t, .sv85u { color: var(--clr-text-dim); font-size: .78rem; margin-bottom: 8px; }

.es36e { padding: 8px 0 30px; }
.zf79r { margin: 0 auto; padding: 22px 24px 0; max-width: 980px !important; }
.uc20o ol { display: flex; gap: 8px; list-style: none; font-size: .8rem; color: var(--clr-text-dim); margin-bottom: 15px; }
.uc20o li + li::before { content: '›'; margin-right: 8px; }
.gk96p { font-size: clamp(1.5rem, 3.2vw, 2.05rem); margin-bottom: 10px; }
.nh35 { color: var(--clr-text-dim); font-size: .84rem; margin-bottom: 18px; }
.oq22 { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 12px; padding: 19px 21px; margin-bottom: 14px; }
.oq22 h2 { margin-bottom: 9px; font-size: 1.15rem; color: var(--clr-teal); }
.oq22 p { margin-bottom: 10px; }
.oq22 ul, .oq22 ol { margin: 0 0 10px 20px; }
.wy31k { overflow-x: auto; }
.gb75u { font-size: .8rem; color: var(--clr-text-dim); margin-top: 8px; }
.go13 label { display: block; font-weight: 700; margin-bottom: 5px; font-size: .92rem; }
.go13 .gl17 { margin-bottom: 14px; }
.go13 input, .go13 select, .go13 textarea { width: 100%; background: var(--clr-surface-2); color: var(--clr-text); border: 1px solid var(--clr-border); border-radius: 8px; padding: 10px 12px; font: inherit; }
.go13 textarea { min-height: 130px; }
.yj33f { font-size: .8rem; color: var(--clr-text-dim); }

@media (max-width: 920px) {
  body { padding-left: 0; }
  .gf70x { display: none; }
  .ac40q { display: block; }
  .nb56r, .fv97t, .vf24e { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .nb56r, .fv97t, .vf24e { grid-template-columns: 1fr; }
  .za80y { display: none; }
}

.cu20 { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 14px; padding: 22px 24px; margin-bottom: 18px; }
.ul21 h2 { font-size: 1.25rem; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--clr-border); }
.ul21 p { margin-bottom: 12px; }
.ul21 ul { margin: 0 0 13px 20px; }
.ul21 li { margin-bottom: 6px; }

/* inner-page layout variants */
.or98a { max-width: 900px; }
.lc89m { margin-bottom: 26px; }
.lc89m h2 { margin-bottom: 10px; }
.tf11d { max-width: 980px; display: grid; grid-template-columns: 1fr 220px; gap: 30px; align-items: start; }
.tf11d .uc20o, .tf11d .gk96p { grid-column: 1 / -1; }
.wf24 { grid-column: 2; grid-row: 3 / span 99; border-left: 2px solid var(--clr-border); padding-left: 16px; }
.fo55t { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-dim); }
.ch77 { font-weight: 700; }
.bg69c { max-width: 700px; }
.bg69c .oq22 { border-left: 3px solid var(--clr-teal); }
@media (max-width: 820px) {
  .tf11d { grid-template-columns: 1fr; }
  .wf24 { grid-column: 1; grid-row: auto; border-left: 0; padding-left: 0; }
}

.rr24r { list-style: none; margin: 0 !important; padding: 0; display: grid; gap: 8px; }
.rk37c { padding-left: 0; font-size: .95rem; }
.rk37c time { font-weight: 700; color: var(--clr-teal); margin-right: 6px; }

/* conversion hero */
.wv71 { padding: 30px 0 6px; }
.pf89 { display: grid; grid-template-columns: 1.05fr 1fr; gap: 30px; align-items: center; }
.wv71.cv-solo .pf89 { display: block; }
.nk36o { font-size: clamp(1.25rem, 2.5vw, 1.7rem); line-height: 1.2; margin-bottom: 14px; }
.yl36 { list-style: none; margin: 0 0 18px !important; padding: 0; display: grid; gap: 9px; }
.yl36 li { position: relative; padding-left: 30px; font-size: 1.02rem; font-weight: 600; }
.yl36 li::before { content: '✓'; position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: 50%; background: var(--clr-teal); color: var(--clr-bg); font-size: .78rem; font-weight: 900; display: grid; place-items: center; }
.iw65l { font-size: 1.04rem; padding: 13px 28px; }
.qj18l { font-size: .82rem; color: var(--clr-text-dim); margin-top: 10px; }
.yi81 { border-radius: 14px; overflow: hidden; border: 1px solid var(--clr-border); margin: 0; }
.yi81 img { width: 100%; height: auto; display: block; }

/* author */
.ar61 { display: flex; align-items: center; gap: 10px; margin: 14px 0 18px; font-size: .92rem; }
.bd45j { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 34px; }
.wj78c { color: var(--clr-text-dim); }
.kc79 { padding: 36px 0; border-top: 1px solid var(--clr-border); }
.xc78o { display: flex; gap: 20px; align-items: flex-start; }
.xa22 { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 96px; border: 2px solid var(--clr-border); }
.jx70g h2 { font-size: 1.2rem; margin-bottom: 8px; }
.hg97r { font-size: .95rem; color: var(--clr-text-dim); margin-bottom: 10px; }
.jx70g p { margin-bottom: 10px; }

@media (max-width: 860px) {
  .pf89 { grid-template-columns: 1fr; }
  .xc78o { flex-direction: column; }
}

/* открытое верхнее меню на узких экранах — запасной путь, если панель #mobile-menu недоступна */
@media (max-width: 1000px) {
  .jb11y.vf17 { display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--clr-surface); border-bottom: 1px solid var(--clr-border); z-index: 60; }
  .jb11y.vf17 ul { flex-direction: column; gap: 0; }
  .jb11y.vf17 a { display: block; padding: 12px 20px; }
}

h1, h2, h3 { font-family: 'Trebuchet MS', Verdana, sans-serif; }

/* extras.mw48t — appended to the theme stylesheet at build time and renamed with
   the rest of the classes. Only theme variables are used, so the block inherits
   whatever palette and mode the site got. */

/* ── ranked shortlist (rating mode) ─────────────────────────────────────── */
.om87x { padding: 3rem 0; border-top: 1px solid var(--clr-border); }
.uh98 { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.om87x h2 { margin: 0 0 .75rem; }
.py89 { margin: 1rem 0 1.75rem; padding-left: 1.1rem; }
.py89 li { margin: .35rem 0; }
.ub70p { display: grid; gap: 1rem; }
.al55 {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.zg87e {
  border-color: var(--clr-teal);
  box-shadow: 0 0 0 1px var(--clr-teal) inset;
}
.xy41 { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.ja57b {
  flex: 0 0 auto;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--clr-surface-2);
  font-weight: 700;
}
.zg87e .ja57b { background: var(--clr-teal); color: var(--clr-bg); }
.kp98 { margin: 0; font-size: 1.15rem; flex: 1 1 auto; }
.bv24x { font-weight: 700; color: var(--clr-gold); font-size: 1.1rem; }
.al55 p { margin: .5rem 0; }
.lp98v { font-size: .95rem; opacity: .8; }
.cl48m { margin-top: .9rem; }
.gc54 { margin-top: 1.25rem; font-size: .9rem; opacity: .75; }

/* ── affiliate disclosure ───────────────────────────────────────────────── */
.ad42 {
  margin: 0 0 .75rem;
  font-size: .85rem;
  opacity: .75;
}

@media (max-width: 640px) {
  .xy41 { flex-wrap: wrap; }
  .kp98 { flex: 1 1 60%; }
}

/* ── 404 page ───────────────────────────────────────────────────────────── */
.ye54 {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--ff-body);
  margin: 0;
}
.sn54 {
  max-width: 560px;
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.hk45y {
  font-size: 3.5rem;
  font-weight: 700;
  margin: 0 0 .25rem;
  color: var(--clr-teal);
  letter-spacing: .05em;
}
.yo98 { margin: 0 0 1rem; font-size: 1.5rem; }
.sn54 p { margin: .6rem 0; opacity: .9; }
.qh37y { margin-top: 1.75rem; }

/* ── fallback figure, used when a theme renders no picture of its own ────── */
.db47t { margin: 1.5rem 0; }
.db47t img { width: 100%; height: auto; border-radius: 10px; display: block; }
.pj38b { margin: 1.5rem 0; }
.pj38b img { width: 100%; height: auto; border-radius: 8px; display: block; }

/* ── brand hero, added when the theme shows it only in og:image ──────────── */
.ia37 { margin: 0 0 1.75rem; }
.ia37 img { width: 100%; height: auto; border-radius: 12px; display: block; }

/* ── brand hero, for themes whose skeleton had it only in og:image ──────── */
.im76z, .qi36 { margin: 1.5rem 0; }
.im76z img, .qi36 img,
.ep90.ka56m img, .jd14 img, .qn60n img {
  width: 100%; height: auto; display: block; border-radius: 10px;
}