@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.tf-setting-color-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;pointer-events:none}.btn-setting-color{position:fixed;left:0;top:50px;width:40px;height:40px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(10px);transition:all .3s ease;pointer-events:auto;z-index:102;animation:spin 5s infinite linear}.btn-setting-color:hover{background:rgba(255,255,255,.15)}.btn-setting-color:hover i{color:var(--primary)}.btn-setting-color i{color:#fff;font-size:20px;transition:all .3s ease}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .4s ease;pointer-events:none}.tf-setting-color-modal.active .modal-overlay{opacity:1;visibility:visible;pointer-events:auto}.modal-content{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:30px;max-width:400px;width:90%;backdrop-filter:blur(20px);transform:scale(.8) translateY(20px);transition:all .4s ease;box-shadow:0 20px 40px rgba(0,0,0,.3)}.tf-setting-color-modal.active .modal-content{transform:scale(1) translateY(0)}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px;padding-bottom:15px;border-bottom:1px solid rgba(255,255,255,.1)}.modal-title{color:#fff;font-size:22px;font-weight:600;margin:0}.close-modal{width:35px;height:35px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease}.close-modal:hover{background:rgba(255,255,255,.2);transform:rotate(90deg)}.close-modal i{color:#fff;font-size:16px}.modal-body{text-align:center}.color-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:0;margin:0}.color-option{width:45px;height:45px;border-radius:12px;cursor:pointer;transition:all .3s ease;position:relative;border:2px solid transparent;backdrop-filter:blur(10px)}.color-option:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.3)}.color-option.active{border-color:#fff;box-shadow:0 0 20px rgba(255,255,255,.3)}.color-option.active::after{content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:16px;font-weight:700;text-shadow:0 0 10px rgba(0,0,0,.5)}.color-option:first-child{background:#f3500f}.color-option:nth-child(2){background:#0c652e}.color-option:nth-child(3){background:#5704d3}.color-option:nth-child(4){background:#c854d5}.color-option:nth-child(5){background:#ffc744}.color-option:nth-child(6){background:#ececec;border:1px solid rgba(0,0,0,.2)}.color-option:nth-child(7){background:#000}.color-option:nth-child(8){background:#05062f}.color-option:nth-child(9){background:#052c2f}.color-option:nth-child(10){background:#3d3d3d}@media (max-width:768px){.btn-setting-color{left:0;top:50px;width:40px;height:40px}.modal-content{padding:25px;margin:20px}.color-grid{grid-template-columns:repeat(5,1fr);gap:10px}.color-option{width:40px;height:40px}.modal-title{font-size:20px}}@media (max-width:480px){.modal-content{padding:20px}.color-grid{gap:8px}.color-option{width:35px;height:35px}}