/*====================
01. Import Fonts
======================*/
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;500;600;700;800&display=swap');

/*====================
02. Root Variables
======================*/
:root{
--ma-bg:#050724;
--ma-card:#101638;
--ma-edge:#29305c;
--ma-text:#f3f4ff;
--ma-muted:#a5acc9;
--ma-pink:#fa2866;
--ma-purple:#01014b;
--ma-blue:#01014b;
--ma-pink-hover:#e91e5c;
--ma-input:#151a3c;
}

/*====================
03. General Styles
======================*/
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.ma-page{margin:0;background:radial-gradient(circle at 10% 5%,#111447 0,transparent 38%),linear-gradient(140deg,#050724,#090d2e);color:var(--ma-text);font-family:Lato,Arial,sans-serif;min-height:100vh;overflow-x:hidden}
.ma-page a{color:#fa2866;text-decoration:none}
.ma-page a:hover{
    color: #FFFFFF
}
.ma-page button,.ma-page input,.ma-page select{font-family:inherit}
.ma-page button{touch-action:manipulation}
.ma-page img{max-width:100%;height:auto}
.ma-page :focus-visible{outline:2px solid var(--ma-pink);outline-offset:3px}

/*====================
04. Header & Navigation
======================*/
.ma-top{width:min(1200px,100%);margin:0 auto;padding:22px 24px;display:grid;grid-template-columns:250px minmax(0,1fr) 90px;align-items:center;gap:20px}
.ma-top nav{display:flex;align-items:center;justify-content:center;gap:25px;min-width:0}
.ma-top nav a{font-size:13px;color:#d0d3e9;white-space:nowrap;transition:color .2s ease}
.ma-top nav a:hover,.ma-top nav a.is-active,.ma-top nav a[aria-current=page]{color:var(--ma-pink)}
.ma-brand{display:flex;align-items:center;color:#fff!important;flex-shrink:0}
.ma-brand small{display:block;font-size:9px;font-weight:400;letter-spacing:2px}
.ma-brand img{display:block;width:250px;max-width:100%;height:auto;object-fit:contain}
.ma-mark{font-size:30px;color:var(--ma-pink)}
.ma-top-login{justify-self:end;white-space:nowrap}
@media(max-width:1024px){
.ma-top{grid-template-columns:220px minmax(0,1fr) 90px;gap:14px;padding:20px}
.ma-top nav{gap:16px}
.ma-brand img{width:220px}
}
@media(max-width:760px){
.ma-top{display:flex;flex-wrap:wrap;gap:16px;padding:16px}
.ma-brand img{width:180px}
.ma-top nav{order:3;width:100%;justify-content:space-around;gap:8px;border-top:1px solid var(--ma-edge);padding-top:15px}
.ma-top nav a{font-size:12px;text-align:center}
.ma-top-login{margin-left:auto}
}
@media(max-width:420px){
.ma-top{gap:12px}
.ma-brand img{width:160px}
.ma-top nav{gap:5px}
.ma-top nav a{font-size:11px}
}

/*====================
05. Main Layout & Footer
======================*/
.ma-main{width:calc(100% - 32px);max-width:1140px;margin:35px auto 70px}
.ma-footer{text-align:center;color:#8992b6;font-size:12px;padding:25px 16px;line-height:1.6}
.ma-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.ma-between{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px}
.ma-center{text-align:center;margin:0 0 24px}
.ma-center h1{font-size:29px;margin:10px 0 9px}
.ma-center p{color:var(--ma-muted);font-size:14px;line-height:1.6}

/*====================
06. Login & Register
======================*/
.ma-auth-page .ma-main{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 90px);margin:0 auto}
.ma-auth-card{width:min(410px,100%);background:rgba(9,14,43,.96);border:1px solid var(--ma-edge);padding:34px;border-radius:16px;box-shadow:0 24px 70px #0006}
.ma-brand-centered{justify-content:center;margin-bottom:35px}
.ma-auth-card h1{font-size:29px;margin:0 0 9px;text-align:center}
.ma-auth-card>p{color:var(--ma-muted);font-size:14px;line-height:1.6;text-align:center}
.ma-auth-bottom{text-align:center;margin-top:22px}
.ma-divider{text-align:center;margin:18px 0;color:#8992b6}
.ma-google{width:100%;background:#12183b;color:#ddd;border:1px solid #303761;padding:12px;border-radius:8px;cursor:pointer}
.ma-google:hover{border-color:var(--ma-pink)}

/*====================
07. Forms & Buttons
======================*/
.ma-form{display:flex;flex-direction:column;gap:11px;margin-top:24px}
.ma-form label,.ma-box>label{font-size:13px;font-weight:600}
.ma-form input:not([type=checkbox]),.ma-box select,.ma-box input:not([type=file]){width:100%;background:var(--ma-input);border:1px solid #303761;border-radius:9px;color:#fff;padding:13px;outline:none;font-size:14px;min-height:45px}
.ma-form input:focus,.ma-box input:focus,.ma-box select:focus{border-color:var(--ma-pink)}
.ma-box select{cursor:pointer}
.ma-box select option{background:var(--ma-input);color:#fff}
.ma-password{position:relative}
.ma-password input{padding-right:45px!important}
.ma-eye{position:absolute;right:8px;top:5px;border:0;background:none;color:#a9b1d0;padding:8px;cursor:pointer}
.ma-check{display:flex;align-items:center;gap:7px;font-weight:400!important}
.ma-check input{accent-color:var(--ma-pink)}
.ma-button{display:block;width:100%;padding:13px 18px;border:0;border-radius:9px;color:#fff!important;text-align:center;font-size:14px;font-weight:700;cursor:pointer;background:var(--ma-pink);transition:background .2s ease,transform .2s ease;min-height:45px}
.ma-button:hover{background:var(--ma-pink-hover);color:#fff!important}
.ma-button:disabled{opacity:.55;cursor:not-allowed}
.ma-button-inline{width:auto;display:inline-block;min-height:0}
.ma-feedback{color:#ff91af;font-size:12px;min-height:12px;line-height:1.5}

/*====================
08. Panels & Cards
======================*/
.ma-panel{background:rgba(9,13,39,.8);border:1px solid #242a58;border-radius:18px;padding:26px;min-width:0}
.ma-panel-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}
.ma-panel-head h1{margin:7px 0;font-size:28px}
.ma-panel-head p,.ma-box p{color:var(--ma-muted);font-size:14px;line-height:1.6}
.ma-kicker{font-size:11px;color:#fa2866;letter-spacing:2px;font-weight:700}
.ma-box{background:var(--ma-card);border:1px solid var(--ma-edge);border-radius:14px;padding:24px;min-width:0}
.ma-box h2{font-size:18px;margin:0 0 17px;color:var(--ma-text)}
.ma-detail{display:flex;justify-content:space-between;gap:15px;padding:14px 0;border-bottom:1px solid var(--ma-edge);font-size:13px}
.ma-detail span{color:var(--ma-muted)}
.ma-box .ma-button{margin-top:18px}
.ma-status{font-size:11px;padding:5px 9px;border-radius:20px;white-space:nowrap}
.ma-done{background:#144b43;color:#8ef3c6}
.ma-process{background:#3b1735;color:#ff9cba}
.ma-note{color:var(--ma-muted);font-size:12px;margin-top:20px;line-height:1.6}
.ma-inner{margin-top:25px;background:#171b42}
.ma-inner p{margin:0}

/*====================
09. Tabs & Tracks
======================*/
.ma-tabs{display:flex;gap:8px;border-bottom:1px solid #2b315c;padding-bottom:13px;margin-bottom:15px;flex-wrap:wrap}
.ma-tabs button{background:#141a3c;border:1px solid #303761;color:#b3b8d4;border-radius:8px;padding:9px 17px;cursor:pointer;font-size:13px;transition:background .2s ease,border-color .2s ease}
.ma-tabs button:hover{border-color:var(--ma-pink);color:#fff}
.ma-tabs button.is-active{background:var(--ma-pink);border-color:var(--ma-pink);color:#fff}
.ma-track{display:flex;align-items:center;gap:17px;border-bottom:1px solid #252c55;padding:15px 5px}
.ma-track>div{flex:1;min-width:0}
.ma-track strong,.ma-track small{display:block}
.ma-track strong{overflow-wrap:anywhere}
.ma-track small{font-size:11px;color:var(--ma-muted);margin-top:5px}
.ma-track button{border:1px solid #303761;border-radius:15px;padding:8px 14px;background:#192044;color:#d0d5ef;cursor:pointer}
.ma-track button:disabled{opacity:.5;cursor:not-allowed}
.ma-play{border-radius:50%;background:var(--ma-pink);padding:9px;color:#fff}

/*====================
10. Mastering & Upload
======================*/
.ma-steps{display:flex;justify-content:space-around;align-items:center;gap:12px;background:#10153e;border:1px solid #303761;border-radius:11px;padding:16px;margin-bottom:18px;font-size:12px}
.ma-steps span{text-align:center}
.ma-master-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:20px;min-width:0}
.ma-box>label{display:block;margin:15px 0 8px}
.ma-drop{border:1px dashed var(--ma-pink);border-radius:12px;min-height:170px;display:flex!important;align-items:center;justify-content:center;flex-direction:column;gap:8px;cursor:pointer;text-align:center;background:#151a3c;padding:18px}
.ma-drop:hover{background:#1a2047}
.ma-drop span{font-size:40px;color:var(--ma-pink)}
.ma-drop strong{font-size:14px}
.ma-drop small{font-size:11px;color:var(--ma-muted);line-height:1.5}
.ma-drop-icon{display:flex;align-items:center;justify-content:center;color:var(--ma-pink)}
.ma-drop-icon svg{width:34px;height:34px;stroke:currentColor}
.ma-box input[type=file]{color:#a9b1cf;max-width:100%;font-size:12px}

/*====================
11. Audio Player & Comparison
======================*/
.ma-wave{color:var(--ma-pink);font-size:26px;letter-spacing:2px;white-space:nowrap;overflow:hidden;text-align:center;margin:40px 0 20px;max-width:100%}
.ma-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:30px;min-width:0}
.ma-compare>div{background:#171d43;border:1px solid #303761;border-radius:10px;padding:12px;font-size:12px;min-width:0;max-width:100%}
.ma-mini-wave{color:#fa2866;letter-spacing:3px;overflow:hidden;white-space:nowrap;margin-top:15px;max-width:100%}
.ma-audio-icon{width:18px;height:18px;vertical-align:middle;margin-right:6px;stroke:var(--ma-pink)}
.ma-master-grid>.ma-box,.ma-master-grid .ma-inner{min-width:0;max-width:100%}
.ma-master-grid audio,.ma-master-grid video,.ma-master-grid img{max-width:100%}

/*====================
12. Responsive Design - Tablet
======================*/
@media(max-width:1024px){
.ma-top{padding:20px}
.ma-top nav{gap:16px}
.ma-brand img{width:220px}
.ma-main{margin-top:25px}
.ma-panel{padding:22px}
.ma-box{padding:20px}
.ma-steps{gap:8px;padding:14px 10px}
}

/*====================
13. Responsive Design - Mobile
======================*/
@media(max-width:760px){
body.ma-page{background:radial-gradient(circle at 0 0,#111447 0,transparent 50%),linear-gradient(160deg,#050724,#090d2e)}
.ma-top{padding:16px;flex-wrap:wrap;gap:16px}
.ma-brand img{width:180px}
.ma-top nav{order:3;width:100%;justify-content:space-around;gap:8px;border-top:1px solid var(--ma-edge);padding-top:15px}
.ma-top nav a{font-size:12px;text-align:center}
.ma-top-login{margin-left:auto;font-size:12px}
.ma-main{width:calc(100% - 24px);margin:20px auto 45px}
.ma-two,.ma-master-grid{grid-template-columns:minmax(0,1fr);gap:16px}
.ma-panel{padding:18px;border-radius:14px}
.ma-panel-head{align-items:flex-start;flex-direction:column;gap:10px}
.ma-panel-head h1{font-size:25px}
.ma-center{margin-bottom:20px}
.ma-center h1{font-size:26px}
.ma-center p{font-size:13px}
.ma-kicker{font-size:10px}
.ma-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:13px}
.ma-steps span{font-size:11px;line-height:1.5}
.ma-box{padding:18px;border-radius:12px}
.ma-box h2{font-size:17px}
.ma-tabs{gap:7px}
.ma-tabs button{flex:1;padding:10px 12px}
.ma-drop{min-height:165px;padding:16px}
.ma-wave{font-size:22px;letter-spacing:1px;margin:25px 0 18px}
.ma-compare{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}
.ma-compare>div{padding:10px}
.ma-mini-wave{letter-spacing:2px}
.ma-track{gap:8px;flex-wrap:wrap}
.ma-status{margin-left:auto}
.ma-auth-page .ma-main{min-height:calc(100vh - 100px);padding:25px 0;margin:0 auto}
.ma-auth-card{padding:25px;width:min(410px,100%)}
.ma-auth-card h1{font-size:26px}
.ma-detail{gap:10px}
.ma-detail span,.ma-detail strong{overflow-wrap:anywhere}
.ma-footer{font-size:11px;padding:20px 12px}
}

/*====================
14. Responsive Design - Small Mobile
======================*/
@media(max-width:420px){
.ma-top{gap:12px}
.ma-brand img{width:160px}
.ma-top nav{gap:5px}
.ma-top nav a{font-size:11px}
.ma-top-login{font-size:11px}
.ma-main{width:calc(100% - 20px)}
.ma-panel{padding:14px}
.ma-center h1{font-size:24px}
.ma-steps{padding:10px;gap:8px}
.ma-steps span{font-size:10px}
.ma-box{padding:15px}
.ma-drop{padding:12px}
.ma-drop strong{font-size:13px}
.ma-drop small{font-size:10px}
.ma-compare{grid-template-columns:minmax(0,1fr)}
.ma-mini-wave{letter-spacing:3px}
.ma-auth-card{padding:20px}
.ma-button{font-size:13px}
}

/*====================
15. Reduced Motion
======================*/
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.ma-page *{transition:none!important;animation:none!important}
}

/*====================
16. Animated Audio Waveforms
======================*/
.ma-wave-visual{display:flex;align-items:center;justify-content:center;gap:3px;width:100%;height:145px;margin:25px 0 15px;padding:15px;overflow:hidden;white-space:normal;letter-spacing:normal;background:radial-gradient(ellipse at center,rgba(250,40,102,.09),transparent 70%);border-radius:12px}
.ma-wave-visual .ma-wave-bar{display:block;flex:1 1 3px;max-width:5px;min-width:2px;height:var(--wave-height,20%);border-radius:8px;background:linear-gradient(180deg,#ff7ba4,#fa2866 45%,#b51857);opacity:.9;transform-origin:center;animation:maWavePulse var(--wave-speed,1.8s) ease-in-out infinite alternate;animation-delay:var(--wave-delay,0s)}
.ma-wave-visual .ma-wave-bar:nth-child(3n){background:linear-gradient(180deg,#8e91ff,#fa2866)}
.ma-wave-visual .ma-wave-bar:nth-child(5n){opacity:.65}
.ma-mini-wave.ma-wave-visual{height:75px;margin:12px 0 0;padding:8px 2px;gap:2px;background:transparent}
.ma-mini-wave.ma-wave-visual .ma-wave-bar{max-width:4px;min-width:2px}
.ma-wave-original .ma-wave-bar{background:linear-gradient(180deg,#969bdb,#5e67b6)}
.ma-wave-original .ma-wave-bar:nth-child(3n){background:linear-gradient(180deg,#a9b2ed,#6774c5)}
.ma-wave-mastered .ma-wave-bar{background:linear-gradient(180deg,#ff7ba4,#fa2866)}
.ma-wave-mastered .ma-wave-bar:nth-child(3n){background:linear-gradient(180deg,#ff9cba,#e91e5c)}
@keyframes maWavePulse{0%{transform:scaleY(.72);opacity:.65}100%{transform:scaleY(1.12);opacity:1}}

/*====================
17. Animated Waveforms - Mobile
======================*/
@media(max-width:760px){
.ma-wave-visual{height:115px;gap:2px;padding:10px;margin:20px 0 12px}
.ma-mini-wave.ma-wave-visual{height:65px;gap:2px}
.ma-wave-visual .ma-wave-bar{min-width:2px;max-width:4px}
}
@media(max-width:420px){
.ma-wave-visual{height:95px;padding:8px}
.ma-mini-wave.ma-wave-visual{height:60px}
}
@media(prefers-reduced-motion:reduce){
.ma-wave-visual .ma-wave-bar{animation:none}
}

/*====================
18. Mastering Plans - Pricing
======================*/
.ma-billing-switch{display:flex;justify-content:center;gap:8px;margin:25px 0 30px}
.ma-billing-switch button{padding:11px 24px;border:1px solid var(--ma-border,#30365f);border-radius:8px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.ma-billing-switch button.is-active{background:#fa2866;border-color:#fa2866;color:#fff}
.ma-pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ma-price-card{display:flex;flex-direction:column;gap:14px;min-width:0}
.ma-price-card h2{margin:0}
.ma-price-card p{margin:0}
.ma-price{display:flex;align-items:baseline;gap:5px;margin:12px 0}
.ma-price strong{font-size:32px;line-height:1.2;color:#fff}
.ma-price span{font-size:14px;opacity:.75}
.ma-price-card ul{padding-left:20px;margin:0 0 18px;line-height:2}
.ma-price-card li{padding-left:3px}
.ma-price-card .ma-button{margin-top:auto;text-align:center}
.ma-price-featured{border-color:#fa2866;box-shadow:0 0 25px rgba(250,40,102,.12)}

/*====================
19. Mastering Plans - Responsive
======================*/
@media(max-width:900px){
.ma-pricing-grid{grid-template-columns:1fr}
.ma-price-card{gap:12px}
}
@media(max-width:420px){
.ma-billing-switch button{padding:10px 18px}
.ma-price strong{font-size:28px}
}

/*====================
20. Mastering Support - FAQ
======================*/
.ma-faq{display:flex;flex-direction:column;gap:10px;margin:20px 0 25px}
.ma-faq details{display:block;width:100%;border:1px solid #30365f;border-radius:9px;background:rgba(255,255,255,.025);overflow:hidden}
.ma-faq details summary{display:block;padding:15px 16px;color:#fff;font-weight:700;cursor:pointer;list-style:none}
.ma-faq details summary::-webkit-details-marker{display:none}
.ma-faq details summary::marker{content:""}
.ma-faq details summary::after{content:"+";float:right;color:#fa2866;font-size:20px;line-height:1}
.ma-faq details[open] summary::after{content:"−"}
.ma-faq details[open] summary{border-bottom:1px solid #30365f}
.ma-faq details p{padding:15px 16px;margin:0;color:#b8bfd9;line-height:1.7}
.ma-faq details summary:focus-visible{outline:2px solid #fa2866;outline-offset:-2px}

/*====================
21. Mastering Support - Form
======================*/
#maSupportForm textarea{display:block;width:100%;min-height:145px;padding:12px 14px;box-sizing:border-box;resize:vertical;background:#171d3e;border:1px solid #30365f;border-radius:7px;color:#fff;font-family:inherit;font-size:14px;line-height:1.5}
#maSupportForm textarea::placeholder{color:#9299b5;opacity:1}
#maSupportForm select{width:100%;font:inherit}
#maSupportForm textarea:focus,#maSupportForm select:focus{border-color:#fa2866;outline:none}
#maSupportForm textarea:focus-visible,#maSupportForm select:focus-visible{outline:2px solid #fa2866;outline-offset:2px}

/*====================
22. Mastering Legal - Layout
======================*/
.ma-legal-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:22px;margin-top:22px;align-items:start}
.ma-legal-sidebar{background:rgba(255,255,255,.025);border:1px solid #30365f;border-radius:10px;padding:20px}
.ma-legal-sidebar h2{font-size:15px;color:#fff;margin:0 0 20px}
.ma-legal-nav{display:flex;flex-direction:column;gap:5px}
.ma-legal-nav a{display:block;padding:11px 12px;color:#b8bfd9;text-decoration:none;font-size:13px;border-radius:7px;transition:background .2s,color .2s}
.ma-legal-nav a:hover,.ma-legal-nav a.is-active{background:rgba(250,40,102,.1);color:#fa2866}
.ma-legal-content{min-width:0;display:flex;flex-direction:column;gap:18px}

/*====================
23. Mastering Legal - Documents
======================*/
.ma-legal-document{padding:24px;background:rgba(255,255,255,.025);border:1px solid #30365f;border-radius:10px;scroll-margin-top:100px}
.ma-legal-document h2{font-size:21px;color:#fff;margin:12px 0}
.ma-legal-document p{font-size:14px;line-height:1.75;color:#b8bfd9}
.ma-legal-document .ma-note{font-size:12px;color:#8992b1;margin-top:16px}
@media(max-width:850px){
.ma-legal-layout{grid-template-columns:1fr}
.ma-legal-sidebar{padding:16px}
.ma-legal-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.ma-legal-document{padding:18px}
}
@media(max-width:480px){
.ma-legal-nav{grid-template-columns:1fr}
}

/*====================
24. Mastering Login / Logout Button
======================*/
.ma-top-login{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:12px 18px;
background:#fa2866;
color:#fff!important;
border:0;
border-radius:11px;
font-size:14px;
font-weight:700;
text-decoration:none;
white-space:nowrap;
transition:background .2s ease,color .2s ease;
}
.ma-top-login:hover,
.ma-top-login:focus-visible{
background:#08084b;
color:#fff!important;
text-decoration:none;
}
.ma-top-login i,
.ma-top-login svg{
color:#fff!important;
}

/*====================
25. Mastering Mobile Improvements
======================*/
@media(max-width:760px){
.ma-top nav{display:flex;flex-wrap:wrap;justify-content:center;column-gap:18px;row-gap:12px}
.ma-top nav a{font-size:12px;white-space:nowrap}
.ma-top-login{padding:10px 16px;min-height:40px}
.ma-panel-head .ma-button-inline{max-width:100%}
.ma-legal-layout,.ma-legal-content,.ma-master-grid{min-width:0}
.ma-legal-document{overflow-wrap:anywhere}
}
@media(max-width:420px){
.ma-top nav{column-gap:14px;row-gap:12px}
.ma-top nav a{font-size:11px}
.ma-tabs button{min-width:0}
.ma-track button{font-size:12px}
.ma-footer{overflow-wrap:anywhere}
}

/*====================
26. Mis Tracks - Connected Library
======================*/
.ma-track-list[aria-busy="true"]{opacity:.72}
.ma-track{position:relative}
.ma-track-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.ma-track-meta{display:flex;flex-wrap:wrap;gap:8px;color:var(--ma-muted);font-size:11px;margin-top:5px}
.ma-track-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.ma-track-actions a,.ma-track-actions button{display:inline-flex;align-items:center;justify-content:center;border:1px solid #303761;border-radius:15px;padding:8px 14px;background:#192044;color:#d0d5ef!important;cursor:pointer;font-size:12px;text-decoration:none}
.ma-track-actions a:hover,.ma-track-actions button:hover{border-color:var(--ma-pink);color:#fff!important}
.ma-track-actions [disabled]{opacity:.5;cursor:not-allowed}
.ma-track-favorite{width:34px;height:34px;padding:0!important;border-radius:50%!important;font-size:14px!important}
.ma-track-favorite.is-favorite{color:#ffd36a!important;border-color:#ffd36a}
.ma-status.ma-failed{background:#4a1b2b;color:#ff9eb8}
.ma-status.ma-cancelled{background:#30334a;color:#c2c7dc}
.ma-status.ma-waiting{background:#2a315a;color:#c6ceff}
.ma-library-empty{padding:28px 8px;text-align:center;color:var(--ma-muted);font-size:13px}
.ma-library-error{padding:16px;border:1px solid #61324a;border-radius:10px;background:#321629;color:#ffafc4;font-size:13px}
.ma-track audio{display:none}
@media(max-width:760px){
.ma-track{align-items:flex-start}
.ma-track-actions{width:100%;justify-content:flex-start;padding-left:42px}
.ma-track .ma-status{margin-left:0}
}


/*====================
27. Mis Tracks - Actions
======================*/
.ma-track-actions .ma-track-delete{border-color:#703044;background:#351827;color:#ffadc2!important}
.ma-track-actions .ma-track-delete:hover{border-color:#fa2866;background:#4a1b2b;color:#fff!important}
.ma-track-actions .ma-track-cancel{border-color:#6a5a32;background:#302b1d;color:#ffd98b!important}
.ma-track-actions .ma-track-cancel:hover{border-color:#d5a83f;background:#443a20;color:#fff!important}