/* Темно-синий минималистичный дизайн */
*{margin:0;padding:0;box-sizing:border-box;}
body{font:16px -apple-system,BlinkMacSystemFont,system-ui,sans-serif;line-height:1.5;color:#e2e8f0;background:#0f172a;}
a{color:#3b82f6;text-decoration:none;}
a:hover{color:#60a5fa;}
img{max-width:100%;height:auto;}
h1,h2,h3{font-weight:600;}

/* Layout */
.app-container{display:flex;height:100vh;}
.sidebar{width:280px;background:#1e293b;border-right:1px solid #334155;flex-shrink:0;display:flex;flex-direction:column;position:fixed;height:100vh;z-index:1000;}
.main-content{flex:1;display:flex;flex-direction:column;margin-left:280px;background:#0f172a;}
.header{background:#1e293b;border-bottom:1px solid #334155;padding:15px 20px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.content{flex:1;padding:20px;overflow-y:auto;background:#0f172a;}

/* Logo */
.logo{display:flex;align-items:center;padding:20px;border-bottom:1px solid #334155;}
.logo-icon{width:40px;height:40px;background:linear-gradient(135deg,#3b82f6 0%,#60a5fa 100%);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-right:15px;color:white;}
.logo-text{font-size:20px;font-weight:700;color:#f8fafc;letter-spacing:0.5px;}
.logo-subtitle{font-size:12px;color:#94a3b8;margin-top:2px;}

/* Navigation */
.nav-menu{flex:1;padding:20px 0;overflow-y:auto;}
.nav-section{padding:15px 20px 5px;font-size:11px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:1px;}
.nav-item{display:block;padding:12px 20px;color:#e2e8f0;text-decoration:none;border-left:3px solid transparent;transition:all 0.3s ease;margin:0 10px;border-radius:0 8px 8px 0;}
.nav-item:hover{background:#334155;color:#3b82f6;border-left-color:#3b82f6;}
.nav-item i{width:20px;margin-right:12px;text-align:center;color:#60a5fa;}

/* Search */
.search-container{flex:1;max-width:400px;margin:0 20px;}
.search-box{display:flex;background:#334155;border-radius:12px;overflow:hidden;border:1px solid #475569;}
.search-input{flex:1;padding:12px 20px;background:transparent;border:none;color:#f8fafc;font-size:14px;outline:none;}
.search-input::placeholder{color:#64748b;}
.search-input:focus{background:#475569;}
.search-btn{padding:12px 20px;background:#3b82f6;color:white;border:none;cursor:pointer;transition:all 0.3s ease;}
.search-btn:hover{background:#2563eb;}

/* Header actions */
.header-actions{display:flex;align-items:center;gap:15px;}
.btn-header{padding:10px 20px;background:#334155;color:#e2e8f0;border:1px solid #475569;border-radius:8px;text-decoration:none;font-size:14px;transition:all 0.3s ease;}
.btn-header:hover{background:#475569;color:#f8fafc;}

/* Mobile menu */
.btn-menu{display:none;position:fixed;top:20px;right:20px;z-index:1001;background:#3b82f6;color:white;border:none;border-radius:50%;width:50px;height:50px;font-size:20px;cursor:pointer;box-shadow:0 4px 20px rgba(59,130,246,0.3);}
.btn-menu:hover{background:#2563eb;transform:scale(1.05);}

/* Hero */
.hero{background:linear-gradient(135deg,#1e293b 0%,#334155 50%,#475569 100%);color:white;padding:40px 20px;text-align:center;margin-bottom:30px;border-radius:12px;border:1px solid #334155;}
.hero h1{font-size:2.5rem;margin-bottom:10px;color:#f8fafc;}
.hero p{font-size:1.2rem;opacity:0.9;color:#cbd5e1;}

/* Sections */
.section{margin-bottom:40px;}
.section__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:10px;}
.section__title{font-size:1.5rem;color:#f8fafc;}
.section__link{color:#3b82f6;font-weight:500;padding:8px 16px;border:1px solid #3b82f6;border-radius:20px;text-decoration:none;transition:all 0.3s ease;}
.section__link:hover{background:#3b82f6;color:white;box-shadow:0 4px 20px rgba(59,130,246,0.3);}
.section--alt{background:#1e293b;border-radius:12px;padding:20px;border:1px solid #334155;}
.section__content{margin-top:20px;}

/* Speedbar */
.speedbar{padding:10px 0;margin-bottom:20px;font-size:14px;color:#94a3b8;}
.speedbar a{color:#3b82f6;}
.speedbar a:hover{color:#60a5fa;}

/* Sort container */
.sort-container{margin-bottom:20px;}

/* Tracks - темная тема */
.track{display:flex;align-items:center;padding:12px;background:#1e293b;border:1px solid #334155;border-radius:8px;margin-bottom:8px;transition:all 0.3s ease;}
.track:hover{border-color:#3b82f6;background:#334155;box-shadow:0 2px 8px rgba(59,130,246,0.2);}

.track__play{margin-right:12px;}
.play-btn{width:40px;height:40px;border-radius:50%;border:2px solid #3b82f6;background:#1e293b;color:#3b82f6;font-size:14px;font-weight:bold;cursor:pointer;transition:all 0.3s ease;}
.play-btn:hover{background:#3b82f6;color:white;box-shadow:0 4px 20px rgba(59,130,246,0.3);}

.track__info{flex:1;min-width:0;}
.track__title{font-weight:600;margin-bottom:2px;}
.track__title a{color:#f8fafc;}
.track__title a:hover{color:#3b82f6;}
.track__artist{font-size:14px;color:#94a3b8;}
.track__artist a{color:#94a3b8;}
.track__artist a:hover{color:#3b82f6;}

.track__meta{display:flex;align-items:center;gap:8px;margin-right:12px;}
.hit{background:#f59e0b;color:white;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600;}
.duration{color:#64748b;font-size:12px;}

.track__actions{display:flex;gap:8px;}
.fav-btn{width:32px;height:32px;border-radius:50%;border:1px solid #475569;background:#1e293b;color:#94a3b8;font-size:16px;font-weight:bold;cursor:pointer;transition:all 0.3s ease;}
.fav-btn:hover{border-color:#3b82f6;color:#3b82f6;}
.fav-btn.active{background:#3b82f6;color:white;border-color:#3b82f6;}
.dl-btn{width:32px;height:32px;border-radius:50%;border:1px solid #475569;background:#1e293b;color:#94a3b8;font-size:14px;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:all 0.3s ease;}
.dl-btn:hover{border-color:#3b82f6;color:#3b82f6;}

/* Grid layouts */
.tracks{display:flex;flex-direction:column;gap:8px;}
.tracks-columns{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.column{display:flex;flex-direction:column;gap:8px;}
.albums{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;}
.categories{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;}
.category{display:flex;flex-direction:column;align-items:center;padding:16px;background:#1e293b;border:1px solid #334155;border-radius:8px;text-decoration:none;transition:all 0.3s ease;}
.category:hover{border-color:#3b82f6;background:#334155;box-shadow:0 2px 8px rgba(59,130,246,0.2);}
.category__icon{font-size:2rem;margin-bottom:8px;}
.category__name{font-weight:600;color:#f8fafc;text-align:center;}

/* Footer */
.footer{background:#1e293b;border-top:1px solid #334155;padding:20px;text-align:center;color:#64748b;font-size:14px;}

/* Mobile optimization */
@media(max-width:768px){
	.sidebar{width:240px;}
	.main-content{margin-left:240px;}
	.logo-text{font-size:18px;}
	.search-container{margin:0 15px;}
	.btn-menu{display:flex;}
	.hero{padding:30px 15px;margin-bottom:20px;}
	.hero h1{font-size:2rem;}
	.hero p{font-size:1rem;}
	
	.section{margin-bottom:30px;}
	.section--alt{padding:15px;}
	.section__header{flex-direction:column;align-items:flex-start;gap:10px;}
	.section__title{font-size:1.3rem;}
	
	.track{padding:10px;}
	.play-btn{width:36px;height:36px;font-size:12px;}
	.track__meta{display:none;}
	.track__actions{gap:6px;}
	.fav-btn,.dl-btn{width:28px;height:28px;font-size:14px;}
	
	.tracks-columns{grid-template-columns:1fr;gap:12px;}
	.categories{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px;}
	.category{padding:12px;}
	.category__icon{font-size:1.5rem;}
}

@media(max-width:640px){
	.sidebar{transform:translateX(-100%);transition:transform 0.3s ease;}
	.sidebar.active{transform:translateX(0);}
	.main-content{margin-left:0;}
	.hero h1{font-size:1.8rem;}
	.section__title{font-size:1.2rem;}
	.track{padding:8px;}
	.track__info{font-size:14px;}
	.track__artist{font-size:12px;}
}

/* Print optimization */
@media print{
	.track__actions,.section__link,.header-actions{display:none;}
	.hero{background:none;color:black;}
	.sidebar{display:none;}
	.main-content{margin-left:0;}
}

/* Accessibility */
@media(prefers-reduced-motion:reduce){
	*{transition:none!important;animation:none!important;}
}

/* Light theme (optional) */
@media(prefers-color-scheme:light){
	body{background:#fff;color:#333;}
	.sidebar,.header,.footer{background:#f8f9fa;border-color:#e5e7eb;}
	.main-content,.content{background:#fff;}
	.track,.category{background:#fff;border-color:#e5e7eb;}
	.track:hover{background:#f8f9fa;}
	.play-btn,.fav-btn,.dl-btn{background:#fff;border-color:#ddd;color:#666;}
	.search-box{background:#f1f3f4;border-color:#e5e7eb;}
	.search-input{color:#333;}
	.logo-text{color:#333;}
	.nav-item{color:#333;}
	.nav-item:hover{background:#f1f3f4;}
	.section__title{color:#333;}
	.hero{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);}
}