/* 12 Nov, Joshua: "a few variations of the Coach app… a bit more pro-looking, but not black… I like the white look and the colour… a different font… different icons".
   Coach mode only (html.cmode), picked with ?cs=a|b|c (?cs=0 = the current look). A Pro · B Matchday · C Clubhouse. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@500;600;700;800&family=Barlow+Condensed:wght@600;700;800&family=Manrope:wght@500;600;700;800&display=swap');
/* all three: tab labels, flat tab bar */
html.cmode[data-cs] #app .tabs button[data-tab],html.cmode[data-cs] #app .tabs button[data-act=more]{flex-direction:column!important;gap:1px!important}
html.cmode[data-cs] #app .tabs button .tl{display:block!important;font-size:11px!important;font-weight:700!important;color:#8A8A96!important}
html.cmode[data-cs] #app .tabs button.on .tl{color:#1D1D27!important}
html.cmode[data-cs] #app .tabs button .ti{background:none!important;box-shadow:none!important;border:0!important}
html.cmode[data-cs] #app .tabs .t-add .ti{width:54px!important;height:54px!important;margin-top:-14px;box-shadow:0 6px 16px rgba(238,127,0,.35)!important;background:#EE7F00!important}
html.cmode[data-cs] #app .tabs .tlogo{width:28px!important;height:28px!important}

/* ---------- A · Pro: Plus Jakarta Sans, thin line icons, crisp 1px edges, orange accent ---------- */
html.cmode[data-cs=a] body *{font-family:'Plus Jakarta Sans',system-ui,sans-serif!important}
html.cmode[data-cs=a] #app h1{font-size:27px!important;font-weight:800!important;letter-spacing:-.025em}
html.cmode[data-cs=a] #app .tabs{border-top:1px solid #EDEDF1!important;box-shadow:none!important}
html.cmode[data-cs=a] #app .tabs button[data-tab=team] .ti img:not(.tlogo){content:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%238A8A96%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%203.5%204%205.5%202.5%2010l3%201.2V20.5h13V11.2l3-1.2L20%205.5l-4-2c-.6%201.5-2.1%202.4-4%202.4S8.6%205%208%203.5z%22/%3E%3C/svg%3E");width:26px!important;height:26px!important}
html.cmode[data-cs=a] #app .tabs button[data-tab=team].on .ti img:not(.tlogo){content:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23EE7F00%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%203.5%204%205.5%202.5%2010l3%201.2V20.5h13V11.2l3-1.2L20%205.5l-4-2c-.6%201.5-2.1%202.4-4%202.4S8.6%205%208%203.5z%22/%3E%3C/svg%3E")}
html.cmode[data-cs=a] #app .tabs button[data-tab=cal] .ti img:not(.tlogo){content:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%238A8A96%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%225%22%20width%3D%2217%22%20height%3D%2215.5%22%20rx%3D%223%22/%3E%3Cpath%20d%3D%22M3.5%2010h17M8%203v4M16%203v4%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2215%22%20r%3D%221.2%22%20fill%3D%22%238A8A96%22%20stroke%3D%22none%22/%3E%3C/svg%3E");width:26px!important;height:26px!important}
html.cmode[data-cs=a] #app .tabs button[data-tab=cal].on .ti img:not(.tlogo){content:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23EE7F00%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%225%22%20width%3D%2217%22%20height%3D%2215.5%22%20rx%3D%223%22/%3E%3Cpath%20d%3D%22M3.5%2010h17M8%203v4M16%203v4%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2215%22%20r%3D%221.2%22%20fill%3D%22%23EE7F00%22%20stroke%3D%22none%22/%3E%3C/svg%3E")}
html.cmode[data-cs=a] #app .tabs button[data-tab=diary] .ti img:not(.tlogo){content:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%238A8A96%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%224.5%22%20width%3D%2214%22%20height%3D%2217%22%20rx%3D%222.5%22/%3E%3Cpath%20d%3D%22M9%204.5V3h6v1.5M12%209v8M8.5%2013h7%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213%22%20r%3D%222%22/%3E%3C/svg%3E");width:26px!important;height:26px!important}
html.cmode[data-cs=a] #app .tabs button[data-tab=diary].on .ti img:not(.tlogo){content:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23EE7F00%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%224.5%22%20width%3D%2214%22%20height%3D%2217%22%20rx%3D%222.5%22/%3E%3Cpath%20d%3D%22M9%204.5V3h6v1.5M12%209v8M8.5%2013h7%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213%22%20r%3D%222%22/%3E%3C/svg%3E")}
html.cmode[data-cs=a] .rl-b,html.cmode[data-cs=a] .hf-top .bl-b{border-width:1px!important;border-color:#E6E6EC!important}
html.cmode[data-cs=a] .rl-b b{font-weight:700!important;font-size:15px!important}
html.cmode[data-cs=a] .td-hero{border-radius:20px}
html.cmode[data-cs=a] .td-hero h2,html.cmode[data-cs=a] .cl-nxh{font-weight:800!important;letter-spacing:-.03em}
html.cmode[data-cs=a] .td-hb,html.cmode[data-cs=a] .tm-new{border-radius:12px!important;box-shadow:none!important;font-weight:700!important}
html.cmode[data-cs=a] .tm-av button,html.cmode[data-cs=a] .td-cc button,html.cmode[data-cs=a] .tm-go a,html.cmode[data-cs=a] .tm-go button{border-radius:12px!important;box-shadow:none!important;border-width:1px!important}
html.cmode[data-cs=a] .fd-p b,html.cmode[data-cs=a] .fd-p h3{letter-spacing:-.01em}
html.cmode[data-cs=a] .tm-fl,html.cmode[data-cs=a] .cl-mo,html.cmode[data-cs=a] .cm-gh{font-weight:700!important;letter-spacing:.04em}
html.cmode[data-cs=a] .td-mini i{width:44px;height:44px;border-radius:14px;background:#fff!important;border:1px solid #E6E6EC;color:#EE7F00}
html.cmode[data-cs=a] .td-mini i.u{color:#2F6BFF}html.cmode[data-cs=a] .td-mini i.v{color:#7B3FE4}

/* ---------- B · Matchday: Barlow Condensed headings in capitals + Inter, flat two-tone icons, kit blue ---------- */
html.cmode[data-cs=b] body *{font-family:Inter,system-ui,sans-serif!important}
html.cmode[data-cs=b] #app h1,html.cmode[data-cs=b] .td-hero h2,html.cmode[data-cs=b] .cl-nxh,html.cmode[data-cs=b] .tm-fx>b,html.cmode[data-cs=b] .tm-pd b,html.cmode[data-cs=b] .cm-add h3,html.cmode[data-cs=b] .bl-sh h3,html.cmode[data-cs=b] .td-bar b,html.cmode[data-cs=b] .cd-tiles b,html.cmode[data-cs=b] .td-hk,html.cmode[data-cs=b] .cl-nxt i,html.cmode[data-cs=b] .tm-fl,html.cmode[data-cs=b] .cl-mo,html.cmode[data-cs=b] .cm-gh,html.cmode[data-cs=b] .cl-d b,html.cmode[data-cs=b] .cd-d b{font-family:'Barlow Condensed',system-ui,sans-serif!important;text-transform:uppercase;letter-spacing:.01em}
html.cmode[data-cs=b] #app h1{font-size:32px!important;font-weight:800!important;white-space:nowrap}
html.cmode[data-cs=b] .td-hero h2{font-size:40px!important;line-height:.95!important;font-weight:800!important}
html.cmode[data-cs=b] .cl-nxh{font-size:34px!important}html.cmode[data-cs=b] .cl-d b,html.cmode[data-cs=b] .cd-d b{font-size:26px!important}
html.cmode[data-cs=b] .tm-fl,html.cmode[data-cs=b] .cl-mo,html.cmode[data-cs=b] .cm-gh,html.cmode[data-cs=b] .td-hk{font-size:15px!important;font-weight:700!important;letter-spacing:.06em!important}
html.cmode[data-cs=b] #app .tabs{border-top:1px solid #E6EAF3!important;box-shadow:none!important}
html.cmode[data-cs=b] #app .tabs button .tl{font-family:'Barlow Condensed',sans-serif!important;text-transform:uppercase;font-size:13px!important;letter-spacing:.06em}
html.cmode[data-cs=b] #app .tabs button.on .tl{color:#2F6BFF!important}
html.cmode[data-cs=b] #app .tabs button[data-tab] .ti img:not(.tlogo){filter:grayscale(1) opacity(.45)}html.cmode[data-cs=b] #app .tabs button.on[data-tab] .ti img{filter:none}
html.cmode[data-cs=b] .td-hb{border-radius:10px!important;text-transform:uppercase;font-family:'Barlow Condensed',sans-serif!important;font-size:20px!important;letter-spacing:.04em;box-shadow:none!important}
html.cmode[data-cs=b] .td-hero{border-radius:18px;border-left:6px solid var(--hc)}
html.cmode[data-cs=b] .rl-b,html.cmode[data-cs=b] .hf-top .bl-b{border-width:1.5px!important;border-color:#E3E8F2!important}
html.cmode[data-cs=b] .tm-av button,html.cmode[data-cs=b] .tm-go a,html.cmode[data-cs=b] .tm-go button{border-radius:10px!important;box-shadow:none!important}

/* ---------- C · Clubhouse: Manrope, soft grey page with white cards, matte 3D icons ---------- */
html.cmode[data-cs=c] body *{font-family:Manrope,system-ui,sans-serif!important}
html.cmode[data-cs=c] #app,html.cmode[data-cs=c] #app .hf,html.cmode[data-cs=c] #app #sc{background:#F3F4F7!important}
html.cmode[data-cs=c] #app h1{font-size:28px!important;font-weight:800!important;letter-spacing:-.02em}
html.cmode[data-cs=c] .fd-list>.fd-p{margin:12px 0;padding:16px!important;border:0!important;border-radius:22px;background:#fff;box-shadow:0 1px 2px rgba(20,24,40,.05),0 6px 20px rgba(20,24,40,.05)}
html.cmode[data-cs=c] .td-hero{box-shadow:0 1px 2px rgba(20,24,40,.05),0 10px 28px rgba(47,107,255,.10)}
html.cmode[data-cs=c] .td-hero h2,html.cmode[data-cs=c] .cl-nxh{font-weight:800!important;letter-spacing:-.025em}
html.cmode[data-cs=c] .td-mini{padding:12px 4px;border-radius:22px;background:#fff;box-shadow:0 1px 2px rgba(20,24,40,.05)}
html.cmode[data-cs=c] .cl-r,html.cmode[data-cs=c] .cd-row{margin-bottom:8px;padding:12px!important;border:0!important;border-radius:18px!important;background:#fff!important;box-shadow:0 1px 2px rgba(20,24,40,.05)}
html.cmode[data-cs=c] .rl-b,html.cmode[data-cs=c] .hf-top .bl-b{border:0!important;box-shadow:0 1px 3px rgba(20,24,40,.08)}
html.cmode[data-cs=c] .td-hb,html.cmode[data-cs=c] .tm-new{border-radius:14px!important;box-shadow:none!important}
html.cmode[data-cs=c] .cd-seg{background:#E8EAF0!important}html.cmode[data-cs=c] .cd-tiles span{background:#fff!important}
html.cmode[data-cs=c] #app .tabs{border-top:0!important;box-shadow:0 -1px 0 #E8EAF0,0 -8px 24px rgba(20,24,40,.05)!important;background:#fff!important}
html.cmode[data-cs=b] #app .tabs button[data-tab=team] .ti img:not(.tlogo){content:url(assets/va/cs/b-team.webp)}
html.cmode[data-cs=c] #app .tabs button[data-tab=team] .ti img:not(.tlogo){content:url(assets/va/cs/c-team.webp)}
html.cmode[data-cs=b] #app .tabs button[data-tab=cal] .ti img:not(.tlogo){content:url(assets/va/cs/b-cal.webp)}
html.cmode[data-cs=c] #app .tabs button[data-tab=cal] .ti img:not(.tlogo){content:url(assets/va/cs/c-cal.webp)}
html.cmode[data-cs=b] #app .tabs button[data-tab=diary] .ti img:not(.tlogo){content:url(assets/va/cs/b-diary.webp)}
html.cmode[data-cs=c] #app .tabs button[data-tab=diary] .ti img:not(.tlogo){content:url(assets/va/cs/c-diary.webp)}
html.cmode[data-cs=c] #app .tabs button[data-tab] .ti img:not(.tlogo){opacity:.55}html.cmode[data-cs=c] #app .tabs button.on[data-tab] .ti img{opacity:1}
html.cmode[data-cs=a] .td-hero{background:#fff!important;border:1px solid #E6E6EC;box-shadow:0 1px 2px rgba(20,24,40,.04)}
html.cmode[data-cs=a] .td-hero .td-hg{width:150px;height:150px;top:4px;right:-6px}
html.cmode[data-cs=a] .td-hb{background:#EE7F00!important}
html.cmode[data-cs=a] .cl-nx{background:#fff!important;border:1px solid #E6E6EC}
html.cmode[data-cs=a] .tm-fx,html.cmode[data-cs=a] .tm-pd,html.cmode[data-cs=a] .td-lv{border:1px solid rgba(0,0,0,.05)}
/* More: plain grey dots in all three, with its label */
html.cmode[data-cs] #app .tabs .mo-i{width:26px;height:26px;gap:4px;background:none!important;box-shadow:none!important}
html.cmode[data-cs] #app .tabs .mo-i i{width:4.5px;height:4.5px;background:#8A8A96!important}
html.cmode[data-cs] #app .tabs button[data-act=more]::after{display:block!important;content:'More'!important;font-size:11px;font-weight:700;color:#8A8A96}
html.cmode[data-cs=b] #app .tabs button[data-act=more]::after{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-size:13px;letter-spacing:.06em}
html.cmode[data-cs=b] .cl-nxt i{font-size:15px!important}