* { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
body {
    margin: 0;
    background: radial-gradient(circle at top, rgba(255,255,255,0.78), transparent 430px), #f3ead8;
    font-family: Tahoma, Arial, sans-serif;
    color: #60371f;
    -webkit-text-size-adjust: 100%;
}
a, button, input { -webkit-tap-highlight-color: transparent; }
.page-top {
    position: relative;
    overflow: hidden;
    background: #874523;
    background: linear-gradient(135deg, #6f371e 0%, #9b5a31 58%, #b97845 100%);
    color: #fff;
    border-bottom: 4px solid #d9b57d;
    box-shadow: 0 3px 14px rgba(80,42,20,.22);
}
.page-top:before,.page-top:after { content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.06); pointer-events:none; }
.page-top:before { width:230px; height:230px; top:-145px; left:-55px; }
.page-top:after { width:170px; height:170px; right:7%; bottom:-125px; }
.top-inner { width:94%; max-width:1000px; margin:0 auto; padding:18px 0; display:flex; align-items:center; gap:14px; position:relative; z-index:2; }
.site-icon { display:block; width:58px; height:58px; padding:5px; flex:0 0 58px; object-fit:contain; background:#fff; border:2px solid #e8cfaa; border-radius:14px; box-shadow:0 2px 8px rgba(0,0,0,.20); }
.top-text { min-width:0; }
.top-title { margin:0; font-size:23px; line-height:1.5; }
.top-subtitle { margin:3px 0 0; font-size:12px; line-height:1.7; color:#f8ead6; }
.quick-links { width:94%; max-width:1000px; margin:0 auto; padding:0 0 14px; display:flex; flex-wrap:wrap; gap:7px; position:relative; z-index:2; }
.quick-links a { display:inline-block; padding:8px 12px; color:#fff; text-decoration:none; font-size:12px; font-weight:bold; background:rgba(73,34,17,.38); border:1px solid rgba(255,244,222,.44); border-radius:7px; transition:.2s; }
.quick-links a:hover { background:#fff4dc; color:#6c381e; transform:translateY(-1px); }
.wrap { width:94%; max-width:1000px; margin:24px auto 34px; }
.box { overflow:hidden; background:#fffaf0; border:1px solid #b97845; border-radius:12px; box-shadow:0 7px 24px rgba(96,55,31,.13); }
.head { padding:15px; text-align:center; background:linear-gradient(180deg,#f1dfbe 0%,#e6cca0 100%); border-bottom:1px solid #b97845; font-size:20px; font-weight:bold; color:#6c381e; }
.head small { display:block; margin-top:5px; font-size:11px; font-weight:normal; color:#8a5a39; }
.body { padding:18px; }
.form { display:grid; grid-template-columns:minmax(0,1fr) minmax(155px,.28fr); gap:10px; background:#fff4d8; border:1px solid #d7b27e; border-radius:9px; padding:13px; }
.url-wrap { display:grid; grid-template-columns:minmax(0,1fr) 110px; gap:8px; min-width:0; }
input,button { display:block; width:100%; min-width:0; height:44px; border:1px solid #b97845; border-radius:7px; font-family:Tahoma,Arial,sans-serif; font-size:14px; outline:none; }
input { padding:0 12px; background:#fff; color:#4f2d1c; direction:ltr; text-align:left; }
input:focus { border-color:#8a4826; box-shadow:0 0 0 3px rgba(185,120,69,.15); }
button { padding:0 11px; background:#92502c; color:#fff; font-weight:bold; cursor:pointer; }
button:hover { background:#743b20; }
button:disabled { opacity:.7; cursor:wait; }
.paste-button { background:#b87945; }
.note,.message { margin-top:14px; padding:11px 13px; text-align:center; font-size:13px; line-height:1.8; border-radius:7px; }
.note { background:#fff7e7; border:1px solid #dfc49a; }
.message { display:none; }
.message.show { display:block; }
.message.error { background:#fff0ee; border:1px solid #d39b94; color:#9a332c; }
.message.success { background:#edf6e8; border:1px solid #9dbd8d; color:#416331; font-weight:bold; }
.message.info { background:#fff7e7; border:1px solid #dfc49a; }
.result { margin-top:14px; }
.result-box { display:grid; grid-template-columns:150px minmax(0,1fr); gap:15px; align-items:center; padding:14px; background:#fff; border:1px solid #d8bd99; border-radius:9px; }
.result-box img { display:block; width:150px; height:150px; object-fit:cover; border-radius:8px; border:1px solid #d8bd99; }
.result-box h3 { margin:0 0 8px; font-size:16px; line-height:1.8; color:#60371f; }
.result-box p { margin:0 0 12px; font-size:12px; color:#8a6448; }
.result-actions { display:flex; flex-wrap:wrap; gap:8px; }
.result-actions a { display:inline-block; padding:10px 16px; border-radius:7px; text-decoration:none; font-size:13px; font-weight:bold; }
.download-link { background:#a65d34; color:#fff; border:1px solid #8c4b29; }
.music-link { background:#fff3d9; color:#60371f; border:1px solid #d7b27e; }
.info-box { margin-top:16px; padding:15px; background:#fff7e7; border:1px solid #dfc49a; border-radius:9px; }
.info-box h2 { margin:0 0 7px; font-size:15px; color:#6c381e; }
.info-box h2:not(:first-child) { margin-top:15px; }
.info-box p { margin:0; font-size:12px; line-height:2; color:#755039; }
.footer-note { margin-top:14px; text-align:center; font-size:11px; color:#8a6448; }
@media screen and (max-width:760px) {
    .page-top { border-bottom-width:3px; }
    .top-inner { width:100%; padding:13px 11px; gap:10px; }
    .site-icon { width:48px; height:48px; flex:0 0 48px; border-radius:10px; }
    .top-title { font-size:17px; }
    .top-subtitle { font-size:10px; }
    .quick-links { width:100%; padding:0 10px 11px; gap:6px; }
    .quick-links a { flex:1 1 calc(50% - 6px); padding:9px 5px; text-align:center; }
    .wrap { width:100%; max-width:100%; margin:0; padding:8px; }
    .box { width:100%; max-width:100%; border-radius:8px; }
    .head { padding:12px 7px; font-size:16px; line-height:1.7; }
    .head small { font-size:10px; }
    .body { padding:9px; }
    .form { display:block; width:100%; padding:9px; }
    .url-wrap { display:block; width:100%; }
    .form input,.form button { width:100%; max-width:100%; height:48px; margin:0 0 8px; font-size:15px; }
    .form .submit-button { margin-bottom:0; }
    input { direction:rtl; text-align:right; }
    .note,.message { padding:9px 7px; font-size:12px; }
    .result-box { display:block; padding:10px; }
    .result-box img { width:100%; height:auto; max-height:340px; margin-bottom:12px; }
    .result-actions { display:block; }
    .result-actions a { display:block; width:100%; text-align:center; margin-top:8px; padding:12px 8px; }
    .info-box { padding:12px 10px; }
    .info-box h2 { font-size:14px; }
    .info-box p { font-size:12px; }
}
@media screen and (max-width:370px) {
    .top-title { font-size:15px; }
    .top-subtitle { display:none; }
    .quick-links a { flex-basis:100%; }
}