:root {
    --sp-accent: #4f46e5;
    --sp-accent-soft: color-mix(in srgb, var(--sp-accent) 12%, transparent);
    --sp-border: rgba(100, 116, 139, .22);
    --sp-muted: #64748b;
    --sp-radius: 8px;
}

body {
    background: #f6f7f9;
    color: #18202f;
    letter-spacing: 0;
}

[data-bs-theme="dark"] body {
    background: #111318;
    color: #e8ecf3;
}

.app-main {
    min-height: calc(100vh - 68px);
}

.app-nav {
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid var(--sp-border);
    backdrop-filter: blur(14px);
}

[data-bs-theme="dark"] .app-nav {
    background: rgba(18, 20, 27, .92);
}

.brand-mark {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border-radius: var(--sp-radius);
    background: var(--sp-accent);
    color: #fff;
    font-weight: 700;
}

.navbar-brand {
    font-weight: 700;
}

.btn,
.form-control,
.form-select,
.card,
.alert,
.modal-content,
.input-group-text {
    border-radius: var(--sp-radius);
}

.btn,
.nav-link,
.profile-tile,
.home-info-card,
.home-audience,
.home-plan,
.home-faq-list details,
.quick-actions a,
.quick-actions button,
.social-grid a {
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.nav-link:hover {
    color: var(--sp-accent);
}

.btn-primary {
    --bs-btn-bg: var(--sp-accent);
    --bs-btn-border-color: var(--sp-accent);
    --bs-btn-hover-bg: color-mix(in srgb, var(--sp-accent) 88%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--sp-accent) 88%, #000);
}

.btn-outline-primary {
    --bs-btn-color: var(--sp-accent);
    --bs-btn-border-color: var(--sp-accent);
    --bs-btn-hover-bg: var(--sp-accent);
    --bs-btn-hover-border-color: var(--sp-accent);
}

.btn-icon {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--sp-border);
}

.btn svg,
.metric-pill svg,
.quick-actions svg,
.social-grid svg,
.detail-list svg {
    width: 18px;
    height: 18px;
}

.surface-band {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--sp-accent) 13%, transparent), transparent 36%),
        linear-gradient(180deg, #fff, #f6f7f9);
    border-bottom: 1px solid var(--sp-border);
}

[data-bs-theme="dark"] .surface-band {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--sp-accent) 18%, transparent), transparent 42%),
        linear-gradient(180deg, #161923, #111318);
}

.eyebrow {
    color: var(--sp-accent);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.username-check {
    max-width: 560px;
}

.category-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.category-pills span,
.metric-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .65rem;
    border: 1px solid var(--sp-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, .74);
    color: #334155;
    font-size: .88rem;
}

[data-bs-theme="dark"] .category-pills span,
[data-bs-theme="dark"] .metric-pill {
    background: rgba(255, 255, 255, .06);
    color: #d7dde8;
}

.profile-preview {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .12);
}

[data-bs-theme="dark"] .profile-preview,
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .public-card,
[data-bs-theme="dark"] .profile-section {
    background: #171b24;
}

.preview-cover {
    height: 150px;
    background:
        linear-gradient(135deg, var(--sp-accent), #0ea5e9 45%, #f59e0b);
}

.preview-body {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
}

.preview-actions {
    position: absolute;
    top: .8rem;
    right: .8rem;
    display: flex;
    gap: .4rem;
}

.avatar,
.public-avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--sp-accent);
    color: #fff;
    font-weight: 800;
}

.avatar-lg {
    width: 76px;
    height: 76px;
    font-size: 1.4rem;
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.section-heading h2 {
    margin: 0;
    font-size: 1.35rem;
}

.section-heading p {
    margin: 0;
    color: var(--sp-muted);
}

.plan-card {
    border: 1px solid var(--sp-border);
}

.plan-price {
    font-size: 1.6rem;
    font-weight: 800;
    margin: .7rem 0;
}

.plan-price strong {
    display: block;
    color: inherit;
    font: inherit;
}

.plan-price--offer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .12rem;
}

.plan-original-price,
.compare-price em {
    position: relative;
    display: inline-block;
    width: max-content;
    color: var(--sp-soft, #a7b0bf);
    font-size: .82rem;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    text-decoration: line-through;
    text-decoration-color: #ef4444;
    text-decoration-thickness: 2px;
}

.plan-original-price::after,
.compare-price em::after {
    content: "";
    position: absolute;
    left: -4%;
    right: -4%;
    top: 50%;
    height: 2px;
    border-radius: 999px;
    background: #ef4444;
    transform: rotate(-8deg);
}

.compare-price {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .18rem;
}

.compare-price strong {
    display: block;
}

.profile-tile {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    color: inherit;
    text-decoration: none;
    background: #fff;
}

.profile-tile:hover,
.quick-actions a:hover,
.quick-actions button:hover,
.social-grid a:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--sp-accent) 42%, var(--sp-border));
    box-shadow: 0 14px 30px rgba(15, 23, 42, .08);
}

.profile-tile span {
    display: block;
    color: var(--sp-muted);
}

.profile-tile img.avatar {
    object-fit: cover;
}

.home-hero {
    padding: 5rem 0;
}

.home-hero h1 {
    margin: .35rem 0 1rem;
    font-size: 4.75rem;
    line-height: .95;
    font-weight: 850;
}

.home-trust-row,
.hero-actions,
.home-step-list {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1rem;
}

.home-trust-row span,
.hero-actions span,
.home-step-list span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .7rem;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    background: rgba(255, 255, 255, .72);
    color: #334155;
    font-size: .9rem;
}

[data-bs-theme="dark"] .home-trust-row span,
[data-bs-theme="dark"] .hero-actions span,
[data-bs-theme="dark"] .home-step-list span {
    background: rgba(255, 255, 255, .06);
    color: #d7dde8;
}

.home-trust-row svg,
.hero-actions svg,
.home-step-list svg,
.home-info-card svg,
.home-audience svg,
.home-workflow-panel svg,
.home-plan svg {
    width: 18px;
    height: 18px;
    color: var(--sp-accent);
}

.hero-showcase {
    display: grid;
    gap: 1rem;
}

.hero-phone {
    overflow: hidden;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .12);
    transition: transform .22s ease, box-shadow .22s ease;
}

.hero-showcase:hover .hero-phone {
    transform: translateY(-4px);
    box-shadow: 0 30px 70px rgba(15, 23, 42, .16);
}

[data-bs-theme="dark"] .hero-phone,
[data-bs-theme="dark"] .home-info-card,
[data-bs-theme="dark"] .home-audience,
[data-bs-theme="dark"] .home-stat,
[data-bs-theme="dark"] .home-workflow-panel,
[data-bs-theme="dark"] .home-plan,
[data-bs-theme="dark"] .home-faq-list details,
[data-bs-theme="dark"] .home-cta-inner {
    background: #171b24;
}

.hero-phone-body {
    padding: 1.25rem;
}

.hero-phone-body h2 {
    margin: .35rem 0;
    font-size: 1.45rem;
}

.hero-phone-body p {
    color: var(--sp-muted);
    margin-bottom: 0;
}

.hero-metrics,
.home-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.hero-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hero-metrics div,
.home-stat {
    padding: 1rem;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    background: #fff;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.hero-metrics div:hover,
.home-stat:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--sp-accent) 36%, var(--sp-border));
    box-shadow: 0 12px 26px rgba(15, 23, 42, .07);
}

.hero-metrics strong,
.home-stat strong {
    display: block;
    font-size: 1.6rem;
    line-height: 1.1;
}

.hero-metrics span,
.home-stat span {
    color: var(--sp-muted);
    font-size: .88rem;
}

.home-section {
    padding: 4rem 0;
}

.home-muted-band {
    border-block: 1px solid var(--sp-border);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--sp-accent) 8%, transparent), transparent 42%),
        #eef3f7;
}

[data-bs-theme="dark"] .home-muted-band {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--sp-accent) 14%, transparent), transparent 42%),
        #121720;
}

.home-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.home-info-card,
.home-audience,
.home-plan,
.home-faq-list details,
.home-cta-inner {
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
}

.home-info-card {
    padding: 1rem;
}

.home-info-card:hover,
.home-audience:hover,
.home-plan:hover,
.home-faq-list details:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--sp-accent) 45%, var(--sp-border));
    box-shadow: 0 18px 38px rgba(15, 23, 42, .09);
}

.home-info-card:hover svg,
.home-audience:hover svg,
.home-plan:hover svg {
    transform: scale(1.08);
}

.home-info-card h3,
.home-audience h3,
.home-plan h3 {
    margin: .7rem 0 .35rem;
    font-size: 1.05rem;
}

.home-info-card p,
.home-audience p {
    color: var(--sp-muted);
    margin-bottom: 0;
}

.home-audience-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.home-audience {
    display: flex;
    gap: .85rem;
    padding: 1rem;
}

.home-audience h3 {
    margin-top: 0;
}

.home-block-title {
    font-size: 2.7rem;
    font-weight: 800;
}

.home-workflow-panel {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: .75rem;
    padding: 1rem;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    background: #fff;
}

.home-workflow-panel div {
    min-height: 128px;
    display: grid;
    align-content: center;
    gap: .3rem;
    padding: 1rem;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.home-workflow-panel div:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--sp-accent) 42%, var(--sp-border));
    background: color-mix(in srgb, var(--sp-accent) 6%, transparent);
}

.home-workflow-panel span {
    color: var(--sp-muted);
    font-size: .88rem;
}

.home-plan {
    position: relative;
    height: 100%;
    padding: 1.1rem;
}

.home-plan.is-popular {
    border-color: color-mix(in srgb, var(--sp-accent) 72%, var(--sp-border));
}

.plan-badge {
    display: inline-flex;
    padding: .25rem .5rem;
    border-radius: var(--sp-radius);
    background: var(--sp-accent);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
}

.home-plan ul {
    display: grid;
    gap: .5rem;
    padding: 0;
    margin: 1rem 0;
    list-style: none;
}

.home-plan li {
    display: flex;
    gap: .45rem;
    color: var(--sp-muted);
}

.home-faq-list {
    display: grid;
    gap: .75rem;
}

.home-faq-list details {
    padding: 1rem;
}

.home-faq-list summary {
    cursor: pointer;
    font-weight: 700;
}

.home-faq-list p {
    margin: .65rem 0 0;
    color: var(--sp-muted);
}

.home-cta {
    padding: 0 0 4rem;
}

.home-cta-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem;
}

.home-cta-inner h2 {
    margin: .25rem 0;
}

.home-cta-inner p {
    margin: 0;
    color: var(--sp-muted);
}

.auth-card,
.card {
    border: 1px solid var(--sp-border);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
}

.auth-side {
    padding: 2rem;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--sp-accent) 18%, #fff), #eef6f3);
    border-right: 1px solid var(--sp-border);
}

[data-bs-theme="dark"] .auth-side {
    background: linear-gradient(135deg, color-mix(in srgb, var(--sp-accent) 24%, #171b24), #172126);
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0 1.25rem;
}

.metric-card {
    display: grid;
    gap: .4rem;
    min-height: 126px;
    padding: 1rem;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    background: #fff;
}

[data-bs-theme="dark"] .metric-card,
[data-bs-theme="dark"] .profile-tile {
    background: #171b24;
}

.metric-card svg {
    color: var(--sp-accent);
}

.metric-card span {
    color: var(--sp-muted);
    font-size: .86rem;
}

.metric-card strong {
    font-size: 1.55rem;
}

.profile-health {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .75rem;
}

.quick-actions a,
.quick-actions button {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 52px;
    padding: .75rem;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    background: transparent;
    color: inherit;
    text-decoration: none;
}

.quick-actions svg {
    color: var(--sp-accent);
}

.dynamic-fields:empty::before {
    content: "Select a category to load profile fields.";
    display: block;
    padding: .85rem;
    border: 1px dashed var(--sp-border);
    border-radius: var(--sp-radius);
    color: var(--sp-muted);
}

.repeat-row {
    padding: .55rem;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    background: rgba(100, 116, 139, .04);
}

.sticky-panel {
    position: sticky;
    top: 88px;
}

.theme-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}

.theme-grid label {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    cursor: pointer;
}

.theme-grid span {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--swatch);
}

.gallery-strip,
.public-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: .75rem;
}

.gallery-strip img,
.public-gallery img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--sp-radius);
}

.public-profile {
    padding-bottom: 3rem;
}

.profile-cover {
    min-height: 250px;
    background:
        linear-gradient(135deg, var(--sp-accent), #0891b2 48%, #f59e0b);
    background-size: cover;
    background-position: center;
}

.public-card {
    margin-top: -72px;
    padding: 1.25rem;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    background: #fff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .12);
}

.public-head {
    display: flex;
    align-items: end;
    gap: 1rem;
}

.public-avatar {
    width: 112px;
    height: 112px;
    border: 4px solid #fff;
    object-fit: cover;
    font-size: 2rem;
}

[data-bs-theme="dark"] .public-avatar {
    border-color: #171b24;
}

.public-title h1 {
    margin: .15rem 0;
    font-size: 2.55rem;
}

.public-title p,
.profile-bio {
    color: var(--sp-muted);
}

.profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1rem;
}

.profile-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .65rem;
    margin-top: 1rem;
}

.social-grid a {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .75rem;
    color: inherit;
    text-decoration: none;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
}

.profile-section {
    padding: 1rem;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    background: #fff;
    margin-bottom: 1rem;
}

.profile-section h2 {
    font-size: 1.1rem;
    margin-bottom: .8rem;
}

.detail-list,
.meta-list,
.item-stack {
    display: grid;
    gap: .65rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.detail-list li,
.meta-list div,
.item-stack article {
    padding: .75rem;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
}

.detail-list li {
    display: flex;
    gap: .6rem;
    align-items: center;
}

.meta-list span {
    display: block;
    color: var(--sp-muted);
    font-size: .82rem;
}

.meta-list strong {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
}

.skill-line {
    display: grid;
    gap: .4rem;
    margin-bottom: .75rem;
}

.progress {
    height: .65rem;
}

.progress-bar {
    background-color: var(--sp-accent);
}

.item-stack article h3 {
    font-size: 1rem;
    margin-bottom: .35rem;
}

.item-stack article p {
    color: var(--sp-muted);
    margin-bottom: .35rem;
}

.price,
.rating {
    color: var(--sp-accent);
    font-weight: 700;
}

.video-box {
    aspect-ratio: 16 / 9;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    overflow: hidden;
    display: grid;
    place-items: center;
}

.video-box iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.qr-card {
    max-width: 460px;
}

.qr-image {
    width: min(100%, 330px);
    height: auto;
}

.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.admin-tabs a {
    padding: .5rem .75rem;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    color: inherit;
    text-decoration: none;
    background: #fff;
}

[data-bs-theme="dark"] .admin-tabs a {
    background: #171b24;
}

.empty-state {
    max-width: 560px;
    margin: auto;
    padding: 3rem 1rem;
    text-align: center;
}

.empty-state svg {
    width: 52px;
    height: 52px;
    color: var(--sp-accent);
    margin-bottom: 1rem;
}

@media (max-width: 767.98px) {
    .dashboard-header,
    .section-heading,
    .public-head,
    .profile-health,
    .home-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .home-hero {
        padding: 3rem 0;
    }

    .home-card-grid,
    .home-audience-grid,
    .home-stat-grid,
    .hero-metrics,
    .home-workflow-panel {
        grid-template-columns: 1fr;
    }

    .home-workflow-panel > svg {
        transform: rotate(90deg);
        justify-self: center;
    }

    .home-section {
        padding: 3rem 0;
    }

    .sticky-panel {
        position: static;
    }

    .profile-cover {
        min-height: 190px;
    }

    .public-avatar {
        width: 92px;
        height: 92px;
    }

    .compact-repeat .col-md {
        flex: 0 0 100%;
    }
}

/* First viewport fit refinement */
.home-hero {
    min-height: min(760px, calc(100vh - 140px));
    padding-block: clamp(2.5rem, 5vw, 4.5rem) 2.25rem;
}

.react-studio-stage {
    min-height: 470px;
}

.react-studio-card {
    min-height: 400px;
}

.react-card-cover {
    min-height: 122px;
}

.react-studio-metrics div {
    min-height: 70px;
}

@media (max-width: 991.98px) {
    .home-hero {
        padding-block: 3rem 2rem;
    }

    .react-studio-stage {
        min-height: 430px;
    }
}

@media (max-width: 575.98px) {
    .home-hero {
        padding-block: 2.25rem 1.5rem;
    }

    .react-studio-stage {
        min-height: 460px;
    }

    .react-studio-card {
        min-height: 370px;
    }
}

/* Black premium redesign */
:root {
    --sp-ink: #f8fafc;
    --sp-soft: #a7b0bf;
    --sp-bg: #050607;
    --sp-panel: rgba(14, 17, 22, .86);
    --sp-panel-solid: #0e1116;
    --sp-panel-raised: #141922;
    --sp-line: rgba(255, 255, 255, .12);
    --sp-line-strong: rgba(255, 255, 255, .2);
    --sp-lime: #b8ff5c;
    --sp-cyan: #22d3ee;
    --sp-ember: #ff7a3d;
    --sp-shadow: 0 26px 70px rgba(0, 0, 0, .44);
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 18rem),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 96px),
        #050607;
    color: var(--sp-ink);
    text-rendering: geometricPrecision;
}

.text-secondary,
.section-heading p,
.home-info-card p,
.home-audience p,
.hero-phone-body p,
.hero-metrics span,
.home-stat span,
.public-title p,
.profile-bio,
.item-stack article p,
.home-plan li,
.home-cta-inner p {
    color: var(--sp-soft) !important;
}

.app-main {
    background:
        linear-gradient(180deg, rgba(184, 255, 92, .035), transparent 30rem),
        var(--sp-bg);
}

.app-nav {
    background: rgba(5, 6, 7, .84);
    border-bottom: 1px solid var(--sp-line);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .28);
}

[data-bs-theme="dark"] .app-nav {
    background: rgba(5, 6, 7, .84);
}

.navbar-brand,
.nav-link {
    color: rgba(255, 255, 255, .9);
}

.navbar-brand:hover,
.nav-link:hover,
.nav-link.active {
    color: #fff;
}

.brand-mark {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, var(--sp-lime), var(--sp-cyan));
    color: #061009;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 14px 30px rgba(184, 255, 92, .2);
}

.brand-mark::after {
    content: "";
    position: absolute;
    inset: -40% auto -40% -65%;
    width: 46%;
    transform: rotate(16deg);
    background: rgba(255, 255, 255, .42);
    animation: markSheen 4.8s ease-in-out infinite;
}

.navbar-toggler {
    border-color: var(--sp-line);
    background: rgba(255, 255, 255, .06);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(184, 255, 92, .16);
}

.btn,
.form-control,
.form-select,
.input-group-text,
.card,
.alert,
.modal-content {
    border-radius: 8px;
}

.btn {
    min-height: 42px;
    font-weight: 700;
}

.btn-primary {
    --bs-btn-bg: var(--sp-lime);
    --bs-btn-border-color: var(--sp-lime);
    --bs-btn-color: #071007;
    --bs-btn-hover-bg: #d2ff86;
    --bs-btn-hover-border-color: #d2ff86;
    --bs-btn-hover-color: #071007;
    --bs-btn-active-bg: #9feb42;
    --bs-btn-active-border-color: #9feb42;
    box-shadow: 0 16px 34px rgba(184, 255, 92, .2);
}

.btn-primary:hover {
    box-shadow: 0 20px 46px rgba(184, 255, 92, .3);
}

.btn-outline-primary {
    --bs-btn-color: var(--sp-lime);
    --bs-btn-border-color: rgba(184, 255, 92, .58);
    --bs-btn-hover-bg: var(--sp-lime);
    --bs-btn-hover-border-color: var(--sp-lime);
    --bs-btn-hover-color: #071007;
}

.btn-outline-secondary,
.btn-icon {
    --bs-btn-color: #e7eef9;
    --bs-btn-border-color: var(--sp-line-strong);
    --bs-btn-hover-bg: rgba(255, 255, 255, .1);
    --bs-btn-hover-border-color: rgba(255, 255, 255, .34);
    --bs-btn-hover-color: #fff;
    background: rgba(255, 255, 255, .04);
}

.form-control,
.form-select,
.input-group-text {
    background-color: rgba(255, 255, 255, .065);
    border-color: var(--sp-line);
    color: #267edd;
}

.form-control:focus,
.form-select:focus {
    background-color: rgba(255, 255, 255, .09);
    border-color: rgba(184, 255, 92, .7);
    color: #17deed;
    box-shadow: 0 0 0 .22rem rgba(184, 255, 92, .13);
}

.form-control::placeholder {
    color: rgba(226, 232, 240, .54);
}

.surface-band,
[data-bs-theme="dark"] .surface-band {
    background:
        linear-gradient(145deg, rgba(184, 255, 92, .11), transparent 32rem),
        linear-gradient(245deg, rgba(34, 211, 238, .12), transparent 34rem),
        #050607;
    border-bottom: 1px solid var(--sp-line);
}

.home-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: calc(100vh - 68px);
    padding: 5.5rem 0 4rem;
}

.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 84px 84px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .7), transparent 78%);
}

.home-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    z-index: -1;
    height: 36%;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .68));
}

.home-hero .eyebrow,
.section-heading .eyebrow,
.home-block-title + .text-secondary,
.eyebrow {
    letter-spacing: .08em;
}

.eyebrow {
    color: var(--sp-lime);
}

.home-hero h1 {
    max-width: 9ch;
    color: #fff;
    text-shadow: 0 18px 48px rgba(0, 0, 0, .42);
}

.home-hero .lead {
    max-width: 650px;
    font-size: 1.18rem;
}

.username-check {
    padding: .45rem;
    border: 1px solid var(--sp-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 18px 46px rgba(0, 0, 0, .22);
}

.username-check .input-group {
    min-width: 0;
}

.username-check .btn {
    min-width: 128px;
    white-space: nowrap;
}

.home-trust-row span,
.hero-actions span,
.home-step-list span,
.hero-action-dock span,
.category-pills span,
.metric-pill {
    border-color: var(--sp-line);
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .86);
    backdrop-filter: blur(18px);
}

.home-trust-row span:hover,
.home-step-list span:hover,
.hero-action-dock span:hover,
.category-pills span:hover {
    transform: translateY(-2px);
    border-color: rgba(184, 255, 92, .44);
    color: #fff;
}

.home-trust-row svg,
.hero-actions svg,
.home-step-list svg,
.home-info-card svg,
.home-audience svg,
.home-workflow-panel svg,
.home-plan svg {
    color: var(--sp-lime);
}

.hero-showcase-pro {
    position: relative;
}

.hero-device-stage {
    position: relative;
    min-height: 560px;
    display: grid;
    place-items: center;
    perspective: 1200px;
}

.hero-device-stage::before {
    content: "";
    position: absolute;
    inset: 8% 4% 12%;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02)),
        rgba(255, 255, 255, .035);
    box-shadow: var(--sp-shadow);
    transform: rotateX(7deg) rotateY(-7deg);
    animation: stageTilt 8s ease-in-out infinite;
}

.hero-reference-img {
    position: relative;
    z-index: 1;
    width: min(100%, 620px);
    filter: drop-shadow(0 34px 46px rgba(0, 0, 0, .55));
    animation: deviceFloat 6.4s ease-in-out infinite;
}

.hero-scanline {
    position: absolute;
    z-index: 2;
    left: 15%;
    right: 15%;
    top: 18%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(184, 255, 92, .85), transparent);
    box-shadow: 0 0 24px rgba(184, 255, 92, .58);
    animation: scanMove 4.6s ease-in-out infinite;
    pointer-events: none;
}

.hero-float-badge,
.hero-action-dock {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--sp-line);
    border-radius: 8px;
    background: rgba(9, 12, 16, .76);
    color: #fff;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
    backdrop-filter: blur(18px);
}

.hero-float-badge {
    right: 1rem;
    top: 5.5rem;
    gap: .65rem;
    padding: .75rem .85rem;
    animation: badgeFloat 5.2s ease-in-out infinite;
}

.hero-float-badge svg {
    width: 22px;
    height: 22px;
    color: var(--sp-lime);
}

.hero-float-badge strong,
.hero-float-badge span {
    display: block;
    line-height: 1.15;
}

.hero-float-badge span {
    color: var(--sp-soft);
    font-size: .78rem;
}

.hero-action-dock {
    left: 50%;
    bottom: 2rem;
    gap: .45rem;
    padding: .45rem;
    transform: translateX(-50%);
}

.hero-action-dock span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-width: max-content;
    padding: .52rem .68rem;
}

.hero-metrics div,
.home-stat,
.home-info-card,
.home-audience,
.home-plan,
.home-faq-list details,
.home-cta-inner,
.home-workflow-panel,
.profile-tile,
.card,
.auth-card,
.metric-card,
.profile-section,
.public-card,
.admin-tabs a,
.quick-actions a,
.quick-actions button,
.repeat-row {
    border-color: var(--sp-line);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028)),
        var(--sp-panel);
    color: var(--sp-ink);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .18);
    backdrop-filter: blur(18px);
}

[data-bs-theme="dark"] .hero-phone,
[data-bs-theme="dark"] .home-info-card,
[data-bs-theme="dark"] .home-audience,
[data-bs-theme="dark"] .home-stat,
[data-bs-theme="dark"] .home-workflow-panel,
[data-bs-theme="dark"] .home-plan,
[data-bs-theme="dark"] .home-faq-list details,
[data-bs-theme="dark"] .home-cta-inner,
[data-bs-theme="dark"] .metric-card,
[data-bs-theme="dark"] .profile-tile,
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .public-card,
[data-bs-theme="dark"] .profile-section {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028)),
        var(--sp-panel);
}

.hero-metrics div:hover,
.home-stat:hover,
.home-info-card:hover,
.home-audience:hover,
.home-plan:hover,
.home-faq-list details:hover,
.profile-tile:hover,
.quick-actions a:hover,
.quick-actions button:hover,
.social-grid a:hover,
.detail-list li:hover,
.meta-list div:hover,
.item-stack article:hover {
    transform: translateY(-4px);
    border-color: rgba(184, 255, 92, .5);
    box-shadow: 0 24px 58px rgba(0, 0, 0, .32), 0 0 0 1px rgba(184, 255, 92, .08);
}

.home-card-grid {
    gap: 1.1rem;
}

.home-info-card,
.home-audience,
.home-plan,
.profile-section,
.public-card {
    position: relative;
    overflow: hidden;
}

.home-info-card::before,
.home-audience::before,
.home-plan::before,
.profile-section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, var(--sp-lime), var(--sp-cyan), var(--sp-ember));
    opacity: 0;
    transition: opacity .22s ease;
}

.home-info-card:hover::before,
.home-audience:hover::before,
.home-plan:hover::before,
.profile-section:hover::before {
    opacity: 1;
}

.home-info-card h3,
.home-audience h3,
.home-plan h3,
.profile-section h2 {
    color: #fff;
}

.home-muted-band,
[data-bs-theme="dark"] .home-muted-band {
    border-block: 1px solid var(--sp-line);
    background:
        linear-gradient(110deg, rgba(255, 122, 61, .08), transparent 34rem),
        linear-gradient(250deg, rgba(34, 211, 238, .08), transparent 30rem),
        #07090c;
}

.section-heading {
    margin-bottom: 1.25rem;
}

.section-heading h2 {
    color: #fff;
    font-size: 2.15rem;
    font-weight: 800;
}

.home-block-title {
    color: #fff;
}

.home-workflow-panel div,
.detail-list li,
.meta-list div,
.item-stack article,
.video-box {
    border-color: var(--sp-line);
    background: rgba(255, 255, 255, .045);
}

.home-workflow-panel div:hover {
    border-color: rgba(184, 255, 92, .45);
    background: rgba(184, 255, 92, .08);
}

.plan-badge {
    background: rgba(184, 255, 92, .14);
    border: 1px solid rgba(184, 255, 92, .5);
    color: var(--sp-lime);
}

.home-plan.is-popular {
    border-color: rgba(184, 255, 92, .58);
    box-shadow: 0 22px 58px rgba(184, 255, 92, .08), 0 18px 44px rgba(0, 0, 0, .2);
}

.pricing-heading {
    align-items: flex-start;
}

.pricing-subsection {
    margin-top: 1.2rem;
}

.pricing-compare-panel {
    position: relative;
}

.pricing-compare-wrap {
    position: relative;
    overflow-x: auto;
    border: 1px solid var(--sp-line);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028)),
        var(--sp-panel);
    box-shadow: 0 22px 58px rgba(0, 0, 0, .24);
    scrollbar-color: rgba(184, 255, 92, .6) rgba(255, 255, 255, .08);
    scrollbar-width: thin;
}

.pricing-compare-wrap:focus-visible {
    outline: 3px solid rgba(184, 255, 92, .35);
    outline-offset: 4px;
}

.pricing-compare-wrap::-webkit-scrollbar {
    height: 10px;
}

.pricing-compare-wrap::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .08);
}

.pricing-compare-wrap::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, var(--sp-lime), var(--sp-cyan));
    border-radius: 999px;
}

.pricing-compare {
    width: 100%;
    min-width: 940px;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--sp-ink);
}

.pricing-compare th,
.pricing-compare td {
    padding: .95rem;
    border-bottom: 1px solid var(--sp-line);
    border-right: 1px solid var(--sp-line);
    vertical-align: middle;
}

.pricing-compare th:last-child,
.pricing-compare td:last-child {
    border-right: 0;
}

.pricing-compare tbody tr:last-child th,
.pricing-compare tbody tr:last-child td {
    border-bottom: 0;
}

.pricing-compare thead th {
    position: relative;
    min-width: 170px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025)),
        #0b0e13;
    text-align: left;
}

.pricing-compare thead th:first-child,
.pricing-compare tbody th {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 220px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)),
        #0b0e13;
}

.pricing-compare thead th:first-child {
    z-index: 3;
    color: var(--sp-lime);
    font-size: .82rem;
    text-transform: uppercase;
}

.pricing-compare thead th.is-popular {
    background:
        linear-gradient(145deg, rgba(184, 255, 92, .16), rgba(34, 211, 238, .06)),
        #0b0e13;
    box-shadow: inset 0 3px 0 var(--sp-lime);
}

.pricing-compare thead th:not(:first-child) {
    transition: transform .18s ease, background-color .18s ease;
}

.pricing-compare thead th:not(:first-child):hover {
    transform: translateY(-3px);
    background:
        linear-gradient(145deg, rgba(184, 255, 92, .16), rgba(34, 211, 238, .08)),
        #10151c;
}

.compare-plan-name,
.pricing-compare thead strong,
.pricing-compare thead span {
    display: block;
}

.compare-plan-name {
    color: #fff;
    font-size: 1rem;
    font-weight: 850;
}

.pricing-compare thead strong {
    margin-top: .55rem;
    color: #fff;
    font-size: 1.45rem;
}

.pricing-compare thead th > span:not(.compare-plan-name):not(.plan-badge) {
    margin-top: .2rem;
    color: var(--sp-soft);
    font-size: .84rem;
}

.pricing-compare thead .plan-badge {
    display: inline-flex;
    margin-top: .45rem;
}

.pricing-compare thead .btn {
    width: 100%;
    margin-top: .8rem;
}

.pricing-compare tbody th {
    color: #fff;
    font-weight: 750;
}

.pricing-compare tbody tr {
    transition: background-color .18s ease;
}

.pricing-compare tbody tr:hover {
    background: rgba(184, 255, 92, .055);
}

.pricing-compare td {
    color: var(--sp-soft);
    transition: background-color .18s ease, color .18s ease;
}

.pricing-compare tbody tr:hover td {
    color: #fff;
}

.pricing-compare td span {
    overflow-wrap: anywhere;
}

.pricing-compare td svg {
    width: 18px;
    height: 18px;
    margin-right: .35rem;
    vertical-align: -.22em;
}

.pricing-compare td.is-yes svg {
    color: var(--sp-lime);
}

.pricing-compare td.is-no {
    color: rgba(167, 176, 191, .58);
}

.pricing-compare td.is-no svg {
    color: rgba(167, 176, 191, .72);
}

.pricing-compare td.is-neutral {
    color: rgba(167, 176, 191, .58);
}

.pricing-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
}

.pricing-service {
    position: relative;
    min-height: 116px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .85rem;
    padding: .9rem;
    border: 1px solid var(--sp-line);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028)),
        var(--sp-panel);
    color: var(--sp-ink);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .18);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.pricing-service:hover,
.pricing-service:focus-within {
    transform: translateY(-4px);
    border-color: rgba(184, 255, 92, .5);
    box-shadow: 0 24px 58px rgba(0, 0, 0, .32), 0 0 0 1px rgba(184, 255, 92, .08);
}

.pricing-service::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, var(--sp-lime), var(--sp-cyan), var(--sp-ember));
    opacity: 0;
    transition: opacity .22s ease;
}

.pricing-service:hover::before,
.pricing-service:focus-within::before {
    opacity: 1;
}

.pricing-service-icon,
.pricing-service a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(184, 255, 92, .28);
    border-radius: 8px;
    background: rgba(184, 255, 92, .1);
    color: var(--sp-lime);
}

.pricing-service-icon svg,
.pricing-service a svg {
    width: 20px;
    height: 20px;
}

.pricing-service h3 {
    margin: 0 0 .25rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
}

.pricing-service strong {
    display: block;
    color: var(--sp-cyan);
    overflow-wrap: anywhere;
}

.pricing-service a {
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease, color .18s ease;
}

.pricing-service a:hover,
.pricing-service a:focus-visible {
    transform: rotate(90deg) scale(1.05);
    background: var(--sp-lime);
    color: #061009;
}

.home-cta {
    padding-top: 1rem;
}

.home-cta-inner {
    overflow: hidden;
    background:
        linear-gradient(120deg, rgba(184, 255, 92, .13), rgba(34, 211, 238, .07) 44%, rgba(255, 122, 61, .1)),
        #080a0d;
}

.profile-tile img.avatar,
.public-gallery img,
.gallery-strip img {
    border: 1px solid var(--sp-line);
}

.public-profile {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(184, 255, 92, .05), transparent 22rem),
        #050607;
    color: var(--sp-ink);
}

.profile-cover {
    position: relative;
    min-height: 310px;
    background:
        linear-gradient(135deg, rgba(184, 255, 92, .28), rgba(34, 211, 238, .18) 48%, rgba(255, 122, 61, .25)),
        #090c10;
}

.profile-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(5, 6, 7, .1), rgba(5, 6, 7, .82)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 92px);
}

.public-card {
    margin-top: -96px;
    padding: clamp(1rem, 3vw, 1.65rem);
    box-shadow: var(--sp-shadow);
}

.public-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--sp-lime), var(--sp-cyan), var(--sp-ember));
}

.public-avatar {
    border-color: rgba(255, 255, 255, .82);
    box-shadow: 0 18px 34px rgba(0, 0, 0, .34);
}

[data-bs-theme="dark"] .public-avatar {
    border-color: rgba(255, 255, 255, .82);
}

.public-avatar.initials,
.avatar {
    background: linear-gradient(135deg, var(--sp-lime), var(--sp-cyan));
    color: #071007;
}

.public-title h1 {
    color: #fff;
    font-weight: 850;
}

.profile-actions .btn {
    box-shadow: none;
}

.social-grid a {
    border-color: var(--sp-line);
    background: rgba(255, 255, 255, .045);
    color: #fff;
}

.social-grid a svg,
.detail-list svg,
.quick-actions svg,
.metric-card svg {
    color: var(--sp-lime);
}

.meta-list span,
.profile-tile span,
.metric-card span,
.home-workflow-panel span {
    color: var(--sp-soft);
}

.meta-list strong,
.detail-list a,
.meta-list a,
.item-stack a {
    color: #fff;
    overflow-wrap: anywhere;
}

.progress {
    background: rgba(255, 255, 255, .09);
}

.progress-bar {
    background: linear-gradient(90deg, var(--sp-lime), var(--sp-cyan));
}

.modal-content {
    border: 1px solid var(--sp-line);
    background: #0d1117;
    color: #fff;
}

.btn-close {
    filter: invert(1) grayscale(1);
}

.alert {
    border-color: var(--sp-line);
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.home-hero .eyebrow,
.home-hero h1,
.home-hero .lead,
.username-check,
.home-trust-row,
.hero-showcase-pro {
    animation: revealUp .72s ease both;
}

.home-hero h1 {
    animation-delay: .06s;
}

.home-hero .lead {
    animation-delay: .12s;
}

.username-check {
    animation-delay: .18s;
}

.home-trust-row {
    animation-delay: .24s;
}

.hero-showcase-pro {
    animation-delay: .18s;
}

@keyframes revealUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes deviceFloat {
    0%,
    100% {
        transform: translateY(0) rotateX(0deg) rotateY(0deg);
    }
    50% {
        transform: translateY(-12px) rotateX(1.2deg) rotateY(-1.4deg);
    }
}

@keyframes stageTilt {
    0%,
    100% {
        transform: rotateX(7deg) rotateY(-7deg) translateY(0);
    }
    50% {
        transform: rotateX(5deg) rotateY(-4deg) translateY(-8px);
    }
}

@keyframes badgeFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes scanMove {
    0%,
    100% {
        opacity: 0;
        transform: translateY(-44px);
    }
    15%,
    82% {
        opacity: 1;
    }
    50% {
        transform: translateY(318px);
    }
}

@keyframes markSheen {
    0%,
    48% {
        left: -65%;
    }
    70%,
    100% {
        left: 125%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

@media (max-width: 991.98px) {
    .home-hero {
        min-height: auto;
        padding: 4rem 0 3rem;
    }

    .home-hero h1 {
        max-width: 100%;
    }

    .hero-device-stage {
        min-height: 450px;
    }

    .hero-float-badge {
        right: .5rem;
        top: 3rem;
    }
}

@media (max-width: 767.98px) {
    body {
        background-size: auto;
    }

    .home-hero {
        padding: 3rem 0 2.5rem;
    }

    .username-check {
        padding: .55rem;
    }

    .hero-device-stage {
        min-height: 360px;
    }

    .hero-device-stage::before {
        inset: 7% 0 13%;
    }

    .hero-reference-img {
        width: min(112%, 560px);
    }

    .hero-float-badge {
        left: .75rem;
        right: auto;
        top: 1rem;
    }

    .hero-action-dock {
        bottom: .8rem;
        max-width: calc(100% - 1rem);
        overflow-x: auto;
    }

    .hero-scanline {
        left: 8%;
        right: 8%;
    }

    .profile-cover {
        min-height: 230px;
    }
}

/* Lightweight layout fallback for local/offline CDN failures. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

.container {
    width: 100%;
    max-width: 1140px;
    margin-right: auto;
    margin-left: auto;
    padding-right: .75rem;
    padding-left: .75rem;
}

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

.row > * {
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}

.g-3 {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

.g-4 {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}

.g-lg-5 {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}

.d-flex {
    display: flex;
}

.d-inline-flex {
    display: inline-flex;
}

.d-block {
    display: block;
}

.flex-column {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.align-items-center {
    align-items: center;
}

.align-items-end {
    align-items: flex-end;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-between {
    justify-content: space-between;
}

.gap-2 {
    gap: .5rem;
}

.w-100 {
    width: 100%;
}

.ms-auto {
    margin-left: auto;
}

.mt-1 {
    margin-top: .25rem;
}

.mt-3 {
    margin-top: 1rem;
}

.mt-4 {
    margin-top: 1.5rem;
}

.mb-0 {
    margin-bottom: 0;
}

.py-3 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.text-center {
    text-align: center;
}

.lead {
    font-size: 1.25rem;
    font-weight: 300;
}

.navbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.navbar > .container {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
}

.sticky-top {
    position: sticky;
    top: 0;
    z-index: 1020;
}

.navbar-brand {
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    margin-right: 1rem;
    text-decoration: none;
    white-space: nowrap;
}

.navbar-nav {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.nav-link {
    display: block;
    padding: .5rem;
    text-decoration: none;
}

.navbar-toggler {
    padding: .25rem .5rem;
    font-size: 1.25rem;
    line-height: 1;
}

.navbar-toggler-icon {
    display: inline-block;
    width: 1.35em;
    height: 1.35em;
    vertical-align: middle;
    background:
        linear-gradient(#f8fafc, #f8fafc) center 35% / 70% 2px no-repeat,
        linear-gradient(#f8fafc, #f8fafc) center 50% / 70% 2px no-repeat,
        linear-gradient(#f8fafc, #f8fafc) center 65% / 70% 2px no-repeat;
}

.collapse:not(.show) {
    display: none;
}

.navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
}

.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

.input-group > .form-control {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: .375rem .75rem;
    white-space: nowrap;
}

.form-control,
.form-select {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    line-height: 1.5;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .375rem .75rem;
    text-decoration: none;
    border: 1px solid transparent;
}

i[data-lucide] {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: currentColor;
    vertical-align: -.18em;
}

svg.lucide {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    stroke-width: 1.9;
    vertical-align: -.18em;
}

@media (min-width: 576px) {
    .flex-sm-row {
        flex-direction: row;
    }
}

@media (min-width: 768px) {
    .col-md-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }

    .navbar-expand-lg {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .navbar-expand-lg .navbar-toggler {
        display: none;
    }

    .navbar-expand-lg .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }

    .navbar-expand-lg .navbar-nav {
        flex-direction: row;
    }

    .align-items-lg-center {
        align-items: center;
    }

    .gap-lg-1 {
        gap: .25rem;
    }

    .g-lg-5 {
        --bs-gutter-x: 3rem;
        --bs-gutter-y: 3rem;
    }

    .col-lg-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-lg-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-lg-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

/* Billing, checkout, and footer polish */
.app-footer {
    border-top: 1px solid var(--sp-line, var(--sp-border));
    background:
        linear-gradient(120deg, rgba(184, 255, 92, .08), rgba(34, 211, 238, .05) 42%, rgba(255, 122, 61, .07)),
        #06080b;
    color: #f8fafc;
    padding: 2rem 0 1rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(150px, .7fr) minmax(210px, .9fr) minmax(160px, .7fr);
    gap: 1.25rem;
    align-items: start;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
}

.app-footer p {
    max-width: 440px;
    margin: .75rem 0 0;
    color: var(--sp-soft, #a7b0bf);
}

.footer-label {
    display: block;
    margin-bottom: .55rem;
    color: var(--sp-lime, #b8ff5c);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.footer-links {
    display: grid;
    gap: .35rem;
}

.footer-links a {
    color: #f8fafc;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.footer-links a:hover {
    color: var(--sp-lime, #b8ff5c);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.4rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: var(--sp-soft, #a7b0bf);
    font-size: .88rem;
}

.upgrade-page .dashboard-header {
    padding-top: 1.25rem;
}

.upgrade-status {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .75rem;
}

.upgrade-status > div,
.checkout-summary > div {
    min-width: 0;
    padding: .9rem;
    border: 1px solid var(--sp-line, var(--sp-border));
    border-radius: 8px;
    background: rgba(255, 255, 255, .055);
}

.upgrade-status span,
.checkout-summary span {
    display: block;
    color: var(--sp-soft, #a7b0bf);
    font-size: .78rem;
    text-transform: uppercase;
    font-weight: 700;
}

.upgrade-status strong,
.checkout-summary strong {
    display: block;
    margin-top: .25rem;
    color: #fff;
    overflow-wrap: anywhere;
}

.upgrade-plan h2 {
    margin: .65rem 0 0;
    font-size: 1.18rem;
    color: #fff;
}

.plan-mock-scene {
    display: grid;
    place-items: center;
    min-height: clamp(156px, 17vw, 188px);
    margin-bottom: .95rem;
    perspective: 920px;
    overflow: visible;
}

.plan-mock-card {
    --mock-accent: var(--sp-cyan, #22d3ee);
    position: relative;
    width: min(88%, 270px);
    aspect-ratio: 1.586 / 1;
    padding: .82rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background:
        linear-gradient(115deg, color-mix(in srgb, var(--mock-accent) 22%, transparent), transparent 42%),
        linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .035)),
        #121722;
    box-shadow: 0 22px 48px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .2);
    color: #fff;
    overflow: hidden;
    transform: rotateX(13deg) rotateY(-19deg) rotateZ(1deg);
    transform-style: preserve-3d;
    transition: transform .24s ease, box-shadow .24s ease;
}

.cart-plan-card:hover .plan-mock-card,
.cart-plan-card.is-selected .plan-mock-card {
    transform: rotateX(8deg) rotateY(-10deg) rotateZ(0deg) translateY(-3px);
    box-shadow: 0 28px 58px rgba(0, 0, 0, .44), 0 0 28px color-mix(in srgb, var(--mock-accent) 22%, transparent);
}

.plan-mock-card--free {
    --mock-accent: #94a3b8;
}

.plan-mock-card--smart {
    --mock-accent: var(--sp-lime, #b8ff5c);
}

.plan-mock-card--premium {
    --mock-accent: var(--sp-ember, #ff7a3d);
}

.mock-card-shine {
    position: absolute;
    inset: -42% auto auto -22%;
    width: 78%;
    height: 74%;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    filter: blur(18px);
    transform: rotate(-24deg);
}

.mock-card-top,
.mock-card-details,
.mock-card-handle,
.mock-card-free-note,
.mock-card-qr,
.mock-card-chip {
    position: relative;
    z-index: 1;
}

.mock-card-top {
    display: flex;
    justify-content: space-between;
    gap: .65rem;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .76);
}

.mock-card-top span,
.mock-card-top b,
.mock-card-details span,
.mock-card-handle {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mock-card-chip {
    display: block;
    width: 34px;
    height: 25px;
    margin-top: 1rem;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 7px;
    background:
        linear-gradient(90deg, transparent 48%, rgba(255, 255, 255, .28) 48% 52%, transparent 52%),
        linear-gradient(135deg, rgba(255, 255, 255, .24), color-mix(in srgb, var(--mock-accent) 36%, rgba(255, 255, 255, .08)));
}

.mock-card-details {
    position: absolute;
    left: .82rem;
    right: 4.6rem;
    bottom: 1.45rem;
    display: grid;
    gap: .12rem;
}

.mock-card-details strong {
    display: block;
    font-size: .88rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.mock-card-details span,
.mock-card-handle,
.mock-card-free-note {
    color: rgba(255, 255, 255, .72);
    font-size: .62rem;
    line-height: 1.25;
}

.mock-card-handle {
    position: absolute;
    left: .82rem;
    right: .82rem;
    bottom: .62rem;
}

.mock-card-qr,
.mock-card-free-note {
    position: absolute;
    right: .78rem;
    bottom: .78rem;
}

.mock-card-qr {
    width: 42px;
    height: 42px;
    border: 5px solid #fff;
    border-radius: 8px;
    background:
        linear-gradient(90deg, #111 50%, transparent 50%) 0 0 / 10px 10px,
        linear-gradient(#111 50%, transparent 50%) 0 0 / 10px 10px,
        #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .28);
}

.mock-card-free-note {
    max-width: 58px;
    text-align: right;
    font-weight: 800;
}

.upgrade-plan-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8rem;
}

.active-plan-badge,
.payment-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: .25rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 800;
}

.active-plan-badge,
.payment-status-paid {
    border: 1px solid rgba(184, 255, 92, .46);
    background: rgba(184, 255, 92, .12);
    color: var(--sp-lime, #b8ff5c);
}

.payment-status-pending {
    border: 1px solid rgba(34, 211, 238, .44);
    background: rgba(34, 211, 238, .12);
    color: var(--sp-cyan, #22d3ee);
}

.payment-status-failed,
.payment-status-refunded {
    border: 1px solid rgba(255, 122, 61, .48);
    background: rgba(255, 122, 61, .12);
    color: var(--sp-ember, #ff7a3d);
}

.payment-table {
    color: inherit;
}

.support-list {
    display: grid;
    gap: .65rem;
    margin-top: 1rem;
}

.support-list a {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 44px;
    padding: .65rem .75rem;
    border: 1px solid var(--sp-line, var(--sp-border));
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, .045);
}

.support-list a:hover {
    border-color: rgba(184, 255, 92, .48);
    transform: translateY(-2px);
}

.support-list svg {
    width: 18px;
    height: 18px;
    color: var(--sp-lime, #b8ff5c);
}

.checkout-page {
    min-height: calc(100vh - 220px);
    display: grid;
    place-items: center;
}

.checkout-panel {
    width: min(100%, 720px);
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 1px solid var(--sp-line, var(--sp-border));
    border-radius: 8px;
    background:
        linear-gradient(140deg, rgba(184, 255, 92, .1), rgba(34, 211, 238, .06) 48%, rgba(255, 122, 61, .08)),
        var(--sp-panel, #0e1116);
    box-shadow: var(--sp-shadow, 0 26px 70px rgba(0, 0, 0, .32));
    text-align: center;
}

.checkout-panel h1 {
    margin: .35rem 0 .6rem;
    color: #fff;
    font-size: 2.7rem;
    font-weight: 850;
}

.checkout-icon {
    width: 58px;
    height: 58px;
    display: inline-grid;
    place-items: center;
    margin-bottom: 1rem;
    border-radius: 8px;
    background: rgba(184, 255, 92, .14);
    color: var(--sp-lime, #b8ff5c);
}

.checkout-icon svg {
    width: 30px;
    height: 30px;
}

.checkout-icon-failed,
.checkout-icon-cancelled,
.checkout-icon-refunded {
    background: rgba(255, 122, 61, .14);
    color: var(--sp-ember, #ff7a3d);
}

.checkout-icon-pending {
    background: rgba(34, 211, 238, .14);
    color: var(--sp-cyan, #22d3ee);
}

.checkout-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin-top: 1.25rem;
    text-align: left;
}

.brand-logo {
    display: block;
    width: clamp(88px, 10vw, 132px);
    max-height: 36px;
    object-fit: contain;
}

.app-footer .brand-logo {
    width: clamp(96px, 12vw, 142px);
    max-height: 40px;
}

.upgrade-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.upgrade-section-head.compact {
    margin-bottom: .75rem;
}

.upgrade-section-head h2 {
    margin: .25rem 0 0;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 850;
}

.upgrade-section-head p {
    max-width: 560px;
    margin: 0;
    color: var(--sp-soft, #a7b0bf);
}

.cart-plan-card,
.upgrade-addon {
    cursor: pointer;
}

.cart-plan-card input,
.upgrade-addon input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cart-plan-card.is-selected,
.upgrade-addon.is-selected {
    border-color: rgba(184, 255, 92, .72);
    box-shadow: 0 18px 44px rgba(184, 255, 92, .12);
}

.cart-plan-card.is-active {
    opacity: .86;
}

.upgrade-addon-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.upgrade-addon {
    position: relative;
}

.upgrade-addon.is-owned {
    opacity: .82;
}

.owned-service-badge {
    display: inline-flex;
    width: max-content;
    margin-top: .35rem;
    padding: .18rem .45rem;
    border: 1px solid rgba(184, 255, 92, .46);
    border-radius: 999px;
    color: var(--sp-lime, #b8ff5c);
    font-size: .72rem;
    font-weight: 800;
}

.addon-plus {
    margin-left: auto;
}

.upgrade-cart-panel {
    position: sticky;
    top: 88px;
}

.upgrade-cart-items,
.upgrade-cart-totals,
.checkout-cart {
    display: grid;
    gap: .65rem;
    margin-top: 1rem;
}

.upgrade-cart-line,
.upgrade-cart-totals > div,
.checkout-cart-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    min-width: 0;
    padding: .7rem .75rem;
    border: 1px solid var(--sp-line, var(--sp-border));
    border-radius: 8px;
    background: rgba(255, 255, 255, .045);
}

.upgrade-cart-line span,
.upgrade-cart-totals span,
.checkout-cart-row span {
    color: var(--sp-soft, #a7b0bf);
}

.upgrade-cart-line strong,
.upgrade-cart-totals strong,
.checkout-cart-row strong {
    color: #fff;
    text-align: right;
    overflow-wrap: anywhere;
}

.upgrade-cart-totals .cart-total,
.checkout-cart-total {
    border-color: rgba(184, 255, 92, .55);
    background: rgba(184, 255, 92, .1);
}

.upgrade-cart-note {
    font-size: .86rem;
}

.checkout-cart {
    text-align: left;
}

.legal-header {
    max-width: 860px;
    margin-bottom: 1.5rem;
}

.legal-header h1 {
    margin: .35rem 0 .65rem;
    color: #fff;
    font-size: 3rem;
    font-weight: 850;
}

.legal-header p {
    max-width: 760px;
    color: var(--sp-soft, #a7b0bf);
}

.legal-updated {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    margin-top: .35rem;
    padding: .3rem .65rem;
    border: 1px solid var(--sp-line, var(--sp-border));
    border-radius: 999px;
    color: var(--sp-cyan, #22d3ee);
    font-size: .82rem;
    font-weight: 700;
}

.legal-grid {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.legal-nav {
    position: sticky;
    top: 90px;
    display: grid;
    gap: .45rem;
    padding: .75rem;
    border: 1px solid var(--sp-line, var(--sp-border));
    border-radius: 8px;
    background: rgba(255, 255, 255, .045);
}

.legal-nav a {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: .5rem .65rem;
    border-radius: 8px;
    color: var(--sp-soft, #a7b0bf);
    text-decoration: none;
}

.legal-nav a:hover,
.legal-nav a.active {
    background: rgba(34, 211, 238, .1);
    color: #fff;
}

.legal-content {
    display: grid;
    gap: .85rem;
}

.legal-content section {
    padding: 1rem;
    border: 1px solid var(--sp-line, var(--sp-border));
    border-radius: 8px;
    background: rgba(255, 255, 255, .045);
}

.legal-content h2 {
    margin: 0 0 .45rem;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
}

.legal-content p {
    margin: 0;
    color: var(--sp-soft, #a7b0bf);
}

@media (max-width: 767.98px) {
    .footer-grid,
    .footer-bottom,
    .upgrade-status,
    .checkout-summary,
    .legal-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        display: grid;
    }

    .legal-nav {
        position: static;
    }
}

@media (max-width: 991.98px) {
    .pricing-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .upgrade-addon-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .pricing-subsection {
        margin-top: 1rem;
    }

    .pricing-compare-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .pricing-compare {
        min-width: 0;
        display: block;
    }

    .pricing-compare thead,
    .pricing-compare tbody,
    .pricing-compare tr,
    .pricing-compare th,
    .pricing-compare td {
        display: block;
    }

    .pricing-compare thead tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
        margin-bottom: .85rem;
    }

    .pricing-compare thead th:first-child {
        display: none;
    }

    .pricing-compare thead th,
    .pricing-compare thead th:first-child,
    .pricing-compare tbody th {
        position: static;
        min-width: 0;
    }

    .pricing-compare thead th {
        display: flex;
        flex-direction: column;
        min-height: 210px;
        padding: .85rem;
        border: 1px solid var(--sp-line);
        border-radius: 8px;
        background:
            linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028)),
            var(--sp-panel);
    }

    .pricing-compare thead .btn {
        margin-top: auto;
    }

    .pricing-compare tbody {
        display: grid;
        gap: .75rem;
    }

    .pricing-compare tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .55rem;
        padding: .85rem;
        border: 1px solid var(--sp-line);
        border-radius: 8px;
        background:
            linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028)),
            var(--sp-panel);
    }

    .pricing-compare tbody th {
        grid-column: 1 / -1;
        padding: 0 0 .25rem;
        border: 0;
        background: transparent;
    }

    .pricing-compare td {
        min-height: 72px;
        padding: .65rem;
        border: 1px solid rgba(255, 255, 255, .09);
        border-radius: 8px;
        background: rgba(255, 255, 255, .035);
    }

    .pricing-compare td::before {
        content: attr(data-plan);
        display: block;
        margin-bottom: .25rem;
        color: var(--sp-cyan);
        font-size: .72rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    .pricing-service-grid {
        grid-template-columns: 1fr;
    }

    .upgrade-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .upgrade-addon-grid {
        grid-template-columns: 1fr;
    }

    .upgrade-cart-panel {
        position: static;
    }

    .brand-logo {
        width: min(58vw, 220px);
        max-height: 52px;
    }
}

@media (max-width: 430px) {
    .pricing-compare thead tr,
    .pricing-compare tbody tr {
        grid-template-columns: 1fr;
    }

    .pricing-compare thead th {
        min-height: 0;
    }

    .pricing-service {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .pricing-service a {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* Nav, theme, and upgrade cart refinements */
.app-nav .brand-logo {
    width: clamp(88px, 10vw, 132px);
    max-height: 36px;
}

.footer-brand .brand-logo {
    width: clamp(96px, 12vw, 142px);
    max-height: 40px;
}

.nav-tool-item {
    display: flex;
    align-items: center;
}

.app-nav .btn-icon {
    position: relative;
    width: 42px;
    height: 42px;
    overflow: visible;
}

.nav-cart-link {
    text-decoration: none;
}

.nav-cart-badge {
    position: absolute;
    top: -.34rem;
    right: -.34rem;
    min-width: 1.16rem;
    height: 1.16rem;
    display: inline-grid;
    place-items: center;
    padding: 0 .22rem;
    border: 2px solid var(--sp-bg);
    border-radius: 999px;
    background: var(--sp-ember);
    color: #fff;
    font-size: .66rem;
    font-weight: 900;
    line-height: 1;
    transition: opacity .18s ease, transform .18s ease;
}

.nav-cart-badge[data-count="0"] {
    display: none;
    opacity: 0;
    transform: scale(.64);
}

[data-dark-toggle] {
    color: var(--sp-ink);
}

.upgrade-page {
    padding-top: .25rem;
}

.upgrade-cart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.cart-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: .25rem .62rem;
    border: 1px solid rgba(34, 211, 238, .42);
    border-radius: 999px;
    background: rgba(34, 211, 238, .1);
    color: var(--sp-cyan);
    font-size: .78rem;
    font-weight: 900;
    white-space: nowrap;
}

.upgrade-addon-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
}

.upgrade-addon {
    min-height: 146px;
    grid-template-columns: 52px minmax(0, 1fr) 54px;
    gap: 1rem;
    padding: 1.15rem 1.1rem;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .028)),
        #15191f;
}

.upgrade-addon .pricing-service-icon,
.addon-plus {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(184, 255, 92, .44);
    border-radius: 8px;
    background: rgba(184, 255, 92, .11);
    color: var(--sp-lime);
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.upgrade-addon .pricing-service-icon svg,
.addon-plus svg {
    width: 23px;
    height: 23px;
}

.upgrade-addon h3 {
    max-width: 18ch;
    margin-bottom: .4rem;
    font-size: 1.02rem;
    line-height: 1.15;
}

.upgrade-addon strong {
    color: var(--sp-cyan);
    font-size: 1rem;
    line-height: 1.2;
}

.upgrade-addon.is-selected .addon-plus,
.cart-plan-card.is-selected .selected-card-mark {
    border-color: rgba(184, 255, 92, .68);
}

.upgrade-addon.is-selected .addon-plus {
    background: var(--sp-lime);
    color: #071007;
    transform: scale(1.04);
}

.selected-card-mark {
    display: none;
    align-items: center;
    gap: .35rem;
    width: max-content;
    min-height: 28px;
    padding: .18rem .5rem;
    border: 1px solid rgba(184, 255, 92, .5);
    border-radius: 999px;
    background: rgba(184, 255, 92, .1);
    color: var(--sp-lime);
    font-size: .72rem;
    font-weight: 900;
}

.selected-card-mark svg {
    width: 14px;
    height: 14px;
}

.cart-plan-card.is-selected .selected-card-mark {
    display: inline-flex;
    margin: -.25rem 0 .8rem;
}

.upgrade-cart-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 32px;
    align-items: center;
}

.upgrade-cart-line span b,
.upgrade-cart-line span small {
    display: block;
}

.upgrade-cart-line span b {
    color: var(--sp-ink);
    font-size: .94rem;
    overflow-wrap: anywhere;
}

.upgrade-cart-line span small {
    margin-top: .12rem;
    color: var(--sp-soft);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.cart-remove {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid var(--sp-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .055);
    color: var(--sp-soft);
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.cart-remove:hover,
.cart-remove:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(255, 122, 61, .5);
    background: rgba(255, 122, 61, .12);
    color: var(--sp-ember);
}

.cart-remove svg {
    width: 16px;
    height: 16px;
}

[data-bs-theme="light"] {
    --sp-ink: #142033;
    --sp-soft: #5d697d;
    --sp-bg: #f4f7fb;
    --sp-panel: #ffffff;
    --sp-panel-solid: #ffffff;
    --sp-panel-raised: #f8fafc;
    --sp-line: rgba(15, 23, 42, .13);
    --sp-line-strong: rgba(15, 23, 42, .24);
    --sp-lime: #2563eb;
    --sp-cyan: #0891b2;
    --sp-ember: #e85d04;
    --sp-shadow: 0 20px 56px rgba(15, 23, 42, .12);
}

[data-bs-theme="light"] body {
    background:
        linear-gradient(180deg, rgba(37, 99, 235, .06), transparent 22rem),
        repeating-linear-gradient(90deg, rgba(15, 23, 42, .035) 0 1px, transparent 1px 96px),
        var(--sp-bg);
    color: var(--sp-ink);
}

[data-bs-theme="light"] .app-main {
    background:
        linear-gradient(180deg, rgba(8, 145, 178, .07), transparent 26rem),
        var(--sp-bg);
}

[data-bs-theme="light"] .app-nav {
    background: rgba(255, 255, 255, .93);
    border-bottom-color: var(--sp-line);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
}

[data-bs-theme="light"] .navbar-brand,
[data-bs-theme="light"] .nav-link {
    color: #263246;
}

[data-bs-theme="light"] .navbar-brand:hover,
[data-bs-theme="light"] .nav-link:hover,
[data-bs-theme="light"] .nav-link.active {
    color: #0f172a;
}

[data-bs-theme="light"] .navbar-toggler-icon {
    background:
        linear-gradient(#172033, #172033) center 35% / 70% 2px no-repeat,
        linear-gradient(#172033, #172033) center 50% / 70% 2px no-repeat,
        linear-gradient(#172033, #172033) center 65% / 70% 2px no-repeat;
}

[data-bs-theme="light"] .btn-primary {
    --bs-btn-bg: var(--sp-lime);
    --bs-btn-border-color: var(--sp-lime);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #1d4ed8;
    --bs-btn-hover-border-color: #1d4ed8;
    --bs-btn-hover-color: #fff;
    box-shadow: 0 14px 30px rgba(37, 99, 235, .18);
}

[data-bs-theme="light"] .btn-outline-primary {
    --bs-btn-color: var(--sp-lime);
    --bs-btn-border-color: rgba(37, 99, 235, .55);
    --bs-btn-hover-bg: var(--sp-lime);
    --bs-btn-hover-border-color: var(--sp-lime);
    --bs-btn-hover-color: #fff;
}

[data-bs-theme="light"] .btn-outline-secondary,
[data-bs-theme="light"] .btn-icon {
    --bs-btn-color: #233046;
    --bs-btn-border-color: var(--sp-line-strong);
    --bs-btn-hover-bg: rgba(37, 99, 235, .08);
    --bs-btn-hover-border-color: rgba(37, 99, 235, .34);
    --bs-btn-hover-color: #0f172a;
    background: rgba(255, 255, 255, .86);
}

[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select,
[data-bs-theme="light"] .input-group-text {
    background-color: #0c69e3;
    border-color: var(--sp-line);
    color: #111827;
}

[data-bs-theme="light"] .form-control:focus,
[data-bs-theme="light"] .form-select:focus {
    background-color: #2d97f5;
    border-color: rgba(37, 99, 235, .65);
    color: #111827;
    box-shadow: 0 0 0 .22rem rgba(37, 99, 235, .12);
}

[data-bs-theme="light"] .surface-band,
[data-bs-theme="light"] .home-muted-band {
    background:
        linear-gradient(110deg, rgba(232, 93, 4, .07), transparent 34rem),
        linear-gradient(250deg, rgba(8, 145, 178, .08), transparent 30rem),
        #eef4fb;
    border-color: var(--sp-line);
}

[data-bs-theme="light"] .hero-metrics div,
[data-bs-theme="light"] .home-stat,
[data-bs-theme="light"] .home-info-card,
[data-bs-theme="light"] .home-audience,
[data-bs-theme="light"] .home-plan,
[data-bs-theme="light"] .home-faq-list details,
[data-bs-theme="light"] .home-cta-inner,
[data-bs-theme="light"] .home-workflow-panel,
[data-bs-theme="light"] .profile-tile,
[data-bs-theme="light"] .card,
[data-bs-theme="light"] .auth-card,
[data-bs-theme="light"] .metric-card,
[data-bs-theme="light"] .profile-section,
[data-bs-theme="light"] .public-card,
[data-bs-theme="light"] .admin-tabs a,
[data-bs-theme="light"] .quick-actions a,
[data-bs-theme="light"] .quick-actions button,
[data-bs-theme="light"] .repeat-row,
[data-bs-theme="light"] .pricing-service,
[data-bs-theme="light"] .pricing-compare-wrap {
    border-color: var(--sp-line);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(248, 250, 252, .72)),
        var(--sp-panel);
    color: var(--sp-ink);
    box-shadow: 0 16px 38px rgba(15, 23, 42, .08);
    backdrop-filter: none;
}

[data-bs-theme="light"] .home-info-card h3,
[data-bs-theme="light"] .home-audience h3,
[data-bs-theme="light"] .home-plan h3,
[data-bs-theme="light"] .profile-section h2,
[data-bs-theme="light"] .section-heading h2,
[data-bs-theme="light"] .home-block-title,
[data-bs-theme="light"] .pricing-service h3,
[data-bs-theme="light"] .upgrade-section-head h2,
[data-bs-theme="light"] .upgrade-plan h2,
[data-bs-theme="light"] .checkout-panel h1,
[data-bs-theme="light"] .legal-header h1,
[data-bs-theme="light"] .legal-content h2 {
    color: #111827;
}

[data-bs-theme="light"] .upgrade-status > div,
[data-bs-theme="light"] .checkout-summary > div,
[data-bs-theme="light"] .upgrade-cart-line,
[data-bs-theme="light"] .upgrade-cart-totals > div,
[data-bs-theme="light"] .checkout-cart-row,
[data-bs-theme="light"] .support-list a,
[data-bs-theme="light"] .home-workflow-panel div,
[data-bs-theme="light"] .detail-list li,
[data-bs-theme="light"] .meta-list div,
[data-bs-theme="light"] .item-stack article,
[data-bs-theme="light"] .video-box {
    border-color: var(--sp-line);
    background: rgba(255, 255, 255, .82);
}

[data-bs-theme="light"] .upgrade-status strong,
[data-bs-theme="light"] .checkout-summary strong,
[data-bs-theme="light"] .upgrade-cart-line strong,
[data-bs-theme="light"] .upgrade-cart-totals strong,
[data-bs-theme="light"] .checkout-cart-row strong,
[data-bs-theme="light"] .support-list a,
[data-bs-theme="light"] .legal-content p {
    color: #111827;
}

[data-bs-theme="light"] .upgrade-cart-line span b {
    color: #111827;
}

[data-bs-theme="light"] .cart-remove {
    background: #fff;
}

[data-bs-theme="light"] .pricing-compare thead th,
[data-bs-theme="light"] .pricing-compare tbody tr {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(248, 250, 252, .78)),
        #fff;
}

[data-bs-theme="light"] .app-footer {
    border-top-color: rgba(255, 255, 255, .12);
}

@media (max-width: 991.98px) {
    .upgrade-addon-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .app-nav .brand-logo {
        width: clamp(82px, 28vw, 120px);
        max-height: 34px;
    }

    .footer-brand .brand-logo {
        width: clamp(90px, 32vw, 132px);
        max-height: 38px;
    }

    .nav-tool-item {
        display: inline-flex;
        margin-top: .4rem;
    }

    .upgrade-cart-line {
        grid-template-columns: minmax(0, 1fr) auto 32px;
    }

    .upgrade-addon-grid {
        grid-template-columns: 1fr;
    }

    .upgrade-addon {
        min-height: 128px;
        grid-template-columns: 52px minmax(0, 1fr) 52px;
    }
}

/* Production billing, pricing, and order-management refinements */
.pricing-plan-row {
    align-items: stretch;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: .5rem;
    scrollbar-width: thin;
}

.pricing-plan-row > .col-sm-4 {
    flex: 0 0 calc(100% / 3);
    max-width: calc(100% / 3);
    min-width: 220px;
}

.pricing-card,
.cart-plan-card {
    min-height: 100%;
}

.pricing-card {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.pricing-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.pricing-card-top svg {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    color: var(--sp-lime);
}

.pricing-card .btn {
    margin-top: auto;
}

@media (max-width: 767.98px) {
    .pricing-plan-row {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .pricing-plan-row > .col-sm-4 {
        flex: 0 0 100%;
        max-width: 100%;
        min-width: 0;
    }

    .plan-mock-scene {
        min-height: 188px;
    }
}

.checkout-details-card {
    border-color: var(--sp-line);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .028)),
        var(--sp-panel);
}

.checkout-details-card textarea {
    resize: vertical;
}

.payment-status-created {
    border: 1px solid var(--sp-line-strong);
    background: rgba(255, 255, 255, .07);
    color: var(--sp-soft);
}

.payment-status-cancelled {
    border: 1px solid rgba(255, 122, 61, .48);
    background: rgba(255, 122, 61, .12);
    color: var(--sp-ember);
}

.premium-profile-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-height: 28px;
    margin-left: .45rem;
    padding: .2rem .5rem;
    border: 1px solid rgba(184, 255, 92, .46);
    border-radius: 999px;
    color: var(--sp-lime);
    background: rgba(184, 255, 92, .12);
    font-size: .75rem;
    line-height: 1;
    vertical-align: middle;
}

.premium-profile-badge svg {
    width: 15px;
    height: 15px;
}

.admin-orders-page .card {
    border-color: var(--sp-line);
}

.admin-orders-table td {
    min-width: 150px;
}

.admin-orders-table td:first-child,
.admin-orders-table td:nth-child(5) {
    min-width: 240px;
}

.admin-table-subtext {
    display: block;
    margin-top: .18rem;
    color: var(--sp-soft);
    font-size: .78rem;
}

.admin-orders-table .form-select-sm {
    min-width: 132px;
}

[data-bs-theme="light"] .checkout-details-card,
[data-bs-theme="light"] .pricing-card {
    border-color: var(--sp-line);
    background:
        linear-gradient(145deg, rgba(31, 146, 195, 0.94), rgba(35, 145, 255, 0.78)),
        var(--sp-panel);
    color: var(--sp-ink);
    box-shadow: 0 16px 38px rgba(15, 23, 42, .08);
}

[data-bs-theme="blue"] .pricing-card p,
[data-bs-theme="blue"] .pricing-card li,
[data-bs-theme="blue"] .checkout-details-card .form-label,
[data-bs-theme="blue"] .admin-table-subtext {
    color: var(--sp-soft);
}

[data-bs-theme="light"] .pricing-card h3,
[data-bs-theme="light"] .checkout-details-card h2,
[data-bs-theme="light"] .admin-orders-table strong,
[data-bs-theme="light"] .public-title h1 {
    color: var(--sp-ink);
}

[data-bs-theme="light"] .payment-status-created {
    background: rgba(15, 23, 42, .04);
    color: var(--sp-soft);
}

[data-bs-theme="light"] .payment-status-cancelled,
[data-bs-theme="light"] .payment-status-failed,
[data-bs-theme="light"] .payment-status-refunded {
    color: var(--sp-ember);
}

[data-bs-theme="light"] .premium-profile-badge {
    border-color: rgba(37, 99, 235, .38);
    background: rgba(37, 99, 235, .08);
    color: var(--sp-lime);
}

@media (max-width: 767.98px) {
    .premium-profile-badge {
        margin-left: 0;
        margin-top: .4rem;
    }

    .pricing-card-top {
        gap: .5rem;
    }
}

/* Enterprise admin panel */
.admin-page {
    --admin-line: var(--sp-line, rgba(255, 255, 255, .12));
    --admin-panel: var(--sp-panel, #15191f);
}

.admin-shell-nav {
    display: flex;
    gap: .55rem;
    padding: .6rem;
    margin-bottom: 1rem;
    border: 1px solid var(--admin-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .045);
    overflow-x: auto;
    scrollbar-width: thin;
}

.admin-shell-nav a,
.admin-shell-nav button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .65rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--sp-soft);
    text-decoration: none;
    white-space: nowrap;
}

.admin-shell-nav a.active,
.admin-shell-nav a:hover,
.admin-shell-nav button:hover {
    border-color: rgba(34, 211, 238, .34);
    background: rgba(34, 211, 238, .1);
    color: #fff;
}

.admin-shell-nav svg {
    width: 17px;
    height: 17px;
}

.admin-metric-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .85rem;
}

.admin-metric {
    min-height: 116px;
}

.admin-quick-actions {
    display: grid;
    grid-template-columns: repeat(7, minmax(130px, 1fr));
    gap: .75rem;
    margin: 1rem 0;
}

.admin-quick-actions a {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .75rem;
    border: 1px solid var(--admin-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .045);
    color: inherit;
    text-decoration: none;
}

.admin-quick-actions a:hover {
    border-color: rgba(184, 255, 92, .4);
    background: rgba(184, 255, 92, .08);
}

.admin-workflow-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
}

.admin-workflow-card {
    min-height: 104px;
    display: grid;
    align-content: center;
    gap: .35rem;
    padding: .9rem;
    border: 1px solid var(--admin-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .045);
}

.admin-workflow-card svg {
    width: 20px;
    height: 20px;
    color: var(--sp-cyan);
}

.admin-workflow-card span {
    color: var(--sp-soft);
    font-size: .82rem;
}

.admin-workflow-card strong {
    font-size: 1.45rem;
}

.admin-card {
    border-color: var(--admin-line);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .028)),
        var(--admin-panel);
}

.admin-card h2 svg,
.admin-quick-actions svg {
    width: 18px;
    height: 18px;
    color: var(--sp-cyan);
}

.admin-table {
    min-width: 980px;
}

.admin-payments-table {
    min-width: 1320px;
}

.admin-table th {
    color: var(--sp-soft);
    font-size: .78rem;
    text-transform: uppercase;
}

.admin-table td {
    vertical-align: middle;
}

.admin-avatar {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    object-fit: cover;
}

.admin-avatar-fallback {
    background: rgba(34, 211, 238, .16);
    color: var(--sp-cyan);
    font-weight: 800;
}

.admin-row-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.admin-row-actions .btn,
.admin-row-actions button {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.admin-row-actions svg,
.admin-inline-form svg,
.admin-order-form svg {
    width: 16px;
    height: 16px;
}

.admin-detail-list {
    display: grid;
    gap: .65rem;
}

.admin-detail-list > div {
    padding: .75rem;
    border: 1px solid var(--admin-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
}

.admin-detail-list span {
    display: block;
    color: var(--sp-soft);
    font-size: .78rem;
}

.admin-detail-list strong {
    overflow-wrap: anywhere;
}

.admin-activity-list {
    display: grid;
    gap: .55rem;
}

.admin-activity-list > div {
    padding: .65rem;
    border: 1px solid var(--admin-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
}

.admin-activity-list span {
    display: block;
    color: var(--sp-soft);
    font-size: .8rem;
}

.admin-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.admin-product-card {
    height: 100%;
}

.admin-product-head {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
}

.admin-product-head > svg {
    width: 34px;
    height: 34px;
    color: var(--sp-cyan);
    flex: 0 0 auto;
}

.admin-product-price {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    margin-top: 1rem;
}

.admin-product-price strong {
    color: var(--sp-lime);
    font-size: 1.3rem;
}

.admin-product-price span {
    color: var(--sp-soft);
    text-decoration: line-through;
}

.admin-order-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr)) 38px;
    gap: .4rem;
    min-width: 640px;
}

.admin-inline-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) repeat(3, 38px);
    gap: .4rem;
    min-width: 340px;
}

.admin-qr-thumb {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background: #fff;
    padding: .25rem;
}

.admin-row-details summary {
    cursor: pointer;
    color: var(--sp-cyan);
}

[data-bs-theme="light"] .admin-shell-nav,
[data-bs-theme="light"] .admin-card,
[data-bs-theme="light"] .admin-quick-actions a,
[data-bs-theme="light"] .admin-workflow-card,
[data-bs-theme="light"] .admin-detail-list > div,
[data-bs-theme="light"] .admin-activity-list > div {
    border-color: var(--sp-line);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(248, 250, 252, .78)),
        #fff;
    color: var(--sp-ink);
}

[data-bs-theme="light"] .admin-shell-nav a,
[data-bs-theme="light"] .admin-shell-nav button,
[data-bs-theme="light"] .admin-table th {
    color: var(--sp-soft);
}

[data-bs-theme="light"] .admin-shell-nav a.active,
[data-bs-theme="light"] .admin-shell-nav a:hover,
[data-bs-theme="light"] .admin-shell-nav button:hover {
    color: #111827;
}

@media (max-width: 1199.98px) {
    .admin-metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-quick-actions {
        grid-template-columns: repeat(3, minmax(130px, 1fr));
    }

    .admin-workflow-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .admin-metric-grid,
    .admin-product-grid,
    .admin-workflow-grid,
    .admin-quick-actions {
        grid-template-columns: 1fr;
    }

    .admin-shell-nav {
        margin-inline: -.25rem;
    }
}

/* Public profile UX, dropdown contrast, and theme polish */
html.theme-transition body,
html.theme-transition .app-main,
html.theme-transition .app-nav,
html.theme-transition .public-profile,
html.theme-transition .public-card,
html.theme-transition .profile-section,
html.theme-transition .detail-list li,
html.theme-transition .meta-list div,
html.theme-transition .item-stack article,
html.theme-transition .social-grid a,
html.theme-transition .profile-guest-cta,
html.theme-transition .form-control,
html.theme-transition .form-select,
html.theme-transition .input-group-text,
html.theme-transition .btn,
html.theme-transition .modal-content {
    transition:
        background-color .24s ease,
        background .24s ease,
        color .24s ease,
        border-color .24s ease,
        box-shadow .24s ease;
}

.form-control,
.form-select,
.input-group-text {
    background-color: rgba(255, 255, 255, .075);
    border-color: var(--sp-line);
    color: #eef4ff;
}

.form-control:focus,
.form-select:focus {
    background-color: rgba(255, 255, 255, .1);
    border-color: rgba(184, 255, 92, .74);
    color: #fff;
    box-shadow: 0 0 0 .22rem rgba(184, 255, 92, .14);
}

.form-control::placeholder {
    color: rgba(226, 232, 240, .62);
}

.form-select {
    color-scheme: dark;
}

.form-select option,
.form-select optgroup {
    background-color: #111827;
    color: #f8fafc;
}

.form-select option:hover,
.form-select option:focus {
    background-color: #223044;
    color: #fff;
}

.form-select option:checked,
.form-select option:active {
    background-color: var(--sp-lime);
    color: #071007;
}

.public-profile {
    padding-bottom: 4rem;
}

.profile-cover {
    min-height: 320px;
}

.public-card {
    display: grid;
    gap: 1rem;
    border-radius: 8px;
}

.public-head {
    align-items: center;
    gap: 1.15rem;
}

.public-title {
    min-width: 0;
}

.profile-category-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    width: max-content;
    max-width: 100%;
    min-height: 28px;
    padding: .24rem .55rem;
    border: 1px solid rgba(184, 255, 92, .42);
    border-radius: 999px;
    background: rgba(184, 255, 92, .1);
    color: var(--sp-lime);
    font-size: .76rem;
    font-weight: 850;
    line-height: 1;
    text-transform: uppercase;
}

.profile-category-chip svg {
    width: 14px;
    height: 14px;
}

.public-title h1 {
    margin: .35rem 0 .2rem;
    line-height: 1.04;
    overflow-wrap: anywhere;
}

.profile-headline {
    margin: 0;
    color: var(--sp-soft);
    font-size: 1.08rem;
    font-weight: 650;
}

.profile-company {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    margin: .45rem 0 0;
    color: var(--sp-soft);
}

.profile-company svg {
    width: 16px;
    height: 16px;
    color: var(--sp-cyan);
}

.profile-bio {
    max-width: 74ch;
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
}

.profile-actions {
    gap: .7rem;
    margin-top: .1rem;
}

.profile-actions .btn,
.profile-guest-cta .btn,
.qr-modal-body .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 46px;
    padding-inline: .9rem;
}

.save-contact-btn {
    box-shadow: 0 18px 38px rgba(184, 255, 92, .22);
}

.profile-guest-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .9rem;
    padding: .85rem;
    border: 1px solid rgba(184, 255, 92, .34);
    border-radius: 8px;
    background:
        linear-gradient(120deg, rgba(184, 255, 92, .13), rgba(34, 211, 238, .08)),
        rgba(255, 255, 255, .045);
}

.profile-guest-cta strong,
.profile-guest-cta span {
    display: block;
}

.profile-guest-cta strong {
    color: var(--sp-ink);
    font-size: .98rem;
}

.profile-guest-cta span {
    color: var(--sp-soft);
    font-size: .88rem;
}

.social-grid {
    gap: .75rem;
}

.social-grid a {
    min-height: 58px;
    padding: .85rem .9rem;
    font-weight: 760;
}

.social-grid a span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-section {
    padding: clamp(1rem, 2vw, 1.2rem);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.profile-section h2 {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .9rem;
    font-size: 1.06rem;
    font-weight: 850;
    letter-spacing: 0;
}

.profile-section h2 svg {
    width: 18px;
    height: 18px;
    color: var(--sp-lime);
    flex: 0 0 auto;
}

.detail-list,
.meta-list,
.item-stack {
    gap: .75rem;
}

.detail-list li,
.meta-list div,
.item-stack article {
    border-radius: 8px;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.detail-list li {
    align-items: flex-start;
    min-width: 0;
}

.detail-list svg {
    flex: 0 0 auto;
    margin-top: .1rem;
}

.detail-list span,
.detail-list a,
.meta-list strong,
.meta-list a,
.item-stack article p,
.item-stack article a {
    overflow-wrap: anywhere;
}

.item-stack article h3 {
    line-height: 1.28;
}

.public-gallery figure {
    margin: 0;
}

.public-gallery figcaption {
    margin-top: .35rem;
    color: var(--sp-soft);
    font-size: .82rem;
}

.qr-modal-body {
    padding-top: 1.25rem;
}

.qr-frame {
    width: min(100%, 350px);
    margin-inline: auto;
    padding: .8rem;
    border: 1px solid var(--sp-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 20px 44px rgba(0, 0, 0, .16);
}

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

[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select,
[data-bs-theme="light"] .input-group-text {
    background-color: #fff;
    border-color: rgba(15, 23, 42, .18);
    color: #111827;
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, .03);
}

[data-bs-theme="light"] .form-control:focus,
[data-bs-theme="light"] .form-select:focus {
    background-color: #fff;
    border-color: rgba(37, 99, 235, .66);
    color: #111827;
    box-shadow: 0 0 0 .22rem rgba(37, 99, 235, .14);
}

[data-bs-theme="light"] .form-control::placeholder {
    color: #7b8798;
}

[data-bs-theme="light"] .form-select {
    color-scheme: light;
}

[data-bs-theme="light"] .form-select option,
[data-bs-theme="light"] .form-select optgroup {
    background-color: #fff;
    color: #111827;
}

[data-bs-theme="light"] .form-select option:hover,
[data-bs-theme="light"] .form-select option:focus {
    background-color: #e8f0ff;
    color: #0f172a;
}

[data-bs-theme="light"] .form-select option:checked,
[data-bs-theme="light"] .form-select option:active {
    background-color: #2563eb;
    color: #fff;
}

[data-bs-theme="light"] .public-profile {
    background:
        linear-gradient(180deg, rgba(37, 99, 235, .08), transparent 24rem),
        linear-gradient(135deg, rgba(8, 145, 178, .06), transparent 34rem),
        #f4f7fb;
    color: #142033;
}

[data-bs-theme="light"] .profile-cover {
    background:
        linear-gradient(135deg, rgba(37, 99, 235, .2), rgba(8, 145, 178, .14) 48%, rgba(232, 93, 4, .14)),
        #e8eef7;
}

[data-bs-theme="light"] .profile-cover::after {
    background:
        linear-gradient(180deg, rgba(244, 247, 251, .05), rgba(244, 247, 251, .84)),
        repeating-linear-gradient(90deg, rgba(15, 23, 42, .04) 0 1px, transparent 1px 92px);
}

[data-bs-theme="light"] .public-card,
[data-bs-theme="light"] .profile-section {
    border-color: rgba(15, 23, 42, .12);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .88)),
        #fff;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .1);
}

[data-bs-theme="light"] .public-title h1,
[data-bs-theme="light"] .profile-guest-cta strong,
[data-bs-theme="light"] .meta-list strong,
[data-bs-theme="light"] .detail-list a,
[data-bs-theme="light"] .meta-list a,
[data-bs-theme="light"] .item-stack a,
[data-bs-theme="light"] .social-grid a {
    color: #111827;
}

[data-bs-theme="light"] .profile-headline,
[data-bs-theme="light"] .profile-company,
[data-bs-theme="light"] .profile-bio,
[data-bs-theme="light"] .profile-guest-cta span,
[data-bs-theme="light"] .meta-list span,
[data-bs-theme="light"] .item-stack article p,
[data-bs-theme="light"] .public-gallery figcaption {
    color: #5d697d !important;
}

[data-bs-theme="light"] .profile-category-chip {
    border-color: rgba(37, 99, 235, .26);
    background: rgba(37, 99, 235, .08);
    color: #1d4ed8;
}

[data-bs-theme="light"] .profile-company svg,
[data-bs-theme="light"] .profile-section h2 svg,
[data-bs-theme="light"] .social-grid a svg,
[data-bs-theme="light"] .detail-list svg,
[data-bs-theme="light"] .quick-actions svg,
[data-bs-theme="light"] .metric-card svg {
    color: #2563eb;
}

[data-bs-theme="light"] .profile-guest-cta {
    border-color: rgba(37, 99, 235, .2);
    background:
        linear-gradient(120deg, rgba(37, 99, 235, .09), rgba(8, 145, 178, .07)),
        #fff;
}

[data-bs-theme="light"] .social-grid a,
[data-bs-theme="light"] .detail-list li,
[data-bs-theme="light"] .meta-list div,
[data-bs-theme="light"] .item-stack article,
[data-bs-theme="light"] .video-box {
    border-color: rgba(15, 23, 42, .11);
    background: rgba(255, 255, 255, .86);
}

[data-bs-theme="light"] .social-grid a:hover,
[data-bs-theme="light"] .detail-list li:hover,
[data-bs-theme="light"] .meta-list div:hover,
[data-bs-theme="light"] .item-stack article:hover {
    border-color: rgba(37, 99, 235, .32);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .09);
}

[data-bs-theme="light"] .modal-content {
    border-color: rgba(15, 23, 42, .12);
    background: #fff;
    color: #111827;
}

[data-bs-theme="light"] .btn-close {
    filter: none;
}

@media (max-width: 767.98px) {
    .public-card {
        margin-top: -78px;
        gap: .9rem;
    }

    .public-head {
        align-items: flex-start;
    }

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

    .profile-actions .btn {
        width: 100%;
    }

    .profile-guest-cta {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-guest-cta .btn {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .profile-actions,
    .social-grid {
        grid-template-columns: 1fr;
    }

    .public-avatar {
        width: 88px;
        height: 88px;
    }
}

/* Force one professional black theme and readable native select menus everywhere. */
html,
body {
    color-scheme: dark;
}

html[data-bs-theme],
html[data-bs-theme="light"],
html[data-bs-theme="dark"] {
    --sp-ink: #f8fafc;
    --sp-soft: #a7b0bf;
    --sp-bg: #050607;
    --sp-panel: rgba(14, 17, 22, .86);
    --sp-panel-solid: #0e1116;
    --sp-panel-raised: #141922;
    --sp-line: rgba(255, 255, 255, .12);
    --sp-line-strong: rgba(255, 255, 255, .2);
    --sp-lime: #b8ff5c;
    --sp-cyan: #22d3ee;
    --sp-ember: #ff7a3d;
    --sp-shadow: 0 26px 70px rgba(0, 0, 0, .44);
}

html[data-bs-theme] body,
html[data-bs-theme="light"] body,
html[data-bs-theme] .app-main,
html[data-bs-theme="light"] .app-main,
html[data-bs-theme] .public-profile,
html[data-bs-theme="light"] .public-profile {
    background:
        linear-gradient(180deg, rgba(184, 255, 92, .035), transparent 30rem),
        var(--sp-bg) !important;
    color: var(--sp-ink) !important;
}

/* React powered home preview */
.eyebrow,
.home-hero .eyebrow,
.section-heading .eyebrow {
    letter-spacing: 0;
}

.react-profile-studio {
    min-height: 620px;
}

.react-studio-shell {
    position: relative;
    display: grid;
    gap: 1rem;
    isolation: isolate;
    color: #f8fafc;
}

.react-studio-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.react-studio-tabs,
.react-studio-swatches {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
}

.react-studio-tabs {
    flex-wrap: wrap;
}

.react-studio-tabs button,
.react-studio-swatches button {
    appearance: none;
    border: 1px solid var(--sp-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .065);
    color: rgba(255, 255, 255, .82);
    transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.react-studio-tabs button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 38px;
    padding: .42rem .62rem;
    font-size: .86rem;
    font-weight: 760;
    line-height: 1;
}

.react-studio-tabs button svg {
    width: 16px;
    height: 16px;
}

.react-studio-swatches button {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    padding: 0;
}

.react-studio-swatches button::before {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--swatch);
}

.react-studio-tabs button:hover,
.react-studio-swatches button:hover,
.react-studio-tabs button.is-active,
.react-studio-swatches button.is-active {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--studio-accent) 72%, rgba(255, 255, 255, .18));
    background: color-mix(in srgb, var(--studio-accent) 15%, rgba(255, 255, 255, .07));
    color: #fff;
}

.react-studio-stage {
    position: relative;
    min-height: 510px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--sp-line);
    border-radius: 8px;
    background:
        linear-gradient(140deg, color-mix(in srgb, var(--studio-accent) 16%, transparent), transparent 38%),
        linear-gradient(225deg, rgba(34, 211, 238, .12), rgba(255, 122, 61, .07) 56%, transparent),
        rgba(255, 255, 255, .045);
    box-shadow: var(--sp-shadow);
}

.react-studio-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .78), transparent 88%);
    pointer-events: none;
}

.react-studio-card {
    position: relative;
    z-index: 2;
    width: min(78%, 340px);
    min-height: 430px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background: #0b0f14;
    box-shadow: 0 28px 70px rgba(0, 0, 0, .52);
    transform: rotate(-2.5deg);
}

.react-card-cover {
    min-height: 138px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--studio-accent) 72%, #111827), #111827 58%, rgba(255, 122, 61, .62)),
        #111827;
}

.react-card-cover span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: .28rem .5rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(0, 0, 0, .2);
    color: #fff;
    font-size: .76rem;
    font-weight: 850;
}

.react-card-cover svg {
    width: 30px;
    height: 30px;
    color: #fff;
}

.react-card-body {
    display: grid;
    gap: .85rem;
    padding: 1rem;
}

.react-avatar-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.react-avatar {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--studio-accent) 68%, #0b0f14);
    color: #071007;
    font-weight: 900;
}

.react-avatar-row h2 {
    margin: 0;
    color: #fff;
    font-size: 1.14rem;
    font-weight: 860;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.react-avatar-row p,
.react-card-summary,
.react-plan-ticket small,
.react-qr-panel span,
.react-studio-metrics span {
    color: var(--sp-soft);
}

.react-avatar-row p,
.react-card-summary {
    margin: .16rem 0 0;
    font-size: .9rem;
    line-height: 1.5;
}

.react-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.react-link-row span {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: .25rem .5rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    font-size: .78rem;
    font-weight: 760;
}

.react-card-actions {
    display: grid;
    grid-template-columns: 1fr 76px;
    gap: .55rem;
    margin-top: .25rem;
}

.react-card-actions .btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding-inline: .62rem;
    white-space: nowrap;
}

.react-card-actions svg {
    width: 17px;
    height: 17px;
}

.react-qr-panel,
.react-plan-ticket {
    position: absolute;
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    background: rgba(8, 12, 18, .82);
    box-shadow: 0 18px 46px rgba(0, 0, 0, .34);
    backdrop-filter: blur(16px);
}

.react-qr-panel {
    right: 1.15rem;
    bottom: 1.2rem;
    display: grid;
    justify-items: center;
    gap: .45rem;
    padding: .75rem;
}

.react-qr-grid {
    width: 86px;
    aspect-ratio: 1;
    border: 8px solid #fff;
    border-radius: 8px;
    background:
        linear-gradient(90deg, #111 10px, transparent 10px 16px, #111 16px 28px, transparent 28px),
        linear-gradient(#111 10px, transparent 10px 16px, #111 16px 28px, transparent 28px),
        #fff;
    background-size: 28px 28px;
}

.react-plan-ticket {
    left: 1.15rem;
    top: 1.2rem;
    width: 168px;
    display: grid;
    gap: .08rem;
    padding: .75rem .85rem;
}

.react-plan-ticket span {
    color: var(--studio-accent);
    font-size: .76rem;
    font-weight: 850;
    text-transform: uppercase;
}

.react-plan-ticket strong {
    color: #fff;
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.react-showcase-shadow {
    position: absolute;
    z-index: 1;
    right: -4rem;
    bottom: -3.5rem;
    width: 280px;
    opacity: .16;
    filter: grayscale(1) blur(.4px);
    pointer-events: none;
}

.react-studio-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.react-studio-metrics div {
    min-height: 78px;
    display: grid;
    align-content: center;
    gap: .18rem;
    padding: .85rem;
    border: 1px solid var(--sp-line);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .03)),
        rgba(255, 255, 255, .045);
}

.react-studio-metrics strong {
    color: #fff;
    font-size: 1.28rem;
    line-height: 1.1;
}

@media (max-width: 991.98px) {
    .react-profile-studio {
        min-height: auto;
    }

    .react-studio-stage {
        min-height: 460px;
    }
}

@media (max-width: 575.98px) {
    .react-studio-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .react-studio-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .react-studio-tabs button {
        width: 100%;
    }

    .react-studio-swatches {
        justify-content: space-between;
    }

    .react-studio-stage {
        min-height: 520px;
        padding: .75rem;
        place-items: end center;
    }

    .react-studio-card {
        width: 100%;
        min-height: 390px;
        transform: none;
    }

    .react-plan-ticket,
    .react-qr-panel {
        position: static;
        width: 100%;
        margin-bottom: .65rem;
    }

    .react-qr-panel {
        display: none;
    }

    .react-card-actions {
        grid-template-columns: 1fr;
    }

    .react-studio-metrics {
        grid-template-columns: 1fr;
    }
}

html[data-bs-theme] .app-nav,
html[data-bs-theme="light"] .app-nav {
    background: rgba(5, 6, 7, .84) !important;
    border-bottom-color: var(--sp-line) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .28) !important;
}

html[data-bs-theme] .navbar-brand,
html[data-bs-theme] .nav-link,
html[data-bs-theme="light"] .navbar-brand,
html[data-bs-theme="light"] .nav-link {
    color: rgba(255, 255, 255, .9) !important;
}

html[data-bs-theme] .form-control,
html[data-bs-theme] .form-select,
html[data-bs-theme] .input-group-text,
html[data-bs-theme="light"] .form-control,
html[data-bs-theme="light"] .form-select,
html[data-bs-theme="light"] .input-group-text {
    background-color: rgba(255, 255, 255, .075) !important;
    border-color: var(--sp-line) !important;
    color: #f8fafc !important;
    color-scheme: dark !important;
}

html[data-bs-theme] .form-control:focus,
html[data-bs-theme] .form-select:focus,
html[data-bs-theme="light"] .form-control:focus,
html[data-bs-theme="light"] .form-select:focus {
    background-color: rgba(255, 255, 255, .1) !important;
    border-color: rgba(184, 255, 92, .74) !important;
    color: #fff !important;
    box-shadow: 0 0 0 .22rem rgba(184, 255, 92, .14) !important;
}

select,
.form-select,
select.form-select,
select option,
select optgroup,
.form-select option,
.form-select optgroup,
option,
optgroup {
    background-color: #050607 !important;
    background: #050607 !important;
    color: #ffffff !important;
    color-scheme: dark !important;
}

select option:hover,
select option:focus,
select option:checked,
select option:active,
.form-select option:hover,
.form-select option:focus,
.form-select option:checked,
.form-select option:active,
option:hover,
option:focus,
option:checked,
option:active {
    background-color: #111827 !important;
    background: #111827 !important;
    color: #ffffff !important;
}

html[data-bs-theme] .card,
html[data-bs-theme] .auth-card,
html[data-bs-theme] .profile-section,
html[data-bs-theme] .public-card,
html[data-bs-theme] .detail-list li,
html[data-bs-theme] .meta-list div,
html[data-bs-theme] .item-stack article,
html[data-bs-theme] .social-grid a,
html[data-bs-theme] .quick-actions a,
html[data-bs-theme] .quick-actions button,
html[data-bs-theme="light"] .card,
html[data-bs-theme="light"] .auth-card,
html[data-bs-theme="light"] .profile-section,
html[data-bs-theme="light"] .public-card,
html[data-bs-theme="light"] .detail-list li,
html[data-bs-theme="light"] .meta-list div,
html[data-bs-theme="light"] .item-stack article,
html[data-bs-theme="light"] .social-grid a,
html[data-bs-theme="light"] .quick-actions a,
html[data-bs-theme="light"] .quick-actions button {
    border-color: var(--sp-line) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028)),
        var(--sp-panel) !important;
    color: var(--sp-ink) !important;
}

/* AstitvaHub professional refresh */
:root {
    --ah-bg: #050607;
    --ah-surface: #0d1117;
    --ah-surface-2: #121821;
    --ah-line: rgba(255, 255, 255, .13);
    --ah-line-strong: rgba(255, 255, 255, .22);
    --ah-text: #f8fafc;
    --ah-muted: #a7b0bf;
    --ah-lime: #b8ff5c;
    --ah-cyan: #22d3ee;
    --ah-ember: #ff7a3d;
    --ah-violet: #a78bfa;
    --ah-shadow: 0 24px 70px rgba(0, 0, 0, .38);
}

html {
    scroll-padding-top: 92px;
}

body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-rendering: geometricPrecision;
}

a {
    text-underline-offset: .18em;
}

:focus-visible {
    outline: 2px solid var(--ah-lime);
    outline-offset: 3px;
}

.app-main {
    background:
        linear-gradient(180deg, rgba(184, 255, 92, .035), transparent 22rem),
        linear-gradient(135deg, rgba(34, 211, 238, .045), transparent 34rem),
        var(--ah-bg);
}

.app-nav {
    min-height: 68px;
    border-bottom: 1px solid var(--ah-line) !important;
    background: rgba(5, 6, 7, .88) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .24);
}

.navbar-brand {
    min-height: 42px;
}

.navbar-toggler {
    border-color: var(--ah-line);
    border-radius: 8px;
}

.navbar-collapse.show,
.navbar-collapse.collapsing {
    margin-top: .75rem;
    padding: .75rem;
    border: 1px solid var(--ah-line);
    border-radius: 8px;
    background: rgba(10, 14, 19, .96);
}

.nav-link {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    color: rgba(255, 255, 255, .78) !important;
    font-weight: 720;
}

.nav-link.active,
.nav-link:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff !important;
}

.btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    border-radius: 8px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0;
}

.btn-sm {
    min-height: 34px;
}

.btn-primary {
    --bs-btn-bg: var(--ah-lime);
    --bs-btn-border-color: var(--ah-lime);
    --bs-btn-color: #071007;
    --bs-btn-hover-bg: #d6ff95;
    --bs-btn-hover-border-color: #d6ff95;
    --bs-btn-hover-color: #071007;
    --bs-btn-active-bg: #a8ef51;
    --bs-btn-active-border-color: #a8ef51;
    --bs-btn-active-color: #071007;
    box-shadow: 0 16px 34px rgba(184, 255, 92, .18);
}

.btn-outline-primary,
.btn-outline-secondary {
    --bs-btn-color: #f8fafc;
    --bs-btn-border-color: var(--ah-line-strong);
    --bs-btn-hover-bg: rgba(255, 255, 255, .1);
    --bs-btn-hover-border-color: rgba(184, 255, 92, .5);
    --bs-btn-hover-color: #fff;
}

.btn-icon {
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
}

.card,
.auth-card,
.home-info-card,
.home-audience,
.home-plan,
.home-faq-list details,
.home-cta-inner,
.metric-card,
.profile-section,
.public-card,
.pricing-service,
.checkout-panel,
.upgrade-status > div,
.checkout-summary > div {
    border-color: var(--ah-line) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028)),
        var(--ah-surface) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
}

.card-body {
    min-width: 0;
}

.home-info-card,
.home-audience,
.home-plan,
.pricing-service,
.metric-card,
.quick-actions a,
.quick-actions button,
.social-grid a {
    position: relative;
}

.home-info-card::before,
.home-audience::before,
.home-plan::before,
.metric-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border-top: 1px solid rgba(255, 255, 255, .16);
    pointer-events: none;
}

.surface-band,
.home-muted-band {
    background:
        linear-gradient(135deg, rgba(184, 255, 92, .085), transparent 34rem),
        linear-gradient(225deg, rgba(34, 211, 238, .08), transparent 38rem),
        #07090c !important;
}

.home-hero {
    min-height: min(820px, calc(100vh - 68px));
    display: flex;
    align-items: center;
    padding-block: clamp(3.5rem, 7vw, 6.5rem) 3.5rem;
}

.home-hero h1 {
    max-width: 10ch;
    margin-bottom: 1rem;
    font-size: 5.75rem;
    line-height: .92;
}

.home-hero .lead {
    color: rgba(232, 238, 247, .78) !important;
}

.username-check {
    max-width: 620px;
    border-color: var(--ah-line-strong);
    background: rgba(255, 255, 255, .075);
}

.username-check .form-control,
.username-check .input-group-text {
    min-height: 46px;
    border-color: transparent !important;
    background: rgba(0, 0, 0, .22) !important;
}

.home-stat-grid,
.hero-metrics,
.react-studio-metrics {
    align-items: stretch;
}

.home-stat strong,
.hero-metrics strong,
.metric-card strong,
.react-studio-metrics strong {
    font-variant-numeric: tabular-nums;
}

.section-heading {
    align-items: flex-start;
    margin-bottom: 1.35rem;
}

.section-heading h2,
.upgrade-section-head h2 {
    color: #fff;
    font-size: 2.15rem;
    line-height: 1.08;
}

.section-heading p,
.upgrade-section-head p,
.text-secondary {
    color: var(--ah-muted) !important;
}

.home-card-grid {
    gap: 1rem;
}

.home-info-card {
    min-height: 188px;
    padding: 1.15rem;
}

.home-info-card svg,
.home-audience svg,
.pricing-service-icon,
.checkout-icon {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(184, 255, 92, .24);
    border-radius: 8px;
    background: rgba(184, 255, 92, .09);
}

.home-info-card svg,
.home-audience svg {
    padding: .55rem;
}

.home-audience {
    min-height: 128px;
    align-items: flex-start;
}

.home-workflow-panel {
    gap: .85rem;
    padding: .9rem;
}

.home-workflow-panel div {
    min-height: 142px;
    background: rgba(255, 255, 255, .045);
}

.home-plan,
.upgrade-plan {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem;
}

.home-plan ul {
    flex: 1;
}

.home-plan li {
    align-items: flex-start;
}

.plan-badge,
.active-plan-badge,
.cart-count-pill,
.payment-status {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    border-radius: 999px;
    font-weight: 850;
    line-height: 1;
}

.plan-badge {
    background: linear-gradient(90deg, var(--ah-lime), var(--ah-cyan));
    color: #071007;
}

.pricing-compare-wrap {
    border-radius: 8px;
    border: 1px solid var(--ah-line);
    background: rgba(255, 255, 255, .035);
}

.pricing-compare {
    margin-bottom: 0;
}

.pricing-compare th,
.pricing-compare td,
.payment-table th,
.payment-table td,
.table th,
.table td {
    border-color: rgba(255, 255, 255, .09) !important;
}

.table {
    color: #f8fafc;
}

.form-label {
    color: rgba(255, 255, 255, .86);
    font-weight: 740;
}

.form-control,
.form-select,
.input-group-text {
    min-height: 44px;
    border-radius: 8px !important;
}

.form-control:hover,
.form-select:hover {
    border-color: rgba(255, 255, 255, .24) !important;
}

.auth-wrap {
    min-height: calc(100vh - 220px);
    display: grid;
    align-items: center;
}

.auth-card {
    overflow: hidden;
}

.auth-side {
    background:
        linear-gradient(145deg, rgba(184, 255, 92, .13), rgba(34, 211, 238, .08)),
        #0b1016 !important;
}

.dashboard-header {
    padding-top: clamp(1.25rem, 3vw, 2rem);
}

.dashboard-header h1 {
    color: #fff;
    font-weight: 860;
}

.metric-card {
    min-height: 136px;
}

.metric-card svg {
    width: 24px;
    height: 24px;
}

.quick-actions {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.quick-actions a,
.quick-actions button,
.social-grid a,
.support-list a {
    min-width: 0;
}

.quick-actions span,
.support-list span {
    overflow-wrap: anywhere;
}

.upgrade-status > div {
    min-height: 96px;
}

.upgrade-addon-grid {
    gap: 1rem;
}

.checkout-details-card textarea.form-control {
    min-height: 112px;
}

.upgrade-cart-panel {
    box-shadow: 0 22px 58px rgba(0, 0, 0, .32);
}

.upgrade-cart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.upgrade-cart-line,
.upgrade-cart-totals > div,
.checkout-cart-row {
    background: rgba(255, 255, 255, .055);
}

.cart-remove {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--ah-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.cart-remove svg {
    width: 16px;
    height: 16px;
}

.app-footer {
    background:
        linear-gradient(135deg, rgba(184, 255, 92, .055), transparent 32rem),
        #050607 !important;
}

.footer-grid {
    gap: 1.25rem;
}

.footer-links a {
    color: rgba(255, 255, 255, .76);
}

.footer-links a:hover {
    color: #fff;
}

.react-profile-studio {
    min-height: auto;
}

.react-studio-stage {
    border-color: var(--ah-line-strong);
}

.react-studio-card {
    width: min(72%, 344px);
}

.react-studio-tabs button span {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 991.98px) {
    .home-hero {
        min-height: auto;
    }

    .section-heading,
    .upgrade-section-head,
    .home-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .home-workflow-panel {
        grid-template-columns: 1fr;
    }

    .home-workflow-panel > svg {
        transform: rotate(90deg);
        margin-inline: auto;
    }

    .upgrade-cart-panel {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .container {
        width: min(100% - 1.5rem, 540px);
    }

    .home-hero h1 {
        font-size: 3.35rem;
    }

    .home-card-grid,
    .home-audience-grid,
    .home-stat-grid,
    .hero-metrics,
    .pricing-plan-row,
    .upgrade-addon-grid {
        display: grid;
        grid-template-columns: 1fr;
    }

    .pricing-plan-row > *,
    .row.pricing-plan-row > * {
        width: 100%;
    }

    .username-check .btn {
        width: 100%;
    }

    .dashboard-header {
        align-items: stretch;
    }

    .dashboard-header .btn {
        width: 100%;
    }

    .upgrade-cart-line,
    .upgrade-cart-totals > div,
    .checkout-cart-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .upgrade-cart-line strong,
    .upgrade-cart-totals strong,
    .checkout-cart-row strong {
        text-align: left;
    }
}