:root {
    --blue: #0a84ff;
    --blue2: #dff1ff;
    --ink: #152033;
    --muted: #6b7280;
    --bg: #f4f8fc;
    --card: #fff;
    --line: #e7edf4
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    background: var(--bg);
    color: var(--ink)
}

a {
    color: inherit;
    text-decoration: none
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    height: 72px;
    background: rgba(255, 255, 255, .93);
    backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 max(24px, calc((100% - 1200px)/2));
    border-bottom: 1px solid var(--line)
}

.brand {
    font-weight: 800;
    font-size: 24px;
    color: var(--blue)
}

.topbar nav,
.userbox {
    display: flex;
    gap: 22px;
    align-items: center
}

.topbar nav a {
    font-size: 13px;
    font-weight: 700
}

.userbox {
    font-size: 14px
}

.container {
    max-width: 1200px;
    margin: auto;
    padding: 28px 20px 80px
}

.hero-slider {
    height: 330px;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #dff1ff, #fff)
}

.slide {
    display: none;
    width: 100%;
    height: 100%
}

.slide.active {
    display: block
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.fallback {
    padding: 70px
}

.fallback h1 {
    font-size: 48px;
    margin: 0 0 12px
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin: 42px 0 20px
}

.section-head h1 {
    margin: 0;
    font-size: 32px
}

.section-head p {
    color: var(--muted)
}

.filters {
    display: flex;
    gap: 8px
}

.filters button,
.pack {
    border: 0;
    border-radius: 999px;
    padding: 11px 16px;
    background: white;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .06)
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px
}

.card {
    background: var(--card);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(31, 55, 80, .08);
    border: 1px solid var(--line)
}

.card>img {
    width: 100%;
    aspect-ratio: 1.15;
    object-fit: cover
}

.card-body {
    padding: 18px
}

.card h3 {
    margin: 8px 0
}

.card p {
    color: var(--muted);
    min-height: 42px
}

.pill {
    font-size: 11px;
    font-weight: 800;
    color: var(--blue)
}

.price {
    font-weight: 800;
    margin: 12px 0
}

.btn {
    display: inline-block;
    background: var(--blue);
    color: white;
    border: 0;
    padding: 12px 18px;
    border-radius: 14px;
    font-weight: 700;
    cursor: pointer
}

footer {
    padding: 32px 20px;
    text-align: center;
    color: var(--muted);
    background: #fff;
    border-top: 1px solid var(--line);
    line-height: 1.8
}

.bottomnav {
    display: none
}

.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, .45);
    padding: 30px
}

.modal.open {
    display: grid;
    place-items: center
}

.modal-card {
    position: relative;
    max-width: 760px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    background: #fff;
    border-radius: 28px;
    padding: 28px
}

.close {
    position: absolute;
    right: 18px;
    top: 14px;
    border: 0;
    background: #eef2f7;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 22px
}

.gallery {
    display: flex;
    gap: 10px;
    overflow: auto
}

.gallery img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 20px
}

.auth {
    max-width: 480px;
    margin: 50px auto;
    background: white;
    padding: 32px;
    border-radius: 24px
}

.auth form,
.admin-form {
    display: grid;
    gap: 14px
}

.auth label,
.admin-form label {
    display: grid;
    gap: 6px
}

input,
textarea,
select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #dce4ee;
    border-radius: 12px;
    background: white
}

textarea {
    min-height: 120px
}

.flash,
.notice {
    padding: 14px 16px;
    border-radius: 14px;
    margin-bottom: 18px
}

.flash.ok {
    background: #e8fff2
}

.flash.error {
    background: #fff0f0
}

.notice {
    background: #eaf5ff;
    display: flex;
    gap: 12px
}

.profile-head {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.credit-packs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 18px 0 26px
}

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px
}

.stat {
    background: white;
    border-radius: 20px;
    padding: 22px
}

.stat span {
    display: block;
    color: var(--muted)
}

.stat strong {
    font-size: 34px
}

.admin-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px
}

.admin-layout aside {
    background: #fff;
    border-radius: 20px;
    padding: 18px;
    height: max-content;
    display: grid;
    gap: 12px
}

.admin-content {
    min-width: 0
}

table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 16px;
    overflow: hidden
}

th,
td {
    padding: 12px;
    border-bottom: 1px solid var(--line);
    text-align: left
}

@media(max-width:900px) {
    .grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .topbar nav {
        display: none
    }

    .stats {
        grid-template-columns: repeat(2, 1fr)
    }

    .admin-layout {
        grid-template-columns: 1fr
    }

    .admin-layout aside {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media(max-width:640px) {
    .container {
        padding-bottom: 100px
    }

    .topbar {
        height: 62px;
        padding: 0 16px
    }

    .userbox span {
        display: none
    }

    .hero-slider {
        height: 220px;
        border-radius: 22px
    }

    .fallback {
        padding: 32px
    }

    .fallback h1 {
        font-size: 32px
    }

    .section-head {
        align-items: flex-start;
        gap: 16px;
        flex-direction: column
    }

    .grid {
        grid-template-columns: 1fr
    }

    .topbar nav {
        display: none
    }

    .bottomnav {
        position: fixed;
        z-index: 30;
        bottom: 0;
        left: 0;
        right: 0;
        height: 68px;
        background: #fff;
        border-top: 1px solid var(--line);
        display: flex;
        justify-content: space-around;
        align-items: center
    }

    .bottomnav a {
        display: grid;
        text-align: center;
        font-size: 20px
    }

    .bottomnav span {
        font-size: 10px;
        font-weight: 700
    }

    .profile-head {
        align-items: flex-start;
        gap: 16px;
        flex-direction: column
    }

    .stats {
        grid-template-columns: 1fr
    }

    .modal {
        padding: 10px
    }

    .admin-layout aside {
        grid-template-columns: repeat(2, 1fr)
    }
}

.floating-promo {
    position: fixed;
    z-index: 15;
    width: 150px
}

.floating-promo img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18)
}

.floating-promo button {
    position: absolute;
    right: -8px;
    top: -8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 0;
    background: #111;
    color: #fff
}

.floating-promo.top_left {
    top: 90px;
    left: 16px
}

.floating-promo.top_right {
    top: 90px;
    right: 16px
}

.floating-promo.bottom_left {
    bottom: 90px;
    left: 16px
}

.floating-promo.bottom_right {
    bottom: 90px;
    right: 16px
}

@media(max-width:900px) {
    .floating-promo {
        width: 105px
    }
}


.grid {
    grid-template-columns: repeat(4, 1fr)
}

.product-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    background: #fff;
    padding: 30px;
    border-radius: 30px
}

.product-gallery img {
    width: 220px;
    border-radius: 24px
}

.footer-icons {
    display: flex;
    justify-content: center;
    gap: 25px;
    font-size: 32px
}

@media(max-width:640px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px
    }

    .card-body {
        padding: 12px
    }

    .product-page {
        grid-template-columns: 1fr
    }

    .product-gallery img {
        width: 100%
    }
}
.library-head{background:#fff;padding:30px;border-radius:30px;margin-bottom:30px}
.library-sidebar{display:flex;gap:15px;margin-top:25px}
.library-sidebar a{background:#f2f8ff;padding:18px;border-radius:20px;display:flex;flex-direction:column;align-items:center;gap:8px;color:#0a84ff;font-weight:700}
.library-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.library-card{background:#fff;border-radius:25px;padding:15px;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.library-card img{width:100%;border-radius:20px}
.selected-credit{padding:15px;background:#fff;border-radius:15px;margin:20px 0}
@media(max-width:640px){
.library-grid{grid-template-columns:repeat(2,1fr)}
.library-sidebar{display:grid;grid-template-columns:repeat(3,1fr)}
}

/* App Store product upgrade */
.app-product-page{background:#fff;border-radius:32px;padding:30px;display:grid;grid-template-columns:360px 1fr;gap:35px}
.app-icon{width:260px;height:260px;border-radius:40px;object-fit:cover;box-shadow:0 15px 35px rgba(0,0,0,.12)}
.app-meta{display:flex;gap:10px;flex-wrap:wrap}
.meta-item{background:#eef6ff;padding:8px 14px;border-radius:20px}
.mobile-buy{display:none}
@media(max-width:700px){
.app-product-page{grid-template-columns:1fr;padding:20px}
.app-icon{width:180px;height:180px}
.mobile-buy{display:block;position:fixed;bottom:80px;left:20px;right:20px;z-index:30}
}


/* FINAL APPSTORE */

.btn-info{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
width:100%;
background:#0a84ff;
color:#fff;
padding:12px;
border-radius:18px;
font-weight:700;
}

.info-icon{font-size:20px}

.app-page{
background:#fff;
padding:30px;
border-radius:32px;
}

.app-header{
display:flex;
gap:25px;
align-items:center;
}

.app-icon{
width:150px;
height:150px;
border-radius:35px;
object-fit:cover;
}

.app-meta{
display:flex;
gap:10px;
flex-wrap:wrap;
color:#6b7280;
}

.screenshots{
display:flex;
gap:15px;
overflow:auto;
margin:30px 0;
}

.screenshots img{
width:240px;
height:420px;
object-fit:cover;
border-radius:24px;
}

.purchase-box{
position:sticky;
bottom:20px;
background:white;
padding:18px;
border-radius:25px;
box-shadow:0 10px 30px #ddd;
display:flex;
justify-content:space-between;
align-items:center;
}

.buy-button{
background:#0a84ff;
color:white;
border:0;
padding:15px 30px;
border-radius:20px;
font-weight:800;
}

.pack.selected{
background:#0a84ff;
color:white;
}

#paymentBrick_container{
min-height:500px;
}

@media(max-width:640px){
.app-header{
flex-direction:column;
align-items:flex-start;
}
.app-icon{
width:120px;
height:120px;
}
.app-page{
padding:18px;
}
.screenshots img{
width:180px;
height:300px;
}
.purchase-box{
position:fixed;
left:10px;
right:10px;
bottom:75px;
z-index:40;
}
}

.card p{display:none}.btn-info{display:block;margin-top:12px;background:#0a84ff;color:#fff;padding:12px;border-radius:14px;text-align:center;font-weight:700}.stars,.rating{color:#ffb400;font-size:20px}.app-actions{display:flex;gap:10px;margin:20px 0}.app-actions button{padding:12px 18px;border:0;border-radius:14px;background:#eef5ff}.app-sections{margin-top:35px}.mini-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}.mini-card{background:#fff;padding:12px;border-radius:18px;display:flex;flex-direction:column;gap:8px}.mini-card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px}@media(max-width:800px){.mini-grid{grid-template-columns:repeat(3,1fr)}}


/* App Store complete integration */
.store-shelf{margin:34px 0}.shelf-title{display:flex;align-items:end;justify-content:space-between;margin-bottom:14px}.shelf-title h2,.library-section h2{margin:0}.shelf-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.store-card{background:#fff;border:1px solid #edf0f5;border-radius:22px;padding:12px;box-shadow:0 7px 24px rgba(20,30,55,.06)}.store-card>img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:17px}.store-card h3{margin:7px 0 5px}.stars small{color:#7b8494;font-size:12px}.action-link,.app-actions form button{display:inline-flex;align-items:center;padding:12px 18px;border:0;border-radius:14px;background:#eef5ff;color:#1f2937;text-decoration:none;font:inherit;cursor:pointer}.app-actions form{margin:0}.reviews{margin:32px 0}.review-form{display:grid;gap:12px;max-width:650px;background:#f7f9fc;padding:18px;border-radius:18px}.review-form select,.review-form textarea{width:100%;padding:12px;border:1px solid #dbe1ea;border-radius:12px}.review-form textarea{min-height:90px}.review-item{padding:16px 0;border-bottom:1px solid #e8ecf2}.review-item .stars{display:block;margin:5px 0}.library-cover{min-height:220px;border-radius:28px;padding:28px;background:linear-gradient(135deg,#111827,#3b82f6);background-position:center;background-size:cover;color:#fff;display:flex;align-items:end;margin-bottom:18px}.profile-inline{display:flex;align-items:center;gap:16px}.profile-inline img,.avatar-placeholder{width:76px;height:76px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.8)}.avatar-placeholder{display:grid;place-items:center;background:#fff;color:#111827;font-size:32px;font-weight:800}.profile-inline h1{margin:0}.profile-inline p{margin:4px 0 0}.library-section{margin:32px 0}.library-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.library-actions .btn,.library-actions .btn-info{flex:1;margin:0;min-width:110px}.empty-state{grid-column:1/-1;color:#7b8494}.library-sidebar{display:flex;gap:10px;flex-wrap:wrap}.library-sidebar a{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid #e7ebf1;padding:12px 16px;border-radius:14px;text-decoration:none}.library-card small{display:block;color:#7b8494;margin-bottom:8px}
@media(max-width:1000px){.shelf-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.shelf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.library-cover{min-height:180px;padding:18px}.profile-inline img,.avatar-placeholder{width:60px;height:60px}.store-card{border-radius:18px}}