:root{
    --bg:#ffffff;            /* основной белый фон */
    --card:#ffffff;          /* карточки на белом */
    --text:#0e0f13;          /* основной текст (почти чёрный) */
    --muted:#667085;         /* вторичный текст */
    --primary:#2462BB;       /* ваш синий */
    --danger:#E5484D;
    --stroke:#E5E7EB;        /* светлая обводка */
    --shadow:0 6px 18px rgba(17, 24, 39, .08);
    --radius:16px;
}

*{box-sizing:border-box}
html,body{
    margin:0; padding:0;
    background:var(--bg);
    color:var(--text);
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.app-header{
    position:sticky; top:0; z-index:2;
    display:flex; align-items:center; gap:8px;
    padding:12px 16px;
    background:var(--bg);
    border-bottom:1px solid var(--stroke);
}

.title{ margin:0; font-size:18px; font-weight:700; }
.header-spacer{width:22px; height:22px}

.back-btn{
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 10px;
    border-radius:12px;
    border:1px solid var(--stroke);
    background:#F8FAFC;
    color:var(--text);
    cursor:pointer;
}

.container{
    width:100%;
    max-width:480px;  /* только мобильная версия */
    margin:0 auto; padding:16px;
}

.card{
    background:var(--card);
    border:1px solid var(--stroke);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:14px;

}

.profile-card{ margin-bottom:16px; }

.profile-top{
    display:flex; gap:12px; align-items:flex-start;
}

.avatar{
    width:72px; height:72px; border-radius:50%;
    object-fit:cover; background:#F2F4F7; border:1px solid var(--stroke);
}

.profile-main{ flex:1; min-width:0; }

.field-row{
    display:flex; flex-direction:column;
    gap:6px; padding:8px 0;
    border-bottom:1px dashed var(--stroke);
}
.field-row:last-child{ border-bottom:none; }

.field-label{
    font-size:12px; color:var(--muted); letter-spacing:.2px;
}

.field-value{
    font-size:16px; line-height:1.3;
    word-break:break-word;
}

.field-value.mono{
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size:14px;
    color:#1f2937;
}

.link{ color:var(--primary); text-decoration:none; }
.link:hover{ text-decoration:underline; }

.link-btn{
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 10px; margin-left:8px;
    border-radius:10px; border:1px solid var(--stroke);
    background:#F3F6FB; color:var(--text);
    font-size:13px; cursor:pointer;
}

.editable{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }

.input{
    width:100%; max-width:100%;
    padding:10px 12px;
    border-radius:10px;
    border:1px solid var(--stroke);
    background:#ffffff; color:var(--text);
    outline:none;
}
.input:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px color-mix(in oklab, var(--primary) 22%, transparent)
}

.btn{
    padding:10px 14px;
    border-radius:12px; border:1px solid transparent;
    background:#EEF2F9; color:var(--text);
    font-weight:600; cursor:pointer;
}
.btn.primary{ background:var(--primary); color:#ffffff; }
.btn.ghost{ background:transparent; border-color:var(--stroke); color:var(--text); }

.edit-actions{ display:flex; gap:8px; width:100%; }

.status{
    margin-top:10px; font-size:13px; color:var(--muted);
    min-height:18px;
}

.section-title{ margin:0 0 10px 4px; font-size:16px; font-weight:700; }

.ref-grid{
    display:grid; gap:10px;
    grid-template-columns:1fr 1fr; /* две плитки в ряд на мобильном */
}
@media (max-width:360px){
    .ref-grid{ grid-template-columns:1fr; } /* если очень узко, в столбик */
}

.ref-item{
    display:grid;
    grid-template-columns: 44px 1fr;   /* колонка под иконку + контент/стрелка */
    grid-template-rows: auto auto;     /* первая строка: иконка/стрелка, вторая: текст */
    gap:10px 12px;
    padding:12px;
    background:#F7FAFF;
    border:1px solid var(--stroke);
    border-radius:14px;
    text-decoration:none;
    color:var(--text);
}
.ref-item:active{ transform:translateY(1px); }

.ref-icon{
    grid-column:1; grid-row:1;
    display:grid; place-items:center;
    width:40px; height:40px;
    border-radius:12px;
    background:#E9F1FF; border:1px solid var(--stroke);
}
.ref-icon svg{ display:block; max-width:100%; height:auto; }
.ref-title{ font-weight:600; }
.ref-chevron{ margin-left:auto; font-size:22px; color:var(--muted); }

.footer-space{ height:24px; }

.hidden{ display:none !important; }


.ref-chevron{
    grid-column:2; grid-row:1;
    justify-self:end; align-self:start;
    font-size:22px; color:var(--muted);
    line-height:1;
}

/* Заголовок — ВЕСЬ второй ряд, переносы разрешены */
.ref-title{
    grid-column:1 / -1; grid-row:2;
    font-weight:600;
    white-space:normal;         /* перенос строк */
    overflow:visible;
    text-overflow:clip;
    line-height:1.25;
    word-break:break-word;      /* длинные слова/ссылки */
}




















/*Приведи друга (Окно)*/
/* ===== Modal (реферал) ===== */
.modal.hidden{ display:none !important; }
.modal{
    position:fixed; inset:0; z-index:1000;
}

/* фон с блюром и блокировкой кликов по заднему слою */
.modal__backdrop{
    position:absolute; inset:0;
    backdrop-filter: blur(6px) saturate(120%);
    background: rgba(15,23,42,.25);
}

/* контейнер, который центрирует панель */
.modal__dialog{
    position:relative;
    width:100%; height:100%;
    display:grid; place-items:center;      /* центр по X/Y */
    pointer-events:none;                    /* клики проходят только к панели/бэкдропу */
}

/* сама белая карточка */
.modal__panel{
    position:relative;
    width:100%;                 /* не на всю ширину */
    height: 100%;                        /* не на всю высоту */
    overflow:auto;                          /* если контента много — скроллится внутри */
    background:#fff;
    border:1px solid var(--stroke);
    border-radius:16px;
    box-shadow:var(--shadow);
    padding:16px 16px 18px;
    pointer-events:auto;                    /* кликабельная */
}

/* крестик внутри панели */
.modal__close{
    position:absolute; top:10px; right:10px;
    width:32px; height:32px;
    border-radius:50%;
    border:1px solid var(--stroke);
    background:#fff;
    display:flex;                 /* вместо grid */
    align-items:center;           /* по вертикали */
    justify-content:center;       /* по горизонтали */
    padding:0;                    /* убираем внутренние отступы */
    line-height:0;                /* убираем влияние baseline */
    cursor:pointer;
    color:#667085;
}

.modal__close svg{
    display:block;                /* без лишних межстрочных отступов */
    width:18px;                   /* оптика: чуть меньше 20, чтобы казался по центру */
    height:18px;
    pointer-events:none;          /* клик по всей кнопке, не по svg */
}

.modal__title{
    margin:4px 0 12px 0;
    font-size:18px; font-weight:700;
    color:var(--text);
}

.modal__loading{ font-size:15px; color:var(--muted); }
.modal__content{ display:flex; flex-direction:column; gap:12px; }
.modal__label{ font-size:12px; color:var(--muted); }

.modal__link-wrap{ display:flex; gap:8px; align-items:center; }
.modal__link{
    flex:1 1 auto;
    padding:10px 12px;
    border-radius:10px;
    border:1px solid var(--stroke);
    background:#fff; color:var(--text);
    font-size:14px;
}
.modal__wide{ width:100%; }
.modal__text{ margin:0; color:var(--text); }
.modal__error{ color:#e5484d; font-size:14px; }

body.modal-open{ overflow:hidden; }

/* На очень низких экранах немного уменьшаем высоту панели */
@media (max-height: 560px){
    .modal__panel{ height: 100% }
}


















.bottom-nav{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #fff;
    border-top: 1px solid #e8e8ec;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px env(safe-area-inset-bottom) 16px; /* top right bottom left */
    z-index: 2;
}

/* Ссылки-иконки */
.bottom-nav a{
    flex: 0 0 auto;
    width: 56px; height: 56px;
    display: grid; place-items: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

/* Картинки-иконки через src */
.bottom-nav .nav-icon{
    width: 35px; height: 35px;
    opacity: .8;
    transition: opacity 160ms ease, transform 120ms ease;
    display: block;
}

.bottom-nav a:active .nav-icon{ transform: scale(.96); }
.bottom-nav a.is-active .nav-icon,
.bottom-nav a:focus-visible .nav-icon{ opacity: 1; }
























/* Блокируем прокрутку страницы, когда шторка открыта */
html.no-scroll, body.no-scroll { overflow: hidden; height: 100%; }

/* Бэкдроп с блюром (весь экран), перехватывает клики */
.sheet-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: block;          /* всегда в потоке */
    opacity: 0;              /* прячем через прозрачность */
    pointer-events: none;    /* не кликается, пока скрыт */
    transition: opacity 500ms ease; /* <<< 1.5s плавность */
    z-index: 9998;
}
.sheet-backdrop.is-open{
    opacity: 1;
    pointer-events: auto;    /* становится кликабельным */
}

/* Шторка снизу, ширина 100%, не более 80% высоты */
.sheet{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    max-height: 80vh;
    background: transparent;          /* фон переедет внутрь */
    overflow: visible;                /* ВАЖНО: чтобы handle был виден */
    transform: translateY(100%);
    will-change: transform;
    transition: transform 380ms cubic-bezier(.22,1,.36,1);
    z-index: 9999;
    display: flex;
    flex-direction: column;
}

/* Анимация показа */
.sheet-backdrop.is-open .sheet{
    transform: translateY(0);
}
.sheet-surface{
    position: relative;
    background: #fff;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 -10px 30px rgba(0,0,0,.12);
    overflow: hidden;                 /* клип для контента по скруглениям */
    /* растягиваем по высоте, но не больше 80vh */
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

/* Белая полоска (над верхним краем блока) */
.sheet-handle{
    position: absolute;
    top: -20px;     /* над верхним краем шторки */
    left: 0;
    right: 0;       /* даём две стороны */
    width: 40%;     /* фактическая ширина полоски */
    height: 5px;
    margin: 0 auto; /* центрирование по горизонтали */
    background: #ffffff;
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.12);
    z-index: 1;
}

/* Зона для перетаскивания (удобная тач-зона) */
.sheet-drag-area{
    height: 28px;
    width: 100%;
    flex: 0 0 auto;
}

/* Прокручиваемая область контента.
   Вычитаем высоту drag-area (28px) + внутренние отступы (если захотите).
   Так гарантируем, что суммарная высота не превысит 80vh. */
/* Контентная область внутри не выше 80vh - высота drag-зоны (28px) */
.sheet-content{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(80vh - 28px);    /* не больше 80% экрана */
    padding-bottom: env(safe-area-inset-bottom);
    flex: 1 1 auto;
}

/* Внутренности (всё 90% ширины) */
.sheet-inner{
    width: 90vw;
    margin: 10px auto 18px;   /* небольшой отступ сверху */
    font-family: -apple-system, system-ui, Segoe UI, Roboto, Arial, sans-serif;
    color: #111111;
}

/* Картинка по центру, прямоугольная, с закруглением */
.sheet-image{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    object-fit: cover;
}

/* Заголовок (слева, жирный) */
.sheet-title{
    margin: 12px 0 8px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.25;
    text-align: left;
}

/* Разделительная полоса */
.sheet-divider{
    border: 0;
    height: 1px;
    background: #525252;
    margin: 6px 0 8px;
}

/* Описание */
.sheet-desc{
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.45;
    color: #525252;
    text-align: left;
}

/* Кнопка 90% ширины, жирный, радиус 30px, #2462BB */
.sheet-cta{
    display: block;
    width: 90vw;
    margin: 0 auto 16px;
    background: #2462BB;
    color: #ffffff;
    border: 0;
    border-radius: 30px;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}
.sheet-cta:active{ transform: scale(.99); }
@media (prefers-reduced-motion: reduce){
    .sheet-backdrop{ transition: none; }
    .sheet{ transition: none; }
}
/* Серая кнопка-ссылка #EEEDED (та же геометрия, что у .sheet-cta) */
.sheet-btn{
    display:block;
    width:90vw;
    margin: 0 auto 10px;          /* чуть меньше отступа, т.к. над синей */
    border:0;
    border-radius:30px;
    padding:14px 18px;
    font-size:15px;
    font-weight:700;
    line-height:1;
    text-align:center;
    -webkit-tap-highlight-color:transparent;
    text-decoration:none;
}
.sheet-btn--ghost{
    background:#EEEDED;
    color:#111;
}
.sheet-btn:active{ transform: scale(.99); }

/* Контейнер и типографика */
#sheet-catalog .sheet-inner{
    width: 90vw;
    margin: 10px auto 18px;
    font-family: -apple-system, system-ui, Segoe UI, Roboto, Arial, sans-serif;
    color:#111;
}
#sheet-catalog .sheet-title{
    margin: 6px 0 8px;
    font-weight: 800;
    font-size: 18px;
    line-height: 1.25;
}
#sheet-catalog .sheet-divider{
    border:0; height:1px; background:#525252; margin:6px 0 10px;
}
#sheet-catalog .sheet-note{
    margin: 0 0 10px;
    color:#525252;
    font-size: 14px;
    line-height: 1.45;
}

/* Флаги: 3 карточки по горизонтали на мобиле */
#sheet-catalog .catalog-flags{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
#sheet-catalog .flag-card{
    display:grid;
    gap:6px;
    padding:8px;
    border-radius:12px;
    border:1px solid #e6e6e6;
    background:#fff;
    text-align:center;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}
#sheet-catalog .flag-card img{
    width:100%;
    height:64px;
    object-fit:cover;
    border-radius:8px;
    display:block;
}
#sheet-catalog .flag-card span{
    font-size:13px;
    font-weight:700;
    color:#111;
}
#sheet-catalog .flag-card:active{ transform: scale(.98); }
#sheet-catalog .flag-card:focus-visible{
    outline: none;
    border-color:#2462BB;
    box-shadow: 0 0 0 2px rgba(36,98,187,.15);
}



















/* Рефералка друга статистика */
/* ==== Mobile-only, plain gradients ==== */
@media (min-width:769px){ .refstats{ display:none!important; } }

@media (max-width:768px){
    :root{
        --rs-radius:16px;
        --rs-pad:14px;
        --rs-num:24px;
        --rs-lbl:12px;
    }

    .refstats{ margin-top:12px; }

    .refstats__header{
        display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;
    }
    .refstats__meta{ font-size:12px; opacity:.6; }

    /* Сетка: 2 колонки, авто-высота карточек */
    .refstats__grid{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }

    /* Карточка: только градиентный фон по статусу */
    .refstats__card{
        position:relative; overflow:hidden;
        border-radius:var(--rs-radius);
        padding:var(--rs-pad);
        color:#fff;
        background:none;           /* базово пусто, ниже задаём по статусу */
        border:none;
        box-shadow:none;
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
        transform:none;
        transition:none;
    }
    .refstats__card::before,
    .refstats__card::after{ content:none; display:none; }

    /* Текстовые стили */
    .refstats__num{ font-size:var(--rs-num); font-weight:800; line-height:1.1; letter-spacing:.2px; }
    .refstats__lbl{ font-size:var(--rs-lbl); opacity:.95; margin-top:6px; font-weight:600; }

    /* Без анимаций на тап */
    .refstats__card:active{ transform:none; }

    /* Акцентные фоны по статусам: один линейный градиент */
    .refstats__card[data-status="otkaz"]{
        background: url("/images/refstats/otkaz.jpg") center/cover no-repeat !important;
    }

    .refstats__card[data-status="obrsvyaz"]{
        background: url("/images/refstats/obrsvyaz.jpg") center/cover no-repeat !important;
    }

    .refstats__card[data-status="otlozh"]{
        background: url("/images/refstats/otlozh.jpg") center/cover no-repeat !important;
    }

    .refstats__card[data-status="dogovor"]{
        background: url("/images/refstats/dogovor.jpg") center/cover no-repeat !important;
    }

    .refstats__card[data-status="oplata"]{
        background: url("/images/refstats/oplata.jpg") center/cover no-repeat !important;
    }


    /* Скелеты: простой плоский фон без стекла и шиммера */
    .refstats__skel{
        height:72px;
        border-radius:var(--rs-radius);
        background:#1e1e1e !important;
        border:none !important;
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
        animation:none !important;
    }
}

/* Earn блок (на всю ширину) */
@media (max-width:768px){
    .refstats__card[data-status="earn"]{
        grid-column:1 / -1;
        background: url("/images/refstats/Allin.jpg") center/cover no-repeat !important;
    }
    .refstats__card[data-status="earn"] .refstats__num{
        font-size:28px;
    }
    .refstats__note{
        margin-top:6px; font-size:11px; opacity:.8;
    }
}












/* Кнопки только внутри subsModal */
#subsModal .sbtn{
    padding:10px 14px;
    border-radius:12px;
    border:1px solid transparent;
    background:#EEF2F9;
    color:var(--text, #0b0f17);
    font-weight:600;
    cursor:pointer;
}
#subsModal .sbtn:hover{ opacity:.9; }
#subsModal .sbtn.primary{ background: linear-gradient(160deg, #2563eb, #4f46e5); }
#subsModal .sbtn.ghost{ background:transparent; border-color:var(--stroke, rgba(0,0,0,.15)); color:var(--text, #0b0f17); }
#subsModal .sbtn-wide{ width:100%; display:block; margin-top:10px; }
#subsModal .subs-actions{ margin-top:12px; }


















/* Список реф-карточек */
.ref-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    align-items:center;          /* карточки по центру по горизонтали */
}

/* Карточка */
.ref-card{
    position:relative;
    display:grid;
    grid-template-columns: 40% 1fr;
    align-items:stretch;

    width:100%;
    max-width:440px;
    padding:0;

    background:#F7FAFF;
    border:1px solid var(--stroke);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    text-decoration:none;
    color:var(--text);
    overflow:visible;        /* нужно, чтобы картинка торчала сверху */
}
.ref-card:active{
    transform:translateY(1px);
}

/* Левая колонка — контейнер под картинку */
.ref-thumb{
    position:relative;
    display:flex;
    align-items:flex-end;   /* прижимаем картинку к низу */
    justify-content:flex-start;
    overflow:visible;       /* даём вылезать вверх */
}


/* Картинка:
   - ширина 100% колонки (~30% карточки)
   - высота авто (без искажений)
   - низ совпадает с низом карточки
*/
/* Картинка */
.ref-thumb img{
    display:block;
    width:100%;
    height:auto;
    margin-top:-10px;       /* ВАЖНО: вытащили верх на ~10px над блоком */

    /* сверху — без скругления, чтобы логично торчала,
       снизу — повторяем радиус карточки слева */
    border-radius:0 0 0 var(--radius);
}

/* Правая колонка — текст */
.ref-body{
    padding:10px 12px;               /* переносим отступы сюда вместо ref-card */
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:4px;
    min-width:0;
}

/* Заголовок */
.ref-title{
    margin:0;
    font-size:15px;
    font-weight:600;
    line-height:1.3;
    word-break:break-word;
}

/* Описание */
.ref-desc{
    margin:0;
    font-size:13px;
    line-height:1.4;
    color:var(--muted);
}

/* «Подробнее» */
.ref-more{
    margin-top:6px;
    font-size:13px;
    font-weight:600;
    color:var(--primary);
}