:root {
    --app-dark: #030610;
    --card-dark: #0d111c;
    --button-dark: #0f1321;
    --spotify-green: #1DB954;
}

/* Size + design tokens (adjust here) */
#sc-al-main-view {
    --ui-max-width: 64rem;
    --ui-page-pad: clamp(18px, 2.5vw, 24px);
    --ui-gap: clamp(18px, 3vw, 24px);
    --ui-gap-lg: clamp(113px, 4vw, 156px);
    --left-max: 300px;
    --right-max: 250px;
    --card-radius: 2rem;
    --panel-bg: #0a0e18;
    --button-bg: #0f1321;
    --button-bg-hover: #1a1f35;
    --button-border: rgba(255, 255, 255, 0.1);
    --button-border-hover: rgba(255, 255, 255, 0.2);
    --album-art-size: clamp(6rem, 16vw, 7rem);
    --title-size: clamp(1rem, 4.5vw, 2.25rem);
    --desc-size: clamp(0.7rem, 2.5vw, 0.9rem);
    --icon-size: clamp(1.8rem, 4.2vw, 1.8rem);
    --label-size: clamp(0.7rem, 2.6vw, 0.95rem);
}

/* Force 100% height and prevent scroll on main page if it fits */
#p_listen {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    scrollbar-gutter: stable both-edges;
}

/* Utility classes to replace Tailwind */
.SC-AL-body {
    color: #d1d5db;
    position: relative;
    overflow: hidden;
    min-height: 100dvh;
}

.SC-AL-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0.375rem;
}

.SC-AL-tracks-view {
    width: 100%;
    height: 100vh;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    overflow: hidden;
}

.SC-AL-top-bar {
    width: 100%;
    max-width: 48rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    margin-top: 0.5rem;
}

.SC-AL-platform-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.SC-AL-platform-icon {
    font-size: 1.875rem;
    color: white;
}

.SC-AL-platform-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
}

.SC-AL-platform-link {
    transition: opacity 0.2s;
    color: #fff;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

.SC-AL-platform-link:hover {
    opacity: 0.9;
}

.SC-AL-tracks-container {
    width: 100%;
    max-width: 48rem;
    margin: 0 auto;
    flex-grow: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding-bottom: 4.25rem;
}

/* ensure tracks list itself can shrink in the flex container */
#sc_al_tracks_list {
    min-height: 0;
}

.SC-AL-tracks-header {
    font-size: 1.125rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.75rem;
}

.SC-AL-tracks-list-wrap {
    background-color: rgba(10, 14, 24, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    overflow: hidden;
}

.SC-AL-bottom-bar {
    width: 100%;
    max-width: 48rem;
    margin: 0 auto;
    margin-top: auto;
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.SC-AL-action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #d1d5db;
    transition: background-color 0.2s;
}

.SC-AL-action-btn:hover {
    background-color: #1a1f35;
}

.SC-AL-icon-xs {
    font-size: 0.75rem;
}

.SC-AL-lyrics-view {
    width: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    overflow-y: auto;
}

.SC-AL-lyrics-top-bar {
    width: 100%;
    max-width: 48rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    margin-top: 0.5rem;
}

.SC-AL-lyrics-container {
    width: 100%;
    max-width: 42rem;
    margin: 0 auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.SC-AL-lyrics-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1.5rem;
    text-align: center;
}

.SC-AL-lyrics-img {
    width: 5rem;
    height: 5rem;
    border-radius: 0.75rem;
    object-fit: cover;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.SC-AL-lyrics-content {
    color: #d1d5db;
    line-height: 1.625;
    white-space: pre-wrap;
    font-size: 1rem;
}

/* Dynamic track row styles */
.SC-AL-track-row {
    padding: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.2s;
}

.SC-AL-track-row:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.SC-AL-track-row:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.SC-AL-track-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-grow: 1;
    margin-right: 1rem;
    position: relative;
}

.SC-AL-track-art {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.375rem;
    background-color: #1a1a2e;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 10;
}

.SC-AL-track-num {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    font-size: 10px;
    color: #6b7280;
    font-weight: 700;
}

.SC-AL-track-gloss {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.05), transparent);
}

.SC-AL-track-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.SC-AL-track-title-wrap {
    flex-grow: 1;
    z-index: 0;
}

.SC-AL-track-title-text {
    font-size: 0.7rem;
    font-weight: 500;
    color: white;
}

.SC-AL-track-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.SC-AL-play-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.SC-AL-play-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.SC-AL-play-icon {
    color: white;
    font-size: 0.75rem;
    margin-left: 0.125rem;
}

.SC-AL-lyrics-btn {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
    transition: background-color 0.2s;
}

.SC-AL-lyrics-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.SC-AL-lyrics-icon {
    font-size: 18px;
}

.SC-AL-icon-white {
    color: white;
}

/* Custom gloss effect for the album placeholder */
.SC-AL-album-gloss {
    background: linear-gradient(135deg, #3b3b5e 0%, #1a1a2e 100%);
    position: relative;
    overflow: hidden;
}


.SC-AL-album-gloss::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.4) 100%);
    pointer-events: none;
    box-sizing: border-box;
}

/* Transition styles for sliding views */
#sc-al-main-view,
#tracks-view {
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.SC-AL-slide-out-left {
    transform: translateX(-100vw);
    opacity: 0;
}

.SC-AL-slide-in-right {
    transform: translateX(0) !important;
    opacity: 1 !important;
}

/* Initially hide tracks view off-screen to the right */
#tracks-view,
#sc_al_lyrics_view {
    transform: translateX(100vw);
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
}

/* Higher z-index for lyrics view to slide over tracks view if needed, or same level if replacing */
#sc_al_lyrics_view {
    z-index: 30;
}

/* === Marquee / Sliding Text Styles === */
.SC-AL-marquee-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    /* Changed mask to only fade on the right side to prevent text from looking hidden on the left */
    mask-image: linear-gradient(to right, black 0%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 0%, black 85%, transparent 100%);
}

/* Default state: no animation, text truncated with ellipsis if it overflows (fallback) */
.SC-AL-marquee-text {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Allow the track title to wrap up to two lines when it doesn't fit on one line */
.SC-AL-track-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    line-height: 1.2;
    max-height: calc(1.2em * 2);
}

/* Applied via JS only if text is overflowing */
.SC-AL-animate-marquee {
    display: inline-block;
    padding-left: 0;
    animation: marquee-ping-pong 8s ease-in-out infinite alternate;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
}

/* Container */
.SC-AL-main {
    position: absolute;
    inset: 0;
    width: 100%;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ui-page-pad);
}

.SC-AL-frame {
    width: 100%;
    max-width: var(--ui-max-width);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    box-sizing: border-box;
    padding-inline: var(--ui-page-pad);
}

.SC-AL-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ui-gap);
    width: 100%;
    max-width: var(--ui-max-width);
    margin: 0 auto;
    box-sizing: border-box;
    padding-inline: calc(var(--ui-page-pad) / 2);
}

/* Left: album header */
.SC-AL-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(16px, 3vw, 24px);
    width: 100%;
    max-width: var(--left-max);
}

.SC-AL-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(16px, 3vw, 24px);
}

.SC-AL-album-gloss {
    width: var(--album-art-size);
    height: var(--album-art-size);
    border-radius: 1.25rem;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #3b3b5e 0%, #1a1a2e 100%);
    box-shadow: 0 20px 40px rgba(128, 0, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.SC-AL-album-gloss::after {
    content: "";
    position: absolute;
    inset: -50% -50% auto auto;
    width: 200%;
    height: 200%;
    pointer-events: none;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.4) 100%);
    box-sizing: border-box;
}

.SC-AL-title {
    margin: 0;
    font-weight: 900;
    color: #fff;
    font-size: var(--title-size);
    line-height: 1.1;
}

.SC-AL-panel {
    background: var(--panel-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1.5rem;
    padding: clamp(10px, 3vw, 20px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    position: relative;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

.SC-AL-panel p {
    margin: 0;
    color: #9ca3af;
    font-size: var(--desc-size);
    line-height: 1.5;
}

/* Combined panel header (art + title) */
.SC-AL-panel--with-art {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 3vw, 20px);
}

.SC-AL-panel-header {
    display: flex;
    align-items: center;
    gap: clamp(16px, 3vw, 24px);
}

.SC-AL-title-gradient {
    background: linear-gradient(90deg, #3b82f6, #a855f7, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.SC-AL-panel-desc {
    margin: 0;
}

.SC-AL-grid+.SC-AL-grid,
.SC-AL-grid-spaced {
    margin-top: var(--ui-gap);
}

.SC-AL-other-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: var(--ui-gap);
}

/* Right: links */
.SC-AL-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: var(--right-max);
}

.SC-AL-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ui-gap);
    width: 100%;
}

.SC-AL-btn {
    display: grid;
    place-items: center;
    gap: 0;
    aspect-ratio: 1/1;
    border-radius: var(--card-radius);
    background: var(--button-bg);
    border: 1px solid transparent;
    /* base transparent border to avoid double edge */
    padding: clamp(10px, 2.5vw, 15px);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
    position: relative;
    align-content: center;
}

/* Gradient border ring with proper rounding using CSS mask */
.SC-AL-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    /* border thickness */
    border-radius: inherit;
    background: linear-gradient(90deg, #3b82f6, #a855f7, #ec4899);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    box-sizing: border-box;
}

.SC-AL-btn:hover {
    background: var(--button-bg-hover);
    transform: translateY(-1px);
}

/* Smaller variant for the Other button */
.SC-AL-btn--other {
    width: clamp(4.5rem, 18vw, 6rem);
    aspect-ratio: 2/1;
    /* padding: clamp(7px, 2vw, 10px); */
}

.SC-AL-btn--other i {
    font-size: calc(var(--icon-size) * 0.85);
}

.SC-AL-btn--other span {
    font-size: calc(var(--label-size) * 0.9);
}

.SC-AL-btn i {
    color: #fff;
    font-size: var(--icon-size);
}

.SC-AL-btn span {
    font-size: var(--label-size);
    color: #9ca3af;
    font-weight: 600;
    text-align: center;
}

.SC-AL-animate-marquee {
    animation-name: marquee-ping-pong-dynamic !important;
    /* Ensure --move-x is set by JS, default to -100% just in case */
}

/* === Keyframes === */
@keyframes marquee-ping-pong {

    0%,
    15% {
        transform: translateX(0);
    }

    85%,
    100% {
        transform: translateX(calc(-100% + 100cqw));
    }

}

/* Redefine keyframes to use CSS variable for precise scrolling distance */
@keyframes marquee-ping-pong-dynamic {

    0%,
    15% {
        transform: translateX(0);
    }

    85%,
    100% {
        transform: translateX(var(--move-x, -100%));
    }
}


/* --- p_listen overrides: keep title intact and square art --- */
#p_listen .SC-AL-title {
    word-break: keep-all;
    overflow-wrap: normal;
    hyphens: none;
}

#p_listen .SC-AL-album-gloss,
#p_listen .SC-AL-img {
    aspect-ratio: 1 / 1;
}

#p_listen .SC-AL-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#p_listen .SC-AL-title,
#p_listen .SC-AL-title * {
    word-break: keep-all;
    overflow-wrap: normal;
    hyphens: none;
}

/* Keep album second-line phrase on one line globally */
.SC-AL-title-gradient {
    white-space: nowrap;
    display: inline-block;
}

/* === Responsive styles === */
@media (min-width: 768px) {
    .SC-AL-tracks-view {
        padding: 1.5rem;
    }

    .SC-AL-top-bar {
        margin-top: 1rem;
    }

    .SC-AL-platform-info {
        gap: 1rem;
    }

    .SC-AL-platform-icon {
        font-size: 2.25rem;
    }

    .SC-AL-platform-name {
        font-size: 1.5rem;
    }

    .SC-AL-platform-link {
        font-size: 0.875rem;
        padding: 0.5rem 1.25rem;
    }

    .SC-AL-tracks-header {
        margin-bottom: 1rem;
    }

    .SC-AL-track-row {
        padding: 1rem;
    }

    .SC-AL-track-left {
        gap: 1rem;
    }

    .SC-AL-track-art {
        width: 3rem;
        height: 3rem;
    }

    .SC-AL-track-title-text {
        font-size: 1rem;
    }

    .SC-AL-track-right {
        gap: 0.75rem;
    }

    .SC-AL-play-btn {
        width: 2.25rem;
        height: 2.25rem;
    }

    .SC-AL-lyrics-btn {
        width: 2.25rem;
        height: 2.25rem;
    }

    .SC-AL-lyrics-icon {
        font-size: 20px;
    }

    .SC-AL-lyrics-view {
        padding: 1.5rem;
    }

    .SC-AL-lyrics-top-bar {
        margin-top: 1rem;
    }

    .SC-AL-lyrics-title {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }

    .SC-AL-lyrics-img {
        width: 6rem;
        height: 6rem;
    }

    .SC-AL-lyrics-content {
        font-size: 1.125rem;
    }

    /* Desktop layout: place header and action grid side-by-side with larger gap */
    .SC-AL-content {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--ui-gap-lg);
    }

    /* Allow left column to take its fixed max width and right column to flex */
    .SC-AL-left {
        flex: 0 0 var(--left-max);
    }

    .SC-AL-right {
        flex: 1 1 var(--right-max);
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
    }
}

/* ===== OpaHiAI Show styles (moved from show.css) ===== */
:root {
    --page-max: 1200px;
    --accent: #1f6feb;
}



.show-header {
    padding: 18px 20px;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.show-header-inner {
    max-width: var(--page-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
}

.show-back {
    color: #cfe3ff;
    text-decoration: none;
    font-weight: 600;
}

.show-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
}

.show-main {
    min-height: calc(100vh - 82px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 16px;
}

.show-container {
    width: 100%;
    max-width: var(--page-max);
}

.show-hero {
    width: 100%;
    height: 40vh;
    border-radius: 12px;
    background-image: url('../img/theshow/showcover.png');
    background-size: cover;
    background-position: center center;
    box-shadow: 0 20px 60px rgba(2, 6, 23, 0.7);
    margin-bottom: 18px;
}

.show-intro {
    color: #dbeafe;
    font-size: 1.05rem;
    margin-bottom: 18px;
}

.show-player {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16:9 */
    height: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(2, 6, 23, 0.7);
}

.show-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.show-actions {
    margin-top: 14px;
}

.show-yt {
    display: inline-block;
    background: #fff;
    color: #0b253f;
    padding: 10px 14px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
}

@media (max-width:640px) {
    .show-title {
        font-size: 1.2rem;
    }

    .show-intro {
        font-size: 1rem;
    }
}


/* Styles for the Prompts section to ensure it takes up the full viewport height */
#p_prompts {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #0a0a14;
    /* A dark background to match the theme */

    background-color: #050505;
    margin: 0;
    padding: 50px 0;
    font-family: 'Inter', sans-serif;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: #fff;
}

:root {
    --neon-blue: #00f3ff;
    --neon-purple: #bc13fe;
    --neon-red: #ff0055;
    --neon-green: #0aff00;
    --surface-card: #0a0a0a;
    --surface-border: #222;
}

/* 2. CAROUSEL STRUCTURE */
.fp-carousel-wrapper {
    flex: 1;
    position: relative;
    width: 100%;
    height: 100%;
}

.fp-carousel-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    height: 100%;
    width: 100%;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.fp-carousel-track::-webkit-scrollbar {
    display: none;
}

.fp-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 2vh 4vw;
}

/* 3. CONTENT LAYOUT (Grid) */
.fp-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4vw;
    width: 100%;
    max-width: 1400px;
    height: 100%;
    min-height: 0;
    align-items: center;
}

.fp-text-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.fp-visual-column {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    position: relative;
    min-height: 0;
}

/* 4. MOBILE / RESPONSIVE */
@media (max-width: 1024px) {
    .fp-slide {
        padding: 16px;
    }

    .fp-content-grid {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) auto;
        gap: 16px;
        height: 100%;
    }

    .fp-text-column {
        align-items: center;
        text-align: center;
        order: 2;
        justify-content: flex-start;
        overflow-y: auto;
        max-height: 40vh;
    }

    .fp-visual-column {
        order: 1;
        height: 100%;
        align-items: flex-end;
    }

    h1 {
        font-size: 28px !important;
        margin-bottom: 12px !important;
    }

    h2 {
        font-size: 20px !important;
        margin-bottom: 8px !important;
    }

    .fp-result-text {
        font-size: 14px !important;
        margin-bottom: 16px !important;
    }

    .fp-hypothesis-box {
        padding: 12px;
    }

    .fp-mobile-frame {
        max-height: 45vh !important;
    }
}

/* 5. COMPONENTS */

/* Badges */
.fp-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
    width: fit-content;
}

/* Typography */
h1 {
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 800;
    letter-spacing: -1px;
    margin: 0 0 24px 0;
    background: linear-gradient(135deg, #fff 0%, #888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

h2 {
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px 0;
    letter-spacing: -0.5px;
}

.fp-result-text {
    font-size: clamp(16px, 1.2vw, 20px);
    line-height: 1.5;
    color: #e0e0e0;
    margin-bottom: 24px;
    font-weight: 400;
}

/* Hypothesis Box */
.fp-hypothesis-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--surface-border);
    border-left-width: 4px;
    border-radius: 8px;
    padding: 20px;
    position: relative;
}

.fp-hypothesis-header {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.fp-hypothesis-content {
    font-size: clamp(13px, 1vw, 15px);
    color: #ccc;
    text-align: left;
    line-height: 1.5;
}

/* Phone Frame */
.fp-mobile-frame {
    height: 100%;
    width: auto;
    aspect-ratio: 9/16;
    max-height: 75vh;
    background: #000;
    border-radius: 24px;
    /* border: 6px solid #1a1a1a; */
    box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

.fp-mobile-frame iframe,
.fp-mobile-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
}

/* Nav Buttons */
.fp-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.fp-nav-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%) scale(1.05);
}

.fp-nav-prev {
    left: 20px;
}

.fp-nav-next {
    right: 20px;
}

/* Dots */
.fp-dots-container {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 100;
}

.fp-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.fp-dot.fp-active {
    background: #fff;
    transform: scale(1.2);
}