/* ============================================================
   FPLMan redesign — token + component system
   Ported from the design handoff (styles.css) and adapted into a
   single responsive stylesheet for the live Thymeleaf screens.
   Loaded by the redesigned Dashboard / Squad / Fixtures / Team pages.
   ============================================================ */

:root {
  --bg:#f3f3f1;
  --surface:#ffffff;
  --surface-2:#fafafa;
  --surface-3:#f6f6f4;
  --border:#eae9e4;
  --border-2:#e2e1db;
  --border-strong:#d7d6cf;

  --text:#15171c;
  --text-2:#5c616a;
  --text-3:#9a9fa7;
  --text-4:#b9bcc2;

  /* accent — themeable; the four green vars are the single source-able theme */
  --green:#15a06a;
  --green-deep:#0e7d52;
  --green-tint:#e3f4ec;
  --green-tint-2:#cdedde;

  --orange:#df8a1c;
  --orange-tint:#fbecd0;
  --blue:#2f6fd0;
  --blue-tint:#e6effb;
  --red:#d6455a;
  --red-tint:#fae4e7;
  --purple:#7c4dd1;
  --purple-tint:#eee8fb;
  --amber:#f2a13c;

  /* fixture difficulty */
  --fdr1-bg:#bdeccb; --fdr1-fg:#0a6b3a;
  --fdr2-bg:#ddf3e4; --fdr2-fg:#147f4c;
  --fdr3-bg:#fbecc8; --fdr3-fg:#946312;
  --fdr4-bg:#fbdcc3; --fdr4-fg:#b1521b;
  --fdr5-bg:#f8ccd0; --fdr5-fg:#af2c3b;

  --radius:20px; --radius-md:14px; --radius-sm:10px; --radius-xs:8px;
  --shadow:0 1px 2px rgba(20,23,28,.045), 0 8px 24px -12px rgba(20,23,28,.10);
  --shadow-sm:0 1px 2px rgba(20,23,28,.05);
  --shadow-pop:0 12px 32px -10px rgba(20,23,28,.22);

  --sans:"Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gap:22px;
  --pad:22px;
}

/* accent palettes (Tweaks / settings can switch the data-accent attribute) */
body[data-accent="teal"]   { --green:#0d9488; --green-deep:#0f766e; --green-tint:#d5f0ec; --green-tint-2:#bfe7e1; }
body[data-accent="blue"]   { --green:#2f6fd0; --green-deep:#2456a8; --green-tint:#e6effb; --green-tint-2:#cfe1f7; }
body[data-accent="purple"] { --green:#7c4dd1; --green-deep:#5f37a8; --green-tint:#eee8fb; --green-tint-2:#e0d4f7; }

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-size:15px;
  line-height:1.45;
}
::selection{background:var(--green-tint-2);}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input{font-family:inherit;}
img{max-width:100%;}

/* density */
body[data-density="compact"]{ --gap:14px; --pad:16px; }

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.mono{font-family:var(--mono);font-feature-settings:"tnum" 1;}
.eyebrow{
  font-size:11.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--text-3);
}

/* ============ shell ============ */
.app{min-height:100vh;display:flex;flex-direction:column;}
.wrap{max-width:1360px;margin:0 auto;padding:0 28px;width:100%;}

/* ============ page head ============ */
.page{padding:26px 0 64px;flex:1;}
.synccard{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:13px 18px;box-shadow:var(--shadow-sm);
}
.sync-field{display:flex;align-items:center;gap:10px;}
.sync-field label{font-size:13px;font-weight:600;color:var(--text-2);white-space:nowrap;}
.sync-input{
  width:120px;border:1px solid var(--border-2);background:var(--surface-3);border-radius:9px;
  padding:8px 11px;font-size:14px;font-weight:600;font-family:var(--mono);color:var(--text);
  transition:border .15s,box-shadow .15s;
}
.sync-input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-tint);}

/* ============ canonical form controls (auth / admin / billing) ============ */
.form-label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:7px;}
.form-label .opt{font-weight:600;text-transform:none;letter-spacing:0;color:var(--text-4);}
.input{
  width:100%;min-height:44px;border:1px solid var(--border-2);background:var(--surface-3);border-radius:var(--radius-sm);
  padding:11px 13px;font-size:16px;color:var(--text);transition:border .15s,box-shadow .15s,background .15s;
}
.input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-tint);background:#fff;}
.input::placeholder{color:var(--text-3);}
.input--mono{font-family:var(--mono);font-weight:500;font-size:14px;min-height:42px;padding:10px 12px;}
.input--w-sm{width:100px;}
.input--w-md{width:160px;}
.input--w-lg{width:240px;}

/* ============ unified action buttons: .btn base + colour & size/width modifiers ============
   Compose a button from the base + one colour modifier + optional size/width:
     .btn .btn--fill .btn--sm     small filled (nav, admin form submits)
     .btn .btn--fill              medium filled (auth / billing, the default size)
     .btn .btn--fill .btn--lg     large filled (landing CTAs)
     .btn .btn--fill .btn--block  full-flex filled (squad action rows)
   Colour modifiers: --fill --outline --soft --ghost --admin --danger
   Size / width:     --sm --lg --block --full
*/
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  font-weight:700;font-size:14.5px;padding:11px 18px;border-radius:var(--radius-md);
  transition:filter .15s,background .15s,color .15s,border-color .15s,transform .04s;
}
/* colour variants */
.btn--fill{background:var(--green);color:#fff;box-shadow:0 3px 12px -3px rgba(21,160,106,.6);}
.btn--fill:hover{filter:brightness(1.05);}
.btn--fill:active{transform:translateY(1px);}
.btn--outline{background:var(--surface);color:var(--text-2);border:1px solid var(--border-2);}
.btn--outline:hover{background:var(--surface-3);color:var(--text);}
.btn--soft{background:var(--surface-3);border:1px solid var(--border-2);color:var(--text);font-weight:600;}
.btn--soft:hover{background:#eeeeea;}
.btn--ghost{background:transparent;color:var(--text-2);font-weight:600;}
.btn--ghost:hover{background:rgba(0,0,0,.04);color:var(--text);}
.btn--admin{background:var(--amber);color:#3a2400;}
.btn--danger{background:var(--red);color:#fff;box-shadow:0 2px 8px -3px rgba(214,69,90,.6);}
.btn--danger:hover{filter:brightness(1.04);}
.btn--danger:active{transform:translateY(1px);}
/* size & width variants */
.btn--sm{padding:8px 16px;font-size:13.5px;border-radius:9px;}
.btn--lg{padding:13px 22px;min-height:48px;font-size:15px;}
.btn--block{flex:1;}
.btn--full{width:100%;}
/* block buttons shrink on mobile (squad action rows) */
@media(max-width:760px){.btn--block{padding:12px;font-size:14px;border-radius:var(--radius-sm);}}

/* ============ centered single-card page (auth / billing / result) ============ */
.center-page{flex:1;display:flex;align-items:center;justify-content:center;padding:52px 20px 72px;}
@media(max-width:760px){.center-page{padding:30px 16px 44px;}}
.sync-help{font-size:12.5px;color:var(--text-3);line-height:1.4;flex:1;min-width:220px;}
.sync-help b{color:var(--text-2);font-weight:600;}
.sync-sep{width:1px;align-self:stretch;background:var(--border);margin:2px 0;}
.sync-status{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-3);white-space:nowrap;}
.dot-live{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-tint);}

.titlerow{display:flex;align-items:flex-end;justify-content:space-between;margin:26px 2px 18px;gap:16px;}
.titlerow h1{font-size:27px;font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.05;}
.titlerow .sub{font-size:13.5px;color:var(--text-3);margin-top:5px;}
.gwpill{
  display:inline-flex;align-items:center;gap:7px;background:var(--green-tint);color:var(--green-deep);
  font-weight:700;font-size:13px;padding:7px 13px;border-radius:999px;letter-spacing:.02em;
}
.gwpill .n{font-family:var(--mono);}

/* gameweek stepper (fixtures) */
.gwstepper{display:inline-flex;align-items:center;gap:4px;}
.gwstepper a,.gwstepper span.cur{
  display:inline-flex;align-items:center;justify-content:center;height:36px;border-radius:9px;
  font-weight:700;font-size:13.5px;color:var(--text-2);background:var(--surface-3);border:1px solid var(--border-2);
}
.gwstepper a{width:36px;transition:background .14s,border .14s;}
.gwstepper a:hover{background:#eeeeea;border-color:var(--border-strong);color:var(--text);}
.gwstepper a.disabled{opacity:.4;pointer-events:none;}
.gwstepper span.cur{padding:0 14px;color:var(--text);}
.gwstepper span.cur .n{font-family:var(--mono);}

/* ============ layout ============ */
.grid{display:grid;grid-template-columns:minmax(380px,460px) 1fr;gap:var(--gap);align-items:start;}

.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card-pad{padding:var(--pad);}

/* ============ pitch ============ */
.squad-head{display:flex;align-items:center;gap:12px;margin:2px 4px 14px;flex-wrap:wrap;}
.squad-head .lbl{font-size:12.5px;color:var(--text-3);font-weight:600;white-space:nowrap;}
.formation{font-size:26px;font-weight:800;letter-spacing:.04em;white-space:nowrap;}
.formation .d{color:var(--text-4);font-weight:600;margin:0 2px;}
.count{font-size:13px;font-family:var(--mono);color:var(--green-deep);background:var(--green-tint);
  padding:3px 9px;border-radius:999px;font-weight:700;white-space:nowrap;}

.pitch{
  position:relative;border-radius:var(--radius);overflow:hidden;
  padding:26px 14px 18px;
  display:flex;flex-direction:column;justify-content:space-between;gap:6px;
  min-height:560px;
  border:1px solid rgba(0,0,0,.05);
}
.pitch.style-refined{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.06)),
    repeating-linear-gradient(180deg, #43a877 0 56px, #3ea271 56px 112px);
}
.pitch.style-minimal{ background:#f3f5f3; border-color:var(--border-2); }
.pitch.style-classic{
  background:repeating-linear-gradient(180deg,#2fb866 0 50px,#28ad5d 50px 100px);
}
.pitch-lines{position:absolute;inset:0;pointer-events:none;}
.pitch.style-minimal .pitch-lines path,
.pitch.style-minimal .pitch-lines circle,
.pitch.style-minimal .pitch-lines rect,
.pitch.style-minimal .pitch-lines line{stroke:#cfd8d2 !important;}
.pitch-row{display:flex;justify-content:space-evenly;align-items:flex-start;position:relative;z-index:2;gap:4px;}

.player{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;width:88px;cursor:pointer;transition:transform .12s;}
.player:hover{transform:translateY(-3px);}
.player .kit{filter:drop-shadow(0 4px 6px rgba(0,0,0,.22));}
.nameplate{
  background:rgba(14,32,22,.92);color:#fff;border-radius:8px;padding:4px 9px;text-align:center;
  min-width:62px;box-shadow:0 3px 8px -2px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.pitch.style-minimal .nameplate{background:var(--text);}
.nameplate .nm{font-size:11.5px;font-weight:700;letter-spacing:.01em;line-height:1.1;white-space:nowrap;}
.nameplate .vs{font-size:9.5px;font-weight:500;color:rgba(255,255,255,.62);margin-top:1px;letter-spacing:.01em;white-space:nowrap;}
.cap-badge{
  position:absolute;top:-5px;right:18px;width:21px;height:21px;border-radius:50%;
  background:var(--text);color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center;
  border:2px solid #fff;z-index:5;box-shadow:0 2px 5px rgba(0,0,0,.3);
}
.cap-badge.vc{background:var(--purple);}

/* bench */
.bench-wrap{margin-top:18px;}
.bench-head{display:flex;align-items:center;justify-content:space-between;margin:0 4px 11px;}
.bench-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.bench-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:12px 10px 11px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  box-shadow:var(--shadow-sm);transition:border .15s,transform .12s;cursor:pointer;
}
.bench-card:hover{border-color:var(--border-strong);transform:translateY(-2px);}
.bench-xp{font-family:var(--mono);font-weight:700;font-size:13px;padding:3px 0;width:42px;border-radius:999px;
  background:var(--surface-3);color:var(--text-2);}
.bench-xp.hot{background:var(--green-tint);color:var(--green-deep);}
.bench-card .bnm{font-size:13px;font-weight:700;line-height:1.1;}
.bench-card .bpos{font-size:10px;font-weight:700;letter-spacing:.06em;}

.actions{display:flex;gap:12px;margin-top:18px;}

/* ============ jersey kit ============ */
.kit{display:block;}
.kitwrap{display:grid;place-items:center;}

/* ============ pills + tags ============ */
.pos{font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:7px;display:inline-block;line-height:1;}
.pos-GK{background:var(--orange-tint);color:#9a6312;}
.pos-DEF{background:var(--blue-tint);color:var(--blue);}
.pos-MID{background:var(--green-tint);color:var(--green-deep);}
.pos-FWD{background:var(--red-tint);color:#b73a4d;}

.tag{font-size:10px;font-weight:700;letter-spacing:.05em;padding:3px 7px;border-radius:6px;line-height:1;display:inline-flex;align-items:center;text-transform:uppercase;}
.tag-diff{background:var(--orange);color:#fff;}
.tag-gw{background:var(--blue);color:#fff;}
.tag-buy{background:var(--green-tint);color:var(--green-deep);}
.tag-sell{background:var(--red-tint);color:#b73a4d;}
.tag-hold{background:#eef0f2;color:#5c616a;}
.tag-cap{background:var(--purple-tint);color:var(--purple);}
.tag-pod{background:var(--purple-tint);color:var(--purple);}
.tag-model{background:var(--blue-tint);color:var(--blue);}
.tag-mixed{background:var(--orange-tint);color:#9a6312;}

/* fixture chips */
.fchip{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.02em;
  padding:5px 0;width:54px;text-align:center;border-radius:8px;display:inline-block;
}
.fchip.empty{background:transparent;color:var(--text-4);}
.fdr1{background:var(--fdr1-bg);color:var(--fdr1-fg);}
.fdr2{background:var(--fdr2-bg);color:var(--fdr2-fg);}
.fdr3{background:var(--fdr3-bg);color:var(--fdr3-fg);}
.fdr4{background:var(--fdr4-bg);color:var(--fdr4-fg);}
.fdr5{background:var(--fdr5-bg);color:var(--fdr5-fg);}

/* ============ tabs ============ */
.tabbar{display:flex;gap:4px;border-bottom:1px solid var(--border);padding:0 4px;margin-bottom:4px;overflow-x:auto;}
.tab{
  position:relative;padding:14px 14px;font-weight:700;font-size:14px;color:var(--text-3);
  white-space:nowrap;transition:color .15s;background:none;
}
.tab:hover{color:var(--text-2);}
.tab.active{color:var(--text);}
.tab.active::after{
  content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2.5px;border-radius:3px;background:var(--green);
}
.tab .badge{margin-left:6px;font-family:var(--mono);font-size:10.5px;font-weight:700;background:var(--surface-3);
  color:var(--text-3);padding:2px 6px;border-radius:999px;}

.panel{padding:20px 22px 22px;}
.panel-intro{font-size:14px;color:var(--text-2);margin:2px 2px 18px;line-height:1.5;max-width:62ch;}
.group-label{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);
  margin:20px 4px 9px;}
.group-label:first-child{margin-top:2px;}

/* fixtures table (squad panel) */
.fx-head{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,54px) 52px;gap:10px;align-items:center;
  padding:0 8px 10px;}
.fx-head .gw{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--text-3);text-align:center;font-family:var(--mono);}
.fx-head .gw.xp{color:var(--text-3);}
.fx-row{
  display:grid;grid-template-columns:minmax(0,1fr) repeat(3,54px) 52px;gap:10px;align-items:center;
  padding:9px 8px;border-radius:var(--radius-sm);transition:background .12s;min-width:0;
}
.fx-row>*{min-width:0;}
.fx-row:hover{background:var(--surface-3);}
.fx-row.benched{opacity:.62;}
.fx-player{display:flex;align-items:center;gap:11px;min-width:0;}
.fx-player .kitwrap{width:26px;display:grid;place-items:center;flex-shrink:0;}
.fx-name{font-size:14.5px;font-weight:700;white-space:nowrap;}
.fx-meta{display:flex;align-items:center;gap:8px;}
.fx-xp{font-family:var(--mono);font-weight:700;font-size:15px;text-align:right;}
.fx-xp.zero{color:var(--text-4);}
.fx-xp.pos{color:var(--green);}

/* players list */
.searchbar{position:relative;margin:2px 2px 14px;}
.searchbar input{
  width:100%;border:1px solid var(--border-2);background:var(--surface-3);border-radius:var(--radius-md);
  padding:14px 14px 14px 44px;font-size:15px;color:var(--text);transition:border .15s,box-shadow .15s;
}
.searchbar input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-tint);background:#fff;}
.searchbar input::placeholder{color:var(--text-3);}
.searchbar svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--text-3);}
.segrow{display:flex;gap:6px;margin:0 2px 12px;flex-wrap:wrap;}
.seg{padding:9px 18px;border-radius:10px;font-weight:600;font-size:13.5px;color:var(--text-2);
  background:var(--surface-3);border:1px solid var(--border-2);transition:all .14s;flex:1;min-width:64px;}
.seg:hover{border-color:var(--border-strong);}
.seg.active{background:var(--green);color:#fff;border-color:var(--green);box-shadow:0 2px 8px -3px rgba(21,160,106,.6);}
.filterrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 2px 16px;}
.filterrow .field{min-width:0;}
.field label{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px;}
.field input,.field select,.field .fakesel{
  width:100%;min-width:0;border:1px solid var(--border-2);background:var(--surface-3);border-radius:10px;
  padding:11px 13px;font-size:14px;font-weight:600;color:var(--text);
}
.field select,.field .fakesel{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%239a9fa7' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
}
.field input:focus,.field select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-tint);}

.prow{
  display:grid;grid-template-columns:46px 1fr auto;gap:13px;align-items:center;
  padding:11px 10px;border-radius:var(--radius-sm);transition:background .12s;cursor:pointer;min-width:0;
}
.prow:hover{background:var(--surface-3);}
.prow.owned{background:var(--green-tint);}
.prow.owned:hover{background:var(--green-tint-2);}
.prow .price{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--text-2);text-align:center;
  background:var(--surface-3);border:1px solid var(--border-2);border-radius:7px;padding:5px 0;}
.prow.owned .price{background:#fff;border-color:var(--green-tint-2);}
.pinfo{display:flex;align-items:center;gap:10px;min-width:0;}
.pinfo .nm{font-size:14.5px;font-weight:700;line-height:1.15;}
.pinfo .mt{font-size:12px;color:var(--text-3);line-height:1.2;}
.pnums{display:flex;align-items:center;gap:14px;}
.pnums .xp{font-family:var(--mono);font-weight:700;font-size:15px;color:var(--green);}
.pnums .sec{font-family:var(--mono);font-size:13px;color:var(--text-4);}

/* swap (projected) */
.swapcard{background:var(--surface-3);border:1px solid var(--border-2);border-radius:var(--radius-md);
  padding:12px;margin-bottom:12px;}
.swapline{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding:8px 4px;min-width:0;}
.swap-io{font-size:10.5px;font-weight:800;letter-spacing:.05em;padding:4px 0;width:34px;text-align:center;border-radius:7px;}
.swap-in{background:var(--green-tint);color:var(--green-deep);}
.swap-out{background:var(--red-tint);color:#b73a4d;}
.swap-mid{display:flex;align-items:center;gap:9px;min-width:0;}
.swap-mid>div{min-width:0;}
.swap-mid .nm{font-weight:700;font-size:14.5px;}
.swap-mid .mt{font-size:12px;color:var(--text-3);}
.swap-xp{font-family:var(--mono);font-weight:700;font-size:15px;}
.swap-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px dashed var(--border-2);
  margin-top:6px;padding-top:11px;}
.gain{font-family:var(--mono);font-weight:700;font-size:13px;color:var(--green-deep);background:var(--green-tint);
  padding:5px 11px;border-radius:999px;}
.swap-btn{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px;color:var(--green-deep);
  padding:7px 14px;border-radius:9px;transition:background .14s;white-space:nowrap;}
.swap-btn:hover{background:var(--green-tint);}
.cost{font-family:var(--mono);font-size:13px;color:var(--text-3);}

/* moves */
.move{border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:14px;overflow:hidden;box-shadow:var(--shadow-sm);}
.move-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--surface-3);
  border-bottom:1px solid var(--border);}
.move-head .t{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);}
.move-head .g{font-family:var(--mono);font-weight:700;font-size:14px;color:var(--green-deep);white-space:nowrap;}
.move-body{padding:6px 16px 12px;}

/* captain */
.caprow{display:grid;grid-template-columns:36px 1fr auto;gap:14px;align-items:center;
  border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 16px;margin-bottom:11px;
  box-shadow:var(--shadow-sm);transition:border .15s,transform .12s;min-width:0;}
.caprow:hover{border-color:var(--border-strong);transform:translateY(-1px);}
.caprow.top{border-color:var(--amber);background:linear-gradient(180deg,#fffaf0,#fffdf8);box-shadow:0 4px 16px -8px rgba(242,161,60,.5);}
.cap-rank{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);
  font-weight:700;font-size:14px;background:var(--surface-3);color:var(--text-2);}
.caprow.top .cap-rank{background:var(--amber);color:#3a2400;}
.cap-mid{display:flex;align-items:center;gap:10px;min-width:0;}
.cap-mid>div{min-width:0;}
.cap-mid .nm{font-weight:800;font-size:16px;}
.cap-mid .mt{font-size:12.5px;color:var(--text-3);}
.cap-xp{text-align:right;}
.cap-xp .big{font-family:var(--mono);font-weight:800;font-size:24px;color:var(--green);line-height:1;}
.cap-xp .u{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--text-3);}

/* podcast */
.podcard{border:1px solid var(--border);border-radius:var(--radius-md);padding:16px 18px;margin-bottom:13px;box-shadow:var(--shadow-sm);}
.pod-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;min-width:0;}
.pod-id{display:flex;align-items:center;gap:9px;min-width:0;}
.pod-id .dot{width:8px;height:8px;border-radius:50%;background:var(--green);}
.pod-id .nm{font-weight:800;font-size:15.5px;}
.pod-body{font-size:14px;color:var(--text-2);line-height:1.55;}
.pod-foot{display:flex;align-items:center;justify-content:space-between;margin-top:11px;}
.pod-src{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--text-3);}
.pod-count{font-size:11.5px;color:var(--text-4);font-family:var(--mono);}

/* diff */
.diffrow{display:grid;grid-template-columns:36px 1fr auto;gap:13px;align-items:center;padding:11px 10px;
  border-radius:var(--radius-sm);transition:background .12s;cursor:pointer;min-width:0;}
.diffrow:hover{background:var(--surface-3);}
.diff-mid{display:flex;align-items:center;gap:10px;min-width:0;}
.diff-mid>div{min-width:0;}
.diff-mid .nm{font-weight:700;font-size:14.5px;}
.diff-mid .mt{font-size:12px;color:var(--text-3);}
.diff-xp{font-family:var(--mono);font-weight:700;font-size:15px;color:var(--green);}

/* locked / pro gate */
.lockrow{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:12px;padding:13px;
  border:1px dashed var(--border-2);border-radius:var(--radius-md);background:var(--surface-3);
  color:var(--text-3);font-size:13px;font-weight:600;}
.lockrow svg{color:var(--text-3);}
.lockrow a{color:var(--green-deep);font-weight:700;}

/* empty-state copy */
.emptybox{padding:22px;text-align:center;color:var(--text-3);font-size:13.5px;line-height:1.5;
  border:1px dashed var(--border-2);border-radius:var(--radius-md);background:var(--surface-2);}
.emptybox b{display:block;color:var(--text-2);font-weight:700;font-size:14.5px;margin-bottom:3px;}

/* ============ alerts / flash messages ============ */
.alert{
  padding:12px 15px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:600;line-height:1.45;
  margin-bottom:16px;border:1px solid transparent;
}
.alert-success{background:var(--green-tint);color:var(--green-deep);border-color:var(--green-tint-2);}
.alert-error,.alert-danger{background:var(--red-tint);color:#b1283b;border-color:#f2cbd1;}
.alert-info{background:var(--blue-tint);color:var(--blue);border-color:#cfe1f7;}

/* footer */
.foot{display:flex;align-items:center;justify-content:space-between;color:var(--text-3);font-size:12.5px;
  margin-top:42px;padding:22px 4px 8px;border-top:1px solid var(--border);}
.foot a{color:var(--text-2);text-decoration:none;}
.foot__links{display:inline-flex;align-items:center;gap:16px;}
.foot__social{display:inline-flex;transition:color .15s ease;}
.foot__social:hover{color:var(--text);}

/* ============ premier league table (shared: dashboard + team) ============ */
/* Pairs with .card for the surface; per-screen files only handle grid placement. */
.pl-card{padding:20px 18px;}
.pl-title{font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text);
  margin:0 2px 14px;}
.pl-head{display:grid;grid-template-columns:18px 1fr 26px auto 30px;gap:9px;align-items:center;
  padding:0 4px 9px;border-bottom:1px solid var(--border);}
.pl-head span{font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--text-3);white-space:nowrap;}
.pl-head .c{text-align:center;}
.pl-head .r{text-align:right;}
.pl-row{display:grid;grid-template-columns:18px 1fr 26px auto 30px;gap:9px;align-items:center;
  padding:8px 4px;border-radius:8px;transition:background .12s;color:inherit;}
.pl-row:hover{background:var(--surface-3);}
.pl-row.current-team{background:var(--green-tint);}
.pl-rank{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--text-4);text-align:center;}
.pl-rank.cl{color:var(--blue);}
.pl-rank.el{color:var(--orange);}
.pl-rank.rel{color:var(--red);}
.pl-team{font-size:13.5px;font-weight:800;letter-spacing:.02em;}
.pl-p{font-family:var(--mono);font-size:12.5px;color:var(--text-3);text-align:center;}
.pl-rec{font-family:var(--mono);font-size:12.5px;color:var(--text-2);text-align:right;letter-spacing:.01em;white-space:nowrap;}
.pl-pts{font-family:var(--mono);font-size:14px;font-weight:800;text-align:right;}

/* ============ responsive ============ */
@media(max-width:1080px){
  .grid{grid-template-columns:1fr;}
}

@media(max-width:767px){
  body{font-size:14px;}
  .wrap{padding:0 14px;}
  .page{padding:16px 0 24px;}

  .titlerow{margin:14px 2px 14px;align-items:center;}
  .titlerow h1{font-size:22px;}
  .pos{font-size:9.5px;padding:2px 6px;}

  .pitch{min-height:392px;padding:18px 4px 12px;border-radius:var(--radius-md);}
  .pitch-row{gap:1px;}
  .player{gap:4px;}
  .player .kit{width:34px;height:32px;}
  .nameplate{padding:3px 6px;border-radius:6px;}
  .nameplate .nm{font-size:9.5px;}
  .nameplate .vs{display:none;}
  .cap-badge{width:17px;height:17px;font-size:9px;right:10px;top:-3px;}

  .foot{flex-direction:column;gap:6px;text-align:center;margin-top:24px;}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
}

/* ── Player hover card (desktop only) ──────────────────────────────────────── */
@media (hover: hover) {
  #player-hover-card-container {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    display: none;
    width: 290px;
  }

  #player-hover-card-container.phc-visible {
    display: block;
    pointer-events: auto;
  }

  .phc-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    overflow: hidden;
    font-size: 13px;
  }

  .phc-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--border);
  }

  .phc-status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
  .phc-status-available { background: var(--green); }
  .phc-status-doubtful  { background: var(--amber); }
  .phc-status-injured   { background: var(--red); }

  .phc-pos-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    color: #fff;
  }

  .phc-pos-gk  { background: #f59e0b; }
  .phc-pos-def { background: #3b82f6; }
  .phc-pos-mid { background: #10b981; }
  .phc-pos-fwd { background: #ef4444; }

  .phc-name { font-size: 14px; color: var(--text); }

  .phc-team {
    font-size: 12px;
    color: var(--text-2);
    margin-left: auto;
    white-space: nowrap;
  }

  .phc-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    border-bottom: 1px solid var(--border);
  }

  .phc-stat {
    padding: 12px 0;
    text-align: center;
    border-right: 1px solid var(--border);
  }

  .phc-stat:last-child { border-right: none; }

  .phc-stat-value {
    font-weight: 700;
    font-size: 16px;
    color: var(--text);
    line-height: 1.2;
  }

  .phc-stat-label {
    font-size: 10px;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-top: 3px;
  }

  .phc-section-label {
    font-size: 11px;
    font-weight: 600;
    color: #3f3f46;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 8px;
  }

  .phc-form {
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--border);
  }

  .phc-bars {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 56px;
  }

  .phc-bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1;
  }

  .phc-bar-pts { font-size: 10px; font-weight: 700; color: var(--text); }

  .phc-bar {
    width: 100%;
    border-radius: 3px 3px 0 0;
    min-height: 3px;
  }

  .phc-bar-gw { font-size: 10px; color: var(--text-2); }

  .phc-mentions {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
  }

  .phc-mention-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
  }

  .phc-mention-row:last-child { margin-bottom: 0; }

  .phc-rec-badge {
    font-size: 9px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .phc-rec-buy  { background: var(--green); }
  .phc-rec-hold { background: var(--amber); }
  .phc-rec-sell { background: var(--red); }

  .phc-mention-source {
    font-size: 12px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .phc-gate {
    padding: 16px 14px;
    position: relative;
    border-bottom: 1px solid var(--border);
    min-height: 64px;
  }

  .phc-gate-blur {
    filter: blur(4px);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .phc-gate-placeholder {
    height: 12px;
    background: var(--surface-3);
    border-radius: 4px;
    width: 100%;
  }

  .phc-gate-placeholder--short { width: 70%; }

  .phc-gate-cta {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #09090b;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 5px 14px;
    border-radius: 20px;
    text-decoration: none;
    white-space: nowrap;
  }

  .phc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--surface-3);
  }

  .phc-footer-label { font-size: 12px; color: var(--text-2); font-weight: 500; }

  .phc-footer-pts {
    font-weight: 700;
    color: var(--green);
    font-size: 15px;
  }
}