/* Football Stats Engine — frontend styles v2.1 */
:root {
  --fbs-ink:       #0f1117;
  --fbs-ink-2:     #2d3142;
  --fbs-ink-3:     #5c6070;
  --fbs-ink-4:     #9499a8;
  --fbs-rule:      #e4e6ec;
  --fbs-bg:        #ffffff;
  --fbs-bg-2:      #f7f8fc;
  --fbs-bg-3:      #eef0f7;
  --fbs-accent:    #1a56db;
  --fbs-accent-bg: #eef3fd;
  --fbs-win:       #16a34a; --fbs-win-bg:  #dcfce7;
  --fbs-draw:      #b45309; --fbs-draw-bg: #fef3c7;
  --fbs-loss:      #dc2626; --fbs-loss-bg: #fee2e2;
  --fbs-r:         6px;
  --fbs-rl:        10px;
  --fbs-sh:        0 1px 3px rgba(15,17,23,.08);
}

.fbs-shortcode-wrap { margin-bottom: 32px; }

/* Controls */
.fbs-controls { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; padding:12px 0 14px; }
.fbs-ctrl-group { display:flex; flex-direction:column; gap:4px; }
.fbs-ctrl-label { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--fbs-ink-4); }
.fbs-ctrl-league { margin-left:auto; }

.fbs-toggle-group { display:flex; gap:2px; background:var(--fbs-bg-3); border-radius:999px; padding:3px; }
.fbs-toggle-btn { background:none; border:none; padding:4px 12px; border-radius:999px; font-size:12px; font-weight:600; color:var(--fbs-ink-3); cursor:pointer; transition:background .15s,color .15s; font-family:inherit; }
.fbs-toggle-btn.active, .fbs-toggle-btn[aria-pressed="true"] { background:var(--fbs-bg); color:var(--fbs-ink); box-shadow:0 1px 3px rgba(0,0,0,.1); }

.fbs-dir-switch { display:flex; border:1px solid var(--fbs-rule); border-radius:var(--fbs-r); overflow:hidden; }
.fbs-dir-btn, .fbs-btts-btn { background:var(--fbs-bg); border:none; border-right:1px solid var(--fbs-rule); padding:5px 14px; font-size:12px; font-weight:600; color:var(--fbs-ink-3); cursor:pointer; transition:background .15s,color .15s; font-family:inherit; }
.fbs-dir-btn:last-child, .fbs-btts-btn:last-child { border-right:none; }
.fbs-dir-btn.active, .fbs-btts-btn.active { background:var(--fbs-accent); color:#fff; }

.fbs-league-select { font-size:13px; padding:5px 10px; border:1px solid var(--fbs-rule); border-radius:var(--fbs-r); background:var(--fbs-bg); color:var(--fbs-ink); font-family:inherit; cursor:pointer; }

/* Table */
.fbs-table-wrap { background:var(--fbs-bg); border:1px solid var(--fbs-rule); border-radius:var(--fbs-rl); overflow:hidden; overflow-x:auto; box-shadow:var(--fbs-sh); -webkit-overflow-scrolling:touch; }
.fbs-table { width:100%; border-collapse:collapse; font-size:14px; min-width:300px; }
.fbs-table thead tr { background:var(--fbs-ink); }
.fbs-table thead th { padding:10px 14px; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#fff; text-align:left; white-space:nowrap; }
.fbs-table tbody tr { border-bottom:1px solid var(--fbs-rule); transition:background .1s; }
.fbs-table tbody tr:last-child { border-bottom:none; }
.fbs-table tbody tr:nth-child(even) { background:var(--fbs-bg-2); }
.fbs-table tbody tr:hover { background:var(--fbs-accent-bg); }
.fbs-table tbody td { padding:9px 14px; color:var(--fbs-ink-2); vertical-align:middle; }

.fbs-col-rank { width:32px; text-align:center; font-size:12px; color:var(--fbs-ink-4) !important; font-family:monospace; }
.fbs-col-num { text-align:right !important; }
.fbs-col-bar { min-width:90px; }
.fbs-col-form { min-width:70px; }

.fbs-mono { font-family:monospace; font-size:13px; }
.fbs-bold { font-weight:600; color:var(--fbs-ink) !important; }
.fbs-muted { color:var(--fbs-ink-4) !important; font-size:13px; }
.fbs-pos { color:var(--fbs-win) !important; }
.fbs-neg { color:var(--fbs-loss) !important; }

.fbs-team-cell { display:flex; align-items:center; gap:8px; }
.fbs-crest { width:20px; height:20px; object-fit:contain; flex-shrink:0; }
.fbs-crest-ph { width:20px; height:20px; border-radius:50%; background:var(--fbs-bg-3); border:1px solid var(--fbs-rule); display:inline-flex; align-items:center; justify-content:center; font-size:8px; font-weight:700; color:var(--fbs-ink-4); flex-shrink:0; }
.fbs-team-name { font-weight:600; color:var(--fbs-ink); font-size:14px; }

.fbs-pct { display:inline-flex; align-items:center; justify-content:center; min-width:48px; padding:2px 7px; border-radius:999px; font-family:monospace; font-size:12px; font-weight:700; background:var(--fbs-bg-3); color:var(--fbs-ink-2); }
.fbs-pct-h { background:var(--fbs-win-bg);  color:var(--fbs-win);  }
.fbs-pct-m { background:var(--fbs-draw-bg); color:var(--fbs-draw); }
.fbs-pct-l { background:var(--fbs-loss-bg); color:var(--fbs-loss); }

.fbs-bar { height:5px; background:var(--fbs-rule); border-radius:999px; overflow:hidden; }
.fbs-bar-fill { height:100%; border-radius:999px; background:var(--fbs-accent); transition:width .45s cubic-bezier(.4,0,.2,1); }
.fbs-bar-h { background:var(--fbs-win); }
.fbs-bar-m { background:var(--fbs-draw); }
.fbs-bar-l { background:var(--fbs-loss); }

.fbs-streak { display:inline-flex; align-items:center; gap:5px; font-family:monospace; font-size:13px; font-weight:700; color:var(--fbs-ink); white-space:nowrap; }
.fbs-streak-dot { width:7px; height:7px; border-radius:50%; background:var(--fbs-accent); flex-shrink:0; }
.fbs-streak-hot .fbs-streak-dot { background:var(--fbs-win); }

.fbs-comp-badge { font-size:11px; font-weight:700; background:var(--fbs-bg-3); color:var(--fbs-ink-3); padding:2px 7px; border-radius:4px; }

.fbs-form-strip { display:flex; gap:2px; }
.fbs-form-tag { display:inline-block; width:18px; height:18px; border-radius:3px; font-size:10px; font-weight:700; line-height:18px; text-align:center; color:#fff; }
.fbs-form-W { background:var(--fbs-win); }
.fbs-form-D { background:var(--fbs-draw); }
.fbs-form-L { background:var(--fbs-loss); }

.fbs-no-data { text-align:center; padding:40px 24px; color:var(--fbs-ink-4); font-size:14px; }
.fbs-loading { opacity:.4; pointer-events:none; transition:opacity .2s; }
.fbs-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

.fbs-pagination { display:flex; align-items:center; justify-content:center; gap:16px; padding:16px 0 8px; flex-wrap:wrap; }
.fbs-page-btn { background:var(--fbs-bg); border:1px solid var(--fbs-rule); border-radius:var(--fbs-r); padding:7px 16px; font-size:13px; font-weight:600; color:var(--fbs-accent); cursor:pointer; transition:background .15s; font-family:inherit; }
.fbs-page-btn:hover { background:var(--fbs-accent-bg); }
.fbs-page-info { font-size:13px; color:var(--fbs-ink-4); }

/* Mobile */
@media (max-width: 640px) {
  .fbs-col-bar, .fbs-col-form, .fbs-hide-mobile { display:none; }
  .fbs-ctrl-league { margin-left:0; }
  .fbs-controls { gap:8px; }
  .fbs-toggle-btn { padding:4px 8px; font-size:11px; }
  .fbs-ctrl-label { font-size:9px; }
  .fbs-league-select { font-size:12px; padding:4px 8px; }
  .fbs-dir-btn, .fbs-btts-btn { padding:4px 10px; font-size:11px; }
  .fbs-table { font-size:13px; }
  .fbs-table thead th { padding:8px 10px; font-size:10px; }
  .fbs-table tbody td { padding:8px 10px; }
  .fbs-team-name { font-size:13px; }
  .fbs-crest { width:17px; height:17px; }
  .fbs-streak { font-size:12px; }
}

@media (max-width: 400px) {
  .fbs-table { font-size:12px; }
  .fbs-team-name { font-size:12px; }
  .fbs-toggle-btn { padding:3px 6px; font-size:10px; }
}