:root {
    --brand: #11d49e;
    --brand-bright: #28ffbe;
    --brand-ink: #08c28d;
    --brand-soft: rgba(17, 212, 158, .12);
    --bg: #0a0a0b;
    --bg-1: #121214;
    --bg-2: #17171a;
    --bg-3: #1e1e22;
    --line: rgba(255, 255, 255, .07);
    --line-2: rgba(255, 255, 255, .12);
    --text: #e9e9ec;
    --text-dim: #9a9aa3;
    --text-mut: #6b6b73;
    --r-lg: 16px;
    --r-md: 12px;
    --r-sm: 8px;
    --shadow: 0 18px 50px rgba(0, 0, 0, .45);
    --maxw: 1200px;
    --dur-1: 150ms;
    --dur-2: 250ms;
    --dur-3: 450ms;
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    min-width: 0
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth
}

html,
body {
    overflow-x: hidden;
    max-width: 100%
}

body {
    margin: 0;
    padding: 0 !important;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color .18s ease
}

a:hover {
    color: var(--brand)
}

img {
    max-width: 100%;
    height: auto;
    display: block
}

/* ---------- ambient background: grid + glow ---------- */

.smmgon-ambient {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: var(--bg)
}

.smmgon-ambient::before {
    /* faint engineering grid */
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 75%);
}

.smmgon-ambient::after {
    /* one deep brand glow behind hero */
    content: "";
    position: absolute;
    left: 50%;
    top: -320px;
    width: 1200px;
    height: 820px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(17, 212, 158, .16), rgba(17, 212, 158, .05) 55%, transparent 75%);
    filter: blur(20px);
}

/* ---------- layout ---------- */

.smmgon-container {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 20px
}

.smmgon-section {
    padding: clamp(56px, 8vw, 96px) 0;
    position: relative
}

/* ---------- typography ---------- */

h1,
h2,
h3,
h4 {
    margin: 0 0 .5em;
    font-weight: 700;
    line-height: 1.18;
    color: #fff
}

.smmgon-display {
    font-weight: 800;
    font-size: clamp(36px, 5.2vw, 62px);
    letter-spacing: -1.5px;
    line-height: 1.06;
    text-transform: none
}

.smmgon-title {
    font-weight: 800;
    font-size: clamp(26px, 3vw, 38px);
    letter-spacing: -.8px;
    text-align: center;
    text-transform: none
}

.smmgon-lead {
    color: var(--text-dim);
    font-size: clamp(15px, 1.4vw, 17px)
}

.smmgon-sec-sub {
    color: var(--text-dim);
    text-align: center;
    max-width: 560px;
    margin: -6px auto 40px
}

/* gradient headline accent */

.smmgon-brandtext {
    background: linear-gradient(100deg, var(--brand) 10%, var(--brand-bright) 45%, #8affdd 60%, var(--brand) 90%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: smmgon-sheen 7s linear infinite;
}

@keyframes smmgon-sheen {
    to {
        background-position: 200% 0
    }
}

/* ---------- buttons ---------- */

.smmgon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 28px;
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .2px;
    font-family: var(--font);
    border: 1px solid transparent;
    cursor: pointer;
    position: relative;
    transition: transform .15s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .2s ease;
    white-space: nowrap;
}

.smmgon-btn:active {
    transform: translateY(1px)
}

.smmgon-btn-primary {
    background: var(--brand);
    color: #04130d
}

.smmgon-btn-primary:hover {
    background: var(--brand-bright);
    color: #04130d;
    box-shadow: 0 0 0 1px rgba(40, 255, 190, .4), 0 8px 32px -6px rgba(17, 212, 158, .45)
}

.smmgon-btn-primary i {
    transition: transform .2s var(--ease-out)
}

.smmgon-btn-primary:hover i {
    transform: translateX(3px)
}

.smmgon-btn-ghost {
    background: rgba(255, 255, 255, .02);
    color: #fff;
    border-color: var(--line-2);
    backdrop-filter: blur(6px)
}

.smmgon-btn-ghost:hover {
    border-color: var(--brand);
    color: var(--brand)
}

.smmgon-btn-block {
    width: 100%
}

/* ---------- header: sticky glass ---------- */

.smmgon-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(10, 10, 11, .55);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease, background .25s ease;
}

.smmgon-header.is-scrolled {
    border-bottom-color: var(--line);
    background: rgba(10, 10, 11, .78)
}

.smmgon-header-inner {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 68px
}

.smmgon-logo {
    display: flex;
    align-items: center;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -.5px;
    color: #fff
}

.smmgon-logo b {
    color: var(--brand)
}

.smmgon-logo img {
    
    width: auto;
    object-fit: contain;
    display: block
}

.smmgon-foot-brand .smmgon-logo img {
    height: 40px;
    max-width: 200px
}

.smmgon-nav {
    display: flex;
    gap: 4px;
    margin-inline: auto
}

.smmgon-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dim);
    transition: color .18s ease, background .18s ease
}

.smmgon-nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .05)
}

.smmgon-nav-link i {
    display: none
}

/* panel menu icons off: clean text nav (Linear-style) */

.smmgon-nav-link {
    position: relative
}

.smmgon-nav-link::after {
    /* animated underline accent */
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .22s var(--ease-out);
}

.smmgon-nav-link:hover::after,
.smmgon-nav-link.is-active::after {
    transform: scaleX(1)
}

.smmgon-nav-link.is-active {
    color: var(--brand)
}

.smmgon-header-actions {
    display: flex;
    align-items: center;
    gap: 12px
}

.smmgon-lang {
    position: relative
}

.smmgon-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    font-size: 14px;
    color: var(--text-dim);
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    transition: color .18s ease, border-color .18s ease;
}

.smmgon-lang-btn:hover {
    color: #fff;
    border-color: var(--line-2)
}

.smmgon-lang-btn .caret {
    margin: 0;
    border-top-color: var(--brand)
}

.smmgon-lang-btn:hover {
    color: #fff;
    border-color: var(--line-2)
}

.smmgon-signup {
    padding: 11px 22px
}

@media(max-width:900px) {
    .smmgon-nav {
        display: none
    }
}

/* ---------- hero ---------- */

.smmgon-hero {
    position: relative;
    padding: clamp(48px, 7vw, 88px) 0 clamp(36px, 5vw, 64px)
}

.smmgon-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
}

@media(max-width:960px) {
    .smmgon-hero-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:560px) {
    .smmgon-hero-copy {
        text-align: center
    }
    .smmgon-hero-sub {
        margin-left: auto;
        margin-right: auto
    }
    .smmgon-price-anchor {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
        padding: 12px 16px;
        font-size: 13.5px;
        gap: 4px 8px;
    }
    .smmgon-price-anchor b {
        font-size: 16px
    }
    .smmgon-price-note {
        flex-basis: 100%;
        font-size: 12px;
        margin-top: 2px
    }
    .smmgon-hero-cta {
        flex-direction: column
    }
    .smmgon-hero-cta .smmgon-btn {
        width: 100%;
        padding: 14px 12px
    }
    .smmgon-btn {
        white-space: normal;
        text-align: center
    }
    .smmgon-hero-mini {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 7px
    }
}

.smmgon-hero-sub {
    max-width: 520px;
    margin: 18px 0 22px
}

/* price ticket: squared card with a brand accent bar (no pill cliche) */

.smmgon-price-anchor {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 13px 20px 13px 22px;
    border-radius: 4px 12px 12px 4px;
    font-size: 14px;
    color: var(--text-dim);
    background: linear-gradient(90deg, rgba(17, 212, 158, .08), rgba(18, 18, 20, .5) 70%);
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--brand);
    margin-bottom: 26px;
}

.smmgon-price-anchor i {
    color: var(--brand)
}

.smmgon-price-anchor b {
    color: var(--brand);
    font-size: 17px;
    letter-spacing: -.3px;
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
}

.smmgon-price-note {
    color: var(--text-mut)
}

.smmgon-hero-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px
}

.smmgon-hero-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-dim);
    font-size: 14px
}

.smmgon-stars {
    color: var(--brand);
    font-size: 12px;
    letter-spacing: 2px;
    white-space: nowrap;
    flex: 0 0 auto
}

/* ---------- login card: glass + gradient edge ---------- */

.smmgon-hero-login {
    position: relative
}

.smmgon-login-card {
    position: relative;
    border-radius: 20px;
    padding: 30px 28px;
    background: rgba(18, 18, 20, .62);
    border: 1px solid var(--line);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55), 0 0 80px -30px rgba(17, 212, 158, .25);
}

/* luminous top edge */

.smmgon-login-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 21px;
    padding: 1px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(17, 212, 158, .5), rgba(17, 212, 158, .08) 30%, transparent 60%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.smmgon-login-title {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.5px;
    margin-bottom: 2px
}

.smmgon-login-sub {
    color: var(--text-dim);
    font-size: 14px;
    margin: 0 0 22px
}

.smmgon-field-row {
    margin-bottom: 16px;
    position: relative
}

.smmgon-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dim);
    margin-bottom: 7px
}

.smmgon-field {
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;
    font-family: var(--font);
    color: var(--text);
    background: rgba(23, 23, 26, .7);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.smmgon-field::placeholder {
    color: var(--text-mut)
}

.smmgon-field:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
    background: rgba(23, 23, 26, .95)
}

.smmgon-field-pass .smmgon-forgot {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    font-size: 13px;
    color: var(--brand)
}

.smmgon-field-pass .smmgon-forgot:hover {
    color: var(--brand-bright)
}

.smmgon-or {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--text-mut);
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 18px 0
}

.smmgon-or::before,
.smmgon-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line)
}

.smmgon-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px;
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line-2);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

.smmgon-google-btn:hover {
    border-color: rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .07)
}

.smmgon-secure-note {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    color: var(--text-mut);
    font-size: 12.5px;
    margin: 18px 0 6px
}

.smmgon-secure-note i {
    color: var(--brand);
    font-size: 11px
}

.smmgon-login-foot {
    text-align: center;
    font-size: 14px;
    color: var(--text-dim);
    margin: 0
}

.smmgon-login-foot a {
    color: var(--brand);
    font-weight: 600
}

/* ---------- marquee ---------- */

.smmgon-marquee {
    overflow: hidden;
    padding: 6px 0 0;
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.smmgon-marquee-track {
    display: flex;
    gap: clamp(34px, 5vw, 64px);
    width: max-content;
    animation: smmgon-marquee 36s linear infinite;
    padding: 14px 0
}

.smmgon-marquee-track i {
    font-size: 26px;
    color: var(--text-mut);
    transition: color .2s ease
}

.smmgon-marquee-track i:hover {
    color: var(--brand)
}

@keyframes smmgon-marquee {
    to {
        transform: translateX(-50%)
    }
}

/* ---------- stats: glass strip, gradient numbers ---------- */

.smmgon-stats {
    padding: clamp(24px, 4vw, 48px) 0
}

.smmgon-stats-live {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-dim);
}

.smmgon-stats-live {
    align-items: center
}

.smmgon-stats-live i {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-bright);
    box-shadow: 0 0 0 3px rgba(17, 212, 158, .18), 0 0 12px rgba(17, 212, 158, .8);
    animation: smmgon-pulse 2.2s ease-in-out infinite;
}

/* wrap dot+text into a quiet chip */

.smmgon-stats-live {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(18, 18, 20, .7);
    border: 1px solid var(--line);
}

@keyframes smmgon-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(17, 212, 158, .5)
    }
    50% {
        box-shadow: 0 0 0 6px rgba(17, 212, 158, 0)
    }
}

.smmgon-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px
}

.smmgon-stat {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 24px 14px 20px;
    border-radius: 14px;
    background: rgba(18, 18, 20, .6);
    border: 1px solid var(--line);
    transition: border-color .25s ease, transform .2s var(--ease-out);
}

.smmgon-stat::before {
    /* luminous top edge, same language as the login card */
    content: "";
    position: absolute;
    top: 0;
    left: 18%;
    right: 18%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(17, 212, 158, .65), transparent);
}

.smmgon-stat:hover {
    border-color: rgba(17, 212, 158, .35);
    transform: translateY(-2px)
}

.smmgon-stat-num {
    display: block;
    margin-bottom: 5px;
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(21px, 2.3vw, 29px);
    font-weight: 700;
    letter-spacing: -1px;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.smmgon-stat-label {
    font-size: 11.5px;
    color: var(--text-mut);
    text-transform: uppercase;
    letter-spacing: .9px;
    font-weight: 600
}

@media(max-width:900px) {
    .smmgon-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px
    }
    .smmgon-stat:last-child {
        grid-column: span 2
    }
    .smmgon-stat {
        padding: 18px 12px 15px
    }
    .smmgon-stat-num {
        font-size: 22px
    }
}

/* ---------- trust ---------- */

.smmgon-guarantees {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px
}

@media(max-width:960px) {
    .smmgon-guarantees {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:560px) {
    .smmgon-guarantees {
        grid-template-columns: 1fr
    }
}

.smmgon-guarantee {
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 15px;
    align-items: flex-start;
    padding: 22px 20px;
    border-radius: var(--r-lg);
    background: rgba(18, 18, 20, .6);
    border: 1px solid var(--line);
    transition: border-color .25s ease, transform .2s var(--ease-out), box-shadow .25s ease;
}

.smmgon-guarantee::after {
    content: "";
    position: absolute;
    top: -50px;
    inset-inline-end: -50px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(17, 212, 158, .13), transparent);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.smmgon-guarantee:hover {
    border-color: rgba(17, 212, 158, .4);
    transform: translateY(-3px);
    box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .7)
}

.smmgon-guarantee:hover::after {
    opacity: 1
}

.smmgon-guarantee b {
    display: block;
    font-size: 15px;
    color: #fff;
    margin-bottom: 3px;
    letter-spacing: -.2px
}

.smmgon-guarantee span {
    font-size: 13px;
    color: var(--text-mut);
    line-height: 1.55
}

.smmgon-g-ic {
    flex: 0 0 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    font-size: 16px;
    color: var(--brand);
    background: linear-gradient(145deg, rgba(17, 212, 158, .13), rgba(17, 212, 158, .03));
    border: 1px solid rgba(17, 212, 158, .22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    transition: background .25s ease, color .25s ease, transform .25s var(--ease-out), box-shadow .25s ease;
}

.smmgon-guarantee:hover .smmgon-g-ic {
    background: var(--brand);
    color: #04130d;
    transform: scale(1.06);
    box-shadow: 0 10px 26px -8px rgba(17, 212, 158, .65);
}

.smmgon-trust-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.smmgon-pay {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 26px;
    color: var(--text-mut)
}

.smmgon-pay-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-mut)
}

.smmgon-pay i {
    transition: color .2s ease, transform .2s ease
}

.smmgon-pay i:hover {
    color: var(--text-dim);
    transform: translateY(-2px)
}

.smmgon-rated {
    font-size: 13.5px;
    color: var(--text-mut);
    margin: 0
}

.smmgon-rated b {
    color: var(--text-dim)
}

.smmgon-rated i {
    color: var(--brand)
}

/* ---------- how it works: luminous stepper ---------- */

.smmgon-flow {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px;
    counter-reset: step;
}

.smmgon-flow-step {
    position: relative;
    counter-increment: step;
    text-align: center
}

/* route segments BETWEEN nodes only — never across the icons */

.smmgon-flow-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 23px;
    height: 2px;
    left: calc(50% + 36px);
    right: calc(-50% + 36px);
    background: linear-gradient(90deg, transparent 0%, rgba(40, 255, 190, .9) 12%, transparent 24%), linear-gradient(90deg, rgba(17, 212, 158, .3), rgba(17, 212, 158, .12));
    background-size: 240% 100%, 100% 100%;
    background-repeat: no-repeat;
    animation: smmgon-flow-run 3.6s linear infinite;
}

.smmgon-flow-step:nth-child(2):not(:last-child)::after {
    animation-delay: 1.2s
}

.smmgon-flow-step:nth-child(3):not(:last-child)::after {
    animation-delay: 2.4s
}

@keyframes smmgon-flow-run {
    0% {
        background-position: -140% 0, 0 0
    }
    100% {
        background-position: 240% 0, 0 0
    }
}

.smmgon-flow-node {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    margin: 0 auto 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 16px;
    color: var(--brand);
    background: #0d1310;
    border: 2px solid rgba(17, 212, 158, .4);
    box-shadow: none;
    transition: background .25s ease, color .25s ease, transform .25s var(--ease-out), box-shadow .25s ease;
}

.smmgon-flow-step:hover .smmgon-flow-node {
    background: var(--brand);
    color: #04130d;
    transform: scale(1.08);
    box-shadow: 0 0 24px -4px rgba(17, 212, 158, .6);
}

.smmgon-flow-step h3 {
    font-size: 16.5px;
    margin: 0 0 7px;
    color: #fff
}

.smmgon-flow-step h3::before {
    content: "0" counter(step);
    display: block;
    margin-bottom: 6px;
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--brand);
}

.smmgon-flow-step p {
    font-size: 13.5px;
    color: var(--text-mut);
    margin: 0 auto;
    line-height: 1.6;
    max-width: 240px;
    text-wrap: balance
}

@media(max-width:900px) {
    .smmgon-flow {
        grid-template-columns: 1fr;
        gap: 26px
    }
    .smmgon-flow-step:not(:last-child)::after {
        left: 23px;
        right: auto;
        top: 58px;
        bottom: -32px;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg, transparent 0%, rgba(40, 255, 190, .9) 12%, transparent 24%), linear-gradient(180deg, rgba(17, 212, 158, .3), rgba(17, 212, 158, .12));
        background-size: 100% 240%, 100% 100%;
        background-repeat: no-repeat;
        animation: smmgon-flow-run-v 3.6s linear infinite;
    }
    @keyframes smmgon-flow-run-v {
        0% {
            background-position: 0 -140%, 0 0
        }
        100% {
            background-position: 0 240%, 0 0
        }
    }
    .smmgon-flow-step {
        display: grid;
        grid-template-columns: 48px 1fr;
        gap: 0 18px;
        text-align: left
    }
    .smmgon-flow-node {
        margin: 0;
        grid-row: 1 / span 2
    }
    .smmgon-flow-step h3 {
        grid-column: 2
    }
    .smmgon-flow-step h3::before {
        display: inline;
        margin-inline-end: 8px
    }
    .smmgon-flow-step p {
        grid-column: 2;
        margin: 0;
        max-width: none
    }
}

.smmgon-flow-cta {
    text-align: center;
    margin-top: 36px
}

.smmgon-flow-note {
    display: block;
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-mut)
}

.smmgon-flow-note i {
    color: var(--brand);
    margin-inline-end: 6px
}

.smmgon-flow-node {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 17px;
    color: var(--brand-bright);
    margin-bottom: 16px;
    background: linear-gradient(145deg, rgba(17, 212, 158, .22), rgba(17, 212, 158, .05));
    border: 1px solid rgba(17, 212, 158, .35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 22px -10px rgba(17, 212, 158, .5);
    transition: background .25s ease, color .25s ease, transform .25s var(--ease-out), box-shadow .25s ease;
}

.smmgon-flow-step:hover .smmgon-flow-node {
    background: var(--brand);
    color: #04130d;
    transform: scale(1.06);
    box-shadow: 0 10px 26px -8px rgba(17, 212, 158, .65);
}

.smmgon-flow-step h3 {
    font-size: 16.5px;
    margin-bottom: 6px
}

.smmgon-flow-step p {
    font-size: 13.5px;
    color: var(--text-mut);
    margin: 0;
    line-height: 1.55
}

/* ---------- bento ---------- */

.smmgon-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
}

@media(max-width:960px) {
    .smmgon-bento {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:560px) {
    .smmgon-bento {
        grid-template-columns: 1fr
    }
}

.smmgon-bento-card {
    position: relative;
    padding: 26px;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: rgba(18, 18, 20, .6);
    border: 1px solid var(--line);
    transition: border-color .2s ease, transform .2s var(--ease-out);
}

.smmgon-bento-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16%;
    right: 16%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(17, 212, 158, .5), transparent);
}

.smmgon-bento-feature .smmgon-bento-head::after {
    content: "\f0e7";
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 14px;
    inset-inline-end: 20px;
    font-size: 92px;
    line-height: 1;
    color: rgba(17, 212, 158, .05);
    pointer-events: none;
}

.smmgon-bento-card:hover {
    border-color: rgba(17, 212, 158, .35);
    transform: translateY(-3px)
}

.smmgon-bento-card::after {
    /* corner glow on hover */
    content: "";
    position: absolute;
    top: -60px;
    inset-inline-end: -60px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(17, 212, 158, .14), transparent);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.smmgon-bento-card:hover::after {
    opacity: 1
}

.smmgon-bento-feature {
    grid-column: span 2;
    grid-row: span 1;
    background: radial-gradient(120% 140% at 0% 0%, rgba(17, 212, 158, .10), transparent 55%), rgba(18, 18, 20, .6);
}

@media(max-width:560px) {
    .smmgon-bento-feature {
        grid-column: span 1
    }
}

.smmgon-bento-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 14px
}

.smmgon-bento-ic {
    flex: 0 0 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    font-size: 16px;
    color: var(--brand);
    background: linear-gradient(145deg, rgba(17, 212, 158, .13), rgba(17, 212, 158, .03));
    border: 1px solid rgba(17, 212, 158, .22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    transition: background .25s ease, color .25s ease, transform .25s var(--ease-out), box-shadow .25s ease;
}

.smmgon-bento-card:hover .smmgon-bento-ic {
    background: var(--brand);
    color: #04130d;
    transform: scale(1.06);
    box-shadow: 0 10px 26px -8px rgba(17, 212, 158, .65);
}

.smmgon-bento-card h3 {
    font-size: 17.5px;
    margin: 0
}

.smmgon-bento-card p {
    font-size: 14px;
    color: var(--text-dim);
    margin: 0 0 16px;
    line-height: 1.65;
    max-width: 560px
}

.smmgon-bento-card .smmgon-chip {
    margin-top: auto;
    align-self: flex-start
}

.smmgon-bento-card {
    display: flex;
    flex-direction: column
}

.smmgon-bento-stats {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 6px
}

.smmgon-bento-stats>div {
    padding-inline: clamp(14px, 2.6vw, 30px);
    border-inline-start: 1px solid var(--line)
}

.smmgon-bento-stats>div:first-child {
    padding-inline-start: 0;
    border-inline-start: 0
}

.smmgon-bento-stats>div b {
    display: block;
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 800;
    letter-spacing: -.5px;
    background: linear-gradient(180deg, #fff 30%, var(--brand) 130%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.smmgon-bento-stats>div span {
    font-size: 12px;
    color: var(--text-mut);
    text-transform: uppercase;
    letter-spacing: .6px;
    font-weight: 600
}

.smmgon-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 4px 8px 8px 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    color: var(--text-dim);
    background: linear-gradient(90deg, rgba(17, 212, 158, .09), transparent 75%);
    border: 1px solid var(--line);
    border-inline-start: 2px solid var(--brand);
}

.smmgon-chip i {
    color: var(--brand);
    font-size: 11px
}

/* ---------- FAQ: centered head + 2-col accordion ---------- */

.smmgon-faq-head {
    text-align: center;
    margin-bottom: 36px
}

.smmgon-faq-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid rgba(17, 212, 158, .3);
}

.smmgon-faq-head .smmgon-sec-sub {
    margin-bottom: 0
}

.smmgon-faq-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
    align-items: start
}

@media(max-width:900px) {
    .smmgon-faq-cols {
        grid-template-columns: 1fr
    }
}

.smmgon-faq-group {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--text-mut);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.smmgon-faq-group::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line)
}

.smmgon-faq-group i {
    color: var(--brand);
    font-size: 13px
}

/* support strip under the accordion — ticket style */

.smmgon-faq-support {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 28px auto 0;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--brand);
    border-radius: 4px 14px 14px 4px;
    background: linear-gradient(90deg, rgba(17, 212, 158, .06), rgba(18, 18, 20, .6) 55%);
    width: fit-content;
    max-width: 100%;
}

.smmgon-faq-support .smmgon-g-ic {
    flex: 0 0 34px;
    height: 34px;
    border-radius: 9px
}

.smmgon-faq-support>div {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0
}

.smmgon-faq-support b {
    font-size: 14px;
    color: #fff
}

.smmgon-faq-support span {
    font-size: 12.5px;
    color: var(--text-mut)
}

.smmgon-faq-support span::before {
    content: "· "
}

/* separator lives in CSS so the mobile column drops it */

.smmgon-faq-support .smmgon-btn {
    padding: 9px 18px;
    font-size: 13px;
    flex: 0 0 auto
}

@media(max-width:640px) {
    .smmgon-faq-support {
        width: 100%;
        flex-wrap: wrap;
        gap: 10px 12px;
        padding: 12px 14px
    }
    .smmgon-faq-support .smmgon-g-ic {
        flex-basis: 30px;
        height: 30px;
        border-radius: 8px;
        font-size: 13px
    }
    .smmgon-faq-support>div {
        flex: 1;
        flex-direction: column;
        gap: 1px
    }
    .smmgon-faq-support span {
        font-size: 12px
    }
    .smmgon-faq-support span::before {
        content: none
    }
    .smmgon-faq-support .smmgon-btn {
        flex: 1 1 100%;
        padding: 11px 14px
    }
}

.smmgon-q {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(18, 18, 20, .55);
    margin-bottom: 10px;
    overflow: hidden;
    transition: border-color .25s ease, background .25s ease;
}

.smmgon-q::before {
    /* green accent bar when open */
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--brand), transparent);
    opacity: 0;
    transition: opacity .25s ease;
}

.smmgon-q:hover {
    border-color: var(--line-2)
}

.smmgon-q[open] {
    border-color: rgba(17, 212, 158, .35);
    background: linear-gradient(180deg, rgba(17, 212, 158, .05), rgba(18, 18, 20, .55) 40%);
}

.smmgon-q[open]::before {
    opacity: 1
}

.smmgon-q summary {
    list-style: none;
    cursor: pointer;
    padding: 17px 54px 17px 20px;
    position: relative;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dim);
    transition: color .2s ease;
}

.smmgon-q summary:hover,
.smmgon-q[open] summary {
    color: #fff
}

.smmgon-q summary::-webkit-details-marker {
    display: none
}

.smmgon-q summary::after {
    content: "+";
    position: absolute;
    inset-inline-end: 16px;
    top: 14px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid rgba(17, 212, 158, .25);
    font-weight: 600;
    font-size: 15px;
    transition: transform .3s var(--ease-out), background .2s ease;
}

.smmgon-q[open] summary::after {
    transform: rotate(45deg)
}

.smmgon-q p {
    margin: 0;
    padding: 2px 20px 18px;
    font-size: 14px;
    color: var(--text-dim);
    line-height: 1.7;
    animation: smmgon-fade-in .35s var(--ease-out);
}

.smmgon-q p b,
.smmgon-q p strong {
    color: var(--text)
}

@keyframes smmgon-fade-in {
    from {
        opacity: 0;
        transform: translateY(-4px)
    }
    to {
        opacity: 1;
        transform: none
    }
}

/* ---------- partners: bold tile grid ---------- */

.smmgon-partners {
    padding: clamp(40px, 6vw, 72px) 0
}

.smmgon-partners-cap {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--text-mut);
    margin-bottom: 28px;
}

.smmgon-partners-cap::before,
.smmgon-partners-cap::after {
    content: "";
    width: 64px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(17, 212, 158, .5));
}

.smmgon-partners-cap::after {
    background: linear-gradient(90deg, rgba(17, 212, 158, .5), transparent)
}

.smmgon-partners-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

@media(max-width:1000px) {
    .smmgon-partners-row {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media(max-width:560px) {
    .smmgon-partners-row {
        grid-template-columns: repeat(2, 1fr)
    }
}

.smmgon-partner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--bg-1);
    transition: border-color .25s ease, transform .2s var(--ease-out), box-shadow .25s ease;
}

.smmgon-partner img {
    width: 100%;
    height: 88px;
    object-fit: cover;
    border-radius: 13px;
    opacity: .85;
    transition: opacity .25s ease, transform .35s var(--ease-out);
}

.smmgon-partner::after {
    /* sheen sweep on hover */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .08) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .6s ease;
}

.smmgon-partner:hover {
    border-color: rgba(17, 212, 158, .45);
    transform: translateY(-4px);
    box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .7), 0 0 24px -8px rgba(17, 212, 158, .35)
}

.smmgon-partner:hover img {
    opacity: 1;
    transform: scale(1.04)
}

.smmgon-partner:hover::after {
    transform: translateX(120%)
}

@media(max-width:560px) {
    .smmgon-partner img {
        height: 72px
    }
}

/* ---------- review badges: compact strip ---------- */

.smmgon-reviews {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 18px 0;
    margin-bottom: 26px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.smmgon-reviews a {
    display: flex;
    border-radius: 9px;
    overflow: hidden;
    opacity: .65;
    filter: grayscale(.35);
    transition: opacity .25s ease, filter .25s ease, transform .2s var(--ease-out);
}

.smmgon-reviews img {
    height: 38px;
    width: auto
}

.smmgon-reviews a:hover {
    opacity: 1;
    filter: none;
    transform: translateY(-2px)
}

@media(max-width:600px) {
    .smmgon-reviews img {
        height: 32px
    }
}

/* ---------- footer: brand strip + packed link columns ---------- */

.smmgon-footer {
    border-top: 1px solid var(--line);
    padding: 0 0 36px;
    margin-top: 24px;
    background: linear-gradient(180deg, transparent, rgba(17, 212, 158, .03))
}

.smmgon-foot-top {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    padding: 30px 0 26px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 32px;
}

.smmgon-foot-brand {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.smmgon-foot-brand .smmgon-logo {
    font-size: 24px
}

.smmgon-foot-tagline {
    font-size: 13px;
    color: var(--text-mut)
}

.smmgon-foot-title-mini {
    margin-inline-start: auto;
    text-align: right;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-mut);
}

.smmgon-foot-title-mini b {
    display: block;
    color: var(--text-dim);
    font-size: 13px;
    letter-spacing: .5px;
    text-transform: none;
    font-weight: 600
}

@media(max-width:700px) {
    .smmgon-foot-title-mini {
        margin-inline-start: 0;
        text-align: left
    }
}

/* services switcher: platform chips + link pills (CSS-only tabs) */

.smmgon-svc {
    margin-bottom: 34px
}

.smmgon-svc input[type=radio] {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

.smmgon-svc-tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 14px
}

@media(max-width:1000px) {
    .smmgon-svc-tabs {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media(max-width:560px) {
    .smmgon-svc-tabs {
        grid-template-columns: repeat(2, 1fr)
    }
}

.smmgon-svc-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    padding: 11px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dim);
    white-space: nowrap;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    transition: color .18s ease, border-color .18s ease, background .18s ease, transform .15s ease;
    user-select: none;
}

.smmgon-svc-tab i {
    font-size: 13px;
    color: var(--text-mut);
    transition: color .18s ease
}

.smmgon-svc-tab:hover {
    color: #fff;
    border-color: var(--line-2);
    transform: translateY(-1px)
}

.smmgon-svc-panels {
    position: relative;
    min-height: 92px
}

.smmgon-svc-panel {
    display: none;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    animation: smmgon-fade-in .3s var(--ease-out)
}

@media(max-width:1000px) {
    .smmgon-svc-panel {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media(max-width:560px) {
    .smmgon-svc-panel {
        grid-template-columns: repeat(2, 1fr)
    }
}

.smmgon-svc-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 12.5px;
    color: var(--text-mut);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(18, 18, 20, .6);
    border: 1px solid var(--line);
    transition: color .18s ease, border-color .18s ease, transform .15s ease;
}

.smmgon-svc-link::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-mut);
    transition: background .18s ease
}

.smmgon-svc-link:hover {
    color: var(--brand);
    border-color: rgba(17, 212, 158, .4);
    transform: translateY(-1px)
}

.smmgon-svc-link:hover::before {
    background: var(--brand)
}

/* active tab + visible panel wiring */

#svc-yt:checked~.smmgon-svc-tabs label[for=svc-yt],
#svc-tw:checked~.smmgon-svc-tabs label[for=svc-tw],
#svc-tt:checked~.smmgon-svc-tabs label[for=svc-tt],
#svc-tg:checked~.smmgon-svc-tabs label[for=svc-tg],
#svc-ig:checked~.smmgon-svc-tabs label[for=svc-ig],
#svc-fb:checked~.smmgon-svc-tabs label[for=svc-fb],
#svc-rd:checked~.smmgon-svc-tabs label[for=svc-rd],
#svc-li:checked~.smmgon-svc-tabs label[for=svc-li],
#svc-sm:checked~.smmgon-svc-tabs label[for=svc-sm],
#svc-fr:checked~.smmgon-svc-tabs label[for=svc-fr] {
    color: var(--brand);
    background: var(--brand-soft);
    border-color: rgba(17, 212, 158, .4);
}

#svc-yt:checked~.smmgon-svc-tabs label[for=svc-yt] i,
#svc-tw:checked~.smmgon-svc-tabs label[for=svc-tw] i,
#svc-tt:checked~.smmgon-svc-tabs label[for=svc-tt] i,
#svc-tg:checked~.smmgon-svc-tabs label[for=svc-tg] i,
#svc-ig:checked~.smmgon-svc-tabs label[for=svc-ig] i,
#svc-fb:checked~.smmgon-svc-tabs label[for=svc-fb] i,
#svc-rd:checked~.smmgon-svc-tabs label[for=svc-rd] i,
#svc-li:checked~.smmgon-svc-tabs label[for=svc-li] i,
#svc-sm:checked~.smmgon-svc-tabs label[for=svc-sm] i,
#svc-fr:checked~.smmgon-svc-tabs label[for=svc-fr] i {
    color: var(--brand)
}

#svc-yt:checked~.smmgon-svc-panels .smmgon-svc-p-yt,
#svc-tw:checked~.smmgon-svc-panels .smmgon-svc-p-tw,
#svc-tt:checked~.smmgon-svc-panels .smmgon-svc-p-tt,
#svc-tg:checked~.smmgon-svc-panels .smmgon-svc-p-tg,
#svc-ig:checked~.smmgon-svc-panels .smmgon-svc-p-ig,
#svc-fb:checked~.smmgon-svc-panels .smmgon-svc-p-fb,
#svc-rd:checked~.smmgon-svc-panels .smmgon-svc-p-rd,
#svc-li:checked~.smmgon-svc-panels .smmgon-svc-p-li,
#svc-sm:checked~.smmgon-svc-panels .smmgon-svc-p-sm,
#svc-fr:checked~.smmgon-svc-panels .smmgon-svc-p-fr {
    display: grid
}

.smmgon-foot-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding-top: 4px
}

.smmgon-copy {
    font-size: 13px;
    color: var(--text-mut);
    margin: 0
}

.smmgon-socials {
    display: flex;
    gap: 10px
}

.smmgon-socials a {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 15px;
    color: var(--text-dim);
    border: 1px solid var(--line);
    transition: all .2s ease;
}

.smmgon-socials a:hover {
    color: var(--brand);
    border-color: var(--brand);
    transform: translateY(-2px)
}

.smmgon-legal {
    display: flex;
    gap: 18px;
    font-size: 13px;
    color: var(--text-mut)
}

.smmgon-legal a:hover {
    color: var(--brand)
}

/* ---------- reveal on scroll ---------- */

/* reveal is opt-in: only when JS confirmed itself (html.smmgon-js) and on
   pointer devices. Touch/mobile and no-JS always see full content. */

.smmgon-js .smmgon-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s var(--ease-out), transform .5s var(--ease-out)
}

.smmgon-js .smmgon-reveal.is-in {
    opacity: 1;
    transform: none
}

@media (hover:none) and (pointer:coarse) {
    .smmgon-js .smmgon-reveal {
        opacity: 1;
        transform: none;
        transition: none
    }
}

@media (prefers-reduced-motion:reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important
    }
    .smmgon-reveal {
        opacity: 1;
        transform: none
    }
}

/* ============================================================
   PANEL COMPAT — bootstrap dark overrides + guards
   (panel markup: language dropdown, alerts, GSI button, forms)
   ============================================================ */

/* bootstrap buttons/forms inherit brand */

.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #04130d
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--brand-bright);
    border-color: var(--brand-bright);
    color: #04130d
}

.btn-link {
    color: var(--brand)
}

.btn-link:hover {
    color: var(--brand-bright)
}

.form-control {
    background: rgba(23, 23, 26, .7);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: var(--r-md);
    box-shadow: none;
    font-size: 16px;
    height: auto;
    padding: 12px 16px
}

.form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
    background: rgba(23, 23, 26, .95)
}

label,
.control-label {
    color: var(--text-dim);
    font-weight: 600;
    font-size: 13px
}

/* bootstrap dropdowns (language switcher, currencies) — dark glass */

.dropdown-menu {
    background: rgba(16, 16, 18, .97);
    border: 1px solid var(--line-2);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
    padding: 8px;
    min-width: 180px;
}

.dropdown-menu>li>a {
    color: var(--text-dim);
    border-radius: 9px;
    padding: 9px 12px;
    font-size: 13.5px
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
    color: #fff;
    background: rgba(255, 255, 255, .05)
}

.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover {
    color: var(--brand);
    background: var(--brand-soft)
}

.dropdown-max-height {
    max-height: 340px;
    overflow-y: auto
}

.dropdown-max-height::-webkit-scrollbar {
    width: 5px
}

.dropdown-max-height::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .12);
    border-radius: 99px
}

/* bootstrap alerts — dark */

.alert {
    border-radius: var(--r-md);
    font-size: 13.5px;
    border: 1px solid
}

.alert-danger {
    color: #ffb3ba;
    background: rgba(255, 77, 94, .08);
    border-color: rgba(255, 77, 94, .3)
}

.alert-success {
    color: #a9f5dd;
    background: rgba(17, 212, 158, .08);
    border-color: rgba(17, 212, 158, .3)
}

.alert .close {
    color: inherit;
    opacity: .6;
    text-shadow: none
}

/* smmgon-form aliases used by twig login/signup markup */

.smmgon-alert {
    padding: 12px 16px;
    border-radius: var(--r-md);
    font-size: 13.5px;
    margin-bottom: 16px;
    border: 1px solid
}

.smmgon-alert-error {
    color: #ffb3ba;
    background: rgba(255, 77, 94, .08);
    border-color: rgba(255, 77, 94, .3)
}

.smmgon-alert-ok {
    color: #a9f5dd;
    background: rgba(17, 212, 158, .08);
    border-color: rgba(17, 212, 158, .3)
}

.smmgon-field-row {
    margin-bottom: 16px;
    position: relative
}

.smmgon-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dim);
    margin-bottom: 7px
}

.smmgon-field {
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;
    font-family: var(--font);
    color: var(--text);
    background: rgba(23, 23, 26, .7);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.smmgon-field::placeholder {
    color: var(--text-mut)
}

.smmgon-field:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
    background: rgba(23, 23, 26, .95)
}

/* mobile burger nav (checkbox pattern from layout.twig) */

.smmgon-navtoggle-cb {
    display: none
}

.smmgon-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    padding: 0 11px
}

.smmgon-burger span {
    display: block;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: all .25s var(--ease-out)
}

.smmgon-nav-backdrop {
    display: none
}

@media(max-width:560px) {
    .smmgon-header-inner {
        gap: 10px
    }
    .smmgon-logo img {
        height: 100px;
    }
    .smmgon-lang-btn {
        padding: 8px 10px;
        font-size: 13px
    }
    .smmgon-signup {
        padding: 9px 14px;
        font-size: 13px
    }
}

@media(max-width:900px) {
    .smmgon-burger {
        display: flex
    }
    .smmgon-nav {
        display: flex;
        position: fixed;
        top: 68px;
        inset-inline-start: 0;
        inset-inline-end: 0;
        z-index: 49;
        flex-direction: column;
        gap: 2px;
        padding: 12px 20px 18px;
        background: rgba(10, 10, 11, .97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--line);
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: transform .25s var(--ease-out), opacity .2s ease, visibility .2s;
    }
    .smmgon-navtoggle-cb:checked~.smmgon-header .smmgon-nav {
        transform: none;
        opacity: 1;
        visibility: visible
    }
    .smmgon-navtoggle-cb:checked~.smmgon-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 48
    }
    .smmgon-nav-link {
        padding: 13px 14px;
        font-size: 15px
    }
    .smmgon-navtoggle-cb:checked~.smmgon-header .smmgon-burger span:nth-child(1) {
        transform: translateY(7px) rotate(45deg)
    }
    .smmgon-navtoggle-cb:checked~.smmgon-header .smmgon-burger span:nth-child(2) {
        opacity: 0
    }
    .smmgon-navtoggle-cb:checked~.smmgon-header .smmgon-burger span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg)
    }
}

/* google GSI iframe centering */

.smmgon-google {
    display: flex;
    justify-content: center
}

.smmgon-or {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--text-mut);
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 18px 0
}

.smmgon-or::before,
.smmgon-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line)
}

.smmgon-login-title {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.5px;
    margin-bottom: 2px;
    color: #fff
}

.smmgon-login-sub {
    color: var(--text-dim);
    font-size: 14px;
    margin: 0 0 22px
}

.smmgon-field-pass .smmgon-forgot {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    font-size: 13px;
    color: var(--brand)
}

.smmgon-field-pass .smmgon-forgot:hover {
    color: var(--brand-bright)
}

.smmgon-secure-note {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    color: var(--text-mut);
    font-size: 12.5px;
    margin: 18px 0 6px
}

.smmgon-secure-note i {
    color: var(--brand);
    font-size: 11px
}

.smmgon-login-foot {
    text-align: center;
    font-size: 14px;
    color: var(--text-dim);
    margin: 0
}

.smmgon-login-foot a {
    color: var(--brand);
    font-weight: 600
}

.smmgon-login-card {
    position: relative;
    border-radius: 20px;
    padding: 30px 28px;
    background: rgba(18, 18, 20, .62);
    border: 1px solid var(--line);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55), 0 0 80px -30px rgba(17, 212, 158, .25);
}

.smmgon-login-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 21px;
    padding: 1px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(17, 212, 158, .5), rgba(17, 212, 158, .08) 30%, transparent 60%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* RTL safety */

.rtl-form,
.rtl-content,
.rtl-alert {
    direction: rtl;
    text-align: right
}

/* auth (dashboard) pages keep stock bootstrap look readable on dark */

.navbar-default {
    background: #101012;
    border-color: var(--line)
}

.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-brand {
    color: var(--text-dim)
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>.active>a {
    color: #fff;
    background: transparent
}

.well {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: none;
    color: var(--text)
}

.table {
    color: var(--text)
}

.table>tbody>tr>td,
.table>thead>tr>th {
    border-color: var(--line)
}

.pagination>li>a {
    background: var(--bg-1);
    border-color: var(--line);
    color: var(--text-dim)
}

.pagination>li>a:hover {
    background: var(--bg-2);
    color: #fff;
    border-color: var(--line-2)
}

.pagination>.active>a,
.pagination>.active>a:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #04130d
}

.modal-content {
    background: #121214;
    border: 1px solid var(--line-2);
    border-radius: 18px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, .7)
}

.modal-header,
.modal-footer {
    border-color: var(--line)
}

.modal-title {
    color: #fff
}

.modal .close {
    color: #fff;
    opacity: .5;
    text-shadow: none
}

/* mobile-first & browser-safety guards (rule #1) */

img,
svg,
video,
iframe,
table {
    max-width: 100%
}

input,
select,
textarea,
button {
    font-family: var(--font)
}

input,
select,
textarea {
    font-size: 16px
}

/* stop iOS zoom */

:focus:not(:focus-visible) {
    outline: none
}

a:focus,
a:focus:hover {
    outline: none;
    text-decoration: none
}

.smmgon-logo:focus,
.smmgon-nav-link:focus,
.smmgon-btn:focus {
    outline: none;
    text-decoration: none;
    box-shadow: none
}

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

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none
}

/* ============================================================
   SIGNUP PAGE (signup.twig)
   ============================================================ */

/* ---- layout: form + value panel ---- */

.su-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    padding: clamp(28px, 5vw, 64px) 0
}

.su-grid {
    display: grid;
    grid-template-columns: minmax(0, 460px) minmax(0, 440px);
    gap: clamp(32px, 6vw, 88px);
    justify-content: center;
    align-items: center;
    width: 100%
}

@media(max-width:1000px) {
    .su-grid {
        grid-template-columns: minmax(0, 460px);
        justify-content: center
    }
    .su-value {
        display: none
    }
}

/* card */

.su-card {
    position: relative;
    border-radius: 20px;
    padding: clamp(24px, 4vw, 34px) clamp(20px, 3.5vw, 32px);
    background: rgba(18, 18, 20, .62);
    border: 1px solid var(--line);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55), 0 0 80px -30px rgba(17, 212, 158, .25);
}

.su-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 21px;
    padding: 1px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(17, 212, 158, .5), rgba(17, 212, 158, .08) 30%, transparent 60%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude
}

.su-title {
    margin: 0 0 4px;
    font-size: clamp(22px, 2.4vw, 26px);
    font-weight: 800;
    letter-spacing: -.5px;
    color: #fff
}

.su-sub {
    margin: 0 0 22px;
    font-size: 14px;
    color: var(--text-dim)
}

.su-sub b {
    color: var(--brand);
    font-weight: 600
}

.su-field-row {
    margin-bottom: 15px
}

.su-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dim);
    margin-bottom: 7px
}

.su-field {
    width: 100%;
    padding: 13px 16px;
    font-size: 16px;
    font-family: var(--font);
    color: var(--text);
    background: rgba(23, 23, 26, .7);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    min-height: 48px;
}

.su-field::placeholder {
    color: var(--text-mut)
}

.su-field:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
    background: rgba(23, 23, 26, .95)
}

/* terms checkbox (custom, still a real input) */

.su-terms {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 4px 0 18px;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--text-dim);
    line-height: 1.5
}

.su-terms input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0
}

.su-check {
    flex: 0 0 20px;
    height: 20px;
    margin-top: 2px;
    border-radius: 6px;
    border: 1px solid var(--line-2);
    background: rgba(23, 23, 26, .7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .18s ease, border-color .18s ease;
}

.su-check i {
    font-size: 11px;
    color: #04130d;
    opacity: 0;
    transform: scale(.5);
    transition: all .18s var(--ease-out)
}

.su-terms input:checked+.su-check {
    background: var(--brand);
    border-color: var(--brand)
}

.su-terms input:checked+.su-check i {
    opacity: 1;
    transform: scale(1)
}

.su-terms input:focus-visible+.su-check {
    box-shadow: 0 0 0 3px var(--brand-soft)
}

.su-terms a {
    color: var(--brand)
}

.su-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 14px;
    border-radius: var(--r-md);
    min-height: 50px;
    font-weight: 600;
    font-size: 15px;
    font-family: var(--font);
    letter-spacing: .2px;
    background: var(--brand);
    color: #04130d;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, background .18s ease, box-shadow .2s ease;
}

.su-btn:hover {
    background: var(--brand-bright);
    box-shadow: 0 0 0 1px rgba(40, 255, 190, .4), 0 8px 32px -6px rgba(17, 212, 158, .45)
}

.su-btn:active {
    transform: translateY(1px)
}

.su-btn i {
    transition: transform .2s var(--ease-out)
}

.su-btn:hover i {
    transform: translateX(3px)
}

.su-or {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--text-mut);
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 16px 0
}

.su-or::before,
.su-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line)
}

.su-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 12px;
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    font-family: var(--font);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line-2);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

.su-google:hover {
    border-color: rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .07)
}

.su-foot {
    text-align: center;
    font-size: 14px;
    color: var(--text-dim);
    margin: 18px 0 0
}

.su-foot a {
    color: var(--brand);
    font-weight: 600
}

.su-secure {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    color: var(--text-mut);
    font-size: 12.5px;
    margin-top: 14px
}

.su-secure i {
    color: var(--brand);
    font-size: 11px
}

/* alerts (error/success contract) */

.su-alert {
    padding: 12px 16px;
    border-radius: var(--r-md);
    font-size: 13.5px;
    margin-bottom: 16px;
    border: 1px solid
}

.su-alert-error {
    color: #ffb3ba;
    background: rgba(255, 77, 94, .08);
    border-color: rgba(255, 77, 94, .3)
}

.su-alert-ok {
    color: #a9f5dd;
    background: rgba(17, 212, 158, .08);
    border-color: rgba(17, 212, 158, .3)
}

/* ---- value panel (desktop) ---- */

.su-value {
    max-width: 420px
}

.su-value h1 {
    margin: 0 0 12px;
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 800;
    letter-spacing: -.6px;
    line-height: 1.2;
    color: #fff
}

.su-value h1 span {
    background: linear-gradient(100deg, var(--brand) 10%, var(--brand-bright) 50%, var(--brand) 90%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: su-sheen 7s linear infinite;
}

@keyframes su-sheen {
    to {
        background-position: 200% 0
    }
}

.su-value>p {
    margin: 0 0 24px;
    font-size: 14.5px;
    color: var(--text-dim)
}

.su-points {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 13px
}

.su-points li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-dim)
}

.su-points li b {
    color: var(--text)
}

.su-point-ic {
    flex: 0 0 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 13px;
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid rgba(17, 212, 158, .25);
}

.su-proof {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12.5px;
    color: var(--text-mut)
}

.su-proof .stars {
    color: var(--brand);
    font-size: 11px;
    letter-spacing: 2px;
    white-space: nowrap;
    flex: 0 0 auto
}

@media (prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important
    }
}

/* ============================================================
   BLOG PAGE (blog.twig)
   ============================================================ */

/* ---- blog hero ---- */

.bl-hero {
    padding: clamp(36px, 5vw, 60px) 0 clamp(20px, 3vw, 36px);
    text-align: center
}

.bl-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid rgba(17, 212, 158, .3)
}

.bl-hero h1 {
    margin: 0 0 10px;
    font-size: clamp(28px, 3.6vw, 42px);
    font-weight: 800;
    letter-spacing: -1px;
    color: #fff
}

.bl-hero p {
    margin: 0 auto;
    color: var(--text-dim);
    max-width: 560px;
    font-size: 15px
}

/* ---- featured post ---- */

.bl-featured {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 0;
    margin: clamp(20px, 3vw, 36px) 0;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: rgba(18, 18, 20, .6);
    transition: border-color .25s ease, transform .2s var(--ease-out), box-shadow .25s ease
}

.bl-featured:hover {
    border-color: rgba(17, 212, 158, .35);
    transform: translateY(-3px);
    box-shadow: 0 20px 50px -16px rgba(0, 0, 0, .7), 0 0 40px -14px rgba(17, 212, 158, .3)
}

@media(max-width:800px) {
    .bl-featured {
        grid-template-columns: 1fr
    }
}

.bl-featured-img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/9
}

.bl-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s var(--ease-out)
}

.bl-featured:hover .bl-featured-img img {
    transform: scale(1.03)
}

.bl-featured-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #04130d;
    background: var(--brand)
}

.bl-featured-body {
    padding: clamp(20px, 3vw, 34px);
    display: flex;
    flex-direction: column;
    justify-content: center
}

.bl-featured-body h2 {
    margin: 0 0 12px;
    font-size: clamp(19px, 2.2vw, 25px);
    font-weight: 700;
    line-height: 1.3;
    color: #fff
}

.bl-featured-body p {
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--text-dim);
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.bl-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand)
}

.bl-more i {
    transition: transform .2s var(--ease-out);
    font-size: 12px
}

.bl-featured:hover .bl-more i,
.bl-card:hover .bl-more i {
    transform: translateX(4px)
}

/* meta row */

.bl-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12.5px;
    color: var(--text-mut);
    margin-bottom: 12px;
    flex-wrap: wrap
}

.bl-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.bl-meta i {
    color: var(--brand);
    font-size: 11px
}

/* ---- posts grid ---- */

.bl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: clamp(28px, 4vw, 44px)
}

@media(max-width:960px) {
    .bl-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:600px) {
    .bl-grid {
        grid-template-columns: 1fr
    }
}

.bl-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: rgba(18, 18, 20, .6);
    transition: border-color .25s ease, transform .2s var(--ease-out), box-shadow .25s ease
}

.bl-card:hover {
    border-color: rgba(17, 212, 158, .35);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .7), 0 0 30px -12px rgba(17, 212, 158, .3)
}

.bl-card-img {
    overflow: hidden;
    aspect-ratio: 16/9
}

.bl-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s var(--ease-out)
}

.bl-card:hover .bl-card-img img {
    transform: scale(1.04)
}

.bl-card-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1
}

.bl-card-body h3 {
    margin: 0 0 10px;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.bl-card-body p {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.bl-card .bl-more {
    margin-top: auto;
    font-size: 13px
}

.bl-card .bl-meta {
    margin-bottom: 10px
}

/* ---- pagination ---- */

.bl-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 0 0 clamp(48px, 6vw, 72px);
    list-style: none;
    margin: 0;
    flex-wrap: wrap
}

.bl-pagination a {
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dim);
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    transition: all .18s ease;
}

.bl-pagination a:hover {
    color: #fff;
    border-color: var(--line-2);
    transform: translateY(-1px)
}

.bl-pagination .is-active a {
    color: #04130d;
    background: var(--brand);
    border-color: var(--brand)
}

/* ============================================================
   BLOG POST PAGE (blogpost.twig) — vc.ru-grade reading experience
   ============================================================ */

/* reading progress bar (JS drives width) */

.bl-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 200;
    pointer-events: none;
    background: transparent
}

.bl-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--brand), #5be3c0);
    box-shadow: 0 0 12px rgba(17, 212, 158, .55)
}

.bl-post {
    max-width: 1108px;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 48px) 20px 64px
}

.bl-post-head {
    max-width: 760px;
    margin: 0 auto
}

@media(min-width:1100px) {
    /* head shares the reading grid so title/meta align with the text column;
     the cover goes full-bleed across both columns (magazine style) */
    .bl-post-head {
        max-width: none;
        margin: 0;
        display: grid;
        grid-template-columns: minmax(0, 760px) 260px;
        gap: 48px;
        justify-content: center
    }
    .bl-post-head>* {
        grid-column: 1
    }
    .bl-post-head .bl-post-cover {
        grid-column: 1 / -1
    }
}

.bl-post-cover {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    margin-bottom: 28px
}

.bl-post-cover img {
    width: 100%;
    height: auto;
    display: block
}

.bl-post-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, transparent 65%, rgba(10, 10, 11, .45));
    pointer-events: none
}

.bl-post-title {
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 14px
}

.bl-post-meta {
    display: flex;
    align-items: center;
    gap: 8px 18px;
    font-size: 13px;
    color: var(--text-mut);
    margin-bottom: 26px;
    flex-wrap: wrap
}

.bl-post-meta i {
    color: var(--brand);
    font-size: 12px;
    margin-inline-end: 6px
}

.bl-meta-item {
    display: inline-flex;
    align-items: center;
    font-variant-numeric: tabular-nums
}

.bl-post-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-dim);
    margin-bottom: 20px
}

.bl-post-back:hover {
    color: var(--brand)
}

/* ---- two-column reading layout: content + sticky rail ---- */

.bl-post-layout {
    max-width: 760px;
    margin: 0 auto
}

@media(min-width:1100px) {
    .bl-post-layout {
        display: grid;
        max-width: none;
        grid-template-columns: minmax(0, 760px) 260px;
        gap: 48px;
        justify-content: center;
        align-items: start
    }
    .bl-rail {
        order: 2;
        position: sticky;
        top: 96px
    }
}

/* table of contents */

.bl-toc {
    margin-bottom: 22px;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(18, 18, 20, .6);
    backdrop-filter: blur(8px)
}

.bl-toc[hidden] {
    display: none
}

.bl-toc-title {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 16px;
    cursor: pointer;
    user-select: none;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--text-mut)
}

.bl-toc-title i {
    color: var(--brand);
    font-size: 12px
}

.bl-toc-title .bl-toc-arrow {
    margin-inline-start: auto;
    transition: transform .25s var(--ease-out);
    color: var(--text-mut)
}

.bl-toc.is-open .bl-toc-arrow {
    transform: rotate(180deg)
}

.bl-toc ol {
    list-style: none;
    margin: 0;
    padding: 4px 8px 10px;
    display: none
}

.bl-toc.is-open ol {
    display: block
}

.bl-toc a {
    position: relative;
    display: block;
    padding: 8px 12px 8px 22px;
    border-radius: 9px;
    font-size: 13.5px;
    line-height: 1.45;
    font-weight: 500;
    color: var(--text-dim);
    transition: color .18s ease, background .18s ease
}

.bl-toc a::before {
    content: "";
    position: absolute;
    inset-inline-start: 9px;
    top: 50%;
    translate: 0 -50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--line-2);
    transition: background .18s ease, box-shadow .18s ease
}

.bl-toc a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .04)
}

.bl-toc a.is-active {
    color: var(--brand);
    background: var(--brand-soft)
}

.bl-toc a.is-active::before {
    background: var(--brand);
    box-shadow: 0 0 8px rgba(17, 212, 158, .7)
}

.bl-toc a.bl-toc-h3 {
    padding-inline-start: 36px;
    font-size: 12.5px;
    color: var(--text-mut)
}

.bl-toc a.bl-toc-h3::before {
    inset-inline-start: 23px
}

@media(min-width:1100px) {
    .bl-toc-title {
        cursor: default
    }
    .bl-toc ol {
        display: block;
        max-height: min(52vh, 480px);
        overflow: auto
    }
    .bl-toc-title .bl-toc-arrow {
        display: none
    }
}

/* share block */

.bl-share {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 26px
}

.bl-share-title {
    width: 100%;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--text-mut);
    margin-bottom: 2px
}

.bl-share a,
.bl-share button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    font-size: 15px;
    color: var(--text-dim);
    cursor: pointer;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    transition: color .18s ease, border-color .18s ease, transform .18s var(--ease-out), box-shadow .2s ease
}

.bl-share a:hover,
.bl-share button:hover {
    color: var(--brand);
    border-color: rgba(17, 212, 158, .4);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px -8px rgba(17, 212, 158, .4)
}

.bl-share button.is-done {
    color: var(--brand);
    border-color: rgba(17, 212, 158, .5);
    background: var(--brand-soft)
}

.bl-share-toast {
    width: 100%;
    font-size: 12px;
    color: var(--brand);
    opacity: 0;
    transition: opacity .25s ease
}

.bl-share-toast.is-on {
    opacity: 1
}

@media(max-width:1099px) {
    .bl-rail {
        display: flex;
        flex-direction: column
    }
    .bl-share {
        order: 2;
        margin: 2px 0 22px
    }
    .bl-share-title {
        display: none
    }
}

/* rendered article HTML */

.bl-post-content {
    font-size: 16px;
    line-height: 1.78;
    color: var(--text-dim)
}

/* vc-style lead paragraph */

.bl-post-content>p:first-of-type {
    font-size: 18.5px;
    line-height: 1.7;
    color: var(--text)
}

.bl-post-content>h1:first-child {
    display: none
}

/* panel already prints the title above */

.bl-post-content h1,
.bl-post-content h2 {
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 700;
    letter-spacing: -.5px;
    color: #fff;
    margin: 38px 0 14px;
    line-height: 1.3;
    scroll-margin-top: 86px
}

.bl-post-content h2 {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line)
}

.bl-post-content h3 {
    font-size: clamp(17px, 2vw, 20px);
    font-weight: 700;
    color: #fff;
    margin: 30px 0 12px;
    scroll-margin-top: 86px
}

.bl-post-content h4 {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 24px 0 10px;
    scroll-margin-top: 86px
}

.bl-post-content p {
    margin: 0 0 16px
}

.bl-post-content b,
.bl-post-content strong {
    color: var(--text)
}

.bl-post-content a {
    color: var(--brand);
    text-decoration: underline;
    text-decoration-color: rgba(17, 212, 158, .35);
    text-underline-offset: 3px
}

.bl-post-content a:hover {
    color: var(--brand-bright)
}

.bl-post-content ul,
.bl-post-content ol {
    margin: 0 0 18px;
    padding-inline-start: 24px
}

.bl-post-content li {
    margin-bottom: 8px
}

.bl-post-content li::marker {
    color: var(--brand)
}

.bl-post-content img {
    display: block;
    margin: 24px auto;
    border-radius: 14px;
    border: 1px solid var(--line);
    max-width: 100%;
    height: auto
}

.bl-post-content figure {
    margin: 24px 0
}

.bl-post-content figure img {
    margin: 0 auto 8px
}

.bl-post-content figcaption {
    text-align: center;
    font-size: 13px;
    color: var(--text-mut)
}

.bl-post-content blockquote {
    margin: 24px 0;
    padding: 16px 22px;
    border-inline-start: 3px solid var(--brand);
    background: rgba(17, 212, 158, .05);
    border-radius: 0 12px 12px 0;
    color: var(--text);
    font-style: italic;
}

.bl-post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 22px 0;
    font-size: 14px
}

.bl-post-content th,
.bl-post-content td {
    padding: 10px 14px;
    border: 1px solid var(--line);
    text-align: left
}

.bl-post-content th {
    background: rgba(255, 255, 255, .03);
    color: #fff
}

.bl-post-content hr {
    border: 0;
    height: 1px;
    background: var(--line);
    margin: 32px 0
}

.bl-post-content iframe {
    max-width: 100%;
    border-radius: 14px;
    border: 1px solid var(--line)
}

/* end-of-article CTA */

.bl-post-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 40px;
    padding: 22px 26px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: linear-gradient(90deg, rgba(17, 212, 158, .07), rgba(18, 18, 20, .6) 55%);
}

.bl-post-cta b {
    display: block;
    font-size: 16px;
    color: #fff
}

.bl-post-cta span {
    font-size: 13.5px;
    color: var(--text-mut)
}

.bl-post-cta {
    max-width: 760px;
    margin-inline: auto
}

@media(min-width:1100px) {
    .bl-post .bl-post-cta {
        max-width: 1068px;
        margin-top: 48px
    }
}

/* ============================================================
   API PAGE (api.twig)
   ============================================================ */

/* ---- API hero ---- */

.api-hero {
    padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 3vw, 40px)
}

.api-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid rgba(17, 212, 158, .3)
}

.api-hero h1 {
    margin: 0 0 10px;
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    letter-spacing: -1px;
    color: #fff
}

.api-hero p {
    margin: 0;
    color: var(--text-dim);
    max-width: 640px;
    font-size: 15.5px
}

/* endpoint bar */

.api-endpoint {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    margin-top: 26px;
    border: 1px solid rgba(17, 212, 158, .3);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(18, 18, 20, .7);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 40px -16px rgba(17, 212, 158, .35);
    max-width: 640px
}

.api-endpoint .method {
    padding: 13px 18px;
    font-family: var(--mono);
    font-size: 13.5px;
    font-weight: 700;
    color: #04130d;
    background: var(--brand)
}

.api-endpoint .url {
    flex: 1;
    padding: 13px 18px;
    font-family: var(--mono);
    font-size: 13.5px;
    color: var(--text);
    white-space: nowrap;
    overflow: auto
}

.api-endpoint .copy {
    padding: 13px 16px;
    border: 0;
    border-inline-start: 1px solid var(--line);
    background: transparent;
    color: var(--text-mut);
    cursor: pointer;
    font-size: 14px;
    transition: color .18s ease
}

.api-endpoint .copy:hover {
    color: var(--brand)
}

.api-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px
}

.api-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--text-dim);
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line)
}

.api-meta i {
    color: var(--brand);
    font-size: 12px
}

.api-meta a {
    color: var(--brand)
}

/* ---- layout: sidebar + content ---- */

.api-grid {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    padding: clamp(28px, 4vw, 48px) 0 80px
}

@media(max-width:900px) {
    .api-grid {
        grid-template-columns: 1fr
    }
}

.api-toc {
    position: sticky;
    top: 92px;
    align-self: start
}

@media(max-width:900px) {
    .api-toc {
        position: static;
        display: flex;
        gap: 8px;
        flex-wrap: wrap
    }
}

.api-toc-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--text-mut);
    margin-bottom: 12px
}

@media(max-width:900px) {
    .api-toc-label {
        width: 100%
    }
}

.api-toc a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-dim);
    border: 1px solid transparent;
    transition: all .18s ease
}

.api-toc a i {
    font-size: 12px;
    color: var(--text-mut);
    width: 16px;
    text-align: center;
    transition: color .18s ease
}

.api-toc a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .04)
}

.api-toc a.is-active {
    color: var(--brand);
    background: var(--brand-soft);
    border-color: rgba(17, 212, 158, .25)
}

.api-toc a.is-active i {
    color: var(--brand)
}

/* method card */

.api-method {
    margin-bottom: 26px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: rgba(18, 18, 20, .55);
    scroll-margin-top: 92px
}

.api-method-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(90deg, rgba(17, 212, 158, .05), transparent 60%)
}

.api-method-ic {
    flex: 0 0 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 14px;
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid rgba(17, 212, 158, .25)
}

.api-method-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    flex: 1
}

.api-action {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--brand);
    padding: 5px 12px;
    border-radius: 8px;
    background: rgba(17, 212, 158, .08);
    border: 1px solid rgba(17, 212, 158, .25)
}

.api-method-body {
    padding: 20px 22px
}

/* params table */

.api-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    margin-bottom: 18px
}

.api-table th {
    text-align: left;
    padding: 9px 14px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-mut);
    border-bottom: 1px solid var(--line-2)
}

.api-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    color: var(--text-dim);
    vertical-align: top
}

.api-table tr:last-child td {
    border-bottom: 0
}

.api-table td:first-child {
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--text);
    white-space: nowrap;
    width: 180px
}

.api-req {
    display: inline-block;
    margin-inline-start: 8px;
    padding: 1px 8px;
    border-radius: 6px;
    font-family: var(--font);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--brand);
    background: var(--brand-soft)
}

/* code block */

.api-code {
    position: relative;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #0d0e10;
    overflow: hidden
}

.api-code-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--line);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-mut)
}

.api-code-head i {
    color: var(--brand)
}

.api-code-copy {
    margin-inline-start: auto;
    background: transparent;
    border: 0;
    color: var(--text-mut);
    cursor: pointer;
    font-size: 13px;
    transition: color .18s ease
}

.api-code-copy:hover {
    color: var(--brand)
}

.api-code pre {
    margin: 0;
    padding: 16px 18px;
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.65;
    color: #c9d1d9;
    overflow-x: auto;
    background: transparent;
    border: 0;
    border-radius: 0;
    word-break: normal;
    white-space: pre;
    /* kill bootstrap pre styles */
}

.api-code .k {
    color: var(--brand)
}

/* keys */

.api-code .s {
    color: #e3b341
}

/* strings */

.api-code .n {
    color: #79c0ff
}

/* numbers */

/* type switcher (Add order) */

.api-types {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px
}

.api-type-btn {
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-dim);
    cursor: pointer;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    transition: all .18s ease;
    font-family: var(--font)
}

.api-type-btn:hover {
    color: #fff;
    border-color: var(--line-2)
}

.api-type-btn.is-active {
    color: var(--brand);
    background: var(--brand-soft);
    border-color: rgba(17, 212, 158, .4)
}

/* bottom cta */

.api-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 22px 26px;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: linear-gradient(90deg, rgba(17, 212, 158, .07), rgba(18, 18, 20, .6) 55%)
}

.api-cta b {
    display: block;
    font-size: 16px;
    color: #fff
}

.api-cta span {
    font-size: 13.5px;
    color: var(--text-mut)
}

.api-cta-btns {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

/* api type select (stock #service_type contract, panel JS drives it) */

.api-types {
    margin-bottom: 16px
}

.api-type-select {
    appearance: none;
    -webkit-appearance: none;
    height: 44px;
    padding: 0 38px 0 14px;
    border-radius: 11px;
    cursor: pointer;
    background: rgba(23, 23, 26, .8);
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 13.5px;
    font-weight: 600;
    font-family: var(--font);
    max-width: 100%;
}

.api-type-select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft)
}

/* ============================================================
   USER GUIDE PAGE (CMS page /user-guide) — video hub
   Content is pasted into the CMS page (source mode); the panel
   wraps it in bootstrap .container > .row > .col-md-8 > .well —
   neutralized below via :has().
   ============================================================ */

.well:has(.ug-hub) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important
}

.col-md-8:has(.ug-hub) {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
    padding: 0
}

.row:has(.ug-hub) {
    margin: 0
}

.container:has(.ug-hub) {
    max-width: 1080px
}

.ug-hub {
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 56px) 20px 72px
}

/* head */

.ug-head {
    text-align: center;
    margin-bottom: clamp(24px, 3.5vw, 40px)
}

.ug-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 4px 12px 12px 4px;
    border: 1px solid rgba(17, 212, 158, .3);
    border-inline-start: 3px solid var(--brand);
    margin-bottom: 16px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--brand);
    background: var(--brand-soft)
}

.ug-head h1 {
    margin: 0 0 10px;
    font-size: clamp(26px, 3.6vw, 42px);
    font-weight: 800;
    letter-spacing: -1px;
    color: #fff
}

.ug-head p {
    margin: 0 auto;
    max-width: 620px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-dim)
}

/* "what you'll learn" steps strip */

.ug-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 clamp(22px, 3vw, 34px)
}

@media(max-width:720px) {
    .ug-steps {
        grid-template-columns: 1fr
    }
}

.ug-step {
    position: relative;
    padding: 16px 18px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: rgba(18, 18, 20, .55)
}

.ug-step::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(17, 212, 158, .55), transparent)
}

.ug-step-n {
    display: block;
    margin-bottom: 6px;
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--brand)
}

.ug-step b {
    display: block;
    font-size: 14.5px;
    color: #fff;
    margin-bottom: 3px
}

.ug-step span:not(.ug-step-n) {
    font-size: 12.5px;
    color: var(--text-mut);
    line-height: 1.5
}

/* featured player */

.ug-player {
    border: 1px solid rgba(17, 212, 158, .28);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: rgba(14, 14, 16, .8);
    box-shadow: 0 0 60px -20px rgba(17, 212, 158, .3);
    margin-bottom: clamp(20px, 3vw, 30px)
}

.ug-screen {
    position: relative;
    aspect-ratio: 16/9;
    background: #0b0b0d
}

.ug-screen iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0
}

.ug-cover {
    position: absolute;
    inset: 0;
    display: block
}

.ug-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: .85;
    transition: opacity .25s ease, transform .5s var(--ease-out)
}

.ug-cover:hover img {
    opacity: 1;
    transform: scale(1.015)
}

.ug-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(8, 8, 10, .55))
}

.ug-cover-play {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: 1;
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #04130d;
    font-size: 24px;
    background: var(--brand);
    box-shadow: 0 0 0 10px rgba(17, 212, 158, .18), 0 12px 40px -8px rgba(17, 212, 158, .6);
    transition: transform .25s var(--ease-out), box-shadow .25s ease
}

.ug-cover-play i {
    margin-inline-start: 4px
}

.ug-cover:hover .ug-cover-play {
    transform: scale(1.08);
    box-shadow: 0 0 0 14px rgba(17, 212, 158, .22), 0 16px 48px -8px rgba(17, 212, 158, .7)
}

.ug-player-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 13px 18px;
    border-top: 1px solid var(--line)
}

.ug-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-mut)
}

.ug-live::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 8px rgba(17, 212, 158, .8)
}

.ug-now-lang {
    font-size: 14px;
    font-weight: 700;
    color: #fff
}

.ug-yt {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-dim);
    transition: color .18s ease
}

.ug-yt:hover {
    color: var(--brand)
}

.ug-yt i {
    font-size: 14px
}

/* language grid */

.ug-grid-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--text-mut);
    margin: 0 0 14px
}

.ug-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px
}

@media(max-width:960px) {
    .ug-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media(max-width:680px) {
    .ug-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px
    }
}

.ug-card {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: rgba(18, 18, 20, .55);
    color: var(--text-dim);
    transition: border-color .2s ease, transform .2s var(--ease-out), box-shadow .25s ease
}

.ug-card:hover {
    border-color: rgba(17, 212, 158, .4);
    transform: translateY(-3px);
    box-shadow: 0 14px 34px -14px rgba(17, 212, 158, .35);
    color: var(--text-dim)
}

.ug-card.is-active {
    border-color: var(--brand);
    box-shadow: 0 0 0 1px var(--brand), 0 12px 34px -14px rgba(17, 212, 158, .5)
}

.ug-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #0b0b0d
}

.ug-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s var(--ease-out)
}

.ug-card:hover .ug-thumb img {
    transform: scale(1.05)
}

.ug-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(8, 8, 10, .5))
}

.ug-play-sm {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: 1;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 11px;
    color: #04130d;
    background: var(--brand);
    opacity: 0;
    transform: scale(.8);
    transition: opacity .2s ease, transform .25s var(--ease-out)
}

.ug-play-sm i {
    margin-inline-start: 2px
}

.ug-card:hover .ug-play-sm {
    opacity: 1;
    transform: scale(1)
}

@media(hover:none) {
    .ug-play-sm {
        opacity: 1;
        transform: scale(1)
    }
}

/* equalizer on the active card */

.ug-eq {
    position: absolute;
    bottom: 8px;
    inset-inline-end: 10px;
    z-index: 1;
    display: none;
    align-items: flex-end;
    gap: 2.5px;
    height: 14px
}

.ug-card.is-active .ug-eq {
    display: flex
}

.ug-eq i {
    width: 3px;
    border-radius: 2px;
    background: var(--brand);
    animation: ug-eq 1s ease-in-out infinite
}

.ug-eq i:nth-child(1) {
    height: 60%;
    animation-delay: 0s
}

.ug-eq i:nth-child(2) {
    height: 100%;
    animation-delay: .2s
}

.ug-eq i:nth-child(3) {
    height: 75%;
    animation-delay: .4s
}

@keyframes ug-eq {
    0%,
    100% {
        transform: scaleY(.45)
    }
    50% {
        transform: scaleY(1)
    }
}

@media(prefers-reduced-motion:reduce) {
    .ug-eq i {
        animation: none
    }
}

.ug-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px
}

.ug-code {
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 6px;
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid rgba(17, 212, 158, .25)
}

.ug-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

/* coming soon chips */

.ug-soon {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border: 1px dashed var(--line-2);
    border-radius: 14px;
    background: rgba(255, 255, 255, .015)
}

.ug-soon-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-mut)
}

.ug-soon-label i {
    color: var(--brand)
}

.ug-soon-chip {
    padding: 5px 11px;
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-mut);
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line)
}

/* ============================================================
   SERVICES / PRICE LIST (services.twig)
   Used by guests AND inside the logged-in panel (.sv-in-panel).
   Panel JS toggles rows via .hidden — kept working in every layout.
   ============================================================ */

.sv-page {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px 72px;
    position: relative
}

#service-table .hidden {
    display: none !important
}

/* belt & braces: filtering must always win */

/* ---- guest hero (hidden in the panel) ---- */

.sv-hero {
    padding: clamp(28px, 4vw, 52px) 0 clamp(16px, 2vw, 24px);
    text-align: center
}

.sv-hero h1 {
    margin: 0 0 10px;
    font-size: clamp(26px, 3.6vw, 42px);
    font-weight: 800;
    letter-spacing: -1px;
    color: #fff
}

.sv-hero p {
    margin: 0 auto 18px;
    max-width: 640px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--text-dim)
}

.sv-hero-stats {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap
}

.sv-stat {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--brand);
    border-radius: 4px 12px 12px 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-dim);
    background: rgba(18, 18, 20, .55)
}

.sv-stat i {
    color: var(--brand);
    font-size: 12px
}

/* ---- sticky toolbar ---- */

.sv-toolbar {
    position: sticky;
    top: 68px;
    z-index: 30;
    display: flex;
    gap: 10px;
    align-items: stretch;
    padding: 12px 0;
    margin-bottom: 10px;
    background: linear-gradient(180deg, var(--bg) 82%, transparent);
}

.sv-in-panel .sv-toolbar {
    position: static;
    background: transparent
}

/* unknown chrome inside the panel — do not stick */

.sv-search {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0
}

.sv-search-ic {
    position: absolute;
    inset-inline-start: 16px;
    top: 50%;
    translate: 0 -50%;
    font-size: 14px;
    color: var(--text-mut);
    pointer-events: none
}

.sv-search-input {
    width: 100%;
    height: 48px;
    padding: 0 118px 0 44px;
    border-radius: 13px;
    background: rgba(18, 18, 20, .75);
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 14px;
    font-family: var(--font);
    transition: border-color .2s ease, box-shadow .2s ease;
}

[dir="rtl"] .sv-search-input,
.rtl-content .sv-search-input {
    padding: 0 44px 0 118px
}

.sv-search-input::placeholder {
    color: var(--text-mut)
}

.sv-search-input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft)
}

.sv-count {
    position: absolute;
    inset-inline-end: 52px;
    top: 50%;
    translate: 0 -50%;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 8px;
    pointer-events: none;
    font-size: 11.5px;
    color: var(--text-mut);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    white-space: nowrap;
}

.sv-count b {
    color: var(--brand);
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 700
}

.sv-search-btn {
    position: absolute;
    inset-inline-end: 5px;
    top: 50%;
    translate: 0 -50%;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 0;
    cursor: pointer;
    color: #04130d;
    background: var(--brand);
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .18s ease;
}

.sv-search-btn:hover {
    background: var(--brand-bright)
}

/* filter + currency dropdown buttons */

.sv-dd {
    position: relative
}

.sv-dd-btn {
    height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 16px;
    border-radius: 13px;
    cursor: pointer;
    background: rgba(18, 18, 20, .75);
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 13.5px;
    font-weight: 600;
    font-family: var(--font);
    max-width: 280px;
    white-space: nowrap;
    transition: border-color .2s ease, color .2s ease;
}

.sv-dd-btn:hover,
.sv-dd.open .sv-dd-btn {
    border-color: rgba(17, 212, 158, .4);
    color: #fff
}

.sv-dd-btn i {
    color: var(--brand);
    font-size: 13px
}

.sv-dd-label {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 170px
}

.sv-dd-btn .caret {
    border-top-color: var(--text-mut)
}

/* dropdown menus (bootstrap .dropdown-menu restyled) */

.sv-dd-menu {
    min-width: 300px;
    max-width: min(92vw, 380px);
    max-height: min(56vh, 460px);
    overflow: auto;
    margin-top: 8px;
    padding: 6px;
    border-radius: 14px;
    background: rgba(20, 20, 23, .97);
    border: 1px solid var(--line-2);
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .75), 0 0 0 1px rgba(17, 212, 158, .06);
    backdrop-filter: blur(14px);
}

.sv-dd-menu>li>a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 13px;
    color: var(--text-dim);
    white-space: normal;
    line-height: 1.4;
}

.sv-dd-menu>li>a:hover,
.sv-dd-menu>li>a:focus {
    color: #fff;
    background: rgba(17, 212, 158, .09)
}

.sv-dd-menu>li>a>span:first-child {
    color: var(--brand);
    width: 18px;
    text-align: center;
    flex: 0 0 18px
}

/* our quick filter inside the category menu (injected by script.js) */

.sv-dd-find {
    padding: 4px 4px 8px;
    position: sticky;
    top: -6px;
    background: rgba(20, 20, 23, .97);
    z-index: 1
}

.sv-dd-find input {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 13px;
    font-family: var(--font);
}

.sv-dd-find input:focus {
    outline: none;
    border-color: var(--brand)
}

/* ---- platform quick-jump chips ---- */

.sv-chips {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    min-width: 0
}

.sv-chips-label {
    flex: 0 0 auto;
    padding-top: 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text-mut)
}

/* no hidden horizontal scroll — every platform is visible, wrapped */

.sv-chips-track {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 2px;
    min-width: 0
}

.sv-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    cursor: pointer;
    border: 1px solid var(--line);
    border-radius: 4px 10px 10px 4px;
    border-inline-start: 2px solid rgba(17, 212, 158, .5);
    background: rgba(18, 18, 20, .55);
    color: var(--text-dim);
    font-size: 12.5px;
    font-weight: 600;
    font-family: var(--font);
    transition: color .18s ease, border-color .18s ease, transform .18s var(--ease-out);
}

.sv-chip i {
    color: var(--brand);
    font-size: 13px
}

.sv-chip b {
    font-weight: 600;
    color: inherit
}

.sv-chip .sv-chip-n {
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    color: var(--text-mut)
}

.sv-chip:hover {
    color: #fff;
    border-color: rgba(17, 212, 158, .45);
    transform: translateY(-1px)
}

/* mobile: first 6 chips + "+N" expander (pure CSS hide, JS only toggles .is-open) */

.sv-chips-more {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    cursor: pointer;
    border: 1px dashed var(--line-2);
    border-radius: 10px;
    background: transparent;
    color: var(--brand);
    font-size: 12.5px;
    font-weight: 700;
    font-family: var(--font);
}

.sv-chips-more i {
    font-size: 11px;
    transition: transform .25s var(--ease-out)
}

.sv-chips.is-open .sv-chips-more i {
    transform: rotate(180deg)
}

@media(max-width:860px) {
    .sv-chips-track .sv-chip:nth-child(n+7) {
        display: none
    }
    .sv-chips.is-open .sv-chips-track .sv-chip {
        display: inline-flex
    }
    .sv-chips-more {
        display: inline-flex
    }
}

/* ---- table: desktop ---- */

.sv-tablewrap {
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: clip;
    background: rgba(14, 14, 16, .6);
}

#service-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed
}

#service-table thead th {
    padding: 11px 14px;
    text-align: start;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-mut);
    background: rgba(255, 255, 255, .025);
    border-bottom: 1px solid var(--line-2);
}

#service-table thead .fa-exclamation-circle {
    color: var(--text-mut);
    margin-inline-start: 4px
}

.sv-th-fav {
    width: 40px
}

.sv-th-id {
    width: 66px
}

.sv-th-rate {
    width: 112px
}

.sv-th-min {
    width: 86px
}

.sv-th-max {
    width: 100px
}

.sv-th-time {
    width: 150px
}

.sv-th-btn {
    width: 86px
}

/* category section rows */

.sv-cat td {
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(90deg, rgba(17, 212, 158, .055), transparent 55%);
}

.sv-cat strong {
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .1px
}

.sv-cat-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-inline-end: 9px;
    border-radius: 8px;
    font-size: 12px;
    color: var(--brand);
    vertical-align: middle;
    background: var(--brand-soft);
    border: 1px solid rgba(17, 212, 158, .25);
}

.sv-cat-ic img {
    display: block
}

/* service rows — compact pro density */

.sv-row td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    color: var(--text-dim);
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sv-row:hover td {
    background: rgba(17, 212, 158, .035)
}

.sv-row:last-child td {
    border-bottom: 0
}

.sv-td-id {
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: var(--text-mut)
}

.sv-td-name {
    color: var(--text);
    font-weight: 500;
    white-space: normal;
    line-height: 1.45
}

.sv-td-rate {
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--brand);
    white-space: nowrap
}

.sv-td-min,
.sv-td-max {
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    white-space: nowrap
}

.sv-td-time {
    font-size: 12px;
    color: var(--text-mut);
    white-space: nowrap
}

.sv-td-fav {
    text-align: center
}

.sv-td-fav [role="button"] {
    cursor: pointer;
    color: var(--text-mut);
    font-size: 13px
}

.sv-td-fav .favorite-active,
.sv-td-fav .fas.fa-star {
    color: #e3b341
}

.sv-view {
    padding: 6px 12px;
    border-radius: 9px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font);
    color: var(--text-dim);
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    transition: color .18s ease, border-color .18s ease;
}

.sv-view:hover {
    color: var(--brand);
    border-color: rgba(17, 212, 158, .45)
}

/* narrow desktop: allow horizontal scroll instead of crushing columns */

@media(min-width:861px) and (max-width:1080px) {
    .sv-tablewrap {
        overflow-x: auto
    }
    #service-table {
        min-width: 940px
    }
}

/* ---- table -> cards on mobile ---- */

@media(max-width:860px) {
    .sv-toolbar {
        flex-wrap: wrap;
        position: static;
        background: transparent;
        padding: 10px 0
    }
    .sv-search {
        flex: 1 1 100%
    }
    .sv-dd {
        flex: 1;
        min-width: 0
    }
    .sv-dd-btn {
        width: 100%;
        max-width: none;
        justify-content: center
    }
    .sv-dd-cur {
        flex: 0 0 auto
    }
    .sv-dd-menu {
        position: fixed;
        left: 12px !important;
        right: 12px !important;
        max-width: none;
        min-width: 0
    }
    .sv-chips-label {
        display: none
    }
    .sv-tablewrap {
        border: 0;
        border-radius: 0;
        background: transparent;
        overflow: visible
    }
    #service-table {
        display: block
    }
    #service-table thead {
        display: none
    }
    #service-table tbody {
        display: block
    }
    #service-table tr {
        display: block
    }
    #service-table tr.sv-cat {
        position: sticky;
        top: 0;
        z-index: 5
    }
    #service-table .sv-cat td {
        display: flex;
        align-items: center;
        padding: 12px 4px 10px;
        border-bottom: 1px solid var(--line-2);
        background: var(--bg);
    }
    .sv-cat strong {
        font-size: 13px
    }
    #service-table tr.sv-row {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr);
        grid-template-areas: "id id rate" "name name name" "min max time" "btn btn btn";
        gap: 7px 10px;
        margin: 10px 0;
        padding: 13px 14px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: rgba(18, 18, 20, .55);
        content-visibility: auto;
        contain-intrinsic-size: auto 168px;
    }
    /* no display/overflow here — grid blockifies the cells, and the
     .sv-td-* rules below must win their flex/overflow */
    #service-table .sv-row td {
        padding: 0;
        border: 0;
        background: transparent
    }
    #service-table .sv-td-id {
        grid-area: id;
        align-self: center;
        font-size: 11px
    }
    #service-table .sv-td-id::before {
        content: "ID ";
        color: var(--text-mut)
    }
    #service-table .sv-td-rate {
        grid-area: rate;
        justify-self: end;
        align-self: center;
        font-size: 14px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
    }
    /* price without context is misleading — show the "Rate per 1000" label */
    #service-table .sv-td-rate::before {
        content: attr(data-th);
        font-family: var(--font);
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--text-mut);
        white-space: nowrap;
    }
    #service-table .sv-td-name {
        grid-area: name;
        font-size: 13.5px
    }
    #service-table .sv-td-min {
        grid-area: min
    }
    #service-table .sv-td-max {
        grid-area: max
    }
    #service-table .sv-td-time {
        grid-area: time;
        white-space: normal;
        line-height: 1.35
    }
    #service-table .sv-td-min,
    #service-table .sv-td-max,
    #service-table .sv-td-time {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .sv-td-min::before,
    .sv-td-max::before,
    .sv-td-time::before {
        content: attr(data-th);
        font-family: var(--font);
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--text-mut);
    }
    #service-table .sv-td-btn {
        grid-area: btn
    }
    #service-table .sv-td-btn:empty {
        display: none
    }
    .sv-view {
        width: 100%;
        padding: 9px 12px
    }
    #service-table .sv-td-fav {
        position: absolute;
        top: 11px;
        inset-inline-end: 12px;
        z-index: 1
    }
}

/* ---- back to top ---- */

.sv-top {
    position: fixed;
    bottom: 86px;
    inset-inline-end: 18px;
    z-index: 60;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    cursor: pointer;
    color: var(--brand);
    background: rgba(20, 20, 23, .9);
    border: 1px solid rgba(17, 212, 158, .35);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .7);
    backdrop-filter: blur(10px);
    transition: transform .2s var(--ease-out), border-color .2s ease;
}

.sv-top:hover {
    transform: translateY(-2px);
    border-color: var(--brand)
}

.sv-top[hidden] {
    display: none
}

/* ---- SEO text under the table ---- */

.sv-seo {
    max-width: 820px;
    margin: 28px auto 0;
    padding: 22px 26px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(18, 18, 20, .5);
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text-dim);
}

.sv-seo h1,
.sv-seo h2,
.sv-seo h3 {
    color: #fff;
    font-weight: 700
}

.sv-seo a {
    color: var(--brand)
}

/* ---- service description modal (markup injected by panel JS) ---- */

.service-description-modal .modal-dialog {
    max-width: 560px;
    margin: 8vh auto;
    padding: 0 14px
}

.service-description-modal .modal-content {
    background: #141416;
    border: 1px solid var(--line-2);
    border-radius: 16px;
    color: var(--text-dim);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(17, 212, 158, .08);
}

.service-description-modal .modal-header {
    border-bottom: 1px solid var(--line);
    padding: 18px 22px
}

.service-description-modal .modal-title {
    color: #fff;
    font-weight: 700;
    font-size: 16px
}

.service-description-modal .close {
    color: var(--text-mut);
    opacity: 1;
    text-shadow: none;
    font-size: 24px
}

.service-description-modal .close:hover {
    color: #fff
}

.service-description-modal .modal-body {
    padding: 20px 22px;
    font-size: 13.5px;
    line-height: 1.7
}

.service-description-modal .service-description-text {
    color: var(--text-dim)
}

.service-description-modal #createQuickOrder {
    width: 100%;
    padding: 13px 20px;
    border-radius: 12px;
    border: 0;
    cursor: pointer;
    background: var(--brand);
    color: #04130d;
    font-weight: 600;
    font-size: 14px;
    font-family: var(--font);
}

.service-description-modal #createQuickOrder:hover {
    background: var(--brand-bright)
}

.service-description-modal-backdrop {
    background: rgba(5, 5, 6, .7);
    backdrop-filter: blur(3px)
}

/* ============================================================
   CUSTOM SEO PAGES (custom-page.twig shell) — vc-style reading
   Reuses the blog-post engine; the page's own <h1> becomes the title.
   ============================================================ */

.cp-custom {
    padding-top: clamp(24px, 4vw, 44px)
}

.cp-custom .bl-post-content>h1:first-child {
    display: block;
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

.cp-custom .bl-post-content>h1:first-child+p {
    font-size: 18.5px;
    line-height: 1.7;
    color: var(--text)
}

/* legal pages start with a <p> — keep the lead readable either way */

.cp-custom .bl-post-content h1 {
    scroll-margin-top: 86px
}

/* sticky rail CTA card (desktop only — the bottom CTA covers mobile) */

.cp-rail-cta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--brand);
    border-radius: 4px 14px 14px 4px;
    background: linear-gradient(160deg, rgba(17, 212, 158, .07), rgba(18, 18, 20, .6) 60%);
}

.cp-rail-cta .cp-rail-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--brand);
}

.cp-rail-cta b {
    font-size: 15px;
    line-height: 1.35;
    color: #fff
}

.cp-rail-cta .cp-rail-sub {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-mut)
}

.cp-rail-cta .smmgon-btn {
    margin-top: 6px;
    padding: 11px 16px;
    font-size: 13px
}

@media(max-width:1099px) {
    .cp-rail-cta {
        display: none
    }
}

/* ============================================================
   LEGAL PAGES (legal-page.twig): terms / privacy / refund
   Strict document look — no marketing accents, muted markers.
   ============================================================ */

.cp-legal .lg-head {
    margin-bottom: 20px
}

.lg-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 13px;
    margin-bottom: 14px;
    border: 1px solid var(--line-2);
    border-inline-start: 3px solid var(--brand);
    border-radius: 4px 10px 10px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-dim);
    background: rgba(18, 18, 20, .6);
}

.lg-chip i {
    color: var(--brand);
    font-size: 12px
}

.lg-title {
    margin: 0;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    letter-spacing: -.8px;
    line-height: 1.2;
    color: #fff
}

/* the document sheet */

.cp-legal .lg-doc {
    padding: clamp(22px, 3.5vw, 38px);
    border: 1px solid var(--line);
    border-top: 2px solid rgba(17, 212, 158, .35);
    border-radius: 16px;
    background: rgba(18, 18, 20, .5);
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--text-dim);
}

/* "Last Updated: ..." first line -> document meta badge, not a lead */

.cp-legal .bl-post-content>p:first-of-type {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-mut);
    margin-bottom: 20px
}

.cp-legal .bl-post-content>p:first-of-type strong {
    display: inline-block;
    padding: 5px 11px;
    border-radius: 7px;
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .4px;
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid rgba(17, 212, 158, .25);
}

/* numbered sections */

.cp-legal .bl-post-content h2,
.cp-legal .bl-post-content h3 {
    font-size: 16.5px;
    margin: 28px 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}

.cp-legal .bl-post-content li::marker {
    color: var(--text-mut)
}

.cp-legal .bl-post-content a {
    text-decoration-color: rgba(17, 212, 158, .25)
}

/* ============================================================
   RESET PASSWORD (resetpassword.twig) — reuses the signup card
   ============================================================ */

.rp-card {
    max-width: 480px;
    margin: 0 auto
}

.rp-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 13px;
    font-size: 17px;
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid rgba(17, 212, 158, .3);
}

.rp-card .su-btn {
    width: 100%
}

.rp-back a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-dim);
    font-weight: 600
}

.rp-back a:hover {
    color: var(--brand)
}

/* ============================================================
   DASHBOARD (logged-in area) — left sidebar + slim topbar
   Everything is scoped to .db-body so guest pages are untouched.
   Inner pages keep the stock panel markup; the cosmetics section
   below re-skins bootstrap controls site-wide inside the panel.
   ============================================================ */

:root {
    --db-side: 236px;
    --db-top: 56px
}

.db-body {
    padding: var(--db-top) 0 0 0 !important
}

@media(min-width:1025px) {
    .db-body {
        padding-inline-start: var(--db-side) !important
    }
}

/* ---- sidebar ---- */

.db-side {
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    z-index: 80;
    width: var(--db-side);
    display: flex;
    flex-direction: column;
    background: rgba(13, 13, 15, .92);
    backdrop-filter: blur(16px);
    border-inline-end: 1px solid var(--line);
    transition: inset-inline-start .28s var(--ease-out);
}

.db-logo {
    display: flex;
    align-items: center;
    height: var(--db-top);
    padding: 0 18px;
    border-bottom: 1px solid var(--line);
    flex: 0 0 auto
}

.db-logo img {
    height: 100px;
    width: auto;

    object-fit: contain
}

.db-logo span {
    font-weight: 800;
    font-size: 18px;
    color: #fff
}

.db-menu {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--line-2) transparent
}

.db-menu::-webkit-scrollbar {
    width: 4px
}

.db-menu::-webkit-scrollbar-thumb {
    background: var(--line-2);
    border-radius: 4px
}

.db-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    margin-bottom: 2px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-dim);
    transition: color .16s ease, background .16s ease;
}

.db-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .04)
}

.db-link.is-active {
    color: var(--brand);
    background: var(--brand-soft);
    font-weight: 600
}

.db-link.is-active::before {
    content: "";
    position: absolute;
    inset-inline-start: -10px;
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--brand);
    box-shadow: 0 0 10px rgba(17, 212, 158, .6);
}

.db-link-ic {
    flex: 0 0 20px;
    text-align: center;
    font-size: 13px;
    color: var(--text-mut);
    transition: color .16s ease
}

.db-link:hover .db-link-ic,
.db-link.is-active .db-link-ic {
    color: var(--brand)
}

.db-link-txt {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.db-link .badge {
    margin-inline-start: auto;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 700;
    color: #04130d;
    background: var(--brand);
}

.db-side-foot {
    flex: 0 0 auto;
    padding: 10px;
    border-top: 1px solid var(--line)
}

.db-side-close {
    display: none
}

.db-link-sm {
    font-size: 13px;
    padding: 8px 11px
}

/* ---- topbar ---- */

.db-top {
    position: fixed;
    top: 0;
    inset-inline-end: 0;
    inset-inline-start: 0;
    z-index: 70;
    height: var(--db-top);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 16px;
    background: rgba(10, 10, 11, .75);
    backdrop-filter: blur(16px) saturate(1.3);
    border-bottom: 1px solid var(--line);
}

@media(min-width:1025px) {
    .db-top {
        inset-inline-start: var(--db-side)
    }
}

.db-page-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.db-top-right {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 10px
}

.db-balance-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 38px;
    padding: 0 14px;
    border-radius: 11px;
    cursor: pointer;
    border: 1px solid rgba(17, 212, 158, .3);
    background: var(--brand-soft);
    font-size: 13px;
    color: var(--text-dim);
}

.db-balance-btn i {
    color: var(--brand);
    font-size: 13px
}

.db-balance-btn b {
    color: #fff;
    font-weight: 700;
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
}

.db-balance-btn:hover {
    border-color: var(--brand)
}

.db-cur-menu {
    inset-inline-end: 0;
    inset-inline-start: auto
}

.db-top-logo {
    display: none;
    align-items: center
}

.db-top-logo img {
    height: 100px;
    width: auto
}

.db-top-logo span {
    font-weight: 800;
    color: #fff
}

/* burger (reuses guest burger look) */

.db-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 8px;
    cursor: pointer;
    border-radius: 10px;
    border: 1px solid var(--line)
}

.db-burger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--text);
    transition: transform .25s var(--ease-out), opacity .2s ease
}

/* ---- mobile: off-canvas sidebar ---- */

@media(max-width:1024px) {
    .db-side {
        inset-inline-start: calc(-1 * var(--db-side) - 20px);
        box-shadow: none
    }
    #db-navtoggle:checked~.db-side {
        inset-inline-start: 0;
        box-shadow: 0 0 60px rgba(0, 0, 0, .6)
    }
    .db-backdrop {
        position: fixed;
        inset: 0;
        z-index: 75;
        background: rgba(5, 5, 6, .6);
        backdrop-filter: blur(2px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
    }
    #db-navtoggle:checked~.db-backdrop {
        opacity: 1;
        pointer-events: auto
    }
    .db-burger {
        display: flex
    }
    /* same layout as desktop: profile row stays at the bottom;
     the close X floats in the drawer's top corner next to the logo */
    .db-side-close {
        position: absolute;
        top: 12px;
        inset-inline-end: 12px;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        cursor: pointer;
        border: 1px solid var(--line-2);
        border-radius: 11px;
        color: var(--text-dim);
        font-size: 15px;
        background: rgba(13, 13, 15, .9);
        transition: color .15s ease, border-color .15s ease;
    }
    .db-side-close:hover {
        color: #fff;
        border-color: rgba(17, 212, 158, .5)
    }
    .db-menu {
        flex: 1 1 auto;
        min-height: 0
    }
    .db-top-logo {
        display: flex
    }
    .db-page-title {
        display: none
    }
    #db-navtoggle:checked~.db-top .db-burger span:nth-child(1) {
        transform: translateY(7px) rotate(45deg)
    }
    #db-navtoggle:checked~.db-top .db-burger span:nth-child(2) {
        opacity: 0
    }
    #db-navtoggle:checked~.db-top .db-burger span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg)
    }
}

/* ============================================================
   DASHBOARD COSMETICS — re-skin stock bootstrap controls on all
   inner panel pages (scoped to .db-body)
   ============================================================ */

.db-body .container,
.db-body .container-fluid {
    max-width: 1240px
}

.db-body .well {
    background: rgba(18, 18, 20, .55);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: none;
    padding: 22px;
}

.db-body .well .well {
    background: rgba(255, 255, 255, .02)
}

/* labels + help text */

.db-body label,
.db-body .control-label {
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px
}

.db-body .help-block {
    color: var(--text-mut);
    font-size: 12px
}

/* inputs / selects / textareas — kills the white boxes */

.db-body .form-control,
.db-body input[type="text"],
.db-body input[type="email"],
.db-body input[type="password"],
.db-body input[type="number"],
.db-body input[type="url"],
.db-body input[type="search"],
.db-body select,
.db-body textarea {
    background: rgba(23, 23, 26, .8);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 11px;
    box-shadow: none;
    height: auto;
    min-height: 42px;
    padding: 9px 14px;
    font-size: 13.5px;
    font-family: var(--font);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.db-body textarea {
    min-height: 90px;
    line-height: 1.6
}

.db-body .form-control:focus,
.db-body select:focus,
.db-body textarea:focus,
.db-body input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
    background: rgba(23, 23, 26, .95);
}

.db-body .form-control[readonly],
.db-body .form-control[disabled],
.db-body textarea[readonly],
.db-body input[readonly] {
    background: rgba(255, 255, 255, .025);
    color: var(--text-dim);
    border-color: var(--line);
    cursor: default;
}

.db-body select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239a9aa3' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-inline-end: 36px;
}

[dir="rtl"] .db-body select {
    background-position: left 14px center
}

.db-body ::placeholder {
    color: var(--text-mut)
}

/* buttons */

.db-body .btn {
    border-radius: 11px;
    font-weight: 600;
    font-family: var(--font);
    box-shadow: none;
    text-shadow: none
}

.db-body .btn-primary {
    background: var(--brand);
    border: 1px solid transparent;
    color: #04130d;
}

.db-body .btn-primary:hover,
.db-body .btn-primary:focus,
.db-body .btn-primary:active {
    background: var(--brand-bright);
    border-color: transparent;
    color: #04130d;
}

.db-body .btn-default {
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    color: var(--text-dim);
}

.db-body .btn-default:hover,
.db-body .btn-default:focus {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(17, 212, 158, .4);
    color: var(--brand);
}

.db-body .btn-lg,
.db-body .btn-block {
    padding: 12px 22px
}

/* tabs (New Order / Subscriptions / Mass Order) */

.db-body .nav-tabs {
    border-bottom: 1px solid var(--line);
    margin-bottom: 18px
}

.db-body .nav-tabs>li>a {
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 10px 16px;
    color: var(--text-dim);
    font-weight: 600;
    font-size: 13.5px;
    background: transparent;
    border-bottom: 2px solid transparent;
    transition: color .16s ease, border-color .16s ease;
}

.db-body .nav-tabs>li>a:hover {
    color: #fff;
    background: transparent;
    border-bottom-color: var(--line-2)
}

.db-body .nav-tabs>li.active>a,
.db-body .nav-tabs>li.active>a:focus,
.db-body .nav-tabs>li.active>a:hover {
    color: var(--brand);
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--brand);
}

/* pills (used by some panel pages) */

.db-body .nav-pills>li>a {
    border-radius: 10px;
    color: var(--text-dim);
    font-weight: 600
}

.db-body .nav-pills>li>a:hover {
    background: rgba(255, 255, 255, .04);
    color: #fff
}

.db-body .nav-pills>li.active>a {
    background: var(--brand-soft);
    color: var(--brand)
}

/* tables (orders history etc.) */

.db-body .table {
    color: var(--text-dim);
    font-size: 13px
}

.db-body .table>thead>tr>th {
    border-bottom: 1px solid var(--line-2);
    color: var(--text-mut);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 10px 12px;
}

.db-body .table>tbody>tr>td {
    border-top: 1px solid var(--line);
    padding: 9px 12px;
    vertical-align: middle
}

.db-body .table-striped>tbody>tr:nth-of-type(odd) {
    background: rgba(255, 255, 255, .015)
}

.db-body .table-hover>tbody>tr:hover {
    background: rgba(17, 212, 158, .035)
}

/* alerts */

.db-body .alert {
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(18, 18, 20, .6);
    color: var(--text-dim)
}

.db-body .alert-success {
    border-color: rgba(17, 212, 158, .4);
    background: rgba(17, 212, 158, .08);
    color: #7ee8c8
}

.db-body .alert-danger,
.db-body .alert-error {
    border-color: rgba(255, 107, 107, .4);
    background: rgba(255, 107, 107, .08);
    color: #ff9b9b
}

.db-body .alert-info {
    border-color: rgba(96, 165, 250, .35);
    background: rgba(96, 165, 250, .08);
    color: #9ec5f8
}

.db-body .alert-warning {
    border-color: rgba(227, 179, 65, .4);
    background: rgba(227, 179, 65, .08);
    color: #e8cd8a
}

/* dropdown menus inside the panel */

.db-body .dropdown-menu {
    background: rgba(20, 20, 23, .97);
    border: 1px solid var(--line-2);
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .75);
}

.db-body .dropdown-menu>li>a {
    color: var(--text-dim);
    border-radius: 9px;
    padding: 8px 12px;
    font-size: 13px
}

.db-body .dropdown-menu>li>a:hover,
.db-body .dropdown-menu>li>a:focus {
    color: #fff;
    background: rgba(17, 212, 158, .09)
}

.db-body .dropdown-menu .divider {
    background: var(--line);
    margin: 6px 4px
}

/* pagination */

.db-body .pagination>li>a,
.db-body .pagination>li>span {
    background: rgba(18, 18, 20, .6);
    border: 1px solid var(--line);
    color: var(--text-dim);
    margin: 0 3px;
    border-radius: 9px !important;
}

.db-body .pagination>li>a:hover {
    color: var(--brand);
    border-color: rgba(17, 212, 158, .4);
    background: rgba(18, 18, 20, .8)
}

.db-body .pagination>.active>a,
.db-body .pagination>.active>span {
    background: var(--brand-soft);
    border-color: rgba(17, 212, 158, .45);
    color: var(--brand);
}

/* modals */

.db-body .modal-content {
    background: #141416;
    border: 1px solid var(--line-2);
    border-radius: 16px;
    color: var(--text-dim);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8);
}

.db-body .modal-header {
    border-bottom: 1px solid var(--line)
}

.db-body .modal-title {
    color: #fff;
    font-weight: 700
}

.db-body .modal-footer {
    border-top: 1px solid var(--line)
}

.db-body .modal .close {
    color: var(--text-mut);
    opacity: 1;
    text-shadow: none
}

.db-body .modal .close:hover {
    color: #fff
}

.db-body .modal-backdrop {
    background: rgba(5, 5, 6, .7)
}

/* misc */

.db-body .badge {
    background: var(--brand);
    color: #04130d;
    font-weight: 700;
    border-radius: 8px
}

/* brand links only inside content blocks — never in our own nav components */

.db-body .well a,
.db-body .table a,
.db-body .panel a,
.db-body p>a {
    color: var(--brand)
}

.db-body .well a:hover,
.db-body .table a:hover,
.db-body .panel a:hover,
.db-body p>a:hover {
    color: var(--brand-bright)
}

.db-body h1,
.db-body h2,
.db-body h3,
.db-body h4 {
    color: #fff
}

.db-body hr {
    border-color: var(--line)
}

.db-body .panel {
    background: rgba(18, 18, 20, .55);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: none
}

.db-body .panel-heading {
    background: rgba(255, 255, 255, .02);
    border-bottom: 1px solid var(--line);
    color: #fff;
    border-radius: 16px 16px 0 0
}

.db-body .list-group-item {
    background: rgba(18, 18, 20, .55);
    border-color: var(--line);
    color: var(--text-dim)
}

.db-body .input-group-btn .btn,
.db-body .input-group-addon {
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    color: var(--text-dim);
    border-radius: 11px;
}

/* ============================================================
   NEW ORDER (neworder.twig) — stats, platform filter, 2-col form
   ============================================================ */

.no-page {
    max-width: 1240px;
    margin: 0 auto;
    padding: 20px 20px 64px
}

/* account stats strip */

.no-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px
}

@media(max-width:900px) {
    .no-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px
    }
}

.no-stat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(17, 212, 158, .05), rgba(18, 18, 20, .6) 55%);
}

.no-stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, rgba(17, 212, 158, .6), transparent)
}

.no-stat-ic {
    flex: 0 0 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 15px;
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid rgba(17, 212, 158, .28);
    box-shadow: inset 0 0 20px -8px rgba(17, 212, 158, .35);
}

.no-stat-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px
}

.no-stat-t {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-mut);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.no-stat b {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: #fff;
    font-variant-numeric: tabular-nums;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

@media(max-width:900px) {
    .no-stat {
        padding: 12px;
        gap: 10px
    }
    .no-stat-ic {
        flex-basis: 34px;
        height: 34px;
        font-size: 12px;
        border-radius: 10px
    }
    .no-stat b {
        font-size: 14px
    }
    .no-stat-t {
        font-size: 9.5px;
        letter-spacing: .8px
    }
}

/* balance card: top-up action pinned to the end */

.no-stat-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    border-radius: 10px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    color: #04130d;
    background: var(--brand);
    transition: background .15s ease, transform .15s var(--ease-out);
}

.no-stat-btn:hover {
    background: var(--brand-bright);
    color: #04130d;
    transform: translateY(-1px)
}

.no-stat-btn i {
    font-size: 10px
}

.no-stat-balance {
    border-color: rgba(17, 212, 158, .35);
    box-shadow: 0 0 40px -18px rgba(17, 212, 158, .45);
    flex-wrap: wrap
}

.no-stat-balance .no-stat-body {
    flex: 1 1 130px
}

.no-stat-balance .no-stat-btn {
    margin-inline-start: auto
}

.no-stat-balance b {
    font-size: 17px
}

@media(max-width:900px) {
    .no-stat-balance {
        grid-column: 1/-1
    }
    .no-stat-btn {
        padding: 8px 11px;
        font-size: 10.5px
    }
}

/* clickable orders card */

.no-stat-link {
    cursor: pointer;
    transition: border-color .15s ease, transform .15s var(--ease-out);
    color: inherit
}

.no-stat-link:hover {
    border-color: rgba(17, 212, 158, .4);
    transform: translateY(-2px);
    color: inherit
}

.no-stat-link,
.no-stat-link:hover,
.no-stat-link:focus,
.no-stat-link *,
.no-stat-link:hover * {
    text-decoration: none !important
}

.no-stat-go {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--text-mut);
    transition: color .15s ease, transform .15s var(--ease-out)
}

.no-stat-link:hover .no-stat-go {
    color: var(--brand);
    transform: translateX(3px)
}

/* level discount badge */

.no-stat-badge {
    flex: 0 0 auto;
    padding: 2px 9px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid rgba(17, 212, 158, .3);
}

@media(max-width:900px) {
    .no-stat-btn {
        padding: 5px 10px;
        font-size: 10.5px
    }
}

/* platform filter */

.no-filter {
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(18, 18, 20, .45)
}

.no-filter-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap
}

.no-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text-mut)
}

.no-filter-label i {
    color: var(--brand)
}

.no-chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 7px;
    max-height: 92px;
    overflow: hidden;
    position: relative;
}

.no-chips.is-open {
    max-height: none
}

.no-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    min-width: 0;
    cursor: pointer;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .02);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.no-chip i {
    color: var(--text-mut);
    font-size: 13px;
    flex: 0 0 16px;
    text-align: center;
    transition: color .15s ease
}

.no-chip img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex: 0 0 16px
}

.no-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.no-chip:hover {
    color: #fff;
    border-color: rgba(17, 212, 158, .4)
}

.no-chip:hover i {
    color: var(--brand)
}

.no-chip.active {
    color: var(--brand);
    border-color: rgba(17, 212, 158, .55);
    background: var(--brand-soft)
}

.no-chip.active i {
    color: var(--brand)
}

.no-chip-all {
    flex: 0 0 auto;
    padding: 7px 14px;
    border-radius: 9px;
    white-space: nowrap
}

.no-chip-all span {
    overflow: visible;
    text-overflow: clip
}

.no-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    padding: 8px;
    border: 1px dashed var(--line-2);
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: var(--brand);
    font-family: var(--font);
}

.no-more i {
    font-size: 10px;
    transition: transform .25s var(--ease-out)
}

.no-more.is-open i {
    transform: rotate(180deg)
}

.no-more[hidden] {
    display: none
}

@media(max-width:680px) {
    .no-chips {
        grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
        max-height: 141px
    }
}

/* 2-column layout: form + updates */

.no-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start
}

@media(min-width:1100px) {
    .no-grid {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr)
    }
}

.no-main {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(18, 18, 20, .55);
    padding: 18px 20px 22px
}

/* tabs (New order / Subscriptions / Mass order) */

.no-tabs {
    display: flex;
    gap: 2px;
    margin: -4px 0 18px;
    border-bottom: 1px solid var(--line)
}

.no-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-dim);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .16s ease, border-color .16s ease;
}

.no-tab i {
    font-size: 12px;
    color: var(--text-mut)
}

.no-tab:hover {
    color: #fff
}

.no-tab.active {
    color: var(--brand);
    border-bottom-color: var(--brand)
}

.no-tab.active i {
    color: var(--brand)
}

@media(max-width:480px) {
    .no-tab {
        padding: 10px 10px;
        font-size: 12.5px
    }
}

/* service description ticket */

.db-body .no-desc {
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--brand);
    border-radius: 4px 12px 12px 4px;
    background: rgba(17, 212, 158, .05);
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-dim);
}

.db-body .no-desc p {
    margin: 0
}

/* charge + submit */

.db-body .no-charge-row #charge {
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 15px;
    font-weight: 700;
    color: var(--brand);
}

.db-body .no-submit {
    width: 100%;
    padding: 13px 22px;
    font-size: 14px;
    margin-top: 4px
}

.db-body .no-submit i {
    margin-inline-start: 6px
}

.no-terms {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500 !important;
    cursor: pointer
}

.no-terms input {
    accent-color: var(--brand);
    width: 16px;
    height: 16px
}

/* updates rail */

.no-side {
    position: sticky;
    top: calc(var(--db-top) + 16px)
}

@media(max-width:1099px) {
    .no-side {
        position: static
    }
}

.no-updates {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(18, 18, 20, .55);
    overflow: hidden
}

.no-updates-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--line);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--text-mut);
    background: linear-gradient(90deg, rgba(17, 212, 158, .05), transparent 60%);
}

.no-updates-head i {
    color: var(--brand)
}

.no-updates-all {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: none;
    color: var(--brand);
}

.no-updates-all:hover {
    color: var(--brand-bright)
}

.no-updates-all i {
    font-size: 9px;
    color: inherit
}

.no-updates {
    position: relative
}

/* follow-the-news channels (below the text) */

.no-updates-follow {
    display: flex;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--line);
    position: relative;
    z-index: 1;
    background: rgba(14, 14, 16, .85)
}

.no-follow {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .02);
    color: var(--text-dim);
    transition: border-color .15s ease, color .15s ease, transform .15s var(--ease-out);
}

.no-follow i {
    font-size: 15px
}

.no-follow:hover {
    transform: translateY(-1px)
}

.no-follow-tg i {
    color: #2aabee
}

.no-follow-tg:hover {
    color: #fff;
    border-color: rgba(42, 171, 238, .5)
}

.no-follow-wa i {
    color: #25d366
}

.no-follow-wa:hover {
    color: #fff;
    border-color: rgba(37, 211, 102, .5)
}

.no-updates::after {
    /* soft fade hints there is more to scroll */
    content: "";
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 1px;
    height: 36px;
    pointer-events: none;
    border-radius: 0 0 16px 16px;
    background: linear-gradient(180deg, transparent, rgba(14, 14, 16, .9));
}

.no-updates-body {
    padding: 18px 18px 24px;
    max-height: 66vh;
    overflow-y: auto;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--text-dim);
    scrollbar-width: thin
}

.no-updates-body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--line);
    margin-bottom: 14px
}

.no-updates-body p {
    color: var(--text-dim);
    margin: 0 0 10px
}

.no-updates-body b,
.no-updates-body strong {
    color: #fff
}

.no-updates-body em,
.no-updates-body i {
    color: var(--text-mut)
}

.no-updates-body a {
    color: var(--brand)
}

/* the fade sits above the scroll area, not over the follow buttons */

.no-updates::after {
    bottom: 63px;
    border-radius: 0
}

/* ============================================================
   PANEL SELECT2-STYLE DROPDOWNS (data-select) — dark skin
   Panel JS renders these for category/service selects & search.
   ============================================================ */

.db-body .select2-container .select2-selection--single,
.db-body .select2-container .select2-selection {
    background: rgba(23, 23, 26, .8);
    border: 1px solid var(--line);
    border-radius: 11px;
    min-height: 42px;
    display: flex;
    align-items: center;
    box-shadow: none;
    color: var(--text);
}

.db-body .select2-container--open .select2-selection--single,
.db-body .select2-container--focus .select2-selection--single {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft)
}

.db-body .select2-selection__rendered {
    color: var(--text) !important;
    line-height: 1.5 !important;
    padding: 6px 12px
}

.db-body .select2-selection__placeholder {
    color: var(--text-mut)
}

.db-body .select2-selection__arrow b {
    border-top-color: var(--text-mut) !important
}

.db-body .select2-container--open .select2-selection__arrow b {
    border-bottom-color: var(--text-mut) !important
}

/* the ID badge inside options (panel custom template) */

.db-body .select2-selection__id,
.db-body .select2-results__option .select2-selection__id {
    display: inline-block;
    min-width: 48px;
    text-align: center;
    padding: 3px 8px;
    border-radius: 8px;
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid rgba(17, 212, 158, .3);
}

.db-body .select2-dropdown {
    background: rgba(20, 20, 23, .98);
    border: 1px solid var(--line-2);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .8);
}

.db-body .select2-search--dropdown {
    padding: 8px
}

.db-body .select2-search__field {
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid var(--line) !important;
    border-radius: 9px !important;
    color: var(--text) !important;
    padding: 8px 12px !important;
    font-family: var(--font);
}

.db-body .select2-search__field:focus {
    outline: none;
    border-color: var(--brand) !important
}

.db-body .select2-results__option {
    color: var(--text-dim);
    padding: 8px 12px;
    font-size: 13px
}

.db-body .select2-results__option--highlighted,
.db-body .select2-results__option--highlighted[aria-selected] {
    background: rgba(17, 212, 158, .12) !important;
    color: #fff !important
}

.db-body .select2-results__option[aria-selected="true"] {
    background: var(--brand-soft);
    color: var(--brand)
}

.db-body .select2-results__option a {
    color: var(--text-dim) !important;
    background: transparent !important;
    border: 0 !important
}

.db-body .select2-results__option a:hover {
    background: rgba(17, 212, 158, .1) !important;
    color: #fff !important
}

.db-body .select2-dropdown--below {
    overflow: hidden
}

/* ---- dynamic #fields widgets (drip-feed / subscriptions / expiry) ---- */

.db-body #fields .input-group {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%
}

.db-body #fields .input-group .form-control {
    flex: 1;
    min-width: 0
}

.db-body #fields .input-group-btn,
.db-body #fields .input-group-addon {
    display: flex;
    align-items: center;
    border: 0;
    background: transparent;
    padding: 0
}

.db-body #fields .input-group-btn .btn {
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    color: var(--text-dim);
}

.db-body #fields .input-group-btn .btn:hover {
    color: #ff9b9b;
    border-color: rgba(255, 107, 107, .45)
}

.db-body #fields .checkbox label,
.db-body #fields .radio label {
    font-weight: 500
}

.db-body .form-control.datetime {
    width: 100%
}

/* dark skin for the tempus-dominus datetime picker (Expiry field) */

.db-body .tempus-dominus-widget {
    background: #141416;
    color: var(--text);
    border: 1px solid var(--line-2);
    border-radius: 14px;
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .8);
}

.db-body .tempus-dominus-widget .date-container-days .dow {
    color: var(--text-mut)
}

.db-body .tempus-dominus-widget .date-container-days div:not(.no-highlight):hover,
.db-body .tempus-dominus-widget .date-container-months div:not(.no-highlight):hover,
.db-body .tempus-dominus-widget .date-container-years div:not(.no-highlight):hover,
.db-body .tempus-dominus-widget .date-container-decades div:not(.no-highlight):hover,
.db-body .tempus-dominus-widget .time-container-clock div:not(.no-highlight):hover,
.db-body .tempus-dominus-widget .time-container-hour div:not(.no-highlight):hover,
.db-body .tempus-dominus-widget .time-container-minute div:not(.no-highlight):hover,
.db-body .tempus-dominus-widget .time-container-second div:not(.no-highlight):hover,
.db-body .tempus-dominus-widget .toolbar div:hover {
    background: rgba(255, 255, 255, .06)
}

.db-body .tempus-dominus-widget .date-container-days div:not(.no-highlight).new,
.db-body .tempus-dominus-widget .date-container-days div:not(.no-highlight).old,
.db-body .tempus-dominus-widget .date-container-days .cw {
    color: rgba(255, 255, 255, .35)
}

.db-body .tempus-dominus-widget .bg-primary {
    background: var(--brand) !important;
    color: #04130d !important
}

.db-body .tempus-dominus-widget .text-primary {
    color: var(--brand) !important
}

/* panel select widget: SELECTED option state (stock paints it light grey) */

.db-body .select2-results__option--selected,
.db-body .select2-results__option.selected,
.db-body .select2-results__option.active,
.db-body .select2-results__option[aria-selected="true"],
.db-body .select2-results__option--highlighted.select2-results__option--selected {
    background: var(--brand-soft) !important;
    color: var(--brand) !important;
}

.db-body .select2-results__option--selected * {
    color: inherit !important
}

/* our dashboard components: never underline (bootstrap a:hover) */

.db-body .db-link,
.db-body .db-link:hover,
.db-body .db-link:focus,
.db-body .no-chip,
.db-body .no-chip:hover,
.db-body .no-tab,
.db-body .no-tab:hover,
.db-body .no-follow,
.db-body .no-follow:hover,
.db-body .no-stat-btn,
.db-body .no-stat-btn:hover,
.db-body .no-updates-all,
.db-body .no-updates-all:hover,
.db-body .db-balance-btn,
.db-body .db-balance-btn:hover,
.db-body .db-logo,
.db-body .db-top-logo {
    text-decoration: none !important
}

/* sidebar: user profile row */

.db-side-foot {
    display: flex;
    align-items: center;
    gap: 8px
}

.db-user {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 9px;
    border-radius: 12px;
    text-decoration: none !important;
    transition: background .15s ease;
}

.db-user:hover {
    background: rgba(255, 255, 255, .045)
}

/* the avatar: brand gradient tile with a soft glow ring */

.db-user-av {
    position: relative;
    flex: 0 0 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #16f2b4 0%, #0ea87e 55%, #086b52 100%);
    box-shadow: 0 4px 14px rgba(17, 212, 158, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.db-user-av::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 15px;
    border: 1px solid rgba(17, 212, 158, .35);
    pointer-events: none;
}

.db-user-av em {
    font-style: normal;
    font-size: 15px;
    font-weight: 800;
    color: #04130d
}

.db-user-txt {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px
}

.db-user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3
}

.db-user-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10.5px;
    color: var(--text-mut);
    line-height: 1.3;
    transition: color .15s ease;
}

.db-user-sub i {
    font-size: 8px;
    transition: transform .15s ease
}

.db-user:hover .db-user-sub {
    color: var(--brand)
}

.db-user:hover .db-user-sub i {
    transform: translateX(3px)
}

/* logout icon button — red on hover */

.db-foot-ic {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid var(--line);
    color: var(--text-mut);
    font-size: 14px;
    text-decoration: none !important;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.db-foot-ic:hover {
    color: #ff8a80;
    border-color: rgba(229, 83, 75, .45);
    background: rgba(229, 83, 75, .08)
}

/* ============================================================
   SIDEBAR COLLAPSE (desktop) — body.db-collapsed via script.js,
   persisted in localStorage
   ============================================================ */

.db-side-head {
    display: flex;
    align-items: center;
    height: var(--db-top);
    padding: 0 10px 0 18px;
    border-bottom: 1px solid var(--line);
    flex: 0 0 auto
}

.db-side-head .db-logo {
    flex: 1;
    height: auto;
    padding: 0;
    border: 0;
    min-width: 0;
    overflow: hidden
}

.db-collapse {
    flex: 0 0 30px;
    height: 30px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    cursor: pointer;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .02);
    color: var(--text-mut);
    font-size: 11px;
    transition: color .15s ease, border-color .15s ease;
}

.db-collapse:hover {
    color: var(--brand);
    border-color: rgba(17, 212, 158, .4)
}

@media(min-width:1025px) {
    .db-collapse {
        display: inline-flex
    }
    :root {
        --db-side-min: 72px
    }
    .db-collapsed {
        padding-inline-start: var(--db-side-min) !important
    }
    .db-collapsed .db-side {
        width: var(--db-side-min)
    }
    .db-collapsed .db-top {
        inset-inline-start: var(--db-side-min)
    }
    .db-collapsed .db-side-head {
        padding: 0;
        justify-content: center
    }
    .db-collapsed .db-side-head .db-logo {
        display: none
    }
    .db-collapsed .db-collapse i {
        transform: rotate(180deg)
    }
    .db-collapsed .db-link {
        justify-content: center;
        padding: 11px 0
    }
    .db-collapsed .db-link-txt {
        display: none
    }
    .db-collapsed .db-link-ic {
        flex-basis: auto;
        font-size: 15px
    }
    .db-collapsed .db-link .badge {
        /* ticket count becomes a glowing dot */
        position: absolute;
        top: 7px;
        inset-inline-end: 14px;
        width: 8px;
        height: 8px;
        padding: 0;
        font-size: 0;
        border-radius: 50%;
        box-shadow: 0 0 8px rgba(17, 212, 158, .8);
    }
    .db-collapsed .db-side-foot {
        flex-direction: column;
        gap: 8px
    }
    .db-collapsed .db-user {
        justify-content: center;
        padding: 4px
    }
    .db-collapsed .db-user-txt {
        display: none
    }
    .db-collapsed .db-side-foot {
        padding: 10px 6px
    }
}

.db-collapse i {
    transition: transform .25s var(--ease-out)
}

/* generic input-group inside the panel (listupdate search etc.) */

.db-body .input-group {
    display: flex;
    align-items: stretch;
    width: auto
}

.db-body .input-group .form-control {
    flex: 1;
    min-width: 0;
    border-start-end-radius: 0;
    border-end-end-radius: 0
}

.db-body .input-group-btn {
    display: flex
}

.db-body .input-group-btn .btn {
    display: inline-flex;
    align-items: center;
    padding: 0 15px;
    height: auto;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: 11px;
    border-end-end-radius: 11px;
    margin-inline-start: -1px;
}

/* ============================================================
   MASS ORDER (massorder.twig)
   ============================================================ */

.mo-page {
    max-width: 1240px;
    margin: 0 auto;
    padding: 24px 20px 64px
}

.mo-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start
}

@media(min-width:1000px) {
    .mo-grid {
        grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr)
    }
}

.mo-main {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(18, 18, 20, .55);
    padding: 20px 22px
}

.mo-label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.mo-fmt {
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 600;
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid rgba(17, 212, 158, .25);
}

.db-body .mo-area {
    min-height: 320px;
    resize: vertical;
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.8;
    white-space: pre;
    overflow-x: auto;
}

.mo-counter {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-mut)
}

.mo-counter b {
    color: var(--brand);
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace
}

.db-body .mo-submit {
    width: 100%;
    padding: 13px 22px;
    font-size: 14px;
    margin-top: 6px
}

.db-body .mo-submit i {
    margin-inline-start: 6px
}

/* guide card */

.mo-side {
    position: sticky;
    top: calc(var(--db-top) + 16px)
}

@media(max-width:999px) {
    .mo-side {
        position: static
    }
}

.mo-guide {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(18, 18, 20, .55);
    padding: 18px
}

.mo-warn {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border: 1px solid rgba(227, 179, 65, .35);
    border-inline-start: 3px solid #e3b341;
    border-radius: 4px 12px 12px 4px;
    background: rgba(227, 179, 65, .07);
    font-size: 12.5px;
    line-height: 1.55;
    color: #e8cd8a;
}

.mo-warn i {
    color: #e3b341;
    font-size: 14px;
    margin-top: 1px
}

.mo-sec {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text-mut);
    margin: 14px 0 8px
}

.mo-code {
    padding: 12px 14px;
    border-radius: 11px;
    overflow-x: auto;
    border: 1px solid var(--line);
    background: #0d0e10;
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--text);
    white-space: nowrap;
}

.mo-code b {
    color: var(--brand);
    font-weight: 700
}

.mo-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    margin-top: 16px;
    padding: 12px;
    border-radius: 11px;
    cursor: pointer;
    border: 1px solid rgba(17, 212, 158, .35);
    background: var(--brand-soft);
    font-size: 13px;
    font-weight: 700;
    color: var(--brand);
    font-family: var(--font);
    transition: background .15s ease, color .15s ease;
}

.mo-copy:hover {
    background: var(--brand);
    color: #04130d
}

.mo-copy.is-done {
    background: var(--brand);
    color: #04130d
}

/* ============================================================
   LIST UPDATE (/listupdate) — stock markup decorated by
   script.js initListUpdate (no twig of its own)
   ============================================================ */

.lu-page .nav-pills {
    display: flex;
    gap: 10px;
    align-items: center;
    float: none !important;
    margin-bottom: 14px;
    flex-wrap: wrap
}

.lu-page .nav-pills>li {
    float: none
}

.lu-page .nav-pills .dropdown .btn {
    height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 16px;
    border-radius: 12px;
    background: rgba(18, 18, 20, .75);
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}

.lu-page .nav-pills .dropdown .btn:hover {
    border-color: rgba(17, 212, 158, .4)
}

.lu-page .nav-pills .search {
    margin-inline-start: auto
}

.lu-page .search .form-control {
    height: 44px;
    border-radius: 12px 0 0 12px;
    min-width: 220px
}

.lu-page .search .input-group-btn .btn {
    border-radius: 0 12px 12px 0;
    background: var(--brand);
    color: #04130d;
    border-color: transparent
}

.lu-page .well {
    padding: 0;
    overflow: hidden
}

.lu-page .well .table {
    margin: 0
}

.lu-page .table>tbody>tr>td {
    padding: 12px 16px
}

.lu-page .table>tbody>tr:hover {
    background: rgba(17, 212, 158, .03)
}

/* decorated cells */

.lu-id {
    display: inline-block;
    min-width: 56px;
    text-align: center;
    padding: 4px 10px;
    margin-inline-end: 10px;
    border-radius: 8px;
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid rgba(17, 212, 158, .3);
}

.lu-name {
    color: var(--text);
    font-weight: 500
}

.lu-date {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--text-mut);
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
}

.lu-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--line);
    color: var(--text-dim);
    background: rgba(255, 255, 255, .03);
}

.lu-badge i {
    font-size: 10px
}

.lu-ok {
    color: #7ee8c8;
    border-color: rgba(17, 212, 158, .4);
    background: rgba(17, 212, 158, .08)
}

.lu-bad {
    color: #ff9b9b;
    border-color: rgba(255, 107, 107, .4);
    background: rgba(255, 107, 107, .08)
}

.lu-up {
    color: #e8cd8a;
    border-color: rgba(227, 179, 65, .4);
    background: rgba(227, 179, 65, .07)
}

.lu-down {
    color: #7ee8c8;
    border-color: rgba(17, 212, 158, .35);
    background: rgba(17, 212, 158, .06)
}

.lu-new {
    color: #9ec5f8;
    border-color: rgba(96, 165, 250, .4);
    background: rgba(96, 165, 250, .08)
}

/* mobile: rows -> cards */

@media(max-width:760px) {
    .lu-page .nav-pills {
        gap: 8px
    }
    .lu-page .nav-pills .search {
        margin-inline-start: 0;
        flex: 1 1 100%
    }
    .lu-page .search .input-group {
        width: 100%
    }
    .lu-page .search .form-control {
        min-width: 0
    }
    .lu-page .well {
        border: 0;
        background: transparent;
        overflow: visible
    }
    .lu-page .well .table,
    .lu-page .well .table tbody,
    .lu-page .well .table tr,
    .lu-page .well .table td {
        display: block
    }
    .lu-page .well .table thead {
        display: none
    }
    .lu-page .well .table tr {
        margin-bottom: 10px;
        padding: 13px 14px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: rgba(18, 18, 20, .55);
    }
    .lu-page .table>tbody>tr>td {
        padding: 0;
        border: 0
    }
    .lu-page .table>tbody>tr>td+td {
        margin-top: 8px
    }
}

/* ============================================================
   DASHBOARD AMBIENT — no square grid inside the panel (it clashed
   with the rounded cards); clean gradient + soft brand glow only
   ============================================================ */

.db-body .smmgon-ambient {
    background: radial-gradient(ellipse 120% 90% at 50% -10%, #101312 0%, var(--bg) 55%)
}

.db-body .smmgon-ambient::before {
    content: none
}

.db-body .smmgon-ambient::after {
    left: 50%;
    top: -380px;
    width: 1400px;
    height: 760px;
    background: radial-gradient(closest-side, rgba(17, 212, 158, .09), rgba(17, 212, 158, .03) 55%, transparent 75%);
    filter: blur(28px);
}

/* ============================================================
   PANEL FIXES ROUND 2
   ============================================================ */

/* services page inside the panel: db-body input rules were beating
   the search paddings — restate them with matching specificity */

.db-body .sv-search-input {
    padding: 0 118px 0 44px
}

.db-body.rtl .sv-search-input,
[dir="rtl"] .db-body .sv-search-input {
    padding: 0 44px 0 118px
}

.db-body .sv-toolbar {
    top: var(--db-top)
}

/* smooth sidebar collapse */

@media(min-width:1025px) {
    .db-body {
        transition: padding-inline-start .25s var(--ease-out)
    }
    .db-side {
        transition: width .25s var(--ease-out), inset-inline-start .28s var(--ease-out)
    }
    .db-top {
        transition: inset-inline-start .25s var(--ease-out)
    }
}

/* ============================================================
   PANEL TABLES (orders / subscriptions / drip-feed / refill …)
   Stock markup decorated by script.js initPanelTables
   ============================================================ */

.db-tablewell {
    overflow-x: auto
}

.db-tablewell .table {
    min-width: 720px
}

.db-tablewell .table>tbody>tr>td {
    font-size: 12.5px;
    max-width: 300px
}

.db-tablewell .table td.service-name,
.db-tablewell .table td[data-th*="ervice"] {
    min-width: 120px;
    white-space: normal;
    line-height: 1.5
}

.db-tablewell .table a {
    word-break: break-all
}

.db-tablewell .table td[data-th] {
    vertical-align: middle
}

/* ids and numbers read better in mono */

.db-tablewell .table td:first-child {
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: var(--text-mut);
}

/* status badges (script.js classifies the Status column) */

.db-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px;
    border-radius: 8px;
    white-space: nowrap;
    font-size: 11.5px;
    font-weight: 600;
    border: 1px solid var(--line);
    color: var(--text-dim);
    background: rgba(255, 255, 255, .03);
}

.db-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor
}

.db-status-ok {
    color: #7ee8c8;
    border-color: rgba(17, 212, 158, .4);
    background: rgba(17, 212, 158, .08)
}

.db-status-run {
    color: #5fd4f0;
    border-color: rgba(95, 212, 240, .35);
    background: rgba(95, 212, 240, .07)
}

.db-status-wait {
    color: #e8cd8a;
    border-color: rgba(227, 179, 65, .4);
    background: rgba(227, 179, 65, .07)
}

.db-status-bad {
    color: #ff9b9b;
    border-color: rgba(255, 107, 107, .4);
    background: rgba(255, 107, 107, .08)
}

.db-status-off {
    color: var(--text-mut)
}

/* empty table -> friendly placeholder */

.db-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 44px 20px;
    text-align: center;
    color: var(--text-mut);
    font-size: 13.5px;
}

.db-empty i {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 20px;
    color: var(--text-mut);
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
}

/* mobile: decorated rows become COMPACT 2-column cards
   (label above value; long values span both columns) */

@media(max-width:820px) {
    .db-tablewell {
        overflow: visible;
        background: transparent;
        border: 0;
        padding: 0
    }
    .db-tablewell .table {
        min-width: 0
    }
    .db-tablewell .table,
    .db-tablewell .table tbody {
        display: block
    }
    .db-tablewell .table thead {
        display: none
    }
    .db-tablewell .table tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px 16px;
        margin-bottom: 10px;
        padding: 13px 14px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: rgba(18, 18, 20, .55);
    }
    .db-tablewell .table>tbody>tr>td {
        display: block;
        padding: 0;
        border: 0;
        max-width: none;
        min-width: 0;
        overflow: hidden;
        font-size: 12.5px;
        line-height: 1.45;
    }
    .db-tablewell .table>tbody>tr>td::before {
        content: attr(data-th);
        display: block;
        margin-bottom: 2px;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--text-mut);
    }
    .db-tablewell .table>tbody>tr>td:not([data-th]) {
        display: none
    }
    .db-tablewell .table>tbody>tr>td:not([data-th]).db-td-keep {
        display: block
    }
    .db-tablewell .table td.db-td-wide {
        grid-column: 1/-1
    }
    /* stock width-XX helper classes must not shrink card cells */
    .db-tablewell .table>tbody>tr>td {
        width: auto !important
    }
    .db-tablewell .table td.service-name,
    .db-tablewell .table td[data-th*="ervice"] {
        min-width: 0;
        white-space: normal
    }
    .db-tablewell .table td a {
        word-break: break-all;
        line-height: 1.45
    }
    .db-tablewell .table td .progress {
        width: 100%;
        margin-top: 2px
    }
    .db-tablewell .table td .btn {
        width: 100%;
        padding: 9px 12px;
        text-align: center
    }
}

/* ============================================================
   LIST UPDATE v2 (updates.twig) — filter chips + decorated table
   ============================================================ */

.lu-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 20px 20px 64px
}

.lu-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px
}

.lu-types {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0
}

.lu-type {
    display: inline-flex;
    align-items: center;
    padding: 9px 15px;
    border-radius: 11px;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-dim);
    border: 1px solid var(--line);
    background: rgba(18, 18, 20, .55);
    transition: color .15s ease, border-color .15s ease;
    text-decoration: none !important;
}

.lu-type:hover {
    color: #fff;
    border-color: var(--line-2)
}

.lu-type.is-active {
    color: var(--brand);
    border-color: rgba(17, 212, 158, .5);
    background: var(--brand-soft)
}

.lu-search {
    margin-inline-start: auto
}

.lu-search .input-group {
    display: flex
}

.db-body .lu-search .form-control {
    flex: 1 1 auto;
    width: auto;
    min-width: 220px;
    height: 42px;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.lu-search .input-group-btn {
    flex: 0 0 auto;
    width: auto;
    display: flex
}

.db-body .lu-search .input-group-btn .btn {
    background: var(--brand);
    color: #04130d;
    border-color: transparent
}

@media(max-width:760px) {
    .lu-search {
        margin-inline-start: 0;
        width: 100%
    }
    .lu-search .input-group {
        width: 100%
    }
    .db-body .lu-search .form-control {
        min-width: 0
    }
}

.lu-card {
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(14, 14, 16, .6)
}

.lu-tbl {
    width: 100%;
    border-collapse: collapse
}

.lu-tbl thead th {
    padding: 12px 16px;
    text-align: start;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-mut);
    background: rgba(255, 255, 255, .025);
    border-bottom: 1px solid var(--line-2);
}

.lu-th-date {
    width: 130px
}

.lu-th-upd {
    width: 340px
}

.lu-tbl tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    font-size: 13px;
    color: var(--text-dim)
}

.lu-tbl tbody tr:last-child td {
    border-bottom: 0
}

.lu-tbl tbody tr:hover td {
    background: rgba(17, 212, 158, .03)
}

.lu-td-svc {
    min-width: 240px
}

.lu-td-svc .lu-name {
    white-space: normal;
    line-height: 1.5
}

/* mobile: rows -> cards */

@media(max-width:760px) {
    .lu-card {
        border: 0;
        border-radius: 0;
        background: transparent;
        overflow: visible
    }
    .lu-tbl,
    .lu-tbl tbody,
    .lu-tbl tr,
    .lu-tbl td {
        display: block
    }
    .lu-tbl thead {
        display: none
    }
    .lu-tbl tbody tr {
        margin-bottom: 10px;
        padding: 13px 14px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: rgba(18, 18, 20, .55);
    }
    .lu-tbl tbody td {
        padding: 4px 0;
        border: 0
    }
    .lu-tbl tbody tr:hover td {
        background: transparent
    }
    .lu-td-svc {
        min-width: 0
    }
    .lu-td-date::before,
    .lu-td-upd::before {
        content: attr(data-th);
        display: block;
        margin: 6px 0 3px;
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--text-mut);
    }
}

/* stock order pages: breathing room + search button not clipped */

.db-body .container-fluid {
    padding-left: 24px;
    padding-right: 24px
}

.db-body .nav-pills .search .input-group {
    min-width: 0
}

.db-body .nav-pills.pull-right {
    float: none !important;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px
}

.db-body .nav-pills.pull-right>li {
    float: none
}

.db-body .nav-pills.pull-right .search {
    margin-inline-start: auto
}

@media(max-width:760px) {
    .db-body .nav-pills.pull-right .search {
        margin-inline-start: 0;
        flex: 1 1 100%
    }
    .db-body .nav-pills.pull-right .search .input-group {
        width: 100%
    }
}

/* ============================================================
   ROUND 3 FIXES: mobile tabs, sidebar sections, favorites,
   subscription progress bars
   ============================================================ */

/* new order tabs never wrap into two lines */

.no-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none
}

.no-tabs::-webkit-scrollbar {
    display: none
}

.no-tab {
    white-space: nowrap;
    flex: 0 0 auto
}

/* sidebar section labels */

.db-sec {
    padding: 14px 12px 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--text-mut);
    display: flex;
    align-items: center;
    gap: 8px;
}

.db-sec::before {
    content: "";
    width: 3px;
    height: 11px;
    border-radius: 3px;
    background: var(--brand);
    box-shadow: 0 0 8px rgba(17, 212, 158, .6)
}

.db-menu>.db-sec:first-child {
    padding-top: 6px
}

@media(min-width:1025px) {
    .db-collapsed .db-sec {
        padding: 10px 0 4px;
        justify-content: center
    }
    .db-collapsed .db-sec::before {
        margin: 0
    }
    .db-collapsed .db-sec {
        font-size: 0
    }
}

/* favorites panel (new order) */

.no-favs {
    margin-bottom: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(14, 14, 16, .5)
}

.no-favs[hidden] {
    display: none
}

.no-favs-loading {
    padding: 22px;
    text-align: center;
    color: var(--brand);
    font-size: 16px
}

.no-favs-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-mut);
}

.no-favs-empty i {
    color: #e3b341;
    font-size: 15px
}

.no-fav {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 11px 14px;
    cursor: pointer;
    text-align: start;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--font);
    font-size: 13px;
    color: var(--text-dim);
    transition: background .15s ease, color .15s ease;
}

.no-fav:last-child {
    border-bottom: 0
}

.no-fav:hover {
    background: rgba(17, 212, 158, .06);
    color: #fff
}

.no-fav-id {
    flex: 0 0 auto;
    min-width: 52px;
    text-align: center;
    padding: 3px 8px;
    border-radius: 8px;
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid rgba(17, 212, 158, .3);
}

.no-fav-name {
    flex: 1;
    min-width: 0;
    line-height: 1.45
}

.no-fav>i {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--text-mut);
    transition: transform .15s var(--ease-out), color .15s ease
}

.no-fav:hover>i {
    color: var(--brand);
    transform: translateX(3px)
}

/* subscription progress bars (the "empty green pill") */

.db-body .progress {
    height: 8px;
    min-width: 64px;
    margin: 0;
    border-radius: 99px;
    overflow: hidden;
    background: rgba(255, 255, 255, .06);
    box-shadow: none;
}

.db-body .progress-bar {
    background: var(--brand);
    box-shadow: none
}

@media(max-width:820px) {
    .db-tablewell .table td .progress {
        width: 100%;
        margin-top: 4px
    }
    .db-tablewell .table td .btn {
        margin-top: 4px
    }
}

/* ============================================================
   SIDEBAR GROUPS v2 — readable, collapsible headings
   ============================================================ */

.db-sec {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 12px 12px 8px;
    cursor: pointer;
    background: transparent;
    border: 0;
    font-family: var(--font);
    text-align: start;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text-dim);
    transition: color .15s ease;
}

.db-sec:hover {
    color: #fff
}

.db-sec::before {
    content: none
}

.db-sec-mark {
    flex: 0 0 3px;
    height: 12px;
    border-radius: 3px;
    background: var(--brand);
    box-shadow: 0 0 8px rgba(17, 212, 158, .6)
}

.db-sec-txt {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.db-sec-arr {
    font-size: 9px;
    color: var(--text-mut);
    transition: transform .25s var(--ease-out)
}

.db-sec:hover .db-sec-arr {
    color: var(--brand)
}

.db-group.is-closed .db-sec-arr {
    transform: rotate(-90deg)
}

.db-group.is-closed .db-group-body {
    display: none
}

.db-group+.db-group {
    margin-top: 4px
}

@media(min-width:1025px) {
    /* icon-rail mode: groups stay open, headings collapse to a marker */
    .db-collapsed .db-group-body {
        display: block !important
    }
    .db-collapsed .db-sec {
        justify-content: center;
        padding: 10px 0 4px;
        pointer-events: none
    }
    .db-collapsed .db-sec-txt,
    .db-collapsed .db-sec-arr {
        display: none
    }
}

/* favorites stars on the services page — actually visible now */

.sv-td-fav [role="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    color: #8b8b94;
    font-size: 15px;
    cursor: pointer;
    transition: color .15s ease, background .15s ease, transform .15s var(--ease-out);
}

.sv-td-fav [role="button"]:hover {
    color: #e3b341;
    background: rgba(227, 179, 65, .1);
    transform: scale(1.08)
}

.sv-td-fav .favorite-active,
.sv-td-fav .favorite-active [data-favorite-icon] {
    color: #e3b341 !important
}

/* ============================================================
   ROUND 4 FIXES
   ============================================================ */

/* search icon must never sit on the placeholder — any context */

.sv-search .sv-search-input {
    padding-inline-start: 44px !important;
    padding-inline-end: 118px !important
}

@media(max-width:640px) {
    .sv-search .sv-search-input {
        padding-inline-end: 96px !important
    }
    .sv-count {
        inset-inline-end: 48px
    }
}

/* services filter dropdown: align to the right edge of its button,
   never run off-screen (tablet widths included) */

.sv-dd .sv-dd-menu {
    inset-inline-end: 0;
    inset-inline-start: auto
}

@media(max-width:1024px) {
    .sv-dd .sv-dd-menu {
        position: fixed;
        left: 12px !important;
        right: 12px !important;
        top: auto;
        max-width: none;
        min-width: 0
    }
}

/* stats grid: self-adapting; clean 2x2 under the balance on phones */

.no-stats {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
}

@media(max-width:900px) {
    .no-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
    .no-stat-balance {
        grid-column: 1/-1
    }
}

/* favorite stars: the panel emits FA5-Pro classes (far/fas fa-star) but
   that font often fails to load -> empty squares. Force our FA6 Free. */

.sv-td-fav [data-favorite-icon] {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important
}

.sv-td-fav [data-favorite-icon]::before {
    content: "\f005"
}

.sv-td-fav .favorite-active [data-favorite-icon] {
    font-weight: 900 !important
}

.sv-td-fav [role="button"].favorite-active [data-favorite-icon],
.sv-td-fav .fas[data-favorite-icon] {
    font-weight: 900 !important
}

/* ============================================================
   ADD FUNDS (addfunds.twig) + REFUNDS (refunds.twig)
   ============================================================ */

.af-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 24px 20px 64px
}

.af-card {
    position: relative;
    overflow: hidden;
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(18, 18, 20, .55);
}

.af-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, rgba(17, 212, 158, .6), transparent)
}

/* the method instruction the panel injects (was a white box) */

.db-body .form-group.instruction {
    padding: 14px 18px;
    margin-bottom: 18px;
    border: 1px solid rgba(17, 212, 158, .3);
    border-inline-start: 3px solid var(--brand);
    border-radius: 4px 12px 12px 4px;
    background: rgba(17, 212, 158, .05) !important;
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-dim);
}

.db-body .form-group.instruction p,
.db-body .form-group.instruction div:not([class]) {
    background: transparent !important;
    color: inherit
}

.db-body .form-group.instruction b,
.db-body .form-group.instruction strong {
    color: #fff
}

.db-body .form-group.instruction .control-label {
    display: block;
    margin-bottom: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--brand);
}

/* quick amount presets */

.af-presets {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: -6px 0 14px
}

.af-presets a,
.af-presets button {
    flex: 1 1 0;
    min-width: 64px;
    padding: 9px 8px;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .02);
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-dim);
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.af-presets a:hover,
.af-presets button:hover {
    color: var(--brand);
    border-color: rgba(17, 212, 158, .45);
    background: var(--brand-soft)
}

/* live bonus hint */

.af-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 11px 15px;
    border: 1px solid rgba(227, 179, 65, .4);
    border-inline-start: 3px solid #e3b341;
    border-radius: 4px 12px 12px 4px;
    background: rgba(227, 179, 65, .08);
    font-size: 13.5px;
    color: #e8cd8a;
}

.af-hint[hidden] {
    display: none
}

.af-hint i {
    color: #e3b341;
    font-size: 15px
}

.af-hint b {
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    color: #f4dc9d
}

.db-body .af-pay {
    width: 100%;
    padding: 14px 22px;
    font-size: 14.5px;
    font-weight: 700;
    margin-top: 4px
}

.db-body .af-pay i {
    margin-inline-start: 6px
}

/* trust chips */

.af-trust {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line)
}

.af-trust span {
    flex: 1 1 0;
    min-width: 150px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 9px 12px;
    border-radius: 10px;
    white-space: nowrap;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .02);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
}

.af-trust i {
    color: var(--brand);
    font-size: 12px
}

@media(max-width:560px) {
    .af-trust span {
        flex-basis: 100%
    }
}

/* SEO block + history */

.af-seo {
    margin-top: 16px;
    padding: 20px 24px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(18, 18, 20, .5);
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text-dim);
}

.af-seo h1,
.af-seo h2,
.af-seo h3 {
    color: #fff
}

.af-hist {
    margin-top: 20px
}

.af-hist-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--text-mut);
}

.af-hist-head i {
    color: var(--brand)
}

/* amount sign tinting (all panel tables) */

.db-body td.db-amt-pos {
    color: #7ee8c8 !important;
    font-weight: 600
}

.db-body td.db-amt-neg {
    color: #ff9b9b !important;
    font-weight: 600
}

/* refunds page */

.lu-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 14px;
    padding: 12px 15px;
    border: 1px solid rgba(96, 165, 250, .35);
    border-inline-start: 3px solid #60a5fa;
    border-radius: 4px 12px 12px 4px;
    background: rgba(96, 165, 250, .07);
    font-size: 13px;
    line-height: 1.6;
    color: #9ec5f8;
}

.lu-note i {
    color: #60a5fa;
    margin-top: 2px
}

a.lu-id {
    transition: border-color .15s ease, color .15s ease
}

a.lu-id:hover {
    border-color: var(--brand);
    color: var(--brand-bright)
}

.rf-amt {
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    font-weight: 700;
    color: #7ee8c8;
    white-space: nowrap;
}

/* generic mobile labels for lu tables (works for refunds too) */

@media(max-width:760px) {
    .lu-tbl tbody td[data-th]::before {
        content: attr(data-th);
        display: block;
        margin: 6px 0 3px;
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--text-mut);
    }
}

/* instruction: neutralize ONLY the injected bootstrap wrappers —
   our tier cards keep their own borders/backgrounds */

.db-body .form-group.instruction .well,
.db-body .form-group.instruction .panel,
.db-body .form-group.instruction .panel-body {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0;
    margin: 0;
}

.db-body .form-group.instruction .af-raw {
    display: none
}

/* designed bonus tiers */

.af-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin-top: 4px
}

.af-tier {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 11px 13px;
    border-radius: 11px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .02);
    text-align: center;
}

.af-tier-min {
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
    color: #fff
}

.af-tier-pct {
    align-self: center;
    padding: 2px 10px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid rgba(17, 212, 158, .3);
}

.af-tier-total {
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: #7ee8c8
}

.af-tier-total i {
    font-size: 9px;
    color: var(--text-mut);
    margin-inline-end: 4px
}

/* fee chip */

.af-fee {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid rgba(227, 179, 65, .4);
    background: rgba(227, 179, 65, .08);
    font-size: 13px;
    font-weight: 700;
    color: #e8cd8a;
}

.af-fee i {
    color: #e3b341;
    font-size: 11px
}

.af-presets a {
    text-align: center;
    text-decoration: none !important;
    user-select: none
}

/* stock status filters (orders/subscriptions/drip/refill/tickets):
   chip look + tidy mobile behavior */

.db-body .nav-pills>li {
    margin: 0
}

.db-body .nav-pills>li>a {
    display: inline-flex;
    align-items: center;
    padding: 9px 15px;
    border-radius: 11px;
    margin: 0 6px 8px 0;
    border: 1px solid var(--line);
    background: rgba(18, 18, 20, .55);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-dim);
    text-decoration: none !important;
    transition: color .15s ease, border-color .15s ease;
}

.db-body .nav-pills>li>a:hover {
    color: #fff;
    background: rgba(18, 18, 20, .75);
    border-color: var(--line-2)
}

.db-body .nav-pills>li.active>a {
    color: var(--brand);
    background: var(--brand-soft);
    border-color: rgba(17, 212, 158, .5)
}

.db-body .nav-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

.db-body .nav-pills .search {
    margin-inline-start: auto
}

.db-body .nav-pills .search .input-group {
    display: flex;
    width: 100%
}

.db-body .nav-pills .search .form-control {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 42px;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.db-body .nav-pills .search .input-group-btn {
    flex: 0 0 auto;
    width: auto;
    display: flex
}

.db-body .nav-pills .search .input-group-btn .btn {
    height: 42px;
    padding: 0 16px
}

.db-body .nav-pills .search .input-group-btn .btn {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: 11px;
    border-end-end-radius: 11px;
    background: var(--brand);
    color: #04130d;
    border-color: transparent;
}

@media(max-width:820px) {
    .db-body .nav-pills .search {
        margin-inline-start: 0;
        flex: 1 1 100%;
        order: 99;
        max-width: 100%
    }
    .db-body .nav-pills .search form {
        width: 100%
    }
    .db-body .nav-pills>li>a {
        padding: 8px 13px;
        font-size: 12px;
        margin: 0 5px 7px 0
    }
}

/* ============================================================
   ORDERS — bulk select & copy
   ============================================================ */

.db-copybar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: rgba(18, 18, 20, .5);
}

.db-copyall {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dim)
}

.db-copyall input,
.db-check input {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    flex: 0 0 auto;
    border: 1.5px solid var(--line-2);
    border-radius: 6px;
    background: rgba(255, 255, 255, .03);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px;
    transition: border-color .15s ease, background-color .15s ease;
}

.db-copyall input:hover,
.db-check input:hover {
    border-color: rgba(17, 212, 158, .55)
}

.db-copyall input:checked,
.db-check input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2 4.8 9 10 3.4' fill='none' stroke='%2304130d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.db-copyall input:indeterminate {
    background-color: var(--brand-soft);
    border-color: rgba(17, 212, 158, .55);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6h7' fill='none' stroke='%2311d49e' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* checkbox and ID on one line in the desktop table */

.db-tablewell .table td:has(>.db-check) {
    white-space: nowrap
}

.db-check {
    margin-inline-end: 11px
}

.db-copybtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid rgba(17, 212, 158, .35);
    background: var(--brand-soft);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--brand);
    font-family: var(--font);
    transition: background .15s ease, color .15s ease, opacity .15s ease;
}

.db-copybtn:hover:not(:disabled) {
    background: var(--brand);
    color: #04130d
}

.db-copybtn:disabled {
    opacity: .45;
    cursor: default
}

.db-copybtn.is-done {
    background: var(--brand);
    color: #04130d
}

.db-copybtn b {
    padding: 1px 8px;
    border-radius: 7px;
    background: rgba(0, 0, 0, .25);
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
}

.db-check {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    vertical-align: middle
}

@media(max-width:820px) {
    .db-tablewell .table tr {
        position: relative
    }
    .db-check {
        position: absolute;
        top: 12px;
        inset-inline-end: 12px;
        margin: 0;
        z-index: 1
    }
    .db-copybar {
        position: sticky;
        top: calc(var(--db-top) + 8px);
        z-index: 20;
        backdrop-filter: blur(10px)
    }
}

/* ============================================================
   PANEL ACTION BUTTONS in tables (Reorder / Cancel / Refill /
   gear dropdowns) — present and future
   ============================================================ */

/* link tint made btn text green-on-green — dark text on brand buttons */

.db-body .btn-primary,
.db-body a.btn-primary,
.db-tablewell .btn-primary,
.db-tablewell a.btn-primary {
    color: #04130d !important;
    font-weight: 700;
}

.db-tablewell .btn {
    border-radius: 9px;
    border: 1px solid transparent;
    font-family: var(--font);
    font-weight: 600;
    text-decoration: none !important;
    transition: filter .15s ease;
}

.db-tablewell .btn:hover {
    filter: brightness(1.12)
}

.db-tablewell .btn-xs {
    padding: 4px 12px;
    font-size: 11.5px;
    line-height: 1.5
}

.db-tablewell .btn-default {
    background: rgba(255, 255, 255, .05);
    border-color: var(--line-2);
    color: var(--text-dim) !important;
}

.db-tablewell .btn-default:hover {
    color: #fff !important
}

.db-tablewell .btn-danger {
    background: rgba(229, 83, 75, .12);
    border-color: rgba(229, 83, 75, .4);
    color: #ff8a80 !important
}

.db-tablewell .btn-danger:hover {
    background: rgba(229, 83, 75, .25)
}

/* gear/action dropdown menus: dark skin + do not clip inside the
   scrollable table wrapper while open */

.db-tablewell:has(.open),
.db-tablewell:has(.dropdown-menu[style*="block"]) {
    overflow: visible
}

.db-body .dropdown-menu {
    background: #161618;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .6);
    padding: 6px;
    min-width: 170px;
}

.db-body .dropdown-menu>li>a {
    display: block;
    padding: 9px 13px;
    border-radius: 8px;
    color: var(--text-dim);
    font-size: 13px;
    text-decoration: none !important;
}

.db-body .dropdown-menu>li>a:hover {
    background: rgba(255, 255, 255, .05);
    color: #fff
}

.db-body .dropdown-menu .divider {
    background: var(--line);
    margin: 5px 8px
}

/* ============================================================
   LONG LINKS in tables — never blow up the layout
   ============================================================ */

.db-tablewell .table td a[href^="http"] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

@media(max-width:820px) {
    /* mobile cards: wrap instead of ellipsis, but clamp extreme links to 3 lines */
    .db-tablewell .table td a[href^="http"] {
        white-space: normal;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
    /* mobile: action buttons of any color are comfortable tap targets */
    .db-tablewell .table td .btn {
        width: 100%;
        padding: 10px 12px;
        text-align: center;
        font-size: 13px
    }
}

/* order links (wrapped by script.js) — brand tint */

.db-tablewell .table td a[href^="http"] {
    color: var(--brand);
    text-decoration: none
}

.db-tablewell .table td a[href^="http"]:hover {
    text-decoration: underline
}

/* ============================================================
   WIDE TABLES — fit first, hint if scroll remains
   ============================================================ */

/* tighter cells so 11-column tables fit without scrolling */

@media(min-width:821px) {
    /* the stock td.link{min-width:200px} bloats the username column */
    .db-tablewell .table td.link {
        min-width: 0
    }
    .db-tablewell .table>thead>tr>th {
        padding: 12px 7px;
        font-size: 10px
    }
    .db-tablewell .table>tbody>tr>td {
        padding: 12px 7px;
        font-size: 12.5px
    }
    /* only long-text columns may break words (never IDs/numbers) */
    .db-tablewell .table td.link,
    .db-tablewell .table td[data-th*="ervice"] {
        word-break: break-word
    }
    .db-tablewell .db-status {
        padding: 4px 10px;
        font-size: 11px;
        white-space: nowrap
    }
    .db-tablewell .btn-xs {
        white-space: nowrap
    }
}

/* compact two-line datetime stamp */

.db-dt {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.4;
    white-space: nowrap;
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
}

.db-dt small {
    font-size: 10px;
    color: var(--text-mut)
}

@media(max-width:820px) {
    .db-dt {
        flex-direction: row;
        gap: 6px;
        align-items: baseline;
        font-size: 12px
    }
    .db-dt small {
        font-size: 11px
    }
}

/* fading right edge + nudging arrow while more columns are off-screen */

.db-scrollwrap {
    position: relative
}

.db-scrollhint {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    width: 70px;
    display: none;
    align-items: center;
    justify-content: flex-end;
    padding-inline-end: 12px;
    pointer-events: none;
    border-radius: 0 16px 16px 0;
    background: linear-gradient(to left, rgba(8, 9, 10, .94), rgba(8, 9, 10, 0));
}

.db-scrollwrap.db-more .db-scrollhint {
    display: flex
}

.db-scrollhint i {
    color: var(--brand);
    font-size: 15px;
    animation: dbNudge 1.3s ease-in-out infinite
}

@keyframes dbNudge {
    0%,
    100% {
        transform: translateX(0);
        opacity: .55
    }
    50% {
        transform: translateX(6px);
        opacity: 1
    }
}

@media(max-width:820px) {
    .db-scrollhint {
        display: none !important
    }
}

@media(prefers-reduced-motion:reduce) {
    .db-scrollhint i {
        animation: none
    }
}

/* ============================================================
   AFFILIATES (afx-*)
   ============================================================ */

.afx-page {
    max-width: 1080px;
    margin: 0 auto
}

.afx-hero {
    padding: 34px 32px 28px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: radial-gradient(700px 260px at 8% -20%, rgba(17, 212, 158, .09), transparent 60%), rgba(18, 18, 20, .55);
    margin-bottom: 26px;
}

.afx-title {
    margin: 0 0 10px;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.3;
    color: #fff;
    letter-spacing: -.3px
}

.afx-rate {
    color: var(--brand);
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace
}

.afx-sub {
    margin: 0 0 22px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--text-dim);
    max-width: 640px
}

.afx-linklabel {
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-mut);
}

.afx-linkrow {
    display: flex;
    gap: 10px;
    max-width: 640px
}

.afx-linkrow input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid rgba(17, 212, 158, .35);
    background: rgba(17, 212, 158, .05);
    color: #d9fff2;
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
}

.afx-linkrow input:focus {
    outline: none;
    border-color: var(--brand)
}

.afx-copy {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    background: var(--brand);
    color: #04130d;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 700;
    transition: filter .15s ease;
}

.afx-copy:hover {
    filter: brightness(1.1)
}

.afx-copy.is-done {
    background: #0ea87e
}

.afx-terms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px
}

.afx-terms span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .02);
    font-size: 12.5px;
    color: var(--text-dim);
}

.afx-terms i {
    color: var(--brand);
    font-size: 11px
}

.afx-terms b {
    color: #fff;
    font-weight: 700
}

.afx-admin {
    margin-bottom: 22px;
    padding: 16px 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(18, 18, 20, .5);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-dim)
}

.afx-sec-head {
    margin: 26px 0 13px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text-mut);
}

/* stats */

.afx-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px
}

.afx-stat {
    position: relative;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(18, 18, 20, .55);
}

.afx-stat i {
    color: var(--brand);
    font-size: 13px
}

.afx-stat b {
    display: block;
    margin: 8px 0 3px;
    font-size: 21px;
    font-weight: 800;
    color: #fff;
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
}

.afx-stat span {
    font-size: 11.5px;
    color: var(--text-mut)
}

.afx-stat.is-avail {
    border-color: rgba(17, 212, 158, .4);
    background: rgba(17, 212, 158, .05)
}

.afx-stat.is-avail b {
    color: var(--brand)
}

.afx-payout {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    margin-top: 11px;
    padding: 8px 15px;
    border-radius: 10px;
    background: var(--brand);
    color: #04130d !important;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none !important;
    transition: filter .15s ease;
}

.afx-payout:hover {
    filter: brightness(1.1)
}

/* how it works */

.afx-how {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px
}

.afx-step {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(18, 18, 20, .55)
}

.afx-step em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--brand-soft);
    border: 1px solid rgba(17, 212, 158, .35);
    font-style: normal;
    font-weight: 800;
    font-size: 13px;
    color: var(--brand);
}

.afx-step b {
    display: block;
    margin: 11px 0 5px;
    font-size: 14px;
    font-weight: 700;
    color: #fff
}

.afx-step p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-dim)
}

/* why cards */

.afx-why {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px
}

.afx-card {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(18, 18, 20, .55)
}

.afx-card i {
    color: var(--brand);
    font-size: 15px
}

.afx-card b {
    display: block;
    margin: 10px 0 5px;
    font-size: 14px;
    font-weight: 700;
    color: #fff
}

.afx-card p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-dim)
}

/* pr.social banner */

.afx-prs {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 26px;
    padding: 22px 24px;
    border: 1px solid rgba(17, 212, 158, .4);
    border-radius: 16px;
    background: radial-gradient(500px 200px at 95% 120%, rgba(17, 212, 158, .12), transparent 60%), rgba(17, 212, 158, .05);
}

.afx-prs-txt {
    flex: 1 1 auto;
    min-width: 0
}

.afx-prs-txt b {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 800;
    color: #fff
}

.afx-prs-txt p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-dim)
}

.afx-prs-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 20px;
    border-radius: 12px;
    background: var(--brand);
    color: #04130d !important;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none !important;
    transition: filter .15s ease;
    white-space: nowrap;
}

.afx-prs-btn:hover {
    filter: brightness(1.1)
}

/* share chips */

.afx-share {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.afx-share span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 15px;
    border-radius: 11px;
    border: 1px solid var(--line);
    background: rgba(18, 18, 20, .55);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-dim);
}

.afx-share i {
    color: var(--brand);
    font-size: 13px
}

/* responsive */

@media(max-width:900px) {
    .afx-stats,
    .afx-how {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:640px) {
    .afx-hero {
        padding: 24px 18px 20px
    }
    .afx-title {
        font-size: 21px
    }
    .afx-linkrow {
        flex-direction: column
    }
    .afx-copy {
        justify-content: center
    }
    .afx-stats,
    .afx-how,
    .afx-why {
        grid-template-columns: 1fr
    }
    .afx-prs {
        flex-direction: column;
        align-items: stretch;
        text-align: center
    }
    .afx-prs-btn {
        justify-content: center
    }
}

/* ============================================================
   TICKETS (tk-*)
   ============================================================ */

.tk-page {
    max-width: 1120px;
    margin: 0 auto
}

.tk-sec-head {
    margin: 0 0 13px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text-mut);
}

/* contact channel cards */

.tk-contacts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 26px
}

.tk-contact {
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(18, 18, 20, .55)
}

.tk-contact-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
}

.tk-contact-head i {
    color: var(--brand);
    font-size: 13px
}

.tk-contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.tk-contact-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border-radius: 10px;
    border: 1px solid var(--line-2);
    background: rgba(255, 255, 255, .03);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-dim);
    text-decoration: none !important;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.tk-contact-links a:hover {
    color: #fff;
    border-color: rgba(17, 212, 158, .5);
    background: var(--brand-soft)
}

.tk-contact-links a i {
    color: var(--brand);
    font-size: 14px
}

/* layout: form + list */

.tk-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 14px;
    align-items: start
}

.tk-new,
.tk-list {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(18, 18, 20, .55)
}

.tk-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
}

.tk-card-head i {
    color: var(--brand);
    font-size: 13px
}

.tk-submit {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px
}

/* toolbar */

.tk-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px
}

.tk-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.tk-chips a {
    padding: 7px 13px;
    border-radius: 10px;
    border: 1px solid var(--line);
    cursor: pointer;
    background: rgba(255, 255, 255, .02);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    text-decoration: none !important;
    transition: color .15s ease, border-color .15s ease;
}

.tk-chips a:hover {
    color: #fff
}

.tk-chips a.is-active {
    color: var(--brand);
    background: var(--brand-soft);
    border-color: rgba(17, 212, 158, .5)
}

.tk-search .input-group {
    display: flex;
    width: 100%
}

.tk-search .form-control {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 42px;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.tk-search .input-group-btn {
    flex: 0 0 auto;
    width: auto;
    display: flex
}

.tk-search .input-group-btn .btn {
    height: 42px;
    padding: 0 16px;
    background: var(--brand);
    color: #04130d;
    border-color: transparent;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: 11px;
    border-end-end-radius: 11px;
}

/* ticket cards */

.tk-items {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.tk-item {
    display: block;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: rgba(255, 255, 255, .015);
    text-decoration: none !important;
    transition: border-color .15s ease, background .15s ease;
}

.tk-item:hover {
    border-color: rgba(17, 212, 158, .45);
    background: rgba(17, 212, 158, .04)
}

.tk-item-top {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 7px
}

.tk-item-theme {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-dim);
}

.tk-item:hover .tk-item-theme {
    color: #fff
}

.tk-item.is-new .tk-item-theme {
    color: #fff;
    font-weight: 700
}

.tk-item.is-new .tk-item-theme::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand);
    margin-inline-end: 8px;
    vertical-align: middle;
    box-shadow: 0 0 8px rgba(17, 212, 158, .8);
}

.tk-item-id {
    flex: 0 0 auto;
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: var(--text-mut);
}

.tk-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.tk-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 11px;
    border-radius: 99px;
    border: 1px solid var(--line-2);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
}

.tk-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .7
}

.tk-status.db-status-ok {
    color: #4ade80;
    border-color: rgba(74, 222, 128, .35);
    background: rgba(74, 222, 128, .08)
}

.tk-status.db-status-run {
    color: #60a5fa;
    border-color: rgba(96, 165, 250, .35);
    background: rgba(96, 165, 250, .08)
}

.tk-status.db-status-wait {
    color: #e3b341;
    border-color: rgba(227, 179, 65, .35);
    background: rgba(227, 179, 65, .08)
}

.tk-status.db-status-bad {
    color: #ff8a80;
    border-color: rgba(229, 83, 75, .35);
    background: rgba(229, 83, 75, .08)
}

.tk-status.db-status-off {
    color: var(--text-mut)
}

.tk-item-time {
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--text-mut)
}

.tk-info {
    margin-top: 22px;
    padding: 18px 22px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(18, 18, 20, .5);
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-dim);
}

@media(max-width:980px) {
    .tk-page {
        padding-top: 6px
    }
    .tk-sec-head {
        margin-top: 8px
    }
    /* one seamless card: sections divided by hairlines, compact chips */
    .tk-contacts {
        display: block;
        margin-bottom: 20px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: rgba(18, 18, 20, .55);
        overflow: hidden;
    }
    .tk-contact {
        border: 0;
        border-radius: 0;
        background: transparent;
        padding: 13px 15px
    }
    .tk-contact+.tk-contact {
        border-top: 1px solid var(--line)
    }
    .tk-contact-head {
        margin-bottom: 10px;
        font-size: 12.5px
    }
    .tk-contact-links {
        gap: 6px
    }
    .tk-contact-links a {
        padding: 7px 11px;
        font-size: 12px;
        border-radius: 9px
    }
    .tk-contact-links a i {
        font-size: 13px
    }
    .tk-grid {
        grid-template-columns: 1fr;
        gap: 12px
    }
    .tk-new,
    .tk-list {
        padding: 16px
    }
    .tk-card-head {
        font-size: 14px;
        margin-bottom: 13px
    }
}

/* ============================================================
   VIEW TICKET — dark chat skin (stock viewticket.twig markup)
   ============================================================ */

.db-body .titcket-title {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.db-body .ticket-message {
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid var(--line);
    border-radius: 4px 14px 14px 14px;
    padding: 14px 16px;
    color: var(--text-dim);
}

.db-body .ticket-message-right .ticket-message {
    background: rgba(17, 212, 158, .07) !important;
    border-color: rgba(17, 212, 158, .3);
    border-radius: 14px 4px 14px 14px;
}

.db-body .ticket-message .message {
    color: var(--text-dim);
    font-size: 13.5px;
    line-height: 1.65
}

.db-body .ticket-message .message b,
.db-body .ticket-message .message strong {
    color: #fff
}

.db-body .ticket-message .message hr {
    border-color: var(--line);
    margin: 10px 0
}

.db-body .ticket-message-block .info {
    margin-top: 6px;
    font-size: 12px
}

.db-body .ticket-message-block .info strong {
    color: #fff
}

.db-body .ticket-message img {
    max-width: 100%;
    border-radius: 10px
}

/* tickets client-side pager */

.tk-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 13px;
    justify-content: center
}

/* mobile pager next to floated .well-float collapsed to 0 width (vertical column overlay) — clear the float */

.db-mpager {
    clear: both;
    width: 100%
}

.tk-pager a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 9px;
    border: 1px solid var(--line);
    cursor: pointer;
    background: rgba(255, 255, 255, .02);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-dim);
    text-decoration: none !important;
    transition: color .15s ease, border-color .15s ease;
}

.tk-pager a:hover {
    color: #fff;
    border-color: var(--line-2)
}

.tk-pager a.is-active {
    color: var(--brand);
    background: var(--brand-soft);
    border-color: rgba(17, 212, 158, .5);
    cursor: default
}

/* tickets page tabs (Tickets / Contacts) */

.tk-tabs {
    display: flex;
    gap: 22px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line)
}

.tk-tab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 2px 13px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dim);
    text-decoration: none !important;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s ease, border-color .15s ease;
}

.tk-tab i {
    font-size: 12px
}

.tk-tab:hover {
    color: #fff
}

.tk-tab.is-active {
    color: var(--brand);
    border-bottom-color: var(--brand)
}

.tk-pane[hidden] {
    display: none
}

/* contacts as a tab pane: roomier desktop cards */

.tk-pane .tk-contacts {
    margin-bottom: 0
}

/* view ticket: back button (injected by script.js) */

.vt-back {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    padding: 8px 15px;
    border-radius: 10px;
    border: 1px solid var(--line-2);
    background: rgba(255, 255, 255, .03);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-dim);
    text-decoration: none !important;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.vt-back:hover {
    color: #fff;
    border-color: rgba(17, 212, 158, .5);
    background: var(--brand-soft)
}

.vt-back i {
    color: var(--brand);
    font-size: 11px
}

.rtl-content .vt-back i,
[dir="rtl"] .vt-back i {
    transform: scaleX(-1)
}

/* ============================================================
   GET A DISCOUNT / PR-VIP (gd-*)
   ============================================================ */

.gd-page {
    max-width: 1000px;
    margin: 0 auto
}

.gd-hero {
    padding: 36px 32px;
    border: 1px solid rgba(17, 212, 158, .35);
    border-radius: 18px;
    text-align: center;
    background: radial-gradient(600px 240px at 50% -30%, rgba(17, 212, 158, .13), transparent 65%), rgba(18, 18, 20, .55);
    margin-bottom: 26px;
}

.gd-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px;
    border-radius: 99px;
    border: 1px solid rgba(17, 212, 158, .45);
    background: var(--brand-soft);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--brand);
}

.gd-badge i {
    font-size: 11px
}

.gd-title {
    margin: 16px 0 10px;
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.3px
}

.gd-sub {
    margin: 0 auto 18px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--text-dim);
    max-width: 560px
}

.gd-free {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 10px;
    border: 1px solid rgba(227, 179, 65, .4);
    background: rgba(227, 179, 65, .08);
    font-size: 12px;
    font-weight: 700;
    color: #e8cd8a;
}

.gd-free i {
    color: #e3b341;
    font-size: 11px
}

/* progress + compare */

.gd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.gd-card {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(18, 18, 20, .55)
}

.gd-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
}

.gd-card-head i {
    color: var(--brand);
    font-size: 12px
}

.gd-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px
}

.gd-stat {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .02)
}

.gd-stat span {
    display: block;
    margin-bottom: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-mut)
}

.gd-stat b {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace
}

.gd-stat b.gd-level {
    color: var(--brand);
    font-family: var(--font)
}

.gd-bar {
    height: 10px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .06);
    overflow: hidden
}

.gd-bar span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 99px;
    background: linear-gradient(90deg, #0ea87e, var(--brand));
    box-shadow: 0 0 12px rgba(17, 212, 158, .5);
    transition: width .8s ease;
}

.gd-bar-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 9px;
    font-size: 12px;
    color: var(--text-dim)
}

.gd-bar-meta b {
    color: var(--brand)
}

.gd-done {
    color: var(--brand);
    font-weight: 700
}

.gd-done i {
    margin-inline-end: 6px
}

.gd-goal {
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--text-mut)
}

/* compare table */

.gd-compare table {
    width: 100%;
    border-collapse: collapse
}

.gd-compare th,
.gd-compare td {
    padding: 11px 12px;
    font-size: 13px;
    text-align: center;
    border-bottom: 1px solid var(--line)
}

.gd-compare tbody tr:last-child td {
    border-bottom: 0
}

.gd-compare th {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-mut)
}

.gd-compare td:first-child,
.gd-compare th:first-child {
    text-align: start;
    color: var(--text-dim)
}

.gd-compare .gd-vipcol {
    background: rgba(17, 212, 158, .05);
    color: #fff
}

.gd-compare th.gd-vipcol {
    color: var(--brand)
}

.gd-compare th.gd-vipcol i {
    margin-inline-end: 6px;
    font-size: 10px
}

.gd-compare .gd-vipcol b {
    color: var(--brand);
    font-size: 15px
}

.gd-yes {
    color: var(--brand)
}

.gd-no {
    color: var(--text-mut);
    opacity: .6
}

/* how to get */

.gd-sec-head {
    margin: 28px 0 13px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text-mut);
}

.gd-how {
    display: flex;
    align-items: center;
    gap: 12px
}

.gd-cond {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(18, 18, 20, .55);
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
}

.gd-cond i {
    color: var(--brand);
    font-size: 15px
}

.gd-or {
    flex: 0 0 auto;
    padding: 6px 13px;
    border-radius: 99px;
    border: 1px solid var(--line-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-mut);
}

.gd-auto {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 12px;
    padding: 13px 17px;
    border-radius: 13px;
    border: 1px solid rgba(17, 212, 158, .35);
    background: rgba(17, 212, 158, .05);
    font-size: 13px;
    color: #a7e8d2;
}

.gd-auto i {
    color: var(--brand)
}

/* perks */

.gd-perks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px
}

.gd-perk {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(18, 18, 20, .55)
}

.gd-perk i {
    color: var(--brand);
    font-size: 16px
}

.gd-perk b {
    display: block;
    margin: 11px 0 5px;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff
}

.gd-perk p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-dim)
}

/* faq */

.gd-faq {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.gd-faq details {
    border: 1px solid var(--line);
    border-radius: 13px;
    background: rgba(18, 18, 20, .55);
    overflow: hidden;
}

.gd-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 18px;
    cursor: pointer;
    list-style: none;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
}

.gd-faq summary::-webkit-details-marker {
    display: none
}

.gd-faq summary i {
    color: var(--text-mut);
    font-size: 11px;
    transition: transform .2s ease;
    flex: 0 0 auto
}

.gd-faq details[open] summary i {
    transform: rotate(180deg)
}

.gd-faq details[open] summary {
    color: var(--brand)
}

.gd-faq details p {
    margin: 0;
    padding: 0 18px 16px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-dim)
}

.gd-cms {
    margin-top: 22px;
    padding: 18px 22px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(18, 18, 20, .5);
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-dim)
}

@media(max-width:820px) {
    .gd-hero {
        padding: 26px 18px
    }
    .gd-title {
        font-size: 22px
    }
    .gd-grid {
        grid-template-columns: 1fr
    }
    .gd-how {
        flex-direction: column;
        align-items: stretch
    }
    .gd-or {
        align-self: center
    }
    .gd-perks {
        grid-template-columns: 1fr
    }
}

/* ============================================================
   ACCOUNT SETTINGS (ac-*)
   ============================================================ */

.ac-page {
    max-width: 860px;
    margin: 0 auto
}

.ac-narrow {
    max-width: 520px;
    padding-top: 30px
}

.ac-tabs {
    display: flex;
    gap: 22px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--line)
}

.ac-tab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 2px 13px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dim);
    text-decoration: none !important;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s ease, border-color .15s ease;
}

.ac-tab i {
    font-size: 12px
}

.ac-tab:hover {
    color: #fff
}

.ac-tab.is-active {
    color: var(--brand);
    border-bottom-color: var(--brand)
}

.ac-card {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(18, 18, 20, .55);
    margin-bottom: 14px;
}

.ac-card-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px
}

.ac-ic {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(17, 212, 158, .35);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 15px;
}

.ac-card-head>div {
    flex: 1 1 auto;
    min-width: 0
}

.ac-card-head b {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 3px
}

.ac-card-head p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-dim)
}

.ac-secret {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 9px;
    border: 1px solid rgba(227, 179, 65, .4);
    background: rgba(227, 179, 65, .08);
    font-size: 11px;
    font-weight: 700;
    color: #e8cd8a;
    white-space: nowrap;
}

.ac-secret i {
    color: #e3b341;
    font-size: 10px
}

.ac-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px
}

.ac-3col {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 14px
}

.ac-note {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-dim)
}

.ac-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.ac-key {
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .5px
}

.ac-code {
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 18px;
    letter-spacing: 5px;
    text-align: center
}

.ac-save {
    width: 100%
}

/* switches (notification matrix) */

.ac-ntable td {
    vertical-align: middle
}

.ac-ntable th:not(:first-child),
.ac-ntable td:not(:first-child) {
    text-align: center;
    width: 110px
}

.ac-sw {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    margin: 0;
    cursor: pointer
}

.ac-sw input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0
}

.ac-sw i {
    position: absolute;
    inset: 0;
    border-radius: 99px;
    border: 1px solid var(--line-2);
    background: rgba(255, 255, 255, .06);
    transition: background .2s ease, border-color .2s ease;
}

.ac-sw i::after {
    content: '';
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #9a9aa3;
    transition: transform .2s ease, background .2s ease;
}

.ac-sw input:checked+i {
    background: var(--brand);
    border-color: var(--brand)
}

.ac-sw input:checked+i::after {
    transform: translateX(20px);
    background: #04130d
}

[dir="rtl"] .ac-sw input:checked+i::after,
.rtl-content .ac-sw input:checked+i::after {
    transform: translateX(-20px)
}

.ac-sw input:disabled+i {
    opacity: .35;
    cursor: not-allowed
}

/* dark modal for change email */

.db-body .modal-content {
    background: #161618;
    border: 1px solid var(--line-2);
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .7);
    color: var(--text-dim);
}

.db-body .modal-header {
    border-bottom: 1px solid var(--line);
    padding: 18px 22px
}

.db-body .modal-title {
    color: #fff;
    font-weight: 700;
    font-size: 16px
}

.db-body .modal-body {
    padding: 20px 22px
}

.db-body .modal-footer {
    border-top: 1px solid var(--line);
    padding: 16px 22px
}

.db-body .modal-header .close {
    color: #fff;
    opacity: .6;
    text-shadow: none
}

@media(max-width:680px) {
    .ac-2col,
    .ac-3col {
        grid-template-columns: 1fr
    }
    .ac-card {
        padding: 17px
    }
    .ac-secret {
        display: none
    }
    .ac-ntable th:not(:first-child),
    .ac-ntable td:not(:first-child) {
        width: 64px
    }
}

/* ============================================================
   WORDMARK — theme logo (replaces the old raster logo)
   ============================================================ */

.smmgon-mark {
    display: inline-flex;
    flex-direction: column;
    line-height: 1;
    text-decoration: none !important
}

.smmgon-mark b {
    font-family: var(--font);
    font-weight: 800;
    font-size: 23px;
    letter-spacing: .5px;
    background: linear-gradient(180deg, var(--brand) 0%, #0b8a67 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.smmgon-mark b i {
    font-style: normal
}

.smmgon-mark small {
    margin-top: 3px;
    font-size: 7.5px;
    font-weight: 600;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: var(--text-mut);
}

/* size variants per slot */

.db-logo .smmgon-mark b {
    font-size: 21px
}

.db-logo .smmgon-mark small {
    font-size: 7px;
    letter-spacing: 2.4px
}

.db-top-logo .smmgon-mark small {
    display: none
}

.db-top-logo .smmgon-mark b {
    font-size: 19px
}

.db-collapsed .db-logo .smmgon-mark small {
    display: none
}

.db-collapsed .db-logo .smmgon-mark b {
    font-size: 15px;
    letter-spacing: 0
}

/* guest header: the wordmark must not squeeze the actions */

.smmgon-mark b,
.smmgon-mark small {
    white-space: nowrap
}

.smmgon-signup {
    white-space: nowrap
}

@media(max-width:560px) {
    .smmgon-header .smmgon-mark small {
        letter-spacing: 1.8px;
        font-size: 6.5px
    }
}

@media(max-width:420px) {
    .smmgon-header .smmgon-mark b {
        font-size: 19px
    }
    .smmgon-header .smmgon-mark small {
        display: none
    }
}

/* API page: GitHub link (hero pill + card) */

.api-gh {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 15px;
    border-radius: 10px;
    border: 1px solid rgba(17, 212, 158, .4);
    background: var(--brand-soft);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--brand) !important;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease;
}

.api-gh:hover {
    background: var(--brand);
    color: #04130d !important
}

.api-gh i {
    font-size: 14px
}

.api-ghcard {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 26px 0;
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: radial-gradient(500px 200px at 100% 0%, rgba(17, 212, 158, .08), transparent 60%), rgba(18, 18, 20, .55);
}

.api-ghcard-txt {
    flex: 1 1 auto;
    min-width: 0
}

.api-ghcard-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 7px;
    font-size: 15.5px;
    font-weight: 800;
    color: #fff;
}

.api-ghcard-head i {
    font-size: 19px;
    color: var(--brand)
}

.api-ghcard p {
    margin: 0 0 13px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-dim)
}

.api-ghcard-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.api-ghcard-chips span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 9px;
    border: 1px solid var(--line-2);
    background: rgba(255, 255, 255, .03);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-dim);
}

.api-ghcard-chips i {
    color: var(--brand);
    font-size: 12px
}

.api-ghcard-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    border-radius: 12px;
    background: var(--brand);
    color: #04130d !important;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    transition: filter .15s ease;
}

.api-ghcard-btn:hover {
    filter: brightness(1.1)
}

.api-ghcard-btn i {
    font-size: 16px
}

@media(max-width:640px) {
    .api-ghcard {
        flex-direction: column;
        align-items: stretch;
        text-align: center
    }
    .api-ghcard-head,
    .api-ghcard-chips {
        justify-content: center
    }
    .api-ghcard-btn {
        justify-content: center
    }
}