/* ==========================================================================
   Rust Bans — theme "rb_v2" (Corroded Metal)
   Global design system + shared chrome (nav, footer, hero, modals, forms).
   Page-specific tool widgets keep their own embedded styles; this sheet
   supplies the site-wide look they sit inside.
   ========================================================================== */

@font-face{font-family:'Earth Phototype';src:url(../fonts/earthphototype/EarthPhototype.eot);src:url(../fonts/earthphototype/EarthPhototype.eot?#iefix) format('embedded-opentype'),url(../fonts/earthphototype/EarthPhototype.woff) format('woff'),url(../fonts/earthphototype/EarthPhototype.ttf) format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;font-style:normal;font-weight:400;src:local("Montserrat"),url(../fonts/Montserrat/montserrat-v15-latin_cyrillic-regular.woff2) format("woff2"),url(../fonts/Montserrat/montserrat-v15-latin_cyrillic-regular.woff) format("woff");font-display:swap}
@font-face{font-family:Montserrat;font-style:normal;font-weight:500;src:local("Montserrat Medium"),url(../fonts/Montserrat/montserrat-v15-latin_cyrillic-500.woff2) format("woff2"),url(../fonts/Montserrat/montserrat-v15-latin_cyrillic-500.woff) format("woff");font-display:swap}
@font-face{font-family:Montserrat;font-style:normal;font-weight:600;src:local("Montserrat SemiBold"),url(../fonts/Montserrat/montserrat-v15-latin_cyrillic-600.woff2) format("woff2"),url(../fonts/Montserrat/montserrat-v15-latin_cyrillic-600.woff) format("woff");font-display:swap}
@font-face{font-family:Montserrat;font-style:normal;font-weight:700;src:local("Montserrat Bold"),url(../fonts/Montserrat/montserrat-v15-latin_cyrillic-700.woff2) format("woff2"),url(../fonts/Montserrat/montserrat-v15-latin_cyrillic-700.woff) format("woff");font-display:swap}
@font-face{font-family:Montserrat;font-style:normal;font-weight:800;src:local("Montserrat ExtraBold"),url(../fonts/Montserrat/montserrat-v15-latin_cyrillic-800.woff2) format("woff2"),url(../fonts/Montserrat/montserrat-v15-latin_cyrillic-800.woff) format("woff");font-display:swap}
@font-face{font-family:Montserrat;font-style:normal;font-weight:900;src:local("Montserrat Black"),url(../fonts/Montserrat/montserrat-v15-latin_cyrillic-900.woff2) format("woff2"),url(../fonts/Montserrat/montserrat-v15-latin_cyrillic-900.woff) format("woff");font-display:swap}

/* ---------------------------------------------------------------------- */
/* Tokens                                                                  */
/* ---------------------------------------------------------------------- */
:root {
    --bg-0: #0b0c0d;
    --bg-1: #141516;
    --bg-2: #1b1c1e;
    --bg-3: #232426;
    --line: rgba(255, 255, 255, .08);
    --line-strong: rgba(255, 255, 255, .16);

    --text-0: #f3efe8;
    --text-1: rgba(243, 239, 232, .68);
    --text-2: rgba(243, 239, 232, .44);
    --text-3: rgba(243, 239, 232, .26);

    --rust-500: #e0682b;
    --rust-400: #ef8a4a;
    --rust-600: #b8501f;
    --rust-glow: rgba(224, 104, 43, .45);

    --amber: #e8b93f;
    --moss: #6b8f3c;
    --moss-bright: #86b34e;
    --danger: #d64545;

    --radius-s: 8px;
    --radius-m: 14px;
    --radius-l: 20px;

    --font-body: Montserrat, ui-sans-serif, system-ui, sans-serif;
    --font-disp: 'Chakra Petch', var(--font-body);
    --font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

    --ease: cubic-bezier(.22, .8, .3, 1);
}

/* ---------------------------------------------------------------------- */
/* Reset / base                                                           */
/* ---------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg-0);
    color: var(--text-1);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    background-image:
        radial-gradient(circle at 12% 8%, rgba(224, 104, 43, .06), transparent 40%),
        radial-gradient(circle at 88% 92%, rgba(107, 143, 60, .05), transparent 45%);
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; }

::selection { background: var(--rust-500); color: #170b04; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 10px; border: 2px solid var(--bg-0); }
::-webkit-scrollbar-thumb:hover { background: var(--rust-600); }

:focus-visible { outline: 2px solid var(--rust-400); outline-offset: 2px; }

.container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3 { font-family: var(--font-disp); color: var(--text-0); margin: 0; }

.title { font-size: 40px; font-weight: 700; letter-spacing: .2px; }
.subtitle { font-size: 16px; font-weight: 400; color: var(--text-1); }

@media (max-width: 640px) {
    .title { font-size: 28px; }
    .subtitle { font-size: 14px; }
}

/* generic button used across pages (.btn) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: var(--radius-s);
    border: none;
    background: linear-gradient(135deg, var(--rust-500), var(--rust-600));
    color: #fff;
    font-family: var(--font-disp);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .3px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 22px -8px var(--rust-glow);
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 12px 26px -8px var(--rust-glow); }
.btn:active { transform: translateY(0); }

/* ---------------------------------------------------------------------- */
/* Grain overlay                                                          */
/* ---------------------------------------------------------------------- */
.grain-overlay {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 2;
    opacity: .035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body::after {
    background-image: url(https://gold-rust.ru/uploads/granularity.png);
    content: "";
    position: fixed;
    inset: 0;
    z-index: 555;
    pointer-events: none;
    opacity: .8;
}

/* ---------------------------------------------------------------------- */
/* Nav                                                                    */
/* ---------------------------------------------------------------------- */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 0;
    background: rgba(11, 12, 13, .78);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .25s, border-color .25s, background .25s;
}
.site-nav.is-scrolled {
    background: rgba(11, 12, 13, .94);
    box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .8);
}
/* the nav needs a bit more breathing room than the 1180px content
   container to fit the full label set without wrapping */
.site-nav .container { max-width: 1360px; }

.site-nav__inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    height: 66px;
}
.site-nav__logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-0);
    font-family: var(--font-disp);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .5px;
    text-decoration: none;
    flex-shrink: 0;
    margin-right: auto;
}
.site-nav__logo-mark {
    width: 30px; height: 30px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--rust-500), var(--rust-600));
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 6px 16px -6px var(--rust-glow);
    flex-shrink: 0;
}
.site-nav__logo-mark svg { display: block; }

.site-nav__links {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.site-nav__links::-webkit-scrollbar { display: none; }
.site-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    border-radius: var(--radius-s);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color .15s, background .15s;
}
.site-nav__link:hover { color: var(--text-0); background: rgba(255, 255, 255, .05); }
.site-nav__link.active { color: var(--text-0); }
.site-nav__link.active::after {
    content: '';
    position: absolute;
    left: 13px; right: 13px; bottom: 3px;
    height: 2px;
    background: var(--rust-500);
    border-radius: 2px;
}
.site-nav__link svg { flex-shrink: 0; opacity: .8; }

.site-nav__burger {
    display: none;
    width: 40px; height: 40px;
    border-radius: var(--radius-s);
    border: 1px solid var(--line-strong);
    background: var(--bg-2);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.site-nav__burger span {
    display: block; width: 16px; height: 2px; background: var(--text-0);
    position: relative; transition: transform .2s, opacity .2s;
}
.site-nav__burger span::before, .site-nav__burger span::after {
    content: ''; position: absolute; left: 0; width: 16px; height: 2px; background: var(--text-0); transition: transform .2s;
}
.site-nav__burger span::before { top: -6px; }
.site-nav__burger span::after { top: 6px; }
/* Note: can't hide the middle bar via opacity — opacity on `span` would also
   flatten its ::before/::after (they're part of the same compositing layer),
   hiding the X we're trying to show. Make it transparent instead. */
.site-nav.is-open .site-nav__burger span { background: transparent; }
.site-nav.is-open .site-nav__burger span::before { transform: translateY(6px) rotate(45deg); }
.site-nav.is-open .site-nav__burger span::after { transform: translateY(-6px) rotate(-45deg); }

/* icon-only tier: still one row, always fits, no wrapping/clipping */
@media (max-width: 1300px) {
    .site-nav__link span { display: none; }
    .site-nav__link { padding: 10px; }
    .site-nav__link.active::after { left: 10px; right: 10px; }
}

/* mobile backdrop behind the slide-down menu */
.site-nav__backdrop {
    position: fixed;
    inset: 66px 0 0 0;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s var(--ease);
    z-index: -1;
}
.site-nav.is-open .site-nav__backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media (max-width: 900px) {
    .site-nav .container { max-width: 1180px; }
    .site-nav__burger { display: flex; }
    .site-nav__links {
        position: fixed;
        top: 66px; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 10px 16px 20px;
        background: rgba(11, 12, 13, .98);
        border-bottom: 1px solid var(--line);
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform .2s var(--ease), opacity .2s var(--ease);
        max-height: calc(100vh - 66px);
        overflow-y: auto;
        overflow-x: visible;
    }
    .site-nav.is-open .site-nav__links {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .site-nav__link { padding: 13px 12px; border-radius: var(--radius-s); }
    .site-nav__link span { display: inline; }
    .site-nav__link.active::after { display: none; }
    .site-nav__link.active { background: rgba(224, 104, 43, .12); }
}

/* ---------------------------------------------------------------------- */
/* Header / hero (shared header-page used by utility pages)              */
/* ---------------------------------------------------------------------- */
.header-page {
    padding-top: 64px;
    position: relative;
}

.header {
    position: relative;
    padding: 70px 0;
    overflow: hidden;
}

.header-home {
    padding: 0 0 60px;
    position: relative;
    background: radial-gradient(ellipse 900px 500px at 50% -10%, rgba(224, 104, 43, .16), transparent 60%);
}
.header-home__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .16;
    filter: saturate(1.1) contrast(1.05);
    z-index: 0;
    mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
}
.header-home::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11,12,13,.2) 0%, var(--bg-0) 96%);
    z-index: 0;
}
.header-home__wrapper {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 110px 0 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.header-home__site-name {
    font-family: var(--font-disp);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--rust-400);
    margin-bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.header-home__site-name::before, .header-home__site-name::after {
    content: '';
    width: 26px; height: 1px;
    background: var(--rust-500);
    opacity: .6;
}
.header-home__title {
    font-size: 52px;
    max-width: 780px;
    line-height: 1.1;
    margin-bottom: 16px;
    text-shadow: 0 2px 30px rgba(0,0,0,.4);
}
.header-home__subtitle {
    font-size: 17px;
    max-width: 560px;
    margin-bottom: 40px;
}

.header-home__form { width: 100%; max-width: 640px; }
.header-home__form-wrapper {
    display: flex;
    gap: 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-m);
    padding: 8px;
    backdrop-filter: blur(6px);
}
.header-home__form-group { flex: 1; }
.header-home__form-group:last-child { flex: 0 0 auto; }
.header-home__form-input {
    width: 100%;
    height: 48px;
    border: none;
    background: transparent;
    color: var(--text-0);
    font-size: 15px;
    padding: 0 16px;
    outline: none;
}
.header-home__form-input::placeholder { color: var(--text-3); }
.header-home__form-btn {
    height: 48px;
    padding: 0 30px;
}

.header-home__triggers {
    display: flex;
    gap: 44px;
    margin-top: 46px;
    flex-wrap: wrap;
    justify-content: center;
}
.header-home__trigger { text-align: center; }
.header-home__trigger-title {
    font-family: var(--font-disp);
    font-size: 30px;
    font-weight: 800;
    color: var(--text-0);
    line-height: 1;
}
.header-home__trigger-text {
    font-size: 12px;
    color: var(--text-2);
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

@media (max-width: 640px) {
    .header-home__title { font-size: 32px; }
    .header-home__form-wrapper { flex-direction: column; }
    .header-home__form-group,
    .header-home__form-group:last-child { flex: 1 1 auto; width: 100%; }
    .header-home__form-btn { width: 100%; }
    .header-home__triggers { gap: 26px; }
    .header-home__trigger-title { font-size: 24px; }
}

/* ---------------------------------------------------------------------- */
/* Home — feature grid & sections (new, additive)                        */
/* ---------------------------------------------------------------------- */
.section { padding: 70px 0; }
.section-head {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 44px;
}
.section-head__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-disp);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--rust-400);
    margin-bottom: 14px;
}
.section-head__title { font-size: 30px; margin-bottom: 10px; }
.section-head__desc { color: var(--text-2); font-size: 14px; line-height: 1.7; }

.tool-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 900px) { .tool-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tool-grid { grid-template-columns: 1fr; } }

.tool-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    padding: 26px 24px;
    text-decoration: none;
    overflow: hidden;
    transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.tool-card::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 85% 0%, var(--rust-glow), transparent 55%);
    opacity: 0;
    transition: opacity .3s;
}
.tool-card:hover {
    transform: translateY(-5px);
    border-color: rgba(224, 104, 43, .35);
    box-shadow: 0 20px 40px -22px rgba(0,0,0,.6);
}
.tool-card:hover::before { opacity: 1; }
.tool-card__icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: rgba(224, 104, 43, .12);
    color: var(--rust-400);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    position: relative; z-index: 1;
}
.tool-card__title { color: var(--text-0); font-size: 16px; font-weight: 700; position: relative; z-index: 1; }
.tool-card__desc { color: var(--text-2); font-size: 13px; line-height: 1.6; position: relative; z-index: 1; }
.tool-card__arrow {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--rust-400); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    position: relative; z-index: 1;
    transition: gap .2s;
}
.tool-card:hover .tool-card__arrow { gap: 10px; }

.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    counter-reset: step;
}
@media (max-width: 760px) { .steps-grid { grid-template-columns: 1fr; } }
.step-card { position: relative; padding-left: 4px; }
.step-card__num {
    font-family: var(--font-disp);
    font-size: 46px;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(224, 104, 43, .5);
    line-height: 1;
    margin-bottom: 10px;
}
.step-card__title { color: var(--text-0); font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.step-card__desc { color: var(--text-2); font-size: 13px; line-height: 1.65; }

/* generic reveal-on-scroll utility (used by scripts.js) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { transition-delay: calc(var(--stagger-i, 0) * 70ms); }

/* ---------------------------------------------------------------------- */
/* just-block (rules/notes block reused on some pages)                    */
/* ---------------------------------------------------------------------- */
.just-block { padding: 60px 0 80px; border-top: 1px solid var(--line); }
.just-block .block-wrapper { display: grid; grid-template-columns: 1fr 2fr; gap: 40px 60px; align-items: start; }
.just-block .block-wrapper h2 { font-size: 22px; font-weight: 700; line-height: 1.4; color: var(--text-0); position: sticky; top: 20px; }
.just-block .block-wrapper a { text-decoration: underline; color: var(--text-1); }
.just-block .block-wrapper > div { display: flex; flex-direction: column; gap: 16px; }
.just-block .block-wrapper p { font-size: 14px; line-height: 1.75; color: var(--text-2); }
@media (max-width: 960px) {
    .just-block .block-wrapper { grid-template-columns: 1fr; gap: 20px; }
    .just-block .block-wrapper h3 { position: static; font-size: 20px; }
}
@media (max-width: 480px) {
    .just-block { padding: 40px 0 60px; }
    .just-block .block-wrapper h3 { font-size: 18px; }
    .just-block .block-wrapper p { font-size: 13px; }
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                 */
/* ---------------------------------------------------------------------- */
.footer {
    border-top: 1px solid var(--line);
    padding: 64px 0 40px;
    position: relative;
    background: linear-gradient(180deg, transparent, rgba(224,104,43,.03));
}
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px 60px; margin-bottom: 46px; }
.footer__brand-logo {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--font-disp); font-size: 18px; font-weight: 800; color: var(--text-0);
    text-decoration: none; margin-bottom: 12px;
}
.footer__brand-desc { font-size: 13px; line-height: 1.7; color: var(--text-2); max-width: 280px; }
.footer__support-btn {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
    padding: 10px 18px; border-radius: var(--radius-s);
    border: 1px solid rgba(134, 179, 78, .4);
    background: rgba(134, 179, 78, .1);
    color: var(--moss-bright);
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: background .15s, color .15s;
}
.footer__support-btn:hover { background: var(--moss-bright); color: #0b0c0d; }
.footer__col-title { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-3); margin-bottom: 16px; }
.footer__nav { display: flex; flex-direction: column; gap: 4px; }
.footer__nav-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); text-decoration: none; padding: 6px 0; transition: color .15s; }
.footer__nav-link svg { flex-shrink: 0; opacity: .6; transition: opacity .15s; }
.footer__nav-link:hover { color: var(--text-0); }
.footer__nav-link:hover svg { opacity: 1; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-top: 28px; border-top: 1px solid var(--line); margin-bottom: 20px; }
.footer__legal-name { font-size: 12px; font-weight: 600; color: var(--text-2); width: 100%; margin-bottom: 2px; }
.footer__legal-item { font-size: 12px; color: var(--text-3); }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 28px; border-top: 1px solid var(--line); }
.footer__copy { font-size: 12px; color: var(--text-3); }
.footer__ai-note { font-size: 11px; color: var(--text-3); margin-top: 12px; }
.footer__ai-note a { color: var(--text-2); text-decoration: none; transition: color .15s; }
.footer__ai-note a:hover { color: var(--text-0); }
.footer__author { font-size: 12px; color: var(--text-3); text-decoration: none; transition: color .15s; }
.footer__author:hover { color: var(--text-0); }

@media (max-width: 960px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 40px; } }
@media (max-width: 480px) {
    .footer { padding: 40px 0 30px; }
    .footer__grid { grid-template-columns: 1fr; gap: 28px; margin-bottom: 36px; }
    .footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------------------------------------------------------------------- */
/* Modals (shared chrome — markup/classes kept identical for JS binding)  */
/* ---------------------------------------------------------------------- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--ease), visibility .25s;
}
.modal.modal-on { opacity: 1; visibility: visible; }
.modal__flex {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(6, 6, 7, .78);
    backdrop-filter: blur(6px);
}
.modal__container {
    position: relative;
    max-width: 460px;
    width: 100%;
    max-height: 86vh;
    overflow-y: auto;
    background: linear-gradient(165deg, var(--bg-2), var(--bg-1));
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-l);
    box-shadow: 0 30px 70px -20px rgba(0,0,0,.7);
    transform: translateY(14px) scale(.98);
    transition: transform .25s var(--ease);
}
.modal.modal-on .modal__container { transform: translateY(0) scale(1); }
.modal__close {
    position: absolute;
    top: 14px; right: 14px;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px;
    background: var(--bg-3);
    border: 1px solid var(--line-strong);
    color: var(--text-2);
    cursor: pointer;
    z-index: 2;
    transition: color .15s, border-color .15s;
}
.modal__close:hover { color: var(--text-0); border-color: var(--rust-500); }
.modal__body { padding: 40px 32px 30px; }

.modal-result-player-ban__title { color: var(--text-0); font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.modal-result-player-ban__player { margin: 16px 0; }
.modal-result-player-ban__subtitle { color: var(--text-2); font-size: 13px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; }

/* player card + result blocks are injected by the legacy bundle JS —
   these class names come from its rendered output, styled here to match
   the rb_v2 look without touching the bundle itself */
.modal-result-player-ban__player-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: var(--bg-0);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
}
.modal-result-player-ban__player-avatar {
    width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex-shrink: 0;
    border: 1px solid var(--line-strong);
}
.modal-result-player-ban__player-info { min-width: 0; }
.modal-result-player-ban__player-name {
    color: var(--text-0); font-size: 15px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.modal-result-player-ban__player-steam-id { color: var(--text-3); font-size: 12px; font-family: var(--font-mono); margin-top: 2px; }
.modal-result-player-ban__player-steam-id a { color: var(--rust-400); text-decoration: none; }
.modal-result-player-ban__player-steam-id a:hover { text-decoration: underline; }

.modal-result-player-ban__result-card {
    background: var(--bg-0);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    padding: 6px 14px;
    margin-bottom: 10px;
}
/* the "no bans among projects" card keeps an explicit success accent —
   it's the one line the bundle itself flags as good news */
.modal-result-player-ban__result-card--success {
    border-color: rgba(134, 179, 78, .35);
    background: linear-gradient(135deg, rgba(134, 179, 78, .1), transparent);
}

/* individual status lines get their own icon + color (added by scripts.js,
   ban-result-enhance.js) instead of relying on one card-wide accent, since a
   single card can mix good and bad lines (e.g. VAC clean + community ban) */
.modal-result-player-ban__result-ban-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-1);
    font-size: 13px;
    line-height: 1.5;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}
.modal-result-player-ban__result-ban-item:last-child { border-bottom: none; }
.modal-result-player-ban__result-ban-icon {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
}
.modal-result-player-ban__result-ban-item--ok .modal-result-player-ban__result-ban-icon {
    background: rgba(134, 179, 78, .16); color: var(--moss-bright);
}
.modal-result-player-ban__result-ban-item--ok .modal-result-player-ban__result-ban-text { color: var(--text-1); }
.modal-result-player-ban__result-ban-item--bad .modal-result-player-ban__result-ban-icon {
    background: rgba(214, 69, 69, .16); color: var(--danger);
}
.modal-result-player-ban__result-ban-item--bad .modal-result-player-ban__result-ban-text {
    color: var(--text-0); font-weight: 600;
}

.modal-result-player-ban__check-stats:empty { display: none; }
.modal-result-player-ban__check-stats {
    margin-top: 14px;
    padding: 12px;
    background: var(--bg-0);
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
}
.modal-result-player-ban__check-stats-title {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-2);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 10px;
}
.modal-result-player-ban__check-stats-title svg { flex-shrink: 0; color: var(--rust-400); opacity: .85; }
.modal-result-player-ban__check-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.modal-result-player-ban__check-stats-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    background: var(--bg-1);
    border-radius: var(--radius-s);
}
.modal-result-player-ban__check-stats-value { color: var(--text-0); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.modal-result-player-ban__check-stats-label { color: var(--text-3); font-size: 10px; text-transform: uppercase; letter-spacing: .3px; }

.modal-result-player-ban__stats-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: var(--radius-m);
    background: linear-gradient(135deg, rgba(224, 104, 43, .16), rgba(224, 104, 43, .05));
    border: 1px solid rgba(224, 104, 43, .3);
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}
.modal-result-player-ban__stats-cta:hover { border-color: var(--rust-500); transform: translateY(-1px); }
.modal-result-player-ban__stats-cta-icon {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px;
    background: rgba(224, 104, 43, .18); color: var(--rust-400);
    display: flex; align-items: center; justify-content: center;
}
.modal-result-player-ban__stats-cta-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.modal-result-player-ban__stats-cta-title { color: var(--text-0); font-size: 13px; font-weight: 700; }
.modal-result-player-ban__stats-cta-desc { color: var(--text-2); font-size: 11px; line-height: 1.4; }
.modal-result-player-ban__stats-cta-arrow { color: var(--rust-400); flex-shrink: 0; }

.modal-preloader { display: none; }
.modal-preloader__body, .preloader-request__body {
    display: flex; align-items: center; justify-content: center; padding: 50px;
}
.modal-preloader__lds-ring, .preloader-request__lds-ring {
    display: inline-block; position: relative; width: 44px; height: 44px;
}
.modal-preloader__lds-ring div, .preloader-request__lds-ring div {
    box-sizing: border-box;
    position: absolute;
    width: 34px; height: 34px; margin: 5px;
    border: 3px solid var(--rust-500);
    border-radius: 50%;
    animation: rb-ring 1.1s cubic-bezier(.5,0,.5,1) infinite;
    border-color: var(--rust-500) transparent transparent transparent;
}
.modal-preloader__lds-ring div:nth-child(2) { animation-delay: -.15s; }
.modal-preloader__lds-ring div:nth-child(3) { animation-delay: -.3s; }
.modal-preloader__lds-ring div:nth-child(4) { animation-delay: -.45s; }
@keyframes rb-ring { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

.preloader-request {
    position: fixed; inset: 0; z-index: 1001;
    background: rgba(11,12,13,.65);
    display: none;
    align-items: center; justify-content: center;
}
.preloader-request.is-visible, .preloader-request.show { display: flex; }

.gift-modal__icon { font-size: 42px; text-align: center; margin-bottom: 12px; }
.gift-modal__title { color: var(--text-0); font-size: 20px; font-weight: 700; text-align: center; margin-bottom: 10px; }
.gift-modal__text { color: var(--text-2); font-size: 14px; line-height: 1.6; text-align: center; margin-bottom: 20px; }
.gift-modal__link { color: var(--rust-400); }
.gift-modal__promo-wrapper {
    display: flex; align-items: center; gap: 10px;
    background: var(--bg-0); border: 1px dashed var(--line-strong); border-radius: var(--radius-s);
    padding: 12px 14px; margin-bottom: 10px;
}
.gift-modal__promo-code { color: var(--amber); font-family: var(--font-mono); font-weight: 700; flex: 1; }
.gift-modal__copy-btn {
    border: none; background: var(--rust-500); color: #fff; border-radius: 7px;
    padding: 8px 14px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.gift-modal__hint { color: var(--text-3); font-size: 12px; text-align: center; }

/* gift widget (floating cta) */
.gift-widget {
    position: fixed; right: 26px; bottom: 26px; z-index: 60;
    display: flex; flex-direction: column; align-items: center;
    cursor: pointer;
    user-select: none;
}
.gift-widget__btn {
    width: 62px; height: 62px; flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--rust-400), var(--rust-600));
    border: 2px solid rgba(255, 200, 140, .4);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 22px -4px var(--rust-glow);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.gift-widget__btn svg { width: 34px; height: 34px; animation: rb-gift-bounce 2.2s ease-in-out infinite; }
.gift-widget:hover .gift-widget__btn { transform: scale(1.1); box-shadow: 0 10px 30px -4px var(--rust-glow); }
.gift-widget:hover .gift-widget__btn svg { animation: rb-gift-shake .45s ease; }
.gift-widget__label {
    margin-top: 7px;
    font-size: 11px;
    font-weight: 700;
    color: var(--rust-400);
    text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
    letter-spacing: .5px;
    text-transform: uppercase;
    white-space: nowrap;
}
@keyframes rb-gift-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes rb-gift-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }

@media (max-width: 480px) {
    .gift-widget { right: 14px; bottom: 14px; }
    .gift-widget__btn { width: 52px; height: 52px; }
    .gift-widget__btn svg { width: 28px; height: 28px; }
}

/* ---------------------------------------------------------------------- */
/* Donate modal                                                           */
/* ---------------------------------------------------------------------- */
.donate-modal .modal__container { max-width: 460px; }
.donate-modal__body { padding: 40px 34px 30px; text-align: center; }
.donate-modal__icon { font-size: 42px; line-height: 1; margin-bottom: 14px; }
.donate-modal__title { color: var(--text-0); font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.donate-modal__text { color: var(--text-2); font-size: 14px; line-height: 1.6; margin-bottom: 24px; }
.donate-form__presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.donate-form__preset {
    border: 1px solid var(--line-strong); background: var(--bg-0); color: var(--text-0);
    border-radius: var(--radius-s); padding: 11px 0; font-size: 14px; font-weight: 700; cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.donate-form__preset:hover { border-color: var(--rust-500); }
.donate-form__preset.is-active { background: var(--rust-500); border-color: var(--rust-500); color: #fff; }
.donate-form__custom { position: relative; margin-bottom: 14px; }
.donate-form__input {
    width: 100%; border: 1px solid var(--line-strong); background: var(--bg-0);
    border-radius: var(--radius-s); padding: 13px 34px 13px 14px; font-size: 15px; color: var(--text-0);
    outline: none; transition: border-color .15s; -moz-appearance: textfield;
}
.donate-form__input::placeholder { color: var(--text-3); }
.donate-form__input::-webkit-outer-spin-button, .donate-form__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.donate-form__input:focus { border-color: var(--rust-500); }
.donate-form__currency { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: 15px; pointer-events: none; }
.donate-form__error { display: none; color: var(--danger); font-size: 13px; margin-bottom: 12px; text-align: left; }
.donate-form__error.is-visible { display: block; }
.donate-form__submit {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(135deg, var(--rust-500), var(--rust-600)); color: #fff; border: none;
    border-radius: var(--radius-s); padding: 14px; font-size: 15px; font-weight: 700; cursor: pointer; transition: opacity .15s;
}
.donate-form__submit:hover { opacity: .92; }
.donate-form__submit:disabled { opacity: .6; cursor: default; }
.donate-form__hint { color: var(--text-3); font-size: 12px; margin-top: 10px; }
.donate-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); cursor: pointer; user-select: none; }
.donate-toggle__label { color: var(--text-2); font-size: 13px; }
.donate-toggle__switch { position: relative; flex-shrink: 0; width: 40px; height: 22px; }
.donate-toggle__switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.donate-toggle__slider { position: absolute; inset: 0; background: var(--bg-3); border-radius: 22px; transition: background .2s ease; }
.donate-toggle__slider::before { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s ease; }
.donate-toggle__switch input:checked + .donate-toggle__slider { background: var(--moss-bright); }
.donate-toggle__switch input:checked + .donate-toggle__slider::before { transform: translateX(18px); }

/* ---------------------------------------------------------------------- */
/* Empty ad block & promo (ad partials)                                  */
/* ---------------------------------------------------------------------- */
.promo-server__book-btn {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
    padding: 12px 24px; border-radius: var(--radius-s);
    background: linear-gradient(135deg, var(--rust-500), var(--rust-600));
    color: #fff; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .5px;
    text-decoration: none; cursor: pointer; border: none;
    transition: opacity .2s ease, transform .2s ease;
}
.promo-server__book-btn:hover { opacity: .9; transform: translateY(-1px); }
.promo-server__book-btn svg path { fill: #fff; }

.promo-server--empty {
    border: 2px dashed var(--line-strong);
    background: rgba(255,255,255,.02);
    padding: 40px 30px; border-radius: var(--radius-m);
    max-width: 1000px; width: 100%; margin: 60px auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; min-height: 160px; gap: 12px;
    transition: border-color .2s ease, background .2s ease;
}
.promo-server--empty:hover { border-color: rgba(224, 104, 43, .35); background: rgba(224, 104, 43, .03); }
.promo-server--empty__badge {
    background: rgba(255,255,255,.06); color: var(--text-2); font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px; padding: 3px 10px; border-radius: 20px; border: 1px solid var(--line-strong);
}
.promo-server--empty__title { color: var(--text-2); font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.promo-server--empty__subtitle { color: var(--text-3); font-size: 13px; max-width: 360px; }

.promo-server {
    background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
    padding: 40px 30px; border-radius: var(--radius-m); max-width: 1000px; width: 100%; margin: 0 auto;
    position: relative; border: 2px dashed rgba(224,104,43,.25); z-index: 2;
}
.promo-server__tag { position: absolute; background: var(--moss-bright); padding: 4px 8px; border-radius: 10px; color: #ddffb3; top: -15px; text-transform: uppercase; font-size: 14px; font-weight: 700; right: 16px; }
.promo-server__name { color: var(--text-0); font-size: 24px; font-weight: 800; margin-bottom: 10px; font-family: var(--font-disp); }
.promo-server__description { color: var(--text-1); font-size: 16px; }
.promo-server__server-tags { display: flex; align-items: center; margin-top: 16px; gap: 8px; flex-wrap: wrap; }
.promo-server__server-tag { color: var(--text-1); background: var(--bg-0); padding: 4px 8px; border-radius: 4px; font-size: 12px; text-transform: uppercase; font-weight: 600; }
.promo-server__info { display: flex; align-items: center; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.promo-server__info-online, .promo-server__info-connect, .promo-server__info-connect-btn {
    background: var(--bg-0); padding: 10px 15px; border-radius: var(--radius-s); color: var(--text-0);
}
.promo-server__info-online { display: flex; align-items: center; letter-spacing: 1px; gap: 6px; }
.promo-server__info-connect-btn { display: flex; cursor: pointer; transition: background-color .2s ease; }
.promo-server__info-connect-btn:hover { background: var(--moss-bright); color: #10240a; }
.promo-server__socials { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.promo-server__social { transition: transform .2s ease; color: var(--text-0); text-transform: uppercase; text-decoration: none; font-weight: 600; display: flex; }
.promo-server__social:not(.un-hover):hover { transform: scale(1.05); }
.promo-server__social svg { width: 22px; height: 22px; }

/* ---------------------------------------------------------------------- */
/* Legal pages                                                            */
/* ---------------------------------------------------------------------- */
.legal-page { padding: 40px 0 80px; }
.legal-wrap {
    max-width: 860px; margin: 0 auto;
    background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
    border: 1px solid var(--line); border-radius: var(--radius-l); padding: 46px 48px;
}
.legal-wrap h1 { color: var(--text-0); font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.legal-updated { color: var(--text-3); font-size: 13px; margin-bottom: 30px; }
.legal-wrap h2 { color: var(--text-0); font-size: 18px; font-weight: 700; margin: 30px 0 12px; }
.legal-wrap p { color: var(--text-1); font-size: 14px; line-height: 1.75; margin-bottom: 12px; }
.legal-wrap ul { margin: 0 0 14px; padding-left: 20px; list-style: disc; }
.legal-wrap li { color: var(--text-1); font-size: 14px; line-height: 1.7; margin-bottom: 7px; }
.legal-wrap a { color: var(--rust-400); text-decoration: none; }
.legal-wrap a:hover { text-decoration: underline; }
.legal-wrap strong { color: var(--text-0); }
@media (max-width: 600px) {
    .legal-wrap { padding: 30px 22px; border-radius: var(--radius-m); }
    .legal-wrap h1 { font-size: 23px; }
    .legal-wrap h2 { font-size: 16px; }
}

/* ---------------------------------------------------------------------- */
/* Pay result pages                                                       */
/* ---------------------------------------------------------------------- */
.pay-result { padding: 70px 0 100px; }
.pay-card {
    max-width: 520px; margin: 0 auto; text-align: center;
    background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
    border: 1px solid var(--line); border-radius: var(--radius-l); padding: 46px 34px;
}
.pay-icon { width: 84px; height: 84px; margin: 0 auto 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.pay-card h1 { color: var(--text-0); font-size: 26px; font-weight: 700; margin-bottom: 12px; }
.pay-card p { color: var(--text-1); font-size: 14px; line-height: 1.65; }

/* ---------------------------------------------------------------------- */
/* Scroll-to-top                                                          */
/* ---------------------------------------------------------------------- */
.to-top {
    position: fixed; left: 22px; bottom: 22px; z-index: 60;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--bg-2); border: 1px solid var(--line-strong); color: var(--text-1);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    opacity: 0; transform: translateY(10px); pointer-events: none;
    transition: opacity .25s, transform .25s, border-color .2s, color .2s;
}
.to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.to-top:hover { border-color: var(--rust-500); color: var(--text-0); }

/* ---------------------------------------------------------------------- */
/* Toast notifications (Notyf, used by the legacy bundle + inline scripts) */
/* Structural rules ported from rb_v1 — colors/icons are set inline by the  */
/* NotyFy wrapper per call, this only restores the missing positioning.    */
/* ---------------------------------------------------------------------- */
@keyframes notyf-fadeinup { 0% { opacity: 0; transform: translateY(25%); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes notyf-fadeinleft { 0% { opacity: 0; transform: translateX(25%); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes notyf-fadeoutright { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(25%); } }
@keyframes notyf-fadeoutdown { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(25%); } }

.notyf {
    position: fixed; top: 0; left: 0; height: 100%; width: 100%;
    color: #fff; z-index: 9999;
    display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end;
    pointer-events: none; box-sizing: border-box; padding: 20px;
}
.notyf__icon--error, .notyf__icon--success {
    height: 21px; width: 21px; background: #fff; border-radius: 50%; display: block; margin: 0 auto; position: relative;
}
.notyf__icon--error:after, .notyf__icon--error:before {
    content: ''; background: currentColor; display: block; position: absolute; width: 3px; border-radius: 3px; left: 9px; height: 12px; top: 5px;
}
.notyf__icon--error:after { transform: rotate(-45deg); }
.notyf__icon--error:before { transform: rotate(45deg); }
.notyf__icon--success:after, .notyf__icon--success:before {
    content: ''; background: currentColor; display: block; position: absolute; width: 3px; border-radius: 3px;
}
.notyf__icon--success:after { height: 6px; transform: rotate(-45deg); top: 9px; left: 6px; }
.notyf__icon--success:before { height: 11px; transform: rotate(45deg); top: 5px; left: 10px; }
.notyf__toast {
    display: block; overflow: hidden; pointer-events: auto;
    animation: notyf-fadeinup .3s ease-in forwards;
    box-shadow: 0 10px 30px -6px rgba(0, 0, 0, .5);
    position: relative; padding: 0 15px; border-radius: var(--radius-s);
    max-width: 320px; transform: translateY(25%); box-sizing: border-box; flex-shrink: 0;
}
.notyf__toast--disappear {
    transform: translateY(0); animation: notyf-fadeoutdown .3s forwards; animation-delay: .25s;
}
.notyf__toast--disappear .notyf__icon, .notyf__toast--disappear .notyf__message {
    animation: notyf-fadeoutdown .3s forwards; opacity: 1; transform: translateY(0);
}
.notyf__toast--disappear .notyf__dismiss { animation: notyf-fadeoutright .3s forwards; opacity: 1; transform: translateX(0); }
.notyf__toast--disappear .notyf__message { animation-delay: .05s; }
.notyf__toast--upper { margin-bottom: 20px; }
.notyf__toast--lower { margin-top: 20px; }
.notyf__toast--dismissible .notyf__wrapper { padding-right: 30px; }
.notyf__wrapper {
    display: flex; align-items: center; padding: 17px 15px 17px 0; border-radius: var(--radius-s); position: relative; z-index: 10;
}
.notyf__icon { width: 22px; text-align: center; font-size: 1.3em; opacity: 0; animation: notyf-fadeinup .3s forwards; animation-delay: .3s; margin-right: 13px; }
.notyf__dismiss {
    position: absolute; top: 0; right: 0; height: 100%; width: 26px; margin-right: -15px;
    animation: notyf-fadeinleft .3s forwards; animation-delay: .35s; opacity: 0;
}
.notyf__dismiss-btn {
    background: rgba(0, 0, 0, .25); border: none; cursor: pointer; transition: opacity .2s ease, background-color .2s ease;
    outline: 0; opacity: .35; height: 100%; width: 100%;
}
.notyf__dismiss-btn:after, .notyf__dismiss-btn:before {
    content: ''; background: #fff; height: 12px; width: 2px; border-radius: 3px; position: absolute; left: calc(50% - 1px); top: calc(50% - 5px);
}
.notyf__dismiss-btn:after { transform: rotate(-45deg); }
.notyf__dismiss-btn:before { transform: rotate(45deg); }
.notyf__dismiss-btn:hover { opacity: .7; background: rgba(0, 0, 0, .15); }
.notyf__dismiss-btn:active { opacity: .8; }
.notyf__message { vertical-align: middle; position: relative; opacity: 0; animation: notyf-fadeinup .3s forwards; animation-delay: .25s; line-height: 1.5em; }

.custom-noty-f { border-radius: var(--radius-s); font-size: 14px; padding: 0 15px 0 0; }
.custom-noty-f .notyf__icon { display: flex; align-items: center; width: auto; margin-right: 10px; }
.custom-noty-f .notyf__icon svg { width: 24px; height: 24px; }
.custom-noty-f .notyf__wrapper { padding: 14px; }
.custom-noty-f .notyf__message { padding-right: 10px; }
.custom-error-noty-f .notyf__icon svg { width: 18px; height: 18px; }
.custom-warning-noty-f .notyf__icon svg { width: 20px; height: 20px; }

@media only screen and (max-width: 480px) {
    .notyf { padding: 0; }
    .notyf__toast { max-width: none; border-radius: 0; width: 100%; }
    .notyf__dismiss { width: 56px; }
}

/* ---------------------------------------------------------------------- */
/* Player stats: check-count note + risk banner                          */
/* ---------------------------------------------------------------------- */
.ps-check-stats {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    padding: 16px 18px;
    margin-bottom: 20px;
}
.ps-check-stats__title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-2);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 14px;
}
.ps-check-stats__title svg { flex-shrink: 0; color: var(--rust-400); opacity: .85; }
.ps-check-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.ps-check-stats__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 6px;
    background: var(--bg-0);
    border-radius: var(--radius-s);
}
.ps-check-stats__value { color: var(--text-0); font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ps-check-stats__label { color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }

@media (max-width: 520px) {
    .ps-check-stats__grid { grid-template-columns: repeat(2, 1fr); }
}

.ps-risk-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: linear-gradient(135deg, rgba(214, 69, 69, .14), rgba(214, 69, 69, .04));
    border: 1px solid rgba(214, 69, 69, .35);
    border-radius: var(--radius-m);
    padding: 16px 18px;
    margin-bottom: 20px;
}
.ps-risk-banner__icon {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px;
    background: rgba(214, 69, 69, .16); color: var(--danger);
    display: flex; align-items: center; justify-content: center;
}
.ps-risk-banner__text { display: flex; flex-direction: column; gap: 3px; }
.ps-risk-banner__title { color: var(--text-0); font-size: 14px; font-weight: 700; }
.ps-risk-banner__desc { color: var(--text-1); font-size: 13px; line-height: 1.5; }