.murottal-player{position:fixed;bottom:18px;left:18px;z-index:100;width:360px;max-width:calc(100vw - 32px);box-sizing:border-box;background:#142e26;color:#f4f7f3;border:1px solid #3d5b4d;border-radius:20px;padding:18px;box-shadow:0 12px 42px #0005;font:13px/1.5 Inter,Arial,sans-serif;color-scheme:dark}
.murottal-player *{box-sizing:border-box}.mp-heading{display:flex;align-items:center;gap:12px}.mp-art{width:46px;height:46px;flex-shrink:0;border-radius:12px;display:grid;place-items:center;background:#284f3c;color:#aceac2;font-size:29px}.mp-info{flex:1;min-width:0}.mp-info strong{font-size:13px;font-weight:650}.mp-info p{font-size:11px;color:#c0cfc5;margin:3px 0 0;line-height:1.5}.murottal-player button{border:0;cursor:pointer;background:none;color:inherit;display:grid;place-items:center;min-width:36px;min-height:36px;padding:0}.murottal-player button:focus-visible,.murottal-player input:focus-visible{outline:2px solid #adf2c4;outline-offset:4px}.mp-close{align-self:flex-start;font-size:24px;color:#bdcec3!important;border-radius:50%}.mp-close:hover{background:#ffffff12}.mp-controls{display:flex;justify-content:center;align-items:center;gap:26px;margin:14px 0 10px}.murottal-player .mp-play{width:50px;height:50px;border-radius:50%;background:#88e8a8;color:#10291e;box-shadow:0 3px 12px #0002}.mp-play:hover{background:#a5f2be}.mp-play svg{width:25px;height:25px;fill:currentColor}.mp-seek{position:relative;font-size:31px;width:44px;height:44px;color:#c0cfc5!important}.mp-seek small{position:absolute;font-size:9px;top:17px;left:19px}.mp-timeline{display:flex;align-items:center;gap:10px;font-size:10px;font-variant-numeric:tabular-nums;color:#bdcec3}.mp-timeline span{min-width:27px}.murottal-player input[type=range]{accent-color:#88e8a8;cursor:pointer;min-width:0;height:20px;margin:0}.mp-progress{flex:1;width:100%}.mp-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px;color:#bdcec3;font-size:10px}.mp-volume{display:flex;align-items:center;gap:5px}.mp-volume input{width:65px}.mp-volume button{font-size:20px}.murottal-player audio{display:none}
@media(max-width:520px){.murottal-player{left:12px;bottom:max(12px,env(safe-area-inset-bottom));width:calc(100vw - 24px);max-width:none;padding:14px 16px;border-radius:17px}.mp-controls{margin:10px 0 7px}.mp-info strong{font-size:12px}}
.mp-continuous{display:flex;align-items:center;gap:8px;font-size:11px;color:#c0cfc5;margin-top:8px;min-height:28px}.mp-continuous input{accent-color:#88e8a8;width:16px;height:16px}