:root { --p-red: #e60023; --bg: #ffffff; --gray: #f0f0f0; --dark: #111; --sub: #767676; }
* { margin: 0; padding: 0; box-sizing: border-box; text-decoration: none !important; }
body { font-family: -apple-system, sans-serif; background: var(--bg); color: var(--dark); overflow-x: hidden; }

/* NAV & HEADER */
.side-menu { width: 75px; height: 100vh; position: fixed; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; border-right: 1px solid #eee; background: #fff; z-index: 1000; padding: 30px 0; }
.nav-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--dark); margin-bottom: 20px; transition: 0.2s; }
.nav-icon.active, .nav-icon:hover { background: var(--gray); color: var(--p-red); }

.top-header { position: fixed; top: 0; left: 75px; right: 0; height: 80px; background: rgba(255,255,255,0.9); backdrop-filter: blur(15px); display: flex; align-items: center; padding: 0 20px; z-index: 999; border-bottom: 1px solid #f0f0f0; }
.header-left-group { display: flex; align-items: center; gap: 15px; width: 100%; }
.cat-dropdown { background: var(--gray); border: none; padding: 12px 18px; border-radius: 20px; font-weight: 700; cursor: pointer; min-width: 140px; outline: none; }
.search-form { flex: 1; display: flex; }
.search-bar { width: 100%; background: var(--gray); border-radius: 25px; padding: 12px 20px; display: flex; align-items: center; }
.search-bar input { border: none; background: none; width: 100%; outline: none; margin-left: 10px; font-size: 16px; }

/* GRID & MEDIA */
.content { margin-left: 75px; margin-top: 90px; padding: 15px; }
.pin-grid { column-count: 5; column-gap: 15px; }
.pin-item { break-inside: avoid; margin-bottom: 15px; border-radius: 20px; overflow: hidden; background: var(--gray); animation: fadeIn 0.6s ease; }
.pin-item img, .pin-item video { width: 100%; display: block; }
.pin-item:hover { filter: brightness(0.9); transform: scale(1.02); transition: 0.3s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

/* SINGLE VIEW */
.s-card { max-width: 1000px; margin: 100px auto 40px; display: flex; background: #fff; border-radius: 32px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); overflow: hidden; }
.m-col { flex: 1.2; background: #f8f8f8; position: relative; display: flex; align-items: center; justify-content: center; line-height: 0; }
.love-btn { position: absolute; top: 20px; right: 20px; width: 50px; height: 50px; background: rgba(255,255,255,0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #555; box-shadow: 0 4px 15px rgba(0,0,0,0.1); cursor: pointer; z-index: 10; backdrop-filter: blur(5px); }
.love-btn:hover { background: var(--p-red); color: #fff; transform: scale(1.1); transition: 0.3s; }
.share-btn { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; }

@media (max-width: 768px) {
    .side-menu { width: 100%; height: 65px; top: auto; bottom: 0; flex-direction: row; justify-content: space-around; padding: 0; border-top: 1px solid #eee; }
    .top-header { left: 0; height: 70px; } .content { margin-left: 0; margin-top: 80px; padding-bottom: 80px; }
    .pin-grid { column-count: 2; column-gap: 10px; } .s-card { flex-direction: column; }
}