/*
Script Name: Mp3 Tag Editor
Author: Vebeet
Author URI: http://vebeet.com
Version: 2.0
*/
@font-face{font-family:dana;font-style:normal;font-weight:400;font-display:swap;src:url(assets/dana.woff2) format("woff2")}
:root{--bg:#fff;--text-primary:#111827;--text-50op:#3f4248;--text-muted:#6b7280;--primary:#3C2637;--radius:.75rem;--shadow:rgba(0,0,0,0.05);--space:1em;--transition:.3s ease}
*{box-sizing:border-box;margin:0;border:0;padding:0}
body{background-color:var(--primary);color:var(--text-primary);font-family:dana;min-height:100vh;display:flex;justify-content:center;padding:2rem;line-height:1.6;background-image:url(assets/music.png)}
button{font-family:dana}
main.container{max-width:1000px;width:100%;background:var(--bg);box-shadow:0 0 12px var(--shadow);border-radius:var(--radius);padding:1.5em}
h1{font-size:18px;font-weight:400;margin-bottom:1em;user-select:none;text-align:center;color:var(--text-primary)}
form{display:flex;flex-direction:column;gap:1em;position:relative}
legend{font-size:16px;font-weight:400;margin-bottom:1em;user-select:none;color:var(--text-primary)}
label{font-weight:400;color:var(--text-50op);display:grid;gap:.5em;font-size:14px}
input[type="text"],input[type="url"],input[type="number"],input[type="file"],input[type="password"]{width:100%;padding:.6rem .8rem;border:1px solid #d1d5db;border-radius:var(--radius);font-size:1rem;color:var(--text-primary);transition:border-color var(--transition),box-shadow var(--transition);font-family:inherit;cursor:text;direction:ltr}
input[type="text"]:focus,input[type="url"]:focus,input[type="number"]:focus,input[type="file"]:focus,input[type="password"]:focus{outline:none;border-color:var(--primary);box-shadow:0 0 6px var(--primary)}
.tabs{display:flex;margin-bottom:1.2em;user-select:none;gap:.75rem}
.tab{flex:1;padding:.8rem 1rem;font-size:1rem;color:var(--text-muted);text-align:center;border:0;cursor:pointer;border-radius:var(--radius);background:var(--shadow)}
.tab.active{color:var(--bg);background-color:var(--primary)}
section.tab-content{display:none}
section.tab-content.active{display:grid;grid-template-columns:repeat(2,1fr);grid-column-gap:1em;grid-row-gap:1em}
button[type="submit"]{background:var(--primary);color:white;font-weight:400;font-size:1.15rem;padding:.85rem 1.5rem;border:none;border-radius:var(--radius);width:100%;cursor:pointer;user-select:none;transition:background-color var(--transition)}
button[type="submit"]:hover,button[type="submit"]:focus{background-color:#6d4864;outline:none}
.loader{margin:1.5rem auto;border:4px solid #f3f3f3;border-top:4px solid var(--primary);border-radius:50%;width:36px;height:36px;animation:spin 1s linear infinite;display:none;position:absolute;left:10px;bottom:-16px}
@keyframes spin {
to{transform:rotate(360deg)}
}
section.results{background:#ecfdf5;border-radius:var(--radius);border:1px solid #d1fae5;padding:1.2em;user-select:all;margin-top:1em;color:#166534}
section.results h2{margin-bottom:1rem;font-weight:400;font-size:16px;user-select:none;text-align:center}
#linksContainer{display:flex;flex-direction:column;gap:1em}
.link-entry{background:white;border:1px solid #d1d5db;border-radius:var(--radius);padding:.7em;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.7em}
.link-entry strong{user-select:none;font-weight:400;color:var(--text-50op);font-size:14px}
.link-entry a{font-size:14px;user-select:text;color:var(--text-muted);height:33px;display:flex;align-items:center;overflow:hidden;direction:ltr;margin:0 1em;flex:1;line-height:1.4;word-wrap:break-word;text-decoration:none}
.copy-btn{border:none;background-color:#166534;color:var(--bg);padding:0 1em;font-size:14px;border-radius:.5rem;cursor:pointer;user-select:none;transition:background-color .3s;height:30px;display:flex;align-items:center}
.copy-btn:hover,.copy-btn:focus{background-color:#21974e}
.fieldset_info{display:grid;grid-template-columns:repeat(2,1fr);grid-column-gap:1em;grid-row-gap:1em}
footer{display:flex;margin:1.2em 0 0;border-top:1px solid var(--shadow);padding:1.2em 0 0;justify-content:center;text-align:center;color:var(--text-muted);font-size:14px;align-items:center;gap:.4em}
footer a{color:var(--text-primary);text-decoration:none;background:var(--shadow);padding:.4em 1em;border-radius:var(--radius);font-size:15px}
@media screen and (max-width: 750px) {
body{padding:0}
main.container{border-radius:0;padding:1em}
section.tab-content.active{grid-template-columns:repeat(1,1fr)}
legend{font-size:15px;margin-bottom:.5em}
.link-entry{background:white;border:1px solid #d1d5db;border-radius:var(--radius);padding:.7em;margin-bottom:.75rem;display:flex;flex-wrap:wrap;gap:.7em;flex-wrap:wrap}
.link-entry strong{order:1}
.copy-btn{order:2}
.link-entry a{order:3;width:100%;flex:initial;margin:0;text-align:center;justify-content:center;height:auto;background:var(--shadow);padding:.4em;border-radius:var(--radius);line-height:initial}
}
@media screen and (max-width: 400px) {
.fieldset_info{grid-template-columns:repeat(1,1fr)}
}