@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
html,body{width:100%;overflow-x:hidden}
body{font-family:'Inter',-apple-system,sans-serif;background:#0A0A0F;color:#F1F1F3;line-height:1.6}
a{text-decoration:none;color:inherit}
button{border:none;background:none;cursor:pointer;font-family:inherit}
img{display:block;max-width:100%;height:auto}

/* Layout */
.main-app{width:100%;min-height:100vh;position:relative}

/* Header - Old + New Mixed */
.main-header{background:#13131F;border-bottom:1px solid #1F1F2E;position:sticky;top:0;z-index:100;width:100%}
.header-container{max-width:1400px;margin:0 auto;padding:15px 20px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.logo-box{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:700;color:#fff;flex-shrink:0}
.main-nav{display:flex;gap:5px}
.main-nav a{padding:8px 16px;color:#8B8B9A;font-weight:500;font-size:15px;border-radius:8px;transition:0.2s}
.main-nav a:hover{background:#1A1A2E;color:#8B5CF6}
.header-search{display:flex;align-items:center;background:#1A1A2E;border-radius:10px;padding:0 5px 0 15px;flex:1;max-width:400px}
.header-search input{flex:1;background:transparent;border:none;color:#fff;padding:10px 5px;outline:none;font-size:14px;min-width:0}
.header-search button{background:transparent;border:none;color:#8B8B9A;padding:8px 12px;cursor:pointer;font-size:18px}
.menu-toggle{display:none;background:#1A1A2E;border:none;color:#fff;font-size:24px;padding:8px 14px;border-radius:8px;cursor:pointer}

/* Sidebar */
.sidebar{width:280px;background:#13131F;border-right:1px solid #1F1F2E;position:fixed;height:100vh;overflow-y:auto;padding:25px;z-index:1000;left:-280px;transition:0.3s}
.sidebar.open{left:0}
.sidebar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}
.close-sidebar{background:#1A1A2E;border:none;color:#fff;font-size:20px;width:36px;height:36px;border-radius:8px;cursor:pointer}
.side-nav a{display:flex;align-items:center;gap:12px;padding:12px 15px;border-radius:8px;margin-bottom:5px;color:#8B8B9A;font-weight:500;transition:0.2s}
.side-nav a:hover,.side-nav a.active{background:#1A1A2E;color:#8B5CF6}
.ad-space-sidebar{margin-top:40px}
.ad-space-sidebar span{font-size:11px;color:#555;text-transform:uppercase;display:block;margin-bottom:10px}
.ad-box{width:100%;min-height:250px;background:#1A1A2E;border:1px dashed #222;border-radius:8px;display:flex;align-items:center;justify-content:center}

/* Main Content */
.main-app{padding-left:0;width:100%;transition:0.3s}

/* Hero Section */
.hero-section{display:grid;grid-template-columns:1.2fr 0.8fr;gap:40px;align-items:center;padding:60px 32px;max-width:1600px;margin:0 auto}
.hero-content h1{font-size:52px;font-weight:800;line-height:1.1;margin-bottom:16px}
.hero-content h1 span{background:linear-gradient(135deg,#8B5CF6 0%,#A78BFA 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-content p{font-size:18px;color:#9CA3AF;margin-bottom:32px;max-width:500px}
.hero-stats{display:flex;gap:32px}
.stat-item h3{font-size:32px;font-weight:700;color:#8B5CF6}
.stat-item span{font-size:14px;color:#6B7280}
.hero-featured{position:relative;border-radius:20px;overflow:hidden;height:480px;box-shadow:0 20px 60px rgba(139,92,246,0.3)}
.hero-featured img{width:100%;height:100%;object-fit:cover}
.featured-info{position:absolute;bottom:0;left:0;right:0;padding:32px;background:linear-gradient(0deg,rgba(0,0,0,0.9) 0%,transparent 100%)}
.badge{background:#8B5CF6;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;display:inline-block;margin-bottom:12px}
.featured-info h3{font-size:24px;margin-bottom:8px}
.featured-info p{font-size:14px;color:#9CA3AF}

/* Filter Sticky */
.filter-sticky{position:sticky;top:70px;background:#0A0A0F;z-index:40;padding:16px 0;border-bottom:1px solid #1F1F2E}
.filter-tabs{display:flex;gap:10px;overflow-x:auto;padding:0 32px;scrollbar-width:none}
.filter-tabs::-webkit-scrollbar{display:none}
.filter-tabs a{padding:10px 20px;background:#1A1A2E;border:1px solid #22222E;border-radius:24px;font-size:14px;font-weight:500;color:#8B8B9A;white-space:nowrap;transition:0.2s;flex-shrink:0;display:flex;align-items:center;gap:8px}
.filter-tabs a small{background:#0A0A0F;padding:2px 8px;border-radius:10px;font-size:12px}
.filter-tabs a:hover,.filter-tabs a.active{background:#8B5CF6;border-color:#8B5CF6;color:#fff}
.filter-tabs a.active small{background:rgba(255,255,255,0.2)}
.sort-tabs{display:flex;gap:8px;padding:16px 32px 0}
.sort-tabs a{padding:8px 16px;background:#1A1A2E;border-radius:8px;font-size:13px;font-weight:500;color:#8B8B9A}
.sort-tabs a.active{background:#8B5CF6;color:#fff}

/* Ad Mobile */
.ad-mobile-banner{padding:0 20px;margin:20px 0}
.ad-mobile-banner span{font-size:10px;color:#555;text-transform:uppercase;margin-bottom:8px;display:block}
.ad-box-mobile{width:100%;min-height:100px;background:#1A1A2E;border:1px dashed #222;border-radius:12px;display:flex;align-items:center;justify-content:center}

/* Content Area */
.content-area{padding:32px;max-width:1600px;margin:0 auto;width:100%}

/* Wallpaper Grid - Masonry Fixed */
.wall-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    grid-auto-rows:10px;
    gap:20px;
    width:100%;
}
.wall-card{
    grid-row-end:span 26;
    background:#15151F;
    border-radius:14px;
    overflow:hidden;
    position:relative;
    transition:0.3s;
}
.wall-card.tall{grid-row-end:span 34}
.wall-card:hover{transform:translateY(-6px);box-shadow:0 12px 32px rgba(0,0,0,0.5)}
.wall-img{position:relative;overflow:hidden;background:#222}
.wall-img img{width:100%;height:100%;object-fit:cover;transition:0.4s}
.wall-card:hover img{transform:scale(1.06)}
.card-overlay{
    position:absolute;inset:0;
    background:linear-gradient(0deg,rgba(0,0,0,0.8) 0%,transparent 60%);
    opacity:0;transition:0.3s;
    display:flex;flex-direction:column;justify-content:space-between;
    padding:16px;
}
.wall-card:hover .card-overlay{opacity:1}
.card-actions{position:absolute;top:12px;right:12px;display:flex;gap:8px}
.icon-btn{width:36px;height:36px;background:rgba(0,0,0,0.7);backdrop-filter:blur(10px);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;transition:0.2s}
.icon-btn:hover{background:#8B5CF6;transform:scale(1.1)}
.card-info h3{font-size:15px;font-weight:600;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-info p{font-size:13px;color:#9CA3AF}
.ad-card{grid-row-end:span 28;background:#15151F;border:1px dashed #222;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ad-label{font-size:10px;color:#555;text-transform:uppercase;margin-bottom:10px}
.ad-infeed{width:100%;height:100%;background:#1A1A2E;border-radius:12px}

/* Load More */
.load-more{text-align:center;margin:40px 0}
.btn-load{padding:14px 40px;background:#8B5CF6;color:#fff;font-weight:600;border-radius:12px;font-size:15px;transition:0.2s;display:inline-block}
.btn-load:hover{background:#7C3AED;transform:translateY(-2px);box-shadow:0 8px 20px rgba(139,92,246,0.4)}

/* Empty State */
.empty-state{text-align:center;padding:80px 20px}
.empty-state svg{margin:0 auto 20px;opacity:0.3}
.empty-state h3{font-size:20px;margin-bottom:8px}
.empty-state p{color:#6B7280}

/* Bottom Nav */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:#13131F;border-top:1px solid #1F1F2E;z-index:999;width:100%}
.bottom-nav a{flex:1;text-align:center;padding:12px 5px;color:#8B8B9A;font-size:24px}
.bottom-nav a span{display:block;font-size:10px;margin-top:4px;font-weight:500}
.bottom-nav a.active{color:#8B5CF6}

/* Desktop */
@media(min-width:1025px){
    .main-app{padding-left:280px}
    .menu-toggle,.close-sidebar{display:none}
    .sidebar{left:0}
}

/* Tablet */
@media(max-width:1024px){
    .sidebar{transform:translateX(-100%)}
    .sidebar.open{transform:translateX(0)}
    .main-header .main-nav{display:none}
    .menu-toggle{display:block}
    .hero-section{grid-template-columns:1fr;text-align:center;padding:40px 24px}
    .hero-featured{display:none}
    .hero-content h1{font-size:36px}
    .hero-stats{justify-content:center}
    .wall-grid{grid-template-columns:repeat(3,1fr)}
}

/* Mobile */
@media(max-width:768px){
    .hero-content h1{font-size:28px}
    .hero-content p{font-size:16px}
    .filter-sticky{top:65px;padding:12px 0}
    .filter-tabs{padding:0 16px}
    .sort-tabs{padding:12px 16px 0}
    .content-area{padding:24px 16px}
    .wall-grid{grid-template-columns:repeat(2,1fr);gap:12px}
    .wall-card{border-radius:10px}
    .card-overlay{opacity:1;background:linear-gradient(0deg,rgba(0,0,0,0.6) 0%,transparent 70%)}
    .bottom-nav{display:flex}
    body{padding-bottom:70px}
    .main-header .header-search{display:none}
}

/* Small Mobile */
@media(max-width:480px){
    .hero-content h1{font-size:24px}
    .hero-stats{gap:20px}
    .stat-item h3{font-size:24px}
    .wall-grid{gap:10px}
    .filter-tabs a{padding:8px 15px;font-size:13px}
}

/* Large Screen */
@media(min-width:1920px){
    .content-area{max-width:1800px}
    .wall-grid{grid-template-columns:repeat(5,1fr)}
}