.colors-content-area{display:flex;width:100%;height:100%;overflow:hidden}.template-schemes-column{width:200px;border-right:1px solid #e0e0e0;background-color:#f9f9fa;height:100%;display:flex;flex-direction:column}.schemes-header{padding:15px;border-bottom:1px solid #e0e0e0}.schemes-header h2{margin:0;font-size:16px;font-weight:600;color:#333}.schemes-content{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column}.scheme-item{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;margin-bottom:5px;background-color:#f5f5f5;border-radius:4px;cursor:pointer;transition:all .2s ease}.scheme-item:hover{background-color:#eaeaea}.scheme-item.active{background-color:#3498db;color:#fff}.scheme-item.active .scheme-actions button{color:#fff}.scheme-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.scheme-actions{display:flex;gap:8px;opacity:.6;transition:opacity .2s ease}.scheme-item:hover .scheme-actions{opacity:1}.scheme-delete-btn,.scheme-edit-btn{background:0 0;border:none;padding:3px;cursor:pointer;border-radius:3px;display:flex;align-items:center;justify-content:center;color:#555;transition:all .2s ease}.scheme-edit-btn:hover{background-color:rgba(52,152,219,.2);color:#3498db}.scheme-delete-btn:hover{background-color:rgba(231,76,60,.2);color:#e74c3c}.add-scheme-container{margin-top:20px;padding:10px}.add-scheme-btn{width:100%;padding:10px;background-color:#f5f5f7;border:1px solid #d2d2d7;border-radius:8px;font-size:14px;color:#06c;cursor:pointer;transition:all .2s ease}.add-scheme-btn:hover{background-color:#e8e8e8;color:#0071e3}.schemes-actions-container{padding:10px;margin-top:10px;display:flex;flex-direction:column;gap:10px}.scheme-action-btn{padding:10px;border-radius:8px;font-size:13px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:500;border:none}.scheme-action-btn svg{flex-shrink:0}.scheme-action-btn.upload-btn{background-color:#3498db;color:#fff}.scheme-action-btn.upload-btn:hover{background-color:#2980b9}.scheme-action-btn.download-btn{background-color:#2ecc71;color:#fff}.scheme-action-btn.download-btn:hover{background-color:#27ae60}.settings-column{width:500px;border-right:1px solid #e0e0e0;height:100%;overflow-y:auto;background-color:#fff;display:flex;flex-direction:column}.settings-header{padding:15px;border-bottom:1px solid #e0e0e0;background-color:#f9f9fa}.settings-header h2{margin:0;font-size:16px;font-weight:600;color:#333}.settings-content{padding:15px;overflow-y:auto}.main-content-area{flex:1;height:100%;overflow-y:auto;background-color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}.colors-placeholder{padding:20px;text-align:center;color:#888;font-style:italic}.scheme-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;z-index:1000;opacity:0;visibility:hidden;transition:all .3s ease}.scheme-modal-overlay.active{opacity:1;visibility:visible}.scheme-modal{background-color:#fff;border-radius:12px;padding:20px;min-width:350px;box-shadow:0 4px 20px rgba(0,0,0,.15);transform:translateY(-20px);transition:all .3s ease}.scheme-modal-overlay.active .scheme-modal{transform:translateY(0)}.scheme-modal-header{margin-bottom:20px}.scheme-modal-header h3{font-size:18px;margin:0;color:#1d1d1f}.scheme-modal-body{margin-bottom:20px}.scheme-modal-body input{width:100%;padding:10px;border:1px solid #d2d2d7;border-radius:8px;font-size:14px}.scheme-modal-footer{display:flex;justify-content:flex-end;gap:10px}.scheme-modal-button{padding:8px 16px;border-radius:8px;font-size:14px;cursor:pointer;transition:all .2s ease}.scheme-modal-button.cancel{background-color:#f5f5f7;border:1px solid #d2d2d7;color:#1d1d1f}.scheme-modal-button.confirm{background-color:#06c;border:1px solid #06c;color:#fff}.scheme-modal-button:hover{transform:translateY(-1px)}.scheme-modal-button.cancel:hover{background-color:#e5e5ea}.scheme-modal-button.confirm:hover{background-color:#0071e3}.visibility-buttons{display:flex;gap:5px;margin-top:5px}.visibility-btn{padding:8px 16px;background-color:#f5f5f7;border:1px solid #d2d2d7;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:60px;text-align:center}.visibility-btn:hover{background-color:#e5e5ea;transform:translateY(-1px)}.visibility-btn.active{background-color:#0071e3;color:#fff;border-color:#0071e3;box-shadow:0 2px 5px rgba(0,113,227,.3)}#colors-hide-btn.active{background-color:#e74c3c;color:#fff;border-color:#e74c3c;box-shadow:0 2px 5px rgba(231,76,60,.3)}.play-button{padding:4px 8px;background-color:#f5f5f7;border:1px solid #d2d2d7;border-radius:4px;cursor:pointer;transition:all .2s ease}.play-button:hover{background-color:#e5e5ea}.play-button.playing{background-color:#0071e3;color:#fff}.color-preset-options{display:flex;gap:4px;margin-top:5px;margin-right:4px}.color-preset{width:18px;height:18px;border-radius:50%;cursor:pointer;border:1px solid rgba(0,0,0,.1)}.color-preset:hover{transform:scale(1.1)}.color-preset.red{background-color:red}.color-preset.green{background-color:#2ecc71}.color-preset.blue{background-color:#3498db}.color-preset.yellow{background-color:#ff0}.color-preset.orange{background-color:#e67e22}.color-preset.dark{background-color:#34495e}.color-preset.grey{background-color:#95a5a6}.color-preset.white{background-color:#fff}.color-preset.black{background-color:#000}.color-preset.pink{background-color:#ff69b4}.color-preset.white2{background-color:#fff}.setting-content{transition:opacity .3s ease}[id$="-font-size-value"],[id$="-opacity-value"]{display:inline-block;min-width:40px;text-align:right}.scheme-modal-button.delete{background-color:#e74c3c}.scheme-modal-button.delete:hover{background-color:#c0392b}.import-success-message{position:fixed;bottom:30px;left:50%;transform:translate(-50%,100px);background-color:#4caf50;color:#fff;padding:12px 20px;border-radius:8px;box-shadow:0 3px 10px rgba(0,0,0,.2);z-index:1100;font-size:14px;opacity:0;transition:all .3s ease}.import-success-message.show{transform:translate(-50%,0);opacity:1}