.preset-header{gap:.75rem}.logo-section{width:32px;height:32px;flex-shrink:0;border-radius:6px;background:#f8fafc;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;transition:all .2s ease;position:relative}.logo-section:hover{border-color:#3b82f6;background:#eff6ff}.logo-section img{width:100%;height:100%;object-fit:cover;border-radius:5px}.logo-section.empty{border:1px dashed #cbd5e1;color:#94a3b8;font-size:16px;font-weight:300}.logo-section.empty:hover{border-color:#3b82f6;color:#3b82f6}.preset-card.editing .logo-section.empty{border:1px dashed #3b82f6;color:#3b82f6;background:#eff6ff}.logo-section.editable.has-logo:after{content:"×";position:absolute;top:-8px;right:-8px;width:16px;height:16px;background:#dc2626;color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:all .15s ease;z-index:20}.logo-section.editable.has-logo:hover:after{background:#b91c1c;transform:scale(1.1)}.name-section{flex:1;min-width:0}.preset-logo-section{margin:.5rem 0;padding:.5rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;font-size:.75rem}.preset-card.new-preset{border:2px dashed #3b82f6;background:linear-gradient(135deg,#eff6ff,#dbeafe)}.preset-card.editing{border-color:#3b82f6}.preset-name-input{border:none;background:transparent;font-size:1rem;font-weight:600;color:#374151;width:100%;padding:0;min-width:0}.preset-name-input::placeholder{color:#9ca3af;font-weight:400}.preset-card.editing .preset-header{display:flex!important;align-items:center!important;justify-content:flex-start!important;overflow:visible!important}.preset-card.editing .logo-section{width:32px!important;height:32px!important;flex-shrink:0!important;position:relative!important;z-index:10!important;margin-right:.5rem!important;overflow:visible!important}.preset-card.editing .name-section{flex:none!important;width:130px!important;margin-left:.25rem!important}.editing-input,.preset-card.editing .preset-name-input{width:100%!important;max-width:100%!important;border:1px solid #d1d5db!important;padding:.25rem .5rem!important;border-radius:4px!important;background:white!important;font-size:.875rem!important;box-sizing:border-box!important;position:relative!important;left:auto!important;margin:0!important}.preset-actions{gap:.75rem;margin-top:1rem}.preset-btn{padding:.75rem 1rem;border-radius:6px;font-size:.875rem;font-weight:600;transition:all .2s ease;border:1px solid;display:flex;align-items:center;justify-content:center;min-height:44px}.preset-btn:not(.primary):not(.danger){background:#f9fafb;border-color:#d1d5db;color:#374151}.preset-btn:not(.primary):not(.danger):hover{background:#f3f4f6;border-color:#9ca3af}.preset-btn.primary{background:#3b82f6;border-color:#3b82f6;color:#ffffff}.preset-btn.primary:hover{background:#2563eb;border-color:#2563eb;box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}.preset-btn.danger{background:#ef4444;border-color:#ef4444;color:#ffffff}.preset-btn.danger:hover{background:#dc2626;border-color:#dc2626;transform:translateY(-1px);box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}.preset-logo-section label{display:block;margin-bottom:.25rem;font-size:.7rem;font-weight:500;color:#475569}.preset-logo-section>div>div{border:1px dashed #cbd5e1!important;border-radius:4px!important;padding:.75rem!important;text-align:center!important;background:#f8fafc!important;min-height:60px!important}.preset-logo-section svg{width:20px!important;height:20px!important;margin:0 auto .25rem!important;color:#94a3b8!important}.preset-logo-section p{margin:.1rem 0!important;font-size:.65rem!important;line-height:1.2!important;color:#64748b!important}.preset-logo-section button{margin-top:.5rem!important;padding:.25rem .5rem!important;font-size:.7rem!important;background:#3b82f6!important;color:white!important;border:none!important;border-radius:4px!important}.preset-logo-section img{max-width:50px!important;max-height:50px!important;border-radius:4px!important;box-shadow:0 1px 3px rgba(0,0,0,.1)!important}.club-presets-container{min-height:100vh;background:var(--gray-50);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.5;color:var(--gray-900);animation:fadeIn .3s ease-out}.club-presets-container .container{max-width:1200px;margin:0 auto;padding:1.5rem 1.5rem 6rem!important}.search-bar{display:flex;align-items:center;gap:1rem}.search-input{padding:.75rem 1.5rem;border:2px solid var(--gray-300);border-radius:8px;font-size:1rem;background:var(--white);color:var(--gray-900);min-width:300px;height:3rem;box-sizing:border-box;transition:var(--transition)}.search-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,.1)}.search-input::placeholder{color:var(--gray-400)}.club-presets-container .gallery-grid{display:grid!important;grid-template-columns:repeat(auto-fit,200px)!important;gap:.75rem;padding:0;justify-content:center;max-width:1200px;margin:0 auto}.preset-card{background:var(--white);border-radius:var(--radius-lg);padding:1rem .5rem;box-shadow:var(--shadow);border:2px solid transparent;transition:var(--transition);position:relative;overflow:hidden;max-width:200px;width:100%;min-height:240px;height:auto;cursor:pointer;display:flex;flex-direction:column}.preset-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary),var(--secondary));transform:scaleX(0);transition:transform .3s ease}.preset-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);border-color:var(--primary-light)}.preset-card:hover:before{transform:scaleX(1)}.preset-card.selected{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}.preset-card.selected:before{transform:scaleX(1)}.preset-card.favorite{border-color:var(--gray-200);background:var(--white)}.preset-card.favorite:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#fbbf24,#f59e0b)}.preset-header{display:flex;justify-content:center;align-items:flex-start;margin-bottom:1rem;position:relative;height:2.6rem;min-height:2.6rem}.preset-name{font-size:.9rem;font-weight:400;color:var(--gray-900);margin:0;line-height:1.3;text-align:center;min-height:2.6rem;max-height:2.6rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;flex:1;padding:.25rem .5rem;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word}.favorite-star{font-size:1.125rem;cursor:pointer;color:var(--gray-300);transition:var(--transition);user-select:none;display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:50%;position:absolute;top:-.125rem;right:-.125rem}.favorite-star:hover{color:#fbbf24;background:rgba(251,191,36,.1)}.favorite-star.active{color:#fbbf24}.preset-colors{display:flex;gap:.75rem;margin-bottom:1rem}.preset-color-group{flex:1;display:flex;flex-direction:column;align-items:center;gap:.5rem;min-height:90px}.preset-color-label{font-size:.75rem;font-weight:600;color:var(--gray-600);text-transform:uppercase;letter-spacing:.05em}.preset-color-swatch{width:45px;height:30px;border-radius:var(--radius);border:2px solid var(--white);box-shadow:0 2px 8px rgba(0,0,0,.15);transition:var(--transition);flex-shrink:0}.preset-color-swatch:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.2)}.preset-color-hex{font-family:SF Mono,Monaco,monospace;font-size:.65rem;font-weight:600;color:var(--gray-700);background:var(--gray-100);padding:.2rem .4rem;border-radius:var(--radius);border:1px solid var(--gray-200);width:60px;text-align:center;flex-shrink:0}.preset-actions{display:flex;gap:.5rem;margin-top:auto;justify-content:center}.preset-btn{flex:1;padding:.4rem .6rem;border:none;border-radius:var(--radius);font-size:.8rem;font-weight:500;cursor:pointer;transition:var(--transition);text-align:center}.preset-btn:not(.danger):not(.primary){background:var(--gray-100);color:var(--gray-700);border:1px solid var(--gray-300)}.preset-btn:not(.danger):not(.primary):hover{background:var(--gray-200);border-color:var(--gray-400);transform:translateY(-1px)}.preset-btn.danger{background:rgba(239,68,68,.1);color:#dc2626;border:1px solid #dc2626}.preset-btn.danger:hover{background:#dc2626!important;color:#ffffff!important;border:1px solid #dc2626!important}.preset-btn.primary{background:var(--primary);color:var(--white);border:1px solid var(--primary)}.preset-btn.primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);transform:translateY(-1px)}.preset-card.editing{border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,.1)}.preset-card.new-preset{border:3px dashed var(--primary);background:rgba(59,130,246,.02)}.preset-name-input{width:calc(100% - 1rem);height:2rem;padding:.3rem .5rem;border:2px solid var(--primary);border-radius:var(--radius);font-size:.9rem;font-weight:400;color:var(--gray-900);text-align:center;background:var(--white);transition:var(--transition);position:absolute;top:.3rem;left:.5rem;right:.5rem}.preset-name-input:focus{outline:none;border-color:var(--primary-dark);box-shadow:0 0 0 3px rgba(59,130,246,.1)}.preset-color-picker{width:45px;height:30px;border:3px solid var(--white);border-radius:var(--radius);cursor:pointer;padding:0;background:none;transition:var(--transition);flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.15),0 0 0 2px var(--primary);-webkit-appearance:none;-moz-appearance:none;appearance:none}.preset-color-picker:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.2),0 0 0 2px var(--primary-dark)}.preset-color-picker::-webkit-color-swatch-wrapper{padding:0}.preset-color-picker::-webkit-color-swatch{border:none;border-radius:calc(var(--radius) - 2px)}.preset-color-picker::-moz-color-swatch{border:none;border-radius:calc(var(--radius) - 2px)}.preset-color-hex-input{font-family:SF Mono,Monaco,monospace;font-size:.65rem;font-weight:600;color:var(--gray-700);background:var(--white);padding:.2rem .4rem;border-radius:var(--radius);border:2px solid var(--primary);width:60px;text-align:center;transition:var(--transition);flex-shrink:0}.preset-color-hex-input:focus{outline:none;border-color:var(--primary);background:var(--white);box-shadow:0 0 0 2px rgba(59,130,246,.1)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:var(--white);border-radius:var(--radius-lg);padding:0;max-width:500px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;border-bottom:1px solid var(--gray-200)}.modal-title{font-size:1.25rem;font-weight:600;color:var(--gray-900);margin:0}.modal-close{background:none;border:none;font-size:1.5rem;color:var(--gray-400);cursor:pointer;padding:.25rem;transition:var(--transition)}.modal-close:hover{color:var(--gray-600)}.modal-content{background:var(--white);border-radius:var(--radius-lg);max-width:400px;width:90%;box-shadow:var(--shadow-lg)}.modal-content h3{margin-top:0;margin-bottom:1rem;color:var(--gray-900);font-size:1.25rem;font-weight:600}.modal-content p{color:var(--gray-700);margin-bottom:2rem;line-height:1.5}.modal-actions{display:flex;gap:1rem;justify-content:flex-end}@media (max-width:768px){.club-presets-container .container{padding:2rem 1rem 6rem!important}.search-bar{flex-direction:column;align-items:stretch;gap:1rem}.search-input{min-width:auto;width:100%}.gallery-grid{grid-template-columns:1fr!important;padding:0 .5rem}.preset-colors{flex-direction:column;gap:1rem}.preset-color-group{flex-direction:row;align-items:center;gap:1rem}.preset-color-swatch{width:40px;height:30px}.preset-actions{flex-direction:column}.modal{width:95%;margin:1rem}.modal-actions{flex-direction:column}}.club-form{padding:1.5rem 2rem 2rem}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:600;color:var(--gray-700);font-size:.875rem}.form-input{width:100%;padding:.75rem 1rem;border:2px solid var(--gray-300);border-radius:var(--radius);font-size:1rem;transition:var(--transition);background:var(--white)}.form-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,.1)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.color-input-group{display:flex;gap:.5rem;align-items:center}.color-input{width:60px;height:40px;border:2px solid var(--gray-300);border-radius:var(--radius);cursor:pointer;transition:var(--transition);-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0}.color-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,.1)}.color-input::-webkit-color-swatch-wrapper{padding:2px}.color-input::-webkit-color-swatch{border:none;border-radius:calc(var(--radius) - 2px)}.color-input::-moz-color-swatch{border:none;border-radius:calc(var(--radius) - 2px)}.color-text-input{flex:1;padding:.5rem .75rem;border:2px solid var(--gray-300);border-radius:var(--radius);font-family:SF Mono,Monaco,monospace;font-size:.875rem;font-weight:500;text-transform:uppercase;transition:var(--transition)}.color-text-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,.1)}.logo-upload-area{border:2px dashed var(--gray-300);border-radius:var(--radius);padding:2rem;text-align:center;cursor:pointer;transition:var(--transition);background:var(--gray-50)}.logo-upload-area:hover{border-color:var(--primary);background:rgba(59,130,246,.02)}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--gray-500)}.logo-upload-placeholder svg{color:var(--gray-400)}.logo-upload-placeholder p{font-weight:500;margin:0}.logo-upload-placeholder span{font-size:.75rem;color:var(--gray-400)}.logo-preview{position:relative;display:inline-block}.logo-preview img{max-width:120px;max-height:120px;border-radius:var(--radius);box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}.logo-remove-btn{position:absolute;top:-8px;right:-8px;width:24px;height:24px;background:#dc2626;color:white;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);box-shadow:0 2px 4px rgba(0,0,0,.2)}.logo-remove-btn:hover{background:#b91c1c;transform:scale(1.1)}.form-actions{display:flex;gap:1rem;justify-content:flex-end;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--gray-200)}@media (max-width:640px){.form-row{grid-template-columns:1fr}.form-actions{flex-direction:column}.club-form{padding:1rem 1.5rem 1.5rem}.modal-content{margin:1rem;width:calc(100% - 2rem)}}