/*
 * InstaPaket light-theme cards - v145
 * Isolated from the legacy homepage cascade so package, account and expertise
 * cards share one intentional light surface, contrast and navigation system.
 */

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page {
    --ip-ldc-surface-1: #ffffff;
    --ip-ldc-surface-2: #f8fbff;
    --ip-ldc-surface-3: #eef6ff;
    --ip-ldc-text: #0f172a;
    --ip-ldc-muted: #52677a;
    --ip-ldc-muted-strong: #334155;
    --ip-ldc-border: #d7eafe;
    --ip-ldc-border-accent: rgba(201, 0, 82, .38);
    --ip-ldc-accent: #c90052;
    --ip-ldc-accent-strong: #9f0041;
    --ip-ldc-info: #075985;
    --ip-ldc-shadow:
        0 14px 36px rgba(15, 23, 42, .09),
        0 3px 10px rgba(15, 23, 42, .04),
        inset 0 1px 0 rgba(255, 255, 255, .82);
    --ip-ldc-shadow-hover:
        0 20px 48px rgba(15, 23, 42, .13),
        0 5px 14px rgba(15, 23, 42, .06),
        inset 0 1px 0 rgba(255, 255, 255, .92);
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page :is(
    .ip-package-card,
    .ip-account-card,
    .ip-expertise-card
) {
    border: 1px solid var(--ip-ldc-border) !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 12% -8%, rgba(201, 0, 82, .055), transparent 34%),
        radial-gradient(circle at 108% 108%, rgba(2, 132, 199, .045), transparent 42%),
        linear-gradient(145deg, var(--ip-ldc-surface-1) 0%, var(--ip-ldc-surface-2) 62%, var(--ip-ldc-surface-3) 100%) !important;
    box-shadow: var(--ip-ldc-shadow) !important;
    color: var(--ip-ldc-text) !important;
    isolation: isolate;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page :is(
    .ip-package-card.is-featured,
    .ip-account-card.is-featured,
    .ip-expertise-card.is-active
) {
    border-color: var(--ip-ldc-border-accent) !important;
    box-shadow:
        0 19px 44px rgba(15, 23, 42, .11),
        0 0 0 1px rgba(201, 0, 82, .08),
        inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page :is(
    .ip-package-card h3,
    .ip-account-card h3,
    .ip-account-amount strong,
    .ip-expertise-card h3
) {
    color: var(--ip-ldc-text) !important;
    text-wrap: balance;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page :is(
    .ip-package-primary span,
    .ip-package-features li,
    .ip-account-tags span,
    .ip-account-platform,
    .ip-account-amount small,
    .ip-account-rating small,
    .ip-expertise-card p
) {
    color: var(--ip-ldc-muted) !important;
}

@media (hover: hover) and (pointer: fine) {
    html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page :is(
        .ip-package-card:hover,
        .ip-account-card:hover,
        .ip-expertise-card:hover
    ) {
        border-color: rgba(201, 0, 82, .42) !important;
        box-shadow: var(--ip-ldc-shadow-hover) !important;
    }
}

/* Package cards: remove the empty legacy separator space and restore rhythm. */
html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-package-card {
    padding: 26px 24px 22px !important;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-package-card-head {
    min-height: 132px !important;
    padding-bottom: 28px !important;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-package-card-head::before {
    content: "" !important;
    position: absolute !important;
    right: auto !important;
    bottom: 7px !important;
    left: 50% !important;
    z-index: 4 !important;
    display: block !important;
    width: 58px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, rgba(239, 0, 98, .28), #ef0062 50%, rgba(56, 189, 248, .34)) !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: translateX(-50%) !important;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-package-primary {
    min-height: 90px !important;
    padding: 10px 8px 16px !important;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-package-primary strong,
html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-package-price {
    color: var(--ip-ldc-accent) !important;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-package-features {
    gap: 8px !important;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-package-features li {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-package-card-footer {
    border-top-color: var(--ip-ldc-border) !important;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-package-buy:focus-visible {
    outline: 3px solid #ffffff !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 6px #d90059 !important;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-account-card:focus-visible {
    outline: 3px solid var(--ip-ldc-accent) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 7px rgba(201, 0, 82, .14), var(--ip-ldc-shadow-hover) !important;
}

/* Account cards: keep every inner panel attached to the same light surface. */
html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-account-card {
    overflow: hidden !important;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-account-card .ip-account-visual {
    border-bottom: 1px solid var(--ip-ldc-border) !important;
    background-color: #f6fbff !important;
    background-image: url("/upload/ip-home/account-market/account-market-standard-light-20260718.webp") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-account-card.is-featured .ip-account-visual {
    background-image: url("/upload/ip-home/account-market/account-market-featured-light-20260718.webp") !important;
}

html:is([data-theme="dark"], [data-ip-theme="dark"]) body.ip-home-page .ip-account-card .ip-account-visual {
    border-bottom: 1px solid rgba(151, 169, 196, .22) !important;
    background-color: #080e1a !important;
    background-image: url("/upload/ip-home/account-market/account-market-standard-dark-20260718.webp") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

html:is([data-theme="dark"], [data-ip-theme="dark"]) body.ip-home-page .ip-account-card.is-featured .ip-account-visual {
    background-image: url("/upload/ip-home/account-market/account-market-featured-dark-20260718.webp") !important;
}

body.ip-home-page .ip-account-card .ip-account-visual::before,
body.ip-home-page .ip-account-card .ip-account-visual::after {
    content: none !important;
    display: none !important;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-account-card .ip-account-content {
    border-top-color: var(--ip-ldc-border) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
    color: var(--ip-ldc-text) !important;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-account-card .ip-account-footer {
    border-top-color: var(--ip-ldc-border) !important;
    background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%) !important;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-account-card :is(
    .ip-account-rating
) {
    color: var(--ip-ldc-text) !important;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-account-card .ip-account-price {
    border-right-color: var(--ip-ldc-border) !important;
    color: var(--ip-ldc-accent) !important;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-account-card .ip-account-visual > strong {
    color: var(--ip-ldc-accent) !important;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-account-card .ip-account-visual > small {
    border-color: var(--ip-ldc-border) !important;
    background: rgba(255, 255, 255, .86) !important;
    color: var(--ip-ldc-text) !important;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-account-card .ip-account-tags span {
    color: var(--ip-ldc-muted-strong) !important;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-account-card .ip-account-tags i {
    color: var(--ip-ldc-accent) !important;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-account-card .ip-account-platform {
    color: var(--ip-ldc-info) !important;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-account-card .ip-account-content h3,
html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-account-card .ip-account-amount strong {
    color: var(--ip-ldc-text) !important;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-account-card .ip-account-amount small,
html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-account-card .ip-account-rating small {
    color: var(--ip-ldc-muted) !important;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-account-card .ip-account-action {
    border: 1px solid rgba(201, 0, 82, .18) !important;
    background: rgba(201, 0, 82, .08) !important;
    color: var(--ip-ldc-accent) !important;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-account-card:hover .ip-account-action {
    background: var(--ip-ldc-accent) !important;
    color: #ffffff !important;
}

/* Expertise cards: bright body, branded header and controls that never cover content. */
html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-expertise-card-header::after {
    background: #ffffff !important;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-expertise-card p {
    color: var(--ip-ldc-muted) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.65 !important;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-expertise-card a {
    color: var(--ip-ldc-accent-strong) !important;
    font-size: 12.5px !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-expertise-card a:hover,
html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-expertise-card a:focus-visible {
    color: var(--ip-ldc-accent) !important;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-expertise-card a:focus-visible {
    border-radius: 5px;
    outline: 3px solid #ff4f8e;
    outline-offset: 4px;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-expertise-control {
    border-color: #cbd5e1 !important;
    background: linear-gradient(145deg, #ffffff, #eef6ff) !important;
    box-shadow:
        0 8px 20px rgba(15, 23, 42, .09),
        inset 0 1px 0 rgba(255, 255, 255, .90) !important;
    color: var(--ip-ldc-text) !important;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-expertise-counter {
    border-color: var(--ip-ldc-border) !important;
    background: rgba(255, 255, 255, .86) !important;
    color: var(--ip-ldc-muted-strong) !important;
    box-shadow: 0 5px 14px rgba(15, 23, 42, .06) !important;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-expertise-control:focus-visible {
    outline: 3px solid #d90059 !important;
    outline-offset: 3px !important;
}

html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-expertise-control:disabled {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (min-width: 769px) {
    html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-expertise-stage {
        padding-right: 56px !important;
        padding-left: 56px !important;
        box-sizing: border-box !important;
    }

    html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-expertise-navigation {
        right: 0 !important;
        left: 0 !important;
    }

    html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-expertise-control {
        width: 46px !important;
        height: 46px !important;
    }

    html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-expertise-prev {
        left: 0 !important;
    }

    html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-expertise-next {
        right: 0 !important;
    }
}

@media (max-width: 768px) {
    html body.ip-home-page .ip-package-card.ip-package-card {
        flex: 0 0 min(316px, calc(100vw - 40px)) !important;
        width: min(316px, calc(100vw - 40px)) !important;
        min-width: min(316px, calc(100vw - 40px)) !important;
        max-width: 316px !important;
    }

    html body.ip-home-page .ip-account-card.ip-account-card {
        flex: 0 0 min(286px, calc(100vw - 40px)) !important;
        width: min(286px, calc(100vw - 40px)) !important;
        min-width: min(286px, calc(100vw - 40px)) !important;
        max-width: 286px !important;
    }

    html body.ip-home-page .ip-expertise-card.ip-expertise-card {
        flex: 0 0 min(284px, calc(100vw - 40px)) !important;
        width: min(284px, calc(100vw - 40px)) !important;
        min-width: min(284px, calc(100vw - 40px)) !important;
        max-width: 284px !important;
    }

    html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-package-card {
        padding: 24px 20px 21px !important;
        border-radius: 18px !important;
    }

    html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-package-card-head {
        min-height: 126px !important;
        padding-bottom: 25px !important;
    }

    html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-package-primary {
        min-height: 86px !important;
        padding: 8px 6px 14px !important;
    }

    html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-account-card {
        border-radius: 18px !important;
    }

    html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-account-card .ip-account-tags span {
        font-size: 11px !important;
        line-height: 1.25 !important;
    }

    html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-account-card .ip-account-platform,
    html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-account-card .ip-account-amount small {
        font-size: 12px !important;
    }

    html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-account-card .ip-account-rating small {
        font-size: 10.5px !important;
    }

    html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-expertise-stage {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-expertise-card {
        min-height: 326px !important;
        border-radius: 18px !important;
    }

    html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-expertise-card-body {
        padding: 16px 20px 20px !important;
    }

    html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-expertise-card h3 {
        font-size: 16px !important;
    }

    html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-expertise-card p {
        font-size: 12.5px !important;
        line-height: 1.6 !important;
    }

    html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-expertise-card a {
        font-size: 11.5px !important;
    }

    html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-expertise-viewport {
        padding-bottom: 18px !important;
    }

    html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-expertise-navigation {
        position: relative !important;
        inset: auto !important;
        z-index: 26 !important;
        display: grid !important;
        grid-template-columns: 44px 68px 44px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        width: max-content !important;
        max-width: 100% !important;
        min-height: 44px !important;
        margin: 2px auto 0 !important;
        pointer-events: auto !important;
    }

    html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-expertise-control {
        position: relative !important;
        inset: auto !important;
        width: 44px !important;
        height: 44px !important;
        transform: none !important;
    }

    html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-expertise-control:hover,
    html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-expertise-control:focus-visible {
        transform: translateY(-1px) !important;
    }

    html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-expertise-control:disabled {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-expertise-counter {
        position: static !important;
        min-width: 68px !important;
        transform: none !important;
    }

    html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page .ip-expertise-progress {
        display: none !important;
    }

    html body.ip-home-page .ip-package-grid.ip-package-grid,
    html body.ip-home-page .ip-account-grid.ip-account-grid {
        padding-bottom: 18px !important;
    }

    html body.ip-home-page .ip-package-mobile-controls.ip-package-mobile-controls,
    html body.ip-home-page .ip-account-mobile-controls.ip-account-mobile-controls {
        position: relative !important;
        inset: auto !important;
        z-index: 26 !important;
        display: grid !important;
        grid-template-columns: 44px 68px 44px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        width: max-content !important;
        max-width: 100% !important;
        min-height: 44px !important;
        margin: 2px auto 0 !important;
        padding: 0 !important;
        pointer-events: auto !important;
    }

    html body.ip-home-page .ip-package-mobile-controls.ip-package-mobile-controls[hidden],
    html body.ip-home-page .ip-account-mobile-controls.ip-account-mobile-controls[hidden] {
        display: none !important;
    }

    html body.ip-home-page .ip-package-mobile-nav.ip-package-mobile-nav,
    html body.ip-home-page .ip-account-mobile-nav.ip-account-mobile-nav {
        position: relative !important;
        inset: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        transform: none !important;
    }

    html body.ip-home-page .ip-package-mobile-nav.ip-package-mobile-nav:not(:disabled):hover,
    html body.ip-home-page .ip-package-mobile-nav.ip-package-mobile-nav:not(:disabled):focus-visible,
    html body.ip-home-page .ip-account-mobile-nav.ip-account-mobile-nav:not(:disabled):hover,
    html body.ip-home-page .ip-account-mobile-nav.ip-account-mobile-nav:not(:disabled):focus-visible {
        transform: translateY(-1px) !important;
    }

    html body.ip-home-page .ip-package-mobile-nav.ip-package-mobile-nav:not(:disabled):active,
    html body.ip-home-page .ip-account-mobile-nav.ip-account-mobile-nav:not(:disabled):active {
        transform: scale(.96) !important;
    }

    html body.ip-home-page .ip-package-mobile-nav.ip-package-mobile-nav:disabled,
    html body.ip-home-page .ip-account-mobile-nav.ip-account-mobile-nav:disabled {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    html body.ip-home-page .ip-package-mobile-status.ip-package-mobile-status,
    html body.ip-home-page .ip-account-mobile-status.ip-account-mobile-status {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 68px !important;
        height: 32px !important;
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html:is([data-theme="light"], [data-ip-theme="light"]) body.ip-home-page :is(.ip-package-card, .ip-account-card, .ip-expertise-card, .ip-expertise-control) {
        transition: none !important;
    }
}