:root {
    --bg: #fff8fc;
    --card: rgba(255, 255, 255, 0.94);
    --text: #4c3850;
    --muted: #8e7891;
    --pink: #ff5ba9;
    --pink-dark: #e84092;
    --pink-soft: #ffe1f0;
    --lilac: #a879f7;
    --yellow: #ffd966;
    --border: rgba(168, 121, 247, 0.16);
    --shadow: 0 16px 40px rgba(118, 72, 122, 0.12);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Nunito", system-ui, sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 12% 8%, rgba(255, 184, 219, .40), transparent 25%),
        radial-gradient(circle at 90% 5%, rgba(197, 168, 255, .35), transparent 26%),
        var(--bg);
}

button, a { font: inherit; }

.decor {
    position: fixed;
    z-index: -1;
    border-radius: 999px;
    filter: blur(2px);
    opacity: .55;
}
.decor-one { width: 220px; height: 220px; background: #ffd9ec; left: -90px; top: 42%; }
.decor-two { width: 180px; height: 180px; background: #e9ddff; right: -70px; bottom: 8%; }

.site-header,
main {
    width: min(1240px, calc(100% - 32px));
    margin-inline: auto;
}

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 28px;
    padding: 64px 0 30px;
}

.header-copy { max-width: 760px; }
.eyebrow {
    display: inline-flex;
    padding: 8px 13px;
    border-radius: 999px;
    color: #8f4bc3;
    background: #f2e8ff;
    font-weight: 900;
    font-size: .86rem;
}

h1 {
    margin: 16px 0 10px;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.header-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 1.04rem;
    line-height: 1.65;
}

.favorites-filter {
    border: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
    color: var(--pink-dark);
    background: #fff;
    padding: 13px 17px;
    border-radius: 16px;
    box-shadow: var(--shadow);
    cursor: pointer;
    font-weight: 900;
}

.favorites-filter[aria-pressed="true"] {
    color: #fff;
    background: linear-gradient(135deg, var(--pink), var(--lilac));
}

.status-bar {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    color: var(--muted);
    font-weight: 800;
    padding: 8px 2px 20px;
}

.sort-label {
    background: rgba(255,255,255,.72);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 7px 11px;
    font-size: .82rem;
}

.texture-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}

.texture-card {
    overflow: hidden;
    background: var(--card);
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 24px;
    box-shadow: var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}
.texture-card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(118,72,122,.17); }

.image-wrap {
    position: relative;
    aspect-ratio: 1 / 1.08;
    margin: 10px;
    overflow: hidden;
    border-radius: 18px;
    background:
        linear-gradient(45deg, #f3edf4 25%, transparent 25%),
        linear-gradient(-45deg, #f3edf4 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f3edf4 75%),
        linear-gradient(-45deg, transparent 75%, #f3edf4 75%);
    background-size: 18px 18px;
    background-position: 0 0, 0 9px, 9px -9px, -9px 0px;
}

.texture-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .3s ease;
}
.texture-card:hover .texture-image { transform: scale(1.035); }

.icon-button {
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.favorite-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    color: var(--pink-dark);
    background: rgba(255,255,255,.92);
    box-shadow: 0 7px 18px rgba(85,56,88,.14);
    font-size: 1.45rem;
}
.favorite-button.is-favorite { color: #fff; background: var(--pink); }
.favorite-button.is-favorite span::before { content: "♥"; }
.favorite-button.is-favorite span { font-size: 0; }
.favorite-button.is-favorite span::before { font-size: 1.25rem; }

.card-body { padding: 3px 13px 14px; }
.texture-name {
    margin: 3px 2px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .9rem;
    color: var(--muted);
    font-weight: 800;
}

.card-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 9px;
}

.download-button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-height: 43px;
    padding: 10px 14px;
    border-radius: 14px;
    color: #fff;
    text-decoration: none;
    font-weight: 900;
    background: linear-gradient(135deg, var(--pink), var(--lilac));
    box-shadow: 0 9px 20px rgba(232,64,146,.22);
}
.download-button:hover { filter: brightness(1.04); }

.like-button {
    min-width: 52px;
    min-height: 43px;
    gap: 4px;
    border-radius: 14px;
    color: #785e7b;
    background: #f6eff8;
    font-weight: 900;
}
.like-button.is-liked { color: #774bbd; background: #eee3ff; }
.like-button:disabled { cursor: default; opacity: .78; }
.like-count { font-size: .72rem; }

.loader {
    display: flex;
    justify-content: center;
    gap: 7px;
    padding: 36px;
}
.loader span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--pink);
    animation: bounce .85s infinite alternate;
}
.loader span:nth-child(2) { animation-delay: .15s; }
.loader span:nth-child(3) { animation-delay: .3s; }
.loader[hidden] { display: none; }
@keyframes bounce { to { transform: translateY(-8px); opacity: .45; } }

.empty-state {
    text-align: center;
    padding: 70px 20px;
    color: var(--muted);
}
.empty-icon { font-size: 3rem; color: var(--pink); }
.empty-state h2 { margin-bottom: 6px; color: var(--text); }
.empty-state p { margin-top: 0; }

@media (max-width: 1050px) { .texture-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 780px) {
    .site-header { align-items: flex-start; flex-direction: column; padding-top: 38px; }
    .texture-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
@media (max-width: 560px) {
    .site-header, main { width: min(100% - 20px, 1240px); }
    .texture-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .texture-card { border-radius: 18px; }
    .image-wrap { margin: 7px; border-radius: 14px; }
    .card-body { padding: 2px 9px 10px; }
    .download-button { padding-inline: 9px; font-size: .84rem; }
    .like-button { min-width: 46px; }
    .status-bar { align-items: flex-start; flex-direction: column; }
}