/* путеводитель на bb-тегах | legume
   Теги и пример поста — в guide.txt рядом. Вкладки, меню разделов, подпись
   на картинке и окно карты собирает guide.js (HTML-низ). Цвета — переменные
   форума, светлая/тёмная (.dark на <html>) переключаются сами. */

.custom_tag_gd{
    --sgd-band:url(https://upforme.ru/uploads/001c/c6/af/2/655305.png);  /* фон-полоса сверху */
    --sgd-card:#e7e9e8;                       /* карточка */
    --sgd-side:rgba(30, 30, 32, .045);        /* боковая панель с меню */
    --sgd-soft:rgba(30, 30, 32, .035);        /* подложка текста */
    --sgd-acc:#2f4a4c;                        /* заливка: активные вкладка/пункт */
    --sgd-acc-tx:#eef2f1;
    --sgd-link:rgb(var(--link, 56, 108, 110));
    --sgd-txt:rgb(var(--text, 30, 30, 32));
    --sgd-dim:rgba(var(--text, 30, 30, 32), .55);
    --sgd-line:rgba(var(--text, 30, 30, 32), .12);
    --sgd-serif:var(--font2, 'The Silver Editorial', serif);
    --sgd-sans:var(--font, 'Rubik', sans-serif);
    --sgd-mono:var(--font5, 'Jost', sans-serif);

    position:relative;
    max-width:880px;
    margin:0 auto;
    padding:16px 0 22px;
    border-radius:var(--glass-radius-sm, 10px);
    color:var(--sgd-txt);
    text-align:left;
    font:400 11px/1.35 var(--sgd-sans);
}
.custom_tag_gd *{ box-sizing:border-box; }
/* фон-полоса сверху, плавно гаснет книзу */
.custom_tag_gd::before{
    content:"";
    position:absolute;
    left:0; right:0; top:0;
    height:300px;
    border-radius:inherit;
    background:var(--sgd-band) center top / cover no-repeat;
    -webkit-mask-image:linear-gradient(#000 50%, transparent);
            mask-image:linear-gradient(#000 50%, transparent);
    pointer-events:none;
}
.custom_tag_gd > *{ position:relative; }

/* движок ставит каждому <p> style="font-size:11px" — размер берём у тега-обёртки */
.custom_tag_gd p{ margin:0 !important; padding:0 !important; text-align:inherit; line-height:inherit; font-size:inherit !important; }
.custom_tag_gd > br, .custom_tag_gd p.sgd-junk, .custom_tag_gd p:empty{ display:none; }

/* ---------- заголовок ---------- */
.custom_tag_gdtitle{
    display:table;
    margin:0 auto 18px;
    padding:2px 0 4px;
    font:italic 400 26px/1.15 var(--sgd-serif);
    letter-spacing:.02em;
    color:#eef2f1;
    text-shadow:0 2px 12px rgba(0, 0, 0, .65), 0 0 2px rgba(0, 0, 0, .4);   /* без подложки — читаемость за счёт тени */
}
.custom_tag_gdtitle p{ text-align:center !important; color:inherit; font:inherit; }

/* ---------- вкладки: переключатель ---------- */
.sgd-tabs{
    display:flex;
    justify-content:center;
    width:max-content;
    max-width:calc(100% - 32px);
    margin:0 auto 18px;
    padding:4px;
    gap:4px;
    border-radius:999px;
    background:rgba(13, 19, 20, .42);
    -webkit-backdrop-filter:blur(10px);
            backdrop-filter:blur(10px);
    box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .12), 0 6px 18px rgba(0, 0, 0, .2);
}
.sgd-tab{
    padding:5px 20px 6px;
    border:none;
    border-radius:999px;
    font:italic 400 16px/1.2 var(--sgd-serif);
    letter-spacing:.02em;
    color:rgba(238, 242, 241, .78);
    background:transparent;
    cursor:pointer;
    transition:background .25s ease, color .25s ease;
}
.sgd-tab:hover{ color:#fff; background:rgba(255, 255, 255, .08); }
.sgd-tab.is-on{ color:var(--sgd-acc-tx); background:var(--sgd-acc); box-shadow:0 2px 8px rgba(0, 0, 0, .3); }

/* ---------- карточка ---------- */
.sgd-card{
    margin:0 26px;
    border-radius:30px;
    overflow:hidden;
    background:var(--sgd-card);
    box-shadow:0 14px 40px rgba(0, 0, 0, .16), inset 0 0 0 1px rgba(255, 255, 255, .5);
}
.custom_tag_gdpart{ display:none; }
.custom_tag_gdpart.is-on{
    display:grid;
    grid-template-columns:212px minmax(0, 1fr);
    min-height:440px;
}

/* боковая панель */
.sgd-side{
    display:flex;
    flex-direction:column;
    padding:22px 12px 18px;
    background:var(--sgd-side);
    border-right:1px solid var(--sgd-line);
}
.sgd-side-h{
    margin:0 12px 10px;
    font:500 9px/1 var(--sgd-mono);
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--sgd-dim);
}
.sgd-menu{ display:flex; flex-direction:column; gap:2px; }
.sgd-item{
    display:flex;
    align-items:baseline;
    gap:10px;
    width:100%;
    padding:6px 12px 7px;
    border:none;
    border-radius:14px;
    text-align:left;
    white-space:nowrap;
    font:italic 400 15px/1.2 var(--sgd-serif);
    color:var(--sgd-txt);
    background:transparent;
    cursor:pointer;
    transition:background .2s ease, color .2s ease;
}
.sgd-item i{
    flex:none;
    font:normal 500 9px/1 var(--sgd-mono);
    letter-spacing:.08em;
    color:var(--sgd-dim);
}
.sgd-item:hover{ background:rgba(var(--link, 56, 108, 110), .1); }
.sgd-item.is-on{ color:var(--sgd-acc-tx); background:var(--sgd-acc); box-shadow:0 4px 12px rgba(0, 0, 0, .18); }
.sgd-item.is-on i{ color:rgba(238, 242, 241, .6); }

.sgd-mapbtn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:auto;
    padding:8px 12px 9px;
    border:1px solid var(--sgd-line);
    border-radius:14px;
    font:italic 400 15px/1.2 var(--sgd-serif);
    color:var(--sgd-txt);
    background:var(--sgd-card);
    cursor:pointer;
    transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.sgd-mapbtn::before{ content:"⌖"; font:normal 400 16px/1 sans-serif; color:var(--sgd-link); }
.sgd-mapbtn:hover{ color:var(--sgd-acc-tx); background:var(--sgd-acc); border-color:transparent; }
.sgd-mapbtn:hover::before{ color:inherit; }

/* содержимое */
.sgd-body{ min-width:0; padding:18px 20px 20px; }
.custom_tag_gdsec{ display:none; }
.custom_tag_gdsec.is-on{
    display:flex;
    flex-direction:column;
    gap:14px;
    height:100%;
    animation:sgdIn .35s ease;
}
@keyframes sgdIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.custom_tag_gdsec > p{ display:contents; }

.sgd-fig{
    position:relative;
    flex:none;
    height:180px;
    border-radius:22px;
    overflow:hidden;
    background:#2f3a3b;
}
.sgd-fig img.custom_tag_gdimg{ display:block; width:100%; height:100%; object-fit:cover; }
.sgd-fig::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(13, 19, 20, .78) 0%, rgba(13, 19, 20, 0) 55%);
    pointer-events:none;
}
.sgd-cap{
    position:absolute;
    left:20px; right:20px; bottom:14px;
    z-index:1;
    display:flex;
    align-items:baseline;
    gap:10px;
    color:#eef2f1;
}
.sgd-cap i{ font:normal 500 10px/1 var(--sgd-mono); letter-spacing:.14em; opacity:.7; }
.sgd-cap b{ font:italic 400 24px/1 var(--sgd-serif); letter-spacing:.02em; text-shadow:0 2px 10px rgba(0, 0, 0, .5); }

.sgd-textwrap{ position:relative; flex:1 1 auto; min-height:200px; }
.custom_tag_gdtext{
    position:absolute;
    inset:0;
    overflow-y:auto;
    padding:14px 18px 22px;
    border-radius:18px;
    background:var(--sgd-soft);
    font:400 11.5px/1.5 var(--sgd-sans);
    color:var(--sgd-txt);
    -webkit-hyphens:auto;
            hyphens:auto;
    scrollbar-width:thin;
    scrollbar-color:var(--sgd-acc) transparent;
}
.custom_tag_gdtext p{ margin:0 0 .85em !important; }
.custom_tag_gdtext p:last-child{ margin-bottom:0 !important; }
.custom_tag_gdtext::-webkit-scrollbar{ width:4px; }
.custom_tag_gdtext::-webkit-scrollbar-thumb{ border-radius:4px; background:var(--sgd-acc); }
.custom_tag_gdtext a{ color:var(--sgd-link) !important; }
.custom_tag_gdtext b, .custom_tag_gdtext strong{ font-weight:600; }
.custom_tag_gdtext u{ text-decoration:none; font-weight:600; box-shadow:inset 0 -.4em 0 rgba(var(--link, 56, 108, 110), .16); }
/* затухание внизу, пока текст не докручен */
.sgd-textwrap.has-more::after{
    content:"";
    position:absolute;
    left:1px; right:8px; bottom:0;
    height:36px;
    border-radius:0 0 18px 18px;
    background:linear-gradient(transparent, var(--sgd-card));
    pointer-events:none;
}

/* ---------- окно карты ---------- */
.custom_tag_gdmap{ display:none !important; }   /* сам тег — только носитель ссылки */
.sgd-modal{
    position:fixed;
    inset:0;
    z-index:10000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px 16px;
    background:rgba(10, 14, 15, .72);
    -webkit-backdrop-filter:blur(4px);
            backdrop-filter:blur(4px);
    animation:sgdFade .25s ease;
}
@keyframes sgdFade{ from{ opacity:0; } to{ opacity:1; } }
.sgd-modal[hidden]{ display:none; }
.sgd-modal-box{
    position:relative;
    width:min(1100px, 100%);
    height:min(720px, 100%);
    display:flex;
    flex-direction:column;
    border-radius:26px;
    overflow:hidden;
    background:#e7e9e8;
    box-shadow:0 20px 60px rgba(0, 0, 0, .5);
}
.sgd-modal-bar{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 16px 10px 22px;
    font:italic 400 18px/1 var(--font2, serif);
    color:#eef2f1;
    background:#2f4a4c;
}
.sgd-modal-bar a{
    margin-left:auto;
    font:400 10px/1 var(--font, sans-serif);
    letter-spacing:.06em;
    text-transform:lowercase;
    color:rgba(238, 242, 241, .75) !important;
}
.sgd-modal-close{
    width:28px; height:28px;
    border:none;
    border-radius:50%;
    font:400 18px/28px sans-serif;
    color:#eef2f1;
    background:rgba(255, 255, 255, .12);
    cursor:pointer;
}
.sgd-modal-close:hover{ background:rgba(255, 255, 255, .25); }
.sgd-modal iframe{ flex:1 1 auto; width:100%; border:0; background:#c9cdcc; }

/* ---------- тёмная тема ---------- */
.dark .custom_tag_gd{
    --sgd-card:rgb(var(--catbody, 31, 31, 35));
    --sgd-side:rgba(255, 255, 255, .025);
    --sgd-soft:rgba(255, 255, 255, .035);
    --sgd-acc:#1f5557;
    --sgd-txt:rgba(var(--text, 226, 226, 230), .84);
    --sgd-dim:rgba(var(--text, 226, 226, 230), .45);
    --sgd-line:rgba(255, 255, 255, .07);
}
.dark .sgd-card{ box-shadow:0 14px 40px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .05); }
.dark .sgd-item:hover{ background:rgba(255, 255, 255, .05); }
.dark .custom_tag_gdtext u{ box-shadow:inset 0 -.4em 0 rgba(165, 148, 130, .22); }
.dark .sgd-modal-box{ background:rgb(var(--catbody, 31, 31, 35)); }
/* у uMap нет тёмной темы — затемняем карту фильтром */
.dark .sgd-modal iframe{ filter:invert(.9) hue-rotate(180deg) saturate(.8) brightness(.95); background:#222; }

/* ---------- узко ---------- */
@media (max-width:640px){
    .sgd-card{ margin:0 8px; border-radius:22px; }
    .custom_tag_gdpart.is-on{ grid-template-columns:1fr; }
    .sgd-side{ border-right:none; border-bottom:1px solid var(--sgd-line); }
    .sgd-menu{ flex-direction:row; flex-wrap:wrap; }
    .sgd-item{ width:auto; }
    .sgd-mapbtn{ margin-top:10px; }
}
@media (prefers-reduced-motion:reduce){
    .custom_tag_gdsec.is-on, .sgd-modal{ animation:none; }
}