: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;
}

.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: clamp(2.4rem, 6vw, 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: clamp(1.8rem, 4vw, 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: clamp(1.7rem, 4vw, 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%;
    }
}

/* 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: #fff;
}

.form-control:focus,
.form-select:focus {
    background-color: rgba(255, 255, 255, .09);
    border-color: rgba(184, 255, 92, .7);
    color: #fff;
    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: clamp(1rem, 2vw, 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: clamp(1.5rem, 3vw, 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);
}

.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;
}

i[data-lucide]::before {
    content: "";
    position: absolute;
    inset: 2px;
    border: 1.8px solid currentColor;
    border-radius: 4px;
}

i[data-lucide="moon"]::before,
i[data-lucide="globe"]::before {
    border-radius: 50%;
}

i[data-lucide="arrow-right"]::before,
i[data-lucide="send"]::before {
    inset: 4px 2px 4px 5px;
    border-width: 2px 2px 0 0;
    border-radius: 0;
    transform: rotate(45deg);
}

@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(3, minmax(0, 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;
}

.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: clamp(1.8rem, 4vw, 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 {
    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;
}

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

.legal-header h1 {
    margin: .35rem 0 .65rem;
    color: #fff;
    font-size: clamp(2rem, 4vw, 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;
    }
}