/* BASE
----------------------------------------------- */
* {background: transparent; margin: 0; padding: 0; outline: none; border: 0;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
table {border-collapse: collapse; border-spacing: 0;}
input, select {vertical-align: middle;}
article, aside, figure, figure img, hgroup, footer, header, nav, section, main {display: block;}
img {max-width: 100%;}
.clr {clear: both;}
.clearfix:after {content: ""; display: table; clear: both;}

:root {
	--bg: #0b0d11;
	--stage: #10131a;
	--card: #171b24;
	--line: #262b36;
	--text: #efece6;
	--muted: #8d8896;
	--gold: #f3c15b;
	--gold-2: #d9a63a;
	--violet: #7c6cff;
	--danger: #ff6b7a;
}

body {font-family: 'Manrope', sans-serif; font-size: 15px; line-height: 1.45; padding: 0; margin: 0;
color: var(--text); background: var(--bg); min-height: 100%; width: 100%; font-weight: 400;}
a {color: var(--text); text-decoration: none;}
a:hover, a:focus {color: var(--gold); text-decoration: none;}
h1, h2, h3, h4, h5 {font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 24px;}

button, textarea, input[type="text"], input[type="password"] {appearance: none; -webkit-appearance: none;
	font-size: 15px; font-family: 'Manrope' !important;}

.button, .btn, .pagi-load a, .up-second li a, .usp-edit a, .qq-upload-button, button:not(.color-btn):not([class*=fr]),
html input[type="button"], input[type="reset"], input[type="submit"], .meta-fav a, .usp-btn a {
display: inline-block; text-align: center; padding: 0 18px; height: 42px; line-height: 42px;
border-radius: 12px; cursor: pointer; color: #16130c; background-color: var(--gold); font-size: 14px; font-weight: 600;
box-shadow: none;}
.button:hover, .btn:hover, .up-second li a:hover, .usp-edit a:hover, .qq-upload-button:hover,
.pagi-load a:hover, .usp-btn a:hover,
button:not(.color-btn):hover, html input[type="button"]:hover, input[type="reset"]:hover,
input[type="submit"]:hover, .meta-fav a:hover
{background-color: #ffd27a; color: #16130c;}
button:active, input[type="button"]:active, input[type="submit"]:active {transform: translateY(1px);}

input[type="text"], input[type="password"] {height: 42px; line-height: 42px;
border-radius: 12px; border: 0; padding: 0 15px;}
select {height: 42px; border: 0; padding: 0 15px; border-radius: 12px;}
textarea {padding: 15px; overflow: auto; vertical-align: top; resize: vertical; border-radius: 12px;}
input[type="text"], input[type="password"], select, textarea {width: 100%; background-color: #1c212c; color: var(--text);
box-shadow: inset 0 0 0 1px var(--line);}
select {width: auto;}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus
{box-shadow: inset 0 0 0 1px var(--gold);}
input::placeholder, textarea::placeholder {color: var(--muted); opacity: 1; font-size: 14px;}
input:focus::placeholder, textarea:focus::placeholder {color: transparent}

.pic-box, .img-wide, .pic-ratio, .pic-square, .pic-fit {overflow: hidden; position: relative;}
.pic-ratio {padding-top: 60%;}
.pic-square {padding-top: 100%;}
.pic-box img, .pic-ratio img, .pic-square img {width: 100%; min-height: 100%; display: block;}
.pic-ratio > img, .pic-square img {position: absolute; left: 0; top: 0;}
.img-wide img {width: 100%; display: block;}
.pic-fit img {width: 100%; height: 100%; object-fit: cover;}
.no-wrap {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.flex, #dle-content {display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;
-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}
.flex-col {display:-ms-flexbox;display:-webkit-flex;display:flex;
-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}
.flex-center {-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center}
.flex-mid {-ms-flex-align:center;-webkit-align-items:center;align-items:center}
.flex-start {-webkit-justify-content:flex-start;justify-content:flex-start;}
.flex-first {-ms-flex-order: -1;-webkit-order: -1;order: -1;}
.flex-last {-ms-flex-order: 10;-webkit-order: 10;order: 10;}
.flex-grow {-ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1;
	max-width: 100%; min-width: 50px;}

b, strong, .fw700 {font-weight: 600;}
.hidden, .hide, #dofullsearch {display: none;}
.ease, .aside-menu a, .song-row, .cover-card, .hit-link, button, .btn {transition: all .2s ease;}
.mtitle, .sub-title h1, .form-wrap h1 {margin-bottom: 20px; font-size: 24px; color: var(--text);}
#dle-content > *:not(.sect-col) {width: 100%;}


/* PAGE
----------------------------------------------- */
.page {width: 1200px; max-width: 100%; min-width:320px; min-height: 100vh; display: flex; margin: 0 auto; padding-bottom: 88px; background:
	radial-gradient(900px 420px at 80% -10%, rgba(243,193,91,.12), transparent 55%),
	radial-gradient(700px 380px at 0% 20%, rgba(124,108,255,.08), transparent 50%),
	var(--stage);}
.rail {width: 240px; flex-shrink: 0; padding: 18px 14px 20px; border-right: 1px solid var(--line);
	background: rgba(12,14,18,.72); position: sticky; top: 0; align-self: flex-start;
	height: auto; max-height: none; overflow: hidden;}
.stage {flex: 1; min-width: 0; width: 960px; display: flex; flex-direction: column;}
.topbar {position: sticky; top: 0; z-index: 40; padding: 16px 28px; gap: 14px;
	background: rgba(11,13,17,.78); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line);}
.main-area {min-height: 70vh; padding: 28px 32px 20px;}
.page-foot {padding: 22px 32px 28px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line);}
.foot-text a {color: var(--gold); border-bottom: 1px dotted rgba(243,193,91,.5);}


/* BRAND + SEARCH
----------------------------------------------- */
.brand {display: flex; align-items: center; gap: 10px; margin: 0 0 22px 2px; color: var(--text);}
.brand:hover {color: var(--text);}
.brand-mark {display: flex; width: 36px; height: 36px; flex-shrink: 0;}
.brand-mark svg {display: block; width: 36px; height: 36px;}
.brand-name {font-family: 'Manrope', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: .08em; line-height: 1;}
.top-brand {display: none; margin: 0;}
.find-box {position: relative; max-width: 720px;}
.find-ico {position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none;}
.find-box input, .find-box input:focus {padding: 0 110px 0 42px; height: 44px; line-height: 44px;
background-color: #1a1e28; color: var(--text); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line);}
.find-box input:focus {box-shadow: inset 0 0 0 1px var(--gold);}
.find-box input:not(:focus)::placeholder {color: var(--muted); opacity: 1;}
.find-box button {position: absolute; right: 4px; top: 4px; z-index: 10; height: 36px !important; line-height: 36px !important;
padding: 0 16px !important; border-radius: 999px !important; font-size: 13px !important;}
.enter-btn {background: transparent; color: var(--text); height: 42px; line-height: 42px;
	box-shadow: inset 0 0 0 1px var(--line); min-width: 92px;}
.enter-btn:hover {background: var(--gold); color: #16130c;}


/* RAIL
----------------------------------------------- */
.rail-block {margin-bottom: 18px;}
.rail-label {font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
	margin: 0 8px 10px; font-weight: 700;}
.aside-menu a {display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500;
	padding: 7px 8px; border-radius: 10px; color: #d8d4cc;}
.aside-menu a:hover {background: #1c212c; color: var(--gold);}
.aside-menu [class*=fa-] {width: 28px; height: 28px; line-height: 28px; text-align: center;
	border-radius: 8px; background: #1c212c; color: var(--gold); font-size: 12px;}
.aside-menu li + li {margin-top: 2px;}

.aside-list {counter-reset: hits;}
.hit-link {display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; line-height: 1.3;}
.hit-link + .hit-link {margin-top: 3px;}
.hit-num {flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; background: #1c212c;
	display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--gold);}
.hit-num:before {counter-increment: hits; content: counter(hits);}
.hit-info {min-width: 0;}
.hit-name {display: block; font-size: 14px; font-weight: 600; color: var(--text);}
.hit-artist {display: block; font-size: 12px; color: var(--muted); font-weight: 500; margin-top: 2px;}
.hit-link:hover {background: #1c212c;}
.hit-link:hover .hit-num {background: var(--gold); color: #16130c;}
.hit-link:hover .hit-name {color: var(--gold);}


/* INTRO + SECTIONS
----------------------------------------------- */
.intro {margin-bottom: 34px; padding: 28px 30px; border-radius: 22px;
	background: linear-gradient(135deg, #1c1820 0%, #151821 48%, #1a1730 100%);
	border: 1px solid var(--line);}
.intro-kicker {color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px;}
.intro-title {font-size: 34px; line-height: 1.15; margin-bottom: 10px; max-width: 640px;}
.intro-text {color: var(--muted); max-width: 560px; font-size: 15px;}

.section {margin-bottom: 36px;}
.section-head {margin-bottom: 16px;}
.section-name {font-size: 22px; font-weight: 600;}
.section-note {font-size: 14px; color: var(--muted); margin-bottom: 12px;}
.section-more {color: var(--gold); font-size: 14px; font-weight: 600;}
.section-more:hover {text-decoration: underline;}
.share-block {padding-top: 8px;}
.share-line {height: 24px;}


/* COVERS
----------------------------------------------- */
.grid-covers {display: grid; gap: 18px; grid-template-columns: repeat(auto-fill,minmax(140px,1fr));}
.cover-card {display: block;}
.cover-pic {border-radius: 16px; background: #1c212c;}
.cover-play {position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: 50%;
	background: var(--gold); color: #16130c; display: grid; place-items: center; font-size: 12px;
	opacity: 0; transform: translateY(6px); transition: .2s;}
.cover-card:hover .cover-play {opacity: 1; transform: none;}
.cover-name {margin-top: 10px; font-size: 13px; font-weight: 600; color: #e7e3dc;}


/* SONG LIST
----------------------------------------------- */
.song-list {display: flex; flex-direction: column; gap: 6px;}
.song-row {padding: 8px 10px; border-radius: 14px; gap: 14px;}
.song-row:hover {background: #1a1e28;}
.song-row a {display: block;}
.song-thumb {width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0; cursor: pointer; background: #1c212c;}
.song-play {position: absolute; inset: 0; display: grid; place-items: center; background: rgba(11,13,17,.45);
	color: #fff; opacity: 0; transition: .2s; font-size: 12px;}
.song-thumb:hover .song-play, .js-song-on .song-play {opacity: 1;}
.js-song-on .fa-play:before {content: '\f04c';}
.js-song-on .song-thumb {box-shadow: 0 0 0 2px var(--gold);}
.song-name {font-weight: 600; font-size: 15px;}
.song-artist {margin-top: 2px; color: var(--muted); font-size: 13px;}
.song-fav {color: var(--muted); font-size: 16px; cursor: pointer; width: 32px; text-align: center;}
.song-fav:hover, .tr-fav-added {color: var(--gold);}
.song-time {color: var(--muted); font-size: 13px; width: 40px; text-align: right;}
.song-dl {width: 36px; height: 36px; border-radius: 50%; display: grid !important; place-items: center;
	color: var(--text); box-shadow: inset 0 0 0 1px var(--line);}
.song-dl:hover {background: var(--gold); color: #16130c; box-shadow: none;}


/* SONG PAGE
----------------------------------------------- */
.song-hero {position: relative; overflow: hidden; border-radius: 24px; margin-bottom: 18px; min-height: 280px;}
.song-hero-bg {position: absolute; inset: -20px; background-size: cover; background-position: center; filter: blur(28px) saturate(1.1);
	transform: scale(1.08); opacity: .35;}
.song-hero:after {content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,13,17,.2), rgba(11,13,17,.88));}
.song-hero-in {position: relative; z-index: 2; padding: 28px; gap: 28px;}
.song-cover {width: 220px; height: 220px; border-radius: 20px; box-shadow: 0 18px 50px rgba(0,0,0,.45); flex-shrink: 0;}
.song-kicker {font-size: 12px; color: var(--gold); margin-bottom: 8px; font-weight: 600;}
.song-kicker a {color: var(--gold);}
.song-head {font-size: 36px; line-height: 1.1; margin-bottom: 8px;}
.song-by {font-size: 18px; color: #d8d4cc; margin-bottom: 16px;}
.song-facts {gap: 10px 18px; margin-bottom: 20px;}
.song-facts li {font-size: 14px; color: var(--text);}
.song-facts span {display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px;}
.song-acts {gap: 10px; width: 100%;}
.act-listen, .act-save, .act-fav {cursor: pointer; height: 46px; line-height: 46px; border-radius: 999px;
	padding: 0 20px; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px;}
.act-listen {background: var(--gold); color: #16130c;}
.act-save {box-shadow: inset 0 0 0 1px #fff3; color: #fff;}
.act-save:hover {background: #fff; color: #16130c;}
.act-fav {width: 46px; padding: 0; justify-content: center; box-shadow: inset 0 0 0 1px #fff3;}
.act-fav:hover, .act-fav.tr-fav-added {background: var(--gold); color: #16130c; box-shadow: none;}
.song-tags {margin-top: 16px;}
.song-tags a {display: inline-block; height: 30px; line-height: 30px; font-size: 12px; border-radius: 999px;
	padding: 0 10px; margin: 0 6px 6px 0; background: rgba(255,255,255,.06); color: #d8d4cc;}
.song-tags a:before {content: '#'; margin-right: 3px; color: var(--gold);}
.song-note {background: #171b24; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
	color: var(--muted); margin-bottom: 28px;}


/* TEXT
----------------------------------------------- */
.video-box embed, .video-box object, .video-box video, .video-box iframe, .video-box frame
{max-width:100% !important; display:block; width:100%; height:450px;}
.full-text {line-height: 1.8; font-size: 15px; color: var(--text); background: var(--card); border: 1px solid var(--line);
	border-radius: 16px; padding: 20px 22px;}
.full-text img:not(.emoji) {max-width:100%; margin:10px 0;}
.full-text a {text-decoration:underline; color: var(--gold);}
.full-text a:hover {color: #ffd27a;}
.full-text h2, .full-text h3, .full-text h4, .full-text h5 {margin:10px 0; font-size:22px; color: var(--text);}
.full-text b, .full-text strong {color: var(--text); font-weight: 600;}
.full-text p {margin-bottom:10px; color: var(--text);}
.full-text ul li {list-style:disc; margin-left:40px;}
.full-text ol li {list-style:decimal; margin-left:40px;}
.speedbar {font-size: 13px; color: var(--muted); margin-bottom: 16px;}
.speedbar a {color: var(--gold);}


/* COMMENTS
----------------------------------------------- */
.reply-form {margin-bottom: 30px; display: none;}
.reply-fields input {width: 48.7%; margin-bottom: 15px;}
.reply-area textarea {height: 100px; margin-bottom: 15px;}
.reply-guard, .reply-area .bb-editor + br {display: none;}
.last-comm-link {display: inline-block; padding-bottom: 20px; color: var(--gold); font-size: 18px;}
.reply-ava {position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%;}
.reply-letter {text-align: center; line-height: 40px; background-color: var(--violet); color: #fff;
	font-weight: 600; text-transform: uppercase; font-size: 18px; position: absolute; left: 0; top: 0;
width: 100%; height: 100%; border-radius: 50%;}
.reply-item {margin-bottom: 18px; font-size: 13px; padding: 14px 16px 14px 62px; position: relative; min-height: 40px;
	background: var(--card); border: 1px solid var(--line); border-radius: 16px;}
.reply-text {margin: 8px 0; font-size: 14px; color: #d8d4cc;}
.reply-meta > span {margin-right: 15px; color: var(--muted);}
.reply-meta > span.reply-name, .reply-meta > span.reply-name a {color: var(--gold);}
.reply-left > a {color: var(--gold); border-bottom: 1px dotted var(--gold);}


/* LOGIN
----------------------------------------------- */
.dim-layer {position: fixed; z-index: 998; left: 0; top: 0; width: 100%; height: 100%;
opacity: 0.72; background-color: #000; cursor: pointer;}
.enter-box {position: fixed; z-index: 999; left: 50%; top: 50%; transform: translate(-50%,-50%);
background-color: #171b24; padding: 28px 32px; width: 400px; border: 1px solid var(--line);
box-shadow: 0 24px 80px rgba(0,0,0,0.55); display: none; border-radius: 20px;}
.enter-close {width: 32px; height: 32px; line-height: 32px; text-align: center; font-size: 20px;
	cursor: pointer; position: absolute; top: -40px; right: 0; color: #fff;}
.enter-name {font-size: 18px; font-weight: 600; margin-bottom: 15px; text-align: center;}
.enter-ava {width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 15px auto; overflow: hidden;}
.enter-field {margin-bottom: 15px;}
.enter-field button {margin-left: 10px; width: 52px;}
.enter-extra a {color: var(--gold); font-size: 13px;}
.enter-list {border-top: 1px solid var(--line);}
.enter-list li {text-align: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); width: 50%;}
.enter-list a {display: block; padding: 12px 6px; font-size: 13px;}
.enter-list li .fa {display: none;}
.enter-admin {text-align: center; margin: -6px 0 18px 0;}
.enter-extra a:after {content: attr(data-text);}


/* PHONE MENU
----------------------------------------------- */
.phone-panel {width:300px; height:100%; overflow: hidden; background-color:#10131a;
padding:18px; z-index:9999; position:fixed; left:-320px; top:0; transition:left .35s; color: var(--text);
border-right: 1px solid var(--line);}
.phone-panel.active {left:0;}
.phone-close {cursor:pointer; display:block; left: 300px; top: -40px; position: fixed; z-index: 9999;
width:40px; height:40px; line-height:40px; text-align:center; font-size:18px; opacity: 0;
background-color: var(--gold); color: #16130c; transition:top .35s;}
.phone-close.active {top:0px; opacity: 1;}
body.menu-open {overflow: hidden; width: 100%; height: 100%;}
.phone-panel a {color: var(--text);}


/* PAGES
----------------------------------------------- */
.bottom-nav {line-height:40px; margin-top: 10px;}
.navigation {text-align:left;}
.navigation a, .navigation span {display:inline-block; padding:0 12px; margin:10px 6px 0 0;
border-radius:10px; min-width: 40px; text-align: center; height: 38px; line-height: 38px;
background-color: #1c212c; color: var(--text);}
.navigation span:not(.nav_ext), .pagi-nav a:hover {background-color: var(--gold); color:#16130c;}


/* PLAYER
----------------------------------------------- */
.player-bar {width: 100%; position: fixed; left: 0; bottom: 0; z-index: 997;
	background: rgba(16,19,26,.92); color: #ccc; border-top: 1px solid var(--line); backdrop-filter: blur(16px);}
.audioplayer {max-width: 1200px; width: 100%; margin: 0 auto; min-height: 76px; padding: 12px 20px;}
.audioplayer audio {display: none;}
.audioplayer-bar {position: relative; height: 5px; cursor: pointer;
	background-color: #2a2f3b; margin: 0 10px; flex: 1 1 0; border-radius: 99px;}
.audioplayer-bar-loaded {position: absolute; left: 0; top: 0; height: 100%; background-color: rgba(0,0,0,0);}
.audioplayer-bar-played {position: absolute; left: 0; top: 0; height: 100%;
	z-index: 10; background-color: var(--gold); cursor: pointer; border-radius: 99px;}
.audioplayer-bar-played::before, .audioplayer-volume-adjust > div > div::before {content: '';
	width: 12px; height: 12px; border-radius: 50%; background-color: #fff;
	position: absolute; right: 0; top: 50%; transform: translate(50%,-50%); pointer-events: none;}

.audioplayer-volume {display: flex; align-items: center; gap: 10px; margin-left: 30px;}
.audioplayer-muted .fa-volume-up:before {content: '\f6a9';}
.audioplayer-volume-button a {display: block; font-size: 18px; color: #bbb;}
.audioplayer-volume-adjust > div {width: 80px; height: 5px; position: relative; cursor: pointer; background: #2a2f3b; border-radius: 99px;}
.audioplayer-volume-adjust > div > div {background-color: var(--gold);
	position: absolute; left: 0; bottom: 0; z-index: 10; height: 100%; border-radius: 99px;}

.player-dl {font-size: 16px; margin-left: 15px; order: 10; color: #bbb;}
.audioplayer-time {font-size: 12px; min-width: 37px; color: #d8d4cc;}
.player-info {width: 280px; margin-right: 20px; justify-content: flex-start; color: var(--text);}
.player-text {max-width: calc(100% - 65px);}
.player-cover {width: 48px; height: 48px; margin-right: 12px; border-radius: 10px; overflow: hidden;}
.player-artist {margin-top: 3px; font-weight: 400; color: var(--muted); font-size: 12px;}
.player-title {font-weight: 600;}
.player-btns {margin-right: 24px;}
.audioplayer-playpause a {width: 42px; height: 42px; display: grid; place-items: center;
	border-radius: 50%; position: relative; margin: 0 12px; color: #16130c; background: var(--gold);}
.player-prev, .player-next {cursor: pointer; font-size: 20px; color: #d8d4cc;}
.player-prev:hover, .player-next:hover, .audioplayer-volume-button a:hover, .player-dl:hover {color: var(--gold);}
.player-bar-ready .audioplayer-playpause .fas:before {content: '\f04b'; padding-left: 1px;}
.player-bar-ready .audioplayer-bar-played {width: 10px !important;}


/* DLE DARK OVERRIDES
----------------------------------------------- */
.us-prof, .form-wrap, .search-page, .pm-page {background: transparent; color: var(--text); box-shadow: none;}
.usp-left {background: #171b24 !important;}
.usp-name {background: #1c212c !important; border-color: var(--line) !important; color: var(--text);}
.usp-meta li:nth-child(2n+1) {background-color: #171b24;}
.form-item > label, .form-wrap, .sub-title h1 {color: var(--text);}
#searchtable fieldset {border-color: var(--line) !important; background: var(--card);}
fieldset legend {color: var(--muted);}
.berrors {background: #2a2116; color: #f3c15b; border-radius: 12px; padding: 12px 16px; margin-bottom: 20px;}
.ui-dialog {background: #171b24 !important; color: var(--text);}


@media screen and (max-width: 1200px) {
.rail {display: none;}
.page {display: block; width: 100%; overflow-x: hidden;}
.stage {width: 100%;}
.topbar {padding: 12px 16px; flex-wrap: wrap;}
.top-brand {display: flex; margin: 0; margin-right: auto;}
.top-brand .brand-mark, .top-brand .brand-mark svg {width: 30px; height: 30px;}
.top-brand .brand-name {font-size: 17px; letter-spacing: .05em;}
.main-area, .page-foot {padding: 20px 16px;}
.burger, .burger.hide {display: block; margin-left: 8px; font-size: 18px; width: 42px; height: 42px; padding: 0;
	background: #1c212c; color: var(--text);}
.enter-btn {min-width: 0; padding: 0 14px; font-size: 13px;}
.find-area, .find-box {min-width: 100%; width: 100%; max-width: 100%;}
.find-area {order: 10; margin-top: 10px;}
.intro {padding: 22px 20px; margin-bottom: 24px;}
.intro-title {font-size: 24px;}
.intro-text {font-size: 14px;}
.section-name, .mtitle, .sub-title h1, .form-wrap h1 {font-size: 20px;}
.song-cover {width: 160px; height: 160px;}
.song-head {font-size: 24px;}
.song-by {font-size: 16px;}
h1, h2, h3, h4, h5 {font-size: 20px;}
}

@media screen and (max-width: 760px) {
.page {padding-bottom: 120px;}
.grid-covers {gap: 12px; grid-template-columns: repeat(auto-fill,minmax(100px,1fr));}
.enter-btn, .foot-hit {display: none;}
.intro-title {font-size: 22px;}
.intro-kicker {font-size: 11px;}
.section {margin-bottom: 26px;}
.section-name {font-size: 18px;}
.song-name {font-size: 14px;}
.song-artist {font-size: 12px;}
.cover-name {font-size: 12px;}
.song-hero-in {flex-direction: column; align-items: flex-start; padding: 18px; gap: 16px;}
.song-cover {width: 132px; height: 132px;}
.song-head {font-size: 22px;}
.song-by {font-size: 15px;}
.song-facts li {min-width: 30%; font-size: 13px;}
.act-listen, .act-save {width: 100%; justify-content: center; margin-bottom: 6px;}
.song-fav {display: none !important;}
.full-text {font-size: 14px; padding: 16px;}
.find-box button {font-size: 12px !important; padding: 0 12px !important;}
.enter-box {max-width: calc(100% - 32px); padding: 18px;}
.video-box embed, .video-box object, .video-box video, .video-box iframe, .video-box frame {height:250px;}
}

@media screen and (max-width: 590px) {
.topbar {padding: 10px 12px;}
.main-area, .page-foot {padding: 16px 12px;}
.top-brand .brand-name {font-size: 16px; letter-spacing: .04em;}
.intro {padding: 18px 16px;}
.intro-title {font-size: 20px;}
.intro-text {font-size: 13px;}
.section-name {font-size: 17px;}
.song-head {font-size: 20px;}
.song-note {font-size: 13px;}
.player-info {width: calc(100% - 170px); margin-right: 0;}
.player-title {font-size: 13px;}
.player-artist {font-size: 11px;}
.player-btns {width: 153px; margin: 0 0 10px 12px; flex-wrap: nowrap;}
.audioplayer {padding: 10px;}
.audioplayer-volume {margin-left: 10px;}
.find-box input, .find-box input:focus {font-size: 14px; padding-right: 88px;}
.reply-fields input {width: 100%;}
}