/* ============================================================
   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%;}

/* top nav */
.nav{
  position:sticky;top:0;z-index:40;
  background:rgba(247,247,245,.82);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex;align-items:center;gap:18px;height:66px;}
.brand{display:flex;align-items:center;gap:10px;margin-right:6px;}
.brand-logo{height:34px;width:auto;display:block;flex-shrink:0;}
.beta{
  font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--green-deep);
  background:var(--green-tint);border-radius:6px;padding:3px 7px;text-transform:uppercase;
}
.nav-links{display:flex;align-items:center;gap:2px;margin:0 auto;}
.nav-link{
  padding:8px 15px;border-radius:9px;font-weight:600;font-size:14.5px;color:var(--text-2);
  transition:background .15s,color .15s;white-space:nowrap;
}
.nav-link:hover{background:rgba(0,0,0,.04);color:var(--text);}
.nav-link.active{background:var(--text);color:#fff;}
.nav-right{display:flex;align-items:center;gap:8px;}
.nav-form{margin:0;}
.nav-trial{
  display:inline-flex;align-items:center;gap:7px;background:var(--orange-tint);color:#9a6312;
  font-weight:600;font-size:12.5px;padding:6px 7px 6px 12px;border-radius:999px;white-space:nowrap;
}
.nav-trial .cta{font-size:11px;font-weight:700;color:#fff;background:var(--orange);padding:2px 9px;border-radius:999px;}

/* ============ 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;
}
.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;}
.field label{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px;}
.field select,.field .fakesel{
  width:100%;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);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 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;
}
.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 (AI) */
.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;}
.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 .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;}
.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 .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;}
.pod-id{display:flex;align-items:center;gap:9px;}
.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;}
.diffrow:hover{background:var(--surface-3);}
.diff-mid{display:flex;align-items:center;gap:10px;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;}

/* ============ 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;}

/* ============ mobile bottom tab bar ============ */
.bottomnav{display:none;}

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

@media(max-width:760px){
  body{font-size:14px;padding-bottom:74px;}
  .wrap{padding:0 14px;}
  .nav-inner{height:56px;gap:10px;}
  .nav-links{display:none;}            /* replaced by bottom tab bar */
  .nav-right{margin-left:auto;}
  .page{padding:16px 0 24px;}

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

  .synccard{padding:11px 13px;gap:11px;}
  .sync-help,.sync-sep{display:none;}
  .sync-input{width:100px;}

  .pitch{min-height:392px;padding:18px 4px 12px;border-radius:var(--radius-md);}
  .pitch-row{gap:1px;}
  .player{width:62px;gap:4px;}
  .player .kit{width:34px;height:32px;}
  .nameplate{min-width:44px;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;}

  .bench-grid{gap:7px;}
  .bench-card{padding:9px 4px 8px;gap:6px;border-radius:var(--radius-sm);}
  .bench-card .bnm{font-size:11.5px;}
  .bench-xp{font-size:11.5px;width:38px;}
  .actions{gap:8px;margin-top:14px;}

  .tab{padding:12px 11px;font-size:13.5px;}
  .panel{padding:14px 13px 16px;}
  .panel-intro{font-size:13px;margin-bottom:14px;}

  .fx-head,.fx-row{grid-template-columns:minmax(0,1fr) repeat(3,42px) 38px;gap:6px;padding:8px 4px;}
  .fchip{width:42px;font-size:9.5px;padding:4px 0;}
  .fx-name{font-size:13px;}
  .fx-player{gap:7px;}
  .fx-xp{font-size:13.5px;}
  .pos{font-size:9.5px;padding:2px 6px;}

  .prow{grid-template-columns:42px 1fr auto;gap:9px;padding:9px 4px;}
  .pinfo .nm{font-size:13.5px;}
  .pnums{gap:9px;}
  .filterrow{gap:9px;}
  .seg{padding:8px 0;font-size:13px;}

  .swapline{grid-template-columns:32px 1fr auto;gap:9px;}
  .swap-mid .nm{font-size:13.5px;}
  .caprow{grid-template-columns:30px 1fr auto;gap:10px;padding:12px 13px;}
  .cap-mid .nm{font-size:14.5px;}
  .cap-xp .big{font-size:21px;}
  .diffrow{grid-template-columns:34px 1fr auto;gap:9px;}
  .pod-body{font-size:13px;}

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

  /* bottom tab bar */
  .bottomnav{
    display:flex;align-items:stretch;
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:saturate(1.5) blur(18px);backdrop-filter:saturate(1.5) blur(18px);
    border-top:1px solid var(--border);
    padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  }
  .bn-item{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
    color:var(--text-4);padding:4px 0 2px;transition:color .14s;
  }
  .bn-item .ico{display:grid;place-items:center;height:24px;}
  .bn-item .lbl{font-size:10.5px;font-weight:700;letter-spacing:.01em;}
  .bn-item.active{color:var(--green-deep);}
}

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