/* hide orb layer when using NoOrbsLayout */
.ssw-no-orbs .ssw-orbs {
    display: none !important;
}


.ssw-theme {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    background: radial-gradient(1200px 800px at 20% 10%, rgba(31, 223, 100, .18), transparent 60%), radial-gradient(900px 700px at 85% 20%, rgba(255, 41, 117, .18), transparent 55%), radial-gradient(1100px 800px at 60% 95%, rgba(124, 58, 237, .20), transparent 60%), linear-gradient(180deg, #07060a 0%, #0b0712 35%, #06040b 100%);
}

    /* Orbs */
    .ssw-theme .ssw-orbs {
        position: fixed;
        inset: 0;
        pointer-events: none;
        filter: blur(28px);
        opacity: .95;
        z-index: 0;
    }

    .ssw-theme .ssw-orb {
        position: absolute;
        border-radius: 999px;
        transform: translate3d(0,0,0);
        mix-blend-mode: screen;
    }

    .ssw-theme .ssw-orb-1 {
        width: 520px;
        height: 520px;
        left: -140px;
        top: -160px;
        background: radial-gradient(circle at 30% 30%, rgba(31,223,100,.85), rgba(31,223,100,0) 65%);
        animation: sswFloat1 11s ease-in-out infinite;
    }

    .ssw-theme .ssw-orb-2 {
        width: 560px;
        height: 560px;
        right: -180px;
        top: -140px;
        background: radial-gradient(circle at 40% 40%, rgba(255,41,117,.80), rgba(255,41,117,0) 65%);
        animation: sswFloat2 13s ease-in-out infinite;
    }

    .ssw-theme .ssw-orb-3 {
        width: 680px;
        height: 680px;
        left: 10%;
        bottom: -240px;
        background: radial-gradient(circle at 45% 45%, rgba(124,58,237,.80), rgba(124,58,237,0) 68%);
        animation: sswFloat3 14s ease-in-out infinite;
    }

    .ssw-theme .ssw-orb-4 {
        width: 420px;
        height: 420px;
        right: 18%;
        bottom: -120px;
        background: radial-gradient(circle at 40% 40%, rgba(0,212,255,.55), rgba(0,212,255,0) 70%);
        animation: sswFloat4 12s ease-in-out infinite;
    }

@keyframes sswFloat1 {
    0%,100% {
        transform: translate(0,0) scale(1)
    }

    50% {
        transform: translate(40px,30px) scale(1.05)
    }
}

@keyframes sswFloat2 {
    0%,100% {
        transform: translate(0,0) scale(1)
    }

    50% {
        transform: translate(-35px,45px) scale(1.06)
    }
}

@keyframes sswFloat3 {
    0%,100% {
        transform: translate(0,0) scale(1)
    }

    50% {
        transform: translate(50px,-25px) scale(1.04)
    }
}

@keyframes sswFloat4 {
    0%,100% {
        transform: translate(0,0) scale(1)
    }

    50% {
        transform: translate(-30px,-30px) scale(1.05)
    }
}

/* Layering helpers */
.ssw-theme .ssw-layer {
    position: relative;
    z-index: 1;
}

/* Glass surfaces */
.ssw-theme .ssw-glass {
    position: relative;
    color: #fff;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 22px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

    .ssw-theme .ssw-glass::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 22px;
        pointer-events: none;
        background: radial-gradient(600px 240px at 15% 0%, rgba(31,223,100,.18), transparent 70%), radial-gradient(520px 220px at 85% 10%, rgba(255,41,117,.16), transparent 70%), radial-gradient(680px 280px at 50% 110%, rgba(124,58,237,.14), transparent 70%);
    }

/* App bar + layout polish */
.ssw-theme .ssw-appbar {
    background: rgba(0,0,0,.22) !important;
    border-bottom: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.ssw-theme .ssw-content {
    padding-top: 72px; /* space for appbar */
}

/* Typography helpers */
.ssw-theme .ssw-eyebrow {
    font-size: .75rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
}

.ssw-theme .ssw-title {
    letter-spacing: -0.02em;
}

.ssw-theme .ssw-pill {
    font-size: .75rem;
    padding: .35rem .65rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.18);
    color: rgba(255,255,255,.70);
}

.ssw-theme .ssw-accent-primary {
    color: #a855f7 !important;
}

.ssw-theme .ssw-accent-secondary {
    color: #ff2991 !important;
}

.ssw-theme .ssw-accent-tertiary {
    color: #1fdf64 !important;
}

.ssw-theme .ssw-accent-info {
    color: #00d4ff !important;
}

.ssw-theme .ssw-accent-success {
    color: #34d399 !important;
}

.ssw-theme .ssw-accent-warning {
    color: #fbbf24 !important;
}

.ssw-theme .ssw-accent-error {
    color: #fb7185 !important;
}



/* ---- isolated to .ssw-wrap ---- */
.ssw-wrap {
    position: relative;
    overflow: hidden;
    background: radial-gradient(1200px 800px at 20% 10%, rgba(31, 223, 100, .18), transparent 60%), radial-gradient(900px 700px at 85% 20%, rgba(255, 41, 117, .18), transparent 55%), radial-gradient(1100px 800px at 60% 95%, rgba(124, 58, 237, .20), transparent 60%), linear-gradient(180deg, #07060a 0%, #0b0712 35%, #06040b 100%);
}

/* Orbs behind everything */
.ssw-orbs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    filter: blur(28px);
    opacity: .95;
}

.ssw-orb {
    position: absolute;
    border-radius: 999px;
    transform: translate3d(0,0,0);
    mix-blend-mode: screen;
}

.ssw-orb-1 {
    width: 520px;
    height: 520px;
    left: -140px;
    top: -160px;
    background: radial-gradient(circle at 30% 30%, rgba(31,223,100,.85), rgba(31,223,100,0) 65%);
    animation: sswFloat1 11s ease-in-out infinite;
}

.ssw-orb-2 {
    width: 560px;
    height: 560px;
    right: -180px;
    top: -140px;
    background: radial-gradient(circle at 40% 40%, rgba(255,41,117,.80), rgba(255,41,117,0) 65%);
    animation: sswFloat2 13s ease-in-out infinite;
}

.ssw-orb-3 {
    width: 680px;
    height: 680px;
    left: 10%;
    bottom: -240px;
    background: radial-gradient(circle at 45% 45%, rgba(124,58,237,.80), rgba(124,58,237,0) 68%);
    animation: sswFloat3 14s ease-in-out infinite;
}

.ssw-orb-4 {
    width: 420px;
    height: 420px;
    right: 18%;
    bottom: -120px;
    background: radial-gradient(circle at 40% 40%, rgba(0,212,255,.55), rgba(0,212,255,0) 70%);
    animation: sswFloat4 12s ease-in-out infinite;
}

@keyframes sswFloat1 {
    0%, 100% {
        transform: translate(0,0) scale(1)
    }

    50% {
        transform: translate(40px,30px) scale(1.05)
    }
}

@keyframes sswFloat2 {
    0%, 100% {
        transform: translate(0,0) scale(1)
    }

    50% {
        transform: translate(-35px,45px) scale(1.06)
    }
}

@keyframes sswFloat3 {
    0%, 100% {
        transform: translate(0,0) scale(1)
    }

    50% {
        transform: translate(50px,-25px) scale(1.04)
    }
}

@keyframes sswFloat4 {
    0%, 100% {
        transform: translate(0,0) scale(1)
    }

    50% {
        transform: translate(-30px,-30px) scale(1.05)
    }
}

/* Glass cards */
.ssw-glass {
    position: relative;
    color: #fff;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 22px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

    .ssw-glass::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 22px;
        pointer-events: none;
        background: radial-gradient(600px 240px at 15% 0%, rgba(31,223,100,.18), transparent 70%), radial-gradient(520px 220px at 85% 10%, rgba(255,41,117,.16), transparent 70%), radial-gradient(680px 280px at 50% 110%, rgba(124,58,237,.14), transparent 70%);
    }

/* Typography bits */
.ssw-title {
    letter-spacing: -0.02em;
}

.ssw-eyebrow {
    font-size: .75rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin-bottom: .35rem;
}

.ssw-pill {
    font-size: .75rem;
    padding: .35rem .65rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.18);
    color: rgba(255,255,255,.70);
}

/* Inputs */
.ssw-input {
    background: rgba(0,0,0,.25) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    color: #fff !important;
    border-radius: 14px !important;
}

    .ssw-input:focus {
        box-shadow: 0 0 0 .25rem rgba(31,223,100,.18) !important;
        border-color: rgba(31,223,100,.45) !important;
    }

.ssw-quote {
    padding: .05rem .4rem;
    border-radius: .5rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
}

/* Tiles & stats */
.ssw-tile {
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.16);
    padding: 1rem;
}

.ssw-cover {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.14);
}

.ssw-cover-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.06);
    min-height: 180px;
}

.ssw-cover-fallback-text {
    color: rgba(255,255,255,.55);
    font-weight: 600;
}

.ssw-stat {
    height: 100%;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.14);
    padding: 1rem;
}

.ssw-stat-icon {
    font-size: 1.25rem;
    line-height: 1;
    margin-bottom: .5rem;
    opacity: .9;
}

.ssw-label {
    font-size: .8rem;
    color: rgba(255,255,255,.65);
    font-weight: 600;
    margin-bottom: .35rem;
}

.ssw-value {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.ssw-big {
    font-size: clamp(1.35rem, 2.2vw, 2.05rem);
    font-weight: 900;
    letter-spacing: -0.03em;
}

/* Badges */
.ssw-badge {
    font-size: .78rem;
    font-weight: 700;
    padding: .45rem .7rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(0,0,0,.18);
}

.ssw-badge-2 {
    background: rgba(255,255,255,.08);
}

/* Brand */
.ssw-brand {
    font-weight: 900;
    letter-spacing: -0.02em;
    font-size: 1.15rem;
}

.ssw-brand-a {
    color: rgba(255,255,255,.9);
}

.ssw-brand-b {
    color: rgba(31,223,100,.95);
}

.ssw-brand-c {
    color: rgba(255,41,117,.92);
}

/* Accent mapping (keeps your existing `colour` values) */
.ssw-accent-primary {
    color: #a855f7 !important;
}
/* purple */
.ssw-accent-secondary {
    color: #ff2991 !important;
}
/* pink */
.ssw-accent-tertiary {
    color: #1fdf64 !important;
}
/* spotify green */
.ssw-accent-info {
    color: #00d4ff !important;
}
/* blue */
.ssw-accent-success {
    color: #34d399 !important;
}
/* greener */
.ssw-accent-warning {
    color: #fbbf24 !important;
}
/* yellow */
.ssw-accent-error {
    color: #fb7185 !important;
}
/* red */

.ssw-hint {
    margin-top: 1rem;
    font-size: .9rem;
    color: rgba(255,255,255,.55);
    border-top: 1px solid rgba(255,255,255,.10);
    padding-top: 1rem;
}