/*
=====================================================
 Файл стилей  - разработка stillmaster 
-----------------------------------------------------
 https://stillmaster.ru/
-----------------------------------------------------
 Copyright (c) 2025 stillmaster (Иван Марченко)
=====================================================
*/

/*Сброс стилей браузера*/
* {text-decoration-line: none; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;margin: 0;padding: 0;}
html, html a { -webkit-font-smoothing: antialiased; }
:after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html {height: 100%;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline }
html { scroll-behavior: smooth; }
nav:before, nav:after { display: table; content: " "; }
:root {
	--bg: #fffaf4; --bg-darker: #f5f1ec; --bg-darkest: #f3ede5; --bg-black: #333132;
	--tt: #000; --tt-fade-0: #4b4640; --tt-fade: #80776c; --tt-fadest: #e0e0e0; --tt-black: #fff; 
	--bdc: rgba(0,0,0,0.1); --bsh: 0 1px 2px 0 rgba(0,0,0,0.2);
	--accent: #c34c14; 
	--ui-elem-height: 40px; --ui-elem-padding: 20px; --ui-elem-gap: 10px; --ui-elem-bdrs: 4px; 
	--ui-bg-btn: #c34c14; --ui-tt-btn: #fff; --ui-bg-btn-hover: #b9440e;
	--ui-bg-inp: #fff; --ui-bdc-inp: #e3e3e3; --ui-bdc-inp-focus: #35c535;
	
	--ui-bg: #fffaf4; --ui-bg-darker: #f5f1ec; --ui-bg-darkest: #f3ede5; --ui-accent: #06c;
	--ui-bdc: #eee; --ui-tt-fade: #b0b0af; --ui-fw-bolder: 500; --ui-fw-fa: 300;
	--ui-bsh: 0 12px 40px rgba(0,0,0,0.3); --ui-bsh-inset: inset 1px 2px 5px rgba(0,0,0,0.1); --ui-bdrs: 4px;
	--ui-gradient: linear-gradient(to bottom, #5c4f68, #352d3c); --ui-bg-black: #352d3c;
	--green: #65c03e; --ui-red: #eb4d4b; --ui-bg-attention: #fceedf; --ui-bd-attention: #fc9a07;
	--indent-negative: -40px; --indent: 40px; --max-width: 1366px;
}


body {font-family:'Gilroy'; background-color: #ffffff; font-size: 14px; font-weight: 500;    min-height: 100%;}
.container {width: 100%;max-width: 1200px;margin: 0 auto;}
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5 {  letter-spacing: -0.01em; line-height: 1.35em; font-weight: bold; text-rendering: optimizeLegibility; }
h1, .h1 { font-size: 2em; }
h2, .h2 { font-size: 1.9em; }
h3, .h3 { font-size: 1.6em; }
h4, .h4 { font-size: 1.5em; }
h5, .h5 { font-size: 1.2em; }
b, strong {font-weight: bold;}

.header {    display: flex ; align-items: center; justify-content: space-between;padding: 10px 0;gap: 65px; }
.logo {  font-size: 30px; font-weight: 800; color: #08dfff; flex-shrink: 0;}
#q_search {width: 100%;}
.q_search {     width: 100%;    position: relative; overflow: hidden; border: 2px solid #13e0ff; border-radius: 15px;}
.q_search .btn_border {    position: absolute; top: 0; right: 0; height: 100%; line-height: 100%;   width: 40px; background-color: #08dfff; border: none;    box-shadow: none;font-size: 18px; color: #fff;}
#story {width: 100%;border: none;padding: 5px }
#story:focus { outline: none; }
header {border-bottom: 2px solid #76e3f3;}
.flex {display: flex;}
.jus-between {justify-content: space-between;}
.align-items-center {align-items: center;}
.col-md-9 {width: 100%;}
@media (min-width: 1100px) {
    .col-md-9 {
        width: 75%;
        flex: 0 0 auto;
    }
}

.main__aside {width: 250px;}
main {margin-top: 15px;    min-height: 100vh;}
.gap-4 {gap: 20px;}
.collapsible-text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin: 0; }
.toggle-button { color: #08dfff; cursor: pointer; display: inline; text-decoration: underline; background: none; border: none; padding: 0; font-size: inherit; line-height: inherit; }
.text-container {margin-bottom: 15px;}
.catmenu {list-style: none; display: flex; flex-direction: column; gap: 5px;  margin-bottom: 15px;align-items: flex-start; }
.catmenu a {color: #000; text-decoration: none;font-weight: bold; padding: 5px 10px;border: 2px solid #13e0ff; border-radius: 15px;display: block;}
.catmenu a:hover {background-color: #13e0ff; color: #fff;}
.catmenu a.is-active {background-color: #13e0ff; color: #fff;}
.main__music {margin-top: 10px;}
.main__music .h2 {font-size: 18px; font-weight: bold;}
.popular, .newmusik {width: 49%;}
.p-15__bottom {padding-bottom: 15px;}
.link {    color: #1694a7;}
.track-item {display: flex; align-items: center; justify-content: space-between;    margin-bottom: 5px;height: 65px;
    overflow: hidden;}
.track-item:nth-child(2n+1) {background-color: rgb(238 253 255);}
.track-title a {display: block;color: #000;    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0;}
 a.track-desc {display: block;}
.trackimg {width: 70px; height: 70px;  margin-right: 15px;     flex-shrink: 0;   overflow: hidden;position: relative;}
.trackimg img {width: 100%; height: 100%; object-fit: cover;}
.track-play {cursor: pointer; font-size: 34px; width: 60px; height: 60px; text-align: center; color: #bdb4b3db;    position: absolute; width: 100%; height: 100%;    top: 0; display: flex ; align-items: center;}
.track-desc {padding:10px;}
.track-title {font-weight: 500;     padding-bottom: 6px;}
.track-title a:hover {color: #3e9cb3;}
.trackinfo {color: #666;}
.favor i {font-size: 20px;    color: #55e9ff;}
.favor {gap: 15px;    padding: 0 10px;}
.js-item-played .fa-play:before {content: '\f04c'; color: #3e9cb3;}
.trackinfo {gap: 15px;}
.download-link:hover .fa-download {color:#2aa6b9}

.wplayer { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; position: fixed; bottom: 0; left: 0; width: 100%;  box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.3); z-index: 1000; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.audioplayer { background: rgba(255, 255, 255, 0.95); border-radius: 12px; padding: 12px 20px; backdrop-filter: blur(10px); transition: all 0.3s ease;  margin: 0 auto;justify-content: space-between; }
.audioplayer:hover { background: rgba(255, 255, 255, 1); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); }
.ap-desc { gap: 15px; min-width: 200px; max-width: 300px; }
.ap-img { width: 50px; height: 50px; border-radius: 8px; overflow: hidden; background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; flex-shrink: 0; }
.ap-img img { width: 100%; height: 100%; object-fit: cover; }
.ap-info { min-width: 0; flex: 1; }
.ap-title { font-size: 15px; font-weight: 600; color: #2d3748; margin-bottom: 3px; }
.ap-artist { font-size: 13px; color: #718096; font-weight: 500; }
.nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-btns { gap: 8px; margin: 0 20px; flex-shrink: 0; }
.audioplayer-playpause, .ap-next, .ap-prev { width: 40px; height: 40px; border-radius: 50%;     background: linear-gradient(135deg, #48bacb 0%, #55e9ff 100%); display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; cursor: pointer; flex-shrink: 0; }
.audioplayer-playpause:hover, .ap-next:hover, .ap-prev:hover { transform: scale(1.1); box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); }
.audioplayer-playpause a, .ap-next span, .ap-prev span { color: white; text-decoration: none; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 14px; }
.audioplayer-bar { flex: 1; height: 15px; background: #e2e8f0; border-radius: 3px;     position: absolute; top: -15px; width: 100%; left: 0; cursor: pointer; overflow: hidden; min-width: 150px;z-index: 10; }
.audioplayer-bar-loaded { position: absolute; height: 100%; background: #cbd5e0; border-radius: 3px; transition: width 0.3s ease; }
.audioplayer-bar-played { position: absolute; height: 100%; background: linear-gradient(135deg, #48bacb 0%, #55e9ff 100%); border-radius: 3px; transition: width 0.3s ease; }
.audioplayer-bar:hover .audioplayer-bar-played::after { content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 12px; height: 12px; background: white; border: 2px solid #667eea; border-radius: 50%; }
.audioplayer-time-duration {display: none;}
.ap-dl { color: #55e9ff; font-size: 18px; transition: all 0.3s ease; margin: 0 15px; flex-shrink: 0; }
.ap-dl:hover { color: #764ba2; transform: scale(1.1); }
.audioplayer-time-current {position: absolute; top: -16px; left: 0; z-index: 11; padding: 0 10px;}
.audioplayer-time-remaining {position: absolute; top: -16px; right: 0; z-index: 11; padding: 0 10px;}
.audioplayer-volume { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.audioplayer-volume-button { width: 32px; height: 32px; border-radius: 50%; background: #edf2f7; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; }
.audioplayer-volume-button:hover { background: #e2e8f0; transform: scale(1.05); }
.audioplayer-volume-button a { color: #4a5568; text-decoration: none; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 14px; }
.audioplayer-volume-adjust { width: 70px; height: 4px; background: #e2e8f0; border-radius: 2px; position: relative; cursor: pointer; overflow: hidden; }
.audioplayer-volume-adjust > div { height: 100%; border-radius: 2px; transition: width 0.3s ease; }
.audioplayer-volume-adjust > div > div {background: linear-gradient(135deg, #48bacb 0%, #55e9ff 100%); height: 4px;}
.fx-row { display: flex; flex-direction: row; }
.fx-middle { align-items: center; }
.fx-center { justify-content: center; }
.fx-1 { flex: 1; }
.fx-first { order: -1; }
.hidden { display: none !important; }
.anim { animation: slideUp 0.4s ease-out; }
@keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
/* Состояния воспроизведения */
.audioplayer-playing .audioplayer-playpause { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.audioplayer-playing .fa-pause { color: white; }
.audioplayer-stopped .fa-play { color: white; }
.wplayer-init { opacity: 0; transform: translateY(100%); }
.wplayer-init.anim { opacity: 1; transform: translateY(0); }
@media (max-width: 768px) {.audioplayer { padding: 10px 15px; } .ap-desc { min-width: 150px; max-width: 200px; gap: 10px; } .ap-img { width: 40px; height: 40px; } .ap-title { font-size: 13px; } .ap-artist { font-size: 11px; } .ap-btns { margin: 0 10px; gap: 5px; } .audioplayer-playpause, .ap-next, .ap-prev { width: 35px; height: 35px; } .audioplayer-bar { min-width: 100px; } .ap-time { margin: 0 10px; font-size: 11px; } .ap-dl { margin: 0 10px; font-size: 16px; } .audioplayer-volume-adjust { width: 50px; } .audioplayer-volume-button { width: 28px; height: 28px; } }
@media (max-width: 480px) {    .audioplayer-volume-adjust {display: none;} .ap-desc { min-width: 120px; } .ap-img { width: 35px; height: 35px; } .ap-title { font-size: 12px; } .ap-artist { font-size: 10px; }  }
.fullflex {display: flex;margin-top: 15px; justify-content: space-between; align-items: flex-start; width: 100%; height: 100%;gap: 15px;}
.left__full, .right__full {width: 50%;}
.fullflex h1 {font-size: 23px;  }
body { padding-bottom: 110px;  }
.full-track-item {position: relative;background-color: #eefdff; padding: 10px;margin:  10px 0;    display: flex ; align-items: center; justify-content: space-between; }
.full-track-item .track-play {position: relative;    color: #55e9ff;}
.full-track-item .trackinfo div {    flex-shrink: 0;}
.full-track-item .trackinfo {align-items: center;}
.title {    font-weight: bold;margin-bottom: 10px;
    font-size: 18px;}
.rating ul {    list-style: none;}
.left__full .fas {color: #55e9ff;font-size: 25px;}
.zfx__rating-stars, .left__full .download  { display: flex ; align-items: center; flex-direction: column; color: #38a4b4; padding: 0 25px; }
.fulltext h2 {font-size: 16px;  }
.fulltext { --line-height: 1.4; --font-size: 14px; --lines-to-show: 10; line-height: var(--line-height); font-size: var(--font-size); max-height: calc(var(--font-size) * var(--line-height) * var(--lines-to-show)); overflow: hidden; position: relative; transition: max-height 0.3s ease; }
 .fulltext.expanded { max-height: none; }
 .fade-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: linear-gradient(transparent, #f6f6f6); pointer-events: none; opacity: 1; transition: opacity 0.3s ease; }
 .fulltext.expanded .fade-overlay { opacity: 0; }
 .toggle-btn { color: #0e90a4; border: none; border-radius: 4px; cursor: pointer;    background: none; }
footer {border-top: 2px solid #76e3f3;}
.footer {    align-items: center;padding: 15px 0; }
.footer-menu {list-style: none;font-size: 16px;}
.footer-menu a {color: #1f98ab;}
.footer-menu a:hover {color: #257b89;}
.player {aspect-ratio: 16 / 9; width: 100%; height: 100%; position: relative; overflow: hidden;}
.login { flex-shrink: 0;border: 2px solid #13e0ff; border-radius: 15px; cursor: pointer;   padding: 5px 10px;}

.login-trigger:hover {background-color: #13e0ff; color: #fff; }
.login-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; z-index: 10000; opacity: 0; visibility: hidden; transition: all 0.3s ease; backdrop-filter: blur(5px); }
.login-overlay.active { opacity: 1; visibility: visible; }
.lgn__content { background: white; border-radius: 20px; padding: 30px; width: 100%; max-width: 450px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); position: relative; transform: translateY(20px); opacity: 0; transition: all 0.4s ease; }
.login-overlay.active .lgn__content { transform: translateY(0); opacity: 1; }
.lgn__btn-close { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 22px; color: #777; cursor: pointer; transition: all 0.2s ease; width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.lgn__btn-close:hover { background: #f5f5f5; color: #333; }
.lgn__header { text-align: center; margin-bottom: 20px; }
.lgn__title { font-size: 24px; font-weight: 700; color: #333; margin-bottom: 8px; }
.lgn__caption { font-size: 14px; color: #777; margin-bottom: 20px; }
.lgn__avatar { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); margin: 0 auto; display: flex; justify-content: center; align-items: center; color: white; font-size: 30px; box-shadow: 0 5px 15px rgba(106, 17, 203, 0.4); }
.lgn__input { display: flex; flex-direction: column; gap: 15px; margin-bottom: 15px; }
.lgn__input input { padding: 15px; border: 1px solid #e0e0e0; border-radius: 10px; font-size: 16px; transition: all 0.3s ease; }
.lgn__input input:focus { border-color: #6a11cb; box-shadow: 0 0 0 3px rgba(106, 17, 203, 0.2); outline: none; }
.lgn__cell.d-flex { margin-bottom: 20px; }
.has-checkbox { display: flex; align-items: center; gap: 8px; cursor: pointer; color: #555; }
.has-checkbox input[type="checkbox"] { width: 18px; height: 18px; accent-color: #6a11cb; }
.lgn__btn {    display: flex ; justify-content: space-between;}
.lgn__btn button { background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); color: white; border: none; padding: 15px; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(106, 17, 203, 0.4); }
.lgn__btn button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(106, 17, 203, 0.5); }
.lgn__btn .register-btn {display: block;     background: linear-gradient(135deg, #6bb8c3 0%, #0b9eb5 100%); color: white; border: none; padding: 15px; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(106, 17, 203, 0.4); }
.lgn__btn .register-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(106, 17, 203, 0.5); }

@media (max-width: 480px) { .lgn__content { padding: 20px; margin: 15px; } .lgn__title { font-size: 20px; } .lgn__input input { padding: 12px; } .lgn__btn button { padding: 12px; } .lgn__social a { width: 40px; height: 40px; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.lgn__content { animation: fadeIn 0.4s ease forwards; }
.lgn__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.lgn__menu { list-style: none; padding: 0; margin: 0; }
.lgn__menu li { margin-bottom: 15px; }
.lgn__menu a { display: flex; align-items: center; padding: 12px 20px; background: #f8f9fa; border-radius: 10px; color: #333; text-decoration: none; transition: all 0.3s ease; }
.lgn__menu a:hover { background: #6a11cb; color: white; transform: translateX(5px); }
.lgn__menu a::before { margin-right: 12px; font-size: 1.3em; min-width: 24px; }
.lgn__menu span { margin-left: auto; background: #6a11cb; color: white; padding: 2px 8px; border-radius: 12px; font-size: 0.85em; }
.lgn__menu a:hover span { background: rgba(255,255,255,0.3); }

.toggle-aside-button, .close-aside-button {display: none;}
.page-bg { background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin: 15px 0; }
.page__title { color: #1694a7; font-size: 1.8em; margin-bottom: 20px; border-bottom: 2px solid #13e0ff; padding-bottom: 10px; }
.full-text p { color: #333; line-height: 1.5; margin-bottom: 15px; }
.full-text b { color: #1694a7; font-weight: 600; }
.full-text ul { background: #f8f9fa; padding: 15px 20px; border-left: 3px solid #13e0ff; border-radius: 0 8px 8px 0; margin: 15px 0; }
.full-text li { color: #555; margin-bottom: 8px; line-height: 1.4; }
.full-text form { text-align: center; margin-top: 25px; padding-top: 15px; border-top: 1px solid #eaeaea; }
.bbcodes { background: #13e0ff; color: white; border: none; padding: 10px 25px; margin: 0 8px; border-radius: 8px; font-size: 14px; cursor: pointer; transition: all 0.2s ease; }
.bbcodes:hover { background: #08dfff; transform: translateY(-1px); }
input[value="Не принимаю"] { background: #ff6b6b; }
input[value="Не принимаю"]:hover { background: #ee5a52; }

.serv { background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin: 15px 0; }
.serv__title { color: #1694a7; font-size: 1.8em; margin-bottom: 20px; border-bottom: 2px solid #13e0ff; padding-bottom: 10px; }
.message-info { background: #f0fdff; padding: 15px; border-radius: 8px; border-left: 3px solid #13e0ff; margin-bottom: 20px; line-height: 1.5; }
.message-info b { color: #1694a7; }
.message-info a { color: #13e0ff; text-decoration: none; }
.message-info a:hover { text-decoration: underline; }
.form__row { margin-bottom: 15px; display: flex; flex-direction: column; }
.form__label { color: #333; margin-bottom: 5px; font-weight: 600; }
.form__label--important { color: #1694a7; }
.form__input { padding: 10px; border: 2px solid #eaeaea; border-radius: 8px; font-size: 14px; transition: all 0.2s ease; }
.form__input:focus { border-color: #13e0ff; outline: none; }
.form__find-related { background: #13e0ff; color: white; border: none; padding: 8px 15px; border-radius: 6px; font-size: 13px; cursor: pointer; margin-top: 5px; align-self: flex-start; transition: all 0.2s ease; }
.form__find-related:hover { background: #08dfff; }
.form__sec-code { display: flex; gap: 10px; align-items: center; }
.form__textarea { padding: 10px; border: 2px solid #eaeaea; border-radius: 8px; font-size: 14px; font-family: inherit; resize: vertical; }
.form__textarea--height { min-height: 120px; }
.form__btn { background: #13e0ff; color: white; border: none; padding: 12px 30px; border-radius: 8px; font-size: 16px; cursor: pointer; transition: all 0.2s ease; align-self: flex-start; }
.form__btn:hover { background: #08dfff; transform: translateY(-1px); }
.form__table { width: 100%; border-collapse: collapse; }
.form__table td { padding: 8px 0; border-bottom: 1px solid #eaeaea; }
.form__row--protect { background: #f8f9fa; padding: 15px; border-radius: 8px; }
#result-registration { margin-top: 5px; font-size: 13px; }

@media (min-width: 768px) {
    .form__row { flex-direction: row; align-items: center; }
    .form__label { width: 200px; margin-bottom: 0; margin-right: 15px; }
    .form__input { flex: 1; }
    .form__find-related { align-self: center; margin-top: 0; margin-left: 10px; }
    .form__textarea { flex: 1; }
}

.profile { background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin: 15px 0; overflow: hidden; }
.profile--page { padding: 0; }
.profile__header { display: flex; align-items: center; padding: 20px; border-bottom: 2px solid #f0f0f0; gap: 20px; flex-wrap: wrap; }
.profile__title { color: #1694a7; font-size: 1.8em; font-weight: 700; margin: 0; flex: 1; }
.profile__title span { color: #666; font-weight: 500; }
.profile__status { padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: 600; background: #f0f0f0; color: #666; }
.profile__status.on { background: #e8f7e8; color: #2e7d32; }
.profile__avatar { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; border: 3px solid #13e0ff; flex-shrink: 0; }
.profile__avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile__stats { padding: 20px; border-bottom: 2px solid #f0f0f0; display: flex; gap: 30px; }
.profile__stat { text-align: center; flex-shrink: 0; }
.profile__stat-number { display: block; font-size: 2em; font-weight: 700; color: #1694a7; line-height: 1; }
.profile__stat-caption { font-size: 14px; color: #666; margin-top: 5px; }
.profile__actions { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 20px 20px; }
.profile__actions a { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; background: #13e0ff; color: white; border-radius: 8px; font-weight: 600; transition: all 0.2s ease; text-decoration: none; }
.profile__actions a:hover { background: #08dfff; transform: translateY(-1px); }
.profile__info { padding: 20px; }
.profile__list { list-style: none; margin: 0; padding: 0; }
.profile__list li { display: flex; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid #f0f0f0; gap: 10px; }
.profile__list li:last-child { border-bottom: none; }
.profile__list li span:first-child { font-weight: 600; color: #333; min-width: 150px; flex-shrink: 0; }
.profile__list li span:last-child { color: #666; flex: 1; }
.profile .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; background: #13e0ff; color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; text-decoration: none; font-family: inherit; font-size: 14px; }
.profile .btn:hover { background: #08dfff; transform: translateY(-1px); }
@media (max-width: 768px) { .profile__header { flex-direction: column; text-align: center; gap: 15px; } .profile__title { font-size: 1.5em; order: -1; } .profile__stats { flex-direction: column; gap: 20px; text-align: center; } .profile__actions { justify-content: center !important; width: 100%; } .profile__list li { flex-direction: column; gap: 5px; } .profile__list li span:first-child { min-width: auto; } }
@media (max-width: 480px) { .profile__header { padding: 15px; } .profile__avatar { width: 60px; height: 60px; } .profile__stat-number { font-size: 1.5em; } .profile__actions a { padding: 8px 15px; font-size: 13px; } }
.page-bg { background: #f8f9fa; padding: 20px; border-radius: 12px; }
.page__title { color: #1694a7; font-size: 1.8em; font-weight: 700; margin: 0 0 20px; }
.serv__section { background: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); padding: 20px; margin-bottom: 20px; }
.serv__subtitle { color: #1694a7; font-size: 1.4em; font-weight: 600; margin: 20px 0 10px; }
.form { display: flex; flex-direction: column; gap: 15px; }
.form__row { display: flex; align-items: center; gap: 15px; }
.form__row label { min-width: 180px; font-weight: 500; color: #333; }
.form__row input[type="text"], .form__row input[type="password"], .form__row input[type="email"], .form__row input[type="file"], .form__row select, .form__row textarea { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }
.form__row input[type="file"] { padding: 5px; }
.form__row--textarea textarea { min-height: 80px; resize: vertical; }
.form__row--wide { width: 100%; }
.form__caption { font-weight: 600; color: #1694a7; margin-bottom: 10px; }
.form__content { display: flex; flex-direction: column; gap: 10px; }
.form__row--checkboxes-group { flex-direction: column; align-items: flex-start; }
.checkbox { display: flex; align-items: center; gap: 8px; }
.checkbox input[type="checkbox"] { margin: 0; }
.checkbox label { font-size: 14px; color: #555; cursor: pointer; }
.form__table { width: 100%; border-collapse: collapse; }
.form__table th, .form__table td { padding: 8px; border: 1px solid #ddd; text-align: left; }
.form__btn { padding: 10px 20px; background: #13e0ff; color: white; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.form__btn:hover { background: #08dfff; }
.form__row--submit { justify-content: flex-end; margin-top: 20px; }
.has-checkbox-slider { display: flex; align-items: center; gap: 15px; }
.twofactorselect { padding: 8px; border-radius: 4px; border: 1px solid #ddd; }
.form__label { font-weight: 500; color: #333; }
.form__list { list-style: none; padding: 0; margin: 0; }
.form__list li { padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.form__list li:last-child { border-bottom: none; }
@media (max-width: 768px) { .form__row { flex-direction: column; align-items: flex-start; gap: 5px; } .form__row label { min-width: auto; } }

.pmessages__links { display: flex; gap: 0; padding: 0; margin: 0; list-style: none; background: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.pmessages__links li { flex: 1; text-align: center; padding: 12px 0; border-right: 1px solid #f0f0f0; }
.pmessages__links li:last-child { border-right: none; }
.pmessages__links a { display: block!important; color: #1694a7; text-decoration: none; font-weight: 500; transition: color 0.2s; }
.pmessages__links a:hover { color: #08dfff; }

.f_input {  background: rgba(255, 255, 255, 0.1); border:  1px solid rgb(227 227 227); border-radius: 20px; padding: 10px 20px; width: 200px; font-family: Arial, sans-serif; font-size: 14px;}
textarea.f_input {width: 100%; height: 70px;}
.sec-code {    display: flex ; gap: 15px;}
.combutton {    display: flex ; justify-content: flex-end; margin: 15px 0;}
.fbutton {    border: 2px solid #13e0ff; border-radius: 15px; cursor: pointer; padding: 5px 10px;}
.fbutton:hover { background-color: #13e0ff; color: #fff;}
.fotocom img {    border-radius: 50%;}
.fotocom {    display: flex; gap: 15px;}
.com-info {    display: flex; flex-direction: column; justify-content: space-between;     font-size: 16px;}
.com-date {    opacity: 0.6;}
.headcomment {    display: flex; justify-content: space-between; align-items: center;}
.comments {margin-top: 15px;}
.comrate a {font-size: 16px;color: #000; font-weight: 700;}
.comrate .fa-thumbs-up {color: green;font-size: 20px;}
.comrate .fa-thumbs-down {color: red;font-size: 20px;}
.comrate {    display: flex; gap: 15px; align-items: center;}
.comm {margin-top: 15px;}
.footcom a {    color: black; opacity: 0.6; text-decoration: underline;}
.footcom {display: flex;gap: 15px;}
.comment {    background-color: white; padding: 15px; border-radius: 8px; margin-bottom: 15px; }
.comments ol {list-style: none; }
 .comments-tree-item .comments-tree-list { position: relative; padding-left: 20px; margin-left: 20px; }

.comments-tree-item .comments-tree-list::before { content: '\f148'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 0; left: 0; font-size: 16px; color: #ccc;    transform: rotate(90deg);}
/* BOTTOM NAVIGATION
----------------------------------------------- */
.bottom-nav {margin-bottom: -10px; padding-top: 50px;}
.nav-load a {display: flex; align-items: center; justify-content: center; 
	padding: 0 20px; max-width: 384px; margin: 0 auto;  
	background: linear-gradient(to top, #3e9cb3, #48b0ca); color: #fff; 
	text-align: center; height: 50px; border-radius: 4px;}
.nav-load a:hover, .fdl:hover {background: linear-gradient(to bottom, #3e9cb3, #48b0ca); color: #fff;}
.nav-load > span {display: none;}
.navigation {text-align:center;}
.navigation a, .navigation span, .pnext a, .pprev a, .pprev > span, .pnext > span {display:inline-block; padding:0 10px; 
	margin:0 3px 10px 3px; line-height: 40px; min-width: 40px; background-color: #fff; 
	box-shadow: 0 0 0 1px #eee; border-radius: 4px; font-weight: 500; font-size: 17px;}
.navigation span:not(.nav_ext), .pagi-nav a:hover {background-color:#3e9cb3; color: #fff;}
.searchheading {color: #000; text-decoration: none; font-weight: bold; padding: 5px 10px; border: 2px solid #13e0ff; border-radius: 15px; display: block;}
.search {display: none;}
.download .download-link {display: flex;
    flex-direction: column;
    align-items: center;    color: #55e9ff;}
    
.download .download-link:hover {color:#42b2c3}
@media only screen and (max-width: 1240px) {
    
   .container {padding:10px;}
}
@media only screen and (max-width: 1100px) {
  
  .toggle-aside-button {display: block;order: 2;   background: none;     border: none; font-size: 20px;}
   .main__aside { display: block; position: fixed; top: 0; right: -300px;  width: 300px; height: 100%; background: #fff; z-index: 999; transition: right 0.3s ease;  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);        padding: 15px; }
.close-aside-button { display: block; position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 24px; cursor: pointer; color: #333; z-index: 1001; }
  .main__aside.open {
    right: 0;
  }
}


@media only screen and (max-width: 1000px) {
 .logo { font-size: 25px;}
}

@media only screen and (max-width: 830px) {
    .header {  gap: 15px; flex-wrap: wrap;  }
    #q_search { order: 0; width: calc(100% + 10px);    margin-left: -5px;}
    .header > .logo { order: 1; align-self: flex-start;  }
    .header > .login { order: 2;  align-self: flex-end; margin-top: auto;  }
    .main__music {    flex-direction: column;}
    .popular, .newmusik {width: 100%;}
    .fullflex {    flex-direction: column;}
    .left__full, .right__full { width: 100%; }
}




/*Блок рекламы можно удалить*/
.ad-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.ad-content {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.ad-text {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Адаптивность */
@media (max-width: 1024px) {
  .ad-container {
    padding: 15px;
  }
  
  .ad-content {
    min-height: 100px;
  }
  
  .ad-text {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .ad-container {
    padding: 12px;
    border-radius: 8px;
  }
  
  .ad-content {
    min-height: 80px;
  }
  
  .ad-text {
    font-size: 18px;
    letter-spacing: 1px;
  }
}

@media (max-width: 480px) {
  .ad-container {
    padding: 10px;
    margin: 10px 0;
  }
  
  .ad-content {
    min-height: 60px;
  }
  
  .ad-text {
    font-size: 16px;
    letter-spacing: 0.5px;
  }
}