:root{
--bg:#0e111b;
--glass:rgba(255,255,255,.05);
--border:rgba(255,255,255,.08);
--text:#fff;
--muted:rgba(255,255,255,.55);
--grad:linear-gradient(135deg,#6a8bff,#4ecbff);
--grad-hover:linear-gradient(135deg,#7aa2ff,#68f0ff);
--radius:16px;
}

body{color:var(--text);font-family:Inter,Segoe UI,sans-serif}

.shop-wrap{max-width:1400px;margin:40px auto;padding:0 20px}

.shop-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:35px}
.shop-header h1{font-size:34px;margin:0}
.shop-header p{color:var(--muted);margin-top:6px}

#search{
background:var(--glass);
border:1px solid var(--border);
color:#fff;
padding:14px 18px;
border-radius:14px;
outline:none;
min-width:280px;
transition:.3s
}
#search:focus{border-color:#6a8bff;box-shadow:0 0 0 3px rgba(106,139,255,.25)}

.shop-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
gap:26px
}

.shop-card{
background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
border:1px solid var(--border);
border-radius:var(--radius);
padding:22px;
display:flex;
flex-direction:column;
justify-content:space-between;
backdrop-filter:blur(20px);
transition:.35s
}

.shop-card:hover{
transform:translateY(-6px) scale(1.01);
box-shadow:0 30px 60px rgba(0,0,0,.6)
}

.card-top{display:flex;justify-content:space-between;align-items:center}
.badge{
background:rgba(106,139,255,.15);
color:#9fb3ff;
padding:6px 12px;
border-radius:999px;
font-size:12px
}
.id{font-size:12px;color:var(--muted)}

.card-body{text-align:center;padding:30px 10px}
.icon{font-size:48px;margin-bottom:14px}
.card-body h3{margin:0 0 8px;font-size:20px}
.card-body p{color:var(--muted);font-size:14px}

.card-actions{display:flex;gap:12px}

.btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: 100%;
    height: 46px;

    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    user-select: none;

    transition: all .25s ease;
}

.primary{
    background: linear-gradient(135deg, #5da9ff, #4ecbff);
    color: #fff;
    box-shadow:
        0 8px 20px rgba(78,203,255,.35),
        inset 0 1px 0 rgba(255,255,255,.25);
}

.primary::before{
    content: "⬇";
    font-size: 16px;
}

.primary:hover{
    background: linear-gradient(135deg, #6bb6ff, #6ff3ff);
    box-shadow:
        0 12px 30px rgba(78,203,255,.6),
        inset 0 1px 0 rgba(255,255,255,.35);
    transform: translateY(-2px);
}

.primary:active{
    transform: translateY(0);
    box-shadow:
        0 6px 16px rgba(78,203,255,.4),
        inset 0 2px 4px rgba(0,0,0,.25);
}
.ghost{
background:transparent;
border:1px solid var(--border);
color:#fff
}
.ghost:hover{border-color:#6a8bff;background:rgba(106,139,255,.1)}

.empty{
text-align:center;
margin-top:120px;
opacity:.8
}
.empty .emoji{font-size:64px;margin-bottom:15px}
.empty h2{margin:0 0 10px}
.empty p{color:var(--muted)}