.product-detail-body {
    overflow-x: hidden;
    overflow-x: clip;
}

.item-card .item-link{
    padding: 0;
    border: none;
}

.side-content.sticky-top{
    top:80px;
    z-index: 1;
}
.navbar.sticky-top { z-index: 1030; }
.app-navbar {
    min-height: 74px;
    padding: .65rem 0;
    border-bottom: 1px solid rgba(218, 224, 235, .86);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 8px 30px rgba(25, 38, 68, .045);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.app-navbar .navbar-brand {
    margin-right: clamp(1.5rem, 3vw, 2.75rem);
    padding: 0;
}
.navbar-brand img {
    display: block;
    width: 172px;
    height: 40px;
}
.app-navbar-menu { align-items: center; gap: .15rem; }
.app-navbar-menu .nav-link {
    position: relative;
    padding: .65rem .72rem;
    border-radius: 9px;
    color: #556078;
    font-size: .84rem;
    font-weight: 700;
    line-height: 1;
    transition: color .18s ease, background .18s ease;
}
.app-navbar-menu .nav-link:hover {
    background: #f2f5fc;
    color: #2746a5;
}
.app-navbar-menu .nav-link.active {
    background: #edf2ff;
    color: #294bb6;
}
.app-navbar-menu .nav-link.active::after {
    position: absolute;
    right: .72rem;
    bottom: .25rem;
    left: .72rem;
    height: 2px;
    border-radius: 999px;
    background: #3154c8;
    content: "";
}
.app-navbar-actions {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-left: 1rem;
}
.app-navbar-language,
.app-navbar-account-button {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e0e5ef;
    background: #fff;
    color: #536078;
}
.app-navbar-language {
    gap: .35rem;
    min-height: 39px;
    padding: .4rem .7rem;
    border-radius: 10px;
    font-size: .75rem;
    font-weight: 800;
}
.app-navbar-language:hover,
.app-navbar-account-button:hover { border-color: #bcc8e8; background: #f8faff; }
.app-navbar-login,
.app-navbar-register {
    min-height: 40px;
    padding: .52rem .9rem;
    border-radius: 10px;
    font-size: .8rem;
    font-weight: 800;
}
.app-navbar-login { border: 1px solid transparent; color: #465269; }
.app-navbar-login:hover { border-color: #dfe4ee; background: #f6f8fb; color: #294bb6; }
.app-navbar-register {
    border-color: #3154c8;
    background: #3154c8;
    box-shadow: 0 7px 18px rgba(49, 84, 200, .2);
}
.app-navbar-register:hover { border-color: #2847ae; background: #2847ae; transform: translateY(-1px); }
.app-navbar-dropdown {
    min-width: 205px;
    margin-top: .65rem !important;
    padding: .45rem;
    border: 1px solid #e1e6ef;
    border-radius: 13px;
    box-shadow: 0 18px 45px rgba(24, 35, 61, .13);
}
.app-navbar-dropdown .dropdown-item {
    padding: .6rem .72rem;
    border-radius: 8px;
    color: #465269;
    font-size: .8rem;
    font-weight: 650;
}
.app-navbar-dropdown .dropdown-item:hover,
.app-navbar-dropdown .dropdown-item.active {
    background: #edf2ff;
    color: #294bb6;
}
.app-navbar-dropdown .dropdown-divider { margin: .35rem .25rem; border-color: #e7eaf0; }
.app-navbar-account-button {
    gap: .55rem;
    min-height: 44px;
    padding: .32rem .65rem .32rem .35rem;
    border-radius: 13px;
    text-align: left;
}
.app-navbar-avatar {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    background: linear-gradient(135deg, #3154c8, #20397f);
    color: #fff;
    font-size: .78rem;
    font-weight: 850;
}
.app-navbar-user { display: grid; min-width: 75px; line-height: 1.15; }
.app-navbar-user strong {
    max-width: 120px;
    overflow: hidden;
    color: #263149;
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-navbar-user small { margin-top: .18rem; color: #9099aa; font-size: .62rem; }
.app-navbar-account-menu { min-width: 220px; }
.app-navbar-dropdown .is-logout { color: #c43e4d; }
.app-navbar-dropdown .is-logout:hover { background: #fff1f2; color: #ad2637; }
.app-navbar-toggler {
    width: 44px;
    height: 42px;
    padding: 10px;
    border: 1px solid #dce2ed;
    border-radius: 11px;
    box-shadow: none !important;
}
.app-navbar-toggler span {
    display: block;
    width: 100%;
    height: 2px;
    margin: 4px 0;
    border-radius: 999px;
    background: #35415a;
    transition: transform .2s ease, opacity .2s ease;
}
.app-navbar-toggler[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.app-navbar-toggler[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.app-navbar-toggler[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* DEMO REWRITE */
.demo-container {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.03);
    margin-top: 2.5rem;
}

.demo-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.demo-tabs {
    display: flex;
    background-color: #f8fafc;
    padding: 0.25rem;
    border-radius: 6px;
    gap: 0.25rem;
}

.demo-tab-btn {
    padding: 0.5rem 1rem;
    border: none;
    background: none;
    font-weight: 600;
    font-size: 0.875rem;
    color: #475569;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.25s ease-in-out;
}

.demo-tab-btn.active {
    background-color: #ffffff;
    color: #1d4ed8;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.uniqueness-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #ecfdf5;
    color: #059669;
    padding: 0.35rem 0.85rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
}

.demo-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.demo-pane {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem;
}

.demo-pane-header {
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    color: #475569;
    display: flex;
    justify-content: space-between;
}

.demo-text {
    font-size: 0.95rem;
    line-height: 1.7;
}

.demo-disclaimer {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-top: 1rem;
    text-align: center;
    font-style: italic;
}

/* INTEGRATIONS */
.integrations-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.integration-badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-dark);
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    font-weight: 600;
}
.compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 3rem;
}
.compare-card {
    padding: 1rem;
    border-radius: 9px;
    border: 1px solid #e2e8f0;
}
.compare-before {
    background-color: #fff5f5;
    border-color: #fed7d7;
}
.compare-after {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
}

.compare-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.compare-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.95rem;
}
@media (min-width: 992px) {
    .app-navbar .dropdown:hover > .dropdown-menu { display: block; }
    .app-navbar .dropdown > .app-navbar-dropdown::before {
        position: absolute;
        right: 0;
        bottom: 100%;
        left: 0;
        height: .8rem;
        content: "";
    }
}

@media (max-width: 1199.98px) and (min-width: 992px) {
    .app-navbar .navbar-brand { margin-right: 1rem; }
    .navbar-brand img { width: 150px; }
    .app-navbar-menu .nav-link { padding-right: .48rem; padding-left: .48rem; font-size: .77rem; }
    .app-navbar-actions { margin-left: .4rem; }
    .app-navbar-user { display: none; }
}

@media (max-width: 991.98px) {
    .app-navbar { min-height: 68px; padding: .55rem 0; }
    .navbar-brand img { width: 155px; height: auto; }
    .app-navbar .navbar-collapse {
        max-height: calc(100vh - 84px);
        margin-top: .6rem;
        overflow-y: auto;
        border-top: 1px solid #e7eaf0;
    }
    .app-navbar-menu {
        align-items: stretch;
        gap: .2rem;
        padding: .75rem 0 .4rem;
    }
    .app-navbar-menu .nav-link { padding: .75rem .8rem; line-height: 1.2; }
    .app-navbar-menu .nav-link.active::after {
        top: .55rem;
        right: auto;
        bottom: .55rem;
        left: .18rem;
        width: 3px;
        height: auto;
    }
    .app-navbar-menu .dropdown-menu {
        margin: .2rem 0 .4rem !important;
        border: 0;
        background: #f7f9fd;
        box-shadow: none;
    }
    .app-navbar-actions {
        align-items: stretch;
        flex-wrap: wrap;
        margin: 0;
        padding: .65rem 0 .85rem;
        border-top: 1px solid #edf0f5;
    }
    .app-navbar-actions > * { flex: 1 1 auto; }
    .app-navbar-actions .dropdown { position: static; }
    .app-navbar-language,
    .app-navbar-login,
    .app-navbar-register { justify-content: center; }
    .app-navbar-account { flex-basis: 100%; }
    .app-navbar-account-button { width: 100%; }
    .app-navbar-user { display: grid; flex: 1; }
    .app-navbar-user strong { max-width: 220px; }
    .app-navbar-account-menu { position: static !important; width: 100%; transform: none !important; }
}

/* Universal product detail */
.product-detail-page {
    color: #25304a;
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.product-breadcrumb { display: flex; flex-wrap: wrap; gap: .55rem; margin: .25rem 0 1.25rem; color: #8a94a8; font-size: .82rem; }
.product-breadcrumb a { color: #65708a; text-decoration: none; }
.product-breadcrumb a:hover { color: #3154c8; }
.product-detail-hero { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(340px, .96fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; overflow: hidden; padding: clamp(2rem, 6vw, 5rem); border: 1px solid #dfe6fb; border-radius: 28px; background: radial-gradient(circle at 88% 12%, rgba(94, 129, 255, .2), transparent 31%), linear-gradient(135deg, #f5f7ff, #fff 55%, #eef3ff); }
.product-detail-badge, .product-detail-version { display: inline-flex; align-items: center; padding: .42rem .72rem; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.product-detail-badge { background: #3154c8; color: #fff; }
.product-detail-version { border: 1px solid #dce3f7; background: rgba(255,255,255,.75); color: #56617a; }
.product-detail-copy h1 {
    max-width: 720px;
    margin: 0 0 1.15rem;
    color: #17213b;
    font-size: clamp(2.25rem, 4.6vw, 4rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.08;
    text-wrap: balance;
}
.product-detail-lead {
    max-width: 62ch;
    margin: 0;
    color: #5f6a82;
    font-size: clamp(1rem, 1.35vw, 1.125rem);
    font-weight: 400;
    line-height: 1.7;
}
.product-detail-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.product-detail-actions .btn { min-width: 150px; padding: .78rem 1.2rem; border-radius: 11px; font-weight: 750; }
.product-detail-actions .btn-light { border: 1px solid #dfe4ef; color: #34405a; }
.product-detail-actions .product-demo-button { border: 1px solid #c9d5f2; background: #ffffff; color: #1d2d52; box-shadow: 0 8px 18px rgba(29, 45, 82, .08); }
.product-detail-actions .product-demo-button:hover, .product-detail-actions .product-demo-button:focus-visible { border-color: #1d63ed; background: #eef4ff; color: #124fc7; }
.product-quick-trust { display: flex; flex-wrap: wrap; gap: .7rem 1.2rem; margin: 1.35rem 0 0; padding: 0; color: #647089; font-size: .82rem; list-style: none; }
.product-quick-trust span { color: #2f9d73; font-weight: 900; }
.product-detail-visual { position: relative; }
.product-image-frame { overflow: hidden; padding: .65rem; border: 1px solid rgba(255,255,255,.9); border-radius: 24px; background: rgba(255,255,255,.65); box-shadow: 0 28px 60px rgba(35,55,118,.16); transform: rotate(1.5deg); }
.product-image-frame img { display: block; width: 100%; height: auto; max-height: 430px; border-radius: 17px; object-fit: cover; aspect-ratio: 3 / 2; }
.product-floating-price { position: absolute; right: -1rem; bottom: -1rem; display: grid; min-width: 180px; padding: 1rem 1.15rem; border: 1px solid #e5e9f4; border-radius: 14px; background: #fff; box-shadow: 0 16px 40px rgba(31,42,68,.15); }
.product-floating-price span, .product-floating-price small { color: #8791a5; font-size: .7rem; }
.product-floating-price strong { color: #17213b; font-size: 1.18rem; }
.product-floating-price small { color: #cf4d5d; font-weight: 750; }
.product-facts { display: grid; grid-template-columns: repeat(4, 1fr); margin: 1.25rem 0 4rem; overflow: hidden; border: 1px solid #e3e7ef; border-radius: 16px; background: #fff; box-shadow: 0 8px 30px rgba(31,42,68,.04); }
.product-facts > div { padding: 1.15rem 1.3rem; border-right: 1px solid #edf0f5; }
.product-facts > div:last-child { border: 0; }
.product-facts span, .product-facts strong { display: block; }
.product-facts span { margin-bottom: .25rem; color: #8a94a8; font-size: .7rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.product-facts strong { color: #2e3952; font-size: .92rem; }
.product-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: clamp(2rem, 5vw, 2.5rem); align-items: start; }
.product-section-heading > span, .product-purchase-kicker { color: #3154c8; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.product-section-heading h2, .product-purchase-card h2 {
    margin: .45rem 0 1.4rem;
    color: #17213b;
    font-size: clamp(1.75rem, 2.6vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.18;
    text-wrap: balance;
}
.product-rich-content { color: #505c72; font-size: 1rem; line-height: 1.75; }
.product-rich-content img { max-width: 100%; height: auto; border-radius: 15px; }
.product-rich-content h2, .product-rich-content h3, .product-rich-content h4 { margin: 2.25rem 0 .75rem; color: #202b44; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; text-wrap: balance; }
.product-rich-content h2 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
.product-rich-content h3 { font-size: clamp(1.25rem, 1.8vw, 1.55rem); }
.product-rich-content h4 { font-size: 1.125rem; }
.product-rich-content p { margin-bottom: 1.15rem; }
.product-rich-content ul, .product-rich-content ol { padding-left: 1.25rem; }
.product-rich-content li { margin-bottom: .5rem; }
.compare-card h3{
    margin:1rem 0 .75rem;
}
.product-release { margin-top: 2rem; padding: 1.2rem; border: 1px solid #e0e7f7; border-radius: 14px; background: #ffffff; }
.product-release > div { display: flex; gap: .8rem; }
.product-release-icon { display: grid; flex: 0 0 38px; height: 38px; place-items: center; border-radius: 10px; background: #e7edff; color: #3154c8; font-weight: 900; }
.product-release strong { color: #28334d; }
.product-release p { margin: .1rem 0 0; color: #778197; font-size: .82rem; }
.product-release details { margin: 1rem 0 0 46px; color: #667188; font-size: .85rem; }
.product-release summary { color: #3154c8; cursor: pointer; font-weight: 750; }
.product-release details div { margin-top: .65rem; white-space: normal; }
.product-purchase-panel { position: sticky; top: 92px; }
.product-purchase-card { padding: 1.5rem; border: 1px solid #dfe4ef; border-radius: 20px; background: #fff; box-shadow: 0 18px 50px rgba(31,42,68,.09); }
.product-purchase-card h2 { margin-bottom: .35rem; font-size: 1.5rem; }
.product-purchase-card > p { margin-bottom: 1.2rem; color: #7b8497; font-size: .86rem; }
.product-plan-option { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: .7rem; align-items: start; margin-bottom: .65rem; padding: .95rem; border: 1.5px solid #e1e5ed; border-radius: 12px; cursor: pointer; transition: border-color .18s, background .18s, box-shadow .18s; }
.product-plan-option:hover { border-color: #9dafe9; }
.product-plan-option.is-selected { border-color: #3154c8; background: #f5f7ff; box-shadow: 0 0 0 3px rgba(49,84,200,.08); }
.product-plan-option input { position: absolute; opacity: 0; pointer-events: none; }
.product-plan-radio { width: 17px; height: 17px; margin-top: 2px; border: 1.5px solid #aab2c2; border-radius: 50%; background: #fff; }
.is-selected .product-plan-radio { border: 5px solid #3154c8; }
.product-plan-copy strong, .product-plan-copy small, .product-plan-price strong, .product-plan-price del { display: block; }
.product-plan-copy strong { color: #29344d; font-size: .86rem; line-height: 1.35; }
.product-plan-copy small { margin-top: .25rem; color: #8791a5; font-size: .68rem; line-height: 1.4; }
.product-plan-price { padding-left: .4rem; text-align: right; white-space: nowrap; }
.product-plan-price strong { color: #17213b; font-size: .88rem; }
.product-plan-price del { color: #a0a8b7; font-size: .65rem; }
.product-checkout-button { margin-top: .8rem; padding: .82rem; border-radius: 11px; font-size: .95rem; font-weight: 800; }
.product-secure-note { margin-top: .8rem; color: #8992a4; font-size: .69rem; text-align: center; }
.product-confidence { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 4.5rem 0; }
.product-confidence > div { display: flex; gap: .9rem; padding: 1.25rem; border: 1px solid #e4e8f0; border-radius: 15px; background: #fff; }
.product-confidence-icon { display: grid; flex: 0 0 40px; height: 40px; place-items: center; border-radius: 11px; background: #edf2ff; color: #3154c8; font-weight: 900; }
.product-confidence strong { color: #2b3650; font-size: .9rem; }
.product-confidence p { margin: .25rem 0 0; color: #818a9d; font-size: .77rem; line-height: 1.5; }
.related-products { padding-top: 1rem; }
.related-products .item-card { border-radius: 15px; }
.lp-builder-section {
    --lp-container-gutter: 1rem;
    width: 100vw;
    max-width: none;
    margin: 0 0 0 calc(50% - 50vw);
    padding: clamp(2.5rem, 6vw, 5rem) var(--lp-container-gutter);
    border-radius: 0;
    scroll-margin-top: 100px;
}
.lp-background-white { background: #fff; }
.lp-background-soft-blue { border-top: 1px solid #dfe7ff; border-bottom: 1px solid #dfe7ff; background: linear-gradient(135deg, #f2f5ff, #f8faff); }
.lp-background-soft-gray { border-top: 1px solid #e5e8ee; border-bottom: 1px solid #e5e8ee; background: #f3f5f8; }
.lp-background-dark { background: radial-gradient(circle at 90% 0, rgba(72,102,196,.32), transparent 36%), #17213b; }
.lp-background-brand-gradient { background: radial-gradient(circle at 85% 0, rgba(130,153,255,.42), transparent 35%), linear-gradient(135deg, #233e9e, #3154c8); }
.lp-background-dark .lp-builder-heading > span, .lp-background-dark .lp-builder-eyebrow,
.lp-background-brand-gradient .lp-builder-heading > span, .lp-background-brand-gradient .lp-builder-eyebrow { color: #b9c8ff; }
.lp-background-dark .lp-builder-heading h2, .lp-background-dark .lp-content-copy h2,
.lp-background-brand-gradient .lp-builder-heading h2, .lp-background-brand-gradient .lp-content-copy h2 { color: #fff; }
.lp-background-dark .lp-builder-heading p, .lp-background-dark .lp-content-copy > div,
.lp-background-brand-gradient .lp-builder-heading p, .lp-background-brand-gradient .lp-content-copy > div { color: #d8e0f5; }
.lp-background-dark .lp-step-grid h3, .lp-background-brand-gradient .lp-step-grid h3 { color: #fff; }
.lp-background-dark .lp-step-grid p, .lp-background-brand-gradient .lp-step-grid p { color: #c5cfe8; }
.lp-background-dark .lp-faq-list, .lp-background-dark .lp-faq-list details,
.lp-background-brand-gradient .lp-faq-list, .lp-background-brand-gradient .lp-faq-list details { border-color: rgba(255,255,255,.18); }
.lp-background-dark .lp-faq-list summary, .lp-background-brand-gradient .lp-faq-list summary { color: #fff; }
.lp-background-dark .lp-faq-list details p, .lp-background-brand-gradient .lp-faq-list details p { color: #d8e0f5; }
.lp-builder-heading { max-width: 720px; margin: 0 auto 2rem; text-align: center; }
.lp-builder-heading > span, .lp-builder-eyebrow, .lp-builder-cta > div > span { color: #3154c8; font-size: .72rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.lp-builder-heading h2, .lp-content-copy h2, .lp-builder-cta h2 { margin: .55rem 0 .8rem; color: #17213b; font-size: clamp(1.75rem, 3.3vw, 2.75rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.16; text-wrap: balance; }
.lp-builder-heading p { max-width: 65ch; margin: 0 auto; color: #68738a; line-height: 1.7; }
.lp-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.lp-feature-grid article { padding: 1.5rem; border: 1px solid #e2e7f0; border-radius: 17px; background: #fff; box-shadow: 0 10px 32px rgba(31,42,68,.05); }
.lp-feature-icon { display: grid; width: 40px; height: 40px; margin-bottom: 1rem; place-items: center; border-radius: 11px; background: #eaf0ff; color: #3154c8; font-weight: 900; }
.lp-feature-grid h3, .lp-step-grid h3 { margin: 0 0 .5rem; color: #27324b; font-size: 1.05rem; font-weight: 700; line-height: 1.35; }
.lp-feature-grid p, .lp-step-grid p { margin: 0; color: #798398; font-size: .875rem; line-height: 1.65; }
.lp-content-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.lp-content-split.has-image-left .lp-content-copy { order: 2; }
.lp-content-split.has-image-left .lp-content-image { order: 1; }
.lp-content-copy > div { max-width: 65ch; color: #5e6980; font-size: 1rem; line-height: 1.75; }
.lp-content-image { overflow: hidden; padding: .55rem; border: 1px solid #e0e6f3; border-radius: 22px; background: #fff; box-shadow: 0 22px 55px rgba(31,42,68,.1); }
.lp-content-image img { display: block; width: 100%; height: auto; max-height: 480px; border-radius: 16px; object-fit: cover; }
.lp-step-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; counter-reset: steps; }
.lp-step-grid.grid-3 { grid-template-columns: repeat(3, 1fr); }
.lp-step-grid article { position: relative; padding: 1.4rem; border-top: 2px solid #dce4fb; }
.lp-step-grid article > span { display: block; margin-bottom: 1rem; color: #3154c8; font-size: 1.4rem; font-weight: 850; }
.lp-faq-section { max-width: none; }
.lp-faq-list { max-width: 860px; margin-right: auto; margin-left: auto; border-top: 1px solid #dfe4ed; }
.lp-faq-list details { border-bottom: 1px solid #dfe4ed; }
.lp-faq-list summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.15rem .25rem; color: #28334c; font-size: 1rem; font-weight: 700; line-height: 1.45; cursor: pointer; list-style: none; }
.lp-faq-list summary::-webkit-details-marker { display: none; }
.lp-faq-list summary span { color: #3154c8; font-size: 1.2rem; transition: transform .2s; }
.lp-faq-list details[open] summary span { transform: rotate(45deg); }
.lp-faq-list details p { padding: 0 .25rem 1.15rem; margin: 0; color: #68738a; line-height: 1.7; }
.lp-builder-cta { display: flex; justify-content: space-between; gap: 2rem; align-items: center; color: #fff; }
.lp-builder-cta.lp-background-white h2, .lp-builder-cta.lp-background-soft-blue h2, .lp-builder-cta.lp-background-soft-gray h2 { color: #17213b; }
.lp-builder-cta.lp-background-white p, .lp-builder-cta.lp-background-soft-blue p, .lp-builder-cta.lp-background-soft-gray p { color: #5e6980; }
.lp-builder-cta.lp-background-white > div > span, .lp-builder-cta.lp-background-soft-blue > div > span, .lp-builder-cta.lp-background-soft-gray > div > span { color: #3154c8; }
.lp-builder-cta.lp-background-white .btn, .lp-builder-cta.lp-background-soft-blue .btn, .lp-builder-cta.lp-background-soft-gray .btn { border-color: #3154c8; background: #3154c8; color: #fff; }
.lp-builder-section + .product-detail-layout { margin-top: clamp(3.5rem, 8vw, 7rem); }
.lp-builder-cta > div > span { color: #cbd6ff; }
.lp-builder-cta h2 { margin-bottom: .55rem; color: #fff; }
.lp-builder-cta p { max-width: 680px; margin: 0; color: #dce4ff; line-height: 1.7; }
.lp-builder-cta .btn { flex: 0 0 auto; min-width: 180px; border-radius: 11px; color: #2949b5; font-weight: 800; }
@media (min-width: 1200px) {
    .related-products .row > .col-xl-3 { flex: 0 0 auto; width: 33.333333%; }
}

@media (min-width: 576px) {
    .lp-builder-section { --lp-container-gutter: calc((100vw - 540px) / 2 + .75rem); }
}
@media (min-width: 768px) {
    .lp-builder-section { --lp-container-gutter: calc((100vw - 720px) / 2 + .75rem); }
    .demo-box { grid-template-columns: 1fr; }
}
@media (min-width: 992px) {
    .lp-builder-section { --lp-container-gutter: calc((100vw - 960px) / 2 + .75rem); }
}
@media (min-width: 1200px) {
    .lp-builder-section { --lp-container-gutter: calc((100vw - 1140px) / 2 + .75rem); }
}
@media (min-width: 1400px) {
    .lp-builder-section { --lp-container-gutter: calc((100vw - 1320px) / 2 + .75rem); }
}

@media (max-width: 991.98px) {
    .product-detail-hero { grid-template-columns: 1fr; }
    .product-detail-visual { max-width: 650px; }
    .product-detail-layout { grid-template-columns: 1fr; }
    .product-purchase-panel { position: static; }
    .product-purchase-card { max-width: 650px; }
    .lp-feature-grid { grid-template-columns: repeat(2, 1fr); }
    .lp-step-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
    .product-detail-hero { padding: 1.5rem; border-radius: 20px; }
    .product-detail-copy h1 { font-size: clamp(2rem, 10vw, 3rem); line-height: 1.1; }
    .product-section-heading h2, .lp-builder-heading h2, .lp-content-copy h2, .lp-builder-cta h2 { line-height: 1.2; }
    .product-floating-price { right: .5rem; bottom: -.75rem; }
    .product-facts { grid-template-columns: 1fr 1fr; margin-bottom: 3rem; }
    .product-facts > div:nth-child(2) { border-right: 0; }
    .product-facts > div:nth-child(-n+2) { border-bottom: 1px solid #edf0f5; }
    .product-confidence { grid-template-columns: 1fr; margin: 3rem 0; }
    .lp-content-split { grid-template-columns: 1fr; }
    .lp-content-split.has-image-left .lp-content-copy, .lp-content-split.has-image-left .lp-content-image { order: initial; }
    .lp-builder-cta { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 480px) {
    .product-detail-actions .btn { width: 100%; }
    .product-quick-trust { display: grid; gap: .5rem; }
    .product-plan-option { grid-template-columns: 18px minmax(0, 1fr); }
    .product-plan-price { grid-column: 2; padding: .35rem 0 0; text-align: left; }
    .lp-feature-grid, .lp-step-grid, .compare-grid, .lp-step-grid.grid-3, .demo-box { grid-template-columns: 1fr; }
    .lp-builder-cta .btn { width: 100%; }
}

.skip-link {
    position: fixed;
    top: .75rem;
    left: .75rem;
    z-index: 1100;
    padding: .65rem 1rem;
    border-radius: 8px;
    background: #17213b;
    color: #fff;
    text-decoration: none;
    transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }
.card-body a {
    text-decoration: none;
}
.card-body a h2 {
    color: black;
    text-decoration: none;
}

.payment-channel-card {
    position: relative;
    background-size: 70px;
    background-repeat: no-repeat;
    background-position: right;
    background-position-y: center;
    cursor: pointer;
}

.payment-channel-card:hover{
    background-color: #f7f9ff;
    border-color: #2949b5;
}

.payment-channel-card.manual {
    background-image: url("/assets/img/manual.png");
    background-position-y: top 10px;
    background-position-x: right 10px;
}
.payment-channel-card.bni_va {
    background-image: url("/assets/img/bni.png");
    background-position-y: top 10px;
    background-position-x: right 10px;
}
.payment-channel-card.bri_va {
    background-image: url("/assets/img/bri.png");
    background-position-y: top 10px;
    background-position-x: right 10px;
}
.payment-channel-card.bca_va {
    background-image: url("/assets/img/bca.png");
    background-position-y: top 10px;
    background-position-x: right 10px;
}
.payment-channel-card.echannel {
    background-image: url("/assets/img/mandiri.png");
    background-position-y: top 10px;
    background-position-x: right 10px;
    background-size: 100px;
}
.payment-channel-card.gopay {
    background-image: url("/assets/img/gopay.png");
    background-position-y: top 10px;
    background-position-x: right 10px;
    background-size: 100px;
}
.payment-channel-card.other_qris {
    background-image: url("/assets/img/qris.png");
    background-position-y: top 10px;
    background-position-x: right 10px;
}
.payment-channel-card.paypal {
    background-image: url("/assets/img/paypal.png");
    background-position-y: top 10px;
    background-position-x: right 10px;
    background-size: 80px;
}

/* Checkout */
.checkout-body { background: #f5f7fb !important; }
.checkout-page { max-width: 1180px; margin: 0 auto; padding-bottom: 2rem; }
.checkout-header { display: flex; justify-content: space-between; gap: 2rem; align-items: flex-end; margin: .5rem 0 2rem; }
.checkout-back { display: block; width: fit-content; margin-bottom: 1rem; color: #68738a; font-size: .78rem; font-weight: 700; text-decoration: none; }
.checkout-back:hover { color: #3154c8; }
.checkout-eyebrow { display: block; color: #3154c8; font-size: .7rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.checkout-header h1 { margin: .35rem 0 .45rem; color: #17213b; font-size: clamp(2rem, 4vw, 3rem); font-weight: 870; letter-spacing: -.045em; }
.checkout-header p { max-width: 620px; margin: 0; color: #717c91; }
.checkout-steps { display: flex; min-width: 320px; margin: 0 0 .3rem; padding: 0; list-style: none; }
.checkout-steps li { position: relative; display: grid; flex: 1; gap: .4rem; justify-items: center; color: #9aa2b1; font-size: .67rem; }
.checkout-steps li:not(:last-child)::after { position: absolute; top: 14px; left: calc(50% + 19px); width: calc(100% - 38px); height: 1px; background: #d9dee8; content: ''; }
.checkout-steps li.is-active:not(:last-child)::after { background: #8ca0e5; }
.checkout-steps span { position: relative; z-index: 1; display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid #d8dde7; border-radius: 50%; background: #f5f7fb; font-size: .7rem; font-weight: 800; }
.checkout-steps .is-active { color: #3154c8; }
.checkout-steps .is-active span { border-color: #3154c8; background: #3154c8; color: #fff; }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 1.25rem; align-items: start; }
.checkout-main { display: grid; gap: 1rem; min-width: 0; }
.checkout-panel, .checkout-coupon, .checkout-summary { border: 1px solid #e1e5ed; border-radius: 18px; background: #fff; box-shadow: 0 10px 32px rgba(31,42,68,.045); }
.checkout-panel { padding: clamp(1.2rem, 3vw, 1.65rem); }
.checkout-panel-heading { display: flex; gap: .85rem; align-items: flex-start; margin-bottom: 1.3rem; }
.checkout-panel-number { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: #eaf0ff; color: #3154c8; font-size: .78rem; font-weight: 850; }
.checkout-panel-heading h2 { margin: 0 0 .2rem; color: #27324b; font-size: 1.05rem; font-weight: 820; }
.checkout-panel-heading p { margin: 0; color: #8992a4; font-size: .78rem; }
.checkout-product-mini { display: flex; gap: .7rem; align-items: center; margin-bottom: 1rem; padding: .7rem; border-radius: 11px; background: #f6f8fc; }
.checkout-product-mini > img, .checkout-product-mini > span { width: 46px; height: 38px; border-radius: 8px; object-fit: cover; }
.checkout-product-mini > span { display: grid; place-items: center; background: #3154c8; color: #fff; font-weight: 850; }
.checkout-product-mini small, .checkout-product-mini strong { display: block; }
.checkout-product-mini small { color: #8992a5; font-size: .62rem; font-weight: 750; text-transform: uppercase; }
.checkout-product-mini strong { color: #2c3750; font-size: .84rem; }
.checkout-plan-list { display: grid; gap: .65rem; }
.checkout-plan-card { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: .8rem; align-items: start; padding: 1rem; border: 1.5px solid #e0e4ec; border-radius: 13px; cursor: pointer; transition: border-color .18s, background .18s, box-shadow .18s; }
.checkout-plan-card:hover { border-color: #9eafe7; }
.checkout-plan-card:has(input:checked) { border-color: #3154c8; background: #f5f7ff; box-shadow: 0 0 0 3px rgba(49,84,200,.08); }
.checkout-plan-card > input, .payment-channel-card > input { position: absolute; opacity: 0; pointer-events: none; }
.checkout-custom-radio { display: block; width: 17px; height: 17px; margin-top: 2px; border: 1.5px solid #aeb6c5; border-radius: 50%; background: #fff; }
label:has(input:checked) > .checkout-custom-radio { border: 5px solid #3154c8; }
.checkout-plan-info > strong, .checkout-plan-info > small { display: block; }
.checkout-plan-info > strong { color: #29344d; font-size: .86rem; }
.checkout-plan-info > small { margin-top: .28rem; color: #838da0; font-size: .68rem; line-height: 1.5; }
.checkout-plan-tag { display: inline-flex; margin-top: .45rem; padding: .22rem .45rem; border-radius: 999px; background: #e9f7f1; color: #177553; font-size: .62rem; font-weight: 800; }
.checkout-plan-price { display: grid; justify-items: end; white-space: nowrap; }
.checkout-plan-price del { color: #9aa2b1; font-size: .65rem; }
.checkout-plan-price em { padding: .13rem .35rem; border-radius: 999px; background: #fff0f1; color: #c74655; font-size: .55rem; font-style: normal; font-weight: 850; text-transform: uppercase; }
.checkout-plan-price strong { margin-top: .2rem; color: #17213b; font-size: .92rem; }
.checkout-payment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.checkout-payment-grid .payment-channel-card { position: relative; display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: .7rem; min-height: 86px; padding: .9rem 5.6rem .9rem .9rem; border: 1.5px solid #e0e4ec; border-radius: 12px; background-color: #fff; cursor: pointer; transition: border-color .18s, background-color .18s, box-shadow .18s; }
.checkout-payment-grid .payment-channel-card:hover { border-color: #9eafe7; background-color: #fafbff; }
.checkout-payment-grid .payment-channel-card:has(input:checked) { border-color: #3154c8; background-color: #f5f7ff; box-shadow: 0 0 0 3px rgba(49,84,200,.08); }
.checkout-payment-grid .payment-channel-card strong, .checkout-payment-grid .payment-channel-card small { display: block; }
.checkout-payment-grid .payment-channel-card strong { color: #303b54; font-size: .8rem; line-height: 1.35; }
.checkout-payment-grid .payment-channel-card small { margin-top: .22rem; color: #8a93a5; font-size: .64rem; line-height: 1.4; }
.checkout-coupon { padding: 1rem 1.2rem; }
.checkout-coupon-toggle { display: grid; width: 100%; grid-template-columns: 36px minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: 0; border: 0; background: transparent; text-align: left; }
.checkout-coupon-toggle > span:first-child { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: #fff2dc; color: #a26708; font-weight: 850; }
.checkout-coupon-toggle strong, .checkout-coupon-toggle small { display: block; }
.checkout-coupon-toggle strong { color: #34405a; font-size: .8rem; }
.checkout-coupon-toggle small { color: #9098a8; font-size: .65rem; }
.checkout-coupon-toggle b { color: #8791a4; font-size: 1rem; }
.checkout-coupon .form-control { min-height: 44px; border-color: #dce1ea; border-radius: 9px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.checkout-sidebar { position: sticky; top: 92px; }
.checkout-summary { overflow: hidden; padding: 1.35rem; }
.checkout-summary-head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid #edf0f5; }
.checkout-summary-head > span { color: #27324b; font-size: 1rem; font-weight: 820; }
.checkout-summary-head > strong { color: #238062; font-size: .62rem; font-weight: 800; }
.checkout-summary-head > strong::before { margin-right: .3rem; content: '●'; }
.checkout-summary-table { width: 100%; margin: .7rem 0 1rem; border-collapse: collapse; }
.checkout-summary-table th, .checkout-summary-table td { padding: .58rem 0; border: 0; font-size: .75rem; vertical-align: top; }
.checkout-summary-table th { width: 40%; color: #8992a4; font-weight: 600; }
.checkout-summary-table td { color: #3c475f; text-align: right; }
.checkout-summary-table .checkout-total-row { border-top: 1px solid #e5e9f0; }
.checkout-summary-table .checkout-total-row th { padding-top: 1rem; color: #34405a; font-weight: 800; }
.checkout-summary-table .checkout-total-row td { padding-top: .8rem; color: #17213b; font-size: 1.35rem; font-weight: 880; letter-spacing: -.025em; }
.checkout-paypal-row td { color: #3154c8; font-weight: 800; }
.checkout-submit { display: flex; width: 100%; min-height: 48px; justify-content: center; align-items: center; gap: .5rem; border-radius: 10px; font-size: .86rem; font-weight: 800; }
.checkout-cancel { display: block; margin-top: .8rem; color: #7c8699; font-size: .72rem; font-weight: 700; text-align: center; text-decoration: none; }
.checkout-cancel:hover { color: #3154c8; }
.checkout-login-note { margin-top: .75rem; color: #818a9d; font-size: .7rem; text-align: center; }
.checkout-trust-list { display: grid; gap: .75rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid #edf0f5; }
.checkout-trust-list > div { display: flex; gap: .65rem; }
.checkout-trust-list > div > span { display: grid; flex: 0 0 25px; height: 25px; place-items: center; border-radius: 7px; background: #eaf8f1; color: #228260; font-size: .67rem; font-weight: 900; }
.checkout-trust-list p, .checkout-trust-list strong, .checkout-trust-list small { display: block; margin: 0; }
.checkout-trust-list strong { color: #4a556d; font-size: .7rem; }
.checkout-trust-list small { margin-top: .08rem; color: #969dab; font-size: .62rem; line-height: 1.4; }

@media (max-width: 991.98px) {
    .checkout-header { align-items: flex-start; flex-direction: column; }
    .checkout-steps { width: 100%; max-width: 420px; }
    .checkout-layout { grid-template-columns: 1fr; }
    .checkout-sidebar { position: static; }
}
@media (max-width: 575.98px) {
    .checkout-page { padding-bottom: 0; }
    .checkout-header { margin-bottom: 1.25rem; }
    .checkout-header p { font-size: .85rem; }
    .checkout-steps { min-width: 0; }
    .checkout-steps strong { font-size: .6rem; }
    .checkout-panel { padding: 1rem; border-radius: 14px; }
    .checkout-plan-card { grid-template-columns: 17px minmax(0, 1fr); }
    .checkout-plan-price { grid-column: 2; justify-items: start; padding-top: .25rem; }
    .checkout-payment-grid { grid-template-columns: 1fr; }
    .checkout-payment-grid .payment-channel-card { min-height: 80px; }
    .checkout-summary { border-radius: 14px; }
}

/* Member Area */
.member-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.member-sidebar { position: sticky; top: 88px; overflow: hidden; border: 1px solid #e4e9f2; border-radius: 16px; background: #fff; box-shadow: 0 8px 28px rgba(31, 42, 68, .05); }
.member-profile { display: flex; gap: .75rem; align-items: center; padding: 1.15rem; border-bottom: 1px solid #edf0f5; }
.member-avatar { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: linear-gradient(135deg, #3154c8, #6c83dc); color: #fff; font-weight: 800; }
.member-profile-copy { min-width: 0; }
.member-profile-copy strong, .member-profile-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-profile-copy strong { color: #17213b; font-size: .9rem; }
.member-profile-copy span { color: #7b8497; font-size: .72rem; }
.member-nav { display: grid; gap: .25rem; padding: .65rem; }
.member-nav a { display: flex; gap: .7rem; align-items: center; padding: .72rem .8rem; border-radius: 9px; color: #56617a; font-size: .87rem; font-weight: 650; text-decoration: none; transition: background .18s, color .18s; }
.member-nav a span { width: 18px; color: #8992a6; font-size: 1.05rem; text-align: center; }
.member-nav a:hover { background: #f5f7fc; color: #3154c8; }
.member-nav a.active { background: #eef2ff; color: #2949b5; }
.member-nav a.active span { color: #3154c8; }
.member-content { min-width: 0; }
.member-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 1.4rem; }
.member-heading h1 { margin: .2rem 0 .3rem; color: #17213b; font-size: clamp(1.65rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -.035em; }
.member-heading p { margin: 0; color: #697386; }
.member-eyebrow { color: #3154c8; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.member-primary-action { padding: .7rem 1rem; border-radius: 10px; font-weight: 700; white-space: nowrap; }
.member-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem; }
.member-stat { min-height: 130px; padding: 1.15rem; border: 1px solid #e4e9f2; border-radius: 14px; background: #fff; box-shadow: 0 7px 24px rgba(31, 42, 68, .04); }
.member-stat > span, .member-stat small { display: block; color: #7a8498; font-size: .78rem; }
.member-stat strong { display: block; margin: .35rem 0 .15rem; color: #17213b; font-size: 1.8rem; line-height: 1.2; }
.member-stat-help { background: linear-gradient(135deg, #263f9e, #3154c8); }
.member-stat-help > span, .member-stat-help small { color: #dce4ff; }
.member-stat-help strong { color: #fff; font-size: 1.12rem; }
.member-stat-help a { color: #fff; font-size: .82rem; font-weight: 700; }
.member-grid { display: grid; gap: 1rem; }
.member-panel { overflow: hidden; padding: 1.25rem; border: 1px solid #e4e9f2; border-radius: 14px; background: #fff; box-shadow: 0 7px 24px rgba(31, 42, 68, .04); }
.member-panel-head { display: flex; justify-content: space-between; gap: 1rem; align-items: start; margin-bottom: .75rem; }
.member-panel-head h2 { margin: 0 0 .2rem; color: #17213b; font-size: 1.05rem; font-weight: 750; }
.member-panel-head p { margin: 0; color: #7a8498; font-size: .8rem; }
.member-panel-head > a { color: #3154c8; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.member-table-wrap { overflow-x: auto; }
.member-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.member-table th { padding: .7rem .65rem; border-bottom: 1px solid #e8ebf1; color: #7a8498; font-size: .68rem; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; white-space: nowrap; }
.member-table td { padding: .85rem .65rem; color: #4d5870; vertical-align: middle; }
.member-table tr { border-bottom: 1px solid #edf0f5; }
.member-table td.price{font-size: medium; line-height: 2.4rem;}
.member-table tbody tr:last-child td { border-bottom: 0; }
.member-table td small, .member-table-title { display: block; }
.member-table td small { margin-top: .15rem; color: #8992a6; font-size: .72rem; }
.member-table-title { color: #26324b; font-weight: 700; text-decoration: none; }
a.member-table-title:hover { color: #3154c8; }
.member-status { display: inline-flex; gap: .35rem; align-items: center; padding: .25rem .5rem; border-radius: 999px; font-size: .68rem; font-weight: 750; white-space: nowrap; }
.member-status > span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.member-status-success { background: #eaf8f1; color: #177553; }
.member-status-warning { background: #fff5d9; color: #926300; }
.member-status-danger { background: #feeeee; color: #b33c3c; }
.member-status-secondary { background: #eef0f4; color: #667085; }
.license-key-preview { display: block; width: fit-content; margin-top: .35rem; padding: .2rem .35rem; border-radius: 4px; background: #f3f5f9; color: #59647a; font-size: .72rem; }
.member-actions { display: flex; gap: .35rem; justify-content: flex-end; }
.member-table-action { text-align: right; }
.member-empty { display: grid; justify-items: center; padding: 2.5rem 1rem; color: #7a8498; text-align: center; }
.member-empty > span { display: grid; width: 42px; height: 42px; margin-bottom: .65rem; place-items: center; border-radius: 12px; background: #eef2ff; color: #3154c8; font-size: 1.15rem; }
.member-empty strong { color: #34405a; }
.member-empty p { margin: .2rem 0 .5rem; font-size: .8rem; }
.member-empty a { color: #3154c8; font-size: .8rem; font-weight: 700; }
.member-pagination { margin-top: 1rem; }
.member-form-panel { max-width: 820px; padding: clamp(1.25rem, 3vw, 2rem); }
.member-form-panel .form-label { color: #34405a; font-size: .84rem; font-weight: 700; }
.member-form-panel .form-control { min-height: 44px; border-color: #dce1ea; border-radius: 9px; }
.member-form-panel .form-control:focus { border-color: #7890e2; box-shadow: 0 0 0 .2rem rgba(49, 84, 200, .12); }

/* Member settings */
.settings-heading { margin-bottom: 1.25rem; }
.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1rem; align-items: start; }
.settings-card { max-width: none; padding: clamp(1.25rem, 3vw, 1.75rem); }
.settings-card-head { display: flex; gap: .8rem; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1.1rem; border-bottom: 1px solid #edf0f5; }
.settings-card-icon { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; border-radius: 11px; background: #eaf0ff; color: #3154c8; font-size: 1rem; font-weight: 850; }
.settings-card-icon.is-security { background: #f1ebff; color: #7047b8; }
.settings-card-head h2 { margin: 0 0 .2rem; color: #2a354e; font-size: .98rem; font-weight: 820; }
.settings-card-head p { margin: 0; color: #8a93a5; font-size: .7rem; }
.settings-card .form-label { margin-bottom: .4rem; color: #3d4961; font-size: .76rem; font-weight: 750; }
.settings-card .form-label small { color: #9aa1af; font-size: .62rem; font-weight: 600; }
.settings-card .form-control { min-height: 46px; border-color: #dce1ea; border-radius: 9px; color: #3d4961; font-size: .8rem; }
.settings-card textarea.form-control { min-height: 112px; padding: .75rem; resize: vertical; }
.settings-card .form-control:focus { border-color: #8197e4; box-shadow: 0 0 0 .2rem rgba(49,84,200,.1); }
.settings-input-wrap { position: relative; }
.settings-input-wrap > span { position: absolute; z-index: 2; top: 50%; left: .75rem; min-width: 20px; color: #929bad; font-size: .68rem; font-weight: 750; transform: translateY(-50%); }
.settings-input-wrap .form-control { padding-left: 2.55rem; }
.settings-actions { display: flex; gap: .65rem; margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid #edf0f5; }
.settings-actions .btn { min-height: 42px; padding-inline: 1rem; border-radius: 9px; font-size: .76rem; font-weight: 750; place-content: center;}
.settings-actions .btn-light { border: 1px solid #e0e4ec; color: #657087; }
.settings-sidebar { display: grid; gap: 1rem; }
.settings-identity-card, .settings-info-card, .settings-security-card { padding: 1.25rem; }
.settings-identity-card { text-align: center; }
.settings-avatar { display: grid; width: 64px; height: 64px; margin: 0 auto .8rem; place-items: center; border-radius: 18px; background: linear-gradient(135deg, #3154c8, #6f86df); color: #fff; font-size: 1.25rem; font-weight: 850; box-shadow: 0 10px 24px rgba(49,84,200,.2); }
.settings-identity-card h2 { margin: 0; overflow: hidden; color: #2d3851; font-size: .93rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.settings-identity-card p { margin: .22rem 0 .7rem; overflow: hidden; color: #8b94a6; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.settings-account-badge { display: inline-flex; gap: .35rem; align-items: center; padding: .3rem .55rem; border-radius: 999px; background: #eaf8f1; color: #177553; font-size: .63rem; font-weight: 750; }
.settings-account-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.settings-info-card h2, .settings-security-card h2 { margin: 0 0 .55rem; color: #34405a; font-size: .85rem; font-weight: 800; }
.settings-info-card > p, .settings-security-card > p { margin: 0 0 .8rem; color: #858fa2; font-size: .68rem; line-height: 1.6; }
.settings-info-card ul, .settings-security-card ul { display: grid; gap: .6rem; margin: .8rem 0 1rem; padding: 0; list-style: none; }
.settings-info-card li, .settings-security-card li { display: flex; gap: .5rem; color: #737e92; font-size: .68rem; line-height: 1.45; }
.settings-info-card li span { color: #278365; font-weight: 900; }
.settings-info-card > a { display: flex; justify-content: space-between; gap: 1rem; padding-top: .8rem; border-top: 1px solid #edf0f5; color: #3154c8; font-size: .68rem; font-weight: 750; text-decoration: none; }
.settings-password-field { position: relative; }
.settings-password-wrap { position: relative; }
.settings-password-wrap .form-control { padding-right: 5.2rem; }
.password-visibility { position: absolute; z-index: 2; top: 50%; right: .45rem; padding: .3rem .48rem; border: 0; border-radius: 6px; background: #f0f3f8; color: #657087; font-size: .62rem; font-weight: 750; transform: translateY(-50%); }
.password-visibility:hover { background: #e7ebf3; color: #3154c8; }
.password-strength { margin-top: 1rem; }
.password-strength > div { height: 5px; overflow: hidden; border-radius: 99px; background: #edf0f5; }
.password-strength > div > span { display: block; width: 0; height: 100%; border-radius: inherit; background: #c54b58; transition: width .2s, background .2s; }
.password-strength[data-score="2"] > div > span { background: #c98a21; }
.password-strength[data-score="3"] > div > span { background: #6583dc; }
.password-strength[data-score="4"] > div > span { background: #238062; }
.password-strength p { margin: .4rem 0 0; color: #858fa2; font-size: .64rem; }
.settings-security-card { overflow: hidden; background: linear-gradient(145deg, #f8f9ff, #fff); }
.settings-security-icon { display: grid; width: 42px; height: 42px; margin-bottom: .8rem; place-items: center; border-radius: 12px; background: #ebe5fa; color: #7047b8; font-size: 1.05rem; font-weight: 850; }
.settings-security-card li span { color: #9ca4b3; font-weight: 850; }
.settings-security-card li.is-valid { color: #3d6f5d; }
.settings-security-card li.is-valid span { color: #238062; }

/* Member invoice */
.invoice-page { min-width: 0; }
.invoice-toolbar { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.invoice-toolbar > a { color: #69758b; font-size: .78rem; font-weight: 700; text-decoration: none; }
.invoice-toolbar > a:hover { color: #3154c8; }
.invoice-toolbar .btn { border-radius: 9px; font-size: .76rem; font-weight: 750; }
.invoice-hero { display: flex; justify-content: space-between; gap: 1.2rem; align-items: center; margin-bottom: 1rem; padding: 1.25rem; border: 1px solid #e1e6ef; border-radius: 16px; background: #fff; box-shadow: 0 8px 26px rgba(31,42,68,.045); }
.invoice-hero > div { display: flex; gap: .9rem; align-items: center; }
.invoice-status-icon { display: grid; flex: 0 0 48px; width: 48px; height: 48px; place-items: center; border-radius: 14px; background: #fff4d8; color: #996900; font-size: 1.1rem; font-weight: 900; }
.invoice-hero h1 { margin: .2rem 0 .2rem; color: #25304a; font-size: 1.2rem; font-weight: 830; }
.invoice-hero p { margin: 0; color: #7f899c; font-size: .76rem; line-height: 1.5; }
.invoice-status-approved { border-color: #d8eee5; background: #f8fcfa; }
.invoice-status-approved .invoice-status-icon { background: #dff5eb; color: #177553; }
.invoice-status-rejected { border-color: #f1dddd; background: #fffafa; }
.invoice-status-rejected .invoice-status-icon { background: #fde8e8; color: #b33c3c; }
.invoice-document { overflow: hidden; border: 1px solid #e1e6ef; border-radius: 17px; background: #fff; box-shadow: 0 12px 35px rgba(31,42,68,.055); }
.invoice-document-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; padding: 1.5rem; border-bottom: 1px solid #edf0f5; }
.invoice-document-head span { color: #3154c8; font-size: .68rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.invoice-document-head h2 { margin: .28rem 0 .2rem; color: #17213b; font-size: clamp(1.15rem, 2.7vw, 1.55rem); font-weight: 850; letter-spacing: -.025em; }
.invoice-document-head p { margin: 0; color: #8992a4; font-size: .7rem; }
.invoice-document-head img { width: 150px; height: auto; }
.invoice-meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #edf0f5; }
.invoice-meta-grid article { min-width: 0; padding: 1.2rem 1.5rem; border-right: 1px solid #edf0f5; }
.invoice-meta-grid article:last-child { border-right: 0; }
.invoice-meta-grid span, .invoice-meta-grid strong, .invoice-meta-grid p { display: block; overflow-wrap: anywhere; }
.invoice-meta-grid span { margin-bottom: .35rem; color: #929aaa; font-size: .62rem; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; }
.invoice-meta-grid strong { color: #34405a; font-size: .8rem; }
.invoice-meta-grid p { margin: .18rem 0 0; color: #7e889c; font-size: .68rem; }
.invoice-gateway-details { margin: 1rem 1.5rem 0; border: 1px solid #e4e8f0; border-radius: 10px; background: #f8f9fc; }
.invoice-gateway-details summary { padding: .75rem .9rem; color: #59647a; font-size: .72rem; font-weight: 750; cursor: pointer; }
.invoice-gateway-details > div { padding: 0 .9rem .8rem; color: #7d8799; font-size: .68rem; }
.invoice-gateway-details p { margin: 0; overflow-wrap: anywhere; }
.invoice-items-wrap { padding: 1.3rem 1.5rem .5rem; overflow-x: auto; }
.invoice-items-table { width: 100%; border-collapse: collapse; }
.invoice-items-table th { padding: .7rem .75rem; border-bottom: 1px solid #e3e7ee; color: #8c95a6; font-size: .62rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.invoice-items-table th:not(:first-child), .invoice-items-table td:not(:first-child) { text-align: right; }
.invoice-items-table td { padding: 1rem .75rem; border-bottom: 1px solid #edf0f5; color: #536078; font-size: .76rem; }
.invoice-items-table td strong, .invoice-items-table td small { display: block; }
.invoice-items-table td strong { color: #303b54; font-size: .8rem; }
.invoice-items-table td small { margin-top: .15rem; color: #969dac; font-size: .62rem; }
.invoice-totals { width: min(100%, 390px); margin: 0 1.5rem 1.5rem auto; padding: 1rem; border-radius: 12px; background: #f6f8fc; }
.invoice-totals > div { display: flex; justify-content: space-between; gap: 1rem; padding: .42rem 0; color: #7d8799; font-size: .72rem; }
.invoice-totals strong { color: #3d4961; font-variant-numeric: tabular-nums; }
.invoice-totals .invoice-grand-total { align-items: flex-end; margin-top: .45rem; padding-top: .85rem; border-top: 1px solid #dfe4ec; color: #34405a; font-weight: 750; }
.invoice-totals .invoice-grand-total strong { color: #17213b; font-size: 1.18rem; font-weight: 880; letter-spacing: -.025em; }
.invoice-actions { display: flex; gap: .7rem; margin-top: 1rem; padding: 1rem; border: 1px solid #dfe5f3; border-radius: 13px; background: #f7f9ff; }
.invoice-actions .btn { min-height: 42px; border-radius: 9px; font-size: .76rem; font-weight: 750; }

.va-payment-box { margin-bottom: 1rem !important; padding: clamp(1.3rem, 4vw, 2rem); border: 1px solid #dce4fa; border-radius: 17px; background: linear-gradient(135deg, #f5f7ff, #fff); box-shadow: 0 10px 30px rgba(31,42,68,.05); }
.va-bank-badge { width: 180px; color: #0b4ea2; line-height: 1; }
.va-bank-badge span { display: block; font-size: 2.2rem; font-weight: 800; font-style: italic; letter-spacing: -.08em; }
.va-bank-badge small { display: block; font-weight: 800; letter-spacing: .12em; }
.va-number { color: #17213b; font-size: clamp(1.45rem, 5vw, 2.2rem); font-weight: 820; letter-spacing: .04em; overflow-wrap: anywhere; }
.va-amount { color: #3154c8; font-size: clamp(1.7rem, 5vw, 2.35rem); font-weight: 850; }
.va-expiry { max-width: 580px; padding: 1.2rem; border: 1px solid #e3e7ef; border-radius: 12px; background: #fff; }
.va-countdown { color: #212b42; font-size: clamp(1.65rem, 6vw, 2.7rem); font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: .07em; }
.payment-qr { display: block; max-width: 100%; height: auto; padding: .5rem; border: 1px solid #e0e5ef; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(31,42,68,.07); }

@media (max-width: 991.98px) {
    .member-shell { grid-template-columns: 1fr; }
    .member-sidebar { position: static; }
    .member-profile { display: none; }
    .member-nav { display: flex; overflow-x: auto; padding: .5rem; scrollbar-width: thin; }
    .member-nav a { flex: 0 0 auto; padding: .6rem .72rem; }
    .member-stats { grid-template-columns: repeat(2, 1fr); }
    .member-stat-help { grid-column: 1 / -1; min-height: auto; }
    .settings-layout { grid-template-columns: 1fr; }
    .settings-sidebar { grid-template-columns: repeat(2, 1fr); }
    .invoice-meta-grid { grid-template-columns: 1fr 1fr; }
    .invoice-meta-grid article:nth-child(2) { border-right: 0; }
    .invoice-meta-grid article:last-child { grid-column: 1 / -1; border-top: 1px solid #edf0f5; }
}

@media (max-width: 575.98px) {
    .member-heading { align-items: flex-start; flex-direction: column; }
    .member-primary-action { width: 100%; }
    .member-stats { grid-template-columns: 1fr 1fr; }
    .member-stat { min-height: 112px; padding: .9rem; }
    .member-stat strong { font-size: 1.5rem; }
    .member-panel { padding: .9rem; }
    .member-table { min-width: 0; }
    .member-table thead { display: none; }
    .member-table tbody, .member-table tr, .member-table td { display: block; width: 100%; }
    .member-table tr { padding: .75rem 0; border-bottom: 1px solid #e8ebf1; }
    .member-table tbody tr:last-child { border-bottom: 0; }
    .member-table td { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem .25rem; border: 0; text-align: right; }
    .member-table td::before { content: attr(data-label); color: #8992a6; font-size: .68rem; font-weight: 700; text-align: left; text-transform: uppercase; }
    .member-table td:first-child { display: block; text-align: left; }
    .member-table td:first-child::before, .member-table td[colspan]::before { display: none; }
    .member-table td small, .license-key-preview { margin-left: auto; }
    .member-table td:first-child small { margin-left: 0; }
    .member-table-action { display: block !important; padding-top: .65rem !important; }
    .member-actions { justify-content: stretch; }
    .member-actions > *, .member-actions .btn, .member-table-action > .btn { width: 100%; }
    .settings-card { padding: 1rem; }
    .settings-card-head { align-items: flex-start; }
    .settings-actions { flex-direction: column; }
    .settings-actions .btn { width: 100%; }
    .settings-sidebar { grid-template-columns: 1fr; }
    .invoice-toolbar { align-items: stretch; flex-direction: column; }
    .invoice-toolbar .btn { width: 100%; }
    .invoice-hero { align-items: flex-start; flex-direction: column; }
    .invoice-hero > div { align-items: flex-start; }
    .invoice-document-head img { display: none; }
    .invoice-meta-grid { grid-template-columns: 1fr; }
    .invoice-meta-grid article { border-right: 0; border-bottom: 1px solid #edf0f5; }
    .invoice-meta-grid article:last-child { grid-column: auto; border-top: 0; border-bottom: 0; }
    .invoice-items-table thead { display: none; }
    .invoice-items-table, .invoice-items-table tbody, .invoice-items-table tr, .invoice-items-table td { display: block; width: 100%; }
    .invoice-items-table tr { padding: .75rem 0; border-bottom: 1px solid #edf0f5; }
    .invoice-items-table td { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border: 0; text-align: right !important; }
    .invoice-items-table td:first-child { display: block; text-align: left !important; }
    .invoice-items-table td:not(:first-child)::before { color: #939bac; font-size: .62rem; font-weight: 750; content: attr(data-label); text-transform: uppercase; }
    .invoice-totals { width: auto; margin: 0 1rem 1rem; }
    .invoice-actions { flex-direction: column; }
    .invoice-actions > *, .invoice-actions .btn { width: 100%; }
}

/* Home */
.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(420px, 1fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
    max-width: 1060px;
    min-height: 620px;
    margin: 0 auto;
}
.auth-shell-register { max-width: 1180px; }
.auth-intro { padding: 2rem 0; }
.auth-eyebrow { color: #3154c8; font-size: .75rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.auth-intro h1 { margin: .7rem 0 1rem; color: #17213b; font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 850; letter-spacing: -.045em; line-height: 1.06; }
.auth-intro p { color: #667085; font-size: 1.05rem; line-height: 1.7; }
.auth-intro ul { display: grid; gap: .75rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.auth-intro li { position: relative; padding-left: 1.7rem; color: #46516a; }
.auth-intro li::before { position: absolute; left: 0; content: '✓'; color: #3154c8; font-weight: 900; }
.auth-card { border-radius: 18px; box-shadow: 0 22px 55px rgba(31, 42, 68, .1); }
.auth-card .card-body { padding: clamp(1.5rem, 4vw, 2.5rem); }
.auth-card h2 { margin-bottom: .35rem; color: #17213b; font-size: 1.55rem; font-weight: 800; }
.auth-card .form-label { color: #344054; font-size: .87rem; font-weight: 700; }
.auth-card .form-label span { color: #98a2b3; font-size: .72rem; font-weight: 500; }
.auth-card .form-control, .auth-card .input-group .btn { min-height: 46px; }
.auth-submit { min-height: 48px; border-radius: 10px; font-weight: 750; }
.auth-switch { margin: 1.25rem 0 0; color: #667085; text-align: center; }
.legal-page { max-width: 900px; padding: 1rem 0 3rem; }
.legal-header { padding: clamp(2rem, 6vw, 4rem); border: 1px solid #dfe7ff; border-radius: 22px; background: linear-gradient(135deg, #f4f7ff, #fff); text-align: center; }
.legal-header span { color: #3154c8; font-size: .75rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.legal-header h1 { margin: .6rem 0; color: #17213b; font-size: clamp(2.2rem, 5vw, 3.7rem); font-weight: 850; letter-spacing: -.045em; }
.legal-header p { margin: 0; color: #7a8498; }
.legal-content { padding: clamp(1.5rem, 5vw, 3.5rem); color: #4f5b70; font-size: 1.02rem; line-height: 1.8; }
.legal-content h2 { margin: 2.2rem 0 .65rem; color: #17213b; font-size: 1.35rem; font-weight: 800; }
.legal-content p { margin: 0 0 1rem; }

@media (max-width: 900px) {
    .auth-shell { grid-template-columns: 1fr; min-height: auto; }
    .auth-intro { padding: 1rem 0 0; }
    .auth-intro ul { display: none; }
}

.home-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 4.5rem);
    border: 1px solid #dfe7ff;
    border-radius: 24px;
    background:
        radial-gradient(circle at 90% 10%, rgba(76, 110, 245, .2), transparent 32%),
        linear-gradient(135deg, #f4f7ff 0%, #fff 58%, #f1f5ff 100%);
}

.hero-eyebrow,
.section-kicker {
    color: #3154c8;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.hero-title {
    max-width: 720px;
    color: #17213b;
    font-size: clamp(2.2rem, 5vw, 4.1rem);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.04;
}

.hero-title span { color: #3154c8; }

.hero-copy {
    max-width: 650px;
    color: #56617a;
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.75;
}

.hero-cta,
.hero-secondary {
    border-radius: 12px;
    font-size: .95rem;
    font-weight: 700;
    padding: .85rem 1.35rem;
}

.hero-secondary { border: 1px solid #dfe4ef; }

.hero-panel {
    position: relative;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 20px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 20px 50px rgba(42, 66, 130, .14);
    backdrop-filter: blur(12px);
}

.hero-visual {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(42, 66, 130, .18);
}

.hero-visual img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1.9 / 1;
    object-fit: cover;
}

.hero-trust-badge {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    gap: .5rem;
    align-items: center;
    padding: .65rem .85rem;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 8px 24px rgba(23, 33, 59, .13);
    color: #17213b;
    font-size: .76rem;
    font-weight: 750;
    backdrop-filter: blur(10px);
}

.hero-trust-badge span { color: #23835d; font-weight: 900; }

.hero-panel-icon,
.empty-products-icon {
    display: grid;
    width: 46px;
    height: 46px;
    margin-bottom: 1.25rem;
    place-items: center;
    border-radius: 13px;
    background: #3154c8;
    box-shadow: 0 8px 18px rgba(49, 84, 200, .25);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
}

.hero-benefit {
    display: flex;
    gap: .65rem;
    align-items: center;
    padding: .65rem 0;
    border-top: 1px solid #edf0f6;
    color: #48536b;
    font-size: .92rem;
}

.hero-benefit span { color: #23835d; font-weight: 800; }

.product-section { scroll-margin-top: 90px; }

.section-title {
    color: #17213b;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -.025em;
}

.product-count {
    width: fit-content;
    padding: .45rem .8rem;
    border: 1px solid #dfe4ef;
    border-radius: 999px;
    background: #fff;
    color: #667085;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
}

.item-card {
    overflow: hidden;
    border: 1px solid #e5e9f2;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(31, 42, 68, .06);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.item-card:hover {
    transform: translateY(-5px);
    border-color: #ccd7f7;
    box-shadow: 0 18px 40px rgba(31, 53, 110, .12);
}

.product-media {
    display: block;
    overflow: hidden;
    height: 190px;
    background: #eef2ff;
}

.product-media img {
    width: 100%;
    height: 100%;
    transition: transform .35s ease;
}

.item-card:hover .product-media img { transform: scale(1.035); }

.product-placeholder {
    display: grid;
    height: 100%;
    place-items: center;
    background: linear-gradient(135deg, #e9efff, #f7f9ff);
}

.product-placeholder span {
    color: #3154c8;
    font-size: 3.25rem;
    font-weight: 800;
    opacity: .65;
}

.item-card .card-body { padding: 1.35rem; }

.product-category {
    display: inline-block;
    padding: .3rem .65rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #3154c8;
    font-size: .72rem;
    font-weight: 700;
}

.product-name { color: #17213b; text-decoration: none; }
.product-name:hover { color: #3154c8; }

.product-description {
    display: -webkit-box;
    min-height: 3rem;
    overflow: hidden;
    font-size: .9rem;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.admin-table .price{display: inline; font-size: inherit;}
.price-label { color: #8a93a6; font-size: .72rem; }
.price { color: #17213b; font-size: 1.5rem; font-weight: 700; display: block; width: 100%;}
.product-price-row { display: flex; flex-wrap: wrap; gap: .4rem .55rem; align-items: baseline; min-height: 1.9rem; }
.product-price-row del { color: #8a93a6; font-size: .78rem; }
.product-sale-badge { align-self: center; padding: .28rem .6rem; border-radius: 999px; background: #eaf8f1; color: #177553; font-size: .62rem; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.product-pagination .pagination { justify-content: center; margin-bottom: 0; }
.product-pagination .page-link { border-color: #e0e5ef; color: #3154c8; }
.product-pagination .active > .page-link { border-color: #3154c8; background: #3154c8; color: #fff; }

.product-button {
    display: flex;
    justify-content: center;
    gap: .5rem;
    border-radius: 10px;
    font-weight: 700;
}

.empty-products {
    padding: 3.5rem 1.5rem;
    border: 1px dashed #cfd6e6;
    border-radius: 18px;
    background: #fff;
}

.empty-products-icon { margin-inline: auto; }

/* Global footer */
.site-footer {
    margin-top: 3rem;
    border-top: 1px solid #e2e7f0;
    background: #fff;
    color: #56617a;
}

.footer-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid #e9edf4;
}

.footer-trust-item {
    display: flex;
    gap: .8rem;
    align-items: center;
}

.footer-trust-icon {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    background: #eef2ff;
    color: #3154c8;
    font-weight: 900;
}

.footer-trust-item strong,
.footer-trust-item small { display: block; }
.footer-trust-item strong { color: #17213b; font-size: .9rem; }
.footer-trust-item small { margin-top: .15rem; color: #7a8498; font-size: .75rem; }

.footer-main { padding: 3rem 0 2.5rem; }
.footer-brand { display: inline-block; margin-bottom: 1rem; }
.footer-brand img { display: block; width: 172px; height: 40px; }
.footer-about { max-width: 430px; margin-bottom: .8rem; font-size: .9rem; line-height: 1.7; }
.footer-email { color: #3154c8; font-size: .88rem; font-weight: 700; text-decoration: none; }
.footer-email:hover { text-decoration: underline; }

.footer-heading {
    margin-bottom: 1rem;
    color: #17213b;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.footer-links { margin: 0; padding: 0; list-style: none; }
.footer-links li + li { margin-top: .65rem; }
.footer-links a { color: #667085; font-size: .86rem; text-decoration: none; }
.footer-links a:hover { color: #3154c8; }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    border-top: 1px solid #e9edf4;
    color: #8a93a6;
    font-size: .76rem;
}

.footer-bottom p { margin: 0; }

/* Admin workspace */
.admin-page { --admin-ink: #17213b; --admin-muted: #748097; }
.admin-nav { display: flex; gap: .3rem; margin-bottom: 2rem; padding: .35rem; overflow-x: auto; border: 1px solid #e4e8f0; border-radius: 13px; background: #fff; scrollbar-width: none; }
.admin-nav::-webkit-scrollbar { display: none; }
.admin-nav a { padding: .62rem .9rem; border-radius: 9px; color: #667085; font-size: .8rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.admin-nav a:hover { background: #f5f7fb; color: #3154c8; }
.admin-nav a.active { background: #3154c8; color: #fff; box-shadow: 0 5px 14px rgba(49, 84, 200, .2); }
.admin-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.25rem; }
.admin-header h1 { margin: .2rem 0 .35rem; color: var(--admin-ink); font-size: clamp(1.55rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.035em; }
.admin-header p { margin: 0; color: var(--admin-muted); font-size: .9rem; }
.admin-eyebrow { color: #3154c8; font-size: .68rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.admin-header .btn { flex: 0 0 auto; padding: .65rem 1rem; font-size: .82rem; font-weight: 700; }
.admin-summary { display: inline-flex; align-items: center; gap: .65rem; margin-bottom: 1.25rem; padding: .6rem .8rem; border: 1px solid #e4e8f0; border-radius: 10px; background: #fff; }
.admin-summary strong { color: var(--admin-ink); font-size: 1rem; }
.admin-summary span { color: var(--admin-muted); font-size: .76rem; }
.admin-card { overflow: hidden; border-radius: 15px; }
.admin-card > .table-responsive { margin: 0; }
.admin-table { margin: 0; }
.admin-table th { padding: .85rem 1rem; border-bottom-color: #e4e8f0; background: #f8f9fc; color: #7b8599; font-size: .67rem; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; white-space: nowrap; }
.admin-table td { padding: 1rem; border-bottom-color: #edf0f5; color: #536078; font-size: .82rem; vertical-align: middle; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover td { background: #fbfcff; }
.admin-table strong { color: var(--admin-ink); font-weight: 700; }
.admin-table td small { display: block; margin-top: .22rem; color: #8b94a7; }
.admin-table a:not(.btn) { color: #3154c8; text-decoration: none; }
.admin-primary-link { font-weight: 750; }
.admin-table code { color: #59657b; font-size: .76rem; }
.admin-table .coupon-code { display: inline-block; padding: .34rem .55rem; border: 1px dashed #cbd4e5; border-radius: 7px; background: #f7f9fc; color: #3154c8; font-weight: 750; letter-spacing: .04em; }
.admin-status { display: inline-flex; align-items: center; gap: .38rem; padding: .32rem .56rem; border-radius: 999px; background: #f1f3f6; color: #657086; font-size: .68rem; font-weight: 750; text-transform: capitalize; white-space: nowrap; }
.admin-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.admin-status.is-active, .admin-status.is-approved { background: #e5f7ee; color: #18724f; }
.admin-status.is-pending { background: #fff3dc; color: #98610d; }
.admin-status.is-rejected { background: #fee9e7; color: #b42318; }
.admin-status.is-inactive { background: #edf0f5; color: #667085; }
.admin-count { display: inline-grid; min-width: 30px; height: 28px; padding-inline: .45rem; place-items: center; border-radius: 8px; background: #eef2ff; color: #3154c8; font-weight: 750; }
.admin-empty { padding: 2.7rem 1rem; text-align: center; }
.admin-empty span { display: grid; width: 44px; height: 44px; margin: 0 auto .8rem; place-items: center; border-radius: 13px; background: #eef2ff; color: #3154c8; font-size: 1.15rem; font-weight: 800; }
.admin-empty strong { display: block; margin-bottom: .25rem; }
.admin-empty p { margin: 0; color: #8b94a7; font-size: .8rem; }
.admin-pagination { padding: 1rem; border-top: 1px solid #edf0f5; }
.admin-pagination nav { margin: 0; }

/* Admin dashboard */
.admin-dashboard-header { align-items: flex-end; }
.admin-dashboard-date {
    min-width: 180px;
    padding: .72rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    color: #64748b;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: right;
}
.admin-dashboard-date strong { display: block; color: #172033; font-size: .94rem; }
.admin-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.admin-dashboard-stat {
    position: relative;
    display: flex;
    align-items: center;
    gap: .9rem;
    min-width: 0;
    overflow: hidden;
    padding: 1.15rem;
    border: 1px solid #e6eaf0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .05);
}
.admin-dashboard-stat > div { min-width: 0; }
.admin-dashboard-stat-icon {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    border-radius: 14px;
    background: #eaf0ff;
    color: #3154a5;
    font-size: .82rem;
    font-weight: 800;
}
.admin-dashboard-stat-icon.is-amber { background: #fff4df; color: #b66a00; }
.admin-dashboard-stat-icon.is-green { background: #e8f8ef; color: #188653; }
.admin-dashboard-stat-icon.is-violet { background: #f1ebff; color: #7250b5; }
.admin-dashboard-stat::after {
    position: absolute;
    right: -28px;
    bottom: -32px;
    width: 95px;
    height: 95px;
    border-radius: 50%;
    background: var(--stat-accent, #3154a5);
    content: "";
    opacity: .08;
}
.admin-dashboard-stat-label {
    display: block;
    margin-bottom: .6rem;
    color: #718096;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.admin-dashboard-stat-value {
    display: block;
    overflow: hidden;
    color: #172033;
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    font-weight: 800;
    line-height: 1.15;
    text-overflow: ellipsis;
}
.admin-dashboard-stat-meta { margin-top: .5rem; color: #8a94a6; font-size: .78rem; }
.admin-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, .8fr);
    gap: 1rem;
    margin-bottom: 1rem;
}
.admin-dashboard-grid.is-bottom {
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .95fr);
}
.admin-dashboard-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e6eaf0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .05);
}
.admin-dashboard-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #edf0f5;
}
.admin-dashboard-panel-head h2 { margin: 0; color: #172033; font-size: 1rem; font-weight: 800; }
.admin-dashboard-panel-head p { margin: .2rem 0 0; color: #8a94a6; font-size: .76rem; }
.admin-dashboard-panel-head a {
    color: #3154a5;
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
}
.admin-revenue-chart {
    display: flex;
    align-items: stretch;
    gap: .7rem;
    height: 245px;
    padding: 1.25rem 1.15rem 1rem;
}
.admin-revenue-column {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}
.admin-revenue-track {
    position: relative;
    display: flex;
    width: min(44px, 75%);
    height: 180px;
    align-items: flex-end;
    overflow: visible;
    border-radius: 10px 10px 5px 5px;
    background: #f0f3f8;
}
.admin-revenue-bar {
    position: relative;
    width: 100%;
    min-height: 4px;
    border-radius: 10px 10px 5px 5px;
    background: linear-gradient(180deg, #4267b2, #233d78);
    transition: filter .2s ease, transform .2s ease;
}
.admin-revenue-bar:hover { filter: brightness(1.08); transform: translateY(-2px); }
.admin-revenue-value {
    position: absolute;
    top: -26px;
    left: 50%;
    color: #4a5568;
    font-size: .67rem;
    font-weight: 800;
    white-space: nowrap;
    transform: translateX(-50%);
}
.admin-revenue-label { margin-top: .65rem; color: #7d8798; font-size: .72rem; font-weight: 700; }
.admin-attention-panel { padding: .35rem 1.15rem .9rem; }
.admin-attention-link {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 0;
    border-bottom: 1px solid #edf0f5;
    color: #293247;
}
.admin-attention-link:last-child { border-bottom: 0; }
.admin-attention-link:hover { color: #3154a5; }
.admin-attention-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 12px;
    background: #eef3ff;
    color: #3154a5;
    font-size: .9rem;
}
.admin-attention-copy { min-width: 0; flex: 1; }
.admin-attention-copy strong { display: block; color: inherit; font-size: .84rem; }
.admin-attention-copy span { display: block; margin-top: .1rem; color: #8a94a6; font-size: .73rem; }
.admin-attention-count {
    display: grid;
    min-width: 28px;
    height: 28px;
    padding: 0 .45rem;
    place-items: center;
    border-radius: 9px;
    background: #f4f6f9;
    color: #485369;
    font-size: .74rem;
    font-weight: 800;
}
.admin-dashboard-table { width: 100%; margin: 0; }
.admin-dashboard-table th,
.admin-dashboard-table td {
    padding: .85rem 1.15rem;
    border-color: #edf0f5;
    vertical-align: middle;
}
.admin-dashboard-table th {
    color: #7d8798;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.admin-dashboard-table td { color: #394258; font-size: .8rem; }
.admin-dashboard-table strong { color: #172033; }
.admin-ticket-panel { padding: .25rem 1.15rem .75rem; }
.admin-ticket-item { display: block; padding: .8rem 0; border-bottom: 1px solid #edf0f5; }
.admin-ticket-item:last-child { border-bottom: 0; }
.admin-ticket-item strong {
    display: block;
    overflow: hidden;
    color: #293247;
    font-size: .82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-ticket-item span { display: block; margin-top: .25rem; color: #8a94a6; font-size: .72rem; }
.admin-dashboard-empty { padding: 2rem 1.15rem; color: #8a94a6; font-size: .82rem; text-align: center; }

@media (max-width: 991.98px) {
    .admin-dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-dashboard-grid,
    .admin-dashboard-grid.is-bottom { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
    .admin-dashboard-header { align-items: flex-start; }
    .admin-dashboard-date { width: 100%; text-align: left; }
    .admin-dashboard-stats { grid-template-columns: minmax(0, 1fr); }
    .admin-revenue-chart {
        height: 210px;
        gap: .4rem;
        padding-right: .75rem;
        padding-left: .75rem;
    }
    .admin-revenue-track { height: 145px; }
    .admin-revenue-value { font-size: .6rem; }
}
.admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.25rem 0; }
.admin-toolbar > span { color: var(--admin-muted); font-size: .78rem; white-space: nowrap; }
.admin-search { display: flex; width: min(560px, 100%); gap: .5rem; }
.admin-search .form-control { min-width: 220px; border-color: #dfe4ed; font-size: .84rem; }
.admin-search .btn { font-size: .8rem; font-weight: 700; }

/* License management */
.license-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; margin: 1.25rem 0 1.5rem; }
.license-stat { display: flex; align-items: center; gap: .85rem; min-width: 0; padding: 1rem; border: 1px solid #e5e9f1; border-radius: 14px; background: #fff; box-shadow: 0 7px 20px rgba(26, 39, 72, .035); }
.license-stat-icon { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: #edf2ff; color: #3154c8; font-size: 1rem; font-weight: 850; }
.license-stat-icon.is-success { background: #e5f7ee; color: #18724f; }
.license-stat-icon.is-warning { background: #fff3dc; color: #98610d; }
.license-stat-icon.is-violet { background: #f1ebff; color: #7047b8; }
.license-stat div { min-width: 0; }
.license-stat small, .license-stat span:not(.license-stat-icon) { display: block; color: #858fa2; font-size: .67rem; white-space: nowrap; }
.license-stat strong { display: block; margin: .08rem 0; color: #17213b; font-size: 1.25rem; font-weight: 800; line-height: 1.15; }
.license-toolbar { padding: .8rem; border: 1px solid #e4e8f0; border-radius: 13px; background: #fff; }
.license-toolbar > span strong { color: #344054; }
.license-search { width: min(780px, 100%); }
.license-search-field { position: relative; flex: 1 1 320px; }
.license-search-field > span { position: absolute; z-index: 1; top: 50%; left: .75rem; color: #8b94a7; font-size: 1.1rem; transform: translateY(-53%); pointer-events: none; }
.license-search-field .form-control { width: 100%; padding-left: 2.2rem; }
.license-search .form-select { width: 150px; border-color: #dfe4ed; color: #536078; font-size: .84rem; }
.license-owner { display: flex; align-items: center; gap: .65rem; min-width: 175px; }
.license-avatar { display: grid !important; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: #edf2ff; color: #3154c8; font-size: .72rem; font-weight: 850; }
.license-date { font-size: .8rem; white-space: nowrap; }
.license-slots { min-width: 92px; }
.license-slots > div { display: flex; align-items: baseline; gap: .2rem; }
.license-slots > div strong { font-size: .92rem; }
.license-slots > div span { color: #8b94a7; font-size: .7rem; }
.license-slot-bar { display: block; width: 72px; height: 4px; margin-top: .38rem; overflow: hidden; border-radius: 999px; background: #e8ebf1; }
.license-slot-bar i { display: block; height: 100%; border-radius: inherit; background: #3154c8; }
.license-admin .admin-table-action .btn { white-space: nowrap; }
.license-back { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1rem; color: #667085; font-size: .78rem; font-weight: 700; text-decoration: none; }
.license-back:hover { color: #3154c8; }
.license-detail-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.25rem; }
.license-detail-title h1 { margin: .2rem 0; color: #17213b; font-size: clamp(1.55rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.035em; }
.license-detail-title p { margin: .35rem 0 0; color: #7b8599; font-size: .84rem; }
.license-detail-title p strong { color: #536078; }
.license-key-box { min-width: 240px; padding: .75rem 1rem; border: 1px solid #dfe4ed; border-radius: 12px; background: #fff; }
.license-key-box small, .license-key-box span { display: block; color: #8b94a7; font-size: .64rem; }
.license-key-box code { display: block; margin: .15rem 0; color: #3154c8; font-size: .85rem; font-weight: 750; }
.license-detail-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 1rem; overflow: hidden; border: 1px solid #e4e8f0; border-radius: 15px; background: #fff; box-shadow: 0 8px 24px rgba(20, 32, 54, .04); }
.license-detail-stats article { min-width: 0; padding: 1rem 1.15rem; border-right: 1px solid #edf0f5; }
.license-detail-stats article:last-child { border-right: 0; }
.license-detail-stats small, .license-detail-stats span { display: block; color: #8b94a7; font-size: .67rem; }
.license-detail-stats strong { display: block; margin: .2rem 0; overflow: hidden; color: #17213b; font-size: 1rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.license-detail-stats strong em { color: #8b94a7; font-size: .72rem; font-style: normal; font-weight: 600; }
.license-detail-stats .license-slot-bar { width: 100%; max-width: 110px; margin-top: .45rem; }
.license-section { margin-bottom: 1rem; overflow: hidden; border-radius: 15px; }
.license-section-head, .license-side-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-bottom: 1px solid #edf0f5; }
.license-section-head > div, .license-side-head > div { display: flex; align-items: center; gap: .7rem; }
.license-section-head h2, .license-side-head h2 { margin: 0; color: #17213b; font-size: .9rem; font-weight: 800; }
.license-section-head p, .license-side-head p { margin: .15rem 0 0; color: #8b94a7; font-size: .7rem; }
.license-section-icon { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: #e9efff; color: #3154c8; font-size: .78rem; font-weight: 850; }
.license-section-icon.is-violet { background: #f1ebff; color: #7047b8; }
.license-section-icon.is-amber { background: #fff3dc; color: #98610d; }
.license-section-icon.is-green { background: #e5f7ee; color: #18724f; }
.license-section-count { display: grid; min-width: 28px; height: 26px; padding-inline: .4rem; place-items: center; border-radius: 8px; background: #eef2ff; color: #3154c8; font-size: .7rem; font-weight: 800; }
.license-capabilities { display: flex; flex-wrap: wrap; gap: .55rem; padding: 1rem 1.1rem; }
.license-capabilities span { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .65rem; border-radius: 9px; font-size: .72rem; font-weight: 700; text-transform: capitalize; }
.license-capabilities span.is-enabled { background: #e9f8f0; color: #18724f; }
.license-capabilities span.is-disabled { background: #f1f3f6; color: #7b8599; }
.license-capabilities i { font-style: normal; }
.license-detail-table { margin: 0; }
.license-inline-empty { padding: 1.4rem; color: #8b94a7; text-align: center; }
.license-side-card { margin-bottom: 1rem; overflow: hidden; border-radius: 15px; }
.license-side-head { border-bottom: 0; }
.license-quota-value { padding: .35rem 1.1rem; }
.license-quota-value strong { display: block; color: #17213b; font-size: 2rem; font-weight: 850; line-height: 1; }
.license-quota-value span { color: #7b8599; font-size: .72rem; }
.license-quota-bar { height: 7px; margin: .8rem 1.1rem; overflow: hidden; border-radius: 99px; background: #edf0f5; }
.license-quota-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3154c8, #7047b8); }
.license-quota-meta { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 1.1rem; }
.license-quota-meta span { color: #8b94a7; font-size: .62rem; }
.license-quota-meta strong { display: block; color: #536078; font-size: .77rem; }
.license-reset { margin: .9rem 1.1rem 1.1rem; color: #8b94a7; font-size: .65rem; }
.license-limit-form { display: grid; gap: .8rem; padding: .15rem 1.1rem 1rem; }
.license-limit-form .form-label { margin-bottom: .3rem; color: #667085; font-size: .68rem; font-weight: 750; }
.license-limit-form .form-control { border-color: #dfe4ed; font-size: .8rem; }
.license-form-note { display: block; padding: 0 1.1rem 1rem; color: #8b94a7; font-size: .65rem; }
.license-activations { margin-top: .25rem; }
.license-url { display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.license-muted { color: #8b94a7; font-size: .75rem; }

/* Admin records and forms */
.admin-record-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.2rem; }
.admin-record-header h1 { margin: .2rem 0; color: #17213b; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 850; letter-spacing: -.035em; }
.admin-record-header p { margin: 0; color: #7b8599; font-size: .78rem; }
.admin-record-actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.admin-record-actions form { margin: 0; }
.admin-record-actions .btn { font-size: .78rem; font-weight: 700; }
.admin-record-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 1rem; overflow: hidden; border: 1px solid #e4e8f0; border-radius: 15px; background: #fff; box-shadow: 0 8px 24px rgba(20, 32, 54, .04); }
.admin-record-stats article { min-width: 0; padding: 1rem 1.1rem; border-right: 1px solid #edf0f5; }
.admin-record-stats article:last-child { border-right: 0; }
.admin-record-stats small { display: block; margin-bottom: .25rem; color: #8b94a7; font-size: .65rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.admin-record-stats strong { display: block; overflow: hidden; color: #17213b; font-size: 1rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.admin-record-stats p { margin: .2rem 0 0; color: #8b94a7; font-size: .67rem; }
.admin-record-card { margin-bottom: 1rem; overflow: hidden; border-radius: 15px; }
.admin-record-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 58px; padding: .85rem 1rem; border-bottom: 1px solid #edf0f5; }
.admin-record-card-head h2 { margin: 0; color: #17213b; font-size: .88rem; font-weight: 800; }
.admin-record-card-head p { margin: .15rem 0 0; color: #8b94a7; font-size: .68rem; }
.admin-record-card-head > span, .admin-record-card-head > a { color: #3154c8; font-size: .7rem; font-weight: 750; text-decoration: none; }
.admin-invoice-totals td, .admin-invoice-totals th { padding: .65rem 1rem; text-align: right; }
.admin-invoice-totals tr:last-child { background: #f7f9ff; color: #17213b; }
.print-only { display: none; }

@media print {
    @page { size: A4 portrait; margin: 14mm; }
    html, body { background: #fff !important; }
    body { color: #26324b; font-family: Arial, Helvetica, sans-serif; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    body > .skip-link, body > nav, body > footer, .no-print { display: none !important; }
    main.container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
    .print-only { display: block !important; }
    .admin-print-invoice { color: #26324b; font-size: 10pt; }
    .admin-print-head { display: flex; justify-content: space-between; gap: 20mm; align-items: flex-start; padding-bottom: 8mm; border-bottom: 2px solid #3154c8; }
    .admin-print-head img { display: block; width: 46mm; height: auto; }
    .admin-print-head p { margin: 2mm 0 0; color: #7a8498; font-size: 8pt; }
    .admin-print-head > div:last-child { text-align: right; }
    .admin-print-head > div:last-child span, .admin-print-head > div:last-child strong { display: block; }
    .admin-print-head > div:last-child span { color: #3154c8; font-size: 9pt; font-weight: 800; letter-spacing: .14em; }
    .admin-print-head > div:last-child strong { margin-top: 2mm; color: #17213b; font-size: 15pt; }
    .admin-print-meta { display: grid; grid-template-columns: repeat(3, 1fr); margin: 7mm 0; border: 1px solid #dfe4ed; border-radius: 3mm; }
    .admin-print-meta > div { padding: 4mm; border-right: 1px solid #e5e9f0; }
    .admin-print-meta > div:last-child { border-right: 0; }
    .admin-print-meta span, .admin-print-meta strong, .admin-print-meta small { display: block; }
    .admin-print-meta span, .admin-print-billing span { margin-bottom: 1.5mm; color: #8490a4; font-size: 7pt; font-weight: 800; letter-spacing: .07em; }
    .admin-print-meta strong { color: #2f3a53; font-size: 9pt; }
    .admin-print-meta small { margin-top: 1mm; color: #7c879a; font-size: 7.5pt; }
    .admin-print-billing { display: grid; grid-template-columns: 1fr 1fr; gap: 12mm; margin-bottom: 8mm; }
    .admin-print-billing strong, .admin-print-billing p { display: block; margin: 0; }
    .admin-print-billing strong { color: #27324b; font-size: 10pt; }
    .admin-print-billing p { margin-top: 1mm; color: #69758a; font-size: 8pt; }
    .admin-print-table { width: 100%; border-collapse: collapse; page-break-inside: auto; }
    .admin-print-table thead { display: table-header-group; }
    .admin-print-table tr { page-break-inside: avoid; }
    .admin-print-table th { padding: 3mm; border-bottom: 1px solid #cfd6e2; background: #f1f4fa !important; color: #59657b; font-size: 7.5pt; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
    .admin-print-table th:not(:first-child), .admin-print-table td:not(:first-child) { text-align: right; }
    .admin-print-table td { padding: 4mm 3mm; border-bottom: 1px solid #e4e8ef; color: #4d5970; font-size: 8.5pt; }
    .admin-print-table td strong, .admin-print-table td small { display: block; }
    .admin-print-table td strong { color: #2b3650; }
    .admin-print-table td small { margin-top: 1mm; color: #8791a3; font-size: 7.5pt; }
    .admin-print-summary { width: 74mm; margin: 6mm 0 10mm auto; padding: 4mm; border-radius: 3mm; background: #f5f7fb !important; page-break-inside: avoid; }
    .admin-print-summary > div { display: flex; justify-content: space-between; gap: 8mm; padding: 1.5mm 0; color: #657188; font-size: 8.5pt; }
    .admin-print-summary > div:nth-child(3) { margin-top: 2mm; padding-top: 3mm; border-top: 1px solid #d4dae4; color: #17213b; font-size: 11pt; font-weight: 800; }
    .admin-print-footer { display: flex; justify-content: space-between; gap: 10mm; align-items: flex-end; margin-top: 12mm; padding-top: 5mm; border-top: 1px solid #dfe4ec; page-break-inside: avoid; }
    .admin-print-footer strong { color: #2b3650; font-size: 9pt; }
    .admin-print-footer p { margin: 1mm 0 0; color: #8490a2; font-size: 7.5pt; }
    .admin-print-footer > span { color: #3154c8; font-size: 8pt; font-weight: 750; }
}
.admin-customer-card { display: flex; align-items: center; gap: .7rem; padding: 1rem; }
.admin-customer-card strong, .admin-customer-card span { display: block; }
.admin-customer-card strong { color: #17213b; font-size: .82rem; }
.admin-customer-card div span { color: #8b94a7; font-size: .7rem; }
.admin-record-list { display: grid; grid-template-columns: 1fr; margin: 0; padding: .4rem 1rem 1rem; }
.admin-record-list dt { margin-top: .65rem; color: #8b94a7; font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; }
.admin-record-list dd { margin: .12rem 0 0; overflow-wrap: anywhere; color: #536078; font-size: .74rem; }
.admin-member-heading { display: flex; align-items: center; gap: .9rem; }
.admin-member-avatar { display: grid; flex: 0 0 52px; width: 52px; height: 52px; place-items: center; border-radius: 15px; background: #3154c8; color: #fff; font-size: 1rem; font-weight: 850; box-shadow: 0 8px 18px rgba(49, 84, 200, .2); }
.admin-profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin: 0; padding: .3rem 1rem 1rem; }
.admin-profile-grid > div { padding: .8rem 0; border-bottom: 1px solid #edf0f5; }
.admin-profile-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
.admin-profile-grid .is-wide { grid-column: 1 / -1; }
.admin-profile-grid dt { color: #8b94a7; font-size: .64rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.admin-profile-grid dd { margin: .25rem 0 0; color: #536078; font-size: .8rem; }
.admin-profile-grid a { color: #3154c8; text-decoration: none; }
.admin-form-card { margin-bottom: 1rem; overflow: hidden; border-radius: 15px; }
.admin-form-narrow { max-width: 780px; }
.admin-form-card-head { display: flex; align-items: center; gap: .7rem; min-height: 64px; padding: .85rem 1rem; border-bottom: 1px solid #edf0f5; }
.admin-form-card-head > div { flex: 1; min-width: 0; }
.admin-form-card-head h2 { margin: 0; color: #17213b; font-size: .9rem; font-weight: 800; }
.admin-form-card-head p { margin: .15rem 0 0; color: #8b94a7; font-size: .68rem; }
.admin-form-card-head .btn { flex: 0 0 auto; font-size: .72rem; font-weight: 700; }
.admin-form-body { padding: 1.1rem; }
.admin-form-page .form-label { color: #536078; font-size: .72rem; font-weight: 750; }
.admin-form-page .form-label b { color: #d92d20; }
.admin-form-page .form-label span { color: #98a2b3; font-size: .62rem; font-weight: 500; }
.admin-form-page .form-control, .admin-form-page .form-select, .admin-form-page .input-group-text { border-color: #dfe4ed; font-size: .8rem; }
.admin-form-page .form-control:focus, .admin-form-page .form-select:focus { border-color: #8fa4ec; box-shadow: 0 0 0 .2rem rgba(49, 84, 200, .1); }
.admin-form-page .form-text { color: #98a2b3; font-size: .63rem; }
.admin-form-actions { display: flex; justify-content: flex-end; gap: .55rem; padding: .35rem 0 1rem; }
.admin-form-actions .btn { min-width: 120px; font-size: .78rem; font-weight: 750; }
.admin-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem; border: 1px solid #e4e8f0; border-radius: 11px; background: #f9faff; cursor: pointer; }
.admin-switch-row strong, .admin-switch-row small { display: block; }
.admin-switch-row strong { color: #344054; font-size: .76rem; }
.admin-switch-row small { margin-top: .15rem; color: #8b94a7; font-size: .65rem; }
.admin-switch-row .form-check { margin: 0; padding-left: 2.6rem; }
.coupon-code-input { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.admin-form-page .sub-row { border-color: #e4e8f0 !important; border-radius: 12px !important; background: #fbfcff; }

/* Support ticketing */
.support-header,
.support-ticket-head {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.support-ticket-head { padding-top: .5rem; }
.support-form-shell { max-width: 820px; margin-inline: auto; }
.support-back { display: inline-block; margin-bottom: 1.25rem; color: #56617a; font-size: .86rem; font-weight: 650; text-decoration: none; }
.support-back:hover { color: #3154c8; }
.support-form-card { overflow: hidden; border-radius: 18px; }
.support-card { overflow: hidden; border-radius: 15px; }
.support-table th { padding: .9rem 1rem; border-bottom-color: #e7ebf2; background: #f8f9fc; color: #7a8498; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.support-table td { padding: 1rem; border-bottom-color: #edf0f5; color: #56617a; font-size: .86rem; }
.support-table td strong { display: block; color: #17213b; }
.support-table td small { display: block; margin-top: .18rem; color: #8a93a6; }
.ticket-needs-reply td:first-child { box-shadow: inset 3px 0 #3154c8; }

.ticket-status,
.ticket-priority {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: .32rem .58rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 750;
    white-space: nowrap;
}

.status-waiting_admin { background: #fff1d6; color: #9a5a00; }
.status-waiting_member { background: #e9efff; color: #3154c8; }
.status-resolved { background: #e2f7ed; color: #18724f; }
.status-closed { background: #edf0f5; color: #667085; }
.priority-low { background: #f1f3f7; color: #667085; }
.priority-normal { background: #e9efff; color: #3154c8; }
.priority-high { background: #fee9e7; color: #b42318; }

.support-empty { padding: 3.5rem 1rem; text-align: center; }
.support-empty span { display: grid; width: 46px; height: 46px; margin: 0 auto 1rem; place-items: center; border-radius: 14px; background: #eef2ff; color: #3154c8; font-weight: 850; }
.support-empty p { color: #7a8498; }

.ticket-thread { display: flex; flex-direction: column; gap: 1.25rem; margin: 2rem 0; }
.ticket-message { display: flex; gap: .85rem; align-items: flex-start; }
.ticket-message.is-staff { flex-direction: row-reverse; }
.ticket-avatar { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: #e8ecf4; color: #56617a; font-size: .72rem; font-weight: 850; }
.is-staff .ticket-avatar { background: #3154c8; color: #fff; }
.ticket-bubble { width: min(760px, calc(100% - 52px)); padding: 1rem 1.1rem; border: 1px solid #e5e9f2; border-radius: 4px 16px 16px 16px; background: #fff; box-shadow: 0 6px 22px rgba(31, 42, 68, .04); }
.is-staff .ticket-bubble { border-color: #dbe3ff; border-radius: 16px 4px 16px 16px; background: #f5f7ff; }
.ticket-bubble header { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; }
.ticket-bubble header strong { color: #17213b; font-size: .82rem; }
.ticket-bubble time { color: #929bad; font-size: .7rem; }
.ticket-message-text { color: #48536b; font-size: .9rem; line-height: 1.7; overflow-wrap: anywhere; }
.reply-card { max-width: 820px; margin-top: 1.5rem; border-radius: 15px; }
.admin-thread { margin-top: 1rem; }
.ticket-sidebar { position: sticky; top: 90px; border-radius: 15px; }
.ticket-meta { margin: 1.25rem 0 0; }
.ticket-meta dt { margin-top: .85rem; color: #929bad; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; }
.ticket-meta dd { margin: .18rem 0 0; color: #344054; font-size: .87rem; }
.ticket-meta dd small { display: block; color: #8a93a6; }
.ticket-stat-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.ticket-stat-row span { padding: .5rem .7rem; border: 1px solid #e1e6ef; border-radius: 9px; background: #fff; color: #667085; font-size: .76rem; }
.ticket-stat-row strong { color: #17213b; }
.ticket-search { width: min(320px, 100%); }
.ticket-filter { width: auto; min-width: 155px; }

@media (max-width: 991.98px) {
    .home-hero { padding: 2.5rem; }
    .hero-panel { margin-top: .5rem; }
    .footer-trust { grid-template-columns: 1fr; }
    .license-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .license-detail-stats { grid-template-columns: repeat(2, 1fr); }
    .license-detail-stats article:nth-child(2) { border-right: 0; }
    .license-detail-stats article:nth-child(-n+2) { border-bottom: 1px solid #edf0f5; }
    .admin-record-stats { grid-template-columns: repeat(2, 1fr); }
    .admin-record-stats article:nth-child(2) { border-right: 0; }
    .admin-record-stats article:nth-child(-n+2) { border-bottom: 1px solid #edf0f5; }
}

@media (max-width: 575.98px) {
    .admin-nav { margin-inline: -.25rem; margin-bottom: 1.4rem; }
    .admin-header { align-items: stretch; flex-direction: column; }
    .admin-header .btn, .admin-header form, .admin-header form .btn { width: 100%; }
    .admin-toolbar { align-items: stretch; flex-direction: column; }
    .admin-search { flex-wrap: wrap; }
    .admin-search .form-control { flex-basis: 100%; }
    .admin-search .btn { flex: 1; }
    .admin-table th, .admin-table td { padding-inline: .8rem; }
    .license-stats { grid-template-columns: 1fr 1fr; gap: .65rem; }
    .license-stat { align-items: flex-start; padding: .8rem; }
    .license-stat-icon { display: none; }
    .license-stat span:not(.license-stat-icon) { white-space: normal; }
    .license-toolbar { padding: .7rem; }
    .license-search .form-select { flex: 1 1 calc(50% - .25rem); width: auto; }
    .license-admin .admin-card { overflow: visible; border: 0; background: transparent; box-shadow: none; }
    .license-admin .admin-card .table-responsive { overflow: visible; }
    .license-admin .admin-table thead { display: none; }
    .license-admin .admin-table, .license-admin .admin-table tbody, .license-admin .admin-table tr, .license-admin .admin-table td { display: block; width: 100%; }
    .license-admin .admin-table tr { margin-bottom: .75rem; padding: .35rem .9rem; border: 1px solid #e4e8f0; border-radius: 14px; background: #fff; box-shadow: 0 7px 20px rgba(26, 39, 72, .035); }
    .license-admin .admin-table td { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid #edf0f5; text-align: right; }
    .license-admin .admin-table td::before { content: attr(data-label); color: #8b94a7; font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-align: left; text-transform: uppercase; }
    .license-admin .admin-table td:first-child { justify-content: flex-start; }
    .license-admin .admin-table td:first-child::before { display: none; }
    .license-admin .admin-table td:last-child { border-bottom: 0; }
    .license-admin .admin-table td > * { max-width: 72%; }
    .license-admin .admin-table td:first-child > *, .license-admin .admin-table-action .btn { max-width: none; }
    .license-admin .admin-table-action .btn { width: 100%; }
    .license-admin .admin-table td[colspan] { display: block; border: 0; text-align: center; }
    .license-admin .admin-table td[colspan]::before { display: none; }
    .license-admin .admin-table td[colspan] > * { max-width: none; }
    .license-admin .admin-pagination { border: 1px solid #e4e8f0; border-radius: 14px; background: #fff; }
    .license-detail-header { align-items: stretch; flex-direction: column; }
    .license-key-box { min-width: 0; }
    .license-detail-stats { grid-template-columns: 1fr 1fr; }
    .license-detail-stats article { padding: .85rem; }
    .license-detail-stats strong { font-size: .85rem; }
    .license-section-head { align-items: flex-start; }
    .license-section-head > form .btn { width: 100%; }
    .license-activations .license-section-head { flex-direction: column; }
    .license-activations .license-section-head > form { width: 100%; }
    .license-detail .license-detail-table thead { display: none; }
    .license-detail .license-detail-table, .license-detail .license-detail-table tbody, .license-detail .license-detail-table tr, .license-detail .license-detail-table td { display: block; width: 100%; }
    .license-detail .license-detail-table tr { padding: .25rem 1rem; border-bottom: 1px solid #edf0f5; }
    .license-detail .license-detail-table td { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem 0; border: 0; text-align: right; }
    .license-detail .license-detail-table td::before { content: attr(data-label); color: #8b94a7; font-size: .63rem; font-weight: 800; letter-spacing: .05em; text-align: left; text-transform: uppercase; }
    .license-detail .license-detail-table td[colspan] { display: block; }
    .license-detail .license-detail-table td[colspan]::before { display: none; }
    .license-detail .license-detail-table td > * { max-width: 68%; }
    .license-detail .license-detail-table td[colspan] > * { max-width: none; }
    .license-url { max-width: 190px; }
    .admin-record-header { align-items: stretch; flex-direction: column; }
    .admin-record-actions { justify-content: stretch; }
    .admin-record-actions .btn, .admin-record-actions form { flex: 1; }
    .admin-record-actions form .btn { width: 100%; }
    .admin-record-stats article { padding: .8rem; }
    .admin-member-heading { align-items: flex-start; }
    .admin-member-avatar { width: 44px; height: 44px; flex-basis: 44px; }
    .admin-profile-grid { grid-template-columns: 1fr; }
    .admin-profile-grid .is-wide { grid-column: auto; }
    .admin-profile-grid > div { border-bottom: 1px solid #edf0f5 !important; }
    .admin-profile-grid > div:last-child { border-bottom: 0 !important; }
    .admin-form-card-head { align-items: flex-start; flex-wrap: wrap; }
    .admin-form-card-head .btn { width: 100%; }
    .admin-form-body { padding: .9rem; }
    .admin-form-actions { position: sticky; z-index: 20; bottom: 0; margin-inline: -.75rem; padding: .75rem; border-top: 1px solid #e4e8f0; background: rgba(247, 248, 251, .95); backdrop-filter: blur(10px); }
    .admin-form-actions .btn { flex: 1; min-width: 0; }
    .home-hero { margin-inline: -.25rem; padding: 2rem 1.25rem; border-radius: 18px; }
    .hero-title { font-size: 2.35rem; }
    .hero-panel { padding: 1.35rem; }
    .hero-trust-badge { right: .65rem; bottom: .65rem; font-size: .68rem; }
    .hero-cta, .hero-secondary { width: 100%; }
    .product-media { height: 210px; }
    .footer-main { padding-block: 2.25rem; }
    .footer-bottom { flex-direction: column; }
    .support-header,
    .support-ticket-head { align-items: flex-start; flex-direction: column; }
    .support-header .btn { width: 100%; }
    .ticket-bubble header { flex-direction: column; gap: .15rem; }
    .ticket-search,
    .ticket-filter { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .item-card,
    .product-media img { transition: none; }
}

section#detail-produk {
    background: white;
    padding: 1.5rem;
    border: 1px solid #dfe4ef;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(31, 42, 68, .09);
}