.court-designer{max-width:1200px;margin:0 auto;padding:20px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}.court-designer-container{display:flex;gap:30px;margin-bottom:20px}.court-designer-preview{flex:1;min-width:300px}.court-designer-preview svg{width:100%;height:auto;border:2px solid #ddd;border-radius:8px;background:#f5f5f5;box-shadow:0 2px 4px rgba(0,0,0,.1)}.court-designer-controls{flex:0 0 350px}.court-designer-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid #e0e0e0}.court-designer-title{font-size:24px;font-weight:600;color:#333;margin:0}.court-type-selector{display:flex;gap:10px}.court-type-selector select{padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px;background:#fff;cursor:pointer}.court-type-selector select optgroup{font-weight:700;font-style:normal;background:#f5f5f5}.court-type-selector select option{font-weight:400;padding:4px 8px}.court-designer .area-selector{margin-bottom:20px}.court-designer .area-selector-title{font-size:16px;font-weight:500;margin-bottom:10px;color:#555}.court-designer .area-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:15px}.court-designer .area-tab{padding:8px 16px;border:2px solid #ddd;border-radius:4px;background:#fff;color:#333;cursor:pointer;font-size:14px;transition:all 0.2s;display:flex;align-items:center;gap:8px}.court-designer .area-tab:hover{background:#f0f0f0;color:#333}.court-designer .area-tab.active{background:#06C;color:#fff;border-color:#06C}.court-designer .area-color-indicator{display:inline-block;width:20px;height:20px;border-radius:3px;border:2px solid rgba(0,0,0,.2);background-color:#ddd}.court-designer .area-tab.active .area-color-indicator{border-color:rgba(255,255,255,.5)}.court-designer .color-palette{margin-bottom:20px}.court-designer .color-palette-title{font-size:16px;font-weight:500;margin-bottom:10px;color:#555}.current-color-name{font-size:14px;font-weight:400;color:#666;margin-left:10px}.current-color-name:not(:empty)::before{content:"Currently Selected: "}.color-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:10px}.color-swatch{position:relative;width:100%;padding-bottom:100%;border:3px solid transparent;border-radius:8px;cursor:pointer;transition:all 0.2s;overflow:hidden}.color-swatch-inner{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;border-radius:5px}.color-swatch[data-color="#ffffff"] .color-swatch-inner,.color-swatch[data-color="#FFFFFF"] .color-swatch-inner{border:1px solid #ccc}.color-swatch:hover{transform:scale(1.1);box-shadow:0 2px 8px rgba(0,0,0,.2)}.color-swatch.active{border-color:#333;box-shadow:0 0 0 2px #fff,0 0 0 4px #333}.color-name-tooltip{position:absolute;bottom:-25px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 0.2s;z-index:1000}.color-swatch:hover .color-name-tooltip{opacity:1}.court-designer .action-buttons{display:flex;gap:10px;margin-top:20px}.court-designer .btn{padding:10px 20px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all 0.2s}.court-designer .btn-primary{background:#06C;color:#fff}.court-designer .btn-primary:hover{background:#0052A3;color:#fff}.court-designer .btn-secondary{background:#6c757d;color:#fff}.court-designer .btn-secondary:hover{background:#5a6268;color:#fff}.court-designer .btn-success{background:#28a745;color:#fff}.court-designer .btn-success:hover{background:#218838;color:#fff}.color-note{margin-top:15px;padding:10px;background:#fff3cd;border:1px solid #ffc107;border-radius:4px;font-size:13px;color:#856404}.logo-upload-section{margin-top:25px;padding-top:20px;border-top:1px solid #e0e0e0}.logo-section-title{font-size:16px;font-weight:500;margin-bottom:10px;color:#555}.logo-controls{display:flex;gap:10px;margin-bottom:10px}.btn-upload{position:relative;cursor:pointer}.btn-upload input[type="file"]{position:absolute;left:-9999px}.logo-note{font-size:12px;color:#666;margin:5px 0}@media (max-width:768px){.court-designer-container{flex-direction:column}.court-designer-controls{flex:1;max-width:100%}.court-designer-header{flex-direction:column;align-items:flex-start;gap:10px}.color-swatches{grid-template-columns:repeat(auto-fill,minmax(50px,1fr))}.action-buttons{flex-direction:column}.btn{width:100%}}