/* =============================================================
 * css/app/app.css — базові стилі для всіх застосунків (cab/*)
 * Підключається автоматично через inc/app_head.php
 * ============================================================= */
.modal,.hide {
	display: none !important;
}

/* важливо для мобільної версії */
html {
    background-color: var(--topColor);
    min-height: 100%;
}
body {
    background-color: var(--topColor);
    margin: 0;
    min-height: 100vh;
}
header, footer {
    background-color: var(--topColor);
}
/* Базовые стили */
h1 {
  font-size: 160%;
  color: var(--TB);
  margin: 0px;
}
/* --- App Header --- */

.app-header {
    height: var(--HT);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 0 10px;
    box-sizing: border-box;
    overflow: hidden;
}

.app-header__left {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-decoration: none;
    min-width: 0;
    flex: 1 1 auto;
    height: 100%;
    overflow: hidden;
}

/* Базовий розмір заголовка СПЕЦІАЛЬНО збігається з тим, з якого стартує
   підгонка в inc/app_head.php. Доки тут стояло 160% (≈25.6px), заголовок
   встигав промалюватися великим, а потім скрипт садив його до 22px на
   десктопі й до 18px на телефоні — і це читалося як «заголовок сам
   зменшився», навіть коли місця в шапці було вдосталь. */
.app-header__left h1 {
    font-size: 22px;
    color: var(--TB);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
    display: flex;
    align-items: center;
    height: 100%;
    min-width: 0;
}

@media (max-width: 768px) {
    .app-header__left h1 {
        font-size: 18px;
    }
}

/* SVG-іконка або логотип застосунку в шапці */
.app-header__icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.app-header__icon svg,
.app-header__icon img {
    width: 36px;
    height: 36px;
    max-width: 36px;
    max-height: 36px;
    opacity: 0.85;
    display: block;
    object-fit: contain;
}


/* Права дія в шапці: шестерня налаштувань, кабінет користувача або вихід.
   Слот один, тому всі три варіанти мають однакову геометрію (див.
   core::appHeaderAction() та inc/app_head.php). */
.app-header__settings,
.app-header__action {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    margin-right: 7px;
}

.app-header__settings svg,
.app-header__action svg {
    width: 30px;
    height: 30px;
    opacity: 0.8;
}

/* Варіант-кнопка (вихід): скидаємо дефолтний вигляд <button> */
.app-header__action--btn {
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    line-height: 0;
}

/* Заглушка замість кнопки налаштувань (для вирівнювання) */
.app-header__spacer {
    width: 36px;
}

/* --- Модалка підтвердження виходу (inc/app_logout_modal.php) --- */

.app-logout {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

/* Атрибут hidden мусить перебивати display:flex вище */
.app-logout[hidden] {
    display: none;
}

/* Блокування прокрутки сторінки, поки модалка відкрита */
.app-logout-lock,
.app-logout-lock body {
    overflow: hidden;
}

.app-logout__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
}

/* Картка свідомо фарбується парою var(--topColor) + var(--TB): у цьому проекті
   --TB задається під колір ШАПКИ, а не під --bg (у застосунку logs, наприклад,
   --bg світлий #f8fafc, а --TB білий — на --bg текст був би невидимий). */
.app-logout__card {
    position: relative;
    width: 100%;
    max-width: 380px;
    box-sizing: border-box;
    padding: 24px 20px;
    background: var(--topColor, #0f172a);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-left: 4px solid #ef4444;
    border-radius: 0;
    color: var(--TB, #f1f5f9);
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Фарбуємо саме stroke, а не color: svg::inc() дописує іконці інлайновий
   style="color: ..." із set_sites.text_color, і він перебив би color тут. */
.app-logout__icon svg {
    width: 34px;
    height: 34px;
    stroke: #ef4444;
    opacity: 0.9;
}

.app-logout__title {
    margin: 10px 0 8px;
    font-size: 18px;
    font-weight: 700;
}

.app-logout__text {
    font-size: 13px;
    line-height: 1.5;
    opacity: 0.75;
}

.app-logout__actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

/* Кнопка "назад": межа по currentColor, щоб читалася на будь-якій темі застосунку */
.app-logout__btn {
    flex: 1 1 0;
    padding: 11px 12px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border-radius: 0;
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
}

.app-logout__btn:hover {
    background: rgba(128, 128, 128, 0.25);
}

.app-logout__btn--danger {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

.app-logout__btn--danger:hover {
    background: #991b1b;
    border-color: #991b1b;
}

/* --- App Footer --- */

.app-footer {
    height: var(--HF);
    background: var(--topColor, #121212);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 calc(var(--HF, 60px) * 0.275);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    box-sizing: border-box;
    transition: height 0.2s ease, padding 0.2s ease;
}

.app-footer__side {
    display: flex;
    align-items: center;
    height: 100%;
}

/* Кнопки у футері (стандартизований квадрат) */
.app-footer__btn,
.footer-btn {
    color: var(--TB, #fff);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--HF, 60px);
    height: var(--HF, 60px);
    max-width: var(--HF, 60px);
    box-sizing: border-box;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    margin: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.app-footer__btn svg,
.footer-btn svg {
    width: calc(var(--HF, 60px) * 0.70);
    height: calc(var(--HF, 60px) * 0.70);
    opacity: 0.9;
    stroke: currentColor;
    display: block;
    transition: opacity 0.2s ease;
}

.app-footer__btn:hover svg,
.footer-btn:hover svg {
    opacity: 1;
}

.footer-btn-img {
    width: calc(var(--HF, 60px) * 0.70);
    height: calc(var(--HF, 60px) * 0.70);
    object-fit: contain;
    opacity: 0.9;
    display: block;
}

/* Заглушка замість кнопки */
.app-footer__spacer {
    width: var(--HF, 60px);
    height: var(--HF, 60px);
}

/* Розпірка знизу щоб фіксований футер не перекривав контент.
   Висота — рівно до верху «брови» центральної вкладки: вкладка завжди 60px
   (.app-footer-tab), а футер (--HF) — 40..60px, тож беремо більше з двох.
   Раніше було --HF + 20px: разом із власним нижнім відступом контейнера
   застосунку над футером зяяла порожнеча, куди візуально вліз би ще один
   футер. Повітря під контентом дає padding контейнера кожного застосунку. */
.app-footer__offset {
    height: max(var(--HF, 60px), 60px);
    clear: both;
    flex-shrink: 0;
}

/* Виключення stroke для емблеми trading */
.app-footer__btn svg[aria-label="trading"],
.app-footer__btn--trading svg,
.footer-btn--trading svg,
.footer-btn svg[aria-label="trading"] {
    stroke: none !important;
    stroke-width: 0 !important;
}

.app-footer__btn svg[aria-label="trading"] *,
.app-footer__btn--trading svg *,
.footer-btn--trading svg *,
.footer-btn svg[aria-label="trading"] * {
    stroke: none !important;
    stroke-width: 0 !important;
}

/* Центральний слот футера: збільшена вкладка з трапецієподібним виступом
   («бровою») і попап над нею. Спільний для всіх варіантів центру — реферального
   QR і швидких налаштувань (cab/trading), тому класи загальні, без «qr» у назві.
   Висота вкладки фіксована (60px) і не залежить від розміру футера (--HF):
   clip-path лише зрізає її верх, коли футер нижчий за 60px. */
.app-footer__center,
.footer-qr-tab-wrapper {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    height: 60px;
    z-index: 105;
    pointer-events: none;
}

.app-footer-tab,
.footer-qr-tab {
    width: 60px;
    height: 60px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--topColor, #121212);
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    pointer-events: auto;
    clip-path: polygon(
        5px 0%, 
        calc(100% - 5px) 0%, 
        100% calc(60px - var(--HF, 60px)), 
        100% 100%, 
        0% 100%, 
        0% calc(60px - var(--HF, 60px))
    );
    transition: clip-path 0.2s ease;
}

/* Вміст вкладки — QR або іконка — це квадрат 50px, притиснутий до низу.
   Обидва варіанти мають однакову геометрію, тож стоять на тому самому місці
   за будь-якого --HF і заміна одного іншим нічого не зсуває. */
.ref-qr-img,
.app-footer-tab__icon {
    width: 50px;
    height: 50px;
    display: block;
    object-fit: contain;
    position: absolute;
    bottom: max(3px, calc((var(--HF, 60px) - 50px) / 2));
    left: 50%;
    transform: translateX(-50%);
}

/* Іконка-SVG усередині квадрата: менша за QR, бо лінійна іконка на всі 50px
   виглядала б гігантською поруч із кнопками футера */
.app-footer-tab__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--TB, #ffffff);
}

.app-footer-tab__icon svg {
    width: 34px;
    height: 34px;
    stroke: currentColor;
    display: block;
}

/* Хрестик закриття: з'являється на місці вмісту, поки попап відкритий */
.app-footer-tab__close {
    font-size: 28px;
    color: var(--TB, #ffffff);
    font-weight: bold;
    display: none;
    align-items: center;
    justify-content: center;
    user-select: none;
    line-height: 1;
    width: 100%;
    height: 100%;
}

/* Стани вкладки (керує JS у inc/app_footer.php):
   .is-open        — попап відкритий: ховаємо вміст, показуємо хрестик;
   data-mode="ref"   — показуємо QR, іконку швидких налаштувань ховаємо;
   data-mode="quick" — навпаки. */
.app-footer-tab.is-open .app-footer-tab__close {
    display: flex;
}

.app-footer-tab.is-open .ref-qr-img,
.app-footer-tab.is-open .app-footer-tab__icon,
.app-footer__center[data-mode="quick"] .ref-qr-img,
.app-footer__center[data-mode="ref"] .app-footer-tab__icon--quick {
    display: none;
}

/* Попап над центральною вкладкою. Загальний каркас: рамка, стрілочка,
   анімація появи. Наповнення — своє в кожного варіанта. */
.app-footer-popup {
    --afp-tx: -50%;
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(var(--afp-tx));
    width: 300px;
    background: var(--topColor, #121212);
    border: 1px solid #333;
    padding: 10px 20px;
    z-index: 1000;
    animation: appFooterPopupIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0 !important;
    box-sizing: border-box;
}

@keyframes appFooterPopupIn {
    from { opacity: 0; transform: translate(var(--afp-tx), 10px); }
    to { opacity: 1; transform: translate(var(--afp-tx), 0); }
}

/* Стрілочка (зовнішня рамка) */
.app-footer-popup::after {
    content: '';
    position: absolute;
    bottom: -11px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: #333 transparent transparent;
}

/* Стрілочка (внутрішня заливка фоном попапа) */
.app-footer-popup::before {
    content: '';
    position: absolute;
    bottom: -9.5px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: var(--topColor, #121212) transparent transparent;
    z-index: 2;
}

.app-footer-popup.app-footer-popup--center {
    --afp-tx: -50%;
    left: 50%;
    width: calc(100% - 20px);
    max-width: 350px;
}

.app-footer-popup__content {
    text-align: center;
}

.app-footer-popup .app-footer-popup__btn {
    display: block;
    width: 100%;
    padding: 15px;
    margin: auto;
    max-width: 100%;
    text-decoration: none;
    border-radius: 0 !important;
    background-color: var(--topColor, #121212);
    border: 1px solid var(--TB, #f1f5f9);
    color: var(--TB, #f1f5f9) !important;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.app-footer-popup .app-footer-popup__btn:hover {
    filter: brightness(1.2);
    transform: translateY(-2px);
}

.ref-link-display {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px;
    font-family: monospace;
    font-size: 13px;
    color: #aaa;
    text-align: center;
    word-break: break-all;
    margin: 15px 0;
    border-radius: 0 !important;
}

.ref-popup-copied {
    color: var(--TB, #f1f5f9);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
}

/* Попап швидких налаштувань (cab/trading, опція pm_settings.quick_settings):
   заголовок і тіло з опціями (.quick-opt). Логіка — js/forms/trading_quick.js */
.quick-popup__title {
    color: var(--TB, #f1f5f9);
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 0 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.quick-popup__body {
    padding: 12px 0 6px;
    text-align: left;
}

/* Одна опція: рядок «назва — поточне значення», під ним кнопки на всю ширину */
.quick-opt + .quick-opt {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.quick-opt__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
}

.quick-opt__label {
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: bold;
}

.quick-opt__value {
    color: var(--TB, #f1f5f9);
    font-weight: bold;
    font-family: monospace;
    white-space: nowrap;
}

.quick-opt__buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Сіра кнопка попапа: нейтральна, не перетягує увагу кольором */
.quick-btn {
    height: 40px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #d1d5db;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 0;
    padding: 0 10px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.quick-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.quick-btn:active {
    background: rgba(255, 255, 255, 0.18);
}

.quick-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

/* Обраний варіант — теж сірий, лише світліший і з чіткою рамкою: попап
   лишається нейтральним, а вибір видно з першого погляду */
.quick-btn.is-active {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
    color: #ffffff;
    cursor: default;
}

/* «Заборонити ставки більше»: сітка 5×2, «без ліміту» на дві клітинки.
   Падінг кнопок менший за звичайний: 5 колонок мають вміститися в 310px
   вмісту попапа (і в 260px на 320px-екрані) разом із «150$» */
.quick-cap {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.quick-cap__btn {
    min-width: 0;
    height: 36px;
    padding: 0 2px;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quick-cap__btn--wide {
    grid-column: span 2;
}

/* Опція-перемикач: ON/OFF ліворуч, назва поруч (як .opt-card-head) */
.quick-opt--switch {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quick-opt--switch .quick-opt__label {
    font-size: 12px;
    cursor: pointer;
}

/* --- Фірмовий 3D лодер застосунків (.spinner.loadpage) --- */
.app-content-wrapper,
.app-footer,
.app-footer__offset {
    width: 100%;
    box-sizing: border-box;
}

.spinner.loadpage {
    display: block;
    width: 100%;
    min-height: 200px;
    height: 200px;
    position: relative;
    box-sizing: border-box;
}

/* Лодер завантаження сторінки каркасу міні-застосунків */
#app-loadpage-spinner {
    height: calc(100vh - var(--HT, 43px) - var(--HF, 60px));
    min-height: 280px;
    margin: 0 auto;
}

.spinner.loadpage:before {
    transform: rotateX(60deg) rotateY(45deg) rotateZ(45deg);
    animation: 750ms rotateBefore infinite linear reverse;
}

.spinner.loadpage:after {
    transform: rotateX(240deg) rotateY(45deg) rotateZ(45deg);
    animation: 750ms rotateAfter infinite linear;
}

.spinner.loadpage:before,
.spinner.loadpage:after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -5em;
    margin-left: -5em;
    width: 10em;
    height: 10em;
    transform-style: preserve-3d;
    transform-origin: 50%;
    transform: rotateY(50%);
    perspective-origin: 50% 50%;
    perspective: 340px;
    background-color: #000000;
    background-color: var(--loader-color, color-mix(in srgb, var(--bg, #000000) 50%, var(--topColor, var(--topcolor, #000000)) 50%));
    -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2NnB4IiBoZWlnaHQ9IjI5N3B4IiB2aWV3Qm94PSIwIDAgMjY2IDI5NyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8dGl0bGU+c3Bpbm5lcjwvdGl0bGU+CiAgICA8ZGVzY3JpcHRpb24+Q3JlYXRlZCB3aXRoIFNrZXRjaCAoaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoKTwvZGVzY3JpcHRpb24+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4KICAgICAgICA8cGF0aCBkPSJNMTcxLjUwNzgxMywzLjI1MDAwMDM4IEMyMjYuMjA4MTgzLDEyLjg1NzcxMTEgMjk3LjExMjcyMiw3MS40OTEyODIzIDI1MC44OTU1OTksMTA4LjQxMDE1NSBDMjE2LjU4MjAyNCwxMzUuODIwMzEgMTg2LjUyODQwNSw5Ny4wNjI0OTY0IDE1Ni44MDA3NzQsODUuNzczNDM0NiBDMTI3LjA3MzE0Myw3NC40ODQzNzIxIDc2Ljg4ODQ2MzIsODQuMjE2MTQ2MiA2MC4xMjg5MDY1LDEwOC40MTAxNTMgQy0xNS45ODA0Njg1LDIxOC4yODEyNDcgMTQ1LjI3NzM0NCwyOTYuNjY3OTY4IDE0NS4yNzczNDQsMjk2LjY2Nzk2OCBDMTQ1LjI3NzM0NCwyOTYuNjY3OTY4IC0yNS40NDkyMTg3LDI1Ny4yNDIxOTggMy4zOTg0Mzc1LDEwOC40MTAxNTUgQzE2LjMwNzA2NjEsNDEuODExNDE3NCA4NC43Mjc1ODI5LC0xMS45OTIyOTg1IDE3MS41MDc4MTMsMy4yNTAwMDAzOCBaIiBpZD0iUGF0aC0xIiBmaWxsPSIjMDAwMDAwIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==);
    mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2NnB4IiBoZWlnaHQ9IjI5N3B4IiB2aWV3Qm94PSIwIDAgMjY2IDI5NyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8dGl0bGU+c3Bpbm5lcjwvdGl0bGU+CiAgICA8ZGVzY3JpcHRpb24+Q3JlYXRlZCB3aXRoIFNrZXRjaCAoaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoKTwvZGVzY3JpcHRpb24+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4KICAgICAgICA8cGF0aCBkPSJNMTcxLjUwNzgxMywzLjI1MDAwMDM4IEMyMjYuMjA4MTgzLDEyLjg1NzcxMTEgMjk3LjExMjcyMiw3MS40OTEyODIzIDI1MC44OTU1OTksMTA4LjQxMDE1NSBDMjE2LjU4MjAyNCwxMzUuODIwMzEgMTg2LjUyODQwNSw5Ny4wNjI0OTY0IDE1Ni44MDA3NzQsODUuNzczNDM0NiBDMTI3LjA3MzE0Myw3NC40ODQzNzIxIDc2Ljg4ODQ2MzIsODQuMjE2MTQ2MiA2MC4xMjg5MDY1LDEwOC40MTAxNTMgQy0xNS45ODA0Njg1LDIxOC4yODEyNDcgMTQ1LjI3NzM0NCwyOTYuNjY3OTY4IDE0NS4yNzczNDQsMjk2LjY2Nzk2OCBDMTQ1LjI3NzM0NCwyOTYuNjY3OTY4IC0yNS40NDkyMTg3LDI1Ny4yNDIxOTggMy4zOTg0Mzc1LDEwOC40MTAxNTUgQzE2LjMwNzA2NjEsNDEuODExNDE3NCA4NC43Mjc1ODI5LC0xMS45OTIyOTg1IDE3MS41MDc4MTMsMy4yNTAwMDAzOCBaIiBpZD0iUGF0aC0xIiBmaWxsPSIjMDAwMDAwIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==);
    -webkit-mask-size: 10em 10em;
    mask-size: 10em 10em;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-position: center;
    border-radius: 0 !important;
}

@keyframes rotateBefore {
    from {
        transform: rotateX(60deg) rotateY(45deg) rotateZ(0deg);
    }
    to {
        transform: rotateX(60deg) rotateY(45deg) rotateZ(-360deg);
    }
}

@keyframes rotateAfter {
    from {
        transform: rotateX(240deg) rotateY(45deg) rotateZ(0deg);
    }
    to {
        transform: rotateX(240deg) rotateY(45deg) rotateZ(360deg);
    }
}

/* ================= Перемикач ON/OFF (tgl-flip) =================
   Спільний для всіх міні-застосунків cab/: уперше з'явився в cab/approve,
   звідти й перенесений сюди, щоб поступово замінити ним галочки в
   налаштуваннях. Розмітка:
     <div class="tgl-wrap">
       <input type="checkbox" role="switch" class="tglYeah tgl-flip" id="x">
       <label class="tgl-btn" data-tg-off="OFF" data-tg-on="ON" for="x"></label>
     </div>
   Увімкнений стан за замовчуванням зелений. Модифікатор .tgl-warn на input
   робить його бурштиновим — для опцій, які не додають захист, а знімають його;
   .tgl-danger — червоним, для перемикачів, що щось вимикають. */
.tgl-wrap {
    flex-shrink: 0;
    width: 52px;
    height: 26px;
    position: relative;
}

/* Сам input не display:none, а невидимий поверх кнопки: так він лишається
   у порядку Tab і перемикається пробілом, як звичайна галочка. */
.tgl-wrap .tglYeah {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

.tglYeah:focus-visible + .tgl-btn {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}

.tglYeah + .tgl-btn {
    outline: 0;
    display: block;
    width: 52px;
    height: 26px;
    margin: 0;
    padding: 0;
    position: relative;
    cursor: pointer;
    user-select: none;
    perspective: 100px;
}

.tgl-flip + .tgl-btn:after,
.tgl-flip + .tgl-btn:before {
    display: inline-block;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    height: 100%;
    text-align: center;
    position: absolute;
    line-height: 26px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #fff;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    box-sizing: border-box;
    border: 1px solid #334155;
    border-radius: 0;
}

.tgl-flip + .tgl-btn:after {
    content: attr(data-tg-on);
    background: #059669;
    border-color: #059669;
    transform: rotateY(-180deg);
}

.tgl-flip + .tgl-btn:before {
    background: #1e293b;
    border-color: #334155;
    content: attr(data-tg-off);
    color: #94a3b8;
}

.tgl-flip:checked + .tgl-btn:before {
    transform: rotateY(180deg);
}

.tgl-flip:checked + .tgl-btn:after {
    transform: rotateY(0);
    left: 0;
}

.tgl-flip.tgl-warn:checked + .tgl-btn:after {
    background: #d97706;
    border-color: #b45309;
}

/* Червоний увімкнений стан — для перемикачів, що вимикають щось (напр. DEPRECATED) */
.tgl-flip.tgl-danger:checked + .tgl-btn:after {
    background: #dc2626;
    border-color: #b91c1c;
}

/* Поки запит на збереження в дорозі, перемикач заблокований — показуємо це */
.tglYeah:disabled + .tgl-btn {
    opacity: 0.55;
    cursor: progress;
}

/* Заблокований назовсім (рівень не дозволяє, трейдер вимкнений) — data-locked
   на input: це не «зачекайте», а «недоступно» */
.tglYeah[data-locked]:disabled + .tgl-btn {
    cursor: not-allowed;
}

/* Рядок налаштування з перемикачем (колишній .tgl-row: ON/OFF праворуч) прибрано.
   Еталон тепер — картка .opt-card у css/app/trading.css: перемикач ЛІВОРУЧ,
   праве місце належить ярлику рівня (VIP / GOD …). */

/* ================= Модалки-сторінки (js/app_modal.js) =================
   Модалка — не віконце поверх сторінки, а «інша сторінка», що вже лежить у DOM.
   Відкрита модалка ховає вміст <main> і звичайний підвал, а замість них
   показує себе і смугу дій inc/app_modal_bar.php. Стан тримає клас
   .app-modal-open на <html>, який ставить і знімає контролер.
   Блок стоїть у кінці файлу свідомо: правила смуги дій мають перебивати
   однакові за вагою правила .app-footer__btn вище. */

.app-modal {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 18px 16px 0;
    color: var(--TB, #f1f5f9);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Атрибут hidden мусить перебивати display вище */
.app-modal[hidden],
.app-modal-bar[hidden] {
    display: none !important;
}

.app-modal-open #app-content-wrapper,
.app-modal-open .app-footer {
    display: none !important;
}

/* Дії праворуч у шапці (налаштування, вихід) у модалці недоречні: тут одна
   задача — зробити вибір або закрити. visibility, а не display, щоб місце
   лишалося і заголовок не стрибав по ширині */
.app-modal-open .app-header__action,
.app-modal-open .app-header__badge {
    visibility: hidden;
}

/* Поки вибір зберігається, змінити його не можна (контролер ставить ще й inert) */
.app-modal.is-busy {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.app-modal__lead {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.5;
    opacity: 0.8;
}

/* Повідомлення внизу модалки (AppModal.message). Текст успадковує колір
   застосунку, а тип показують лише смуга ліворуч і легкий відтінок фону —
   так блок читається на будь-якій темі, світлій чи темній */
.app-modal__msg {
    margin: 14px 0 0;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    border-left: 4px solid #ef4444;
    background: rgba(239, 68, 68, 0.12);
    border-radius: 0;
    word-break: break-word;
}

.app-modal__msg[hidden] {
    display: none;
}

.app-modal__msg.is-info {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
}

.app-modal__msg.is-ok {
    border-left-color: #10b981;
    background: rgba(16, 185, 129, 0.12);
}

.app-modal__msg a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
}

/* --- Картки вибору (радіо) — основний «будівельний блок» модалки-форми ---
     <label class="app-choice">
       <input type="radio" name="x" value="a" required>
       <span class="app-choice__body">
         <span class="app-choice__head"><span class="app-choice__icon">🤖</span>Назва</span>
         <span class="app-choice__text">Пояснення</span>
       </span>
     </label>
   Колір обраної картки — змінна --app-accent (застосунок може задати свій). */
.app-choice {
    --app-accent: #10b981;
    display: block;
    position: relative;
    margin: 0 0 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Сам input не display:none, а невидимий поверх картки: так він лишається
   у порядку Tab і перемикається стрілками, як звичайна радіокнопка */
.app-choice > input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.app-choice__body {
    display: block;
    position: relative;
    padding: 14px 14px 14px 46px;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    background: color-mix(in srgb, currentColor 4%, transparent);
    border-radius: 0;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Квадратний індикатор вибору ліворуч (рамка + квадрат усередині) */
.app-choice__body::before,
.app-choice__body::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    border-radius: 0;
}

.app-choice__body::before {
    left: 14px;
    top: 16px;
    width: 18px;
    height: 18px;
    border: 2px solid color-mix(in srgb, currentColor 45%, transparent);
}

.app-choice__body::after {
    left: 19px;
    top: 21px;
    width: 8px;
    height: 8px;
    background: var(--app-accent);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.app-choice > input:checked + .app-choice__body {
    border-color: var(--app-accent);
    background: color-mix(in srgb, var(--app-accent) 12%, transparent);
}

.app-choice > input:checked + .app-choice__body::before {
    border-color: var(--app-accent);
}

.app-choice > input:checked + .app-choice__body::after {
    opacity: 1;
}

.app-choice > input:focus-visible + .app-choice__body {
    outline: 2px solid var(--app-accent);
    outline-offset: 2px;
}

.app-choice > input:disabled + .app-choice__body {
    opacity: 0.45;
    cursor: not-allowed;
}

.app-choice__head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.app-choice__icon {
    font-size: 18px;
    line-height: 1;
}

.app-choice__text {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.45;
    opacity: 0.75;
}

/* --- Смуга дій модалки: стоїть на місці підвалу і має його геометрію --- */
.app-modal-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    height: var(--HF, 60px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 0 calc(var(--HF, 60px) * 0.275);
    box-sizing: border-box;
    background: var(--topColor, #121212);
    color: var(--TB, #fff);
}

.app-modal-bar__hint {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1.3;
    text-transform: uppercase;
    opacity: 0.75;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Правий слот: галочка або планетки, на одному й тому самому місці */
.app-modal-bar__side {
    flex-shrink: 0;
    width: var(--HF, 60px);
    height: var(--HF, 60px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Вибір ще не зроблено — галочка тьмяна (але клік по ній підкаже, чого бракує) */
.app-modal-bar__ok.is-disabled svg,
.app-modal-bar__ok.is-disabled:hover svg {
    opacity: 0.3;
}

/* Модалка-довідка: підтверджувати нічого, лишається тільки «закрити» */
.app-modal-bar.no-confirm .app-modal-bar__ok {
    visibility: hidden;
}

/* Під час збереження: закрити не можна, замість галочки — планетки */
.app-modal-bar.is-busy .app-modal-bar__close {
    visibility: hidden;
}

.app-modal-bar.is-busy .app-modal-bar__ok {
    display: none;
}

.app-modal-bar .app-planets {
    display: none;
}

.app-modal-bar.is-busy .app-planets {
    display: block;
}

/* --- Лодер «планетки» ---
   Перенесений з основного сайту (.spinnersu у templates/black/css.css) під
   власними іменами, щоб не перетинатися з ним. Кола тут — це форма планет і
   орбіт, а не заокруглення інтерфейсу, тож правило прямих кутів на них не
   поширюється. Розмір прив'язаний до висоти підвалу. */
.app-planets {
    font-size: calc(var(--HF, 60px) * 0.6);
    width: 1em;
    height: 1em;
    margin: 0;
    padding: 0;
    position: relative;
    list-style: none;
    box-sizing: content-box;
    border-radius: 50%;
    border: 0.01em solid rgba(150, 150, 150, 0.15);
    background: rgba(150, 150, 150, 0.1);
    box-shadow: 0 0 1.5em rgba(0, 0, 0, 0.4);
}

/* Дві внутрішні орбіти */
.app-planets::before,
.app-planets::after {
    content: '';
    position: absolute;
    border: 0.01em solid rgba(150, 150, 150, 0.15);
    border-radius: 50%;
    background: rgba(150, 150, 150, 0.1);
}

.app-planets::before {
    width: 0.65em;
    height: 0.65em;
    top: 17%;
    left: 17%;
}

.app-planets::after {
    width: 0.25em;
    height: 0.25em;
    top: 38%;
    left: 38%;
}

.app-planets li {
    width: 0.2em;
    height: 0.2em;
    position: absolute;
    border-radius: 50%;
}

/* синя */
.app-planets li:nth-child(1) {
    background: #0076c1;
    top: 0;
    left: 50%;
    margin-left: -0.1em;
    transform-origin: 50% 250%;
    animation: app-planet-orbit 1.13s linear infinite, app-planet-glow 3.67s ease-in-out infinite alternate;
}

/* червона */
.app-planets li:nth-child(2) {
    background: #ff003c;
    top: 60%;
    right: 20%;
    margin-top: -0.1em;
    transform-origin: -50% 0;
    animation: app-planet-orbit 1.86s linear infinite, app-planet-glow 4.29s ease-in-out infinite alternate;
}

/* жовта */
.app-planets li:nth-child(3) {
    background: #fabe28;
    bottom: 0;
    left: 50%;
    margin-left: -0.1em;
    transform-origin: 50% -150%;
    animation: app-planet-orbit 1.45s linear infinite, app-planet-glow 5.12s ease-in-out infinite alternate;
}

/* зелена */
.app-planets li:nth-child(4) {
    background: #88c100;
    top: 60%;
    left: 20%;
    margin-top: -0.1em;
    transform-origin: 150% 0%;
    animation: app-planet-orbit 1.72s linear infinite, app-planet-glow 5.25s ease-in-out infinite alternate;
}

@keyframes app-planet-orbit {
    to {
        transform: rotate(360deg);
    }
}

/* Нерівне мерехтіння — щоб планетки «жили», а не крутилися механічно */
@keyframes app-planet-glow {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}

/* ================= Тости (js/app_toast.js) =================
   Коротке повідомлення вгорі екрана, що зникає саме: зелене — успіх,
   червоне — помилка, синє — довідка. Вигляд перенесено з cab/trading
   (колишній #trading-notify). Mobile first: на телефоні — плашка на всю
   ширину з відступами 12px і текстом по центру, від 601px — компактна
   плашка в правому верхньому куті. Стоїть поверх усього, зокрема модалок.
   Кольори свідомо вшиті, а не з теми застосунку: зелений і червоний мають
   читатися однаково на будь-якій темі. */

.app-toast {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px));
    left: 12px;
    right: 12px;
    z-index: 999999;
    box-sizing: border-box;
    max-width: calc(100vw - 24px);
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    /* \n у тексті — перенесення рядка (текст виводиться як textContent) */
    white-space: pre-line;
    overflow-wrap: break-word;
    word-break: break-word;
    border-radius: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
    /* Клік ховає тост (js/app_toast.js) */
    cursor: pointer;
    animation: app-toast-in 0.18s ease-out;
}

.app-toast[hidden] {
    display: none;
}

.app-toast--ok {
    background: #064e3b;
    color: #6ee7b7;
    border: 1px solid #059669;
}

.app-toast--error {
    background: #ef4444;
    color: #ffffff;
    border: 1px solid #f87171;
}

.app-toast--info {
    background: #1e3a8a;
    color: #bfdbfe;
    border: 1px solid #3b82f6;
}

@media (min-width: 601px) {
    .app-toast {
        top: calc(20px + env(safe-area-inset-top, 0px));
        left: auto;
        right: 20px;
        max-width: calc(100vw - 40px);
        padding: 12px 20px;
        font-size: 13px;
        text-align: left;
    }
}

@keyframes app-toast-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-toast {
        animation: none;
    }
}

/* Невидима «жива» область тостів для читалок екрана (js/app_toast.js):
   на екрані її немає, але в дереві доступності вона є завжди */
.app-toast-live {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}