.team-planner-page{max-width:1400px;margin:0 auto;padding:2rem}.page-description{color:#e5e5e5;font-size:1.1rem;line-height:1.6;max-width:800px;margin:0 auto}.team-planner-container{width:100%;max-width:100%;margin:0 auto}.form-section{margin-bottom:2rem}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2rem}.form-field{display:flex;flex-direction:column}.section-label{display:block;margin-bottom:1rem;color:#fff;font-weight:600;font-size:1rem}.form-section label,.form-field label{display:block;margin-bottom:.5rem;color:#fff;font-weight:600}.form-section input[type=text],.form-section input[type=email],.form-section textarea,.form-field input[type=text],.form-field input[type=email],.form-field textarea{width:100%;padding:.75rem;background:#0d1116;border:2px solid #2b323b;color:#fff;font-size:1rem;transition:border-color .2s;font-family:inherit}.form-section input:focus,.form-section textarea:focus,.form-field input:focus,.form-field textarea:focus{outline:none;border-color:#ebed63}.composition-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.75rem;max-width:100%;margin:0 auto}.position-slot{display:flex;flex-direction:column;gap:.5rem}.character-slot{background:#2b323b4d;border:2px solid #2b323b;aspect-ratio:.7;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}.card-slot,.pet-slot{background:#2b323b4d;border:2px solid #2b323b;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}.character-slot:hover,.card-slot:hover,.pet-slot:hover{border-color:#ebed63;background:#ebed631a}.character-slot.filled,.card-slot.filled,.pet-slot.filled{background:#60a5fa1a}.slot-label{color:#999;font-size:.8rem;margin-bottom:.5rem}.add-button{font-size:2rem;color:#2b323b;font-weight:700}.character-slot:hover .add-button,.card-slot:hover .add-button,.pet-slot:hover .add-button{color:#ebed63}.slot-image{width:100%;height:100%;object-fit:cover}.slot-name{position:absolute;bottom:0;left:0;right:0;background:#000000e6;color:#fff;font-size:.7rem;text-align:center;padding:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gear-slots-mini{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:4px}.gear-slot-mini{background:#2b323b4d;border:2px solid #2b323b;aspect-ratio:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;overflow:hidden}.gear-slot-mini:hover{border-color:#ebed63;background:#ebed631a}.gear-slot-mini.filled{background:#60a5fa1a}.add-button-mini{font-size:1.2rem;color:#2b323b;font-weight:700}.gear-slot-mini:hover .add-button-mini{color:#ebed63}.slot-image-mini{width:100%;height:100%;object-fit:cover}.team-name-title{font-size:2.5rem;font-weight:700;color:#fff;margin-bottom:2rem;text-align:center;outline:none;transition:all .2s;cursor:text;padding:.5rem;margin-top:0}.team-name-title:hover{background:#ebed630d}.team-name-title:focus{background:#ebed631a;box-shadow:0 0 0 2px #ebed634d}.team-name-title:empty:before{content:attr(data-placeholder);color:#666;font-weight:400}.pets-formation-section{display:grid;grid-template-columns:auto 1fr;gap:2rem;margin-top:2rem;align-items:start}.pets-column,.formation-column{display:flex;flex-direction:column}.formation-grid{display:flex;flex-direction:column;gap:4px}.formation-header-row,.formation-body-row{display:grid;grid-template-columns:48px repeat(3,1fr);gap:4px}.formation-header-cell{display:flex;align-items:center;justify-content:center;padding:4px 0}.formation-row-icon{width:48px;height:auto}.formation-slot-label{display:flex;align-items:center;justify-content:center;color:#999;font-size:.7rem;font-weight:600;text-transform:uppercase}.formation-cell{background:#2b323b4d;border:2px solid #2b323b;min-height:50px;overflow:hidden;transition:border-color .2s}.formation-cell.occupied{background:#60a5fa14;border-color:#2b323b}.formation-empty{width:100%;height:100%;min-height:50px;display:flex;align-items:center;justify-content:center;color:#2b323b;font-size:1rem}.formation-unit{display:flex;align-items:center;gap:6px;padding:5px 6px;min-height:50px;width:100%;box-sizing:border-box;cursor:grab;user-select:none}.formation-unit:active{cursor:grabbing}.formation-unit.dragging{opacity:.35}.formation-unit-img{width:34px;height:34px;object-fit:cover;object-position:top center;flex-shrink:0;pointer-events:none}.formation-unit-name{flex:1;color:#fff;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}.formation-cell.drag-over{border-color:#ebed63;background:#ebed6314}.formation-move-btn:hover{border-color:#ebed63;color:#ebed63}.notes-section{display:flex;flex-direction:column;margin-top:2rem}.notes-textarea{width:100%;padding:.75rem;background:#0d1116;border:2px solid #2b323b;color:#fff;font-size:1rem;transition:border-color .2s;font-family:inherit;resize:vertical;flex:1}.notes-textarea:focus{outline:none;border-color:#ebed63}.pets-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;max-width:450px}.pet-column-wrapper{display:flex;flex-direction:column;gap:.5rem}.line-indicator{display:flex;justify-content:center;align-items:center}.line-icon{width:48px;height:auto}.pet-slot{min-width:134px;max-width:140px;margin:0 auto;width:100%}.pet-slot[data-line="0"]{border-left:4px solid #3b82f6}.pet-slot[data-line="1"]{border-left:4px solid #eab308}.pet-slot[data-line="2"]{border-left:4px solid #ef4444}.entity-popup{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000c;z-index:1000;align-items:center;justify-content:center;padding:2rem}.popup-content{background:#14181d;width:100%;max-width:1000px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column}.popup-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;background:#0d1116}.popup-header h2{margin:0;color:#fff}.close-btn{background:none;border:none;font-size:2rem;cursor:pointer;color:#fff;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s}.close-btn:hover{background-color:#ffffff1a}.popup-search{background-color:transparent;border:2px solid #272a2f;margin:2rem;margin-bottom:0;margin-right:2.8rem;padding:.5rem 1rem;font-size:1.2rem;color:#fff;transition:.15s linear}.popup-search:focus{outline:none;background-color:#272a2f}.entities-grid{padding:2rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;overflow-y:auto;max-height:70vh;align-content:start}.entity-option{border:2px solid #0D1116;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:1rem;background:#14181d;overflow:hidden;padding:0;min-height:104px;position:relative}.entity-option:hover{border-color:#ebed63;transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.entity-img-wrapper{overflow:hidden;width:100px;height:100%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background-color:#0003}.entity-option-image{width:auto;height:auto;max-height:80px;max-width:90%;object-fit:contain}.entity-option-info{flex:1;padding:.5rem}.entity-option-name{font-weight:600;color:#fff;margin-bottom:.5rem;line-height:1.3}.form-actions{margin-top:2rem;text-align:center;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.action-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-weight:600;font-size:1rem;cursor:pointer;transition:all .2s ease;border:2px solid}.action-btn i{font-size:1.2rem}.primary-btn{background:#ebed63;border-color:#ebed63;color:#000}.primary-btn:hover{background:#d4d558;border-color:#d4d558;transform:translateY(-2px);box-shadow:0 4px 12px #ebed634d}.primary-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.secondary-btn{background:transparent;border-color:#2b323b;color:#fff}.secondary-btn:hover{background:#2b323b;border-color:#ebed63;color:#ebed63}.secondary-btn.copied{background:#22c55e;border-color:#22c55e;color:#fff}.danger-btn{background:transparent;border-color:#dc2626;color:#dc2626}.danger-btn:hover{background:#dc2626;color:#fff}@media (max-width: 1400px){.composition-grid{grid-template-columns:repeat(5,1fr);gap:.6rem}}@media (max-width: 1024px){.composition-grid{grid-template-columns:repeat(3,1fr);gap:.75rem}}@media (max-width: 768px){.team-planner-page{padding:1rem}.page-description{font-size:1rem}.team-name-title{font-size:1.8rem;margin-bottom:1.5rem}.form-row{grid-template-columns:1fr;gap:1rem}.composition-grid{display:flex;flex-direction:row;gap:.75rem;width:max-content;padding-bottom:.5rem;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#ebed63 #2b323b;cursor:grab;user-select:none}.composition-grid.dragging{cursor:grabbing}.composition-grid::-webkit-scrollbar{height:8px}.composition-grid::-webkit-scrollbar-track{background:#2b323b;border-radius:4px}.composition-grid::-webkit-scrollbar-thumb{background:#ebed63;border-radius:4px}.position-slot{min-width:140px;max-width:140px;flex-shrink:0}.pets-formation-section{grid-template-columns:1fr;gap:1.5rem}.pets-grid{grid-template-columns:repeat(3,1fr);gap:.5rem;max-width:100%}.pet-slot{min-width:0;max-width:none;width:100%}.line-indicators{gap:4px}.line-icon{width:32px}.notes-textarea{max-width:100%;box-sizing:border-box}.entities-grid{grid-template-columns:1fr;padding:1rem}.entity-popup{padding:1rem}.slot-name{font-size:.6rem}.add-button{font-size:1.5rem}.position-slot{gap:.4rem}.action-btn{width:100%;justify-content:center}}@media (max-width: 480px){.composition-grid{grid-template-columns:1fr}.entity-popup{padding:.5rem}.popup-content{max-height:95vh}.popup-search{margin:1rem 1rem 0}.entities-grid{padding:.5rem;gap:.5rem}.entity-option{min-height:80px}.entity-img-wrapper{width:80px}.entity-option-image{max-height:60px}}.pet-slot .slot-name{display:none}.pet-gem-slots{position:absolute;bottom:5px;left:0;right:0;display:flex;justify-content:center;gap:2px;padding:0 2px;pointer-events:none}.pet-gem-slot{width:32px;height:32px;background:#1e242c;border-radius:0;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;flex-shrink:0;pointer-events:all;transition:border-color .15s}.pet-gem-slot:hover{border-color:#ebed63}.pet-gem-slot.gem-filled{background:#1a2e47;border-color:#2b4a6b}.pet-gem-slot.gem-filled:hover{border-color:#ebed63}.gem-slot-image{width:100%;height:100%;object-fit:contain;transform:scale(1.2)}.gem-add-btn{color:#ffffff59;font-size:.8rem;line-height:1;user-select:none}.pet-gem-slot:hover .gem-add-btn{color:#ebed63}