.fade{opacity:0;transition:all 0.5s;}.color-input{text-align:center;position:relative;z-index:10;}.color-input form{max-width:300px;margin:0 auto;display:flex;flex-direction:column;align-items:center;}.color-input .custom-input{border:none;height:50px;border-radius:50px;box-shadow:10px 10px 14px 1px rgba(0, 0, 0, 0.2);letter-spacing:0.094em;text-align:center;font-size:1rem;font-weight:bold;color:#333;background-color:#fff;transition:border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;width:100%;margin-bottom:15px;text-transform:uppercase;}.color-input .custom-input:focus{border-color:#62B170;box-shadow:0 0 0 3px #62b1701a;outline:none;}.color-input button{border-radius:50px;height:50px;min-width:120px;padding:0 15px;box-shadow:10px 10px 14px 1px rgba(0, 0, 0, 0.2);letter-spacing:0.094em;transition:all 0.5s;text-transform:uppercase;display:flex;align-items:center;justify-content:center;background-color:#00a1ba;color:#fff;width:auto;border:none;}.color-input button svg{margin-right:8px;width:20px;height:20px;}.color-input button:hover{box-shadow:none;background-color:#007a8c;}.toggle-box-right{display:none;position:fixed;right:25px;top:100px;z-index:10000;transition:top 0.7s ease-out;background:#fff;padding:20px;border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,0.2);width:280px;}.close-box{background-color:#00a1ba;width:40px;height:40px;border-radius:50%;color:#fff;text-align:center;line-height:40px;position:absolute;top:-15px;right:-15px;box-shadow:3px 3px 5px 0px rgba(0, 0, 0, 0.2);cursor:pointer;transition:all 0.3s;display:flex;align-items:center;justify-content:center;}.close-box svg{width:20px;height:20px;}.close-box:hover{box-shadow:none;transform:scale(1.1) rotate(90deg);background-color:#e74c3c;}.close-box.is-closed:hover{background-color:#28a745;transform:scale(1.1);box-shadow:none;color:#fff;}.close-box.is-closed:hover svg{transform:none;}.color-input-right{color:#1e1e1e;text-align:center;}.color-input-right p{font-size:1.2em;margin-bottom:15px;font-weight:600;color:#333;display:block;}.color-input-right form{max-width:100%;align-items:center;}.color-palette{display:flex;flex-wrap:wrap;justify-content:center;margin-top:20px;margin-bottom:40px;}.color-item{display:flex;flex-direction:column;align-items:center;margin:10px;}.color-box{width:180px;height:115px;border-radius:5px;cursor:default;box-shadow:inset 0 0 5px rgba(0,0,0,0.1);}.color-item .name{font-size:0.9em;font-weight:bold;margin-top:8px;color:#333;background:none;cursor:pointer;transition:background-color 0.3s, color 0.3s;padding:4px 8px;border-radius:4px;font-family:monospace;}.color-item .name:hover, .color-item .name:active{background-color:#e0e0e0;color:#000;}.color-item .name.copied{background-color:#F5D76E;color:#000;}#return h3{font-size:1.5em;font-weight:900;color:#333;margin:30px 0 15px;width:100%;text-align:center;}.loading, .error{color:#333;font-size:1.2em;margin-top:20px;text-align:center;width:100%;}.error{color:#ff5555;}.cp-close-palette{border-radius:10px;height:40px;min-width:120px;padding:0 15px;box-shadow:10px 10px 14px 1px rgba(0,0,0,0.2);letter-spacing:0.094em;transition:all 0.3s;text-transform:uppercase;display:flex;align-items:center;justify-content:center;width:100%;max-width:250px;margin:10px 0 5px 18px;background-color:#dc3545;color:white;border:none;cursor:pointer;font-size:14px;box-sizing:border-box;}.cp-close-palette:hover{background-color:#c82333;}.cp-color-picker{display:flex;flex-wrap:wrap;gap:10px;background:#fff;border-radius:10px;box-shadow:0 8px 25px rgba(0,0,0,0.15);padding:10px;z-index:10002!important;position:fixed;left:50%!important;transform:translate(-50%)!important;width:370px;box-sizing:border-box;position:fixed;overflow:hidden;}@media (max-width:600px){.color-box{width:200px;}.color-item .name{font-size:0.8em;}#return h3{font-size:1.3em;}}@media (max-width:490px){.color-box{width:125px;}}@media (max-width:400px){.cp-color-picker{width:95%;}.cp-panel{display:none!important;}}@media (max-width:321px){.color-box{width:100%;}}