html, body{
    margin: 0px;
    padding: 0px;
    font-family: Inter;
    color: #fff;
    font-size: 16px;
    overflow: hidden;
    height: 100%;
}

body{
    background-size: auto 100%;
    background-position: 50%;
    background-attachment:fixed;
    background-color: var(--bg-dark);
}

*{
    box-sizing: border-box;
}


.app-logo{
    width: 32px;
    height: 32px;
    background-image: url(/imgs/logograyy.svg);
    background-position: left 50% top 0;
    background-size: 26px;
    background-repeat: no-repeat;
    display: block;
}

main{
    display: flex;
    height: 100vh;
    width: 100vw;
    position: relative;
}

main > .charts{
    width: calc(100vw - 340px);
    display: flex;
    background-color: #222223;
    gap: 2px;
}

main > .charts > div{
    width: 100%;
    height: 100%;
    background-color: var(--bg-dark);
    overflow: hidden;
    position: relative;
}

main > .charts > div .buttons{
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    z-index: 7;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

main > .charts > div .idea-chart-author-panel{
    position: absolute;
    bottom: 38px;
    right: 40px;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    width: max-content;
}

main > .charts.single-chart > div .idea-chart-author-panel{
    top: 18px;
    bottom: auto;
    right: 40px;
}

main > .charts > div .idea-chart-author-main{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    cursor: pointer;
}

main > .charts > div .idea-chart-author-photo.user-photo{
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    --user-photo-ring: 2px;
    --user-photo-gap: 2px;
    --user-rank-badge-size: 18px;
    --user-rank-badge-offset: -4px;
}

main > .charts > div .idea-chart-author-photo.user-photo > img.user-rank-badge{
    display: block;
}

main > .charts > div .idea-chart-author-name{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 8px;
    align-items: center;
    min-width: 0;
}

main > .charts > div .idea-chart-author-name b{
    display: block;
    overflow: hidden;
    color: #fff;
    max-width: 150px;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

main > .charts > div .idea-chart-author-name span{
    display: block;
    grid-column: 1;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 700;
}

main > .charts > div .idea-chart-author-name span[data-roi="positive"]{ color: #16C784; }
main > .charts > div .idea-chart-author-name span[data-roi="negative"]{ color: #EA364F; }
main > .charts > div .idea-chart-author-name span[data-roi="neutral"]{ color: #a7a7a7; }

main > .charts > div .idea-chart-follow-btn{
    grid-row: 1 / span 2;
    grid-column: 2;
    flex: 0 0 auto;
    height: 20px;
    padding: 0 9px;
    border: 0;
    border-radius: 8px;
    background: #6798ff;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
}

main > .charts > div .idea-chart-follow-btn[data-subscribed="1"]{
    background: rgba(245, 190, 77, .16);
    color: #f5be4d;
}

main > .charts > div .idea-chart-follow-btn:disabled{
    opacity: .65;
    cursor: wait;
}


main > .charts > div a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #fff;
    gap: 6px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 500;
}

main > .charts > div img{
    width: 18px;
    height: 18px;
    object-fit: contain;
}

main > .charts > div > .buttons > input{
    display: none;
}

main > .charts > div > .buttons > input:checked + .symbol{
    span{
        color: #ffffff;
    }
}

main > .charts > div > .buttons > input:checked + .symbol + .timeframes{
    label:has(input:checked){
        color: #ffffff;
        display: block;
    }
}



main > .charts > div .buttons > .symbol{
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #858790;
}

main > .charts > div .funding-comparison{
    position: absolute;
    top: 28px;
    left: 0;
    width: max-content;
    padding: 0;
    color: #fff;
    font-family: Inter, sans-serif;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

main > .charts > div .funding-comparison-row{
    display: grid;
    grid-template-columns: 28px 70px 72px;
    align-items: center;
    column-gap: 4px;
    min-height: 21px;
    font-size: 10px;
}

main > .charts > div .funding-comparison-logo{
    width: 28px;
    height: 16px;
    object-fit: contain;
    object-position: center;
}

main > .charts > div .funding-comparison-metric{
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    min-width: 0;
    white-space: nowrap;
}

main > .charts > div .funding-comparison-metric i{
    color: #7c7c7c;
    font-style: normal;
    font-weight: 500;
}

main > .charts > div .funding-comparison-metric b{
    color: #a7a7a7;
    font-weight: 600;
}

main > .charts > div .funding-comparison-metric b[data-tone="positive"]{ color: #16c784; }
main > .charts > div .funding-comparison-metric b[data-tone="negative"]{ color: #ea364f; }




main > .charts > div .buttons > .symbol > img{
    width: 22px;
    height: 22px;
    border-radius: 12px;
    object-fit: cover;
}

main > .charts > div .buttons > .timeframes{
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

main > .charts > div .buttons > .timeframes > div{
    position: absolute;
    display: flex;
    flex-direction: column;
}


input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

main > .charts > div .buttons > .timeframes label > input{
    display: none;
}

main > .charts > div .buttons > .timeframes > div > label{
    display: none;
    width: 32px;
    height: 32px;
    background-color: #121213;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 50%;
    cursor: pointer;
    font-size: 12px;
    text-align: center;
    padding: 8px 0;
    color: #858790;
}

main > .charts > div .buttons > .timeframes > div > label:hover{
    color: #ffffff;
    background-color: #0b0b0b;
}

main > .charts > div .buttons > .timeframes label:has(input:checked){
    display: block;
}

main > .charts > div .buttons > .timeframes:focus label{
    display: block;
}




main > .charts > div .buttons > .play,
main > .charts > div .buttons > .game,
main > .charts > div .buttons > .idea,
main > .charts > div .buttons > .fullscreen,
main > .charts > div .buttons > .indicators,
main > .charts > div .buttons > .photo{
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: #121213;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 50%;
    cursor: pointer;
    font-size: 12px;
    text-align: center;
    padding: 8px 0;
}

main > .charts > div .buttons > .play,
main > .charts > div .buttons > .game{
    display: none;
}

main > .charts.single-chart > div:first-child .buttons > .play,
main > .charts.single-chart > div:first-child .buttons > .game{
    display: block;
}

main > .charts > div .buttons > .indicators{
    position: relative;
    overflow: visible;
    background-image: url('/imgs/icons/power.png');
}

main > .charts > div .buttons > .indicators[data-count]::after{
    content: attr(data-count);
    position: absolute;
    top: -5px;
    right: -5px;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 1px solid #0a0a0a;
    border-radius: 9px;
    box-sizing: border-box;
    /* Цифру центрируем флексом, а не line-height: тот зависит от гарнитуры и
       разъезжается при смене размера шрифта. */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #0a0a0a;
    font-size: 9px;
    font-weight: 700;
    pointer-events: none;
}

/* --- Меню индикаторов --- */
/* Legacy layout retained only as history; the catalog below replaces it.
.ind-menu{
    position: absolute;
    z-index: 50;
    width: 320px;
    background: #1d1d20;
    border: 1px solid #2b2b2e;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ind-menu .ind-search{
    width: 100%;
    box-sizing: border-box;
    background: #121214;
    border: 1px solid #2b2b2e;
    border-radius: 8px;
    color: #FAFAFC;
    font-size: 12px;
    padding: 8px 10px;
    outline: none;
}
.ind-menu .ind-search::placeholder{ color: var(--tex-secondary); }
.ind-menu .ind-search:focus{ border-color: #6C4CF2; }
.ind-menu .ind-matches{
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 180px;
    overflow-y: auto;
}
.ind-menu .ind-match{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 7px;
    cursor: pointer;
}
.ind-menu .ind-match:hover{ background: #26262a; }
.ind-menu .ind-match-name{
    flex: 1 1 auto;
    font-size: 12px;
    color: #d6d6da;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ind-menu .ind-plus{
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 6px;
    background: #6C4CF2;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}
.ind-menu .ind-plus:hover{ background: #5a3de0; }
.ind-menu .ind-match.is-added{ cursor: default; opacity: 0.62; }
.ind-menu .ind-plus:disabled{
    background: #2b2b2e;
    color: #8d9099;
    cursor: default;
}
.ind-menu .ind-list{
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ind-menu .ind-row{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 7px;
    background: #151517;
}
.ind-menu .ind-dot{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 10px;
}
.ind-menu .ind-name{
    flex: 1 1 auto;
    font-size: 12px;
    color: #FAFAFC;
}
.ind-menu .ind-remove{
    border: none;
    background: transparent;
    color: #777;
    cursor: pointer;
    font-size: 11px;
    padding: 2px 4px;
    border-radius: 5px;
}
.ind-menu .ind-remove:hover{ color: #EA364F; background: rgba(234,54,79,0.12); }
.ind-menu .ind-gear{
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 5px;
    background-color: transparent;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 13px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9acb8' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h0a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h0a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v0a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}
.ind-menu .ind-gear:hover{ background-color: rgba(255,255,255,0.08); }
*/

/* Единый каталог индикаторов. */
.ind-menu{
    z-index: 50;
    width: min(430px, calc(100vw - 16px));
    max-height: min(620px, calc(100vh - 70px));
    padding: 10px;
    border: 1px solid #313131;
    border-radius: 8px;
    background: #141414;
    box-shadow: 0 16px 40px rgba(0,0,0,0.55);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ind-mobile-head{
    display: none;
}
.ind-menu .ind-search{
    min-height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #2f2f2f;
    overflow: hidden;
    display: flex;
}
.ind-menu .ind-search > input{
    flex: 1;
    min-width: 0;
    padding: 8px 10px 8px 34px;
    border: none;
    outline: none;
    background-color: #121214;
    background-image: url("/imgs/icons/search.svg");
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: left 10px top 50%;
    color: var(--tex-secondary);
    font: inherit;
    font-size: 12px;
    text-transform: uppercase;
}
.ind-menu .ind-search > input:focus{ background-color: #222223; }
.ind-menu .ind-list{
    min-height: 120px;
    max-height: min(510px, calc(100vh - 150px));
    padding-right: 3px;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ind-menu .ind-section-title{
    padding: 7px 5px 4px;
    color: #a7a7a7;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.ind-menu .ind-section-title:not(:first-child){
    margin-top: 7px;
    padding-top: 10px;
    border-top: 1px solid #313131;
}
.ind-menu .ind-section-empty{
    padding: 10px 8px;
    color: #7c7c7c;
    font-size: 11px;
}
.ind-menu .ind-item{
    position: relative;
    min-height: 48px;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #1e1e1e;
    display: flex;
    align-items: center;
    gap: 9px;
    transition: border-color .15s ease, background-color .15s ease;
}
.ind-menu .ind-item:hover{
    border-color: #313131;
    background: #222223;
}
.ind-menu .ind-item.is-premium{
    background: #1d1820;
    border-color: #352735;
}
.ind-menu .ind-item.is-copy{ margin-left: 24px; }
.ind-menu .ind-item.is-copy::before{
    content: "";
    position: absolute;
    left: -15px;
    top: -4px;
    width: 10px;
    height: 29px;
    border-left: 1px solid #454545;
    border-bottom: 1px solid #454545;
    border-radius: 0 0 0 6px;
}
.ind-menu .ind-premium{
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    object-fit: contain;
}
.ind-menu .ind-color{
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--indicator-color);
    border: 2px solid rgba(255,255,255,0.26);
}
.ind-menu .ind-info{
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ind-menu .ind-title-row{
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
}
.ind-menu .ind-free-badge{
    flex: 0 0 auto;
    padding: 2px 6px;
    border: 1px solid rgba(103,152,255,.32);
    border-radius: 8px;
    background: rgba(103,152,255,.10);
    color: #b9d0ff;
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
}
.ind-menu .ind-name{
    flex: 0 1 auto;
    overflow: hidden;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ind-menu .ind-meta{
    overflow: hidden;
    color: #7c7c7c;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ind-menu .ind-installs{
    flex: 0 0 auto;
    min-width: 24px;
    color: #7c7c7c;
    font-size: 10px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.ind-menu .ind-actions{
    flex: 0 0 auto;
    min-width: 26px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
}
.ind-menu .ind-action{
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 15px;
    cursor: pointer;
}
.ind-menu .ind-action:disabled{
    opacity: .32;
    cursor: not-allowed;
}
.ind-menu .ind-action:hover{ background-color: rgba(255,255,255,0.08); }
.ind-menu .ind-action:disabled:hover{ background-color: transparent; }
.ind-menu .ind-add{ background-image: url("/imgs/icons/addition.png"); }
.ind-menu .ind-check{ background-image: url("/imgs/icons/checkw.png"); }
.ind-menu .ind-copy{ background-image: url("/imgs/icons/copy.png"); }
.ind-menu .ind-setting{ background-image: url("/imgs/icons/setting.png"); }
.ind-menu .ind-ai{
    width: 100%;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #313131;
    border-radius: 8px;
    background: #1e1e1e;
    color: #ffffff;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.ind-menu .ind-ai:hover{ background: #252525; }
.ind-menu .ind-ai img{
    width: 18px;
    height: 18px;
    object-fit: contain;
}
.ind-menu .ind-empty{
    padding: 24px 8px;
    color: var(--tex-secondary);
    font-size: 11px;
    text-align: center;
}

/* --- Модалка настроек индикатора --- */
.ind-settings-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.ind-settings{
    width: min(340px, 92vw);
    background: #19191A;
    border: 1px solid #2b2b2e;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ind-settings .inds-head{
    display: flex;
    align-items: center;
    gap: 10px;
}
.ind-settings .inds-title{
    min-width: 0;
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 700;
    color: #FAFAFC;
}
.ind-settings .inds-close{
    display: none;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #272729;
    color: #ffffff;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
.ind-settings .inds-close:hover{ background: #323235; }
.ind-settings .inds-field{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.ind-settings .inds-field label{
    font-size: 12px;
    color: #a9acb8;
}
.ind-settings .inds-field input,
.ind-settings .inds-field select{
    width: 90px;
    background: #121214;
    border: 1px solid #2b2b2e;
    border-radius: 8px;
    color: #FAFAFC;
    font-size: 12px;
    padding: 6px 8px;
    outline: none;
}
.ind-settings .inds-field input:focus,
.ind-settings .inds-field select:focus{ border-color: #6C4CF2; }
.ind-settings .inds-swatches{
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.ind-settings .inds-swatch{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
}
.ind-settings .inds-swatch.selected{ border-color: #fff; }
.ind-settings .inds-actions{
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}
.ind-settings .inds-actions button{
    border: none;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.ind-settings .inds-cancel{ background: #272729; color: #c9c9cc; }
.ind-settings .inds-cancel:hover{ background: #323235; }
.ind-settings .inds-save{ background: #6C4CF2; color: #fff; }
.ind-settings .inds-save:hover{ background: #5a3de0; }
.ind-menu .ind-empty{
    font-size: 11px;
    color: var(--tex-secondary);
    text-align: center;
    padding: 24px 8px;
}

main > .charts > div .buttons > .photo{
    background-image: url(/imgs/tools/photo.svg);
}

main > .charts > div .buttons > .idea-delete-btn{
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    padding: 0 10px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    user-select: none;
}

main > .charts > div .buttons > .idea-delete-btn[data-state="delete"]{
    width: 32px;
    background-color: #CA2C35;
    color: #FFFFFF;
    background-image: url(/imgs/icons/trash-bin.png);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 18px;
}

main > .charts > div .buttons > .idea-delete-btn[data-state="close"]{
    background-color: #252836;
    color: #a9acb8;
}

main > .charts > div .buttons > .idea-delete-btn[data-state="close"]:hover{
    background-color: #2e3247;
}

main > .charts > div .buttons > .idea-delete-btn .profit[data-positive="true"]{
    color: #87F9C0;
}

main > .charts > div .buttons > .idea-delete-btn .profit[data-positive="false"]{
    color: #EA364F;
}

main > .charts > div .buttons > .play{
    background-image: url(/imgs/tools/play_circle.svg);
}

main > .charts > div .buttons > .game{
    background-image: url(/imgs/dice.png);
}

main > .charts > div .buttons > .game.loading{
    opacity: 0.55;
    pointer-events: none;
}

main > .charts > div.history-pick .buttons > .play,
main > .charts > div.history-mode .buttons > .play{
    background-color: #2b1f44;
    outline: 1px solid #9b6cff;
}

main > .charts > div.history-pick .buttons > .play,
main > .charts > div.history-pick .buttons > .game,
main > .charts > div.history-mode .buttons > .play,
main > .charts > div.history-mode .buttons > .game,
main > .charts > div.history-game .buttons > .play,
main > .charts > div.history-game .buttons > .game{
    display: none;
}

main > .charts.single-chart > div.history-pick:first-child .buttons > .play,
main > .charts.single-chart > div.history-pick:first-child .buttons > .game,
main > .charts.single-chart > div.history-mode:first-child .buttons > .play,
main > .charts.single-chart > div.history-mode:first-child .buttons > .game,
main > .charts.single-chart > div.history-game:first-child .buttons > .play,
main > .charts.single-chart > div.history-game:first-child .buttons > .game{
    display: none;
}

main > .charts.single-chart > div.idea-readonly:first-child .buttons > .play,
main > .charts.single-chart > div.idea-readonly:first-child .buttons > .game,
main > .charts.single-chart > div.idea-readonly:first-child .buttons > .idea,
main > .charts > div.idea-readonly .buttons > .play,
main > .charts > div.idea-readonly .buttons > .game,
main > .charts > div.idea-readonly .buttons > .idea{
    display: none;
}

main > .charts > div > canvas{
    transition: opacity 0.16s ease;
}

main > .charts > div.chart-loading > canvas{
    opacity: 0;
}

main > .charts > div .chart-load-overlay{
    position: absolute;
    inset: 0;
    z-index: 6;
    display: grid;
    place-items: center;
    background:
        linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px),
        #050505;
    background-size: 118px 77px, 118px 77px, auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease;
}

main > .charts > div.chart-loading .chart-load-overlay{
    opacity: 1;
    pointer-events: auto;
}

main > .charts > div .chart-load-market{
    position: relative;
    width: 132px;
    height: 74px;
    display: grid;
    place-items: center;
}

/*
Previous candle chart loader. Restore this block and the commented markup in
js/charts.mjs if the candle-strip animation is needed again.

main > .charts > div .chart-load-candles{
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    height: 54px;
}

main > .charts > div .chart-load-candles::before{
    content: "";
    position: absolute;
    left: -12px;
    right: -12px;
    top: 50%;
    height: 1px;
    background: rgba(255,255,255,0.16);
}

main > .charts > div .chart-load-candles i{
    position: relative;
    width: 7px;
    height: var(--candle-h, 30px);
    border-radius: 2px;
    background: var(--candle-color, #e7e7ea);
    animation: chart-candle-load 1.18s ease-in-out infinite;
    animation-delay: var(--candle-delay, 0s);
    box-shadow: 0 0 14px rgba(255,255,255,0.13);
}

main > .charts > div .chart-load-candles i::before{
    content: "";
    position: absolute;
    left: 50%;
    top: -10px;
    bottom: -10px;
    width: 1px;
    background: rgba(255,255,255,0.58);
    opacity: 0.72;
    transform: translateX(-50%);
}

main > .charts > div .chart-load-candles i:nth-child(1){ --candle-h: 22px; --candle-delay: -0.36s; --candle-color: #72747a; }
main > .charts > div .chart-load-candles i:nth-child(2){ --candle-h: 34px; --candle-delay: -0.24s; --candle-color: #f2f2f3; }
main > .charts > div .chart-load-candles i:nth-child(3){ --candle-h: 27px; --candle-delay: -0.12s; --candle-color: #9b9da4; }
main > .charts > div .chart-load-candles i:nth-child(4){ --candle-h: 45px; --candle-delay: 0s; --candle-color: #ffffff; }
main > .charts > div .chart-load-candles i:nth-child(5){ --candle-h: 31px; --candle-delay: 0.12s; --candle-color: #7e8086; }
main > .charts > div .chart-load-candles i:nth-child(6){ --candle-h: 40px; --candle-delay: 0.24s; --candle-color: #dedee1; }
main > .charts > div .chart-load-candles i:nth-child(7){ --candle-h: 25px; --candle-delay: 0.36s; --candle-color: #a8aab0; }

main > .charts > div .chart-load-flow{
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 5px;
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
}

main > .charts > div .chart-load-flow span{
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), rgba(255,255,255,0.18));
    animation: chart-flow-load 1.05s ease-in-out infinite;
}

@keyframes chart-candle-load {
    0%, 100% {
        transform: scaleY(0.68);
        opacity: 0.58;
    }
    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes chart-flow-load {
    0% {
        transform: translateX(-105%);
    }
    100% {
        transform: translateX(245%);
    }
}
*/

main > .charts > div .chart-load-float-market{
    width: 122px;
    height: 98px;
}

main > .charts > div .chart-load-float{
    position: relative;
    width: 100px;
    height: 88px;
    display: grid;
    place-items: center;
}

main > .charts > div .chart-load-water{
    display: none;
}

main > .charts > div .chart-load-water::before,
main > .charts > div .chart-load-water::after{
    display: none;
}

main > .charts > div .chart-load-water::after{
    display: none;
}

main > .charts > div .chart-load-ripple{
    position: absolute;
    left: 50%;
    bottom: 25px;
    z-index: 2;
    width: 28px;
    height: 11px;
    border: 1px solid rgba(255,255,255,0.62);
    border-radius: 50%;
    opacity: 0;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 0 14px rgba(255,255,255,0.18);
    transform: translateX(-50%) scale(0.22);
    animation: chart-float-ripple 2.9s ease-out infinite;
}

main > .charts > div .chart-load-ripple-two{
    animation-delay: 0.38s;
}

main > .charts > div .chart-load-ripple-three{
    animation-delay: 0.76s;
}

main > .charts > div .chart-load-bobber{
    position: absolute;
    left: 50%;
    bottom: 5px;
    z-index: 3;
    width: 12px;
    height: 74px;
    transform: translateX(-50%);
    transform-origin: 50% calc(100% - 1px);
    animation: chart-float-bite 2.9s ease-in-out infinite;
}

main > .charts > div .chart-load-bobber::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 71px;
    width: 1px;
    height: 12px;
    background: rgba(255,255,255,0.48);
    transform: translateX(-50%);
}

main > .charts > div .chart-load-bobber-wick{
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 23px;
    background: rgba(255,255,255,0.58);
    transform: translateX(-50%);
}

main > .charts > div .chart-load-bobber-body{
    position: absolute;
    left: 50%;
    top: 21px;
    width: 12px;
    height: 50px;
    transform: translateX(-50%);
}

main > .charts > div .chart-load-bobber-body::before,
main > .charts > div .chart-load-bobber-body::after{
    content: "";
    position: absolute;
    left: 50%;
    width: 10px;
    border-radius: 2px;
    transform: translateX(-50%);
}

main > .charts > div .chart-load-bobber-body::before{
    top: 0;
    height: 29px;
    background: linear-gradient(180deg, #f5f5f6 0 78%, #d9dade 78% 100%);
    animation: chart-float-painted 2.9s ease-in-out infinite;
}

main > .charts > div .chart-load-bobber-body::after{
    top: 29px;
    height: 21px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,0.56);
    border-top-color: rgba(255,255,255,0.28);
    background: transparent;
    animation: chart-float-underwater 2.9s ease-in-out infinite;
}

main > .charts > div.chart-load-carp-bite .chart-load-ripple{
    width: 34px;
    height: 13px;
    border-color: rgba(255,255,255,0.78);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.12),
        0 0 18px rgba(255,255,255,0.24);
    animation-name: chart-float-carp-ripple;
}

main > .charts > div.chart-load-carp-bite .chart-load-ripple-two{
    animation-delay: 0.32s;
}

main > .charts > div.chart-load-carp-bite .chart-load-ripple-three{
    animation-delay: 0.64s;
}

main > .charts > div.chart-load-carp-bite .chart-load-bobber{
    animation-name: chart-float-carp-bite;
}

main > .charts > div.chart-load-carp-bite .chart-load-bobber-body::before{
    animation-name: chart-float-carp-painted;
}

main > .charts > div.chart-load-carp-bite .chart-load-bobber-body::after{
    animation-name: chart-float-carp-underwater;
}

main > .charts > div.chart-load-heavy-bite .chart-load-ripple{
    width: 38px;
    height: 15px;
    border-color: rgba(255,255,255,0.86);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.14),
        0 0 22px rgba(255,255,255,0.28);
    animation-name: chart-float-heavy-ripple;
}

main > .charts > div.chart-load-heavy-bite .chart-load-ripple-two{
    animation-delay: 0.34s;
}

main > .charts > div.chart-load-heavy-bite .chart-load-ripple-three{
    animation-delay: 0.68s;
}

main > .charts > div.chart-load-heavy-bite .chart-load-bobber{
    animation-name: chart-float-heavy-bite;
}

main > .charts > div.chart-load-heavy-bite .chart-load-bobber-body::before{
    animation-name: chart-float-heavy-painted;
}

main > .charts > div.chart-load-heavy-bite .chart-load-bobber-body::after{
    animation-name: chart-float-heavy-underwater;
}

@keyframes chart-float-bite {
    0%, 10%, 100% {
        transform: translateX(-50%) translateY(0) rotate(-2deg);
    }
    15% {
        transform: translateX(-50%) translateY(2px) rotate(1deg);
    }
    20% {
        transform: translateX(-50%) translateY(0) rotate(-2deg);
    }
    28% {
        transform: translateX(-50%) translateY(3px) rotate(2deg);
    }
    36% {
        transform: translateX(-50%) translateY(-5px) rotate(-6deg);
    }
    46% {
        transform: translateX(calc(-50% + 4px)) translateY(-7px) rotate(8deg);
    }
    58% {
        transform: translateX(calc(-50% + 2px)) translateY(4px) rotate(1deg);
    }
    68% {
        transform: translateX(-50%) translateY(8px) rotate(-3deg);
    }
    78% {
        transform: translateX(-50%) translateY(1px) rotate(-1deg);
    }
}

@keyframes chart-float-carp-bite {
    0%, 8%, 100% {
        transform: translateX(-50%) translateY(0) rotate(-2deg);
    }
    12% {
        transform: translateX(-50%) translateY(2px) rotate(1deg);
    }
    18% {
        transform: translateX(-50%) translateY(0) rotate(-2deg);
    }
    26% {
        transform: translateX(-50%) translateY(6px) rotate(3deg);
    }
    34% {
        transform: translateX(calc(-50% + 3px)) translateY(12px) rotate(7deg);
    }
    46% {
        transform: translateX(calc(-50% + 8px)) translateY(6px) rotate(12deg);
    }
    58% {
        transform: translateX(calc(-50% + 3px)) translateY(-3px) rotate(-5deg);
    }
    70% {
        transform: translateX(-50%) translateY(4px) rotate(-2deg);
    }
    82% {
        transform: translateX(-50%) translateY(1px) rotate(-1deg);
    }
}

@keyframes chart-float-heavy-bite {
    0%, 8%, 100% {
        transform: translateX(-50%) translateY(0) rotate(-2deg);
    }
    12% {
        transform: translateX(-50%) translateY(2px) rotate(1deg);
    }
    18% {
        transform: translateX(-50%) translateY(0) rotate(-2deg);
    }
    26% {
        transform: translateX(-50%) translateY(7px) rotate(4deg);
    }
    34% {
        transform: translateX(calc(-50% + 3px)) translateY(14px) rotate(8deg);
    }
    46% {
        transform: translateX(calc(-50% + 9px)) translateY(8px) rotate(13deg);
    }
    58% {
        transform: translateX(calc(-50% + 11px)) translateY(-7px) rotate(-5deg);
    }
    66% {
        transform: translateX(calc(-50% + 16px)) translateY(-13px) rotate(-8deg);
    }
    74% {
        transform: translateX(calc(-50% + 22px)) translateY(-16px) rotate(-14deg);
    }
    82% {
        transform: translateX(calc(-50% + 25px)) translateY(-13px) rotate(-38deg);
    }
    90% {
        transform: translateX(calc(-50% + 14px)) translateY(-4px) rotate(-20deg);
    }
    96% {
        transform: translateX(calc(-50% + 4px)) translateY(0) rotate(-6deg);
    }
}

@keyframes chart-float-painted {
    0%, 10%, 100% {
        height: 29px;
    }
    15% {
        height: 27px;
    }
    20% {
        height: 29px;
    }
    28% {
        height: 26px;
    }
    36% {
        height: 34px;
    }
    46% {
        height: 36px;
    }
    58% {
        height: 25px;
    }
    68% {
        height: 21px;
    }
    78% {
        height: 28px;
    }
}

@keyframes chart-float-carp-painted {
    0%, 8%, 100% {
        height: 29px;
    }
    12% {
        height: 27px;
    }
    18% {
        height: 29px;
    }
    26% {
        height: 23px;
    }
    34% {
        height: 17px;
    }
    46% {
        height: 23px;
    }
    58% {
        height: 32px;
    }
    70% {
        height: 25px;
    }
    82% {
        height: 28px;
    }
}

@keyframes chart-float-heavy-painted {
    0%, 8%, 100% {
        height: 29px;
    }
    12% {
        height: 27px;
    }
    18% {
        height: 29px;
    }
    26% {
        height: 22px;
    }
    34% {
        height: 15px;
    }
    46% {
        height: 21px;
    }
    58% {
        height: 36px;
    }
    66% {
        height: 40px;
    }
    74% {
        height: 44px;
    }
    82% {
        height: 42px;
    }
    90% {
        height: 34px;
    }
    96% {
        height: 28px;
    }
}

@keyframes chart-float-underwater {
    0%, 10%, 100% {
        top: 29px;
        height: 21px;
    }
    15% {
        top: 27px;
        height: 23px;
    }
    20% {
        top: 29px;
        height: 21px;
    }
    28% {
        top: 26px;
        height: 24px;
    }
    36% {
        top: 34px;
        height: 16px;
    }
    46% {
        top: 36px;
        height: 14px;
    }
    58% {
        top: 25px;
        height: 25px;
    }
    68% {
        top: 21px;
        height: 29px;
    }
    78% {
        top: 28px;
        height: 22px;
    }
}

@keyframes chart-float-carp-underwater {
    0%, 8%, 100% {
        top: 29px;
        height: 21px;
    }
    12% {
        top: 27px;
        height: 23px;
    }
    18% {
        top: 29px;
        height: 21px;
    }
    26% {
        top: 23px;
        height: 27px;
    }
    34% {
        top: 17px;
        height: 33px;
    }
    46% {
        top: 23px;
        height: 27px;
    }
    58% {
        top: 32px;
        height: 18px;
    }
    70% {
        top: 25px;
        height: 25px;
    }
    82% {
        top: 28px;
        height: 22px;
    }
}

@keyframes chart-float-heavy-underwater {
    0%, 8%, 100% {
        top: 29px;
        height: 21px;
    }
    12% {
        top: 27px;
        height: 23px;
    }
    18% {
        top: 29px;
        height: 21px;
    }
    26% {
        top: 22px;
        height: 28px;
    }
    34% {
        top: 15px;
        height: 35px;
    }
    46% {
        top: 21px;
        height: 29px;
    }
    58% {
        top: 36px;
        height: 14px;
    }
    66% {
        top: 40px;
        height: 10px;
    }
    74% {
        top: 44px;
        height: 6px;
    }
    82% {
        top: 42px;
        height: 8px;
    }
    90% {
        top: 34px;
        height: 16px;
    }
    96% {
        top: 28px;
        height: 22px;
    }
}

@keyframes chart-float-ripple {
    0%, 12% {
        opacity: 0;
        transform: translateX(-50%) scale(0.2);
    }
    19% {
        opacity: 1;
        transform: translateX(-50%) scale(0.48);
    }
    45% {
        opacity: 0.5;
        transform: translateX(-50%) scale(1.25);
    }
    70% {
        opacity: 0.16;
        transform: translateX(-50%) scale(2.12);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) scale(2.55);
    }
}

@keyframes chart-float-carp-ripple {
    0%, 12% {
        opacity: 0;
        transform: translateX(-50%) scale(0.18);
    }
    20% {
        opacity: 1;
        transform: translateX(-50%) scale(0.52);
    }
    48% {
        opacity: 0.56;
        transform: translateX(-50%) scale(1.55);
    }
    74% {
        opacity: 0.2;
        transform: translateX(-50%) scale(2.55);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) scale(3.25);
    }
}

@keyframes chart-float-heavy-ripple {
    0%, 12% {
        opacity: 0;
        transform: translateX(-50%) scale(0.16);
    }
    20% {
        opacity: 1;
        transform: translateX(-50%) scale(0.52);
    }
    48% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1.65);
    }
    76% {
        opacity: 0.22;
        transform: translateX(-50%) scale(2.72);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) scale(3.45);
    }
}

main > .charts > div .game-search-loader{
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 54px;
    padding: 0 18px;
    border: 1px solid #25262b;
    border-radius: 8px;
    background: rgba(18, 18, 19, 0.94);
    box-shadow: 0 12px 38px rgba(0,0,0,0.42);
    color: #ffffff;
    font-size: 13px;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

main > .charts > div.game-searching .history-player-skip,
main > .charts > div.game-searching .history-player-toggle,
main > .charts > div.game-searching .history-player-close{
    opacity: 0.55;
    pointer-events: none;
}

main > .charts > div .dice-loader{
    position: relative;
    width: 28px;
    height: 28px;
    transform-style: preserve-3d;
    animation: dice-loader-spin 1.1s linear infinite;
}

main > .charts > div .dice-loader .face{
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: #702DFF;
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18);
}

main > .charts > div .dice-loader .face::before,
main > .charts > div .dice-loader .face::after{
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 12px 12px 0 #ffffff;
}

main > .charts > div .dice-loader .face::before{
    left: 5px;
    top: 5px;
}

main > .charts > div .dice-loader .face::after{
    right: 5px;
    top: 5px;
    box-shadow: -12px 12px 0 #ffffff;
}

main > .charts > div .dice-loader .face-front{
    transform: translateZ(14px);
}

main > .charts > div .dice-loader .face-back{
    transform: rotateY(180deg) translateZ(14px);
}

main > .charts > div .dice-loader .face-right{
    transform: rotateY(90deg) translateZ(14px);
}

main > .charts > div .dice-loader .face-left{
    transform: rotateY(-90deg) translateZ(14px);
}

main > .charts > div .dice-loader .face-top{
    transform: rotateX(90deg) translateZ(14px);
}

main > .charts > div .dice-loader .face-bottom{
    transform: rotateX(-90deg) translateZ(14px);
}

@keyframes dice-loader-spin {
    from {
        transform: rotateX(-20deg) rotateY(0deg) rotateZ(8deg);
    }
    to {
        transform: rotateX(340deg) rotateY(360deg) rotateZ(8deg);
    }
}

main > .charts > div.history-pick{
    cursor: col-resize;
}

main > .charts > div.history-mode{
    cursor: default;
}

main > .charts > div .history-player{
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 3px 4px;
    border: 1px solid #25262b;
    border-radius: 8px;
    background: rgba(18, 18, 19, 0.95);
    box-shadow: 0 8px 24px rgba(0,0,0,0.28);
}

main > .charts > div .history-player button{
    height: 26px;
    min-width: 64px;
    border: 0;
    border-radius: 6px;
    background: #24252b;
    color: #ffffff;
    font-family: Inter;
    font-size: 12px;
    cursor: pointer;
}

main > .charts > div .history-player select{
    appearance: none;
    -webkit-appearance: none;
    height: 26px;
    width: 36px;
    border: 0;
    border-radius: 6px;
    background: #24252b;
    color: #ffffff;
    font-family: Inter;
    font-size: 12px;
    padding: 0;
    text-align: center;
    text-align-last: center;
    outline: none;
    cursor: pointer;
}

main > .charts > div .history-player input[type="datetime-local"]{
    height: 26px;
    width: 178px;
    border: 0;
    border-radius: 6px;
    background: #24252b;
    color: #ffffff;
    font-family: Inter;
    font-size: 12px;
    padding: 0 6px;
    outline: none;
}

main > .charts > div .history-player input[type="datetime-local"]::-webkit-calendar-picker-indicator{
    filter: invert(1);
    opacity: 0.9;
    cursor: pointer;
}

main > .charts > div .history-player button:hover{
    background: #30313a;
}

main > .charts > div .history-player .history-player-skip,
main > .charts > div .history-player .history-player-score{
    display: none;
}

main > .charts > div .history-player.history-player-game .history-player-skip,
main > .charts > div .history-player.history-player-game .history-player-score{
    display: block;
}

main > .charts > div .history-player-score{
    min-width: 70px;
    color: #ffffff;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
}

main > .charts > div .history-player-score .history-player-score-percent{
    color: #ffffff;
}

main > .charts > div .history-player-score.positive .history-player-score-percent{
    color: #87F9C0;
}

main > .charts > div .history-player-score.negative .history-player-score-percent{
    color: #EA364F;
}

main > .charts > div .history-player select:hover,
main > .charts > div .history-player input[type="datetime-local"]:hover{
    background: #30313a;
}

main > .charts > div .history-player .history-player-toggle{
    background: #7A59FF;
}

main > .charts > div .history-player[data-playing="1"] .history-player-toggle{
    background: #F22767;
}

main > .charts > div .history-player.history-player-game .history-player-skip{
    background: #702DFF;
    min-width: 104px;
}

main > .charts > div .history-player .history-player-close{
    background: #EA364F;
}

main > .charts > div .history-player .history-player-toggle:hover{
    background: #6b4cf0;
}

main > .charts > div .history-player[data-playing="1"] .history-player-toggle:hover{
    background: #da1f5a;
}

main > .charts > div .history-player.history-player-game .history-player-skip:hover{
    background: #6324e8;
}

main > .charts > div .history-player .history-player-close:hover{
    background: #c92a42;
}

main > .charts > div .history-player-time{
    min-width: 26px;
    color: #b8bac5;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
}

main > .charts > div .history-player.history-player-game .history-player-date,
main > .charts > div .history-player.history-player-game .history-player-time{
    display: none;
}

main > .charts > div .buttons > .idea{
    background-image: url(/imgs/app/nav/chart_gray.png);
}

main > .charts > div .buttons > .idea:hover{
    background-image: url(/imgs/app/nav/chart_blue.png);
}

main > .charts > div .buttons > .fullscreen{
    background-image: url(/imgs/tools/full1.svg);
}

main > .charts.single-chart > div .buttons > .fullscreen{
    display: none;
}

main > .charts.chart-fullscreen{
    flex-direction: row;
    flex-wrap: nowrap;
}

main > .charts.chart-fullscreen > div{
    display: none;
}

main > .charts.chart-fullscreen > div.fullscreen-active{
    display: block;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
}

main > .charts > div.fullscreen-active .buttons > .fullscreen{
    background-image: url(/imgs/tools/full0.svg);
}



main > .charts[data-tabsount="1"]{
    flex-direction: row;
    & > div{
        flex: 0 0 100%;
    }
}

main > .charts[data-tabsount="2"]{
    flex-direction: row;
    & > div{
        flex: 0 0 calc(50% - 2px);
        width: calc(50% - 2px);
        height: 100%;
    }
}

main > .charts[data-tabsount="3"]{
    flex-direction: column;
    & > div{
        flex: 0 0 calc(50% - 2px);
        height: calc(50% - 2px);
        width: 100%;
    }
}

main > .charts[data-tabsount="4"]{
    flex-direction: row;
    & > div{
        flex: 0 0 calc(33% - 2px);
        width: calc(33% - 2px);
        height: 100%;
    }
}

main > .charts[data-tabsount="3"],
main > .charts[data-tabsount="5"]{
    flex-direction: column;
    & > div{
        flex: 1;
    }
}

main > .charts[data-tabsount="6"]{

    flex-direction: row;
    flex-wrap: wrap;

    & > div{
        flex: 0 0 calc(50% - 2px);
        width: calc(50% - 2px);
        height: calc(50% - 2px);
    }
    & > div:first-child{
        flex: 0 0 100%;
    }
}

main > .charts[data-tabsount="7"]{

    flex-direction: column;
    flex-wrap: wrap;

    & > div{
        flex: 0 0 calc(50% - 2px);
        width: calc(50% - 2px);
        height: calc(50% - 2px);
    }
    & > div:first-child{
        flex: 0 0 100%;
    }
}

main > .charts[data-tabsount="8"]{
    flex-wrap: wrap;

    & > div{
        flex: 0 0 calc(50% - 1px);
        width: calc(50% - 1px);
        height: calc(50% - 1px);
    }

}


main .draws .tabs-count{
    position: relative;
    width: 32px;
    height: 20px;
    border-radius: 8px;
    
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: 50%;
    cursor: pointer;
    margin-top: auto;
} 

main .draws .tabs-count > div {
    position: absolute;
    display: none;
    flex-direction: column;
    gap: 3px;
    left: calc(100% + 10px);
    bottom: 0%;
    background-color: #121214;
    padding: 3px;
    border-radius: 8px;
    cursor: default;
    z-index: 10;
}

main .draws .tabs-count:focus > div {
    display: flex;
}

main .draws .tabs-count > div > label{
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: #121213;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: 50%;
    cursor: pointer;
}

main .draws .tabs-count > div > label:nth-child(1),
main .draws .tabs-count:has(label:nth-child(1) input:checked) {
    background-image: url(/imgs/tabs/1.svg); 
}
main .draws .tabs-count > div > label:nth-child(2),
main .draws .tabs-count:has(label:nth-child(2) input:checked) {
    background-image: url(/imgs/tabs/2.svg); 
}
main .draws .tabs-count > div > label:nth-child(3),
main .draws .tabs-count:has(label:nth-child(3) input:checked) {
    background-image: url(/imgs/tabs/3.svg); 
}
main .draws .tabs-count > div > label:nth-child(4),
main .draws .tabs-count:has(label:nth-child(4) input:checked) {
    background-image: url(/imgs/tabs/4.svg); 
}
main .draws .tabs-count > div > label:nth-child(5),
main .draws .tabs-count:has(label:nth-child(5) input:checked) {
    background-image: url(/imgs/tabs/5.svg); 
}
main .draws .tabs-count > div > label:nth-child(6),
main .draws .tabs-count:has(label:nth-child(6) input:checked) {
    background-image: url(/imgs/tabs/6.svg); 
}
main .draws .tabs-count > div > label:nth-child(7),
main .draws .tabs-count:has(label:nth-child(7) input:checked) {
    background-image: url(/imgs/tabs/7.svg); 
}
main .draws .tabs-count > div > label:nth-child(8),
main .draws .tabs-count:has(label:nth-child(8) input:checked) {
    background-image: url(/imgs/tabs/8.svg); 
}

main .draws .tabs-count > div > label input{
    display: none;
}


main > aside{
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
}

main > aside > .app-sheet > section.is-section-loading{
    position: relative;
    min-height: 220px;
    flex: 1 1 auto;
}

.side-section-loader{
    position: absolute;
    inset: 0;
    z-index: 30;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;
    overflow: hidden;
    background: #0a0a0a;
    pointer-events: none;
}

.side-section-loader-bars{
    width: 54px;
    height: 36px;
    padding: 7px 9px;
    border: 0;
    background: transparent;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    box-sizing: border-box;
}

.side-section-loader-bars i{
    width: 4px;
    height: 100%;
    border-radius: 2px;
    background: #454545;
    transform: scaleY(.3);
    transform-origin: 50% 100%;
    animation: sideSectionLoaderBars 1.05s ease-in-out infinite;
}

.side-section-loader-bars i:nth-child(1){ height: 45%; animation-delay: -.42s; }
.side-section-loader-bars i:nth-child(2){ height: 72%; animation-delay: -.28s; }
.side-section-loader-bars i:nth-child(3){ height: 100%; background: #6798ff; animation-delay: -.14s; }
.side-section-loader-bars i:nth-child(4){ height: 66%; animation-delay: 0s; }
.side-section-loader-bars i:nth-child(5){ height: 38%; animation-delay: .14s; }

.side-section-loader-text{
    color: #7c7c7c;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}

@keyframes sideSectionLoaderBars{
    0%, 100%{ transform: scaleY(.28); opacity: .38; }
    50%{ transform: scaleY(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
    .side-section-loader-bars i{
        animation: none;
        transform: scaleY(.72);
        opacity: .8;
    }
}

section.symbols{
    max-height: 100%;
    overflow: auto;
}


.scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--secondary) var(--bg-dark);
}
.scroll::-webkit-scrollbar {
    width: 5px !important;
    height: 5px !important;
}
.scroll::-webkit-scrollbar-track {
    background: var(--bg-dark);
}
.scroll::-webkit-scrollbar-thumb {
    background: var(--secondary);
}


main > aside > nav{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex: 0 0 60px;
    gap: 14px;
    font-size: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px 10px;
    outline: 1px solid var(--secondary);
}

main > aside > nav > label{
    display: block;
    color: var(--tex-secondary);
    text-align: center;
    padding-top: 28px;
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: top 0px left 50%;
    cursor: pointer;
}

main > aside > nav > label > input{
    display: none;
}

main > aside > nav > label[data-nav="alerts"]{
    background-image: url(/imgs/app/nav/alerts_gray.png);
}

main > aside > nav > label[data-nav="coins"]{
    background-image: url(/imgs/app/nav/coins_gray.png);
}

main > aside > nav > label[data-nav="ideas"]{
    background-image: url(/imgs/app/nav/chart_gray.png);
}


/* Бейдж непрочитанных новостей */
main > aside > nav > label[data-nav="ideas"],
main > aside > nav > label[data-nav="news"],
main > aside > nav > label[data-nav="alerts"]{
    position: relative;
}

main > aside > nav > label[data-nav="ideas"] .ideas-badge,
main > aside > nav > label[data-nav="news"] .news-badge,
main > aside > nav > label[data-nav="alerts"] .alerts-badge{
    position: absolute;
    top: -3px;
    left: 50%;
    margin-left: 5px;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    background-color: #EA364F;
    color: #fff;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 700;
    text-align: center;
    display: none;
    box-sizing: border-box;
}

main > aside > nav > label[data-nav="news"]{
    background-image: url(/imgs/app/nav/news_gray.png);
}

main > aside > nav > label[data-nav="radar"]{
    background-image: url(/imgs/app/nav/radar_gray.png);
}

main > aside > nav > label[data-nav="user"]{
    padding-top: 0px;
}

main > aside > nav > label[data-nav="user"] .user-photo{
    --user-rank-badge-size: 17px;
    --user-rank-badge-offset: -4px;
}

@media (min-resolution: 1.2dppx) and (max-resolution: 1.3dppx){
    main > aside > nav > label[data-nav="user"] .user-photo{
        transform: translate(0.4px, 0.4px);
    }
}

main > aside > nav > label:has(input:checked){
    color: #fff;
}

main > aside > nav > label[data-nav="alerts"]:has(input:checked){
    background-image: url(/imgs/app/nav/alerts_white.png);
}

main > aside > nav > label[data-nav="coins"]:has(input:checked){
    background-image: url(/imgs/app/nav/coins_blue.png);
}

main > aside > nav > label[data-nav="ideas"]:has(input:checked){
    background-image: url(/imgs/app/nav/chart_blue.png);
}

main > aside > nav > label[data-nav="news"]:has(input:checked){
    background-image: url(/imgs/app/nav/news_blue.png);
}

main > aside > nav > label[data-nav="radar"]:has(input:checked){
    background-image: url(/imgs/app/nav/radar_blue.png);
}

/* Compact desktop sidebar: narrow tab rail until the selected section is opened. */
body:not(.mobile-app) main > .charts{
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

body:not(.mobile-app) main > aside.app-sidebar{
    min-width: 0;
    overflow: hidden;
}

body:not(.mobile-app) main > aside.app-sidebar.is-desktop-sidebar-compact{
    flex-basis: 60px;
}

body:not(.mobile-app) main > aside.app-sidebar.is-desktop-sidebar-compact.is-desktop-sidebar-open{
    flex-basis: 300px;
}

body:not(.mobile-app) main > aside.app-sidebar.is-desktop-sidebar-compact:not(.is-desktop-sidebar-open) > .app-sheet{
    display: none;
}

body:not(.mobile-app) main > aside.app-sidebar.is-desktop-sidebar-compact:not(.is-desktop-sidebar-open) > nav{
    width: 60px;
    height: 100%;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    padding: 8px 2px;
    overflow: hidden;
}

body:not(.mobile-app) main > aside.app-sidebar.is-desktop-sidebar-compact:not(.is-desktop-sidebar-open) > nav > label{
    width: 100%;
    min-height: 48px;
    flex: 0 0 48px;
    padding: 29px 2px 3px;
    border-radius: 8px;
    background-position: top 4px left 50%;
}

body:not(.mobile-app) main > aside.app-sidebar.is-desktop-sidebar-compact:not(.is-desktop-sidebar-open) > nav > label:hover,
body:not(.mobile-app) main > aside.app-sidebar.is-desktop-sidebar-compact.is-desktop-sidebar-open > nav > label:has(input:checked){
    background-color: #171719;
}

body:not(.mobile-app) main > aside.app-sidebar.is-desktop-sidebar-compact:not(.is-desktop-sidebar-open) > nav > label:has(input:checked){
    color: var(--tex-secondary);
    background-color: transparent;
}

body:not(.mobile-app) main > aside.app-sidebar.is-desktop-sidebar-compact:not(.is-desktop-sidebar-open) > nav > label[data-nav="alerts"]:has(input:checked){
    background-image: url(/imgs/app/nav/alerts_gray.png);
}

body:not(.mobile-app) main > aside.app-sidebar.is-desktop-sidebar-compact:not(.is-desktop-sidebar-open) > nav > label[data-nav="coins"]:has(input:checked){
    background-image: url(/imgs/app/nav/coins_gray.png);
}

body:not(.mobile-app) main > aside.app-sidebar.is-desktop-sidebar-compact:not(.is-desktop-sidebar-open) > nav > label[data-nav="ideas"]:has(input:checked){
    background-image: url(/imgs/app/nav/chart_gray.png);
}

body:not(.mobile-app) main > aside.app-sidebar.is-desktop-sidebar-compact:not(.is-desktop-sidebar-open) > nav > label[data-nav="news"]:has(input:checked){
    background-image: url(/imgs/app/nav/news_gray.png);
}

body:not(.mobile-app) main > aside.app-sidebar.is-desktop-sidebar-compact:not(.is-desktop-sidebar-open) > nav > label[data-nav="radar"]:has(input:checked){
    background-image: url(/imgs/app/nav/radar_gray.png);
}

body:not(.mobile-app) main > aside.app-sidebar.is-desktop-sidebar-compact:not(.is-desktop-sidebar-open) > nav > label[data-nav="user"]{
    min-height: 52px;
    margin-top: auto;
    padding: 0;
}

body:not(.mobile-app) main > aside.app-sidebar.is-desktop-sidebar-compact:not(.is-desktop-sidebar-open) > nav > label[data-nav="user"] .user-photo{
    float: none;
    margin: 6px auto 0;
}

.user-photo{
    position: relative;
    width: 36px;
    height: 36px;
    display: block;
    border-radius: 50%;
    padding: 0;
    border: var(--user-photo-ring) solid transparent;
    float: left;
    overflow: visible;
    background:
        linear-gradient(#141414, #141414) padding-box,
        var(--user-photo-ring-bg) border-box;
    --user-photo-ring: 2px;
    --user-photo-gap: 2px;
    --user-photo-ring-bg: conic-gradient(from -90deg, #c7c7c7 0deg, #f1f1f1 140deg, #8d8d8d 260deg, #c7c7c7 360deg);
    --user-rank-badge-size: 15px;
    --user-rank-badge-offset: -4px;
}

.user-photo::before{
    content: " ";
    display: none;
    position: absolute;
    inset: 0;
    z-index: 1;
    width: auto;
    height: auto;
    transform: none;
    border-radius: 50%;
    background: transparent;
}


.user-photo > img.user-avatar-img{
    position: absolute;
    inset: auto;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: calc(100% - var(--user-photo-gap) - var(--user-photo-gap));
    height: calc(100% - var(--user-photo-gap) - var(--user-photo-gap));
    transform: translate(-50%, -50%);
    border-radius: 50%;
    margin: 0;
    object-fit: cover;
}

.user-photo::after{
    content: attr(data-initials);
    position: absolute;
    inset: auto;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: calc(100% - var(--user-photo-gap) - var(--user-photo-gap));
    height: calc(100% - var(--user-photo-gap) - var(--user-photo-gap));
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #141414;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
}

.user-photo[data-photo-state="photo"]::after{
    display: none;
}

.user-photo[data-photo-state="initials"] > img.user-avatar-img{
    opacity: 0;
}

.user-photo > img.user-rank-badge{
    position: absolute;
    inset: auto;
    right: var(--user-rank-badge-offset);
    bottom: var(--user-rank-badge-offset);
    left: auto;
    top: auto;
    z-index: 5;
    width: var(--user-rank-badge-size);
    height: var(--user-rank-badge-size);
    transform: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    object-fit: contain;
    box-shadow: none;
    opacity: 1;
}


main > aside > .app-sheet > .search{
    padding: 10px 5px 8px 5px;
    display: flex;
    gap: 6px;
    align-items: stretch;
}

main > aside > .app-sheet > .search > div{
    flex: 1;
    min-width: 0;
    border-radius: 8px;
    background-color: #2f2f2f;
    overflow: hidden;
    display: flex;

}

main > aside > .app-sheet > .search > .ideas-sort,
main > aside > .app-sheet > .search > .news-filter,
main > aside > .app-sheet > .search > .news-create-btn,
main > aside > .app-sheet > .search > .night-watch-button{
    flex: 0 0 auto;
}

main > aside > .app-sheet > .search > div > input{
    flex: 1;
    background-color: inherit;
    border: none;
    outline: none;
    color: var(--tex-secondary);
    display: block;
    padding: 8px 8px 8px 32px;
    text-transform: uppercase;
    background-image: url("/imgs/icons/search.svg");
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: top 50% left 10px;
    background-color: #121214;
}

main > aside > .app-sheet > .search > div > input:focus{
    background-color: #222223;
}

main > aside > .app-sheet > .search > .night-watch-button{
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    outline: none;
    border-radius: 8px;
    background-color: #121214;
    background-image: url(/imgs/icons/alarm-clock.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px;
    cursor: pointer;
}
main > aside > .app-sheet > .search > .night-watch-button:hover{
    background-color: #222223;
}
main > aside > .app-sheet > .search > .night-watch-button.is-active{
    background-image: url(/imgs/icons/alarm-clock-on.png);
    background-color: #1e1e1e;
}
main > aside > .app-sheet > .search > .night-watch-button:focus-visible{
    outline: 2px solid #6798ff;
    outline-offset: 2px;
}



main > aside > .app-sheet > .search > div > input:placeholder-shown + span{
    display: none;
}

input::placeholder {
  color: #46464f;
  text-transform: none;
}


main > aside > .app-sheet > .search > div > span{
    flex: 0 0 30px;
    display: block;
    background-image: url("/imgs/icons/cancel.svg");
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: 50%;
    cursor: pointer;
}


.symbols .row{
    display: flex;
    align-items: center;
    color: #e5e5e7;
    font-size: 11px;
    gap: 5px;
    font-weight: 400;
    padding: 3px 5px;
    cursor: default;
}

.symbols .row:not(.head):hover{
    background-color: #1e1e1f;
}

.symbols .row[data-selected]{
    background-color: #222223 !important;
}

.symbols .row.head{
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--bg-dark);
    border-bottom: 1px solid var(--border);
    font-size: 9px;
    font-weight: 600;
    color: var(--tex-secondary);
    padding-bottom: 2px;
    margin-bottom: 2px;
}

.symbols .row.head > div{
    cursor: pointer;
    border-radius: 4px;
    transition: color 120ms ease, background-color 120ms ease;
}

.symbols .row.head > div[data-sort-state="active"]{
    background: rgba(103, 152, 255, .12);
    color: #6798ff;
    font-weight: 700;
}

.symbols .row.head > div[data-sort-state="positive"]{
    background: rgba(22, 199, 132, .12);
    color: #16c784;
    font-weight: 700;
}

.symbols .row.head > div[data-sort-state="negative"]{
    background: rgba(234, 54, 79, .12);
    color: #ea364f;
    font-weight: 700;
}

.symbols .row > div{
    flex: 1;
    padding: 2px 0px;
}

.symbols .row > div.symbol{
    width: 30%;
    font-weight: 600;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}


.symbols .row > div.symbol > img{
    width: 22px;
    height: 22px;
    border-radius: 10px;
}

.symbols .row > div.symbol > .fav{
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    background-image: url("/imgs/icons/star.png");
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: 50%;
    cursor: pointer;
}

.symbols .row.favorite > div.symbol > .fav{
    background-image: url("/imgs/icons/star_active.png");
}

.symbols .row > div.symbol > div{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.symbols .row > div.symbol > div .price{
    font-size: 10px;
    font-weight: 400;
    color: var(--tex-secondary);
}


.symbols .row > div[data-flex="2"]{
    flex: 2;
}

.symbols .row > div[data-flex="3"]{
    flex: 3;
}

.symbols .row > div[data-flex="4"]{
    flex: 4;
}

.symbols .row > div[data-align="center"]{
    text-align: center;
}

.symbols .row > div.symbol-activity{
    --activity-icon: url("/imgs/activ/a1.png");
    min-height: 5px;
    background-image: var(--activity-icon);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}

.symbols .row > div.symbol-activity[data-activity="2"]{
    --activity-icon: url("/imgs/activ/a2.png");
}

.symbols .row > div.symbol-activity[data-activity="3"]{
    --activity-icon: url("/imgs/activ/a3.png");
}

.symbols .row > div.symbol-activity[data-activity="4"]{
    --activity-icon: url("/imgs/activ/a4.png");
}

.symbols .row > div.symbol-activity[data-activity="5"]{
    --activity-icon: url("/imgs/activ/a5.png");
}

.symbols .row > div.symbol-activity[data-activity="6"]{
    --activity-icon: url("/imgs/activ/a6.png");
}

.symbols .row > div[data-align="right"]{
    text-align: center;
}

.symbols .row > div[data-color="green"]{
    color: #0AD2A6;
}

.symbols .row > div[data-color="red"]{
    color: #F8273D;
}

.symbols .row > div[data-color="gray"]{
    color: #858790;
}

main .draws{
    flex: 0 0 40px;
    padding: 6px;
    border-left: 1px solid #222223;
    border-right: 1px solid #222223;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

main:has(.charts > div.idea-readonly > .buttons > input:checked) .draws .tool:not([data-icon="cross"]):not([data-icon="ruler"]),
main:has(.charts > div.idea-readonly > .buttons > input:checked) .draws .settings{
    opacity: 0.3;
    pointer-events: none;
    user-select: none;
}


main .draws .tool{
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: #121213;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 50%;
    cursor: pointer;
}

main .draws .tool:hover,
main .draws .tool:has(input:checked){
    background-color: #222223;
}

main .draws .tool input{
    display: none;
}

main .draws .tool[data-icon="cross"]{
    background-image: url(/imgs/tools/cross.svg);
}
main .draws .tool[data-icon="line"]{
    background-image: url(/imgs/tools/line.svg);
}
main .draws .tool[data-icon="hlinemax"]{
    background-image: url(/imgs/tools/hlinemax.svg);
}
main .draws .tool[data-icon="hline"]{
    background-image: url(/imgs/tools/hline.svg);
}
main .draws .tool[data-icon="reqt"]{
    background-image: url(/imgs/tools/reqt.svg);
}
main .draws .tool[data-icon="fibo"]{
    background-image: url(/imgs/tools/fibo.svg);
}
main .draws .tool[data-icon="paralel"]{
    background-image: url(/imgs/tools/paralel.svg);
}
main .draws .tool[data-icon="position"]{
    background-image: url(/imgs/tools/traectory.svg);
}
main .draws .tool[data-icon="pen"]{
    background-image: url(/imgs/tools/pen.svg);
}
main .draws .tool[data-icon="ruler"]{
    background-image: url(/imgs/tools/ruler.svg);
}
main .draws .tool[data-icon="delete-all"]{
    display: none;
    margin-top: 8px;
    border: 0;
    background-image: url(/imgs/tools/delete.svg);
}

main .draws:not(.has-choused-figure):has(.tool[data-icon="cross"] input:checked) .tool[data-icon="delete-all"]{
    display: block;
}


main .draws .settings{
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--secondary);
    padding-top: 8px;
    display: none;
}

main .draws .settings > div{
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: #121213;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 50%;
    cursor: pointer;
    margin-bottom: 6px;
}

main .draws .settings > div.color{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

main .draws .settings > div.color .sample{
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background-color: #fff;
}

main .draws .settings > div.color .picker{
    position: absolute;
    display: none;
    flex-direction: column;
    gap: 20px;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background-color: #121214;
    padding: 10px;
    border-radius: 8px;
    cursor: default;
    z-index: 10;
}

main .draws .settings > div.color:focus .picker,
main .draws .settings > div.color.is-open .picker{
    display: flex;
}


main .draws .settings > div.color .picker .palette{
    display: flex;
    gap: 6px;
}

main .draws .settings > div.color .picker .palette > div{
   width: 22px;
   height: 22px;
   border-radius: 6px;
   cursor: pointer;
}


main .draws .settings > div.color .picker .alpha{
    position: relative;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    border: 1px solid #050505;
}

main .draws .settings > div.color .picker .alpha > div{
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 10px;
    background-color: #fff;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    box-shadow: 4px 4px 7px -3px #000000;
    z-index: 10;
}

main .draws:has(.tool[data-settings="1"] > input:checked){
    .settings{
        display: flex;
    }
}


main .draws .settings > div.size{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #858790;;
}


main .draws .settings > div.size .picker{
    position: absolute;
    display: none;
    flex-direction: column;
    gap: 3px;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background-color: #121214;
    padding: 3px;
    border-radius: 8px;
    cursor: default;
    z-index: 10;
}

main .draws .settings > div.size:focus .picker,
main .draws .settings > div.size.is-open .picker{
    display: flex;
}

main .draws .settings > div.size .picker > div{
    cursor: pointer;
    width: 32px;
    height: 32px;
    text-align: center;
    padding: 9px 0;
    border-radius: 6px;
}

main .draws .settings > div.size .picker > div:hover{
    background-color: #050505;
}

main .draws .settings > div.style{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #858790;;
}

main .draws .settings > div.style[data-style]::after{
    content: " ";
    display: block;
    width: 60%;
    margin: 0 auto;
    color: #858790;
    border-radius: 0;
}


main .draws .settings > div.style .picker{
    position: absolute;
    display: none;
    flex-direction: column;
    gap: 3px;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background-color: #121214;
    padding: 3px;
    border-radius: 8px;
    cursor: default;
    z-index: 10;
}

main .draws .settings > div.style:focus .picker,
main .draws .settings > div.style.is-open .picker{
    display: flex;
}

main .draws .settings > div.style .picker > div{
    cursor: pointer;
    width: 32px;
    height: 32px;
    text-align: center;
    padding: 9px 0;
    border-radius: 6px;
}

main .draws .settings > div.style:focus .picker > div::after,
main .draws .settings > div.style.is-open .picker > div::after{
    content: " ";
    display: block;
    height: 50%;
    width: 60%;
    margin: 0 auto;
    color: #858790;
    border-radius: 0;
}

main .draws .settings > div.style .picker > div:hover{
    background-color: #050505;
}

main .draws .settings > div.style .picker > div[data-style="0"]::after,
main .draws .settings > div.style[data-style="0"]::after{
    border-bottom: 2px solid #858790;
}
main .draws .settings > div.style .picker > div[data-style="1"]::after,
main .draws .settings > div.style[data-style="1"]::after{
    border-bottom: 2px dashed #858790;
}
main .draws .settings > div.style .picker > div[data-style="2"]::after,
main .draws .settings > div.style[data-style="2"]::after{
    border-bottom: 2px dotted #858790;
}


main .draws .settings > div.settings-button{
    background-image: url(/imgs/tools/settings.svg);
    background-repeat: no-repeat;
    background-size: 22px;
    background-position: 50%;
}

main .draws .settings > div.delete-button{
    background-image: url(/imgs/tools/delete.svg);
    background-repeat: no-repeat;
    background-size: 22px;
    background-position: 50%;
}


.side-modals{
    position: fixed;
    z-index: 100;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 100vh;
}

@keyframes sideModalSlideIn{
    from{
        transform: translate3d(-100%, 0, 0);
    }
    to{
        transform: translate3d(0, 0, 0);
    }
}
@keyframes sideModalSlideOut{
    from{
        transform: translate3d(0, 0, 0);
    }
    to{
        transform: translate3d(-100%, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce){
    .side-modals > div:last-child,
    .side-modals > div.is-closing{
        animation: none !important;
    }
}

.side-modals:empty{
    display: none;
}

.side-modals > div:last-child{
    display: block;
    animation: sideModalSlideIn .30s cubic-bezier(.2,.8,.2,1) both;
}

.side-modals > div.is-closing{
    display: block;
    pointer-events: none;
    animation: sideModalSlideOut .24s cubic-bezier(.4,0,.2,1) both;
}

.side-modals .side-modal{
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.side-modals .side-modal .title{
    position: sticky;
    z-index: 1;
    top: 0px;
    background-color: inherit;
    padding: 20px 24px 12px 24px;
}

.side-modals .side-modal .body{
    padding: 0px 24px;
}

.side-modals .side-modal .buttons{
    padding: 10px 24px 20px 24px;
    position: sticky;
    z-index: 1;
    bottom: 0px;
    background-color: inherit;
}

.side-modals > div{
    display: none;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #050505;
    border-radius: 0;
    border-right: #212122;
    transform-origin: left center;
    will-change: transform;
}


.side-modals > div h2{
    margin: 0px;
    font-size: 18px;
    color: #FAFAFC;
    margin-bottom: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
}

.side-modals > div h2 > div{
    flex: 1;
}
.side-modals > div h2 > div.close{
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    background-color: #272728;
    border-radius: 15px;
    background-image: url(/imgs/close.svg);
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: 50%;
    cursor: pointer;
}
.side-modals > div h2 > div.close:hover{
    background-color: #1d1d1e;
}

.side-modals > div h2[data-icon="settings"]{
    /*padding-left: 28px;
    background-image: url(/imgs/tools/settings.svg);
    background-repeat: no-repeat;
    background-size: 22px;
    background-position: top 50% left 0px;*/
}



.side-modals > div p{
    display: block;
    padding: 6px 8px;
    border-radius: 0 6px 6px 0;
    #background-color: #702DFF;

    padding-left: 8px;
    border-left: 3px solid #702DFF;
    font-size: 11px;

    font-weight: 300;
    color: #737d89;
    margin: 10px 0 10px 0;

    background-color: #121214;

}

.side-modals > div hr{
    display: block;
    padding-top: 6px;
    border: 0px solid #000000;
    border-bottom: 1px solid #1F1F1F;
    margin-bottom: 20px;
}

.side-modals > div label{
    display: block;
    font-size: 10px;
    color: #59616b;
    margin-bottom: 16px;
}

.side-modals > div label > select {
    margin-top: 5px;
    width: 100%;
}

.side-modals > div input{
    outline: none;
    background-color: #19191A;
    border: 1px solid #19191A;
    border-radius: 8px;
    padding: 12px;
    font-size: 12px;
    color: #99A1AD;
    margin-top: 5px;
    width: 100%;
}

.side-modals > div textarea{
    outline: none;
    background-color: #121214;
    border-radius: 8px;
    padding: 10px;
    width: 100%;
    height: 200px;
    border: 1px solid #2b2b2e;
    color: #99A1AD;
    resize: none;
    font-family: Inter;
    margin-top: 5px;
}

.side-modals > div textarea::placeholder {
  color: #3d4045;
  font-size: 11px;
}

.side-modals > div label.checkbox{
    display: block;
    color: #99A1AD;
    margin-top: 10px;
    padding: 5px 5px 5px 25px;
    font-size: 12px;
    background-image: url(/imgs/r_offw.svg);
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: top 50% left 0;
    cursor: pointer;
} 

.side-modals > div label.checkbox:has(input:checked){
    background-image: url(/imgs/r_on.svg);
}

.side-modals > div label.checkbox input{
    display: none;
}

.side-modals > div label.checkbox a{
    color: #bbcde5;
}


select.ideas-sort::picker(select) {
  appearance: base-select;
  -webkit-appearance: base-select;
  -moz-appearance: base-select;
}

select.ideas-sort {
    padding: 8px;
    font-size: 0;
    width: 32px;
    background-image: url(/imgs/sort.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 18px;
    cursor: pointer;
}

select.ideas-sort option{
    font-size: 12px;
}

/* Фильтр важности новостей: кнопка + выпадающий мультивыбор (details/summary). */
details.news-filter{
    position: relative;
}
.news-filter .nf-btn{
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: #121214;
    background-image: url(/imgs/filter.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 18px;
    cursor: pointer;
    list-style: none;            /* убираем стрелку details */
}
.news-filter .nf-btn::-webkit-details-marker{ display: none; }
.news-filter[open] .nf-btn{
    background-color: #2b1f44;
}

main > aside > .app-sheet > .search > .news-create-btn{
    width: 32px;
    height: 32px;
    border: 0px solid #2b2b2e;
    outline: none;
    border-radius: 8px;
    background: #121214;
    color: var(--tex-secondary);
    font-size: 22px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
}


.news-filter .nf-list{
    position: absolute;
    top: 38px;
    right: 0;
    min-width: 150px;
    background: #1d1d20;
    border: 1px solid #2b2b2e;
    border-radius: 10px;
    padding: 6px;
    z-index: 40;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.news-filter .nf-list label{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #FAFAFC;
    padding: 6px 8px;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
}
.news-filter .nf-list label:hover{
    background: #26262a;
}
.news-filter .nf-list input{
    accent-color: #6C4CF2;
}


select,
::picker(select) {
  appearance: base-select;
  -webkit-appearance: base-select;
  -moz-appearance: base-select; 
}

select {
	background-color: #19191A;
    border: 1px solid #19191A;
    border-radius: 8px;
    padding: 12px;
    font-size: 12px;
    color: #99A1AD;
}


select::picker-icon {
  color: #99A1AD;
  transition: 0.4s rotate;
  display: inline;
}

select:open::picker-icon {
  rotate: 180deg;
}

::picker(select) {
    outline: none;
    border: 1px solid #858790;
    box-shadow: 1px 2px 5px 0px rgba(0, 0, 0, 0.8);
    overflow: clip;
     border-radius: 10px;
}

select option {
	padding: 8px;
	cursor: pointer;
    color: #5a6067;
    background-color: #121212;
    border: 0px solid #121212;
}

select option:disabled {
  color: #d4d4d4;
  display: none;
}

select option::checkmark {
	display: none;
}

select option:hover,
select option:checked {
	color: #99A1AD;
}

.side-modals .buttons .green{
    border-radius: 20px;
    padding: 0px 10px;
    height: 40px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    background-color: #87F9C0;
    color: #141C18;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.side-modals .buttons .green:hover{
    background-color: #45b57d;
}

.side-modals .buttons .green.share::before{
    content: " ";
    width: 24px;
    height: 24px;
    background-image: url(/imgs/tools/sharewb.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 24px;
}

/* --- Окно статистики пользователя (профиль) --- */



.side-modals .separate{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
}

.side-modals .separate > *{
    flex: 1;
}

.side-modals .separate > .play-button{
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    background-image: url(/imgs/tools/play_circle.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 26px;
    cursor: pointer;
}

.confirm-modal,
.game-rules-modal{
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 20px;
    background: rgba(0,0,0,0.74);
    backdrop-filter: blur(4px);
    animation: modal-backdrop-in 160ms ease-out both;
}

.confirm-modal > div,
.game-rules-modal > div{
    box-sizing: border-box;
    width: min(400px, calc(100vw - 32px));
    border: 1px solid #313131;
    border-radius: 12px;
    background: #141414;
    box-shadow:
        0 24px 70px rgba(0,0,0,0.52),
        0 1px 0 rgba(255,255,255,0.03) inset;
    padding: 22px;
    animation: modal-card-in 200ms cubic-bezier(.2,.8,.2,1) both;
}

.confirm-modal > div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: min(608px, calc(100vw - 32px));
    min-height: 240px;
    padding: 46px 32px 28px;
    border: 0;
    border-radius: 16px;
    box-shadow: 1px 12px 25px rgba(0,0,0,0.78);
    font-family: Inter, sans-serif;
}

.game-end-modal{
    background: #141414;
}

.game-rules-modal > div{
    box-sizing: border-box;
    width: min(420px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    padding: 18px 20px 20px;
    border-color: #303244;
    background:
        linear-gradient(180deg, rgba(103,152,255,0.08), transparent 42%),
        #09090d;
    box-shadow: 0 24px 80px rgba(0,0,0,0.58);
    animation: gameRulesDropIn 220ms cubic-bezier(.18,.9,.24,1) both;
    will-change: transform;
}

@keyframes gameRulesDropIn{
    from{
        transform: translate3d(0, -28px, 0);
    }
    to{
        transform: translate3d(0, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce){
    .game-rules-modal > div{
        animation: none;
    }
}

.confirm-modal h2,
.game-rules-modal h2{
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 650;
}

.confirm-modal:not(.game-end-modal) h2{
    position: relative;
    display: flex;
    align-items: center;
    min-height: 64px;
    padding-left: 96px;
    color: #ffffff;
    font-size: 19.2px;
    font-weight: 600;
    letter-spacing: .035em;
}

.confirm-modal:not(.game-end-modal) h2::before{
    content: "×";
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fe6c9b;
    color: #151419;
    font-size: 36px;
    font-weight: 600;
}

.game-rules-modal h2{
    margin: 12px 0 14px;
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
}

.confirm-modal p,
.game-rules-modal p{
    margin: 0 0 20px;
    color: #a7a7ad;
    font-size: 13px;
}

.confirm-modal:not(.game-end-modal) > div > p{
    margin-top: -30px;
    padding-left: 96px;
    color: #cccccc;
    font-size: 16px;
    letter-spacing: .031rem;
}

.game-rules-modal p{
    margin: 0;
    color: #b8bac5;
    font-size: 13px;
}

.game-rules-card{
    position: relative;
}

.game-rules-modal .game-rules-close{
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 30px;
    min-width: 30px;
    height: 30px;
    flex: 0 0 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    cursor: pointer;
}

.game-rules-modal .game-rules-close::before,
.game-rules-modal .game-rules-close::after{
    content: "";
    position: absolute;
    left: 8px;
    top: 14px;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: #ffffff;
}

.game-rules-modal .game-rules-close::before{
    transform: rotate(45deg);
}

.game-rules-modal .game-rules-close::after{
    transform: rotate(-45deg);
}

.game-rules-modal .game-rules-close:hover{
    background: rgba(255,255,255,0.14);
}

.game-rules-hero{
    display: block;
    width: min(390px, 82%);
    height: auto;
    max-height: 128px;
    object-fit: contain;
    margin: 0 auto 6px;
    user-select: none;
    pointer-events: none;
}

.game-rules-list{
    display: grid;
    gap: 0;
}

.game-rules-item{
    display: grid;
    grid-template-columns: 52px 1fr;
    align-items: center;
    gap: 14px;
    min-height: 74px;
    padding: 12px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.game-rules-item:first-child{
    border-top: 0;
    padding-top: 0;
}

.game-rules-item img{
    display: block;
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.confirm-modal .confirm-reason{
    display: block;
    margin: 12px 0 0 96px;
}

.confirm-modal .confirm-reason span{
    display: block;
    margin-bottom: 6px;
    color: #a7a7a7;
    font-size: 12px;
}

.confirm-modal .confirm-reason textarea{
    width: 100%;
    min-height: 76px;
    resize: vertical;
    border: 1px solid #313131;
    border-radius: 8px;
    outline: none;
    background: #1b1b1d;
    color: #ffffff;
    padding: 10px;
    font-family: Inter;
    font-size: 13px;
}

.confirm-modal .confirm-reason textarea:focus{
    border-color: #6798ff;
}

.confirm-modal .confirm-reason em{
    display: block;
    min-height: 14px;
    margin-top: 5px;
    color: #EA364F;
    font-style: normal;
    font-size: 11px;
}

.confirm-modal > div > div:last-child{
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-top: 20px;
    padding-left: 96px;
}

.game-rules-modal .game-rules-actions{
    display: flex;
    justify-content: stretch;
    gap: 10px;
    margin-top: 14px;
}

.game-rules-modal .game-rules-timeframe{
    margin: 2px 0 0;
}

.game-rules-modal .game-rules-timeframe > span{
    display: block;
    margin-bottom: 8px;
    color: #a7a7a7;
    font-size: 13px;
}

.game-rules-modal .game-rules-timeframe > div{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    overflow: hidden;
    border: 1px solid #313131;
    border-radius: 8px;
    background: rgba(20,20,20,0.92);
}

.game-rules-modal .game-rules-timeframe label{
    height: 34px;
    border-right: 1px solid #313131;
    color: #a7a7a7;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

.game-rules-modal .game-rules-timeframe label:last-child{
    border-right: 0;
}

.game-rules-modal .game-rules-timeframe label:hover{
    background: #1e1e1e;
    color: #ffffff;
}

.game-rules-modal .game-rules-timeframe input{
    display: none;
}

.game-rules-modal .game-rules-timeframe label:has(input:checked){
    background: #ffffff;
    color: #0a0a0a;
    font-weight: 700;
}

.confirm-modal button{
    min-width: 116px;
    height: auto;
    padding: 10px 35px;
    border: 0;
    border-radius: 4px;
    background: #222127;
    color: #ffffff;
    font-family: Inter, sans-serif;
    font-size: 14.4px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
}

.game-rules-modal button{
    height: 38px;
    min-width: 0;
    flex: 1 1 0;
    border: 1px solid #313131;
    border-radius: 8px;
    background: #24252b;
    color: #ffffff;
    font-family: Inter;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.confirm-modal button:hover{
    background: #34323b;
    color: #ffffff;
}

.game-rules-modal button:hover{
    background: #30313a;
}

.confirm-modal button[data-action="confirm"]{
    background: #222127;
    color: #ffffff;
}

.confirm-modal button[data-action="confirm"]:hover{
    background: #ff6d57;
    color: #111111;
}

.game-end-modal button[data-action="next"]{
    background: #702DFF;
}

.game-end-modal button[data-action="next"]:hover{
    background: #5d24d9;
}

.game-end-modal button[data-action="finish"]{
    background: #F22767;
}

.game-end-modal button[data-action="finish"]:hover{
    background: #d51d55;
}

.game-rules-modal button[data-action="start"]{
    border-color: #ffffff;
    background: #ffffff;
    color: #0a0a0a;
}

.game-rules-modal button[data-action="start"]:hover{
    border-color: #d9d9d9;
    background: #d9d9d9;
}

@media (max-width: 560px){
    .game-rules-modal{
        padding: 10px;
    }

    .game-rules-modal > div{
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
        padding: 16px;
    }

    .game-rules-modal .game-rules-close{
        top: 12px;
        right: 12px;
    }

    .game-rules-hero{
        width: 82%;
        max-height: 110px;
        margin-bottom: 2px;
    }

    .game-rules-modal h2{
        margin: 10px 0 12px;
        font-size: 21px;
    }

    .game-rules-item{
        grid-template-columns: 44px 1fr;
        gap: 10px;
        min-height: 0;
        padding: 10px 0;
    }

    .game-rules-item img{
        width: 40px;
        height: 40px;
    }

    .game-rules-modal p{
        font-size: 12px;
    }

    .game-rules-modal .game-rules-timeframe label{
        height: 32px;
        font-size: 12px;
    }

    .game-rules-modal .game-rules-actions{
        gap: 8px;
    }

    .game-rules-modal button{
        height: 36px;
        font-size: 13px;
    }
}

.game-result-modal{
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: rgba(0,0,0,0.74);
}

.game-result-card{
    position: relative;
    width: min(560px, calc(100vw - 28px));
    max-height: calc(100vh - 96px);
    overflow: auto;
    border: 1px solid #303244;
    border-radius: 8px;
    background: #09090d;
    box-shadow: 0 28px 80px rgba(0,0,0,0.64);
    color: #ffffff;
}

.game-result-card.game-result-capturing{
    width: 560px;
    max-height: none;
    overflow: visible;
}

.game-result-card.game-result-capturing .game-result-close{
    display: none;
}

.game-result-bg{
    position: absolute;
    right: 0;
    top: 0;
    width: 390px;
    height: 520px;
    z-index: 0;
    object-fit: cover;
    object-position: 72% 50%;
    filter: saturate(1.1) contrast(1.04);
    opacity: 1;
    pointer-events: none;
}

.game-result-card::before{
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 390px;
    height: 520px;
    z-index: 1;
    background:
        linear-gradient(90deg, #09090d 0%, rgba(9,9,13,0.8) 18%, rgba(9,9,13,0.1) 62%, rgba(9,9,13,0) 100%),
        linear-gradient(0deg, rgba(9,9,13,0.92) 0%, rgba(9,9,13,0.05) 42%);
    pointer-events: none;
}

.game-result-close{
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 6px;
    background: rgba(255,255,255,0.1);
    cursor: pointer;
}

.game-result-close::before,
.game-result-close::after{
    content: "";
    position: absolute;
    left: 8px;
    top: 14px;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: #ffffff;
}

.game-result-close::before{
    transform: rotate(45deg);
}

.game-result-close::after{
    transform: rotate(-45deg);
}

.game-result-close:hover{
    background: rgba(234,54,79,0.95);
}

.game-result-banner{
    position: relative;
    z-index: 2;
    min-height: 520px;
    padding: 28px 34px 18px;
}

.game-result-head{
    position: relative;
    z-index: 3;
    display: block;
    max-width: 300px;
}

.game-result-symbol{
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding-left: 48px;
    color: #7A7A7A;
    font-size: 34px;
    font-weight: 900;
    background-image: url(/imgs/logowhite.svg);
    background-size: 40px;
    background-position: left 50%;
    background-repeat: no-repeat;
}

.game-result-symbol span{
    color: #ffffff;
}

.game-result-badge{
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    margin-top: 14px;
    padding: 0 12px;
    border-radius: 6px;
    background: rgba(122,89,255,0.18);
    color: #87F9C0;
    font-size: 14px;
    font-weight: 700;
}

.game-result-card.negative .game-result-badge{
    color: #EA364F;
}

.game-result-kicker{
    position: relative;
    z-index: 3;
    margin-top: 10px;
    color: #45e6e6;
    font-size: 17px;
    font-weight: 800;
}

.game-result-label{
    position: relative;
    z-index: 3;
    margin-top: 24px;
    color: #a7a9b4;
    font-size: 14px;
}

.game-result-total{
    position: relative;
    z-index: 3;
    margin-top: 8px;
    color: #ffffff;
    font-size: 74px;
    font-weight: 900;
}

.game-result-card.positive .game-result-total{
    color: #87F9C0;
}

.game-result-card.negative .game-result-total{
    color: #EA364F;
}

.game-result-user{
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 38px;
    margin-top: 12px;
    padding: 0 16px;
    border: 1px solid rgba(135,249,192,0.32);
    border-radius: 8px;
    background: rgba(5,12,18,0.66);
    box-shadow: 0 0 18px rgba(69,230,230,0.14);
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-result-lines{
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    width: 300px;
    max-width: 100%;
    margin-top: 18px;
}

.game-result-lines > div{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
    border-bottom: 0;
}

.game-result-lines span,
.game-result-footer span{
    color: #a9acb8;
    font-size: 13px;
}

.game-result-lines b{
    color: #45e6e6;
    font-size: 18px;
    font-weight: 700;
}

.game-result-lines b.positive,
.game-result-lines em.positive{
    color: #87F9C0;
}

.game-result-lines b.negative,
.game-result-lines em.negative{
    color: #EA364F;
}

.game-result-lines em{
    font-style: normal;
}

.game-result-footer{
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    background: linear-gradient(135deg, #101620, #171a26);
    border-top: 1px solid rgba(255,255,255,0.08);
}

.game-result-footer > div{
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    min-height: 78px;
    padding: 14px 28px;
    background:
        linear-gradient(90deg, rgba(69,230,230,0.08), transparent 62%),
        #151923;
}

.game-result-footer-brand{
    justify-content: center;
}

.game-result-footer-brand b{
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding-left: 42px;
    color: #7A7A7A;
    font-size: 28px;
    font-weight: 900;
    background-image: url(/imgs/logowhite.svg);
    background-size: 34px;
    background-position: left 50%;
    background-repeat: no-repeat;
}

.game-result-footer-brand b span{
    color: #ffffff;
    font-size: inherit;
}

.game-result-footer-brand small{
    color: #a9acb8;
    font-size: clamp(10px, 1.8vw, 13px);
    min-width: 0;
}

.game-result-qr{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 0 22px rgba(69,230,230,0.22);
}

.game-result-qr img{
    display: block;
    width: 58px;
    height: 58px;
}

.game-result-share{
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    background: rgba(15,18,27,0.94);
    box-shadow: 0 14px 34px rgba(0,0,0,0.32);
}

.game-result-share button{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #202532;
    color: #ffffff;
    font-family: Inter;
    font-size: 0;
    font-weight: 700;
    cursor: pointer;
}

.game-result-share button:hover{
    background: #702DFF;
}

.game-result-share svg{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    fill: currentColor;
    color: #ffffff;
}

.game-result-share svg[data-social="tg"]{
    color: #45e6e6;
}

.game-result-share svg[data-social="wa"]{
    color: #87F9C0;
}

.game-result-share svg[data-social="x"]{
    color: #ffffff;
}

.game-result-share svg[data-social="fb"]{
    color: #8bb7ff;
}

.game-result-share svg[data-social="dl"]{
    color: #ffc14d;
}

.profile-share-modal{
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 1.4vh, 12px);
    overflow: hidden;
    background: rgba(0,0,0,.74);
}

.profile-share-stage{
    position: relative;
    flex: 0 0 auto;
    width: min(330px, calc(100vw - 24px));
    overflow: visible;
}

.profile-share-card{
    position: relative;
    width: 100%;
    max-height: none;
    overflow: hidden;
    border: 0;
    border-radius: 8px;
    background: #09090d;
    color: #ffffff;
    container-type: inline-size;
}

.profile-share-card.profile-share-capturing{
    max-height: none;
    overflow: hidden;
}

.profile-share-card.profile-share-capturing .profile-share-close{
    display: none;
}

.profile-share-bg{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    width: 59cqw;
    height: 98cqw;
    object-fit: cover;
    object-position: 62% 30%;
    opacity: .95;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 66%, rgba(0,0,0,.42) 84%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 66%, rgba(0,0,0,.42) 84%, transparent 100%);
    pointer-events: none;
}

.profile-share-card::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, #09090d 0%, rgba(9,9,13,.96) 48%, rgba(9,9,13,.22) 100%),
        linear-gradient(0deg, #09090d 0%, rgba(9,9,13,.22) 56%, rgba(9,9,13,0) 100%);
    pointer-events: none;
}

.profile-share-close{
    position: absolute;
    top: clamp(8px, 2.3cqw, 10px);
    right: clamp(8px, 2.3cqw, 10px);
    z-index: 5;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 6px;
    background: rgba(255,255,255,.1);
    cursor: pointer;
}

.profile-share-close::before,
.profile-share-close::after{
    content: "";
    position: absolute;
    left: 6px;
    top: 11px;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background: #ffffff;
}

.profile-share-close::before{ transform: rotate(45deg); }
.profile-share-close::after{ transform: rotate(-45deg); }
.profile-share-close:hover{ background: rgba(234,54,79,.95); }

.profile-share-brand{
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-height: clamp(20px, 6.8cqw, 23px);
    margin: clamp(11px, 4.1cqw, 14px) clamp(12px, 5cqw, 17px) 0;
    padding: 0;
    color: #7A7A7A;
    font-size: clamp(18px, 5.45cqw, 22px);
    font-weight: 900;
}

.profile-share-brand img{
    display: block;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    margin-right: clamp(6px, 1.8cqw, 8px);
}

.profile-share-brand span{
    color: #ffffff;
}

.profile-share-content{
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(10px, 4.1cqw, 14px) clamp(6px, 2.3cqw, 8px) clamp(8px, 3.2cqw, 11px);
}

.profile-share-avatar.user-photo{
    float: none;
    width: clamp(72px, 26.4cqw, 87px);
    height: clamp(72px, 26.4cqw, 87px);
    --user-photo-ring: 2px;
    --user-photo-gap: 3px;
    --user-rank-badge-size: 0;
}

.profile-share-avatar.user-photo::after{
    font-size: clamp(21px, 7.7cqw, 26px);
    font-weight: 700;
}

.profile-share-name{
    max-width: 100%;
    margin-top: clamp(7px, 2.7cqw, 9px);
    overflow: hidden;
    color: #ffffff;
    font-size: clamp(14px, 4.55cqw, 16px);
    font-weight: 700;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-share-followers{
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: clamp(4px, 1.4cqw, 6px);
    color: #a7a7a7;
    font-size: clamp(9px, 2.7cqw, 11px);
    font-weight: 500;
}

.profile-share-followers span{
    width: 10px;
    height: 10px;
    background: url(/imgs/icons/followers.png) center / contain no-repeat;
    opacity: .86;
}

.profile-share-followers b{
    color: #ffffff;
    font-size: inherit;
}

.profile-share-level{
    display: grid;
    grid-template-columns: clamp(42px, 15.45cqw, 51px) minmax(0, 1fr) clamp(42px, 15.45cqw, 51px);
    align-items: center;
    gap: clamp(5px, 1.4cqw, 6px);
    width: 100%;
    margin-top: 14px;
    padding: 0 36px;
}

.profile-share-rank{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(4px, 1.1cqw, 5px);
}

.profile-share-rank img{
    width: clamp(42px, 15.45cqw, 51px);
    height: clamp(42px, 15.45cqw, 51px);
    object-fit: contain;
}

.profile-share-rank span{
    max-width: 66px;
    overflow: hidden;
    padding: clamp(2px, .7cqw, 3px) clamp(5px, 2cqw, 7px);
    border-radius: 999px;
    background: var(--rank-pill-bg, rgba(238,231,215,.14));
    color: #ffffff;
    font-size: clamp(9px, 2.95cqw, 11px);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-share-rank span[data-rank="1"]{ color: #22BBFE; --rank-pill-bg: rgba(34,187,254,.13); }
.profile-share-rank span[data-rank="2"]{ color: #EEE7D7; --rank-pill-bg: rgba(238,231,215,.14); }
.profile-share-rank span[data-rank="3"]{ color: #EF0F27; --rank-pill-bg: rgba(239,15,39,.14); }
.profile-share-rank span[data-rank="4"]{ color: #FFDB3A; --rank-pill-bg: rgba(255,219,58,.14); }
.profile-share-rank span[data-rank="5"]{ color: #EE9902; --rank-pill-bg: rgba(238,153,2,.16); }
.profile-share-rank span[data-rank="6"]{ color: #0074B1; --rank-pill-bg: rgba(203,238,255,.88); }
.profile-share-rank span[data-rank="7"]{ color: #AC5D03; --rank-pill-bg: rgba(255,229,194,.86); }

.profile-share-progress{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(6px, 1.8cqw, 8px);
}

.profile-share-progress .progress{
    width: 88%;
    align-self: center;
    height: clamp(6px, 2.27cqw, 8px);
    overflow: hidden;
    border-radius: 999px;
    background: #242424;
}

.profile-share-progress .progress i{
    display: block;
    width: var(--progress);
    min-width: 9px;
    height: 100%;
    border-radius: inherit;
    background: #6798ff;
}

.profile-share-progress b{
    align-self: center;
    color: #ffffff;
    font-size: clamp(9px, 2.95cqw, 11px);
    font-weight: 700;
}

.profile-share-params{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    margin-top: 16px;
    border-radius: 8px;
    background: #121212;
}

.profile-share-params > div{
    min-width: 0;
    padding: clamp(7px, 2.7cqw, 9px) clamp(6px, 2.3cqw, 8px);
    text-align: center;
}

.profile-share-params > div + div{
    border-left: 1px solid rgba(255,255,255,.08);
}

.profile-share-params span{
    display: block;
    overflow: hidden;
    color: #8f98a8;
    font-size: clamp(8px, 2.5cqw, 10px);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-share-params b{
    display: block;
    margin-top: clamp(4px, 1.1cqw, 5px);
    color: #ffffff;
    font-size: clamp(12px, 4.1cqw, 14px);
    font-weight: 800;
}

.profile-share-params b[data-positive="true"]{ color: #0AD2A6; }
.profile-share-params b[data-positive="false"]{ color: #F8273D; }

.profile-share-chart{
    width: 100%;
    margin-top: clamp(8px, 2.7cqw, 10px);
    padding: clamp(6px, 2.3cqw, 8px);
    border-radius: 8px;
    background: #101010;
}

.profile-share-chart img{
    display: block;
    width: 100%;
    height: auto;
}

.profile-share-footer{
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(48px, 15cqw, 54px);
    gap: clamp(8px, 3.2cqw, 11px);
    align-items: center;
    min-height: clamp(68px, 20.5cqw, 72px);
    box-sizing: border-box;
    padding: clamp(7px, 2cqw, 8px) clamp(11px, 4.1cqw, 14px) clamp(10px, 3.2cqw, 11px);
    background:
        linear-gradient(90deg, rgba(103,152,255,.1), transparent 68%),
        #151923;
}

.profile-share-footer > div{
    min-width: 0;
}

.profile-share-footer b{
    display: block;
    color: #ffffff;
    font-size: clamp(9px, 2.95cqw, 11px);
    font-weight: 800;
}

.profile-share-footer span{
    display: block;
    margin-top: clamp(3px, .9cqw, 4px);
    color: #cbd2df;
    font-size: clamp(8px, 2.5cqw, 9px);
}

.profile-share-qr{
    display: flex;
    flex: 0 0 clamp(48px, 15cqw, 54px);
    align-items: center;
    justify-content: center;
    width: clamp(48px, 15cqw, 54px);
    height: clamp(48px, 15cqw, 54px);
    border-radius: 8px;
    background: #ffffff;
    align-self: center;
}

.profile-share-qr img{
    width: clamp(42px, 13.2cqw, 48px);
    height: clamp(42px, 13.2cqw, 48px);
}

.profile-share-actions{
    margin-top: 10px;
}

@media (max-height: 820px){
    .profile-share-stage{
        width: min(300px, calc(100vw - 24px));
    }

    .profile-share-actions{
        margin-top: 8px;
    }
}

@media (max-height: 720px){
    .profile-share-stage{
        width: min(270px, calc(100vw - 18px));
    }

    .profile-share-modal{
        padding: 8px;
    }
}

.game-result-footer b{
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
}

@media (max-width: 560px){
    .game-result-banner{
        min-height: 450px;
        padding: 24px 22px 18px;
    }

    .game-result-symbol{
        min-height: 34px;
        padding-left: 40px;
        font-size: 28px;
        background-size: 34px;
    }

    .game-result-total{
        font-size: 52px;
    }

    .game-result-footer{
        grid-template-columns: 1fr;
    }

    .game-result-footer > div{
        grid-template-columns: 1fr auto;
        gap: 14px;
        padding: 12px 18px;
    }

    .game-result-footer-brand small{
        grid-column: 1 / 2;
        font-size: 12px;
    }

    .game-result-qr{
        grid-column: 2;
        grid-row: 1 / 3;
        width: 62px;
        height: 62px;
    }

    .game-result-qr img{
        width: 54px;
        height: 54px;
    }

    .game-result-share{
        gap: 8px;
        padding: 8px 10px;
    }

}



.side-modals .tumbler{
    font-size: 10px;
    color: #59616b;;
    margin-bottom: 16px;
}

.side-modals .tumbler > div {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
    flex-direction: row-reverse;
}

.side-modals .tumbler > div > input{
    margin: 0;
}

.side-modals .tumbler > div > label{
    display: block;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    background-image: url(/imgs/r_off.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 22px;
    margin: 0;
    cursor: pointer;
}

.side-modals .tumbler > div > label:has(input:checked){
    background-image: url(/imgs/r_on.svg);
}

.side-modals .tumbler > div > label + *{
    pointer-events: none;
    opacity: 0.5;
}

.side-modals .tumbler > div > label:has(input:checked) + *{
    pointer-events: all;
    opacity: 1;
}

.side-modals .tumbler > div > label > input{
    display: none;
}

.side-modals .tumbler > div > *:last-child{
    flex: 1;
}

/* Legacy confirmations use the same compact CrypSpy language as app-dialog. */
.confirm-modal{
    align-items: center;
    padding: 16px;
    background: rgba(0,0,0,.58);
    backdrop-filter: blur(5px);
}

.confirm-modal > div{
    position: relative;
    display: block;
    width: min(420px, calc(100vw - 32px));
    min-height: 0;
    padding: 20px;
    border: 1px solid #252525;
    border-radius: 10px;
    background: #0d1013;
    box-shadow: 0 18px 50px rgba(0,0,0,.42);
    font-family: Inter, sans-serif;
}

.confirm-modal > div::before{
    content: none;
}

.confirm-modal h2{
    margin: 0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
}

.confirm-modal:not(.game-end-modal) h2{
    min-height: 0;
    padding-left: 0;
}

.confirm-modal:not(.game-end-modal) h2::before{
    content: none;
}

.confirm-modal > div > p,
.confirm-modal:not(.game-end-modal) > div > p{
    margin: 10px 0 0;
    padding: 0;
    color: #99a1ad;
    font-size: 13px;
    letter-spacing: 0;
}

.confirm-modal.game-end-modal > div > p{
    margin-left: 0;
}

.confirm-modal .confirm-reason{
    margin: 14px 0 0;
}

.confirm-modal > div > div:last-child{
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
    padding-left: 0;
}

.confirm-modal button{
    flex: 0 0 auto;
    min-width: 104px;
    height: 40px;
    padding: 0 18px;
    border: 1px solid #454545;
    border-radius: 8px;
    background: #141414;
    color: #ffffff;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 700;
}

.confirm-modal button:hover{
    border-color: #59616b;
    background: #1b1b1b;
    color: #ffffff;
}

.confirm-modal button[data-action="confirm"]{
    border-color: #ffffff;
    background: #ffffff;
    color: #0a0a0a;
}

.confirm-modal button[data-action="confirm"]:hover{
    border-color: #d9d9d9;
    background: #d9d9d9;
    color: #0a0a0a;
}

.app-dialog{
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 16px;
    background: rgba(0,0,0,.58);
    backdrop-filter: blur(5px);
    animation: app-dialog-overlay-in 160ms ease-out both;
}

.app-dialog-card{
    position: relative;
    box-sizing: border-box;
    width: min(420px, calc(100vw - 32px));
    padding: 32px 20px 20px;
    border: 1px solid #252525;
    border-radius: 10px;
    background: #0d1013;
    color: #ffffff;
    font-family: Inter, sans-serif;
    box-shadow: 0 18px 50px rgba(0,0,0,.42);
    animation: app-dialog-card-in 260ms cubic-bezier(.2,0,.2,1) both;
}

.app-dialog-handle{
    position: absolute;
    top: 10px;
    left: 50%;
    width: 54px;
    height: 4px;
    border-radius: 999px;
    background: #59616b;
    opacity: .75;
    transform: translateX(-50%);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.app-dialog-handle::before{
    content: "";
    position: absolute;
    left: -116px;
    right: -116px;
    top: -12px;
    bottom: -14px;
}

.app-dialog-card.is-dragging{
    animation: none;
    transition: none;
}

.app-dialog-card.is-dragging .app-dialog-handle{
    cursor: grabbing;
}

.app-dialog-card.is-returning{
    animation: none;
    transition: transform .18s cubic-bezier(.2,0,.2,1);
}

.app-dialog-content{
    min-width: 0;
}

.app-dialog-content.has-status-icon{
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
}

.app-dialog-status-icon{
    grid-row: 1 / span 2;
    width: 36px;
    height: 36px;
    margin-top: 1px;
    object-fit: contain;
}

.app-dialog-content.has-status-icon .app-dialog-title,
.app-dialog-content.has-status-icon .app-dialog-message{
    grid-column: 2;
}

.app-dialog-content.has-status-icon .app-dialog-message{
    margin-top: 4px;
}

.app-dialog-title{
    margin: 0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.app-dialog-message{
    margin: 10px 0 0;
    color: #99a1ad;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.app-dialog-field{
    display: block;
    margin-top: 14px;
}

.app-dialog-field span{
    display: block;
    margin-bottom: 6px;
    color: #a7a7a7;
    font-size: 12px;
}

.app-dialog-field textarea{
    box-sizing: border-box;
    width: 100%;
    min-height: 76px;
    resize: vertical;
    padding: 10px;
    border: 1px solid #313131;
    border-radius: 8px;
    outline: none;
    background: #141414;
    color: #ffffff;
    font-family: Inter, sans-serif;
    font-size: 13px;
}

.app-dialog-field textarea:focus{
    border-color: #6798ff;
}

.app-dialog-field em{
    display: block;
    min-height: 14px;
    margin-top: 5px;
    color: #ea364f;
    font-size: 11px;
    font-style: normal;
}

.app-dialog-actions{
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.app-dialog-actions button{
    flex: 0 0 auto;
    min-width: 104px;
    height: 40px;
    padding: 0 18px;
    border: 1px solid #454545;
    border-radius: 8px;
    outline: none;
    background: #141414;
    color: #ffffff;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 130ms ease, background-color 130ms ease, color 130ms ease;
}

.app-dialog-actions button:hover,
.app-dialog-actions button:focus-visible{
    border-color: #59616b;
    background: #1b1b1b;
}

.app-dialog-actions .app-dialog-primary{
    border-color: #ffffff;
    background: #ffffff;
    color: #0a0a0a;
}

.app-dialog-actions .app-dialog-primary:hover,
.app-dialog-actions .app-dialog-primary:focus-visible{
    border-color: #d9d9d9;
    background: #d9d9d9;
    color: #0a0a0a;
}

.app-dialog-actions.app-dialog-actions-single .app-dialog-primary{
    flex-basis: auto;
}

.app-dialog.is-closing{
    pointer-events: none;
    animation: app-dialog-overlay-out 200ms ease-in both;
}

.app-dialog.is-closing .app-dialog-card{
    animation: app-dialog-card-out 180ms ease-in both;
}

.app-dialog.is-swipe-closing .app-dialog-card{
    animation: app-dialog-card-swipe-out 200ms cubic-bezier(.4,0,1,1) both;
}

@keyframes app-dialog-overlay-in{
    from{ opacity: 0; }
    to{ opacity: 1; }
}

@keyframes app-dialog-overlay-out{
    to{ opacity: 0; }
}

@keyframes app-dialog-card-in{
    from{
        transform: translateY(calc(50vh + 100%));
    }
    to{
        transform: translateY(0);
    }
}

@keyframes app-dialog-card-out{
    to{
        opacity: 0;
        transform: translateY(8px) scale(.99);
    }
}

@keyframes app-dialog-card-swipe-out{
    to{ transform: translateY(calc(50vh + 100%)); }
}

@media (max-width: 520px){
    .app-dialog{
        padding: 10px;
    }

    .app-dialog-card{
        width: 100%;
        padding: 32px 16px 16px;
    }
}

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

.modal{
    position: fixed;
    z-index: 100;
    inset: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    padding: 20px;
    background: rgba(0,0,0,0.74);
    backdrop-filter: blur(4px);
    animation: modal-backdrop-in 160ms ease-out both;
}

.modal > div{
    position: relative;
    box-sizing: border-box;
    width: min(380px, calc(100vw - 32px));
    min-height: 0;
    padding: 20px;
    border: 1px solid #313131;
    border-radius: 8px;
    background: #141414;
    box-shadow: none;
    font-family: Inter, sans-serif;
    animation: modal-card-in 170ms cubic-bezier(.2,.75,.25,1) both;
}

@keyframes modal-backdrop-in{
    from{ opacity: 0; }
    to{ opacity: 1; }
}

@keyframes modal-card-in{
    from{
        opacity: 0;
        transform: translateY(12px) scale(.98);
    }
    to{
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal.is-closing,
.confirm-modal.is-closing{
    pointer-events: none;
    animation: modal-backdrop-out 140ms ease-in both;
}

.modal.is-closing > div,
.confirm-modal.is-closing > div{
    animation: modal-card-out 140ms ease-in both;
}

@keyframes modal-backdrop-out{
    to{ opacity: 0; }
}

@keyframes modal-card-out{
    to{
        opacity: 0;
        transform: translateY(7px) scale(.985);
    }
}

@media (max-width: 520px){
    .modal{
        align-items: center;
        padding: 12px;
    }

    .confirm-modal{
        align-items: center;
        padding: 10px;
    }

    .modal > div{
        width: 100%;
        min-height: 0;
        padding: 18px;
        border-radius: 8px;
    }

    .confirm-modal > div{
        width: 100%;
        padding: 18px;
        border-radius: 10px;
    }

    .confirm-modal > div > div:last-child{
        display: flex;
        padding-left: 0;
    }

    .confirm-modal button{
        width: auto;
        min-width: 104px;
    }
}

@media (prefers-reduced-motion: reduce){
    .modal,
    .modal > div,
    .confirm-modal,
    .confirm-modal > div{
        animation: none;
    }
}

.telegram-connect-modal{
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0,0,0,0.62);
    backdrop-filter: blur(2px);
}

.telegram-connect-card{
    position: relative;
    width: min(440px, 96vw);
    overflow: hidden;
    border: 1px solid #313131;
    border-radius: 16px;
    background: #141414;
    color: #ffffff;
    animation: premiumDialogIn .32s cubic-bezier(.2,.8,.2,1) both;
    transform-origin: center center;
    will-change: transform;
}

.telegram-connect-close{
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,0.58) center / 16px no-repeat url(/imgs/close.svg);
    cursor: pointer;
}

.telegram-connect-close:hover{
    background-color: #1e1e1e;
}

.telegram-connect-hero{
    position: relative;
    height: 150px;
    background: center 35% / cover no-repeat url(/imgs/tg-auth.png);
}

.telegram-connect-hero::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 78px;
    background: linear-gradient(180deg, rgba(20,20,20,0) 0%, rgba(20,20,20,.74) 62%, #141414 100%);
    pointer-events: none;
}

.telegram-connect-content{
    padding: 0 16px 16px;
    text-align: center;
}

.telegram-connect-content h2{
    margin: 10px 0 8px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
}

.telegram-connect-content p{
    margin: 0 auto 12px;
    max-width: 360px;
    color: #a7a7a7;
    font-size: 13px;
}

.telegram-connect-bot,
.telegram-connect-check{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.telegram-connect-bot{
    margin-bottom: 12px;
    border: 1px solid #313131;
    background: #0a0a0a;
    color: #ffffff;
}

.telegram-connect-bot:hover{
    border-color: #454545;
    background: #1e1e1e;
}

.telegram-connect-content label{
    display: block;
    margin: 0 0 10px;
    color: #a7a7a7;
    font-size: 12px;
    text-align: left;
}

.telegram-connect-id{
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    padding: 13px 14px;
    border: 1px solid #313131;
    border-radius: 12px;
    outline: none;
    background: #0a0a0a;
    color: #ffffff;
    font-size: 14px;
}

.telegram-connect-id:focus{
    border-color: #6798ff;
}

.telegram-connect-error{
    min-height: 16px;
    margin: -2px 0 10px;
    color: #ff5c72;
    font-size: 12px;
    text-align: left;
}

.telegram-connect-check{
    width: 100%;
    border: 0;
    background: #ffffff;
    color: #000000;
}

.telegram-connect-check:hover{
    background: #e9e9e9;
}

.telegram-connect-check:disabled{
    cursor: default;
    opacity: .72;
}


/* Profile edit bottom sheet */
@keyframes profile-edit-spin{
    to{ transform: rotate(360deg); }
}

.side-modals #side-user-stats .profile-edit-modal{
    position: absolute;
    inset: 0;
    z-index: 60;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    display: flex;
    align-items: flex-end;
    justify-content: stretch;
    overflow: hidden;
    background: rgba(0,0,0,.58);
    backdrop-filter: blur(5px);
}

.side-modals #side-user-stats .profile-edit-sheet{
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    max-height: none;
    height: auto;
    box-sizing: border-box;
    overflow: visible;
    padding: 32px 16px 14px;
    border: 1px solid #252525;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    background: #0D1013;
    box-shadow: 0 -14px 38px rgba(0,0,0,.48);
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.side-modals #side-user-stats .profile-edit-sheet.is-before-open{
    transform: translate3d(0, 100%, 0);
}

.side-modals #side-user-stats .profile-edit-sheet.is-opening{
    transition: transform .26s cubic-bezier(.2, 0, .2, 1);
}

.side-modals #side-user-stats .profile-edit-sheet.is-dragging{
    transition: none;
}

.side-modals #side-user-stats .profile-edit-sheet.is-returning{
    transition: transform .18s cubic-bezier(.2, 0, .2, 1);
}

.side-modals #side-user-stats .profile-edit-sheet.is-closing{
    transform: translate3d(0, 100%, 0);
    transition: transform .22s cubic-bezier(.4, 0, 1, 1);
}

.side-modals #side-user-stats .profile-edit-handle{
    position: absolute;
    top: 10px;
    left: 50%;
    width: 54px;
    height: 4px;
    border-radius: 999px;
    background: #59616b;
    opacity: .75;
    transform: translateX(-50%);
    cursor: grab;
    touch-action: none;
    z-index: 2;
}

.side-modals #side-user-stats .profile-edit-handle::before{
    content: "";
    position: absolute;
    left: -116px;
    right: -116px;
    top: -12px;
    bottom: -14px;
}

.side-modals #side-user-stats .profile-edit-sheet.is-dragging .profile-edit-handle{
    cursor: grabbing;
}

.side-modals #side-user-stats .profile-preview-modal{
    position: absolute;
    inset: 0;
    z-index: 61;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: rgba(0,0,0,.58);
    backdrop-filter: blur(5px);
}
.side-modals #side-user-stats .profile-preview-sheet{
    padding: 32px 16px 14px;
    text-align: center;
}
.side-modals #side-user-stats .profile-preview-head{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.side-modals #side-user-stats .profile-preview-photo-button{
    position: relative;
    width: 86px;
    height: 86px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}
.side-modals #side-user-stats .profile-preview-photo.user-photo{
    width: 86px;
    height: 86px;
    --user-photo-ring: 2px;
    --user-photo-gap: 2px;
    --user-rank-badge-size: 22px;
    --user-rank-badge-offset: -4px;
}
.side-modals #side-user-stats .profile-preview-photo.user-photo > img.user-rank-badge{
    top: var(--user-rank-badge-offset);
    right: var(--user-rank-badge-offset);
    bottom: auto;
}
.side-modals #side-user-stats .profile-preview-name{
    margin-top: 9px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
}
.side-modals #side-user-stats .profile-preview-rank{
    margin-top: 2px;
    color: #8f8f8f;
    font-size: 11px;
}
.side-modals #side-user-stats .profile-preview-head .us-premium{
    margin-top: 8px;
}
.side-modals #side-user-stats .profile-preview-followers{
    margin-top: 7px;
    color: #8e8e8e;
    font-size: 11px;
}
.side-modals #side-user-stats .profile-preview-followers b{ color: #ffffff; }
.side-modals #side-user-stats .profile-preview-metrics{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 16px;
    padding: 9px 0;
    border-radius: 8px;
    background: #101010;
}
.side-modals #side-user-stats .profile-preview-metrics > div{
    min-width: 0;
    padding: 0 8px;
    border-right: 1px solid #242424;
}
.side-modals #side-user-stats .profile-preview-metrics > div:last-child{ border-right: 0; }
.side-modals #side-user-stats .profile-preview-metrics span{
    display: block;
    color: #7c7c7c;
    font-size: 9px;
    white-space: nowrap;
}
.side-modals #side-user-stats .profile-preview-metrics b{
    display: block;
    margin-top: 2px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
}
.side-modals #side-user-stats .profile-preview-metrics b[data-positive="true"]{ color: #21c796; }
.side-modals #side-user-stats .profile-preview-metrics b[data-positive="false"]{ color: #ff5c72; }
.side-modals #side-user-stats .profile-preview-actions{
    grid-template-columns: 1fr;
    margin-top: 14px;
}

.side-modals #side-user-stats .profile-edit-file{
    display: none;
}

.side-modals #side-user-stats .profile-edit-photo-row{
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin: 0 0 12px;
    padding: 0;
    border-radius: 8px;

}

.side-modals #side-user-stats .profile-edit-photo-row.is-over{
    outline: 1px solid #59616b;
    outline-offset: 5px;
}



.side-modals #side-user-stats .profile-edit-photo-preview{
    position: relative;
    flex: 0 0 66px;
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: #24262a;
    box-shadow: inset 0 0 0 1px #44474d;
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
}

.side-modals #side-user-stats .profile-edit-photo-preview::after{
    content: attr(data-initials);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.side-modals #side-user-stats .profile-edit-photo-preview[data-photo-state="photo"]::after{
    display: none;
}

.side-modals #side-user-stats .profile-edit-photo-preview > img.user-avatar-img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.side-modals #side-user-stats .profile-edit-photo-info{
    color: #99A1AD;
    font-size: 10px;
}

.side-modals #side-user-stats .profile-edit-photo-actions{
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.side-modals #side-user-stats .profile-edit-change,
.side-modals #side-user-stats .profile-edit-remove{
    min-width: 0;
    height: 26px;
    padding: 0 10px;
    border: 0;
    border-radius: 4px;
    background: #252527;
    color: #FAFAFC;
    font-size: 11px;
    font-weight: 400;
    cursor: pointer;
}

.side-modals #side-user-stats .profile-edit-change:hover,
.side-modals #side-user-stats .profile-edit-remove:hover{
    background: #303034;
}

.side-modals #side-user-stats .profile-edit-modal label{
    display: block;
    margin: 0 0 10px;
    color: #59616b;
    font-size: 10px;
    font-weight: 500;
}

.side-modals #side-user-stats .profile-edit-input-wrap{
    position: relative;
    margin-top: 5px;
    display: flex;
    overflow: hidden;
    border-radius: 8px;
    background-color: #2f2f2f;
}

.side-modals #side-user-stats .profile-edit-modal input{
    flex: 1;
    min-width: 0;
    width: auto;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 8px 8px;
    border: none;
    border-radius: 0;
    outline: none;
    background: #171A1E;
    box-shadow: none;
    color:#ffffff;
    font-size: 13px;
    font-weight: 400;
}

.side-modals #side-user-stats .profile-edit-name{
    padding-right: 8px !important;
}

.side-modals #side-user-stats .profile-edit-modal input:focus{
    background-color: #222223;
    box-shadow: none;
}

.side-modals #side-user-stats .profile-edit-eye{
    position: static;
    flex: 0 0 30px;
    width: 30px;
    height: 32px;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background-color: #181B1E;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px;
    background-image: url(/imgs/view.svg);
    transform: none;
    cursor: pointer;
}

.side-modals #side-user-stats .profile-edit-strength:empty{
    display: none;
}

.side-modals #side-user-stats .profile-edit-strength{
    min-height: 14px;
    margin: -2px 0 8px;
    color: #99A1AD;
    font-size: 10px;
    padding: 6px 10px;

}

.side-modals #side-user-stats .profile-edit-strength[data-score="1"]{ color: #ff5c72; }
.side-modals #side-user-stats .profile-edit-strength[data-score="2"]{ color: #ffb347; }
.side-modals #side-user-stats .profile-edit-strength[data-score="3"]{ color: #01fff3; }
.side-modals #side-user-stats .profile-edit-strength[data-score="4"]{ color: #32ff00; }

.side-modals #side-user-stats .profile-edit-error:empty{
    display: none;
}

.side-modals #side-user-stats .profile-edit-error{
    min-height: 14px;
    margin: 0 0 8px;
    color: #ff5c72;
    font-size: 11px;
}

.side-modals #side-user-stats .profile-edit-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0;
    margin-top: 20px;
}

.side-modals #side-user-stats .profile-edit-actions button{
    position: relative;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 12px 0;
}

.side-modals #side-user-stats .profile-edit-cancel{
    background: #1D1D1D;
    box-shadow: none;
    color: #FAFAFC;
    border: 1px solid #535353;
}

.side-modals #side-user-stats .profile-edit-save{
    background: #FFFFFF;
    color: #141C18;
    border: 1px solid #FFFFFF;
}

.side-modals #side-user-stats .profile-edit-actions button:disabled,
.side-modals #side-user-stats .profile-edit-modal input:disabled,
.side-modals #side-user-stats .profile-edit-change:disabled,
.side-modals #side-user-stats .profile-edit-remove:disabled{
    cursor: default;
    opacity: .66;
}

.side-modals #side-user-stats .profile-edit-modal.is-loading .profile-edit-save{
    color: transparent;
}

.side-modals #side-user-stats .profile-edit-modal.is-loading .profile-edit-save::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: -8px 0 0 -8px;
    border-style: solid;
    border-width: 2px;
    border-color: rgba(20,28,24,.24);
    border-top-color: #141C18;
    border-radius: 50%;
    animation: profile-edit-spin .8s linear infinite;
}

.prem-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 16px;
}
@keyframes premiumDialogIn{
    from{
        transform: translateY(-28px);
    }
    to{
        transform: translateY(0);
    }
}
@media (prefers-reduced-motion: reduce){
    .prem-overlay,
    .free-video-overlay,
    .pay-overlay,
    .indicator-guide-overlay,
    .indicator-request-overlay,
    .telegram-connect-modal,
    .prem,
    .free-video,
    .pay,
    .indicator-guide,
    .indicator-request,
    .telegram-connect-card{
        animation: none !important;
    }
}
.prem{
    position: relative;
    width: min(440px, 96vw);
    max-height: 94vh;
    overflow: hidden;
    
    border: 1px solid #313131;
    border-radius: 16px;
    padding: 0 0 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    isolation: isolate;
    background: #141414;
    transform-origin: center center;
    will-change: transform;
    animation: premiumDialogIn .32s cubic-bezier(.2,.8,.2,1) both;
}


.prem > *{
    position: relative;
    z-index: 1;
}
.prem-close{
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.58);
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    z-index: 2;
}
.prem-close:hover{ background: #1e1e1e; }

.prem-hero{
    position: relative;
    overflow: hidden;
    height: 178px;
    margin-bottom: -30px;
    border-radius: 16px 16px 0 0;
    background-image: url(/imgs/prem-bg.png);
    background-size: cover;
    background-position: center 38%;
    background-repeat: no-repeat;
}
.prem.is-winback .prem-hero{
    background-image: url(/imgs/no-money.png);
    background-position: center 44%;
}
.prem-hero::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 112px;
    background: linear-gradient(180deg, rgba(20,20,20,0) 0%, rgba(20,20,20,.76) 62%, #141414 100%);
    pointer-events: none;
}

.prem-title{ margin: 8px 16px 4px; font-size: 22px; font-weight: 700; color: #fff; }
.prem-sub{ font-size: 11px; color: #a7a7a7; margin: 0 16px 14px; }
.prem-winback-badge{
    align-self: center;
    margin: -4px 16px 10px;
    padding: 4px 9px;
    border: 1px solid rgba(103,152,255,.42);
    border-radius: 999px;
    background: rgba(103,152,255,.12);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}

.prem-tabs{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 12px;
}
.prem-tab{
    position: relative;
    min-height: 26px;
    padding: 6px 16px;
    border: none;
    background: transparent;
    color: #7c7c7c;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.prem-tab::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background: transparent;
}

.prem-tab span{
    position: absolute;
    top: -6px;
    display: inline-flex;
    margin-left: 8px;
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(51,169,87,.16);
    color: #33d27a;
    font-size: 10px;
    vertical-align: 1px;
}
.prem-tab[data-selected]{
    color: #ffffff;
    background-color: #000;
    border-radius: 16px;
}

.prem-compare{
    width: auto;
    /*border: 1px solid #313131;*/
    border-radius: 10px;
    /*background: rgba(10,10,10,.95);*/
    margin: 0 18px 14px;
    /* Таблица занимает всё оставшееся место окна: раньше её высота считалась
       формулой от 94vh, и на планшете снизу оставалась пустая полоса, а часть
       возможностей при этом не помещалась. */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.prem-compare-head{
    display: grid;
    grid-template-columns: 50% 25% 25%;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    min-height: 38px;
    padding: 9px 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.prem-compare-title,
.prem-plan-head > span{
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.prem-compare-title,
.prem-plan-head:first-child > span{
    font-size: 9px;
    color: #a7a7a7;
}


.prem-compare-title{ text-align: left; }
.prem-plan-head{
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-align: center;
}
.prem-plan-head em{
    color: #ffffff;
    font-size: 22px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0;
}
.prem-plan-price-suffix{
    margin-left: 3px;
    color: #7c7c7c;
    font-size: 10px;
    font-weight: 700;
}
.prem-plan-head small{
    display: block;
    max-width: 100%;
    color: #7c7c7c;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}
.prem-plan-head i{
    display: none;
    margin-left: 4px;
    color: #7c7c7c;
    font-style: normal;
    text-decoration: line-through;
}
.prem-compare-body{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.prem-compare table{
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    display: block;
}
.prem-compare tbody{
    display: block;
}
.prem-compare tr{
    display: grid;
    grid-template-columns: 50% 25% 25%;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.prem-compare td{
    display: flex;
    align-items: center;
    padding: 9px 10px;
    border-bottom: 0;
    color: #a7a7a7;
    font-size: 11px;
    vertical-align: middle;
}
.prem-compare tr:last-child td{ border-bottom: 0; }
.prem-compare tr:last-child{ border-bottom: 0; }
.prem-compare td:first-child{
    width: auto;
    text-align: left;
    font-weight: 600;
}
.prem-compare td:nth-child(2){ width: auto; }
.prem-compare td:nth-child(3){ width: auto; color: #ffffff; }
.prem-compare td:nth-child(2),
.prem-compare td:nth-child(3){
    justify-content: center;
    text-align: center;
}
.prem-price-row td{
    padding-top: 10px;
    padding-bottom: 10px;
}
.prem-price-cell{
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}
.prem-price-cell b{
    display: block;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
}
.prem-price-cell small{
    display: block;
    max-width: 100%;
    color: #7c7c7c;
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
}
.prem-price-cell .prem-price-old{
    color: #7c7c7c;
    font-size: 10px;
    text-decoration: line-through;
}
.prem-price-cell i{
    margin-left: 4px;
    color: #7c7c7c;
    font-style: normal;
    text-decoration: line-through;
}
.prem-price-free{
    color: #898888;
    font-size: 15px;
    font-weight: 700;
}
.prem-check-icon{
    width: 13px;
    height: 13px;
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
}

.prem-actions{
    width: auto;
    margin: 0 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.prem-actions.is-native{
    grid-template-columns: minmax(0, 1fr);
}
.prem-play-note{
    margin: 0 18px 10px;
    min-height: 18px;
    color: #aeb2bd;
    font-size: 12px;
    text-align: center;
}
.prem-play-note[data-status="error"]{
    color: #ff6477;
}
.prem-renewal-note{
    margin: 0 18px 10px;
    color: #7c7c7c;
    font-size: 10px;
    text-align: center;
}
.prem-free,
.prem-buy{
    width: 100%;
    border: none;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    padding: 12px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}
.prem-free{
    background: #0B0B0D;
    color: #ffffff;
    border: 1px solid #313131;
}

.prem-free::before{
    content: ' ';
    display: block;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    background-image: url(/imgs/gift-box-with-a-bow.png);
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
}

.prem-buy::before{
    content: ' ';
    display: block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background-image: url(/imgs/credit-card.png);
    background-size: 16px;
    background-position: center;
    background-repeat: no-repeat;
}

.prem-free:hover{ border-color: #6798ff; }
.prem-buy{
    background: #ffffff;
    color: #0A0A0A;
}
.prem-buy:hover{ background: #e9e9e9; }

.free-video-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2050;
    padding: 16px;
}
.free-video{
    position: relative;
    width: min(440px, 96vw);
    max-height: 94vh;
    overflow-y: auto;
    border: 1px solid #313131;
    border-radius: 16px;
    padding: 0 18px 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    background: #141414;
    transform-origin: center center;
    will-change: transform;
    animation: premiumDialogIn .32s cubic-bezier(.2,.8,.2,1) both;
}
.free-video-close{
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.58);
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    z-index: 2;
}
.free-video-close:hover{ background: #1e1e1e; }
.free-video-hero{
    position: relative;
    overflow: hidden;
    height: 154px;
    margin: 0 -18px -18px;
    border-radius: 16px 16px 0 0;
    background-image: url(/imgs/tik-tok-bg.png);
    background-size: cover;
    background-position: center 38%;
    background-repeat: no-repeat;
}
.free-video-hero::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 94px;
    background: linear-gradient(180deg, rgba(20,20,20,0) 0%, rgba(20,20,20,.78) 62%, #141414 100%);
    pointer-events: none;
}
.free-video-title{
    position: relative;
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
}
.free-note{
    font-size: 12px;
    color: #545454;
    background-image: url(/imgs/info.svg);
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: top 0 left 0;
    padding-left: 20px;
    display: block;
}
.free-video-text{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 14px;
    color: #a7a7a7;
    font-size: 13px;
}
.free-video-text p{ margin: 0 0 10px 0; display: flex; gap: 12px; font-size: 12px; align-items: center;}

.free-video-text p::before{
    flex: 0 0 40px;
    content: ' ';
    width: 40px;
    height: 40px;
    display: block;
    background-color: #232323;
    background-image: url(/imgs/video-camera.png);
    background-size: 25px;
    background-position: 50%;
    background-repeat: no-repeat;
    border-radius: 8px;
}

.free-video-text p:nth-child(1)::before{  background-image: url(/imgs/video-camera.png) }
.free-video-text p:nth-child(2)::before{  background-image: url(/imgs/hashtag.png) }
.free-video-text p:nth-child(3)::before{  background-image: url(/imgs/gift-box-with-a-bow.png) }
.free-video-text p:nth-child(4)::before{  background-image: url(/imgs/premium-quality.png) }

.free-video-text b{ color: #ffffff; font-weight: 800; }
.free-video-form{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.free-video-form label{
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.free-video-form label span{
    color: #a7a7a7;
    font-size: 12px;
}
.free-video-input{
    width: 100%;
    min-height: 48px;
    border: 1px solid #313131;
    border-radius: 12px;
    background: #0b0b0d;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    padding: 0 14px;
    outline: none;
}
.free-video-input:focus{ border-color: #6798ff; }
.free-video-submit{
    width: 100%;
    min-height: 40px;
    border: none;
    border-radius: 12px;
    background: #ffffff;
    color: #0B0B0D;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.free-video-submit:hover{ background: #e9e9e9; }
.free-video-submit:disabled{ opacity: .65; cursor: wait; }
.free-video-note{
    margin-top: 10px;
    border: 1px solid #313131;
    border-radius: 12px;
    background: #1e1e1e;
    color: #a7a7a7;
    font-size: 13px;
    padding: 12px;
    text-align: center;
}
.free-video-note[data-status="success"]{
    border-color: rgba(51,210,122,.35);
    color: #ffffff;
}
.free-video-note[data-status="error"]{
    border-color: rgba(255,78,103,.35);
    color: #ffffff;
}

/* Краткое обучение после добавления Premium-индикатора. */
.indicator-guide-overlay{
    position: fixed;
    inset: 0;
    z-index: 2060;
    padding: 16px;
    background: rgba(0,0,0,.68);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.indicator-guide{
    position: relative;
    width: min(480px, calc(100vw - 24px));
    max-height: min(720px, calc(100vh - 24px));
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #313131;
    border-radius: 16px;
    background: #141414;
    color: #ffffff;
    font-family: Inter, sans-serif;
    transform-origin: center;
    animation: premiumDialogIn .32s cubic-bezier(.2,.8,.2,1) both;
}
.indicator-guide-close{
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,.66);
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
}
.indicator-guide-close:hover{ background: #1e1e1e; }
.indicator-guide-hero{
    position: relative;
    height: 210px;
    background-image: var(--indicator-guide-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.indicator-guide-hero::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20,20,20,0) 45%, #141414 100%);
    pointer-events: none;
}
.indicator-guide-content{
    position: relative;
    z-index: 1;
    margin-top: -20px;
    padding: 0 18px 18px;
}
.indicator-guide-premium{
    width: max-content;
    margin: 0 auto 8px;
    padding: 5px 9px;
    border: 1px solid #352735;
    border-radius: 999px;
    background: #1d1820;
    color: #d9c9db;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}
.indicator-guide-premium img{
    width: 14px;
    height: 14px;
    object-fit: contain;
}
.indicator-guide h2{
    margin: 0 0 14px;
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
}
.indicator-guide-copy{
    margin-bottom: 12px;
    display: grid;
    gap: 8px;
}
.indicator-guide-copy > div{
    padding: 11px 12px;
    border: 1px solid #313131;
    border-radius: 8px;
    background: #1e1e1e;
}
.indicator-guide-copy b{
    display: block;
    margin-bottom: 4px;
    color: #ffffff;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.indicator-guide-copy p{
    margin: 0;
    color: #a7a7a7;
    font-size: 13px;
}
.indicator-guide-done{
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 8px;
    background: #ffffff;
    color: #0a0a0a;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.indicator-guide-done:hover{ background: #e9e9e9; }
.indicator-guide-done:focus-visible,
.indicator-guide-close:focus-visible{
    outline: 2px solid #6798ff;
    outline-offset: 2px;
}
.indicator-trial-expired .indicator-guide-hero::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(182,24,45,.48);
    pointer-events: none;
}
.indicator-trial-expired .indicator-guide-hero::after{ z-index: 2; }
.indicator-trial-expired-stamp{
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    padding: 9px 14px;
    border: 2px solid rgba(255,255,255,.92);
    border-radius: 8px;
    background: rgba(124,10,27,.72);
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    transform: translate(-50%, -50%) rotate(-5deg);
}
/* Час выдан — окно перестаёт быть отказом: снимаем красную заливку картинки,
   штамп меняем на зелёный, заголовок и пояснение подменяются в
   markTrialRewardGranted(). */
.indicator-trial-expired.is-granted .indicator-guide-hero::before{
    background: rgba(22,101,52,.34);
}
.indicator-trial-expired.is-granted .indicator-trial-expired-stamp{
    background: rgba(22,101,52,.78);
}
.indicator-trial-expired.is-granted .indicator-trial-expired-copy{
    border-color: #245c39;
    color: #cfe9d9;
}
.indicator-trial-expired-copy{
    margin: 0 0 14px;
    padding: 12px;
    border: 1px solid #313131;
    border-radius: 8px;
    background: #1e1e1e;
    color: #a7a7a7;
    font-size: 13px;
    text-align: center;
}
.indicator-trial-expired .indicator-guide-done{
    background: #ffffff;
    color: #0a0a0a;
}
.indicator-trial-expired .indicator-guide-done:hover{ background: #e9e9e9; }
/* Условие «3 ролика = час» должно читаться до нажатия, а не после. */
.indicator-trial-reward-offer{
    margin-top: 14px;
    padding: 12px;
    border: 1px solid #313131;
    border-radius: 8px;
    background: #1e1e1e;
    text-align: left;
}
.indicator-trial-reward-offer > b{
    display: block;
    margin-bottom: 4px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
}
.indicator-trial-reward-offer > span{
    display: block;
    color: #a7a7a7;
    font-size: 12px;
}
/* Вторичная кнопка: получение часа за рекламу не должно перебивать покупку Premium. */
.indicator-trial-reward{
    width: 100%;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    background: transparent;
    color: #d6d6da;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.indicator-trial-reward:hover:not(:disabled){ background: #1e1e1e; }
.indicator-trial-reward:disabled{ opacity: .6; cursor: default; }
.indicator-trial-reward-note{
    margin: 10px 0 0;
    color: #a7a7a7;
    font-size: 12px;
    text-align: center;
}
@media (max-width: 520px){
    .indicator-guide-overlay{ padding: 8px; }
    .indicator-guide{
        width: min(100%, 440px);
        max-height: calc(100vh - 16px);
    }
    .indicator-guide-hero{ height: 172px; }
    .indicator-guide-content{ padding: 0 14px 14px; }
    .indicator-guide h2{ font-size: 19px; }
    .indicator-trial-expired-stamp{ font-size: 15px; }
}

/* Заявка на новый индикатор. */
.indicator-request-overlay{
    position: fixed;
    inset: 0;
    z-index: 2070;
    padding: 16px;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.indicator-request{
    position: relative;
    width: min(520px, calc(100vw - 24px));
    max-height: min(820px, calc(100vh - 24px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    border: 1px solid #313131;
    border-radius: 8px;
    background: #141414;
    color: #ffffff;
    font-family: Inter, sans-serif;
    animation: premiumDialogIn .32s cubic-bezier(.2,.8,.2,1) both;
}
.indicator-request-close{
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,.7);
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
}
.indicator-request-close:hover{ background: #1e1e1e; }
.indicator-request-hero{
    position: relative;
    height: 180px;
    background-color: #0a0a0a;
    background-image: url('/imgs/create-indicator.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.indicator-request-hero::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20,20,20,0) 42%, #141414 100%);
    pointer-events: none;
}
.indicator-request-content{
    position: relative;
    z-index: 1;
    margin-top: -20px;
    padding: 0 18px 18px;
}
.indicator-request-badge{
    width: max-content;
    margin: 0 auto 8px;
    padding: 5px 9px;
    border: 1px solid #313131;
    border-radius: 8px;
    background: #1e1e1e;
    color: #a7a7a7;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}
.indicator-request-badge img{
    width: 14px;
    height: 14px;
    object-fit: contain;
}
.indicator-request h2{
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
}
.indicator-request-lead{
    margin: 0 auto 12px;
    max-width: 420px;
    color: #a7a7a7;
    font-size: 13px;
    text-align: center;
}
.indicator-request-copy{
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.indicator-request-copy > div{
    padding: 11px 12px;
    border: 1px solid #313131;
    border-radius: 8px;
    background: #1e1e1e;
}
.indicator-request-copy b{
    display: block;
    margin-bottom: 4px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
}
.indicator-request-copy p,
.indicator-request-moderation{
    margin: 0;
    color: #a7a7a7;
    font-size: 11px;
}
.indicator-request-moderation{
    margin-bottom: 12px;
    padding: 9px 11px;
    border-left: 2px solid #6798ff;
    border-radius: 0 8px 8px 0;
    background: #1e1e1e;
}
.indicator-request-form{
    display: grid;
    gap: 10px;
}
.indicator-request-form label{
    display: grid;
    gap: 6px;
}
.indicator-request-form label > span{
    color: #a7a7a7;
    font-size: 12px;
}
.indicator-request-form input,
.indicator-request-form textarea{
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #313131;
    border-radius: 8px;
    background: #0a0a0a;
    color: #ffffff;
    font: inherit;
    font-size: 13px;
    outline: none;
}
.indicator-request-form input{
    min-height: 42px;
    padding: 0 12px;
}
.indicator-request-form textarea{
    min-height: 112px;
    padding: 10px 12px;
    resize: vertical;
}
.indicator-request-form input:focus,
.indicator-request-form textarea:focus{ border-color: #6798ff; }
.indicator-request-submit{
    min-height: 42px;
    border: 0;
    border-radius: 8px;
    background: #ffffff;
    color: #0a0a0a;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.indicator-request-submit:hover{ background: #e9e9e9; }
.indicator-request-submit:disabled{ opacity: .62; cursor: wait; }
.indicator-request-note{
    margin-top: 10px;
    padding: 12px;
    border: 1px solid #313131;
    border-radius: 8px;
    background: #1e1e1e;
    color: #ffffff;
    font-size: 13px;
    text-align: center;
}
.indicator-request-note[data-status="success"]{ border-color: rgba(54,210,123,.38); }
.indicator-request-note[data-status="error"]{ border-color: rgba(255,93,114,.38); }
@media (max-width: 520px){
    .indicator-request-overlay{ padding: 8px; }
    .indicator-request{ width: 100%; max-height: calc(100vh - 16px); }
    .indicator-request-hero{ height: 145px; }
    .indicator-request-content{ padding: 0 13px 13px; }
    .indicator-request h2{ font-size: 19px; }
    .indicator-request-copy{ grid-template-columns: 1fr; }
}

.night-watch-guide .indicator-guide-hero{
    background-image: url(/imgs/alarm.png);
    background-position: center;
}
.night-watch-off-guide .indicator-guide-hero{
    background-image: url(/imgs/alarm-off.png);
}
.night-watch-guide .night-watch-badge{
    border-color: #313131;
    background: #1e1e1e;
    color: #ffffff;
}
.night-watch-note{
    margin: 0 0 12px;
    padding: 10px 12px;
    border-left: 2px solid #6798ff;
    border-radius: 0 8px 8px 0;
    background: #1e1e1e;
    color: #a7a7a7;
    font-size: 12px;
}
.night-watch-active .night-watch-button.is-active{
    background-color: #252525;
}

/* Alerts */
section.alerts{
    max-height: 100%;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: auto;
    box-sizing: border-box;
}

section.alerts .alerts-empty{
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7c7c7c;
    font-size: 13px;
    text-align: center;
}

section.alerts .alerts-item{
    flex: 0 0 auto;
    min-height: 56px;
    height: auto;
    padding: 8px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: #141414;
    cursor: pointer;
    box-sizing: border-box;
    overflow: visible;
}

section.alerts .alerts-item:hover{
    background: #1a1a1a;
}

section.alerts .alerts-item[data-new="1"]{
    background: #181818;
}

section.alerts .alerts-ico{
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: #1e1e1e;
}

section.alerts .alerts-ico > img{
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 50%;
}

section.alerts .alerts-ico > span{
    color: #6798ff;
    font-size: 16px;
    font-weight: 600;
}

section.alerts .alerts-user-photo.user-photo{
    float: none;
    width: 34px;
    height: 34px;
    --user-photo-ring: 2px;
    --user-photo-gap: 2px;
    --user-rank-badge-size: 0;
}

section.alerts .alerts-body{
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

section.alerts .alerts-head{
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

section.alerts .alerts-head b{
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

section.alerts .alerts-head time{
    flex: 0 0 auto;
    margin-left: auto;
    color: #858585;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

section.alerts .alerts-kind,
section.alerts .alerts-new,
section.alerts .alerts-timeframe{
    flex: 0 0 auto;
    height: 16px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 600;
}

section.alerts .alerts-kind.signal{ background: rgba(46,155,255,.18); color: #5cb6ff; }
section.alerts .alerts-kind.idea{ background: rgba(122,89,255,.2); color: #b9a6ff; }
section.alerts .alerts-kind.vip-idea{
    padding: 0 7px 0 20px;
    border: 1px solid rgba(245, 190, 77, .62);
    background: rgba(245, 190, 77, .10) url("/imgs/vipdm.png") 5px 50% / 12px 12px no-repeat;
    color: #f5c85b;
}
section.alerts .alerts-kind.rank{ background: rgba(255,196,61,.16); color: #ffcf5a; }
section.alerts .alerts-kind.social{ background: rgba(22,199,132,.16); color: #16c784; }
section.alerts .alerts-kind.rally{
    padding: 0 7px;
    border: 1px solid rgba(245, 190, 77, .55);
    background: rgba(245, 190, 77, .12);
    color: #f5c85b;
}
section.alerts .alerts-kind.admin{ background: rgba(234,54,79,.18); color: #ff6d7f; }
section.alerts .alerts-kind.system{ background: #1e1e1e; color: #a7a7a7; }

section.alerts .alerts-new{
    background: #ffffff;
    color: #050505;
}

section.alerts .alerts-timeframe{
    background: #1e1e1e;
    color: #a7a7a7;
}

section.alerts .alerts-item p{
    margin: 2px 0 0;
    overflow: hidden;
    color: #cfcfcf;
    font-size: 12px;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: normal;
    overflow-wrap: anywhere;
}

section.alerts .alerts-rally-banner{
    min-height: 94px;
    padding: 0;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(245, 190, 77, .32);
    background:
        linear-gradient(120deg, rgba(245, 190, 77, .12), rgba(12, 20, 18, .86) 54%, #111 100%),
        #141414;
}

section.alerts .alerts-rally-banner:hover{
    border-color: rgba(245, 190, 77, .52);
    background:
        linear-gradient(120deg, rgba(245, 190, 77, .16), rgba(12, 20, 18, .88) 54%, #141414 100%),
        #181818;
}

section.alerts .alerts-rally-art{
    width: 82px;
    height: 100%;
    min-height: 94px;
    background:
        linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.48)),
        url("/imgs/rally.png") 50% 50% / cover no-repeat;
}

section.alerts .alerts-rally-content{
    min-width: 0;
    padding: 10px;
}

section.alerts .alerts-rally-content p{
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

section.alerts .alerts-rally-meta{
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

section.alerts .alerts-rally-meta span{
    height: 18px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(245, 190, 77, .12);
    color: #f5c85b;
    font-size: 10px;
    font-weight: 700;
}

section.alerts .alerts-premium-idea{
    min-height: 56px;
    padding: 7px;
    border: 1px solid rgba(245, 190, 77, .34);
    background:
        linear-gradient(115deg, rgba(245, 190, 77, .11), rgba(20, 20, 20, .94) 42%),
        #141414;
}

section.alerts .alerts-premium-idea:hover{
    border-color: rgba(245, 190, 77, .55);
    background:
        linear-gradient(115deg, rgba(245, 190, 77, .15), rgba(24, 24, 24, .96) 42%),
        #181818;
}

section.alerts .alerts-premium-idea-ico{
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

section.alerts .alerts-premium-author.user-photo{
    float: none;
    width: 34px;
    height: 34px;
    --user-photo-ring: 2px;
    --user-photo-gap: 2px;
    --user-rank-badge-size: 0;
}

section.alerts .alerts-action{
    width: fit-content;
    height: 26px;
    margin-top: 8px;
    padding: 0 12px;
    border: 1px solid rgba(245, 190, 77, .58);
    border-radius: 8px;
    background: rgba(245, 190, 77, .12);
    color: #f5c85b;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

section.alerts .alerts-action:hover{
    background: rgba(245, 190, 77, .18);
    border-color: rgba(245, 190, 77, .8);
}

.alert-toasts{
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 120;
    width: min(320px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    pointer-events: none;
}

.alert-toast-clear{
    align-self: flex-end;
    height: 28px;
    padding: 0 10px;
    border: 1px solid #313131;
    border-radius: 8px;
    background: #141414;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    pointer-events: auto;
}

.alert-toast-list{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.alert-toast{
    min-height: 58px;
    padding: 10px;
    display: grid;
    grid-template-columns: 34px 1fr 28px;
    align-items: center;
    gap: 10px;
    border: 1px solid #313131;
    border-radius: 8px;
    background: #141414;
    color: #ffffff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
    cursor: pointer;
    pointer-events: auto;
}

.alert-toast:hover{
    border-color: #454545;
    background: #1e1e1e;
}

.alert-toast.idea-alert,
.alert-toast.notification-premium{
    border-color: rgba(103, 152, 255, .45);
}

.alert-toast.premium-idea-alert,
.alert-toast.notification-vip-idea{
    border-color: rgba(245, 190, 77, .62);
}

.alert-toast.notification-rally{
    border-color: rgba(245, 190, 77, .58);
    background:
        linear-gradient(110deg, rgba(245, 190, 77, .10), rgba(20, 20, 20, .96) 48%),
        #141414;
}

.alert-toast.notification-rally .alert-toast-ico img{
    border-radius: 8px;
}

.alert-toast .idea-tag{
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(103, 152, 255, .14);
    color: #6798ff;
    font-size: 10px;
    font-weight: 600;
    vertical-align: middle;
}

.alert-toast .idea-tag.vip-idea{
    padding-left: 20px;
    border: 1px solid rgba(245, 190, 77, .62);
    background: rgba(245, 190, 77, .10) url("/imgs/vipdm.png") 5px 50% / 12px 12px no-repeat;
    color: #f5c85b;
}

.alert-toast > img,
.alert-toast-ico img,
.alert-toast-ico .user-photo{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.alert-toast-ico{
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.alert-toast-ico span{
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #1e1e1e;
    color: #6798ff;
    font-size: 16px;
    font-weight: 700;
}

.alert-toast > div:not(.alert-toast-ico){
    min-width: 0;
}

.alert-toast strong{
    display: block;
    overflow: hidden;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alert-toast > div:not(.alert-toast-ico) > span{
    display: block;
    overflow: hidden;
    color: #a7a7a7;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alert-toast > button{
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background-color: #1e1e1e;
    background-image: url(/imgs/close.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 14px;
    cursor: pointer;
}

.alert-toast > button:hover{
    background-color: #313131;
}

/* User profile */
.side-modals:has(#side-user-stats){
    width: min(300px, 100vw);
}

.side-modals #side-user-stats{
    max-width: 300px;
    border-right: 0;
    background: #050505;
    color: #ffffff;
    font-family: Inter, sans-serif;
}

.side-modals #side-user-stats .body{
    height: 100vh;
    padding: 0 8px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #050505;
}

.side-modals #side-user-stats .body::-webkit-scrollbar{ width: 4px; }
.side-modals #side-user-stats .body::-webkit-scrollbar-thumb{ background: #313131; border-radius: 999px; }



.side-modals #side-user-stats .us-top{
    display: flex;
    flex-direction: row;
}

.side-modals #side-user-stats .us-top > div{
    flex: 0 0 auto;
    padding: 16px 0 0;
}

.side-modals #side-user-stats .us-top > div.us-main{
    flex: 1 1 auto;
}


.side-modals #side-user-stats .us-title{
    min-width: 0;
    padding: 0;
    background: transparent;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

.side-modals #side-user-stats .us-actions{
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

.side-modals #side-user-stats .us-back,
.side-modals #side-user-stats .us-edit,
.side-modals #side-user-stats .us-language,
.side-modals #side-user-stats .us-qr-login,
.side-modals #side-user-stats .us-mobile-logout,
.side-modals #side-user-stats .us-privacy,
.side-modals #side-user-stats .us-share,
.side-modals #side-user-stats .us-prmium,
.side-modals #side-user-stats .us-menu{
    appearance: none;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background-color: inherit;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    cursor: pointer;
}

.side-modals #side-user-stats .us-back{ background-image: url(/imgs/icons/back.png); background-size: 16px; }
.side-modals #side-user-stats .us-edit{ background-image: url(/imgs/edit.svg); }
.side-modals #side-user-stats .us-language{ background-image: url(/imgs/icons/global.png); }
.side-modals #side-user-stats .us-qr-login{ background-image: url(/imgs/icons/qr-login.svg); }
.side-modals #side-user-stats .us-mobile-logout{ background-image: url(/imgs/icons/logout.png); }
.side-modals #side-user-stats .us-privacy{ background-image: url(/imgs/icons/padlock.png); }
.side-modals #side-user-stats .us-share{ background-image: url(/imgs/tools/sharew.svg); }
.side-modals #side-user-stats .us-menu{ background-image: url(/imgs/icons/option.png); position: relative; }
.side-modals #side-user-stats .us-prmium{ background-image: url(/imgs/icons/diamond.png); }

.side-modals #side-user-stats .us-qr-login,
.side-modals #side-user-stats .us-mobile-logout,
.side-modals #side-user-stats .us-privacy{
    flex-basis: 44px;
    width: 44px;
    height: 44px;
}

.side-modals #side-user-stats .us-back:hover,
.side-modals #side-user-stats .us-edit:hover,
.side-modals #side-user-stats .us-language:hover,
.side-modals #side-user-stats .us-qr-login:hover,
.side-modals #side-user-stats .us-mobile-logout:hover,
.side-modals #side-user-stats .us-privacy:hover,
.side-modals #side-user-stats .us-share:hover,
.side-modals #side-user-stats .us-prmium:hover,
.side-modals #side-user-stats .us-menu:hover{
    background-color: #1e1e1e;
}

.profile-qr-modal{
    z-index: 2200;
}

.profile-qr-modal > .profile-qr-card{
    width: min(430px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 20px;
}

.profile-qr-head{
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.profile-qr-head > div{
    flex: 1 1 auto;
    min-width: 0;
}

.profile-qr-head h2{
    margin: 0;
    color: #ffffff;
    font-size: 18px;
    font-weight: 650;
}

.profile-qr-head p{
    margin: 8px 0 0;
    color: #a7a7a7;
    font-size: 13px;
}

.profile-qr-close{
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #1e1e1e url(/imgs/close.svg) no-repeat center / 13px;
    cursor: pointer;
}

.profile-qr-close:hover,
.profile-qr-close:focus-visible{
    background-color: #313131;
}

.profile-qr-code{
    position: relative;
    width: min(280px, 72vw);
    aspect-ratio: 1;
    margin: 18px auto 8px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 12px;
    background: #ffffff;
}

.profile-qr-code[hidden],
.profile-qr-image[hidden],
.profile-qr-loader[hidden]{
    display: none;
}

.profile-qr-image{
    width: 100%;
    height: 100%;
    display: block;
}

.profile-qr-loader{
    width: 34px;
    height: 34px;
    border: 3px solid #d9d9d9;
    border-top-color: #111111;
    border-radius: 50%;
    animation: profileQrSpin .75s linear infinite;
}

.profile-qr-countdown{
    min-height: 18px;
    color: #7c7c7c;
    font-size: 12px;
    text-align: center;
}

.profile-qr-device{
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #313131;
    border-radius: 8px;
    background: #0a0a0a;
}

.profile-qr-device[hidden]{
    display: none;
}

.profile-qr-device-icon{
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #1e1e1e url(/imgs/icons/qr-login.svg) no-repeat center / 22px;
}

.profile-qr-device > div{
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.profile-qr-device b{
    overflow: hidden;
    color: #ffffff;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-qr-device span{
    color: #a7a7a7;
    font-size: 11px;
}

.profile-qr-status{
    min-height: 18px;
    margin: 12px 0 0;
    color: #a7a7a7;
    font-size: 12px;
    text-align: center;
}

.profile-qr-status[data-state="attention"]{ color: #ffe978; }
.profile-qr-status[data-state="success"]{ color: #16c784; }
.profile-qr-status[data-state="error"]{ color: #ff5c72; }

.profile-qr-actions{
    position: sticky;
    bottom: 0;
    margin-top: 14px;
    padding-top: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    background: #141414;
    z-index: 1;
}

.profile-qr-actions button{
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid #313131;
    border-radius: 8px;
    background: #1e1e1e;
    color: #ffffff;
    font: 600 13px Inter, sans-serif;
    cursor: pointer;
}

.profile-qr-actions .profile-qr-approve,
.profile-qr-actions .profile-qr-retry{
    border-color: #ffffff;
    background: #ffffff;
    color: #0a0a0a;
}

.profile-qr-actions button:hover:not(:disabled){
    border-color: #454545;
    background: #313131;
    color: #ffffff;
}

.profile-qr-actions button:disabled{
    cursor: wait;
    opacity: .55;
}

@keyframes profileQrSpin{
    to{ transform: rotate(360deg); }
}

@media (max-width: 520px){
    .profile-qr-modal > .profile-qr-card{
        padding: 16px;
    }

    .profile-qr-code{
        width: min(250px, 70vw);
    }

    .profile-qr-actions{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-qr-actions button{
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce){
    .profile-qr-loader{ animation: none; }
}

.profile-language-modal > div{
    width: min(360px, calc(100vw - 32px));
    padding: 16px;
}

.profile-language-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.profile-language-head h2{
    margin: 0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
}

.profile-language-close{
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #1e1e1e url(/imgs/close.svg) no-repeat center / 13px;
    cursor: pointer;
}

.profile-language-close:hover{
    background-color: #313131;
}

.profile-language-options{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 16px;
    padding: 6px;
    border: 1px solid #313131;
    border-radius: 8px;
    background: #141414;
    max-height: min(420px, calc(100vh - 150px));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #454545 transparent;
}

.profile-language-options::-webkit-scrollbar{ width: 4px; }
.profile-language-options::-webkit-scrollbar-thumb{ background: #454545; border-radius: 999px; }

.profile-language-option{
    width: 100%;
    min-height: 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #a7a7a7;
    text-align: left;
    cursor: pointer;
}

.profile-language-option:hover,
.profile-language-option.is-active{
    background: #1e1e1e;
    color: #ffffff;
}

.profile-language-option > span{
    color: #7c7c7c;
    font-size: 11px;
    font-weight: 600;
}

.profile-language-option > b{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
}

.profile-language-option.is-active > span{
    color: #6798ff;
}

.profile-language-option:disabled{
    cursor: default;
    opacity: .72;
}

.side-modals #side-user-stats .us-profile{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: -8px;
}

.side-modals #side-user-stats .us-profile-hero{
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.side-modals #side-user-stats .us-head{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0px 4px 0px;
}

.side-modals #side-user-stats .us-avatar.user-photo{
    --user-photo-ring: 2px;
    --user-photo-gap: 3px;
    --user-rank-badge-size: 20px;
    --user-rank-badge-offset: -4px;
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0;
    padding: 0;
    border: var(--user-photo-ring) solid transparent;
    border-radius: 50%;
    background:
        linear-gradient(#141414, #141414) padding-box,
        var(--user-photo-ring-bg) border-box;
    box-shadow: none;
    float: none;
}

.side-modals #side-user-stats .us-avatar.user-photo::before{ display: none; }
.side-modals #side-user-stats .us-avatar.user-photo > img.user-rank-badge{ display: none; }

.side-modals #side-user-stats .us-avatar.user-photo > img.user-avatar-img,
.side-modals #side-user-stats .us-avatar.user-photo::after{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: calc(100% - var(--user-photo-gap) - var(--user-photo-gap));
    height: calc(100% - var(--user-photo-gap) - var(--user-photo-gap));
    margin: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px !important;
}

.side-modals #side-user-stats .us-avatar.user-photo > img.user-avatar-img{
    object-fit: cover;
}

.side-modals #side-user-stats .us-avatar.user-photo::after{
    z-index: 3;
    font-size: 18px;
    font-weight: 500;
}

.side-modals #side-user-stats .us-identity{
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
}
.side-modals #side-user-stats .us-verified{
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232E9BFF' d='M12 1l2.6 2.1 3.3-.4 1.3 3.1 3.1 1.3-.4 3.3L23 14l-2.1 2.6.4 3.3-3.1 1.3-1.3 3.1-3.3-.4L12 23l-2.6-2.1-3.3.4-1.3-3.1L1.7 16.6 2.1 14 0 11.4l2.1-2.6-.4-3.3 3.1-1.3L6.1 1.6l3.3.4z'/%3E%3Cpath fill='%23fff' d='M10.6 14.6l-2.2-2.2-1.1 1.1 3.3 3.3 6-6-1.1-1.1z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.side-modals #side-user-stats .us-profile-tags,
.side-modals #side-user-stats .us-subscribes{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.side-modals #side-user-stats .us-subscribes{ margin-top: 1px; }

.side-modals #side-user-stats .us-rank,
.side-modals #side-user-stats .us-premium,
.side-modals #side-user-stats .us-subscribes-tag{
    min-height: 20px;
    max-width: 100%;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #a7a7a7;
    font-size: 10px;
    font-weight: 500;
}


.side-modals #side-user-stats .us-rank{ color: #ffffff; }
.side-modals #side-user-stats .us-rank > img{ width: 15px; height: 15px; }
.side-modals #side-user-stats .us-premium{
    min-height: 20px;
    margin-top: 2px;
    padding: 2px 7px;
    border: 1px solid rgba(103, 152, 255, .28);
    border-radius: 999px;
    background: rgba(103, 152, 255, .08);
}
.side-modals #side-user-stats .us-premium-tag{ padding: 0; background: none; color: #6798ff; }
.side-modals #side-user-stats .us-premium-date{ display: inline; color: #a7a7a7; }
.side-modals #side-user-stats .us-premium-icon{
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
    object-fit: contain;
}
.side-modals #side-user-stats .us-subscribes-tag{ 
    color: #8e8e8e; background-image: none; 
    background-image: url(/imgs/icons/followers.png);
    background-size: 12px;
    background-position: top 50% left 0;
    background-repeat: no-repeat;
    padding-left: 18px;
}
.side-modals #side-user-stats .us-subscribes-tag b{ color: #ffffff; }

.side-modals #side-user-stats .us-profile-access{
    display: block;
    padding: 0 4px 6px;
    background: transparent;
}

.side-modals #side-user-stats .us-profile-access > div:first-child{ display: none; }
.side-modals #side-user-stats .us-profile-access > div{
    min-width: 0;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 0;
    border-radius: 8px;
    background: #101010;
}
.side-modals #side-user-stats .us-profile-access span{
    display: block;
    margin: 0;
    color: #777777;
    font-size: 10px;
    font-weight: 400;
}
.side-modals #side-user-stats .us-profile-access b{
    flex: 1;
    overflow: hidden;
    color: #dcdcdc;
    font-size: 10px;
    font-weight: 500;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.side-modals #side-user-stats .us-params{
    padding: 10px 0;
    border: 0;
    border-radius: 0;
    background: #101010;
    border-radius: 8px;
    display: flex;
}

.side-modals #side-user-stats .us-param{
    min-width: 0;
    padding: 0 8px 0 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 3px;
    border: 0;
    color: #777777;
    white-space: normal;
    font-size: 8px;
    flex: 1;

}

.side-modals #side-user-stats .us-param:nth-child(1){
    background-image: url(/imgs/icons/r30.png);
    background-position: top 50% left 8px;
    background-repeat: no-repeat;
    background-size: 18px;
}

.side-modals #side-user-stats .us-param:nth-child(2){
    background-image: url(/imgs/icons/wr.png);
    background-position: top 50% left 6px;
    background-repeat: no-repeat;
    background-size: 18px;
}

.side-modals #side-user-stats .us-param:nth-child(3){
    background-image: url(/imgs/icons/wl.png);
    background-position: top 50% left 6px;
    background-repeat: no-repeat;
    background-size: 18px;
}

.side-modals #side-user-stats .us-param:nth-child(2){
    border-left: 1px solid #27292C;
    border-right: 1px solid #27292C;
}
.side-modals #side-user-stats .us-param::before{ display: none; }
.side-modals #side-user-stats .us-param > div{
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #777777;
    font-size: 9px;
    font-weight: 400;
}
.side-modals #side-user-stats .us-param span{
    display: block;
    margin: 0;
    overflow: hidden;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.side-modals #side-user-stats span[data-positive="true"]{ color: #21c796; }
.side-modals #side-user-stats span[data-positive="false"]{ color: #ff5c72; }

.side-modals #side-user-stats .us-level,
.side-modals #side-user-stats .us-chart,
.side-modals #side-user-stats .us-tabs,
.side-modals #side-user-stats .us-live-composer,
.side-modals #side-user-stats .news-card,
.side-modals #side-user-stats .us-post,
.side-modals #side-user-stats .us-ideas-block > div{
    border: 0;
    border-radius: 8px;
    background: #101010;
}

.side-modals #side-user-stats .us-level{
    display: flex;
    flex-direction: column;
    gap: 8px;
    background-color: inherit;
    padding: 0 36px 10px;
    
}
.side-modals #side-user-stats .us-level .us-progress-line{
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 8px;
}
.side-modals #side-user-stats .us-level .us-progress-center{
    min-width: 0;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    margin-top: -1px;
    padding-top: 16px;
}
.side-modals #side-user-stats .us-level .us-level-node{
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
}
.side-modals #side-user-stats .us-level .us-level-node img{
    width: 42px;
    height: 42px;
    object-fit: contain;
}
.side-modals #side-user-stats .us-level .us-level-node span{
    max-width: 74px;
    overflow: hidden;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--rank-pill-bg, rgba(238, 231, 215, .14));
}

.side-modals #side-user-stats .us-level .us-level-node span[data-rank="1"]{ color: #22BBFE; --rank-pill-bg: rgba(34,187,254,.13); }
.side-modals #side-user-stats .us-level .us-level-node span[data-rank="2"]{ color: #EEE7D7; --rank-pill-bg: rgba(238,231,215,.14); }
.side-modals #side-user-stats .us-level .us-level-node span[data-rank="3"]{ color: #EF0F27; --rank-pill-bg: rgba(239,15,39,.14); }
.side-modals #side-user-stats .us-level .us-level-node span[data-rank="4"]{ color: #FFDB3A; --rank-pill-bg: rgba(255,219,58,.14); }
.side-modals #side-user-stats .us-level .us-level-node span[data-rank="5"]{ color: #EE9902; --rank-pill-bg: rgba(238,153,2,.16); }
.side-modals #side-user-stats .us-level .us-level-node span[data-rank="6"]{ color: #0074B1; --rank-pill-bg: rgba(203,238,255,.88); }
.side-modals #side-user-stats .us-level .us-level-node span[data-rank="7"]{ color: #AC5D03; --rank-pill-bg: rgba(255,229,194,.86); }
.side-modals #side-user-stats .us-level .us-level-next img{ 
    width: 30px;
    height: 30px;
 }
.side-modals #side-user-stats .us-level .us-level-next span{
    font-weight: 400;
}
.side-modals #side-user-stats .us-level .us-progress-line .progress{
    --progress: 0%;
    position: relative;
    width: 100%;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: #242424;
}
.side-modals #side-user-stats .us-level .us-progress-line .progress::after{ display: none; }
.side-modals #side-user-stats .us-level .us-progress-line .progress-fill{
    display: block;
    width: var(--progress);
    min-width: 8px;
    height: 100%;
    border-radius: inherit;
    background: #6798ff;
}
.side-modals #side-user-stats .us-level .us-streak{
    position: relative;
    align-self: center;
    color: #a7a7a7;
    font-size: 10px;
    font-weight: 500;
    cursor: help;
    white-space: nowrap;
}
@keyframes us-streak-tip-pop{
    from{ opacity: 0; transform: translateX(-50%) translateY(25px) scale(.96); }
    to{ opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.side-modals #side-user-stats .us-level .us-streak[data-tip]:hover::after{
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 16px);
    transform: translateX(-50%);
    z-index: 12;
    width: 180px;
    padding: 9px 11px;
    border: 0;
    border-radius: 8px;
    background: #383838;
    color: #ffffff;
    font-size: 10px;
    white-space: normal;
    pointer-events: none;
    transform-origin: 50% 100%;
    animation: us-streak-tip-pop .16s cubic-bezier(.2, .8, .2, 1) both;
}
.side-modals #side-user-stats .us-level .us-streak[data-tip]:hover::before{ display: none; }

.side-modals #side-user-stats .us-chart{ padding: 10px 10px 8px; }
.side-modals #side-user-stats .us-chart .us-chart-body{
    position: relative;
    height: 104px;
    margin-top: 8px;
}
.side-modals #side-user-stats .us-chart .us-chart-canvas{
    width: 100%;
    height: 100%;
    display: block;
    background: transparent;
    touch-action: none;
    user-select: none;
}
.side-modals #side-user-stats .us-chart .us-chart-empty{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7c7c7c;
    font-size: 12px;
}

.side-modals #side-user-stats .us-tabs{
    display: grid;
    grid-template-columns: 2fr 2fr 3fr;
    gap: 3px;
    padding: 3px;
}
.side-modals #side-user-stats .us-tabs > div{
    min-height: 30px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 6px;
    color: #9a9a9a;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
}
.side-modals #side-user-stats .us-tabs > div::before{ display: none; }
.side-modals #side-user-stats .us-tabs > div.selected{
    background: #383838;
    color: #ffffff;
}
.side-modals #side-user-stats .us-tabs > .us-tabs-following b{
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    background: #1e1e1e;
    color: #a7a7a7;
    font-size: 10px;
    font-weight: 600;
}


.side-modals #side-user-stats .us-live-block,
.side-modals #side-user-stats .us-ideas-block,
.side-modals #side-user-stats .us-following-block,
.side-modals #side-user-stats .us-live-posts{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.side-modals #side-user-stats .us-live-composer{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 0;
    padding: 9px;
}
.side-modals #side-user-stats .us-live-input{
    min-height: 50px;
    max-height: 160px;
    padding: 6px;
    overflow-y: auto;
    outline: none;
    color: #ffffff;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-word;
}
.side-modals #side-user-stats .us-live-input:empty::before{
    content: attr(data-placeholder);
    color: #7c7c7c;
}
.side-modals #side-user-stats .us-live-bar{
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid #252525;
}
.side-modals #side-user-stats .us-live-emoji,
.side-modals #side-user-stats .us-live-send{
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background-color: #1e1e1e;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
}
.side-modals #side-user-stats .us-live-emoji,
.side-modals #side-user-stats .us-live-send{ cursor: pointer; }
.side-modals #side-user-stats .us-live-emoji{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9ACB8' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cline x1='9' y1='9' x2='9.01' y2='9'/%3E%3Cline x1='15' y1='9' x2='15.01' y2='9'/%3E%3C/svg%3E");
}
.side-modals #side-user-stats .us-live-send{
    margin-left: auto;
    background-color: #ffffff;
    background-size: 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23050505'%3E%3Cpath d='M3 11l18-8-8 18-2-7-8-3z'/%3E%3C/svg%3E");
}
.side-modals #side-user-stats .us-live-send:hover{ background-color: #e8e8e8; }
.side-modals #side-user-stats .us-live-send:disabled{
    cursor: wait;
    opacity: .55;
}
.side-modals #side-user-stats .us-live-composer.is-moderating .us-live-input{
    opacity: .72;
}
.side-modals #side-user-stats .us-live-emoji:hover{ background-color: #252525; }
.side-modals #side-user-stats .us-live-emojis{
    display: none;
    position: absolute;
    left: 10px;
    bottom: 48px;
    z-index: 3;
    width: calc(100% - 20px);
    padding: 6px;
    border: 0;
    border-radius: 8px;
    background: #141414;
}
.side-modals #side-user-stats .us-live-emojis{
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
}
.side-modals #side-user-stats .us-live-composer.emojis-open .us-live-emojis{ display: grid; }
.side-modals #side-user-stats .us-live-emojis > span{
    padding: 3px 0;
    border-radius: 6px;
    font-size: 18px;
    text-align: center;
    cursor: pointer;
}
.side-modals #side-user-stats .us-live-emojis > span:hover{ background-color: #222633; }

.side-modals #side-user-stats .us-post{ padding: 10px; }
.side-modals #side-user-stats .us-post-head{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.side-modals #side-user-stats .us-post-head > img{
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
}
.side-modals #side-user-stats .us-post-del{
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-left: auto;
    border: 0;
    border-radius: 6px;
    background: transparent center / 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EA364F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14'/%3E%3C/svg%3E");
    cursor: pointer;
}
.side-modals #side-user-stats .us-post-del:hover{ background-color: rgba(234,54,79,.15); }
.side-modals #side-user-stats .us-post-name{ color: #ffffff; font-size: 12px; font-weight: 600; }
.side-modals #side-user-stats .us-post-date{ color: #8e8e8e; font-size: 10px; }
.side-modals #side-user-stats .us-post-body,
.side-modals #side-user-stats .news-main-text,
.side-modals #side-user-stats .news-text{
    color: #d7d7d7;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
}
.side-modals #side-user-stats .us-post-foot{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}
.side-modals #side-user-stats .us-post-views{
    padding-left: 18px;
    background: left center / 13px no-repeat url(/imgs/view.svg);
    color: #8e8e8e;
    font-size: 11px;
}
.side-modals #side-user-stats .us-ideas-block .idea-card .favourite{ display: none; }
.side-modals #side-user-stats .news-card:hover,
.side-modals #side-user-stats .us-ideas-block > div:hover{ background: #1a1a1a; }
.side-modals #side-user-stats .us-ideas-block > .us-ideas-empty,
.side-modals #side-user-stats .us-ideas-block > .us-ideas-empty:hover{
    min-height: 72px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: transparent;
    color: #7c7c7c;
    font-size: 12px;
    text-align: center;
}

.side-modals #side-user-stats .us-following-row{
    min-height: 54px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 8px;
    border-radius: 8px;
    background: #101010;
    cursor: pointer;
}
.side-modals #side-user-stats .us-following-row:hover{ background: #171717; }
.side-modals #side-user-stats .us-following-photo.user-photo{
    float: none;
    width: 36px;
    height: 36px;
    --user-photo-ring: 2px;
    --user-photo-gap: 2px;
    --user-rank-badge-size: 16px;
    --user-rank-badge-offset: -3px;
}
.side-modals #side-user-stats .us-following-photo.user-photo > img.user-rank-badge{
    top: var(--user-rank-badge-offset);
    right: var(--user-rank-badge-offset);
    bottom: auto;
}
.side-modals #side-user-stats .us-following-main{ min-width: 0; }
.side-modals #side-user-stats .us-following-name{
    overflow: hidden;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.side-modals #side-user-stats .us-following-status{
    margin-top: 2px;
    color: #8f8f8f;
    font-size: 10px;
}
.side-modals #side-user-stats .us-following-rating{ min-width: 48px; text-align: right; }
.side-modals #side-user-stats .us-following-rating span{
    display: block;
    color: #7c7c7c;
    font-size: 9px;
}
.side-modals #side-user-stats .us-following-rating b{
    display: block;
    color: #ff4f66;
    font-size: 12px;
    font-weight: 700;
}
.side-modals #side-user-stats .us-following-rating[data-positive="true"] b{ color: #32ff00; }
.side-modals #side-user-stats .us-following-empty{
    padding: 24px 10px;
    color: #7c7c7c;
    font-size: 12px;
    text-align: center;
}

.us-context-menu{
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    min-width: 128px;
    padding: 4px;
    border: 0;
    border-radius: 8px;
    background: #141414;
    box-shadow: none;
}
.us-context-menu button{
    width: 100%;
    padding: 8px 9px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #a7a7a7;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}
.us-context-menu button:hover{ background: #1e1e1e; color: #ffffff; }

.user-report-modal > div{
    border: 0;
    border-radius: 8px;
    background: #101010;
    box-shadow: none;
}
.user-report-modal > div > h2{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
    color: #fafafc;
    font-size: 16px;
    font-weight: 500;
}
.user-report-modal > div > h2 > .close{
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background-color: #1d1d1f;
    background-image: url(/imgs/close.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 14px;
    cursor: pointer;
}
.user-report-modal > div > h2 > .close:hover{ background-color: #29292d; }
.user-report-modal p{ color: #a7a7a7; font-size: 12px; }
.user-report-modal label{
    display: block;
    margin-top: 12px;
    color: #8e8e8e;
    font-size: 11px;
    font-weight: 400;
}
.user-report-modal select,
.user-report-modal textarea{
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    border: 0;
    border-radius: 8px;
    outline: none;
    background: #191919;
    color: #ffffff;
    font-size: 12px;
}
.user-report-modal select{ height: 38px; padding: 0 10px; }
.user-report-modal textarea{ min-height: 110px; padding: 10px; resize: vertical; }
.user-report-status{
    display: grid;
    gap: 8px;
    margin: 14px 0;
}
.user-report-status > div{
    padding: 10px;
    border: 0;
    border-radius: 8px;
    background: #191919;
}
.user-report-status span{
    display: block;
    margin-bottom: 4px;
    color: #8e8e8e;
    font-size: 10px;
}
.user-report-status b,
.user-report-status p{
    margin: 0;
    color: #ffffff;
    font-size: 13px;
}
.user-report-actions{
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}
.user-report-actions button{
    padding: 9px 14px;
    border: 0;
    border-radius: 8px;
    background: #1e1e1e;
    color: #d7d7d7;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}
.user-report-actions .user-report-send{ background: #ffffff; color: #050505; }
.user-report-actions .user-report-cancel{ background: #1e1e1e; color: #d7d7d7; }
.user-report-actions button:disabled{ opacity: .6; cursor: default; }

@media (max-width: 330px){
    .side-modals #side-user-stats .us-head{
        grid-template-columns: 52px minmax(0, 1fr);
    }
    .side-modals #side-user-stats .us-avatar.user-photo{
        width: 52px;
        height: 52px;
    }
}


/* ===== Окно оплаты Premium ===== */
.pay-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2100;
    padding: 16px;
}
.pay{
    position: relative;
    width: min(440px, 96vw);
    max-height: 94vh;
    overflow-y: auto;
    background: #141414;
    border: 1px solid #313131;
    border-radius: 16px;
    padding-bottom: 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    transform-origin: center center;
    will-change: transform;
    animation: premiumDialogIn .32s cubic-bezier(.2,.8,.2,1) both;
}
.pay-close{
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px; height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.58);
    color: #ffffff;
    font-size: 15px;
    cursor: pointer;
    z-index: 2;
}
.pay-close:hover{ background: #1e1e1e; }
.pay-hero{
    position: relative;
    overflow: hidden;
    height: 150px;
    border-radius: 16px 16px 0 0;
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
}
.pay-hero::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 74px;
    background: linear-gradient(180deg, rgba(20,20,20,0) 0%, rgba(20,20,20,0.74) 62%, #141414 100%);
    pointer-events: none;
}
.pay .pay-hero{ background-image: url(/imgs/usdt-bg.png); }

.pay-title{ font-size: 18px; font-weight: 800; color: #fff; margin: 14px 16px 12px; }

.pay-pane{ margin: 0 16px; }

.pay-box{
    background: #1e1e1e;
    border: 1px solid #313131;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
    text-align: left;
}
.pay-info{
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #1e1e1e;
    border: 1px solid #313131;
    border-radius: 12px;
    padding: 11px 12px;
    text-align: left;
    font-size: 12px;
    color: #a7a7a7;
}
.pay-info b{ color: #fff; }
.pay-info-ico{
    flex: 0 0 22px; width: 22px; height: 22px; border-radius: 7px;
    background: rgba(103,152,255,0.14);
    background-repeat: no-repeat; background-position: center; background-size: 14px;
}
.pay-info-ico.info{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236798ff' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E"); }

.pay-wallet-label{ text-align: left; font-size: 12px; color: #a7a7a7; margin-bottom: 4px; }
.pay-wallet{
    display: flex; align-items: center; gap: 10px;
    background: #0a0a0a; border: 1px solid #313131; border-radius: 12px;
    padding: 10px 12px;
}
.pay-wallet-addr{
    flex: 1 1 auto; text-align: left;
    font-family: 'Consolas', monospace;
    font-size: 13px; font-weight: 600; color: #fff;
    letter-spacing: .2px; word-break: break-all;
}
.pay-copy{
    flex: 0 0 36px; width: 36px; height: 36px;
    border: 1px solid #6798ff; border-radius: 9px;
    background-color: rgba(103,152,255,0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236798ff' stroke-width='2'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 18px;
    cursor: pointer;
}
.pay-copy.copied{ background-color: rgba(103,152,255,0.26); }

.pay-agreement{ display: inline-block; margin: 10px 16px 0; color: #6798ff; font-size: 12px; text-decoration: none; text-align: left; }
.pay-agree-note{ margin: 2px 16px 0; color: #7c7c7c; font-size: 11px; text-align: left; }

.pay-btn{
    margin: 0 16px;
    border: none; border-radius: 12px;
    background: #ffffff;
    color: #000000; font-size: 14px; font-weight: 700;
    padding: 13px; cursor: pointer;
}
.pay-btn:hover{ background: #e9e9e9; }
.pay-btn:disabled{ opacity: .65; cursor: wait; }
/* --- Шаги USDT --- */
.pay-step{ display: flex; flex-direction: column; gap: 10px; }
.pay-step[hidden]{ display: none; }
.pay-step .pay-btn{ margin: 0; }

/* Выпадающий список сети. */
.pay-netdrop{ position: relative; }
.pay-netdrop-btn{
    width: 100%;
    display: flex; align-items: center; gap: 10px;
    background: #0a0a0a; border: 1.5px solid #313131; border-radius: 12px;
    padding: 11px 12px; cursor: pointer;
    color: #fff; font-size: 13px; font-weight: 600;
}
.pay-netdrop-btn:hover{ border-color: #6798ff; }
.pay-netdrop-ico{
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 50%;
    object-fit: contain;
}
.pay-netdrop-val{ flex: 1 1 auto; text-align: left; }
.pay-netdrop-arrow{ color: #a7a7a7; }
.pay-netdrop-list{
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: #1e1e1e;
    border: 1px solid #313131;
    border-radius: 12px;
    padding: 6px;
    z-index: 5;
    display: flex; flex-direction: column; gap: 2px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.5);
}
.pay-netdrop-list[hidden]{ display: none; }
.pay-netdrop-list button{
    display: flex;
    align-items: center;
    gap: 10px;
    border: none; background: transparent;
    color: #a7a7a7; font-size: 14px; font-weight: 600;
    text-align: left; padding: 11px 12px;
    border-radius: 9px; cursor: pointer;
}
.pay-netdrop-list button span{ flex: 1 1 auto; }
.pay-netdrop-list button:hover{ background: #262626; }
.pay-netdrop-list button[data-selected]{ color: #fff; background: rgba(103,152,255,0.13); }

/* Ожидание оплаты. */
.pay-status{
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    padding: 2px 2px 0;
}
.pay-status b{ color: #6798ff; }
.pay-net-label{ color: #a7a7a7; font-size: 12px; font-weight: 500; }

/* Срок оплаты (вместо таймера). */
.pay-deadline{
    text-align: left;
    font-size: 12px;
    color: #a7a7a7;
    padding: 0 2px;
}
.pay-deadline b{ color: #fff; font-weight: 700; }

/* Предупреждение о сети. */
.pay-warn{
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: rgba(240,168,36,0.07);
    border: 1px solid rgba(240,168,36,0.35);
    border-radius: 12px;
    padding: 10px 12px;
    text-align: left;
    font-size: 12px;
    color: #d9c9a3;
}
.pay-warn b{ color: #f0a824; }
.pay-warn-ico{
    flex: 0 0 18px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: rgba(240,168,36,0.18);
    color: #f0a824;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.pay-actions{ display: flex; gap: 8px; margin-top: 2px; }
.pay-actions .pay-btn{ flex: 1 1 0; padding: 12px; font-size: 13px; }
.pay-btn-secondary{
    flex: 1 1 0;
    border: 1px solid #313131;
    border-radius: 12px;
    background: transparent;
    color: #a7a7a7;
    font-size: 13px;
    font-weight: 600;
    padding: 12px;
    cursor: pointer;
}
.pay-btn-secondary:hover{ color: #fff; border-color: #6798ff; }

.pay-check-note{
    font-size: 13px;
    color: #f0a824;
    text-align: left;
    padding: 2px 2px;
}

/* Оплачено. */
.pay-step-paid{ align-items: center; padding: 10px 0 4px; }
.pay-paid-ico{
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(103,152,255,0.14);
    color: #6798ff;
    font-size: 32px;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.pay-paid-title{ font-size: 20px; font-weight: 800; color: #fff; }
.pay-paid-sub{ font-size: 13px; color: #a7a7a7; }
.pay-step-paid .pay-btn{ width: 100%; margin: 6px 0 0; }