/* ============================================================
   РАЗДЕЛ ГАЙДОВ /guides/
   Значения берём из переменных темы NEO; у каждой — фолбэк,
   чтобы вёрстка не разъехалась, если тему переименуют.
   ============================================================ */

.gd-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: var(--font-size-s, 12px);
    color: var(--text-secondary, #9fa2b9);
}
.gd-crumbs a { color: var(--text-secondary, #9fa2b9); text-decoration: none; }
.gd-crumbs a:hover { color: var(--span, #76ab29); }
.gd-crumbs__current { color: var(--text-default, #fff); }

.gd-icon {
    display: block;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    fill: var(--span, #76ab29);
}
.gd-icon--lg { flex-basis: 28px; width: 28px; height: 28px; }

/* ---------------------------- Хаб ---------------------------- */

.gd-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 22px;
    padding: 28px;
    border: 1px solid var(--transparent-5-w, rgba(255, 255, 255, .06));
    border-radius: var(--br-16, 16px);
    background-color: var(--card, #1f1f28);
    background-image: radial-gradient(120% 140% at 100% 0%, var(--span-low, rgba(118, 171, 41, .12)) 0%, transparent 60%);
}
.gd-hero__badge {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 10px;
    border-radius: var(--br-6, 6px);
    background-color: var(--span-middle, rgba(118, 171, 41, .2));
    color: var(--span, #76ab29);
    font-size: var(--font-size-s, 12px);
    font-weight: var(--font-weight-6, 600);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.gd-hero__title {
    margin: 0 0 12px;
    font-size: clamp(22px, 2.6vw, 32px);
    line-height: 1.2;
    color: var(--text-default, #fff);
}
.gd-hero__lead {
    max-width: 780px;
    margin: 0;
    font-size: var(--font-size-default, 16px);
    line-height: 1.65;
    color: var(--text-secondary, #9fa2b9);
}

.gd-section-title {
    margin: 0 0 14px;
    font-size: var(--font-size-xl, 20px);
    line-height: 1.3;
    color: var(--text-default, #fff);
}

.gd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.gd-grid--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }

.gd-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--transparent-5-w, rgba(255, 255, 255, .06));
    border-radius: var(--br-16, 16px);
    background-color: var(--card, #1f1f28);
    color: inherit;
    text-decoration: none;
    transition: border-color .2s ease, transform .2s ease;
}
.gd-card:hover {
    border-color: var(--span-half, rgba(118, 171, 41, .5));
    transform: translateY(-2px);
}
.gd-card__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    border-radius: var(--br-10, 10px);
    background-color: var(--span-middle, rgba(118, 171, 41, .2));
}
.gd-card__title {
    margin: 0 0 8px;
    font-size: var(--font-size-l, 18px);
    line-height: 1.3;
    color: var(--text-default, #fff);
}
.gd-card__text {
    margin: 0 0 14px;
    font-size: var(--font-size-m, 14px);
    line-height: 1.6;
    color: var(--text-secondary, #9fa2b9);
}
.gd-card__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    color: var(--span, #76ab29);
    font-size: var(--font-size-m, 14px);
    font-weight: var(--font-weight-6, 600);
}
.gd-card:hover .gd-card__more span { transform: translateX(3px); }
.gd-card__more span { transition: transform .2s ease; }
.gd-card--ext .gd-card__ico { background-color: var(--transparent-5-w, rgba(255, 255, 255, .06)); }
.gd-card--ext .gd-icon { fill: var(--money, #f4ca80); }
.gd-card--ext .gd-card__more { color: var(--money, #f4ca80); }
.gd-card--sm .gd-card__text { margin-bottom: 0; }

.gd-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-bottom: 14px;
    font-size: var(--font-size-s, 12px);
    color: var(--text-secondary, #9fa2b9);
}
.gd-meta__item { display: inline-flex; align-items: center; gap: 5px; }
.gd-meta__item--dim { opacity: .75; }
.gd-meta__ico {
    display: block;
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
    fill: var(--text-secondary, #9fa2b9);
}

/* -------------------------- Статья -------------------------- */

.gd-article {
    padding: 24px 26px 20px;
    border: 1px solid var(--transparent-5-w, rgba(255, 255, 255, .06));
    border-radius: var(--br-16, 16px);
    background-color: var(--card, #1f1f28);
}

.gd-head {
    display: flex;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--transparent-5-w, rgba(255, 255, 255, .06));
}
.gd-head__ico {
    display: inline-flex;
    flex: 0 0 52px;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--br-12, 12px);
    background-color: var(--span-middle, rgba(118, 171, 41, .2));
}
.gd-head__body { min-width: 0; }
.gd-head__badge {
    display: inline-block;
    margin-bottom: 8px;
    padding: 3px 9px;
    border-radius: var(--br-6, 6px);
    background-color: var(--transparent-5-w, rgba(255, 255, 255, .06));
    color: var(--span, #76ab29);
    font-size: var(--font-size-xs, 10px);
    font-weight: var(--font-weight-6, 600);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.gd-head__title {
    margin: 0 0 12px;
    font-size: clamp(21px, 2.4vw, 30px);
    line-height: 1.22;
    color: var(--text-default, #fff);
}
.gd-head .gd-meta { margin-bottom: 0; }

.gd-lead {
    margin: 18px 0 20px;
    font-size: var(--font-size-default, 16px);
    line-height: 1.7;
    color: var(--text-custom, #989eca);
}

.gd-toc {
    margin-bottom: 24px;
    padding: 16px 18px;
    border: 1px solid var(--transparent-5-w, rgba(255, 255, 255, .06));
    border-radius: var(--br-12, 12px);
    background-color: var(--transparent-3-w, rgba(255, 255, 255, .03));
}
.gd-toc__label {
    display: block;
    margin-bottom: 10px;
    color: var(--text-secondary, #9fa2b9);
    font-size: var(--font-size-s, 12px);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.gd-toc__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 8px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.gd-toc__list a {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text-default, #fff);
    font-size: var(--font-size-m, 14px);
    line-height: 1.4;
    text-decoration: none;
}
.gd-toc__list a:hover { color: var(--span, #76ab29); }
.gd-toc__num {
    display: inline-flex;
    flex: 0 0 22px;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--br-6, 6px);
    background-color: var(--span-middle, rgba(118, 171, 41, .2));
    color: var(--span, #76ab29);
    font-size: var(--font-size-s, 12px);
    font-weight: var(--font-weight-6, 600);
}

.gd-sec { scroll-margin-top: 90px; margin-bottom: 26px; }
.gd-sec__title {
    margin: 0 0 12px;
    font-size: var(--font-size-xxl, 22px);
    line-height: 1.3;
    color: var(--text-default, #fff);
}

.gd-p {
    margin: 0 0 12px;
    font-size: var(--font-size-m, 14px);
    line-height: 1.75;
    color: var(--text-secondary, #9fa2b9);
}
.gd-sec a, .gd-seo a, .gd-faq a { color: var(--span, #76ab29); text-decoration: none; }
.gd-sec a:hover, .gd-seo a:hover, .gd-faq a:hover { text-decoration: underline; }
.gd-sec strong, .gd-seo strong { color: var(--text-default, #fff); font-weight: var(--font-weight-6, 600); }

.gd-list {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}
.gd-list li {
    position: relative;
    margin-bottom: 9px;
    padding-left: 20px;
    font-size: var(--font-size-m, 14px);
    line-height: 1.7;
    color: var(--text-secondary, #9fa2b9);
}
.gd-list li::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 4px;
    width: 6px;
    height: 6px;
    border-radius: var(--br-50, 50%);
    background-color: var(--span, #76ab29);
}

.gd-steps {
    counter-reset: gd-step;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}
.gd-steps li {
    counter-increment: gd-step;
    position: relative;
    margin-bottom: 10px;
    padding: 0 0 0 40px;
    min-height: 26px;
    font-size: var(--font-size-m, 14px);
    line-height: 1.7;
    color: var(--text-secondary, #9fa2b9);
}
.gd-steps li::before {
    content: counter(gd-step);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--br-8, 8px);
    background-color: var(--span-middle, rgba(118, 171, 41, .2));
    color: var(--span, #76ab29);
    font-size: var(--font-size-s, 12px);
    font-weight: var(--font-weight-7, 700);
}

/* Таблица шире экрана прокручивается сама, страницу вбок не тянет */
.gd-tablewrap {
    margin: 0 0 16px;
    overflow-x: auto;
    border: 1px solid var(--transparent-5-w, rgba(255, 255, 255, .06));
    border-radius: var(--br-10, 10px);
}
.gd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-m, 14px);
    line-height: 1.6;
}
.gd-table th, .gd-table td {
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--transparent-5-w, rgba(255, 255, 255, .06));
    color: var(--text-secondary, #9fa2b9);
    overflow-wrap: anywhere;
}
.gd-table th {
    background-color: var(--transparent-3-w, rgba(255, 255, 255, .03));
    color: var(--text-default, #fff);
    font-weight: var(--font-weight-6, 600);
    white-space: nowrap;
}
.gd-table tr:last-child td { border-bottom: 0; }
.gd-table td:first-child { color: var(--text-default, #fff); }

/* Тема где-то раздаёт коду display:flex — инлайновый код от этого уезжает на
   свою строку и растягивается. Возвращаем ему строчное поведение явно. */
.gd-sec code, .gd-seo code, .gd-faq code, .gd-table code, .gd-list code, .gd-steps code {
    display: inline;
    padding: 2px 6px;
    border-radius: var(--br-4, 4px);
    background-color: var(--transparent-5-w, rgba(255, 255, 255, .06));
    color: var(--text-default, #fff);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .92em;
    overflow-wrap: anywhere;
}
.gd-sec kbd {
    display: inline-block !important;
    min-width: 18px;
    padding: 1px 6px;
    border: 1px solid var(--transparent-10-w, rgba(255, 255, 255, .1));
    border-bottom-width: 2px;
    border-radius: var(--br-4, 4px);
    background-color: var(--input-form, #272936);
    color: var(--text-default, #fff);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85em;
    text-align: center;
}

.gd-code {
    margin: 0 0 16px;
    padding: 14px 16px;
    overflow-x: auto;
    border: 1px solid var(--transparent-5-w, rgba(255, 255, 255, .06));
    border-left: 3px solid var(--span, #76ab29);
    border-radius: var(--br-10, 10px);
    background-color: var(--bg, #1b1c24);
}
.gd-code code {
    display: block;
    padding: 0;
    background: none;
    color: var(--text-default, #fff);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.65;
    white-space: pre;
}

.gd-note {
    display: flex;
    gap: 12px;
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid var(--span-middle, rgba(118, 171, 41, .2));
    border-radius: var(--br-10, 10px);
    background-color: var(--span-low, rgba(118, 171, 41, .08));
    font-size: var(--font-size-m, 14px);
    line-height: 1.7;
    color: var(--text-secondary, #9fa2b9);
}
.gd-note__icon {
    display: block;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    fill: var(--span, #76ab29);
}

.gd-faq__item {
    margin-bottom: 8px;
    border: 1px solid var(--transparent-5-w, rgba(255, 255, 255, .06));
    border-radius: var(--br-8, 8px);
    background-color: var(--transparent-3-w, rgba(255, 255, 255, .03));
}
.gd-faq__item > summary {
    padding: 12px 16px;
    cursor: pointer;
    color: var(--text-default, #fff);
    font-size: var(--font-size-m, 14px);
    font-weight: var(--font-weight-5, 500);
    line-height: 1.5;
    list-style: none;
}
.gd-faq__item > summary::-webkit-details-marker { display: none; }
.gd-faq__item > summary::before {
    content: '+';
    display: inline-block;
    width: 16px;
    color: var(--span, #76ab29);
    font-weight: var(--font-weight-7, 700);
}
.gd-faq__item[open] > summary::before { content: '–'; }
.gd-faq__item > p {
    margin: 0;
    padding: 0 16px 14px 32px;
    font-size: var(--font-size-m, 14px);
    line-height: 1.7;
    color: var(--text-secondary, #9fa2b9);
}

.gd-related { margin: 0; padding: 0; list-style: none; }
.gd-related li { margin-bottom: 8px; }
.gd-related a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-m, 14px);
    color: var(--span, #76ab29);
    text-decoration: none;
}
.gd-related a:hover span { transform: translateX(3px); }
.gd-related a span { transition: transform .2s ease; }

.gd-foot {
    padding-top: 16px;
    border-top: 1px solid var(--transparent-5-w, rgba(255, 255, 255, .06));
}
.gd-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--br-8, 8px);
    background-color: var(--button, #363753);
    color: var(--text-default, #fff);
    font-size: var(--font-size-m, 14px);
    text-decoration: none;
    transition: background-color .2s ease;
}
.gd-back:hover { background-color: var(--button-hover, #424367); color: var(--text-default, #fff); }

.gd-seo {
    margin: 8px 0 24px;
    padding: 22px 24px;
    border: 1px solid var(--transparent-5-w, rgba(255, 255, 255, .06));
    border-radius: var(--br-16, 16px);
    background-color: var(--card, #1f1f28);
}
.gd-seo__title {
    margin: 0 0 12px;
    font-size: var(--font-size-l, 18px);
    line-height: 1.3;
    color: var(--text-default, #fff);
}
.gd-seo .gd-seo__title:not(:first-child) { margin-top: 20px; }

@media (max-width: 640px) {
    .gd-hero { padding: 20px 16px; }
    .gd-article { padding: 18px 16px 16px; }
    .gd-seo { padding: 18px 16px; }
    .gd-head { flex-direction: column; gap: 12px; }
    .gd-head__ico { flex-basis: 44px; width: 44px; height: 44px; }
    .gd-toc { padding: 14px; }
    .gd-code { padding: 12px; }
    .gd-code code { font-size: 12px; }
}