@import url("/fonts/dm-sans.css");
@import url("/fonts/manrope.css");
:root{--ink:#183b33;--forest:#123b32;--muted:#62746d;--paper:#f4f6f3;--line:#dce4dd;--mint:#c5ef9c;--green:#37734f;--purple:#7960a1;--white:#fff;--danger:#a83737;--radius:14px;--shadow:0 14px 50px #123b3229;font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}:is(button,a,input,select,textarea):focus-visible{outline:3px solid #648f49;outline-offset:3px}::selection{background:var(--mint);color:var(--forest)}input,textarea{caret-color:var(--green)}a{color:inherit;text-underline-offset:4px}svg{vertical-align:middle}.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.shell{display:grid;grid-template-columns:228px minmax(0,1fr);min-height:100vh}.rail{background:var(--forest);color:#d9e7dc;position:fixed;inset:0 auto 0 0;width:228px;display:flex;flex-direction:column;padding:32px 18px 22px;z-index:20}.brand{display:flex;align-items:center;gap:10px;padding:0 12px 28px;font:800 24px Manrope,sans-serif;color:#fff;letter-spacing:-1px}.brand-mark{width:32px;height:40px;stroke:var(--mint);fill:none;stroke-width:2}.club{display:flex;align-items:center;gap:11px;border:1px solid #426057;border-radius:10px;padding:13px 12px;margin-bottom:28px}.club-shield{width:33px;height:37px;background:#d6e9bd;color:#224836;border-radius:6px 6px 15px 15px;display:grid;place-items:center;font-size:11px;font-weight:800}.club strong{display:block;font-size:13px}.club small{display:block;margin-top:3px;color:#b4c8bd;font-size:11px}.nav{display:flex;flex-direction:column;gap:5px}.nav button{display:flex;align-items:center;gap:13px;border:0;color:#c3d3c9;background:transparent;padding:12px 14px;text-align:left;border-radius:8px;font-weight:500;font-size:13px}.nav button:hover{background:#254b40;color:white}.nav button.active{background:var(--mint);color:#1c3d2a;font-weight:700}.nav button .mini-count{margin-left:auto;font-size:11px;background:#ffffff20;padding:2px 5px;border-radius:4px}.rail-bottom{margin-top:auto;padding:30px 12px 0}.rail-bottom p{font-size:11px;color:#b4c8bd;line-height:1.5}.rail-bottom .user{border-top:1px solid #3a5a4e;padding-top:19px;display:flex;align-items:center;gap:10px;font-size:12px}.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#eaf0e8;color:var(--green);font-weight:700;font-size:12px;flex-shrink:0}.body{grid-column:2;min-width:0}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:white;border-bottom:1px solid var(--line);gap:12px}.breadcrumb{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}.breadcrumb strong{color:var(--ink);font-weight:600}.top-actions{display:flex;align-items:center;gap:15px}.save-state{font-size:11px;color:var(--muted)}.demo-tag{font-size:10px;letter-spacing:.07em;font-weight:700;background:#f0eddf;color:#706130;padding:6px 8px;border-radius:5px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 15px;border:1px solid var(--line);background:white;border-radius:7px;color:var(--ink);font-size:12px;font-weight:650;text-decoration:none;min-height:38px}.btn:hover{background:#eaf0e8}.btn.primary{background:var(--forest);color:#fff;border-color:var(--forest)}.btn.primary:hover{background:#285546}.btn.lime{background:var(--mint);border-color:var(--mint)}.btn.small{padding:7px 10px;min-height:32px;font-size:11px}.btn.danger{color:var(--danger)}.iconbtn{border:0;background:transparent;padding:8px;border-radius:6px;color:inherit;display:grid;place-items:center}.iconbtn:hover{background:#e7eee6}.mobile-menu{display:none}main{padding:30px 34px 40px;max-width:1600px;margin:0 auto}h1,h2,h3,p{margin:0}h1{font:750 29px/1.2 Manrope,sans-serif;letter-spacing:-.9px}h2{font:750 16px/1.3 Manrope,sans-serif;letter-spacing:-.3px}h3{font:700 14px/1.4 Manrope,sans-serif}.subtitle{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.6}.page-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.format-switch{display:inline-flex;border:1px solid var(--line);border-radius:8px;background:white;padding:3px;gap:2px}.format-switch button{border:0;background:transparent;padding:7px 14px;border-radius:5px;color:var(--muted);font-size:12px;font-weight:650}.format-switch button.active{color:#fff;background:var(--forest)}.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--radius);background:white;margin-bottom:24px;padding:21px 6px}.stat{padding:0 23px;border-right:1px solid var(--line)}.stat:last-child{border:0}.stat-label{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}.stat-number{font:750 28px Manrope,sans-serif;letter-spacing:-.5px;margin:8px 0 4px}.stat-number small{font:500 13px 'DM Sans';color:var(--muted)}.stat-foot{font-size:10px;color:var(--muted)}.dash-grid{display:grid;grid-template-columns:minmax(420px,1.55fr) minmax(280px,1fr);gap:22px}.panel{background:white;border:1px solid var(--line);border-radius:var(--radius);min-width:0;overflow:hidden}.panel-head{padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-head p{font-size:11px;margin-top:5px;color:var(--muted)}.panel-body{padding:0 22px 22px}.stack{display:flex;flex-direction:column;gap:20px}.pitch-wrap{padding:0 18px 18px}.pitch{position:relative;width:100%;height:455px;border-radius:9px;overflow:hidden;background:#3a7153;background-image:linear-gradient(to bottom,#ffffff04 50%,#00000005 50%);background-size:100% 20%;isolation:isolate}.pitch-lines{position:absolute;inset:6% 7%;border:1px solid #d7edce65;pointer-events:none}.pitch-lines:before,.pitch-lines:after{content:'';position:absolute;left:0;right:0;top:20%;border-top:1px solid #d7edce65}.pitch-lines:after{top:80%}.pitch-half{position:absolute;top:50%;left:7%;right:7%;border-top:1px solid #d7edce65}.pitch-ten{position:absolute;top:40%;left:7%;right:7%;border-top:1px dashed #d7edce65}.pitch-ten.bottom{top:60%}.pitch-label{position:absolute;bottom:9px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:2px;color:#dcead7b3}.position{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;background:transparent;border:0;color:white;padding:0;width:110px;z-index:2}.jersey{height:40px;width:42px;border-radius:8px 8px 13px 13px;background:#e2f2ce;color:#1e492d;box-shadow:0 3px 8px #00000033;display:grid;place-items:center;font:bold 14px Manrope;position:relative;border:2px solid #ffffffa1}.position:hover .jersey,.position.selected .jersey{background:#fff;box-shadow:0 0 0 3px #d4efa6}.position-name{font-size:10px;padding:4px 6px;border-radius:4px;background:#183e31e8;max-width:108px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.position-role{font-size:8px;font-weight:600;color:#e3eedb;text-shadow:0 1px 2px #113b32}.pitch.f15{height:565px}.pitch.f15 .jersey{height:32px;width:35px;font-size:12px}.pitch.f15 .position{width:90px}.pitch.f15 .position-name{font-size:9px;max-width:90px}.pitch-footer{display:flex;justify-content:space-between;gap:12px;padding:13px 4px 0;color:var(--muted);font-size:10px}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#75a95a;margin-right:5px;vertical-align:middle}.match-card{background:#f0f4eb}.match-date{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}.teams{display:flex;justify-content:space-around;align-items:center;padding:24px 0 22px;gap:10px}.team-emblem{height:53px;width:48px;margin:0 auto 10px;border:1px solid #9aaf8e;border-radius:8px 8px 20px 20px;background:#e1ebd6;display:grid;place-items:center;font:750 16px Manrope}.team-emblem.away{color:#6e597e;background:#eee7f2;border-color:#b7a9c3}.team-name{text-align:center;font-size:11px;font-weight:700;max-width:120px;line-height:1.4}.vs{font:600 12px Manrope;color:#80917d}.match-meta{text-align:center;font-size:10px;color:var(--muted);margin-bottom:19px}.full{width:100%}.insight{padding:14px 0;border-top:1px solid var(--line);display:flex;gap:11px;align-items:flex-start}.insight:first-child{border:0;padding-top:0}.insight .icon{color:var(--green);width:17px}.insight strong{font-size:12px;display:block;margin-bottom:4px}.insight p{font-size:11px;color:var(--muted);line-height:1.55}.bottom-grid{margin-top:22px;display:grid;grid-template-columns:1.5fr 1fr;gap:22px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:12px}th{font-weight:500;font-size:10px;color:var(--muted);background:#f8faf6;padding:12px 16px;white-space:nowrap}td{padding:13px 16px;border-top:1px solid #edf0eb;white-space:nowrap}tr.clickable{cursor:pointer}tr.clickable:hover{background:#f3f7ee}.player-cell{display:flex;align-items:center;gap:10px}.player-cell strong{display:block;font-size:12px}.player-cell small{display:block;font-size:10px;color:var(--muted);margin-top:3px}.rating{display:inline-grid;place-items:center;width:31px;height:33px;background:#e5efd9;color:#365923;border:1px solid #cbdcb9;border-radius:6px;font:750 14px Manrope}.rating.high{background:#d9eac9;color:#2d5626}.pill{display:inline-flex;font-size:10px;padding:5px 8px;border-radius:5px;background:#edf4e7;color:#487032;white-space:nowrap}.pill.limited{background:#f9efd9;color:#876315}.pill.unavailable{background:#f8e7e4;color:#a04639}.pill.purple{background:#eee9f4;color:#785793}.text-link{font-size:11px;font-weight:650;border:0;background:none;color:var(--green);padding:3px;display:flex;align-items:center;gap:5px}.form-row{display:flex;gap:12px;flex-wrap:wrap;align-items:end}.field{display:flex;flex-direction:column;gap:7px;flex:1;min-width:120px;text-align:left}.field span,label.field{font-size:11px;font-weight:600}.field input,.field select,.field textarea,.search-input,select.control{border:1px solid #cdd8cd;border-radius:7px;background:#fff;padding:10px 12px;color:var(--ink);min-height:40px;width:100%;font-size:12px}.field input::placeholder,.field textarea::placeholder,.search-input::placeholder{color:#6d7d70}.field textarea{min-height:82px;resize:vertical}.field small{font-size:10px;color:var(--muted);font-weight:400}.toolbar{display:flex;gap:12px;align-items:center;padding:0 0 20px;flex-wrap:wrap}.search{position:relative;flex:1;min-width:180px}.search .icon{position:absolute;top:12px;left:12px;width:16px;height:16px;color:var(--muted)}.search-input{padding-left:37px}.toolbar select{width:auto;min-width:130px}.empty{text-align:center;padding:44px 22px;color:var(--muted)}.empty h3{color:var(--ink);margin-bottom:8px}.empty p{font-size:12px;line-height:1.6;margin:0 auto 18px;max-width:400px}.split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr);gap:22px}.list-row{padding:15px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px}.list-row:last-child{border:0}.list-row p{font-size:11px;color:var(--muted);margin-top:4px}.hint{font-size:11px;color:var(--muted);line-height:1.6}.notice{padding:14px 16px;border:1px solid #d6e1c9;background:#f0f5e9;border-radius:8px;font-size:12px;line-height:1.6;margin-bottom:20px}.notice.warn{background:#fbf5e6;border-color:#e6dcbf;color:#786126}.attribute{display:grid;grid-template-columns:75px 1fr 25px;align-items:center;gap:10px;font-size:11px;margin:13px 0}.bar{height:6px;background:#ecf0e9;border-radius:5px;overflow:hidden}.bar i{display:block;height:100%;background:#72a96a;border-radius:5px}.attr-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.profile-top{display:flex;align-items:center;gap:18px;margin-bottom:24px}.profile-top .rating{width:65px;height:75px;font-size:32px}.profile-top h2{font-size:24px}.profile-attrs{padding:20px;border-top:1px solid var(--line)}.trend{height:180px;width:100%;overflow:visible}.trend text{font:10px 'DM Sans';fill:var(--muted)}.tabs{display:flex;gap:20px;border-bottom:1px solid var(--line);margin-bottom:22px}.tabs button{border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);padding:12px 0;font-size:12px;font-weight:600}.tabs button.active{color:var(--forest);border-color:var(--forest)}.opponent-strip{display:flex;align-items:center;gap:12px;padding:17px 20px;border-bottom:1px solid var(--line)}.opponent-strip select{flex:1;min-width:0}.matchup{padding:15px 0;border-bottom:1px solid var(--line)}.matchup-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.matchup p{font-size:11px;color:var(--muted);line-height:1.5;margin-top:7px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-grid .wide{grid-column:1/-1}.form-section{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}.form-section h3{margin-bottom:14px}.range-row{display:grid;grid-template-columns:78px 1fr 40px;align-items:center;gap:10px;font-size:12px;margin:11px 0}.range-row input[type=range]{accent-color:var(--green);width:100%}.range-row output{text-align:right;font-weight:700}dialog{border:0;border-radius:16px;padding:0;width:min(620px,calc(100vw - 28px));max-height:90vh;color:var(--ink);box-shadow:var(--shadow)}dialog::backdrop{background:#102c2670;backdrop-filter:blur(3px)}.dialog-header{position:sticky;top:0;background:#fff;padding:22px 24px 17px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);z-index:2}.dialog-header h2{font-size:20px}.dialog-content{padding:22px 24px}.dialog-footer{display:flex;justify-content:flex-end;gap:8px;padding-top:22px}.error{color:var(--danger);font-size:12px;line-height:1.5;min-height:18px;margin-top:12px}.selection-list{max-height:470px;overflow:auto}.candidate{width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:14px;border:0;border-bottom:1px solid var(--line);background:white;color:var(--ink)}.candidate:hover{background:#f1f7ea}.candidate .rating{margin-left:auto}.candidate p{font-size:10px;color:var(--muted);margin-top:4px}.fixture-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:22px}.fixture-choice{width:100%;display:block;text-align:left;border:0;border-bottom:1px solid var(--line);padding:20px;background:white;color:var(--ink)}.fixture-choice.active{background:#edf4e5}.fixture-choice strong{display:block;font-size:13px}.fixture-choice small{display:block;margin-top:7px;color:var(--muted);font-size:11px}.scoreboard{display:flex;justify-content:center;align-items:center;gap:30px;padding:28px 15px;background:#f0f4eb}.scoreboard strong{font:800 38px Manrope}.scoreboard div{text-align:center;font-size:12px}.scoreboard span{display:block;font:500 11px 'DM Sans';color:var(--muted);margin-top:8px}.timeline{padding:0 22px 20px}.event{display:grid;grid-template-columns:42px 1fr auto;gap:12px;border-top:1px solid var(--line);padding:16px 0}.event time{font-size:12px;font-weight:700}.event strong{font-size:12px}.event p{font-size:11px;color:var(--muted);line-height:1.6;margin-top:5px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.settings-grid p{font-size:12px;color:var(--muted);line-height:1.7;margin:12px 0 20px}.settings-grid .panel{padding:24px}.auth-view{max-width:450px;margin:55px auto}.auth-view .panel{padding:30px}.auth-view h1{margin-bottom:12px}.auth-view p{font-size:12px;line-height:1.7;color:var(--muted);margin-bottom:22px}.auth-view .field{margin-bottom:16px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--forest);color:white;font-size:12px;padding:13px 20px;border-radius:8px;box-shadow:var(--shadow);opacity:0;pointer-events:none;z-index:100;transition:opacity .18s,transform .18s;max-width:calc(100vw - 30px)}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.skip{position:fixed;top:-50px;z-index:100;background:white;padding:10px}.skip:focus{top:0}.loading{padding:40px}.muted{color:var(--muted)}.space-top{margin-top:22px}.mobile-nav-backdrop{display:none}.print-only{display:none}@media(min-width:1500px){.pitch{height:510px}}@media(max-width:1180px){.shell{grid-template-columns:198px minmax(0,1fr)}.rail{width:198px;padding-left:12px;padding-right:12px}.brand{font-size:22px}.topbar{padding:0 24px}main{padding:26px 24px}.dash-grid{grid-template-columns:minmax(350px,1.3fr) minmax(250px,1fr);gap:16px}.stat{padding:0 16px}.split{grid-template-columns:1.1fr 1fr}.pitch{height:440px}.position{width:94px}.position-name{max-width:90px;font-size:9px}.bottom-grid{gap:16px}}@media(max-width:980px){.shell{grid-template-columns:76px minmax(0,1fr)}.rail{width:76px;padding:24px 10px}.brand{padding:0 11px 26px}.brand span,.club,.nav button span,.rail-bottom{display:none}.nav button{padding:14px 16px}.nav{gap:10px}.dash-grid{grid-template-columns:1fr}.pitch{height:470px}.bottom-grid{grid-template-columns:1fr}.dash-grid>.stack{display:grid;grid-template-columns:1fr 1fr;gap:16px}.split{grid-template-columns:1fr}.fixture-layout{grid-template-columns:240px 1fr}.save-state{display:none}.settings-grid{grid-template-columns:1fr 1fr}.pitch.f15{height:570px}}@media(max-width:650px){.shell{display:block}.rail{transform:translateX(-100%);transition:transform .2s;width:228px;padding:28px 18px}.rail.open{transform:translateX(0)}.rail.open .brand span,.rail.open .club,.rail.open .nav button span,.rail.open .rail-bottom{display:initial}.rail.open .club{display:flex}.rail.open .brand{padding:0 12px 28px}.mobile-nav-backdrop.show{display:block;position:fixed;inset:0;background:#14362b66;z-index:19;border:0}.body{width:100%}.topbar{height:62px;padding:0 16px}.mobile-menu{display:grid}.breadcrumb{display:none}.top-actions{gap:8px}.top-actions>.btn{padding:8px 11px;font-size:11px}main{padding:23px 16px}.page-head{align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:21px}h1{font-size:25px}.subtitle{font-size:11px}.page-head>.actions{width:100%;justify-content:space-between}.stat-strip{grid-template-columns:1fr 1fr;padding:4px 0;margin-bottom:18px}.stat{padding:16px 19px;border-right:0}.stat:nth-child(odd){border-right:1px solid var(--line)}.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}.stat-number{font-size:24px}.dash-grid>.stack{display:flex}.dash-grid{gap:18px}.panel-head{padding:18px}.panel-body{padding:0 18px 18px}.pitch-wrap{padding:0 10px 12px}.pitch{height:440px}.position{width:80px}.position-name{max-width:82px;font-size:8px}.position-role{font-size:7px}.jersey{width:35px;height:34px;font-size:12px}.pitch.f15{height:570px}.pitch.f15 .position{width:76px}.pitch.f15 .position-name{max-width:74px;font-size:8px}.pitch-footer{font-size:9px}.bottom-grid{gap:18px;margin-top:18px}.settings-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:1}.fixture-layout{grid-template-columns:1fr}.fixture-choice{padding:15px}.attr-grid{grid-template-columns:1fr}.format-switch button{padding:7px 12px}.dialog-content{padding:19px}.dialog-header{padding:18px}.profile-top h2{font-size:21px}.scoreboard{gap:20px}.scoreboard strong{font-size:30px}.toolbar{gap:9px}.toolbar .search{min-width:100%;}.auth-view{margin:24px auto}.auth-view .panel{padding:24px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}@media print{.rail,.topbar,.page-head .actions,.btn,.text-link,.toolbar,#toast,dialog{display:none!important}.shell{display:block}.body{width:100%}main{padding:0;max-width:none}.panel{break-inside:avoid}.pitch{print-color-adjust:exact;-webkit-print-color-adjust:exact}.print-only{display:block}.dash-grid{grid-template-columns:1.3fr 1fr}.bottom-grid{grid-template-columns:1fr}body{background:white}}.training-checks{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:17px 0 20px}.training-checks label{font-size:12px;display:flex;align-items:center;gap:7px}.training-checks input{accent-color:var(--green);width:16px;height:16px}
.metric-date{display:block;font-size:9px;color:var(--muted);margin-top:5px}
.guide-row{padding:16px 0;border-top:1px solid var(--line)}.guide-row summary{font-size:13px;font-weight:650;cursor:pointer}.guide-row p{font-size:12px;line-height:1.8;color:var(--muted);margin:12px 0;max-width:75ch}.guide-row a{font-size:11px;font-weight:600;color:var(--green)}
#busy-overlay{position:fixed;inset:0;display:grid;place-items:center;background:#f4f6f3e8;color:var(--forest);font-size:15px;font-weight:600;z-index:200}
.assessment-check{display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.6;margin:20px 0;padding:13px;background:#eef4e8;border-radius:7px}.assessment-check input{accent-color:var(--green);margin-top:3px;flex-shrink:0;width:17px;height:17px}.pitch-roster{display:none}.pitch.f15 .pitch-label{top:8px;bottom:auto}@media(max-width:650px){.pitch-roster{display:block;margin:16px 7px 0;border-top:1px solid var(--line);padding-top:15px}.pitch-roster summary{font-size:13px;font-weight:700;cursor:pointer;margin-bottom:8px}.pitch-roster button{display:grid;grid-template-columns:94px 1fr 25px;align-items:center;text-align:left;gap:8px;background:white;border:0;border-top:1px solid #e6ece2;padding:12px 0;width:100%;color:var(--ink);font-size:12px;min-height:45px}.pitch-roster button span{font-size:11px;color:var(--muted)}.pitch-roster button strong{font-weight:600}.pitch-roster button b{text-align:right;font-size:13px}}

/* Touchline tactics workspace — management-game inspired, coaching first. */
:root {
  color-scheme: dark;
  --paper: #11121b;
  --surface: #1c1d2b;
  --surface-raised: #252638;
  --surface-inset: #151620;
  --surface-hover: #303147;
  --ink: #f3f3fa;
  --muted: #b0b2c8;
  --line: #383a50;
  --forest: #201c30;
  --rail-bg: #191624;
  --rail-ink: #eeeaf9;
  --rail-muted: #bcb5cf;
  --nav-active: #c6b3ff;
  --nav-active-ink: #211632;
  --mint: #d8f77b;
  --green: #c8eb78;
  --purple: #c2aff7;
  --danger: #ffaaa5;
  --action-ink: #1e2715;
  --focus: #cfbfff;
  --good-bg: #283b2c;
  --good-ink: #c4e9b7;
  --warn-bg: #42371f;
  --warn-ink: #f2d69e;
  --bad-bg: #442a30;
  --bad-ink: #ffbcb5;
  --opposition-bg: #353046;
  --opposition-ink: #d5c3fc;
  --shadow: 0 16px 52px #05050b66;
  --radius: 12px;
  font-variant-numeric: tabular-nums;
  scrollbar-color: #55536e var(--surface-inset);
  background: var(--paper);
  color: var(--ink);
}
html[data-theme="light"] {
  color-scheme: light;
  --paper: #edeef4;
  --surface: #ffffff;
  --surface-raised: #f4f3f9;
  --surface-inset: #e7e7f0;
  --surface-hover: #e4dff1;
  --ink: #232034;
  --muted: #646176;
  --line: #d1cedd;
  --forest: #342747;
  --rail-bg: #292237;
  --rail-ink: #f3effa;
  --rail-muted: #ccc3dc;
  --nav-active: #d1befd;
  --nav-active-ink: #2d1b43;
  --mint: #d7ef89;
  --green: #416528;
  --purple: #705395;
  --danger: #a13034;
  --action-ink: #263817;
  --focus: #7654aa;
  --good-bg: #e8f2df;
  --good-ink: #3e6427;
  --warn-bg: #f9ecd1;
  --warn-ink: #775611;
  --bad-bg: #fae4e1;
  --bad-ink: #9b3439;
  --opposition-bg: #eee6f8;
  --opposition-ink: #67418b;
  --shadow: 0 16px 50px #29223729;
  scrollbar-color: #8c849f var(--surface-inset);
}
body { background: var(--paper); color: var(--ink); }
::selection { background: var(--nav-active); color: var(--nav-active-ink); }
:is(button,a,input,select,textarea,summary):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
input,textarea { caret-color: var(--green); }
button { transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out; }
button:disabled { opacity: .45; }
.rail { background: var(--rail-bg); color: var(--rail-ink); border-right: 1px solid #42374f; }
.brand { letter-spacing: -.8px; font-size: 25px; }
.brand-mark { stroke: var(--mint); }
.club { background: #ffffff06; border-color: #514760; border-radius: 8px; margin-bottom: 24px; }
.club-shield { background: #d9c6ff; color: #30213f; border-radius: 5px 5px 12px 12px; }
.club small,.rail-bottom p { color: var(--rail-muted); }
.nav { gap: 5px; }
.nav button { color: var(--rail-muted); border-radius: 6px; min-height: 43px; font-weight: 550; }
.nav button:hover { background: #332b43; color: var(--rail-ink); }
.nav button.active { background: var(--nav-active); color: var(--nav-active-ink); font-weight: 750; }
.nav button .mini-count { background: #ffffff12; border: 1px solid #ffffff12; }
.nav button.active .mini-count { background: #21163212; border-color: #21163220; }
.rail-bottom .user { border-color: #514760; }
.rail-bottom .avatar { background: #493d5e; color: #e6dbff; }
.topbar { background: var(--surface-inset); height: 70px; border-color: var(--line); }
.breadcrumb { font-size: 12px; }
.top-actions { gap: 12px; }
.demo-tag { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid #a38a5940; font-size: 10px; }
.btn { border-color: var(--line); background: var(--surface-raised); color: var(--ink); border-radius: 6px; font-size: 12px; min-height: 39px; font-weight: 650; }
.btn:hover { background: var(--surface-hover); border-color: var(--muted); }
.btn.primary,.btn.lime { background: var(--mint); border-color: var(--mint); color: var(--action-ink); font-weight: 750; }
.btn.primary:hover,.btn.lime:hover { background: #e4ff98; border-color: #e4ff98; color: #1e2715; }
.btn.small { min-height: 33px; }
.btn.danger { color: var(--danger); }
.iconbtn:hover { background: var(--surface-hover); }
.theme-toggle { white-space: nowrap; }
.theme-toggle .icon { width: 17px; height: 17px; }
main { padding-top: 27px; }
h1 { font-size: 30px; letter-spacing: -.8px; font-weight: 800; }
h2 { font-size: 16px; font-weight: 750; }
h3 { font-size: 13px; }
.page-head { margin-bottom: 23px; }
.subtitle { font-size: 12px; color: var(--muted); }
.format-switch { border-color: var(--line); background: var(--surface-inset); border-radius: 6px; padding: 3px; }
.format-switch button { color: var(--muted); border-radius: 4px; min-height: 31px; }
.format-switch button:hover { background: var(--surface-hover); color: var(--ink); }
.format-switch button.active { background: var(--nav-active); color: var(--nav-active-ink); font-weight: 750; }
.stat-strip { background: var(--surface); border-color: var(--line); padding-top: 17px; padding-bottom: 17px; border-radius: var(--radius); }
.stat-number { font-size: 28px; color: var(--ink); }
.stat-label { font-size: 11px; }
.stat-foot { font-size: 11px; line-height: 1.45; }
.stat-label .icon { width: 17px; height: 17px; color: var(--purple); }
.panel { background: var(--surface); border-color: var(--line); border-radius: var(--radius); }
.panel-head { padding: 18px 20px; }
.panel-head p { font-size: 12px; }
.panel-body { padding: 0 20px 20px; }
.match-card,.fixture-banner { background: var(--surface-raised); }
.team-emblem { background: #4b425e; color: #efe3ff; border-color: #8c7ba7; }
.team-emblem.away { background: #2e3645; color: #d9e8fc; border-color: #6d809c; }
.team-name { font-size: 12px; }
.vs { color: var(--muted); }
.match-meta { font-size: 11px; }
.insight { padding: 16px 0; }
.insight p { font-size: 12px; line-height: 1.65; }
.insight strong { font-size: 13px; }
.insight .icon { color: var(--purple); }
.avatar { background: var(--opposition-bg); color: var(--opposition-ink); border-radius: 8px; }
.table-wrap { scrollbar-width: thin; }
.table-wrap table { font-size: 12px; }
th { background: var(--surface-inset); color: var(--muted); font-size: 11px; padding: 12px 15px; font-weight: 600; }
td { border-color: var(--line); padding: 12px 15px; }
tr.clickable:hover { background: var(--surface-hover); }
.player-cell strong { font-size: 12px; font-weight: 650; }
.player-cell small { color: var(--muted); font-size: 11px; }
.rating { color: #e8dbab; background: #423a25; border-color: #80704a; border-radius: 5px; font-weight: 800; }
.rating.high { color: #f7e9b8; background: #554729; border-color: #a88c49; }
html[data-theme="light"] .rating { color: #624b14; background: #f4ead0; border-color: #c6ad72; }
html[data-theme="light"] .rating.high { color: #58400a; background: #f5df9d; border-color: #b89545; }
.pill { background: var(--good-bg); color: var(--good-ink); border-radius: 4px; }
.pill.limited { background: var(--warn-bg); color: var(--warn-ink); }
.pill.unavailable { background: var(--bad-bg); color: var(--bad-ink); }
.pill.purple { background: var(--opposition-bg); color: var(--opposition-ink); }
.text-link { color: var(--green); font-size: 12px; }
.text-link:hover { text-decoration: underline; }
.field span,label.field { font-size: 12px; font-weight: 600; }
.field input,.field select,.field textarea,.search-input,select.control { border-color: var(--line); background: var(--surface-inset); color: var(--ink); border-radius: 6px; font-size: 13px; min-height: 42px; }
.field input::placeholder,.field textarea::placeholder,.search-input::placeholder { color: var(--muted); opacity: .88; }
.field small { font-size: 11px; }
.search .icon { top: 13px; }
.hint { font-size: 12px; }
.notice { background: var(--opposition-bg); border-color: var(--line); color: var(--ink); }
.notice.warn { background: var(--warn-bg); border-color: #97805266; color: var(--warn-ink); }
.attribute { grid-template-columns: 78px 1fr 25px; font-size: 12px; margin: 15px 0; }
.bar { background: var(--surface-inset); height: 6px; }
.bar i { background: var(--purple); }
.tabs button.active { color: var(--green); border-color: var(--green); }
.list-row p,.matchup p,.event p { font-size: 12px; }
.range-row { margin: 14px 0; }
dialog { background: var(--surface); color: var(--ink); border-radius: 14px; box-shadow: var(--shadow); }
dialog::backdrop { background: #07070db8; backdrop-filter: none; }
.dialog-header { background: var(--surface); border-color: var(--line); }
.dialog-header h2 { font-size: 21px; }
.candidate { background: var(--surface); border-color: var(--line); padding: 14px; }
.candidate:hover { background: var(--surface-hover); }
.candidate p { font-size: 11px; }
.fixture-choice { background: var(--surface); color: var(--ink); }
.fixture-choice:hover { background: var(--surface-hover); }
.fixture-choice.active { background: var(--opposition-bg); }
.scoreboard { background: var(--surface-inset); }
.scoreboard strong { color: var(--mint); }
html[data-theme="light"] .scoreboard strong { color: var(--purple); }
.assessment-check { background: var(--opposition-bg); color: var(--ink); }
.metric-date { font-size: 10px; }
.guide-row summary { font-size: 14px; line-height: 1.5; }
.guide-row p { font-size: 13px; }
.guide-row a { font-size: 12px; }
#toast { background: var(--nav-active); color: var(--nav-active-ink); font-size: 13px; font-weight: 550; }
#busy-overlay { background: var(--surface-inset); color: var(--ink); }
.skip { background: var(--surface); color: var(--ink); }

/* The tactics canvas keeps the football-management pattern, with rugby geometry. */
.tactics-layout { display: grid; grid-template-columns: minmax(430px, 1fr) 300px; gap: 20px; align-items: start; }
.tactics-main,.tactics-aside { min-width: 0; }
.tactics-aside { display: flex; flex-direction: column; gap: 18px; }
.tactics-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tactics-toolbar .actions { gap: 7px; }
.tactics-toolbar h2 { font-size: 15px; }
.tactics-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.tactics-summary strong { color: var(--ink); }
.tactics-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; border: 1px solid var(--line); background: var(--surface); border-radius: 9px; margin-bottom: 18px; }
.tactics-metrics > * { padding: 16px; border-right: 1px solid var(--line); min-width: 0; }
.tactics-metrics > :last-child { border: 0; }
.tactics-metrics strong { display: block; font: 800 23px/1.2 Manrope,sans-serif; margin-bottom: 5px; }
.tactics-metrics span,.tactics-metrics small { color: var(--muted); font-size: 11px; }
.control-note { color: var(--muted); font-size: 12px; line-height: 1.6; }
.movement-help { padding: 0 18px 18px; }
.tactics-board { min-width: 0; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.shortcut-key { display: inline-flex; justify-content: center; align-items: center; min-width: 21px; padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px; font-size: 10px; font-family: inherit; color: var(--muted); background: var(--surface-inset); }
.pitch-wrap { padding: 16px 18px 18px; }
.pitch { background-color: #19352f; background-image: linear-gradient(to bottom,#ffffff04 50%,#00000008 50%); background-size: 100% 20%; border: 1px solid #547569; border-radius: 8px; height: 600px; }
.pitch.interactive { height: 640px; overflow: hidden; }
.pitch.interactive.f10 { height: 650px; }
.pitch.interactive.f15 { height: 760px; }
.pitch.compact { height: 550px; }
.pitch.compact.f15 { height: 700px; }
.pitch-lines { border-color: #94b29b55; inset: 5% 6%; }
.pitch-lines::before,.pitch-lines::after { border-color: #94b29b55; }
.pitch-half,.pitch-ten { left: 6%; right: 6%; border-color: #94b29b55; }
.pitch-label,.pitch.f15 .pitch-label { top: 9px; bottom: auto; color: #cedfcf; font-size: 9px; letter-spacing: 1.4px; pointer-events: none; }
.pitch-footer { padding: 13px 2px 0; font-size: 11px; line-height: 1.5; }
.pitch-footer .dot { background: var(--mint); }
.player-card { --card-w: 90px; --card-h: 105px; width: var(--card-w); min-width: var(--card-w); height: var(--card-h); border: 1px solid #c1b082; border-radius: 8px 8px 13px 13px; background: linear-gradient(150deg,#ede3c0 0%,#d9c793 58%,#baa063 100%); color: #332b17; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 6px 7px 5px; gap: 0; text-align: center; overflow: hidden; font-variant-numeric: tabular-nums; isolation: isolate; }
.position.player-card { touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; z-index: 3; }
.pitch .position.player-card { width: var(--card-w); min-width: var(--card-w); }
.player-card:focus-visible { outline: 3px solid #e3d8ff; outline-offset: 4px; z-index: 6; }
.player-card:hover { background: linear-gradient(150deg,#fff2c8 0%,#e4d29e 58%,#c8ae71 100%); border-color: #f4e6bc; }
.player-card.selected,.player-card.is-selected { outline: 3px solid #d5c4ff; outline-offset: 3px; z-index: 5; }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; line-height: 1; flex-shrink: 0; }
.card-ovr { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.card-ovr strong { font: 800 22px/1 Manrope,sans-serif; letter-spacing: -.7px; color: #302616; }
.card-ovr small { font-size: 7px; font-weight: 800; letter-spacing: .4px; }
.card-role { font-size: 9px; font-weight: 800; line-height: 1.3; padding-top: 2px; color: #44371b; }
.card-shirt { width: 35px; height: 31px; margin: -8px auto 4px; display: grid; place-items: center; background: #37314a; color: #f1e8cd; clip-path: polygon(23% 0,37% 0,42% 10%,58% 10%,63% 0,77% 0,100% 22%,85% 43%,73% 33%,73% 100%,27% 100%,27% 33%,15% 43%,0 22%); font: 800 13px/1 Manrope,sans-serif; padding-top: 3px; flex-shrink: 0; }
.card-shirt svg { width: 13px; height: 13px; }
.card-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; line-height: 1.3; font-weight: 800; margin-top: auto; color: #302616; }
.card-fit { display: block; border-top: 1px solid #5d4b262c; margin-top: 4px; padding-top: 3px; font-size: 8px; font-weight: 650; line-height: 1.2; color: #493b20; }
.empty-slot.player-card { background: #10271db8; border: 1px dashed #a8c3aa; color: #e7f3e2; border-radius: 9px; justify-content: center; gap: 3px; cursor: pointer; }
.empty-slot.player-card .card-ovr strong,.empty-slot.player-card .card-role,.empty-slot.player-card .card-name,.empty-slot.player-card .card-fit { color: #e7f3e2; }
.empty-slot.player-card .card-fit { border-color: #a8c3aa55; }
.empty-slot.player-card .card-shirt { background: #a6bd91; color: #19352f; }
.empty-slot.player-card .card-top { justify-content: center; }
.empty-slot.player-card:hover { background: #254b36; border-color: #e0efb4; }
.pitch.f15 .position.player-card { --card-w: 74px; --card-h: 90px; padding: 5px 5px 4px; }
.pitch.f15 .card-ovr strong { font-size: 19px; }
.pitch.f15 .card-shirt { width: 29px; height: 27px; margin-top: -7px; margin-bottom: 2px; font-size: 12px; }
.pitch.f15 .card-name { font-size: 9px; }
.pitch.f15 .card-fit { font-size: 7px; margin-top: 3px; padding-top: 2px; }
.pitch.compact .position.player-card { --card-w: 76px; --card-h: 94px; }
.pitch.compact .card-ovr strong { font-size: 20px; }
.pitch.compact .card-shirt { width: 30px; height: 27px; margin-bottom: 2px; }
.pitch.compact .card-name { font-size: 9px; }
.pitch.compact.f15 .position.player-card { --card-w: 68px; --card-h: 85px; }
.bench-panel { margin-top: 18px; padding: 17px 18px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.bench-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.bench-heading.panel-head { padding: 0; border-bottom: 0; }
.bench-heading h2 { font-size: 15px; }
.bench-heading p,.bench-heading span { color: var(--muted); font-size: 11px; }
.bench-strip { display: flex; align-items: stretch; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; padding: 4px 4px 12px; margin: 0 -4px -6px; min-height: 136px; scrollbar-width: thin; }
.bench-card.player-card { --card-w: 100px; --card-h: 120px; position: relative; flex: 0 0 var(--card-w); transform: none; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.bench-card .card-ovr strong { font-size: 25px; }
.bench-card .card-shirt { width: 39px; height: 35px; font-size: 15px; margin-top: -7px; }
.bench-card .card-name { font-size: 11px; }
.bench-card .card-fit { font-size: 9px; }
.bench-card.unavailable,.bench-card.limited { filter: saturate(.25); opacity: .68; cursor: not-allowed; }
.drag-ghost { position: fixed !important; z-index: 999 !important; pointer-events: none !important; margin: 0 !important; cursor: grabbing !important; box-shadow: 0 12px 28px #00000066; opacity: .98; }
.drag-origin,.drag-source { opacity: .3 !important; }
.dragging-player,.dragging-player * { cursor: grabbing !important; }
.player-card.drop-valid,.empty-slot.drop-valid { outline: 3px solid #d8f77b !important; outline-offset: 4px; z-index: 5; }
.player-card.drop-invalid,.empty-slot.drop-invalid { outline: 3px solid #ffa6a8 !important; outline-offset: 4px; z-index: 5; }
.pitch.drop-valid { outline: 2px solid var(--mint); outline-offset: 2px; }
.bench-panel.drop-valid { background: var(--good-bg); border-color: var(--green); outline: 2px solid var(--green); outline-offset: 2px; }
.bench-panel.drop-invalid { border-color: var(--danger); outline: 2px solid var(--danger); outline-offset: 2px; }
.pitch-roster { color: var(--ink); }
.pitch-roster button { background: var(--surface); border-color: var(--line); }
.pitch-roster button:hover { background: var(--surface-hover); }

@media (min-width: 1550px) {
  .tactics-layout { grid-template-columns: minmax(500px,1fr) 330px; gap: 22px; }
  .pitch.interactive { height: 670px; }
  .pitch.interactive.f15 { height: 790px; }
}
@media (max-width: 1180px) {
  .topbar { padding-inline: 24px; }
  .tactics-layout { grid-template-columns: minmax(360px,1fr) 270px; gap: 16px; }
  .pitch-wrap { padding: 14px; }
  .pitch.interactive { height: 610px; }
  .pitch.interactive.f15 { height: 740px; }
  .position.player-card { --card-w: 82px; --card-h: 100px; }
  .pitch.f15 .position.player-card { --card-w: 68px; --card-h: 86px; }
  .tactics-toolbar { padding: 14px; }
  .tactics-summary { padding: 13px 14px; }
  .tactics-metrics > * { padding: 14px 12px; }
}
@media (max-width: 1040px) {
  .tactics-layout { grid-template-columns: minmax(0,1fr); }
  .tactics-aside { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 16px; }
  .tactics-aside > :only-child { grid-column: 1/-1; }
  .pitch.interactive { height: 650px; }
  .pitch.interactive.f15 { height: 760px; }
  .position.player-card { --card-w: 90px; --card-h: 105px; }
  .pitch.f15 .position.player-card { --card-w: 74px; --card-h: 90px; }
}
@media (max-width: 980px) {
  .rail { border-right: 1px solid #42374f; }
  .brand { padding-inline: 11px; }
  .top-actions { gap: 8px; }
  .topbar .theme-toggle { min-width: 36px; padding: 8px; }
  .theme-toggle .theme-label { display: none; }
  .pitch.compact { height: 570px; }
  .pitch.compact.f15 { height: 730px; }
}
@media (max-width: 650px) {
  .rail { width: 228px; }
  .rail.open .nav button span { display: inline; }
  .topbar { height: 64px; padding-inline: 12px; }
  .top-actions { gap: 6px; }
  .top-actions > .btn { font-size: 10px; padding: 7px 9px; }
  .top-actions .demo-tag { font-size: 8px; padding: 5px 6px; }
  .theme-toggle { min-width: 32px; min-height: 34px; padding: 6px !important; }
  .theme-toggle .theme-label { display: none; }
  main { padding: 21px 12px 30px; }
  h1 { font-size: 25px; letter-spacing: -.6px; }
  .page-head { gap: 14px; margin-bottom: 18px; }
  .page-head > .actions { gap: 8px; }
  .page-head > .actions .btn { min-height: 38px; }
  .subtitle { font-size: 12px; }
  .stat-strip { padding: 0; }
  .stat { padding: 16px; }
  .stat-foot { font-size: 10px; }
  .panel-head { padding: 17px 15px; }
  .panel-body { padding: 0 15px 17px; }
  .tactics-layout { gap: 16px; }
  .tactics-aside { display: flex; }
  .tactics-toolbar { padding: 13px 12px; gap: 10px; }
  .tactics-toolbar .actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .tactics-toolbar .btn { font-size: 11px; min-height: 35px; padding: 8px 10px; }
  .tactics-summary { padding: 12px; gap: 10px; flex-wrap: wrap; font-size: 11px; }
  .tactics-metrics { margin-bottom: 15px; }
  .tactics-metrics > * { padding: 12px 10px; }
  .tactics-metrics strong { font-size: 21px; }
  .tactics-metrics span,.tactics-metrics small { font-size: 10px; }
  .control-note { font-size: 11px; }
  .pitch-wrap { padding: 11px 9px 13px; }
  .pitch,.pitch.compact { height: 500px; }
  .pitch.interactive { height: 520px; }
  .pitch.interactive.f10 { height: 590px; }
  .pitch.interactive.f15,.pitch.compact.f15 { height: 690px; }
  .position.player-card,.pitch.compact .position.player-card { --card-w: 64px; --card-h: 86px; padding: 5px 5px 4px; border-radius: 6px 6px 10px 10px; }
  .card-ovr strong,.pitch.compact .card-ovr strong { font-size: 20px; }
  .card-ovr small { font-size: 6px; }
  .card-role { font-size: 8px; }
  .card-shirt,.pitch.compact .card-shirt { width: 27px; height: 25px; margin-top: -5px; margin-bottom: 2px; font-size: 11px; }
  .card-name,.pitch.compact .card-name { font-size: 8px; }
  .card-fit { font-size: 7px; margin-top: 3px; padding-top: 3px; }
  .pitch.f15 .position.player-card,.pitch.compact.f15 .position.player-card { --card-w: 58px; --card-h: 80px; padding: 5px 4px 4px; }
  .pitch.f15 .card-ovr strong { font-size: 18px; }
  .pitch.f15 .card-shirt { width: 25px; height: 23px; font-size: 10px; margin-top: -6px; }
  .pitch.f15 .card-name { font-size: 8px; }
  .pitch.f15 .card-fit { font-size: 7px; }
  .pitch-label,.pitch.f15 .pitch-label { font-size: 8px; letter-spacing: 1px; top: 8px; }
  .pitch-footer { font-size: 10px; flex-wrap: wrap; }
  .pitch-roster { background: var(--surface); border-color: var(--line); margin: 15px 3px 0; }
  .pitch-roster summary { font-size: 13px; }
  .pitch-roster button { grid-template-columns: 94px minmax(0,1fr) 25px; background: var(--surface); border-color: var(--line); min-height: 48px; padding: 13px 0; }
  .pitch-roster button strong { font-size: 12px; overflow-wrap: anywhere; }
  .pitch-roster button span { font-size: 11px; }
  .bench-panel { padding: 15px 12px; margin-top: 15px; }
  .bench-heading { gap: 8px; margin-bottom: 12px; align-items: flex-start; }
  .bench-heading h2 { font-size: 14px; }
  .bench-heading p,.bench-heading span { font-size: 11px; }
  .bench-strip { gap: 10px; min-height: 129px; }
  .bench-card.player-card { --card-w: 92px; --card-h: 114px; padding: 7px 7px 6px; }
  .bench-card .card-ovr strong { font-size: 24px; }
  .bench-card .card-ovr small { font-size: 7px; }
  .bench-card .card-role { font-size: 9px; }
  .bench-card .card-shirt { width: 36px; height: 33px; margin-top: -7px; margin-bottom: 4px; font-size: 14px; }
  .bench-card .card-name { font-size: 10px; }
  .bench-card .card-fit { font-size: 8px; }
  .fixture-choice { padding: 17px; }
  .scoreboard { gap: 17px; }
  .scoreboard div { font-size: 11px; }
  .dialog-header,.dialog-content { padding: 18px; }
  .dialog-header h2 { font-size: 19px; }
}
@media (max-width: 370px) {
  .top-actions .demo-tag { display: none; }
  .position.player-card,.pitch.compact .position.player-card { --card-w: 58px; --card-h: 82px; }
  .pitch.f15 .position.player-card,.pitch.compact.f15 .position.player-card { --card-w: 54px; --card-h: 78px; }
  .pitch-roster button { grid-template-columns: 86px minmax(0,1fr) 24px; }
}
@media (prefers-reduced-motion: reduce) {
  button,.drag-ghost { transition: none; }
}
@media print {
  :root { --paper:#fff; --surface:#fff; --surface-raised:#f2f2f2; --surface-inset:#f5f5f5; --ink:#171717; --muted:#555; --line:#bbb; --green:#355622; }
  body { background:#fff; color:#171717; }
  .tactics-layout { grid-template-columns: 1.5fr 1fr; }
  .tactics-toolbar,.control-note,.theme-toggle,.drag-ghost { display:none!important; }
  .player-card { print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  .pitch-roster { display:block; }
  .bench-strip { flex-wrap:wrap; overflow:visible; }
  .pitch,.pitch.interactive { height:600px; }
  .pitch.f15,.pitch.interactive.f15 { height:720px; }
}

/* Coach-recorded skill levels: the same controls and colours in both themes. */
.skill-levels { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 20px; margin: 18px 0; }
.skill-rating { min-width: 0; margin: 0; padding: 0 0 14px; border: 0; border-bottom: 1px solid var(--line); }
.skill-rating legend { padding: 0; margin-bottom: 8px; color: var(--ink); font-size: 13px; font-weight: 700; }
.level-options { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
.level-options label { position: relative; display: block; min-width: 0; cursor: pointer; }
.level-options input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; opacity: 0; }
.level-options span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-raised); color: var(--muted); font-size: 14px; font-weight: 700; }
.level-options label:hover span { background: var(--surface-hover); color: var(--ink); border-color: var(--muted); }
.level-options input:checked + span { background: var(--nav-active); color: var(--nav-active-ink); border-color: var(--nav-active); }
.level-options input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.level-options input:disabled + span { opacity: .45; cursor: not-allowed; }
.skill-pill { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 23px; height: 23px; padding: 2px 6px; border-radius: 4px; font: 800 12px/1 Manrope,sans-serif; font-variant-numeric: tabular-nums; vertical-align: middle; }
.skill-pill.level-1 { color: var(--warn-ink); background: var(--warn-bg); }
.skill-pill.level-2 { color: var(--opposition-ink); background: var(--opposition-bg); }
.skill-pill.level-3 { color: var(--good-ink); background: var(--good-bg); }
.skill-pill.ungraded { color: var(--muted); background: var(--surface-inset); border: 1px solid var(--line); }
.skill-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; min-width: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.skill-chips > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.skill-chips .skill-pill { min-width: 20px; height: 20px; padding: 2px 5px; font-size: 10px; }
.skills-profile { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); column-gap: 24px; margin: 12px 0 22px; }
.skill-summary { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 12px; }
.skill-summary small,.skill-summary time { color: var(--muted); font-size: 10px; white-space: nowrap; }
.skill-history { border-top: 1px solid var(--line); margin-top: 20px; }
.skill-history > summary { min-height: 44px; padding: 12px 0; cursor: pointer; color: var(--ink); font-size: 13px; font-weight: 700; }
.skill-history .guide-row { padding-block: 15px; }
.skill-history .skill-chips { margin-block: 8px; }
.tactics-toolbar .board-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; min-width: 0; }
.board-controls .field { flex: 1 1 155px; min-width: 145px; margin: 0; }
.board-controls .field > span { margin-bottom: 5px; color: var(--muted); font-size: 10px; }
.board-controls select { min-height: 44px; padding: 8px 30px 8px 10px; font-size: 11px; }
.candidate-skills { min-width: 0; margin-top: 7px; }
.candidate-skills .skill-chips { gap: 5px 7px; font-size: 9px; }
.candidate-skills .skill-pill { min-width: 19px; height: 19px; font-size: 10px; }
.skill-guide { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; line-height: 1.6; }
.skill-guide > span { display: inline-flex; align-items: center; gap: 7px; }
.skill-table { min-width: 700px; width: 100%; }
.skill-table th:not(:first-child),.skill-table td:not(:first-child) { text-align: center; }
.skill-table .skill-pill { min-width: 26px; height: 26px; }
@media (max-width: 650px) {
  .skill-levels { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .skills-profile { grid-template-columns: minmax(0,1fr); }
  .skill-summary { font-size: 13px; }
  .skill-summary small,.skill-summary time { font-size: 11px; }
  .tactics-toolbar .board-controls { width: 100%; }
  .board-controls .field { flex-basis: 135px; min-width: 125px; }
  .skill-guide { gap: 8px 12px; font-size: 11px; }
  .candidate-skills .skill-chips { gap: 5px 6px; }
}

.skill-fit-score{margin-left:auto;white-space:nowrap;font-size:14px;min-width:58px;text-align:right;color:var(--ink)}.candidate-info{min-width:0;flex:1}.current-selection{padding-bottom:14px;border-bottom:1px solid var(--line)}.current-selection>.btn{margin-top:12px}.skill-guide p{grid-column:1/-1;margin-top:9px}.skill-summary>.hint{font-size:11px}.level-options input:focus-visible+span{outline:2px solid var(--focus);outline-offset:3px}

/* Player portraits stay inside the same card geometry as shirt placeholders. */
.avatar{overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.photo-editor{display:grid;grid-template-columns:104px minmax(0,1fr);gap:18px;align-items:start;margin-bottom:24px}.photo-preview{width:104px;height:104px;display:grid;place-items:center;background:var(--surface-inset);border-radius:12px;overflow:hidden;border:1px solid var(--line)}.photo-preview img{width:100%;height:100%;object-fit:cover}.photo-preview .icon{width:32px;height:32px;color:var(--muted)}.photo-tools .hint{margin:9px 0}.field input[type=file]{padding:8px;font-size:11px;min-width:0}.field input[type=file]::file-selector-button{border:0;padding:6px 8px;margin-right:6px;border-radius:4px;background:var(--nav-active);color:var(--nav-active-ink);font:inherit;cursor:pointer}.profile-photo{width:85px;height:85px;border-radius:12px;object-fit:cover}.card-portrait{display:block;position:relative;width:42px;height:40px;flex:none;border-radius:5px;overflow:hidden}.card-portrait img{width:100%;height:100%;object-fit:cover}.has-photo .card-top{z-index:1}.pitch.f15 .card-portrait,.pitch.compact .card-portrait{height:32px;width:34px}.bench-card .card-portrait{width:46px;height:45px}.current-selection .avatar{display:inline-grid;margin-right:8px}@media(max-width:650px){.photo-editor{grid-template-columns:76px minmax(0,1fr);gap:12px}.photo-preview{width:76px;height:76px}.card-portrait,.pitch.f15 .card-portrait{width:29px;height:27px}.profile-top{flex-wrap:wrap}.profile-photo{width:64px;height:64px}.bench-card .card-portrait{width:40px;height:37px}}

.card-portrait{margin:-6px auto 2px}.pitch.f15 .card-portrait,.pitch.compact .card-portrait{margin-top:-5px}.bench-card .card-portrait{margin-top:-6px}

.pitch.compact.f15 .card-portrait{width:28px;height:24px;margin-top:-7px;margin-bottom:1px}
/* Reserve readable text rows when a portrait replaces the compact shirt. */
.player-card .card-name,.player-card .card-fit{flex-shrink:0}
.card-portrait{width:36px;height:33px}
.pitch.f15 .card-portrait{width:30px;height:27px}
.pitch.compact .card-portrait{width:30px;height:26px}
.pitch.compact.f15 .card-portrait{width:28px;height:24px}
.bench-card .card-portrait{width:40px;height:40px}
@media(max-width:650px){.card-portrait,.pitch.f15 .card-portrait,.pitch.compact .card-portrait{width:27px;height:23px}.bench-card .card-portrait{width:40px;height:37px}}

/* Private coach entry and first-run guidance. */
.access-shell{max-width:610px;min-height:100vh;padding:40px 24px;margin:auto}
.access-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}
.access-heading .brand{padding:0;color:var(--ink)}
.access-school{color:var(--muted);font-size:13px;margin:18px 0 0}
.access-shell .auth-view{max-width:none;margin:30px 0 24px}
.auth-view .auth-guide{margin:24px 0 0;font-size:12px}
.access-footer{text-align:center;color:var(--muted);font-size:12px;line-height:1.8}
.first-team{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0 24px;border-bottom:1px solid var(--line);margin-bottom:24px}
.first-team p{color:var(--muted);font-size:13px;line-height:1.6;max-width:60ch;margin-top:8px}
@media(max-width:650px){.access-shell{padding:24px 16px}.access-heading .brand{font-size:23px}.access-shell .auth-view .panel{padding:24px 20px}.auth-view input{font-size:16px}.first-team{align-items:flex-start;flex-direction:column;gap:16px}}

.access-heading .brand>span{display:inline}

/* BM controls: keep long model names and cloud-save feedback readable on phones. */
@media(max-width:650px){
  .topbar{position:relative;height:auto;min-height:88px;padding-block:10px 32px}
  .topbar .save-state{display:block;position:absolute;inset-inline:12px;bottom:8px;font-size:11px;line-height:16px;text-align:right;white-space:normal}
}
@media(max-width:440px){
  .board-controls .field{flex-basis:100%;min-width:0}
}