* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

:root {

    --bg: #0f1115;
    --bg2: #161920;

    --card: rgba(24, 27, 34, .78);

    --text: #ffffff;
    --sub: rgba(255, 255, 255, .68);

    --accent: #ff9966;
    --accent2: #ff5e62;

    --green1: #43c97b;
    --green2: #1fa463;

    --red1: #ff5757;
    --red2: #bf1d35;

    --border: rgba(255, 255, 255, .08);

    --glass: rgba(255, 255, 255, .05);
    --tag-bg: rgba(255, 255, 255, .06);

    --desc-btn: rgba(255, 255, 255, .03);

    --shadow: rgba(0, 0, 0, .42);

}

body.light {

    --bg: #fff7f2;
    --bg2: #fff1eb;

    --card: rgba(255, 255, 255, .84);

    --text: #171717;
    --sub: rgba(0, 0, 0, .58);

    --glass: rgba(255, 255, 255, .56);
    --tag-bg: rgba(255, 255, 255, .58);

    --desc-btn: rgba(255, 255, 255, .16);

    --border: rgba(0, 0, 0, .06);

    --shadow: rgba(0, 0, 0, .10);

}

html {
    scroll-behavior: smooth;
}

body {

    font: 500 15px "Space Grotesk", sans-serif;

    background:
        radial-gradient(circle at top left, rgba(255, 153, 102, .22), transparent 32%),
        radial-gradient(circle at bottom right, rgba(255, 94, 98, .16), transparent 34%),
        linear-gradient(145deg, var(--bg), var(--bg2));

    color: var(--text);

    min-height: 100vh;

    padding: 18px;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    overflow-x: hidden;

    transition: .3s ease;
}

/* BACKGROUND GLOWS */

.bg-blur {
    position: fixed;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    filter: blur(90px);
    z-index: -1;
    opacity: .22;
    pointer-events: none;
}

.blur1 {
    top: -100px;
    left: -80px;
    background: #ff9966;
}

.blur2 {
    bottom: -120px;
    right: -90px;
    background: #ff5e62;
}

/* CONTAINER */

.container {

    position: relative;

    width: 100%;
    max-width: 520px;

    margin-top: 12px;
    margin-bottom: 110px;

    padding: 32px 22px;

    border-radius: 32px;

    background: var(--card);

    border: 1px solid var(--border);

    backdrop-filter: blur(22px);

    box-shadow:
        0 25px 60px var(--shadow),
        inset 0 1px 0 rgba(255, 255, 255, .06);

    overflow: hidden;
}

/* RIBBON */

.ribbon {

    position: absolute;

    top: 20px;
    left: -58px;

    width: 220px;

    padding: 10px 0;

    text-align: center;

    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 2.8px;

    color: #fff;

    background:
        linear-gradient(135deg, var(--green1), var(--green2));

    transform: rotate(-35deg);

    box-shadow:
        0 10px 25px rgba(34, 197, 94, .28);
}

/* TOPBAR */

.topbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 18px;
}

.theme-btn {

    width: 50px;
    height: 50px;

    border: none;
    border-radius: 50%;

    cursor: pointer;

    font-size: 18px;

    color: #fff;

    background:
        linear-gradient(135deg, var(--accent), var(--accent2));

    box-shadow:
        0 10px 24px rgba(255, 120, 100, .28);

    transition: .25s ease;
}

.theme-btn:hover {
    transform: translateY(-2px) scale(1.04);
}

/* TITLE */

h1 {

    text-align: center;

    font: 700 2.55rem "Clash Display", sans-serif;

    line-height: 1;
    letter-spacing: -1.6px;

    margin-bottom: 14px;

    background:
        linear-gradient(135deg, var(--accent), var(--accent2));

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.subtitle {

    max-width: 330px;

    margin: 0 auto 34px;

    text-align: center;

    line-height: 1.8;

    font-size: .92rem;

    color: var(--sub);
}

/* PACKS */

.pack-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pack {

    padding: 20px;

    border-radius: 24px;

    background: var(--glass);

    border: 1px solid var(--border);

    box-shadow:
        0 12px 24px rgba(0, 0, 0, .12);

    transition: .25s ease;
}

.pack:hover {
    transform: translateY(-2px);
}

.unavailable-pack,
.coming-pack {
    opacity: .72;
    filter: saturate(.82);
}

/* GIF WINDOW */

.preview-circle-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.preview-circle {

    width: 110px;
    height: 110px;

    border-radius: 50%;

    padding: 4px;

    background:
        linear-gradient(135deg, var(--accent), var(--accent2));

    box-shadow:
        0 0 22px rgba(255, 120, 100, .30),
        0 10px 30px rgba(0, 0, 0, .20);

    overflow: hidden;
}

.preview-circle img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 50%;

    display: block;
}

/* HEADER */

.pack-header {

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;

    margin-bottom: 16px;
}

/* TITLE */

.pack-title {

    display: flex;
    align-items: center;
    gap: 10px;

    font: 700 1.12rem "Clash Display", sans-serif;

    letter-spacing: -.4px;
}

.folder {
    font-size: 1.1rem;
    opacity: .95;
}

/* STATUS */

.status {

    position: relative;

    padding: 8px 13px;

    border-radius: 999px;

    font-size: .7rem;
    font-weight: 700;

    letter-spacing: 1px;

    white-space: nowrap;

    color: #fff;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .08);
}

/* AVAILABLE */

.available {

    background:
        linear-gradient(135deg, var(--green1), var(--green2));

    box-shadow:
        0 0 12px rgba(67, 201, 123, .38);

    animation: pulse 1.8s infinite;
}

.available::after {

    content: "";

    position: absolute;

    top: 0;
    left: -55%;

    width: 45%;
    height: 100%;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .7),
            transparent);

    transform: skewX(-20deg);

    animation: shine 2.4s infinite;
}

.unavailable {

    background:
        linear-gradient(135deg, var(--red1), var(--red2));
}

.coming {

    background:
        linear-gradient(135deg, var(--accent), var(--accent2));
}

/* ANIMATIONS */

@keyframes pulse {

    50% {
        box-shadow:
            0 0 20px rgba(67, 201, 123, .6);
    }

}

@keyframes shine {

    100% {
        left: 130%;
    }

}

/* TAGS */

.tags {

    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-bottom: 14px;
}

.tag {

    padding: 9px 13px;

    border-radius: 12px;

    font-size: .78rem;
    font-weight: 700;

    background: var(--tag-bg);

    border: 1px solid var(--border);

    backdrop-filter: blur(12px);
}

/* PRICE TAG */

.price-tag {
    font-size: 1rem;

    background:
        linear-gradient(135deg,
            rgba(255, 153, 102, .22),
            rgba(255, 94, 98, .18));

    border: 1px solid rgba(255, 140, 120, .28);

    color: #fff;

    box-shadow:
        0 0 18px rgba(255, 120, 100, .18);
}

body.light .price-tag {
    color: #000;
}

/* DESCRIPTION */

.desc {

    max-height: 0;

    overflow: hidden;

    opacity: 0;

    transition: .35s ease;

    color: var(--sub);

    line-height: 1.7;

    font-size: .86rem;
}

.pack.desc-open .desc {

    max-height: 220px;

    opacity: 1;

    margin-top: 10px;
}

/* IMAGE PREVIEW */

.image-preview {

    max-height: 0;

    overflow: hidden;

    opacity: 0;

    transition: .35s ease;
}

.pack.preview-open .image-preview {

    max-height: 400px;

    opacity: 1;

    margin-top: 16px;
}

.image-preview img {

    width: 100%;

    border-radius: 18px;

    display: block;

    border: 1px solid var(--border);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, .25);

    object-fit: cover;
}

/* TOGGLES */

.toggle-group {

    display: flex;
    gap: 12px;
    flex-wrap: wrap;

    margin-top: 16px;
}

.toggle-btn {

    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 10px 15px;

    border: none;
    outline: none;

    border-radius: 999px;

    background: var(--desc-btn);

    border: 1px solid rgba(255, 255, 255, .04);

    backdrop-filter: blur(10px);

    cursor: pointer;

    font-family: "Space Grotesk", sans-serif;

    font-size: .8rem;
    font-weight: 600;

    color: var(--sub);

    transition: .25s ease;
}

.toggle-btn:hover {

    transform: translateY(-1px);

    background: rgba(255, 255, 255, .05);

    color: var(--text);
}

.toggle-icon {

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: .88rem;

    opacity: .72;

    transition: .28s ease;
}

.pack.desc-open .desc-btn .toggle-icon {
    transform: rotate(180deg);
}

.pack.preview-open .preview-btn-toggle .toggle-icon {
    transform: rotate(180deg);
}

/* END BANNER */

.end-banner {

    margin-top: 24px;

    padding: 16px 18px;

    border-radius: 22px;

    background:
        linear-gradient(135deg,
            rgba(255, 153, 102, .16),
            rgba(255, 94, 98, .12));

    border: 1px solid rgba(255, 255, 255, .08);

    backdrop-filter: blur(16px);

    box-shadow:
        0 10px 28px rgba(255, 120, 100, .10);
}

.end-content {

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    flex-wrap: wrap;
}

.end-text {

    font-size: .9rem;
    font-weight: 700;

    color: var(--text);
}

/* MINI BUTTON */

.mini-preview-btn {

    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 14px;

    border-radius: 999px;

    text-decoration: none;

    font-size: .76rem;
    font-weight: 700;

    color: #fff;

    background:
        linear-gradient(135deg, var(--accent), var(--accent2));

    box-shadow:
        0 8px 18px rgba(255, 120, 100, .20);

    transition: .25s ease;
}

.mini-preview-btn:hover {

    transform: translateY(-1px);

    box-shadow:
        0 10px 24px rgba(255, 120, 100, .28);
}

.mini-preview-btn svg {
    flex-shrink: 0;
}

/* FLOATING BUTTON */

.preview-fixed {

    position: fixed;

    right: 20px;
    bottom: 20px;

    z-index: 999;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 15px 20px;

    border-radius: 999px;

    text-decoration: none;

    font-size: .88rem;
    font-weight: 700;

    color: #fff;

    background:
        linear-gradient(135deg, var(--accent), var(--accent2));

    box-shadow:
        0 0 18px rgba(255, 120, 100, .45),
        0 12px 30px rgba(255, 120, 100, .28);

    backdrop-filter: blur(12px);

    animation: floatGlow 2.2s infinite;

    transition:
        opacity .3s ease,
        transform .3s ease;

    opacity: 0;
    pointer-events: none;

    transform:
        translateY(20px) scale(.96);
}

.preview-fixed.show {

    opacity: 1;
    pointer-events: auto;

    transform:
        translateY(0) scale(1);
}

.preview-fixed:hover {
    transform:
        translateY(-2px) scale(1.03);
}

.preview-fixed svg {
    flex-shrink: 0;
}

/* FLOAT */

@keyframes floatGlow {

    50% {
        transform: translateY(-3px);
        box-shadow:
            0 0 24px rgba(255, 120, 100, .58),
            0 16px 36px rgba(255, 120, 100, .34);
    }

}

/* FOOTER */

.footer {

    margin-top: 26px;

    text-align: center;

    font-size: .78rem;

    color: var(--sub);

    line-height: 1.7;
}

/* MOBILE */

@media(max-width:640px) {

    body {
        padding: 12px;
    }

    .container {

        padding: 26px 16px;

        border-radius: 28px;
    }

    .ribbon {

        top: 18px;
        left: -72px;

        width: 230px;

        font-size: .7rem;
    }

    h1 {

        font-size: 2rem;

        margin-bottom: 12px;
    }

    .subtitle {

        font-size: .84rem;

        margin-bottom: 28px;
    }

    .pack {

        padding: 17px;
    }

    .preview-circle {

        width: 92px;
        height: 92px;
    }

    .pack-header {
        align-items: flex-start;
    }

    .pack-title {

        font-size: 1rem;

        line-height: 1.3;
    }

    .folder {
        font-size: 1rem;
    }

    .status {

        font-size: .64rem;

        padding: 7px 11px;
    }

    .tags {
        gap: 8px;
    }

    .tag {

        font-size: .72rem;

        padding: 8px 11px;
    }

    .toggle-btn {

        font-size: .74rem;
    }

    .theme-btn {

        width: 46px;
        height: 46px;
    }

    .preview-fixed {

        right: 14px;
        bottom: 14px;

        padding: 13px 17px;

        font-size: .78rem;
    }

    .end-banner {
        padding: 15px;
    }

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

    .end-text {
        font-size: .82rem;
    }

    .mini-preview-btn {

        font-size: .72rem;

        padding: 9px 12px;
    }

    .footer {

        font-size: .72rem;

        padding-bottom: 6px;
    }

}

.lazy-img {
    opacity: 0;
    transition: opacity .3s ease;
}

.lazy-img.loaded {
    opacity: 1;
}