| *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } |
|
|
| :root { |
| --bg: #0a0e14; |
| --surface: #111820; |
| --surface-2: #181f2a; |
| --surface-3: #1e2836; |
| --border: #253040; |
| --text: #e8ecf1; |
| --text-dim: #7a8a9e; |
| --text-muted: #4a5a6e; |
| --accent: #4ade80; |
| --accent-dim: rgba(74, 222, 128, 0.15); |
| --accent-glow: rgba(74, 222, 128, 0.3); |
| --pitch: #1a5c2a; |
| --pitch-line: rgba(255,255,255,0.35); |
| --pitch-line-strong: rgba(255,255,255,0.5); |
| --gold: #f4c542; |
| --red: #f87171; |
| --blue: #60a5fa; |
| --font-body: 'DM Sans', system-ui, sans-serif; |
| --font-display: 'Instrument Serif', Georgia, serif; |
| } |
|
|
| html { font-size: 16px; } |
|
|
| body { |
| background: var(--bg); |
| color: var(--text); |
| font-family: var(--font-body); |
| height: 100vh; |
| overflow: hidden; |
| -webkit-font-smoothing: antialiased; |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| |
| .header { |
| padding: 1.5rem 2.5rem 1rem; |
| display: flex; |
| align-items: baseline; |
| gap: 1.2rem; |
| border-bottom: 1px solid var(--border); |
| flex-shrink: 0; |
| } |
| .header h1 { |
| font-family: var(--font-display); |
| font-size: 2rem; |
| font-weight: 400; |
| letter-spacing: -0.02em; |
| color: var(--text); |
| } |
| .header h1 em { |
| color: var(--accent); |
| font-style: italic; |
| } |
| .header .subtitle { |
| font-size: 0.8rem; |
| color: var(--text-muted); |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| font-weight: 500; |
| } |
|
|
| |
| .filter-bar { |
| display: flex; |
| align-items: flex-start; |
| gap: 1.5rem; |
| padding: 0.7rem 2.5rem; |
| border-bottom: 1px solid var(--border); |
| background: var(--surface); |
| flex-shrink: 0; |
| flex-wrap: wrap; |
| } |
| .filter-group { |
| display: flex; |
| flex-direction: column; |
| gap: 0.3rem; |
| } |
| .filter-group.leagues { |
| flex: 1; |
| min-width: 200px; |
| } |
| .filter-label { |
| font-size: 0.6rem; |
| text-transform: uppercase; |
| letter-spacing: 0.08em; |
| color: var(--text-muted); |
| font-weight: 600; |
| } |
| .league-chips { |
| display: flex; |
| gap: 0.3rem; |
| flex-wrap: wrap; |
| } |
| .league-chip { |
| font-size: 0.65rem; |
| padding: 3px 8px; |
| border-radius: 12px; |
| border: 1px solid var(--border); |
| background: transparent; |
| color: var(--text-dim); |
| cursor: pointer; |
| transition: all 0.15s; |
| white-space: nowrap; |
| font-family: var(--font-body); |
| } |
| .league-chip.active { |
| background: var(--accent-dim); |
| border-color: var(--accent); |
| color: var(--accent); |
| } |
| .league-chip:hover { border-color: var(--accent); } |
|
|
| |
| .ms { position: relative; min-width: 220px; } |
| .ms-button { |
| display: flex; align-items: center; justify-content: space-between; |
| gap: 0.4rem; |
| width: 100%; |
| font-family: inherit; |
| font-size: 0.75rem; |
| padding: 4px 10px; |
| height: 28px; |
| border-radius: 6px; |
| border: 1px solid var(--border); |
| background: var(--surface); |
| color: var(--text); |
| cursor: pointer; |
| text-align: left; |
| } |
| .ms-button:hover { border-color: var(--accent); } |
| .ms-button .ms-caret { |
| font-size: 0.6rem; |
| color: var(--text-muted); |
| margin-left: auto; |
| transition: transform 0.15s; |
| } |
| .ms.open .ms-caret { transform: rotate(180deg); } |
| .ms-button .ms-label { |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| .ms-button .ms-count { |
| background: var(--accent-dim); |
| color: var(--accent); |
| font-size: 0.62rem; |
| font-weight: 600; |
| padding: 1px 6px; |
| border-radius: 8px; |
| flex-shrink: 0; |
| } |
| .ms-panel { |
| position: absolute; |
| top: calc(100% + 4px); |
| left: 0; |
| width: 280px; |
| max-height: 360px; |
| display: none; |
| flex-direction: column; |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| box-shadow: 0 10px 28px rgba(0,0,0,0.45); |
| z-index: 40; |
| } |
| .ms.open .ms-panel { display: flex; } |
| .ms-panel-search { |
| padding: 0.55rem; |
| border-bottom: 1px solid var(--border); |
| } |
| .ms-panel-search input { |
| width: 100%; |
| background: var(--bg); |
| border: 1px solid var(--border); |
| color: var(--text); |
| padding: 5px 8px; |
| border-radius: 5px; |
| font-family: inherit; |
| font-size: 0.75rem; |
| outline: none; |
| } |
| .ms-panel-search input:focus { border-color: var(--accent); } |
| .ms-panel-actions { |
| display: flex; gap: 0.4rem; padding: 0.4rem 0.55rem; |
| border-bottom: 1px solid var(--border); |
| } |
| .ms-panel-actions button { |
| flex: 1; |
| background: var(--bg); |
| border: 1px solid var(--border); |
| color: var(--text-dim); |
| font-family: inherit; |
| font-size: 0.66rem; |
| letter-spacing: 0.04em; |
| text-transform: uppercase; |
| padding: 4px 8px; |
| border-radius: 5px; |
| cursor: pointer; |
| transition: all 0.12s; |
| } |
| .ms-panel-actions button:hover { color: var(--text); border-color: var(--accent); } |
| .ms-panel-list { |
| overflow-y: auto; |
| flex: 1; |
| padding: 0.25rem 0; |
| } |
| .ms-option { |
| display: flex; align-items: center; gap: 0.5rem; |
| padding: 5px 0.7rem; |
| font-size: 0.75rem; |
| cursor: pointer; |
| user-select: none; |
| color: var(--text); |
| } |
| .ms-option:hover { background: rgba(255,255,255,0.04); } |
| .ms-option input[type="checkbox"] { |
| appearance: none; |
| width: 13px; height: 13px; |
| border: 1px solid var(--border); |
| border-radius: 3px; |
| background: var(--bg); |
| display: grid; place-items: center; |
| cursor: pointer; |
| flex-shrink: 0; |
| } |
| .ms-option input[type="checkbox"]:checked { |
| background: var(--accent); |
| border-color: var(--accent); |
| } |
| .ms-option input[type="checkbox"]:checked::after { |
| content: '\2713'; |
| color: var(--bg); |
| font-size: 0.7rem; |
| font-weight: 700; |
| line-height: 1; |
| } |
| .ms-option-all { |
| border-bottom: 1px solid var(--border); |
| font-weight: 600; |
| } |
| .ms-option .ms-option-label { |
| flex: 1; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| .ms-empty { |
| padding: 1rem; |
| text-align: center; |
| color: var(--text-muted); |
| font-size: 0.72rem; |
| } |
| .filter-select, .filter-input { |
| font-size: 0.75rem; |
| padding: 4px 8px; |
| border-radius: 6px; |
| border: 1px solid var(--border); |
| background: var(--surface-2); |
| color: var(--text); |
| font-family: var(--font-body); |
| outline: none; |
| } |
| .filter-select:focus, .filter-input:focus { |
| border-color: var(--accent); |
| } |
| .filter-select { min-width: 110px; } |
| .filter-input { width: 56px; } |
| .filter-range { |
| display: flex; |
| align-items: center; |
| gap: 0.3rem; |
| } |
| .filter-separator { |
| color: var(--text-muted); |
| font-size: 0.75rem; |
| } |
| .filter-count { |
| font-size: 0.65rem; |
| color: var(--text-muted); |
| padding: 0.3rem 0; |
| align-self: flex-end; |
| } |
|
|
| |
| .main { |
| display: flex; |
| flex: 1; |
| min-height: 0; |
| position: relative; |
| } |
|
|
| |
| .pitch-container { |
| flex: 1; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| padding: 2rem; |
| transition: flex 0.4s cubic-bezier(0.4,0,0.2,1); |
| overflow: hidden; |
| } |
| .pitch-container.shrunk { |
| flex: 0.55; |
| } |
|
|
| .pitch { |
| width: 100%; |
| max-width: 620px; |
| aspect-ratio: 68 / 105; |
| background: var(--pitch); |
| border-radius: 12px; |
| position: relative; |
| overflow: hidden; |
| box-shadow: |
| 0 0 0 3px rgba(255,255,255,0.12), |
| 0 20px 60px rgba(0,0,0,0.5), |
| inset 0 0 80px rgba(0,0,0,0.15); |
| } |
|
|
| |
| .pitch::before { |
| content: ''; |
| position: absolute; |
| inset: 0; |
| background: repeating-linear-gradient( |
| 180deg, |
| transparent, |
| transparent 9%, |
| rgba(0,0,0,0.04) 9%, |
| rgba(0,0,0,0.04) 18% |
| ); |
| pointer-events: none; |
| z-index: 0; |
| } |
|
|
| |
| .pitch-lines { |
| position: absolute; |
| inset: 0; |
| pointer-events: none; |
| z-index: 1; |
| } |
|
|
| .pitch-lines .halfway { |
| position: absolute; |
| top: 50%; |
| left: 5%; |
| right: 5%; |
| height: 1px; |
| background: var(--pitch-line); |
| } |
|
|
| .pitch-lines .center-circle { |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| width: 22%; |
| aspect-ratio: 1; |
| border: 1px solid var(--pitch-line); |
| border-radius: 50%; |
| transform: translate(-50%, -50%); |
| } |
| .pitch-lines .center-dot { |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| width: 6px; |
| height: 6px; |
| background: var(--pitch-line-strong); |
| border-radius: 50%; |
| transform: translate(-50%, -50%); |
| } |
|
|
| .pitch-lines .pen-area-top { |
| position: absolute; |
| top: 0; |
| left: 22%; |
| right: 22%; |
| height: 17%; |
| border: 1px solid var(--pitch-line); |
| border-top: none; |
| } |
| .pitch-lines .pen-area-bottom { |
| position: absolute; |
| bottom: 0; |
| left: 22%; |
| right: 22%; |
| height: 17%; |
| border: 1px solid var(--pitch-line); |
| border-bottom: none; |
| } |
|
|
| .pitch-lines .goal-area-top { |
| position: absolute; |
| top: 0; |
| left: 35%; |
| right: 35%; |
| height: 7%; |
| border: 1px solid var(--pitch-line); |
| border-top: none; |
| } |
| .pitch-lines .goal-area-bottom { |
| position: absolute; |
| bottom: 0; |
| left: 35%; |
| right: 35%; |
| height: 7%; |
| border: 1px solid var(--pitch-line); |
| border-bottom: none; |
| } |
|
|
| .pitch-lines .outline { |
| position: absolute; |
| top: 3%; |
| left: 5%; |
| right: 5%; |
| bottom: 3%; |
| border: 1px solid var(--pitch-line-strong); |
| } |
|
|
| .pitch-lines .arc-top { |
| position: absolute; |
| top: 14.5%; |
| left: 50%; |
| width: 12%; |
| aspect-ratio: 1; |
| border: 1px solid var(--pitch-line); |
| border-radius: 50%; |
| transform: translateX(-50%); |
| clip-path: inset(50% 0 0 0); |
| } |
| .pitch-lines .arc-bottom { |
| position: absolute; |
| bottom: 14.5%; |
| left: 50%; |
| width: 12%; |
| aspect-ratio: 1; |
| border: 1px solid var(--pitch-line); |
| border-radius: 50%; |
| transform: translateX(-50%); |
| clip-path: inset(0 0 50% 0); |
| } |
|
|
| .pitch-lines .corner-tl, |
| .pitch-lines .corner-tr, |
| .pitch-lines .corner-bl, |
| .pitch-lines .corner-br { |
| position: absolute; |
| width: 3%; |
| aspect-ratio: 1; |
| border: 1px solid var(--pitch-line); |
| border-radius: 50%; |
| } |
| .pitch-lines .corner-bl { bottom: 3%; left: 5%; clip-path: inset(0 50% 50% 0); } |
| .pitch-lines .corner-br { bottom: 3%; right: 5%; clip-path: inset(0 0 50% 50%); } |
| .pitch-lines .corner-tl { top: 3%; left: 5%; clip-path: inset(50% 50% 0 0); } |
| .pitch-lines .corner-tr { top: 3%; right: 5%; clip-path: inset(50% 0 0 50%); } |
|
|
|
|
| |
| .pos-marker { |
| position: absolute; |
| z-index: 5; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 4px; |
| cursor: pointer; |
| transform: translate(-50%, -50%); |
| transition: transform 0.2s ease; |
| } |
| .pos-marker:hover { transform: translate(-50%, -50%) scale(1.08); } |
| .pos-marker.active { transform: translate(-50%, -50%) scale(1.12); } |
|
|
| .pos-dot { |
| width: 42px; |
| height: 42px; |
| border-radius: 50%; |
| background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.2), transparent 60%), |
| rgba(10, 14, 20, 0.85); |
| border: 2px solid var(--accent); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 0.6rem; |
| font-weight: 700; |
| letter-spacing: 0.04em; |
| color: var(--accent); |
| text-transform: uppercase; |
| position: relative; |
| box-shadow: 0 0 12px var(--accent-dim), 0 4px 12px rgba(0,0,0,0.4); |
| transition: all 0.25s ease; |
| } |
| .pos-marker:hover .pos-dot, |
| .pos-marker.active .pos-dot { |
| background: var(--accent); |
| color: var(--bg); |
| box-shadow: 0 0 24px var(--accent-glow), 0 4px 16px rgba(0,0,0,0.5); |
| } |
|
|
| |
| .pos-dot::after { |
| content: ''; |
| position: absolute; |
| inset: -4px; |
| border-radius: 50%; |
| border: 1px solid var(--accent); |
| opacity: 0; |
| animation: pulse-ring 2.5s ease-out infinite; |
| } |
| @keyframes pulse-ring { |
| 0% { transform: scale(1); opacity: 0.5; } |
| 100% { transform: scale(1.6); opacity: 0; } |
| } |
|
|
| .pos-label { |
| font-size: 0.58rem; |
| font-weight: 600; |
| color: rgba(255,255,255,0.7); |
| text-transform: uppercase; |
| letter-spacing: 0.06em; |
| white-space: nowrap; |
| text-shadow: 0 1px 4px rgba(0,0,0,0.6); |
| } |
|
|
| .pos-player-name { |
| font-size: 0.68rem; |
| font-weight: 500; |
| color: rgba(255,255,255,0.95); |
| text-shadow: 0 1px 6px rgba(0,0,0,0.8); |
| white-space: nowrap; |
| max-width: 110px; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
|
|
| .pos-empty { |
| font-size: 0.6rem; |
| color: rgba(255,255,255,0.35); |
| font-style: italic; |
| } |
|
|
|
|
| |
| .panel { |
| width: 0; |
| overflow: hidden; |
| background: var(--surface); |
| border-left: 1px solid var(--border); |
| transition: width 0.4s cubic-bezier(0.4,0,0.2,1); |
| display: flex; |
| flex-direction: column; |
| } |
| .panel.open { |
| width: 820px; |
| } |
|
|
| .panel-inner { |
| width: 820px; |
| min-width: 820px; |
| height: 100%; |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| .panel-header { |
| padding: 1.5rem 1.5rem 1rem; |
| border-bottom: 1px solid var(--border); |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| flex-shrink: 0; |
| } |
| .panel-header h2 { |
| font-family: var(--font-display); |
| font-size: 1.4rem; |
| font-weight: 400; |
| display: flex; |
| align-items: center; |
| gap: 0.6rem; |
| } |
| .panel-header h2 .pos-badge { |
| font-family: var(--font-body); |
| font-size: 0.6rem; |
| font-weight: 700; |
| background: var(--accent); |
| color: var(--bg); |
| padding: 3px 8px; |
| border-radius: 4px; |
| letter-spacing: 0.04em; |
| } |
| .panel-close { |
| width: 32px; |
| height: 32px; |
| border: 1px solid var(--border); |
| border-radius: 6px; |
| background: transparent; |
| color: var(--text-dim); |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 1.1rem; |
| transition: all 0.15s; |
| } |
| .panel-close:hover { |
| background: var(--surface-2); |
| color: var(--text); |
| border-color: var(--text-muted); |
| } |
|
|
| .panel-body { |
| display: flex; |
| flex: 1; |
| min-height: 0; |
| } |
|
|
| .panel-list { |
| width: 320px; |
| flex-shrink: 0; |
| overflow-y: auto; |
| padding: 0.8rem 1rem 1.5rem; |
| border-right: 1px solid var(--border); |
| } |
| .panel-list::-webkit-scrollbar { width: 5px; } |
| .panel-list::-webkit-scrollbar-track { background: transparent; } |
| .panel-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } |
|
|
| .panel-detail { |
| flex: 1; |
| overflow-y: auto; |
| padding: 1rem 1.5rem 1.5rem; |
| } |
| .panel-detail::-webkit-scrollbar { width: 5px; } |
| .panel-detail::-webkit-scrollbar-track { background: transparent; } |
| .panel-detail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } |
|
|
| .panel-detail-empty { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| height: 100%; |
| color: var(--text-muted); |
| font-size: 0.82rem; |
| font-style: italic; |
| } |
|
|
| .panel-empty { |
| text-align: center; |
| padding: 3rem 1rem; |
| color: var(--text-muted); |
| font-size: 0.85rem; |
| grid-column: 1 / -1; |
| } |
|
|
| |
| .player-card { |
| padding: 1rem; |
| border: 1px solid var(--border); |
| border-radius: 10px; |
| margin-bottom: 0.6rem; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| background: var(--surface-2); |
| position: relative; |
| overflow: hidden; |
| } |
| .player-card::before { |
| content: ''; |
| position: absolute; |
| left: 0; |
| top: 0; |
| bottom: 0; |
| width: 3px; |
| background: var(--accent); |
| opacity: 0; |
| transition: opacity 0.2s; |
| } |
| .player-card:hover { |
| border-color: var(--accent); |
| background: var(--surface-3); |
| } |
| .player-card:hover::before { opacity: 1; } |
| .player-card.selected { border-color: var(--accent); } |
| .player-card.selected::before { opacity: 1; } |
|
|
| .card-top { |
| display: flex; |
| align-items: center; |
| gap: 0.8rem; |
| } |
|
|
| .card-rank { |
| font-family: var(--font-display); |
| font-size: 1.6rem; |
| font-weight: 400; |
| color: var(--text-muted); |
| width: 28px; |
| text-align: center; |
| flex-shrink: 0; |
| } |
| .player-card:nth-child(1) .card-rank { color: var(--gold); } |
|
|
| .card-photo { |
| width: 36px; |
| height: 36px; |
| border-radius: 50%; |
| object-fit: cover; |
| border: 1px solid var(--border); |
| flex-shrink: 0; |
| background: var(--surface); |
| } |
|
|
| .card-info { flex: 1; min-width: 0; } |
| .card-name { |
| font-weight: 600; |
| font-size: 0.92rem; |
| margin-bottom: 2px; |
| display: flex; |
| align-items: center; |
| gap: 0.4rem; |
| } |
| .card-team { |
| font-size: 0.75rem; |
| color: var(--text-dim); |
| } |
|
|
| .card-score { |
| text-align: right; |
| flex-shrink: 0; |
| } |
| .card-score-value { |
| font-size: 1.15rem; |
| font-weight: 700; |
| color: var(--accent); |
| font-variant-numeric: tabular-nums; |
| } |
| .card-score-label { |
| font-size: 0.6rem; |
| color: var(--text-muted); |
| text-transform: uppercase; |
| letter-spacing: 0.06em; |
| } |
|
|
| .card-tags { |
| display: flex; |
| gap: 0.4rem; |
| margin-top: 0.6rem; |
| flex-wrap: wrap; |
| } |
| .tag { |
| font-size: 0.62rem; |
| padding: 2px 7px; |
| border-radius: 4px; |
| background: var(--surface); |
| color: var(--text-dim); |
| border: 1px solid var(--border); |
| white-space: nowrap; |
| } |
| .tag.eu { border-color: var(--blue); color: var(--blue); } |
| .tag.pct { border-color: var(--accent); color: var(--accent); } |
| .tag.contract-libre { border-color: var(--red); color: var(--red); background: rgba(248,113,113,0.1); } |
| .tag.contract-urgente { border-color: var(--gold); color: var(--gold); background: rgba(244,197,66,0.1); } |
|
|
| |
|
|
| .detail-section { |
| margin-bottom: 1rem; |
| } |
| .detail-section:last-child { margin-bottom: 0; } |
| .detail-label { |
| font-size: 0.6rem; |
| text-transform: uppercase; |
| letter-spacing: 0.08em; |
| color: var(--text-muted); |
| margin-bottom: 0.4rem; |
| font-weight: 600; |
| } |
|
|
| |
| .score-bars { display: flex; flex-direction: column; gap: 0.5rem; } |
| .score-bar-row { |
| display: flex; |
| align-items: center; |
| gap: 0.6rem; |
| } |
| .score-bar-name { |
| font-size: 0.72rem; |
| color: var(--text-dim); |
| width: 100px; |
| flex-shrink: 0; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| .score-bar-track { |
| flex: 1; |
| height: 6px; |
| background: var(--surface); |
| border-radius: 3px; |
| overflow: hidden; |
| } |
| .score-bar-fill { |
| height: 100%; |
| border-radius: 3px; |
| transition: width 0.6s cubic-bezier(0.4,0,0.2,1); |
| } |
| .score-bar-fill.scouting { background: var(--accent); } |
| .score-bar-fill.perf { background: var(--blue); } |
| .score-bar-fill.profile { background: var(--gold); } |
| .score-bar-fill.block { background: #818cf8; } |
| .score-bar-val { |
| font-size: 0.72rem; |
| font-weight: 600; |
| color: var(--text); |
| width: 36px; |
| text-align: right; |
| font-variant-numeric: tabular-nums; |
| } |
|
|
| |
| .info-grid { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 0.5rem; |
| } |
| .info-item { |
| padding: 0.5rem 0.6rem; |
| background: var(--surface); |
| border-radius: 6px; |
| border: 1px solid var(--border); |
| } |
| .info-item-label { |
| font-size: 0.58rem; |
| text-transform: uppercase; |
| letter-spacing: 0.06em; |
| color: var(--text-muted); |
| margin-bottom: 2px; |
| } |
| .info-item-value { |
| font-size: 0.82rem; |
| font-weight: 500; |
| } |
| .info-item-value.contract-libre { color: var(--red); } |
| .info-item-value.contract-urgente { color: var(--gold); } |
|
|
| .detail-divider { |
| height: 1px; |
| background: var(--border); |
| margin: 0.8rem 0; |
| } |
|
|
| |
| .season-table { |
| width: 100%; |
| border-collapse: collapse; |
| font-size: 0.72rem; |
| } |
| .season-table th { |
| text-align: left; |
| color: var(--text-muted); |
| font-weight: 600; |
| font-size: 0.6rem; |
| text-transform: uppercase; |
| letter-spacing: 0.04em; |
| padding: 0.3rem 0.4rem; |
| border-bottom: 1px solid var(--border); |
| } |
| .season-table td { |
| padding: 0.3rem 0.4rem; |
| color: var(--text-dim); |
| border-bottom: 1px solid rgba(37,48,64,0.5); |
| } |
| .season-table tr:last-child td { border-bottom: none; } |
|
|
| |
| .star-btn { |
| cursor: pointer; |
| font-size: 0.9rem; |
| line-height: 1; |
| background: none; |
| border: none; |
| padding: 0; |
| color: var(--text-muted); |
| transition: color 0.15s; |
| } |
| .star-btn:hover { color: var(--gold); } |
| .star-btn.active { color: var(--gold); } |
|
|
| |
| .notes-textarea { |
| width: 100%; |
| min-height: 56px; |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-radius: 6px; |
| color: var(--text); |
| font-family: var(--font-body); |
| font-size: 0.78rem; |
| padding: 0.5rem; |
| resize: vertical; |
| outline: none; |
| transition: border-color 0.15s; |
| } |
| .notes-textarea:focus { border-color: var(--accent); } |
| .notes-textarea::placeholder { color: var(--text-muted); } |
|
|
| |
| .media-btn { |
| width: 100%; |
| padding: 0.5rem; |
| border: 1px solid var(--blue); |
| border-radius: 6px; |
| background: transparent; |
| color: var(--blue); |
| font-family: var(--font-body); |
| font-size: 0.75rem; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.15s; |
| } |
| .media-btn:hover { background: rgba(96,165,250,0.1); } |
| .media-btn:disabled { opacity: 0.5; cursor: not-allowed; } |
| .media-btn.loading { border-style: dashed; } |
|
|
| .media-result { |
| margin-top: 0.6rem; |
| padding: 0.8rem; |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| font-size: 0.76rem; |
| line-height: 1.55; |
| color: var(--text); |
| white-space: pre-wrap; |
| } |
| .media-result h3, .media-result h4 { |
| color: var(--accent); |
| font-size: 0.78rem; |
| margin: 0.6rem 0 0.3rem; |
| } |
| .media-result h3:first-child, .media-result h4:first-child { margin-top: 0; } |
| .media-result ul { padding-left: 1.2rem; margin: 0.3rem 0; } |
| .media-result li { margin-bottom: 0.2rem; } |
| .media-result strong { color: var(--text); } |
| .media-result em { color: var(--text-dim); } |
| .media-result a { color: var(--blue); text-decoration: none; } |
| .media-result a:hover { text-decoration: underline; } |
| .media-error { color: var(--red); font-size: 0.72rem; margin-top: 0.4rem; } |
|
|
| |
| .discard-btn { |
| width: 100%; |
| padding: 0.5rem; |
| border: 1px solid var(--red); |
| border-radius: 6px; |
| background: transparent; |
| color: var(--red); |
| font-family: var(--font-body); |
| font-size: 0.75rem; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.15s; |
| } |
| .discard-btn:hover { |
| background: rgba(248,113,113,0.1); |
| } |
|
|
| |
| @media (max-width: 1100px) { |
| .panel.open { width: 680px; } |
| .panel-inner { width: 680px; min-width: 680px; } |
| .panel-list { width: 280px; } |
| .pond-sidebar { width: 260px; } |
| } |
|
|
| @media (max-width: 900px) { |
| .main { flex-direction: column; } |
| .pond-sidebar { display: none; } |
| .pitch-container { padding: 1rem; } |
| .pitch-container.shrunk { flex: none; } |
| .panel { width: 100% !important; border-left: none; border-top: 1px solid var(--border); } |
| .panel.open { width: 100% !important; } |
| .panel-inner { width: 100%; min-width: 100%; max-height: 60vh; } |
| .panel-body { flex-direction: column; } |
| .panel-list { width: 100%; border-right: none; border-bottom: 1px solid var(--border); max-height: 200px; } |
| .pos-dot { width: 34px; height: 34px; font-size: 0.52rem; } |
| .pos-player-name { font-size: 0.58rem; max-width: 80px; } |
| .pos-label { font-size: 0.48rem; } |
| .filter-bar { padding: 0.5rem 1rem; gap: 1rem; } |
| body { height: auto; overflow: auto; } |
| } |
|
|
| @media (max-width: 600px) { |
| .header { padding: 1.2rem 1rem 0.8rem; flex-direction: column; gap: 0.3rem; } |
| .header h1 { font-size: 1.5rem; } |
| .pitch-container { padding: 0.6rem; } |
| .pos-dot { width: 28px; height: 28px; font-size: 0.46rem; } |
| .pos-player-name { font-size: 0.52rem; max-width: 68px; } |
| .filter-bar { padding: 0.4rem 0.8rem; gap: 0.6rem; } |
| } |
|
|
| |
| .pond-sidebar { |
| width: 310px; |
| flex-shrink: 0; |
| background: var(--surface); |
| border-right: 1px solid var(--border); |
| overflow-y: auto; |
| padding: 0.8rem 1rem 1.5rem; |
| display: flex; |
| flex-direction: column; |
| gap: 1rem; |
| } |
| .pond-sidebar::-webkit-scrollbar { width: 4px; } |
| .pond-sidebar::-webkit-scrollbar-track { background: transparent; } |
| .pond-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } |
|
|
| .pond-sidebar-title { |
| font-size: 0.7rem; |
| font-weight: 600; |
| color: var(--text); |
| text-transform: uppercase; |
| letter-spacing: 0.06em; |
| padding-bottom: 0.3rem; |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .pond-section-title { |
| font-size: 0.58rem; |
| text-transform: uppercase; |
| letter-spacing: 0.08em; |
| color: var(--text-muted); |
| font-weight: 600; |
| margin-bottom: 0.4rem; |
| } |
|
|
| .pond-rows { display: flex; flex-direction: column; gap: 0.4rem; } |
|
|
| .pond-row { |
| display: flex; |
| align-items: center; |
| gap: 0.4rem; |
| } |
| .pond-row-label { |
| font-size: 0.64rem; |
| color: var(--text-dim); |
| width: 110px; |
| flex-shrink: 0; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| .pond-slider { |
| flex: 1; |
| -webkit-appearance: none; |
| appearance: none; |
| height: 4px; |
| border-radius: 2px; |
| background: var(--surface-3); |
| outline: none; |
| cursor: pointer; |
| } |
| .pond-slider::-webkit-slider-thumb { |
| -webkit-appearance: none; |
| width: 12px; |
| height: 12px; |
| border-radius: 50%; |
| background: var(--accent); |
| cursor: pointer; |
| border: none; |
| } |
| .pond-slider::-moz-range-thumb { |
| width: 12px; |
| height: 12px; |
| border-radius: 50%; |
| background: var(--accent); |
| cursor: pointer; |
| border: none; |
| } |
| .pond-val { |
| font-size: 0.64rem; |
| font-weight: 600; |
| color: var(--text); |
| width: 24px; |
| text-align: right; |
| font-variant-numeric: tabular-nums; |
| flex-shrink: 0; |
| } |
|
|
| .pond-blocks-wrap { |
| max-height: none; |
| overflow: visible; |
| } |
|
|
| .pond-blocks-grid { |
| display: flex; |
| flex-direction: column; |
| gap: 0.35rem; |
| } |
| .pond-blocks-grid .pond-row-label { width: 110px; font-size: 0.6rem; } |
|
|
| .pond-reset { |
| font-size: 0.62rem; |
| padding: 4px 10px; |
| border-radius: 4px; |
| border: 1px solid var(--border); |
| background: transparent; |
| color: var(--text-muted); |
| cursor: pointer; |
| font-family: var(--font-body); |
| transition: all 0.15s; |
| align-self: flex-end; |
| } |
| .pond-reset:hover { border-color: var(--red); color: var(--red); } |
|
|
| |
| @keyframes fade-in-up { |
| from { opacity: 0; transform: translateY(12px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| .player-card { |
| animation: fade-in-up 0.3s ease both; |
| } |
| .player-card:nth-child(2) { animation-delay: 0.04s; } |
| .player-card:nth-child(3) { animation-delay: 0.08s; } |
| .player-card:nth-child(4) { animation-delay: 0.12s; } |
| .player-card:nth-child(5) { animation-delay: 0.16s; } |
| .player-card:nth-child(6) { animation-delay: 0.20s; } |
| .player-card:nth-child(7) { animation-delay: 0.24s; } |
|
|
| |
| .pos-marker { |
| animation: marker-appear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; |
| } |
| @keyframes marker-appear { |
| from { opacity: 0; transform: translate(-50%, -50%) scale(0); } |
| to { opacity: 1; transform: translate(-50%, -50%) scale(1); } |
| } |
|
|
| |
| .tab-nav { |
| display: flex; |
| gap: 2px; |
| padding: 0 1.5rem; |
| background: var(--bg); |
| border-bottom: 1px solid var(--border); |
| position: sticky; |
| top: 0; |
| z-index: 30; |
| } |
| .tab-btn { |
| background: none; |
| border: none; |
| color: var(--text-dim); |
| font-family: inherit; |
| font-size: 0.78rem; |
| font-weight: 500; |
| letter-spacing: 0.04em; |
| text-transform: uppercase; |
| padding: 0.85rem 1.2rem; |
| cursor: pointer; |
| border-bottom: 2px solid transparent; |
| transition: color 0.15s, border-color 0.15s; |
| } |
| .tab-btn:hover { color: var(--text); } |
| .tab-btn.active { |
| color: var(--accent); |
| border-bottom-color: var(--accent); |
| } |
| .tab-btn .tab-badge { |
| display: inline-block; |
| margin-left: 0.4rem; |
| padding: 1px 6px; |
| border-radius: 8px; |
| background: var(--surface); |
| color: var(--text-muted); |
| font-size: 0.65rem; |
| font-weight: 600; |
| } |
| .tab-btn.active .tab-badge { background: var(--accent); color: var(--bg); } |
| .view { display: none; } |
| .view.active { display: flex; } |
| #view-table.active { display: block; } |
|
|
| |
| .table-view { padding: 1rem 1.5rem 4rem; } |
| .table-toolbar { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 1rem; |
| margin-bottom: 0.85rem; |
| flex-wrap: wrap; |
| } |
| .table-search { position: relative; flex: 1; min-width: 220px; max-width: 360px; } |
| .table-search input { |
| width: 100%; |
| background: var(--surface); |
| border: 1px solid var(--border); |
| color: var(--text); |
| padding: 0.55rem 0.85rem 0.55rem 2.1rem; |
| border-radius: 8px; |
| font-size: 0.82rem; |
| font-family: inherit; |
| outline: none; |
| transition: border-color 0.15s; |
| } |
| .table-search input:focus { border-color: var(--accent); } |
| .table-search::before { |
| content: '\2315'; |
| position: absolute; |
| left: 0.7rem; |
| top: 50%; |
| transform: translateY(-50%); |
| color: var(--text-muted); |
| font-size: 1rem; |
| } |
| .table-meta { font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; } |
| .table-meta strong { color: var(--text); font-weight: 600; } |
|
|
| .data-table-wrap { |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-radius: 10px; |
| overflow: hidden; |
| } |
| .data-table-scroll { max-height: calc(100vh - 240px); overflow: auto; scrollbar-width: thin; } |
| .data-table { |
| width: 100%; |
| border-collapse: separate; |
| border-spacing: 0; |
| font-size: 0.78rem; |
| font-variant-numeric: tabular-nums; |
| } |
| .data-table thead th { |
| position: sticky; |
| top: 0; |
| background: #161616; |
| color: var(--text-dim); |
| text-align: left; |
| font-weight: 600; |
| font-size: 0.66rem; |
| letter-spacing: 0.06em; |
| text-transform: uppercase; |
| padding: 0.65rem 0.7rem; |
| border-bottom: 1px solid var(--border); |
| cursor: pointer; |
| user-select: none; |
| white-space: nowrap; |
| z-index: 1; |
| } |
| .data-table thead th:hover { color: var(--text); } |
| .data-table thead th.sorted { color: var(--accent); } |
| .data-table thead th .sort-arrow { display: inline-block; margin-left: 4px; opacity: 0.5; font-size: 0.65rem; } |
| .data-table thead th.sorted .sort-arrow { opacity: 1; } |
| .data-table thead th.num, .data-table tbody td.num { text-align: right; } |
| .data-table tbody td { |
| padding: 0.55rem 0.7rem; |
| border-bottom: 1px solid var(--border); |
| white-space: nowrap; |
| color: var(--text); |
| } |
| .data-table tbody tr { cursor: pointer; transition: background 0.1s; } |
| .data-table tbody tr:hover td { background: rgba(255,255,255,0.03); } |
| .data-table tbody tr.selected td { background: rgba(120, 180, 255, 0.07); } |
| .data-table .player-cell { display: flex; align-items: center; gap: 0.5rem; } |
| .data-table .player-photo { |
| width: 26px; height: 26px; border-radius: 50%; object-fit: cover; |
| background: var(--bg); flex-shrink: 0; |
| } |
| .data-table .player-name { |
| font-weight: 600; font-size: 0.82rem; color: var(--text); |
| max-width: 180px; overflow: hidden; text-overflow: ellipsis; |
| } |
| .data-table .player-sub { font-size: 0.66rem; color: var(--text-muted); } |
| .pos-pill { |
| display: inline-block; padding: 1px 7px; border-radius: 9px; |
| background: var(--bg); border: 1px solid var(--border); |
| color: var(--text-dim); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em; |
| } |
| .score-cell { display: flex; align-items: center; gap: 0.55rem; justify-content: flex-end; min-width: 100px; } |
| .score-cell .mini-bar { |
| width: 56px; height: 5px; background: var(--bg); |
| border-radius: 3px; overflow: hidden; flex-shrink: 0; |
| } |
| .score-cell .mini-bar > div { |
| height: 100%; |
| background: linear-gradient(90deg, #60a5fa, var(--accent)); |
| border-radius: 3px; |
| } |
| .score-cell .score-num { min-width: 38px; text-align: right; font-weight: 600; font-size: 0.82rem; } |
| .eu-dot { |
| display: inline-block; width: 6px; height: 6px; border-radius: 50%; |
| background: var(--accent); margin-right: 4px; vertical-align: middle; |
| } |
| .foot-pill { |
| font-size: 0.62rem; padding: 1px 5px; border-radius: 4px; |
| background: var(--bg); color: var(--text-dim); |
| text-transform: uppercase; letter-spacing: 0.04em; |
| } |
| .empty-state { padding: 3rem 1rem; text-align: center; color: var(--text-muted); font-size: 0.85rem; } |
|
|
| |
| .table-drawer { |
| position: fixed; top: 0; right: 0; |
| height: 100vh; width: min(440px, 92vw); |
| background: var(--bg); |
| border-left: 1px solid var(--border); |
| z-index: 50; |
| transform: translateX(100%); |
| transition: transform 0.25s ease-out; |
| box-shadow: -8px 0 24px rgba(0,0,0,0.35); |
| display: flex; flex-direction: column; |
| } |
| .table-drawer.open { transform: translateX(0); } |
| .table-drawer-header { |
| display: flex; align-items: center; justify-content: space-between; |
| padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--border); flex-shrink: 0; |
| } |
| .table-drawer-header h3 { margin: 0; font-size: 0.95rem; font-weight: 600; } |
| .table-drawer-close { |
| background: none; border: none; color: var(--text-dim); |
| font-size: 1.4rem; cursor: pointer; padding: 0 0.3rem; line-height: 1; |
| } |
| .table-drawer-close:hover { color: var(--text); } |
| .table-drawer-body { flex: 1; overflow-y: auto; padding: 1rem 1.1rem 2rem; } |
| .drawer-backdrop { |
| position: fixed; inset: 0; |
| background: rgba(0,0,0,0.4); |
| z-index: 49; opacity: 0; pointer-events: none; |
| transition: opacity 0.2s; |
| } |
| .drawer-backdrop.open { opacity: 1; pointer-events: auto; } |
| |
| .api-meta { |
| font-size: 0.7rem; |
| color: var(--text-muted); |
| letter-spacing: 0.04em; |
| text-transform: uppercase; |
| margin-left: auto; |
| padding-right: 1rem; |
| } |
| .season-chips, .position-chips { |
| display: flex; |
| gap: 0.3rem; |
| flex-wrap: wrap; |
| } |
| .position-chip { |
| font-size: 0.66rem; |
| padding: 4px 9px; |
| border-radius: 12px; |
| border: 1px solid var(--border); |
| background: transparent; |
| color: var(--text-dim); |
| cursor: pointer; |
| font-family: inherit; |
| font-weight: 600; |
| letter-spacing: 0.04em; |
| transition: all 0.12s; |
| } |
| .position-chip:hover { border-color: var(--accent); color: var(--text); } |
| .position-chip.active { |
| background: var(--accent-dim); |
| border-color: var(--accent); |
| color: var(--accent); |
| } |
| .season-chip { |
| font-size: 0.68rem; |
| padding: 4px 10px; |
| border-radius: 12px; |
| border: 1px solid var(--border); |
| background: transparent; |
| color: var(--text-dim); |
| cursor: pointer; |
| font-family: inherit; |
| font-variant-numeric: tabular-nums; |
| transition: all 0.12s; |
| } |
| .season-chip:hover { border-color: var(--accent); color: var(--text); } |
| .season-chip.active { |
| background: var(--accent-dim); |
| border-color: var(--accent); |
| color: var(--accent); |
| font-weight: 600; |
| } |
|
|
| |
| #loginModal { |
| position: fixed; |
| inset: 0; |
| z-index: 100; |
| display: none; |
| align-items: center; |
| justify-content: center; |
| } |
| #loginModal .login-backdrop { |
| position: absolute; |
| inset: 0; |
| background: rgba(0, 0, 0, 0.7); |
| backdrop-filter: blur(4px); |
| } |
| #loginModal .login-card { |
| position: relative; |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-radius: 12px; |
| padding: 2rem 1.8rem; |
| width: min(360px, 90vw); |
| display: flex; |
| flex-direction: column; |
| gap: 0.8rem; |
| box-shadow: 0 20px 60px rgba(0,0,0,0.5); |
| } |
| #loginModal h2 { |
| margin: 0; |
| font-size: 1.2rem; |
| font-weight: 600; |
| } |
| #loginModal .login-sub { |
| margin: 0; |
| font-size: 0.78rem; |
| color: var(--text-dim); |
| } |
| #loginModal input { |
| width: 100%; |
| background: var(--bg); |
| border: 1px solid var(--border); |
| color: var(--text); |
| padding: 9px 12px; |
| border-radius: 8px; |
| font-family: inherit; |
| font-size: 0.9rem; |
| outline: none; |
| } |
| #loginModal input:focus { border-color: var(--accent); } |
| #loginModal button { |
| background: var(--accent); |
| color: var(--bg); |
| border: none; |
| padding: 9px 12px; |
| border-radius: 8px; |
| font-family: inherit; |
| font-size: 0.85rem; |
| font-weight: 600; |
| cursor: pointer; |
| transition: opacity 0.12s; |
| } |
| #loginModal button:hover { opacity: 0.9; } |
| #loginModal .login-error { |
| font-size: 0.75rem; |
| color: #f87171; |
| min-height: 1em; |
| } |
|
|
| |
| .pond-open-btn { |
| background: var(--surface); |
| color: var(--text); |
| border: 1px solid var(--border); |
| border-radius: 6px; |
| padding: 6px 12px; |
| font-family: inherit; |
| font-size: 0.78rem; |
| cursor: pointer; |
| transition: border-color 0.12s, color 0.12s; |
| } |
| .pond-open-btn:hover { border-color: var(--accent); color: var(--accent); } |
|
|
| .pond-modal { |
| position: fixed; inset: 0; |
| display: none; |
| z-index: 1100; |
| } |
| .pond-modal.open { display: flex; align-items: center; justify-content: center; } |
| .pond-modal-backdrop { |
| position: absolute; inset: 0; |
| background: rgba(0,0,0,0.55); |
| } |
| .pond-modal-card { |
| position: relative; |
| background: var(--bg); |
| border: 1px solid var(--border); |
| border-radius: 10px; |
| width: min(560px, 92vw); |
| max-height: 88vh; |
| display: flex; flex-direction: column; |
| box-shadow: 0 12px 40px rgba(0,0,0,0.5); |
| } |
| .pond-modal-header { |
| display: flex; align-items: center; justify-content: space-between; |
| padding: 12px 16px; |
| border-bottom: 1px solid var(--border); |
| } |
| .pond-modal-header h3 { |
| margin: 0; font-size: 0.95rem; font-weight: 600; |
| } |
| .pond-modal-close { |
| background: none; border: none; color: var(--text-dim); |
| font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 4px; |
| } |
| .pond-modal-close:hover { color: var(--text); } |
| .pond-modal-body { |
| padding: 12px 16px; |
| overflow-y: auto; |
| flex: 1; |
| } |
| .pond-modal-footer { |
| display: flex; gap: 8px; justify-content: flex-end; |
| padding: 10px 16px; |
| border-top: 1px solid var(--border); |
| } |
| .pond-apply { |
| background: var(--accent); color: var(--bg); |
| border: none; border-radius: 6px; |
| padding: 8px 16px; font-family: inherit; font-size: 0.82rem; font-weight: 600; |
| cursor: pointer; transition: opacity 0.12s; |
| } |
| .pond-apply:hover { opacity: 0.9; } |
|
|
| |
| .score-docs { |
| margin: 0 12px 12px 12px; |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| background: var(--surface); |
| font-size: 0.78rem; |
| line-height: 1.5; |
| } |
| .score-docs > summary { |
| padding: 10px 14px; |
| cursor: pointer; |
| font-weight: 600; |
| color: var(--text); |
| list-style: none; |
| user-select: none; |
| } |
| .score-docs > summary::-webkit-details-marker { display: none; } |
| .score-docs > summary::before { |
| content: "▸ "; |
| display: inline-block; |
| margin-right: 6px; |
| transition: transform 0.15s; |
| } |
| .score-docs[open] > summary::before { content: "▾ "; } |
| .score-docs-body { |
| padding: 4px 18px 16px 18px; |
| color: var(--text-dim); |
| border-top: 1px solid var(--border); |
| } |
| .score-docs-body h3 { |
| color: var(--text); |
| font-size: 0.85rem; |
| margin: 14px 0 6px; |
| } |
| .score-docs-body code { |
| background: var(--bg); |
| border: 1px solid var(--border); |
| padding: 1px 5px; |
| border-radius: 4px; |
| font-size: 0.74rem; |
| } |
| .score-docs-body pre { |
| background: var(--bg); |
| border: 1px solid var(--border); |
| border-radius: 6px; |
| padding: 8px 12px; |
| overflow-x: auto; |
| font-size: 0.74rem; |
| } |
| .score-docs-body pre code { background: none; border: none; padding: 0; } |
| .score-docs-body table { |
| width: 100%; |
| border-collapse: collapse; |
| margin: 6px 0; |
| font-size: 0.74rem; |
| } |
| .score-docs-body th, .score-docs-body td { |
| padding: 5px 8px; |
| border: 1px solid var(--border); |
| text-align: left; |
| vertical-align: top; |
| } |
| .score-docs-body th { background: var(--bg); color: var(--text); font-weight: 600; } |
| .score-docs-body ul, .score-docs-body ol { margin: 4px 0 8px 18px; } |
| .score-docs-body p { margin: 4px 0 8px; } |
|
|
| .filter-checkbox { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| font-size: 0.78rem; |
| color: var(--text); |
| cursor: pointer; |
| user-select: none; |
| } |
| .filter-checkbox input[type="checkbox"] { |
| accent-color: var(--accent); |
| cursor: pointer; |
| } |
|
|
