:root{
  --bg:#0b0c1b;
  --panel:#12132a;
  --panel-2:#171936;
  --stroke:#24264a;
  --text:#e8e8f2;
  --muted:#a6a8c8;
  --accent:#7a3cff;
  --accent-2:#9b6bff;
  --success:#2bb673;
  --danger:#ff4d6d;
  --shadow:0 8px 20px rgba(0,0,0,.35);
  --radius:14px;
  --gap:16px;
  --pad:18px;
  --small:12px;
}
*{box-sizing:border-box}
html,body{height:100%}
body.fm{
  margin:0;background:radial-gradient(1200px 800px at -10% -10%, #121232 0%, #0b0c1b 60%),
  linear-gradient(180deg,#0b0c1b,#0b0c1b);
  color:var(--text); font:500 15px/1.5 "Inter",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
}

/* Top bar */
.fm-topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 20px;background:#0e0f22;border-bottom:1px solid var(--stroke);position:sticky;top:0;z-index:50
}
.fm-brand{display:flex;gap:12px;align-items:center}
.fm-topbar .logo{width:36px;height:36px;border-radius:50%;object-fit:cover}
.fm-topbar h1{font-size:18px;margin:0;color:#fff;letter-spacing:.2px}

/* Grid (areas let us reorder per breakpoint) */
.fm-grid{
  display:grid;
  grid-template-columns: clamp(340px, 24vw, 440px) minmax(0,1fr) clamp(340px, 26vw, 420px);
  grid-template-areas: "left center right";   /* desktop: left | center | right */
  gap:var(--gap); padding:var(--gap); max-width:1600px; margin:0 auto;
}

/* Bind columns to areas */
.fm-left   { grid-area: left; }
.fm-center { grid-area: center; }
.fm-right  { grid-area: right; }

/* Tablet: 2 cols -> center first, then left; right sits to the side */
@media (max-width:1200px){
  .fm-grid{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "center center"
      "left   right";
  }
  /* make sure right column is visible on tablet too */
  .fm-right { display:block; }
}

/* Mobile: single column -> center, then left, then right */
@media (max-width:900px){
  .fm-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "center"
      "right";
  }
}

/* Cards */
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--stroke); border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden;
}
.card-head, .card-foot{padding:var(--pad);border-bottom:1px solid var(--stroke)}
.card-foot{border-top:1px solid var(--stroke);border-bottom:0}
.card-head h2{margin:0;font-size:18px}
.card-body{padding:var(--pad)}
.smallpad{padding:10px}
.hero{position:relative}
.hero-grid{ display:grid;  gap:var(--gap); padding:var(--pad); }
@media (max-width:1100px){ .hero-grid{ grid-template-columns: 1fr; } }
.hero-pane{background:rgba(255,255,255,.02);border:1px solid var(--stroke);border-radius:12px;padding:var(--pad)}

/* Tabs */
.tabs{display:flex;gap:8px}
.tab{background:transparent;border:1px solid var(--stroke);color:var(--muted);padding:6px 10px;border-radius:10px;cursor:pointer}
.tab.active{border-color:var(--accent);color:#fff}

/* Form */
.form-row{display:flex;gap:var(--gap);flex-wrap:wrap}
.form-group{display:flex;flex-direction:column;gap:6px;min-width:180px}
.form-group.grow{flex:1}
label{color:var(--muted)}
input, select, textarea{
  background:#0f1030;border:1px solid var(--stroke);color:var(--text);
  border-radius:10px;padding:10px 12px;outline:none
}
input:focus, select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(122,60,255,.25)}
.inline-add{display:flex;gap:8px;align-items:center}

/* Buttons */
.btn{border:1px solid var(--stroke);background:#151740;color:#fff;padding:10px 14px;border-radius:12px;cursor:pointer}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:linear-gradient(180deg,var(--accent),var(--accent-2));border:none}
.btn.ghost{background:transparent}
.btn.danger{background:#2a0f1c;border-color:#5c2233;color:#ffb3c2}
.btn.small{padding:6px 10px;font-size:13px}
.btn .spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite;margin-left:8px}
@keyframes spin{to{transform:rotate(360deg)}}

/* Status */
.status{margin:8px 0 0;color:var(--muted)}

/* Lists / videos */
.video-grid{display:grid;grid-template-columns:1fr;gap:10px}
.video-item{display:flex;justify-content:space-between;align-items:center;padding:10px;border:1px solid var(--stroke);border-radius:10px;background:#0f1030}
.video-title{font-weight:600}
.play-button{border:1px solid var(--accent);background:transparent;color:#fff;padding:6px 10px;border-radius:10px;cursor:pointer}
.play-button:hover{background:rgba(122,60,255,.12)}

/* Iframe */
#googleSheets{width:100%;height:280px;border:1px solid var(--stroke);border-radius:10px;background:#0f1030}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;place-items:center;padding:20px;z-index:100}
.modal .modal-content{background:var(--panel);border:1px solid var(--stroke);border-radius:12px;padding:12px;max-width:960px;width:100%}
.modal video{width:100%;height:auto;background:#000;border-radius:8px}
.modal.show{display:grid}
.close-btn{float:right;border:1px solid var(--stroke);background:transparent;color:#fff;border-radius:8px;padding:6px 10px}

/* Search/filter */
.search-filter-container{display:flex;gap:10px;padding:10px}

/* Utility */
.fm-col{display:flex;flex-direction:column;gap:var(--gap)}

/* Simple lists used by fixtures / stats */
.list.fixtures{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.fixture{background:#0f1030;border:1px solid var(--stroke);border-radius:10px;padding:10px}
.fx-line{display:grid;grid-template-columns: 1fr 2fr auto;gap:10px;align-items:center}
.fx-date{color:var(--muted);font-size:13px}
.fx-team{font-weight:600}
.fx-score{font-weight:700}
.fx-result {
  margin-left: 6px;
  font-size: 14px;
  vertical-align: middle;
}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:900px){ .two-col{grid-template-columns:1fr} }
.three-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

@media (max-width: 1200px) {
  .three-col {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .three-col {
    grid-template-columns: 1fr;
  }
}

.sub{margin:0 0 8px 0;font-size:14px;color:var(--muted)}
.stat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.stat-list li{display:flex;justify-content:space-between;align-items:center;
  background:#0f1030;border:1px solid var(--stroke);border-radius:10px;padding:8px 10px}
.stat-list .name{font-weight:600}
.stat-list .val{font-weight:700}
.muted{color:var(--muted)}

/* ===== FM League Table ===== */
#tableContent table { width:100%; border-collapse: separate; border-spacing:0; }
#tableContent table thead th {
  text-align:left; font-weight:700; padding:10px 12px;
  background:linear-gradient(180deg, #171936, #131432);
  border-bottom:1px solid var(--stroke); position:sticky; top:0; z-index:1;
}
#tableContent table tbody { counter-reset: pos; }
#tableContent table tbody tr { counter-increment: pos; transition: background .15s ease; }
#tableContent table tbody tr:hover { background: rgba(122,60,255,.08); }

#tableContent table td, 
#tableContent table th { padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.05); }

/* Zebra striping like FM */
#tableContent table tbody tr:nth-child(odd){ background:#0f1030; }
#tableContent table tbody tr:nth-child(even){ background:#0e0f2a; }

/* First cell = team cell gets the position badge */
#tableContent table tbody tr td:first-child { 
  position: relative; padding-left:48px; font-weight:600;
}
/* --- League table sizing --- */
#tableContent table { width:100%; table-layout: fixed; border-collapse: separate; border-spacing:0; }
#tableContent table th, #tableContent table td { padding:10px 12px; }

/* Team column wider + ellipsis so long names don’t blow the layout */
#tableContent table th:first-child,
#tableContent table td:first-child { width: 52%; }
#tableContent table td.team-cell {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Keep last 6 numeric cols tight and centered (W D L F A P) */
#tableContent table td:nth-last-child(-n+6),
#tableContent table th:nth-last-child(-n+6) { text-align:center; width:3.4ch; }

/* Slightly smaller font inside table for density */
#tableContent table { font-size: 14px; line-height: 1.25; }

/* Position badge (auto number via CSS counter) */
#tableContent table tbody tr td:first-child::before {
  content: counter(pos);
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; line-height:28px; text-align:center;
  border-radius:9px; font-weight:800; font-size:13px;
  background:linear-gradient(180deg,#2a2c60,#1a1c44);
  border:1px solid #3a3c7a; color:#fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

/* Zone coloring like FM (we’ll add classes via JS) */
#tableContent .zone-champ  td:first-child::before { background:linear-gradient(180deg,var(--success),#1c9e61); border-color:#20a86b; }
#tableContent .zone-europe td:first-child::before { background:linear-gradient(180deg,#7a3cff,#5e2bd3); border-color:#7a3cff; }
#tableContent .zone-mid    td:first-child::before { background:linear-gradient(180deg,#2a2c60,#1a1c44); border-color:#3a3c7a; }
#tableContent .zone-drop   td:first-child::before { background:linear-gradient(180deg,#ff4d6d,#c63a52); border-color:#ff4d6d; }

/* Compact numbers columns */
#tableContent table td:nth-last-child(-n+6),
#tableContent table th:nth-last-child(-n+6) { text-align:center; width:3.4ch; }

/* Card title embellishment (emoji already in HTML from your feed is fine) */
#tableContent .table-title { display:flex; align-items:center; gap:8px; font-weight:800; }

/* ===== Downloader modern grid ===== */
.dl-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
}
.dl-row{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.dl-span-2{ grid-column: 1 / -1; }
.dl-label{ color:var(--muted); font-size:13px; }

/* Icon inputs */
.input-icon{ position:relative; }
.input-icon .icon{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  opacity:.75; pointer-events:none;
}
.input-icon > input,
.input-icon > select{
  padding-left:36px; /* room for icon */
}

/* Hints */
.hint{ margin:4px 0 0; color:var(--muted); font-size:12px; }

/* Inline add area */
.inline-add{ display:flex; gap:10px; align-items:center; }

/* Buttons nudges */
.btn-ico{ margin-right:8px; }
.form-actions{ display:flex; align-items:center; gap:12px; }
.form-actions .status{ margin:0 0 0 6px; }

/* Make inputs a touch taller and crisper */
input, select, textarea{
  background:#0f1030; border:1px solid var(--stroke); color:var(--text);
  border-radius:10px; padding:12px 12px; outline:none;
}
.input-icon > input, .input-icon > select{ padding-top:10px; padding-bottom:10px; }

/* Compact on smaller screens */
@media (max-width: 900px){
  .dl-grid{ grid-template-columns: 1fr; }
  .dl-span-2{ grid-column: auto; }
}

/* --- Downloader polish --- */
.dl-grid{ row-gap:18px; column-gap:22px; }
.dl-label{ font-weight:600; letter-spacing:.2px; }
.hint{ margin-top:6px; opacity:.9 }

/* Inputs: consistent height + subtle inner glow on focus */
input, select{
  height:44px;
  border-radius:12px;
}
.input-icon > input, .input-icon > select{
  padding-left:42px; height:44px;
}
input:focus, select:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(122,60,255,.18), inset 0 1px 0 rgba(255,255,255,.05);
}

/* Icon chip look */
.input-icon .icon{
  left:10px; width:24px; height:24px; line-height:24px; text-align:center;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px; font-size:13px;
}

/* Compact select arrow alignment on dark BG */
select{
  background-image:
    linear-gradient(45deg,transparent 50%, #aeb0d1 50%),
    linear-gradient(135deg,#aeb0d1 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) 17px,
    calc(100% - 13px) 17px,
    100% 0;
  background-size:5px 5px,5px 5px,2.5em 2.5em;
  background-repeat:no-repeat;
  appearance:none;
  padding-right:40px;
}

/* Action bar: primary as pill with glow, cancel as low-contrast */
.form-actions{ gap:14px; flex-wrap:wrap; }
.btn.primary{
  border-radius:14px;
  padding:12px 18px;
  box-shadow: 0 10px 24px rgba(122,60,255,.18);
  position:relative;
}
.btn.primary:after{
  content:""; position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, #fff 0, #cbb7ff 35%, #7a3cff 60%, transparent 70%);
  opacity:.85;
}
.btn.primary[disabled]{
  filter:saturate(.7); box-shadow:none; opacity:.8;
}
.btn.danger{
  background:#2a0f1c; border-color:#5c2233; color:#ffd7de;
  padding:10px 14px; border-radius:12px;
}

/* Better vertical rhythm between groups */
.dl-row{ gap:8px; }

/* Mobile: stack buttons full width */
@media (max-width: 700px){
  .form-actions .btn{ width:100%; justify-content:center; }
}
/* ===== Player Form Sparklines ===== */
.sparklist{ display:flex; flex-direction:column; gap:12px; }
.spark-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  border:1px solid var(--stroke);
  background:#0f1030;
  border-radius:12px;
  padding:10px 12px;
}
.p-left{ min-width:0; }
.p-name{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.p-pills{ display:flex; gap:8px; margin-top:6px; }

.pill{
  padding:4px 8px; font-size:12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
}
.pill-g{ border-color:#7a3cff40; background:#7a3cff14; }
.pill-a{ border-color:#2bb67340; background:#2bb67314; }
.pill-c{ border-color:#9b6bff40; background:#9b6bff14; }

.p-right{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: minmax(150px, 1fr);
  gap:12px;
  align-items:center;
}
.spark-wrap{ display:flex; flex-direction:column; gap:4px; align-items:stretch; }
.spark-title{ color:var(--muted); font-size:12px; }
.spark{ width:100%; height:auto; display:block; }

/* Mobile: stack charts */
@media (max-width: 900px){
  .spark-row{ grid-template-columns: 1fr; }
  .p-right{ grid-auto-flow:row; grid-auto-rows:auto; }
}
/* Player Form – compact two-column (Goals / Assists) */
.spark-row.compact{ padding:5px 12px; }
.p-right.two{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  align-items:center;
  min-width: 300px;
}
.spark-wrap .spark{ width:100%; height:auto; }
/* Player Form – name on top, charts below, roomier spacing */
.spark-row.compact{ padding:3px 14px; }
.sr-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sr-charts{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  align-items:center;
  margin-top:6px;
}
.spark-wrap .spark{ width:100%; height:auto; }

/* Make player name more prominent */
.p-name{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Trend badges next to titles */
.spark-title{ color:var(--muted); font-size:12px; display:flex; align-items:center; gap:8px; }
.trend{
  font-weight:700; font-size:11px; line-height:1;
  padding:4px 8px; border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
}
.trend-g.up   { border-color:#7a3cff55; background:#7a3cff20; color:#cbb7ff; }
.trend-g.down { border-color:#7a3cff30; background:#7a3cff14; color:#a48be6; }
.trend-g.flat { border-color:#7a3cff20; background:#7a3cff10; color:#bfbfe6; }

.trend-a.up   { border-color:#2bb67355; background:#2bb67320; color:#aef0cb; }
.trend-a.down { border-color:#2bb67330; background:#2bb67314; color:#9ddab8; }
.trend-a.flat { border-color:#2bb67320; background:#2bb67310; color:#bfe6d3; }
/* === Collapsible Cards (mobile only) === */

/* Ensure the header always aligns items horizontally */
.collapsible .card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Toggle button base */
.card-toggle {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 22px;
  cursor: pointer;
  transition: transform 0.25s ease, color 0.2s ease;
  margin-left: 12px;
  display: none; /* hidden by default on desktop */
}

/* Icon: "+" by default, "–" when expanded */
.card-toggle::before {
  content: "+";
  display: inline-block;
  font-weight: 700;
  line-height: 1;
}
.collapsible:not(.collapsed) .card-toggle::before {
  content: "–";
}

/* Collapse logic (mobile only) */
@media (max-width: 900px) {
  .collapsible .card-body {
    display: none;
  }
  .collapsible:not(.collapsed) .card-body {
    display: block;
  }

  /* Show toggle button only on mobile */
  .card-toggle {
    display: inline-block;
  }

  /* Make header clickable */
  .collapsible .card-head {
    cursor: pointer;
  }

  .collapsible .card-head:hover .card-toggle {
    color: var(--accent);
    transform: scale(1.1);
  }
}
.stat-list li:first-child {
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid var(--accent);
}

.summary-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-bottom: 14px;
}

.summary-badges .badge {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 6px 6px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text, #e2e2f0);
  transition: all 0.2s ease;
}

.summary-badges .badge:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.summary-badges .badge span {
  font-size: 15px;
  line-height: 1;
}

.summary-badges .badge small {
  opacity: 0.6;
  font-weight: 500;
  font-size: 0.8em;
}

.summary-badges .record {
  background: rgba(255, 215, 0, 0.1);
  border-color: rgba(255, 215, 0, 0.3);
  color: #ffd700;
}

@media (max-width: 600px) {
  .summary-badges {
    justify-content: space-around;
    gap: 6px;
  }
  .summary-badges .badge {
    font-size: 13px;
    padding: 5px 5px;
  }
}
/* === ✨ INTERACTIVE HOVER & ACTIVE TRANSITIONS === */

/* Smooth transitions for all key interactive components */
.card,
.btn,
.video-item,
.fixture,
.tab,
.stat-list li,
.summary-badges .badge {
  transition: all 0.25s ease;
}

/* Cards: subtle lift + glow */
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(122, 60, 255, 0.15);
  border-color: var(--accent);
}

/* Buttons */
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(122, 60, 255, 0.25);
}
.btn:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Primary button glow */
.btn.primary:hover {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  box-shadow: 0 0 20px rgba(122, 60, 255, 0.4);
}

/* Fixture hover (for clickable or focusable rows) */
.fixture:hover {
  background: rgba(122, 60, 255, 0.08);
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* Stat list rows */
.stat-list li:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* Tabs */
.tab:hover {
  border-color: var(--accent);
  color: #fff;
  background: rgba(122, 60, 255, 0.1);
}

/* Video items */
.video-item:hover {
  background: rgba(122, 60, 255, 0.05);
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* Summary badges (already animated slightly; make smoother) */
.summary-badges .badge:hover {
  background: rgba(122, 60, 255, 0.12);
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(122, 60, 255, 0.25);
  transform: translateY(-2px);
}

/* Add subtle active press feedback globally */

/* Put this near your modal styles */
.modal .modal-body {
  max-height: 70vh;
  overflow: auto;
  padding-right: 4px; /* small gutter for scrollbar */
}
.btn.ghost {
  background: transparent;
  border: 1px solid var(--stroke);
  color: var(--muted);
  transition: all 0.25s ease;
}

.btn.ghost:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 0 10px rgba(122,60,255,0.25);
}
/* --- Clickable Card --- */
.clickable-card {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.clickable-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 0 16px rgba(122,60,255,0.25);
}

.clickable-card:active {
  transform: translateY(0);
  box-shadow: 0 0 6px rgba(122,60,255,0.25);
}

.clickable-card:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent);
}
.clickunderline {
  text-decoration: underline;
}