/* Functional controls use larger type while the FUT art retains its own proportions. */
main:has(.squad-page) { width: min(100% - 40px, 1480px); }
.squad-workspace { grid-template-columns: minmax(720px, 1fr) 350px; }
.pitch-and-bench { min-width: 0; display: grid; gap: 14px; }
.builder-commandbar, .database-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 16px; background: #130d1b; border: 1px solid #34253e; border-radius: 12px; }
.builder-instruction { color: #bdb0ca; font-size: 14px; line-height: 1.6; margin: 12px 4px 18px; }
.mode-switch { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 9px; background: #09070e; }
.builder-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.builder-actions button, .mode-switch button, .tool-button, .import-button { min-height: 38px; padding: 8px 12px; border: 1px solid #4b365e; border-radius: 7px; background: #20142e; color: #f5ecff; font: 600 14px/1.3 inherit; cursor: pointer; transition: background .15s, border-color .15s; }
.builder-actions button, .mode-switch button, .tool-button, .import-button { font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.3; }
.builder-actions button:hover, .tool-button:hover, .import-button:hover { background: #352146; border-color: #bc79f3; }
.builder-actions button.primary { background: #9145dc; border-color: #b172ed; color: white; }
.builder-actions button.danger { color: #ffa9b6; }
.builder-actions button:disabled { opacity: .38; cursor: default; }
.mode-switch button { background: transparent; border-color: transparent; color: #c0accd; }
.mode-switch button[aria-pressed="true"] { background: #7739b0; color: #fff; border-color: #a762da; }
.squad-page :is(button, input, select, summary):focus-visible, .players-database :is(button, input, select):focus-visible, .detail-builder-actions :is(button, select):focus-visible { outline: 2px solid #d09eff; outline-offset: 3px; }
.squad-pitch { min-height: 900px; }
.squad-slot { width: 148px; }
.squad-card-name { font-size: 9.6cqw; }
.squad-card-stats { font-size: 7.3cqw; column-gap: 1.2cqw; row-gap: .5cqw; left: 19%; right: 18%; }
.squad-card-stats span:nth-child(n+4) { padding-left: 1.2cqw; }
.squad-card-stats b { min-width: 1.15em; }
.squad-player-card { width: 140px; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.squad-player-card img { pointer-events: none; }
.squad-player-card:active { cursor: grabbing; }
.arrange-mode .squad-player-card { cursor: move; }
.builder-slot-label { font-size: 11px; line-height: 1.2; margin-top: -4px; background: rgba(4,17,11,.92); color: #fff; border: 1px solid #416b54; padding: 3px 7px; border-radius: 5px; white-space: nowrap; }
.builder-slot-label b { color: #74eb99; font-size: inherit; margin-left: 4px; }
.builder-slot-label.position-mismatch { border-color: #ffb84b; color: #ffd390; }
.squad-slot.is-selected .squad-player-card, .bench-slot.is-selected .squad-player-card { filter: drop-shadow(0 0 7px #d896ff) drop-shadow(0 10px 12px #0009); }
.swap-source .squad-player-card { filter: drop-shadow(0 0 8px #65f8cc); }
.drag-source { opacity: .35; }
.drop-target::after { content: ''; position: absolute; inset: -8px; border: 2px solid #d2a3ff; background: #bc77ef20; border-radius: 14px; pointer-events: none; }
.drag-ghost { position: fixed; z-index: 10000; pointer-events: none; opacity: .94; transform: rotate(-4deg); cursor: grabbing; }
.squad-dragging { cursor: grabbing; user-select: none; }
.chem-links[hidden] { display: none; }
.pitch-toolbar { min-height: 65px; }
.pitch-toolbar b { font-size: 16px; }
.pitch-toolbar small { color: #a594b3; font-size: 13px; }
.chem-toggle, .checkbox-label { display: flex; align-items: center; gap: 7px; color: #d9cbe7; font-size: 14px; }
.chem-toggle input, .checkbox-label input { accent-color: #a75ef0; width: 17px; height: 17px; }
.bench-panel { background: #100c14; border: 1px solid #34253e; border-radius: 12px; overflow: hidden; }
.bench-heading { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; padding: 15px 16px; border-bottom: 1px solid #34253e; }
.bench-heading b { font-size: 16px; }
.bench-heading small { font-size: 13px; color: #a594b3; }
.bench-row { display: flex; align-items: center; justify-content: space-around; gap: 10px; padding: 16px 12px 20px; overflow-x: auto; background: linear-gradient(180deg, #23163155, transparent); }
.bench-slot { position: relative; flex: 0 0 102px; display: grid; justify-items: center; }
.bench-slot .squad-player-card { width: 98px; }
.bench-slot .empty-slot { width: 80px; height: 111px; }
.bench-slot .builder-slot-label { margin-top: 4px; font-size: 12px; }
.chem-legend { display: flex; flex-wrap: wrap; gap: 14px; color: #b7a7c7; font-size: 13px; padding: 0 5px; }
.chem-legend span { display: flex; gap: 6px; align-items: center; }
.chem-legend i { height: 3px; width: 20px; border-radius: 4px; }
.chem-legend .strong { background: #59e83f; }.chem-legend .medium { background: #f1b93c; }.chem-legend .weak { background: #ff3f66; }
.squad-controls > label > span, .manager-settings label > span { font-size: 13px; letter-spacing: .03em; color: #bcacc9; }
.squad-controls input, .squad-controls select { font-size: 15px; height: 43px; }
.squad-controls .squad-score small { font-size: 11px; letter-spacing: .01em; }
.squad-controls .squad-score b { font-size: 30px; }
.squad-controls .squad-score em { font-size: 14px; }
.squad-controls .squad-averages b { font-size: 14px; }
.squad-controls .squad-averages small { font-size: 11px; color: #ad98bf; }
.manager-settings { margin: 18px 0; padding: 12px 0; border-block: 1px solid #34253e; }
.manager-settings summary { cursor: pointer; color: #e5d0f5; font-size: 14px; font-weight: 600; }
.manager-settings label { display: grid; gap: 6px; margin-top: 12px; }
.manager-settings .checkbox-label { display: flex; }
.manager-settings input[type="checkbox"] { height: 17px; width: 17px; }
.manager-settings p, .storage-note, .keyboard-help { font-size: 13px; line-height: 1.5; color: #a997b8; }
.import-button { display: inline-flex; align-items: center; }
.import-button input { width: 0; height: 0; overflow: hidden; opacity: 0; }
.import-button:focus-within { outline: 2px solid #d09eff; outline-offset: 3px; }
.save-actions { margin-top: 15px; }
.storage-note { margin: 10px 0 14px; }
.squad-help p { color: #b2a1c1; font-size: 14px; }
.squad-help .builder-actions { margin-top: 15px; }
.squad-help .tool-button { margin-top: 12px; }
.squad-picker { max-height: none; }
.squad-panel-title h2 { font-size: 24px; }
.squad-search input { font-size: 15px; height: 44px; }
.picker-options { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 0 12px; }
.picker-options label { display: flex; align-items: center; gap: 5px; font-size: 13px; white-space: nowrap; }
.picker-options input { accent-color: #a75ef0; }
.picker-options select, .database-toolbar select, .detail-builder-actions select { border: 1px solid #463150; border-radius: 6px; background: #0b080f; color: #fff; padding: 8px; font-family: inherit; font-size: 14px; max-width: 100%; }
.picker-options select { width: 150px; font-size: 12px; }
.picker-count { color: #a997b8; font-size: 12px; line-height: 1.5; padding: 0 12px; }
.squad-results { max-height: 550px; }
.squad-results b { font-size: 15px; }.squad-results small, .squad-results em { font-size: 12px; }.squad-results em { color: #a99ab5; }
.squad-no-results { font-size: 14px; }
.squad-results .picker-more { min-height: 44px; justify-content: center; color: #d5b0f5; font-size: 14px; }
.database-filters { grid-template-columns: 2fr repeat(3, 1fr); }
.database-filters label > span { font-size: 13px; color: #c2afce; }
.database-filters input, .database-filters select { font-size: 15px; min-height: 44px; }
.database-toolbar { margin: 0 0 16px; padding: 10px 14px; font-size: 14px; }
.database-toolbar > label { display: flex; align-items: center; gap: 8px; }
.player-table-main > span:last-child > b { font-size: 15px; }.player-table-main > span:last-child > small { font-size: 12px; }
.player-table th { font-size: 12px; white-space: nowrap; }
.favorite-toggle { width: 36px; height: 36px; background: #21152d; color: #be9acf; border: 1px solid #493056; border-radius: 7px; cursor: pointer; font-size: 23px; }
.favorite-toggle.is-favorite { color: #ffd16a; border-color: #c19137; }
.database-card-grid { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); }
.database-card { position: relative; }
.database-card > .favorite-toggle { position: absolute; right: 6px; top: 8px; z-index: 5; }
.detail-builder-actions { margin-top: 22px; border-top: 1px solid #493056; padding-top: 18px; }
.detail-builder-actions > label { display: grid; gap: 8px; color: #d0bedc; font-size: 14px; }
.detail-builder-actions .builder-actions { margin-top: 12px; }
.share-link-box { width: 100%; min-height: 78px; padding: 12px; margin-top: 12px; border: 1px solid #c786f5; border-radius: 7px; background: #100a19; color: #e5cbfa; resize: vertical; }
.catalogue-toolbar input[type="search"] { min-height: 42px; min-width: 180px; padding: 8px 12px; border: 1px solid #463150; border-radius: 7px; background: #0b080f; color: #fff; font: inherit; }
.catalogue-toolbar #catalogue-count { color: #bca7cc; font-size: 14px; }
.sbc-card[hidden], .pack-row[hidden], .empty-state[hidden] { display: none; }
#tools-toast { position: fixed; z-index: 12000; left: 50%; bottom: 22px; transform: translate(-50%, 12px); max-width: min(600px, calc(100% - 28px)); width: max-content; padding: 13px 18px; border: 1px solid #c786f5; border-radius: 10px; background: #29173d; color: #fff; font-size: 14px; line-height: 1.5; box-shadow: 0 12px 40px #0008; opacity: 0; pointer-events: none; transition: transform .18s, opacity .18s; }
#tools-toast.visible { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 1120px) {
  .squad-workspace { grid-template-columns: minmax(0, 1fr); }
  .squad-sidebar { grid-template-columns: minmax(280px, .9fr) minmax(300px, 1.1fr); }
  .selected-player { grid-column: 2; }
  .squad-pitch { min-height: 900px; }
}
@media (max-width: 760px) {
  main:has(.squad-page) { width: calc(100% - 18px); }
  .builder-commandbar { padding: 10px; gap: 10px; }
  .builder-instruction { font-size: 13px; }
  .builder-commandbar .builder-actions { gap: 5px; }
  .builder-actions button, .mode-switch button, .tool-button { font-size: 13px; padding: 8px 9px; min-height: 40px; }
  .squad-sidebar { grid-template-columns: minmax(0, 1fr); }
  .selected-player { grid-column: auto; }
  .squad-pitch { min-width: 720px; min-height: 900px; }
  .squad-slot { width: 136px; }.squad-player-card { width: 126px; }
  .database-filters { grid-template-columns: 1fr 1fr; }
  .database-filters .search-field { grid-column: 1 / -1; }
  .database-toolbar { gap: 10px; }
  .database-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .bench-row { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  #tools-toast, .builder-actions button, .mode-switch button { transition: none; }
}