/* TOUCHES full app: shared styles for every module page. Matches the TOUCHES app design. */

/* two-row bottom menu */
.app{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))!important}
nav.tabs{padding-left:max(6px,env(safe-area-inset-left,0px))!important;padding-right:max(6px,env(safe-area-inset-right,0px))!important;padding-top:6px!important;padding-bottom:calc(4px + env(safe-area-inset-bottom,0px))!important}
nav.tabs .in2{max-width:480px;margin:0 auto;display:grid;column-gap:5px}
nav.tabs .in2.r1{grid-template-columns:repeat(6,1fr)}
nav.tabs .in2.r2{grid-template-columns:repeat(7,1fr);margin-top:2px}
nav.tabs .in2 button{font-size:9px!important;letter-spacing:0;overflow-wrap:normal;word-break:keep-all;font-weight:700;line-height:1.1;gap:3px!important;padding:4px 1px!important;text-align:center;min-width:0}
nav.tabs .in2 button span{display:block;max-width:100%}
nav.tabs .in2 button svg.i{width:19px!important;height:19px!important}
nav.tabs .in2 button[aria-current=page]{color:var(--hot)!important}
nav.tabs .navbrand{text-align:center;font-size:9px;font-weight:900;letter-spacing:2.5px;color:var(--txt);opacity:.75;margin-top:2px}
nav.tabs .navbrand span{font-weight:500}
.top .icon-btn svg.i{width:21px;height:21px}
.backsite{padding:6px 9px!important;font-size:11px!important;margin-right:2px}

/* page head */
.back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--hot);font-weight:700;font-size:14px;padding:10px 0 0}
.mtitle{font-weight:900;font-size:clamp(20px,6vw,25px);text-transform:uppercase;margin:6px 0 14px;letter-spacing:.3px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.mtitle small{font-size:11px;font-weight:800;color:var(--hot);border:1px solid var(--hot);border-radius:999px;padding:3px 9px;letter-spacing:.5px}
.lead{color:var(--sub);font-size:13.5px;margin:-6px 0 14px;line-height:1.45}

/* forms */
.box{background:var(--card);border:1px solid var(--edge);border-radius:16px;padding:14px;margin-bottom:12px}
.box>.k,.kk{font-size:11.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--sub);margin:0 0 10px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:10px 10px}
.fg .full{grid-column:1/-1}
.fl{display:grid;gap:5px;min-width:0}
.fl>span{font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#C9CCD2}
.in.ta,textarea.in{height:auto;min-height:70px;padding:10px 12px;resize:vertical;font-family:inherit;line-height:1.4}
select.in{color:var(--txt)}
input[type=date].in,input[type=time].in{color-scheme:dark}
.mq{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--sub);margin:18px 0 8px}

/* foot toggle */
.footsel{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.footsel button{height:48px;border-radius:12px;border:1.5px solid var(--edge);background:var(--bg);color:var(--sub);font-weight:900;letter-spacing:.5px;text-transform:uppercase;font-size:13px}
.footsel button.l[aria-pressed=true]{border-color:var(--left);color:var(--left);background:rgba(255,68,34,.1)}
.footsel button.r[aria-pressed=true]{border-color:var(--right);color:var(--right);background:rgba(0,174,239,.1)}

/* photo */
.photo{display:grid;justify-items:center;gap:6px;margin-bottom:12px}
.photo button{width:96px;height:96px;border-radius:50%;border:1.5px dashed var(--edge);background:var(--bg) center/cover no-repeat;color:var(--sub);display:grid;place-items:center}
.photo button.has{border:2px solid var(--hot)}
.photo small{color:var(--sub);font-size:12px}

/* chips */
.pills{display:flex;flex-wrap:wrap;gap:7px}
.pills button{min-height:34px;padding:0 13px;border-radius:999px;border:1.5px solid var(--edge);background:transparent;color:var(--sub);font-weight:700;font-size:13px}
.pills button[aria-pressed=true]{background:var(--hot);border-color:var(--hot);color:#fff}

/* 1-10 sliders */
.sl{margin:4px 0 12px}
.sl .t{display:flex;justify-content:space-between;font-weight:700;font-size:14.5px;margin-bottom:6px}
.sl .t b{color:var(--hot);font-weight:900}
.sl .c{display:grid;grid-template-columns:38px 1fr 38px;gap:10px;align-items:center}
.sl .c button{height:38px;border-radius:10px;border:1px solid var(--edge);background:var(--card-2);color:var(--txt);font-size:20px;font-weight:700;line-height:1}
.sl input[type=range]{width:100%;accent-color:var(--hot)}
.gs{display:grid;grid-template-columns:96px 1fr 34px;gap:10px;align-items:center;margin:10px 0}
.gs span{font-weight:700}.gs b{color:var(--hot);font-weight:900;font-size:18px;text-align:right}
.gs input{width:100%;accent-color:var(--hot)}

/* VG / G / A / P grading */
.legend{display:flex;gap:12px;font-size:11px;font-weight:800;margin:-4px 0 12px;flex-wrap:wrap}
.legend i{font-style:normal;padding:2px 8px;border-radius:999px}
.cat{color:var(--hot);font-weight:900;letter-spacing:1.4px;text-transform:uppercase;font-size:13px;margin:18px 0 6px;display:flex;justify-content:space-between}
.cat em{font-style:normal;color:var(--sub);font-size:12px;letter-spacing:.5px}
.gr{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid #1d2026}
.gr>span{font-size:14px;line-height:1.25}
.gr .g4{display:flex;gap:5px}
.gr .g4 button{width:32px;height:32px;border-radius:50%;border:1px solid var(--edge);background:var(--card-2);color:var(--dim);font-size:10.5px;font-weight:900;padding:0}
.gr .g4 button[aria-pressed=true][data-v=VG]{background:#1F9D6B;border-color:#1F9D6B;color:#fff}
.gr .g4 button[aria-pressed=true][data-v=G]{background:#2F7BD8;border-color:#2F7BD8;color:#fff}
.gr .g4 button[aria-pressed=true][data-v=A]{background:#C8961B;border-color:#C8961B;color:#fff}
.gr .g4 button[aria-pressed=true][data-v=P]{background:var(--no);border-color:var(--no);color:#fff}
.score{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.score div{background:var(--card);border:1px solid var(--edge);border-radius:12px;padding:10px;text-align:center}
.score b{display:block;font-size:22px;font-weight:900}.score span{font-size:10.5px;color:var(--sub);font-weight:800;text-transform:uppercase;letter-spacing:.5px}

/* action bar: Reset / Share / PDF / Save */
.abar{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:8px;margin:18px 0 6px;padding-top:16px;border-top:1px solid var(--edge)}
.abar button{height:46px;border-radius:12px;border:1px solid var(--edge);background:var(--card);color:var(--txt);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;gap:6px}
.abar button.hot{background:var(--hot);border-color:var(--hot);color:#fff}
.abar button.arm{background:var(--no);border-color:var(--no);color:#fff}
.abar svg.i{width:16px;height:16px}
.note{color:var(--sub);font-size:12px;text-align:center;margin:6px 0 0}

/* saved history */
.saved{display:grid;gap:6px;margin-top:8px}
.saved .row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;background:var(--card);border:1px solid var(--edge);border-radius:12px;padding:10px 12px}
.saved .row b{display:block;font-size:14px}.saved .row span{color:var(--sub);font-size:12px}
.saved .row .acts{display:flex;gap:6px}
.saved .row button{height:32px;padding:0 10px;border-radius:8px;border:1px solid var(--edge);background:var(--card-2);color:var(--txt);font-size:12px;font-weight:700}
.saved .row button.del{color:var(--no)}
.emptyline{color:var(--dim);font-size:13px;padding:6px 0}

/* passport card */
.ppc{background:linear-gradient(135deg,#F04E23,#D7542A 60%,#B83E1A);border-radius:18px;padding:16px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;margin-bottom:12px;position:relative;overflow:hidden}
.ppc .ph{width:72px;height:72px;border-radius:50%;border:2px solid #fff;background:rgba(255,255,255,.15) center/cover no-repeat;display:grid;place-items:center}
.ppc .k{font-size:9.5px;font-weight:900;letter-spacing:1.5px;opacity:.9}
.ppc h2{margin:2px 0;font-size:24px;font-weight:900;text-transform:uppercase;line-height:1}
.ppc .s{font-size:12.5px;opacity:.95}
.ppc .ft{display:inline-block;margin-top:6px;font-size:11px;font-weight:900;letter-spacing:.6px;background:rgba(0,0,0,.25);padding:3px 8px;border-radius:999px}
.ppc img.bd{width:46px;opacity:.95}
.plist{background:var(--card);border:1px solid var(--edge);border-radius:14px;padding:4px 14px;margin-bottom:12px}
.plist div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #1d2026;font-size:13.5px}
.plist div:last-child{border-bottom:0}
.plist div span{color:var(--sub);text-transform:uppercase;font-size:11.5px;font-weight:800;letter-spacing:.8px}
.plist div b{text-align:right;font-weight:700;word-break:break-word}
.pid{display:flex;justify-content:space-between;font-size:11px;font-weight:900;letter-spacing:1px;color:var(--sub);margin:4px 2px 8px}
.trio3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px}
.trio3 div{background:var(--card);border:1px solid var(--edge);border-radius:12px;padding:12px 6px;text-align:center}
.trio3 b{display:block;font-size:24px;font-weight:900}.trio3 span{font-size:10px;color:var(--sub);font-weight:800;letter-spacing:.6px;text-transform:uppercase}
.trio3 .o{color:var(--hot)}.trio3 .g{color:var(--ok)}.trio3 .b{color:var(--right)}

/* coach card */
.coachc{display:flex;gap:12px;align-items:center;background:var(--card);border:1.5px solid #5a2a1c;border-radius:16px;padding:14px;margin-bottom:12px}
.coachc .ic{width:48px;height:48px;border-radius:50%;background:#3a1c13;display:grid;place-items:center;color:var(--hot)}
.coachc b{display:block;font-size:19px;font-weight:900;text-transform:uppercase}.coachc span{color:var(--sub);font-size:13px}

/* lineup pitch */
.forms{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}
.forms button{height:38px;border-radius:10px;border:1px solid var(--edge);background:var(--card);color:var(--sub);font-weight:900;font-size:13px}
.forms button[aria-pressed=true]{background:var(--hot);border-color:var(--hot);color:#fff}
.lpitch{position:relative;aspect-ratio:3/3.6;background:repeating-linear-gradient(0deg,#2F8A3F 0 10%,#2A7E39 10% 20%);border-radius:14px;border:2px solid #4CAF50;overflow:hidden;margin-bottom:12px}
.lpitch:before{content:"";position:absolute;inset:4%;border:2px solid rgba(255,255,255,.55);border-radius:4px}
.lpitch:after{content:"";position:absolute;left:4%;right:4%;top:50%;border-top:2px solid rgba(255,255,255,.55)}
.lpitch .cc{position:absolute;left:50%;top:50%;width:22%;aspect-ratio:1;border:2px solid rgba(255,255,255,.55);border-radius:50%;transform:translate(-50%,-50%)}
.lpitch .bx{position:absolute;left:30%;right:30%;height:9%;border:2px solid rgba(255,255,255,.55)}
.lpitch .bx.t{top:4%;border-top:0}.lpitch .bx.b{bottom:4%;border-bottom:0}
.dot{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:2px;z-index:2;background:none;border:0;padding:0}
.dot i{width:34px;height:34px;border-radius:50%;background:var(--hot);border:2px solid #fff;color:#fff;font-style:normal;font-size:10px;font-weight:900;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.dot em{font-style:normal;font-size:10px;font-weight:800;color:#fff;background:rgba(0,0,0,.45);padding:1px 5px;border-radius:6px;max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slots{display:grid;gap:6px}
.slotrow{display:grid;grid-template-columns:44px 1fr;gap:8px;align-items:center}
.slotrow b{height:40px;border-radius:10px;background:#3a1c13;color:var(--hot);display:grid;place-items:center;font-size:12px;font-weight:900}

/* roster */
.rrow{display:grid;grid-template-columns:44px 1fr auto;gap:8px;align-items:center;background:var(--card);border:1px solid var(--edge);border-radius:12px;padding:8px;margin-bottom:6px}
.rrow .num{height:38px;border-radius:9px;background:var(--card-2);display:grid;place-items:center;font-weight:900}
.rrow .nm b{display:block;font-size:14.5px}.rrow .nm span{font-size:11.5px;color:var(--sub)}
.rrow .nm .st{color:var(--hot);font-weight:800}
.att{display:flex;gap:4px}
.att button{width:34px;height:34px;border-radius:9px;border:1px solid var(--edge);background:var(--card-2);color:var(--dim);font-weight:900;font-size:12px;padding:0}
.att button[aria-pressed=true][data-a=P]{background:#1F9D6B;border-color:#1F9D6B;color:#fff}
.att button[aria-pressed=true][data-a=L]{background:#C8961B;border-color:#C8961B;color:#fff}
.att button[aria-pressed=true][data-a=A]{background:var(--no);border-color:var(--no);color:#fff}
.rgrade{grid-column:1/-1;display:flex;gap:4px;align-items:center;flex-wrap:wrap;padding-left:52px}
.rgrade span{font-size:11px;color:var(--sub);font-weight:800;margin-right:4px}
.rgrade button{min-width:30px;height:28px;border-radius:8px;border:1px solid var(--edge);background:var(--card-2);color:var(--dim);font-size:12px;font-weight:800;padding:0 6px}
.rgrade button[aria-pressed=true]{background:var(--hot);border-color:var(--hot);color:#fff}
.rrow .x{background:none;border:0;color:var(--dim);font-size:18px;padding:4px 6px}
.addrow{display:grid;grid-template-columns:62px 1fr 1fr auto;gap:6px;margin-top:8px}
.addrow button{padding:0 14px;border-radius:10px;border:0;background:var(--hot);color:#fff;font-weight:900}

/* 30-day challenge */
.prog{height:12px;border-radius:999px;background:var(--card-2);overflow:hidden;margin:8px 0 4px}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--hot),#FFB020)}
.days{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:12px 0}
.days button{aspect-ratio:1;border-radius:10px;border:1.5px solid var(--edge);background:var(--card);color:var(--sub);font-weight:900;font-size:14px;padding:0;position:relative}
.days button.done{background:var(--ok);border-color:var(--ok);color:#06150f}
.days button.today{border-color:var(--hot);color:var(--txt)}
.days button[aria-current=true]{outline:2px solid #fff;outline-offset:1px}
.drill h3{margin:0 0 4px;font-size:19px;font-weight:900;text-transform:uppercase}
.drill .wk{font-size:11px;font-weight:900;letter-spacing:1px;color:var(--hot)}
.drill p{margin:6px 0;color:#d6d8dc;line-height:1.5}
.drill ul{margin:6px 0 0;padding-left:18px;color:#d6d8dc;line-height:1.5}
.drill .rp{display:inline-block;margin-top:6px;font-weight:800;color:var(--gold)}

/* match day prep */
.count{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.count div{background:#3a1c13;border:1px solid #5a2a1c;border-radius:12px;padding:10px;text-align:center}
.count b{display:block;font-size:24px;font-weight:900;color:var(--hot)}.count span{font-size:10.5px;font-weight:800;color:var(--sub);text-transform:uppercase}
.checks{display:grid;gap:6px}
.checks label{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--edge);border-radius:10px;padding:10px 12px;font-size:14px}
.checks input{width:20px;height:20px;accent-color:var(--ok)}
.checks label.on{border-color:#1F9D6B;color:#9fe3c6}
.ha{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ha button{height:40px;border-radius:10px;border:1px solid var(--edge);background:var(--bg);color:var(--sub);font-weight:900}
.ha button[aria-pressed=true]{background:var(--hot);border-color:var(--hot);color:#fff}

/* AiPlayerAgent */
.agenthead{display:flex;gap:10px;align-items:center;background:#3a1c13;border:1px solid #5a2a1c;border-radius:14px;padding:12px;margin-bottom:10px}
.agenthead .ic{width:42px;height:42px;border-radius:50%;background:var(--hot);display:grid;place-items:center;color:#fff}
.agenthead b{display:block;font-weight:900}.agenthead span{font-size:12px;color:var(--sub)}
.qa{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;margin-bottom:10px}
.qa button{flex:none;min-height:36px;padding:0 13px;border-radius:999px;border:1.5px solid var(--hot);background:transparent;color:var(--txt);font-weight:800;font-size:12.5px}
.chat{display:grid;gap:10px;margin-bottom:12px}
.msg{max-width:92%;padding:11px 13px;border-radius:14px;line-height:1.48;font-size:14px;white-space:normal}
.msg.a{background:var(--card);border:1px solid var(--edge);justify-self:start;border-top-left-radius:4px}
.msg.u{background:var(--hot);color:#fff;justify-self:end;border-top-right-radius:4px}
.msg h4{margin:10px 0 4px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--hot)}
.msg h4:first-child{margin-top:0}
.msg ul{margin:4px 0;padding-left:18px}.msg p{margin:4px 0}
.msg .mact{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.msg .mact button{height:32px;padding:0 11px;border-radius:8px;border:1px solid var(--edge);background:var(--card-2);color:var(--txt);font-size:12px;font-weight:800}
.ask{display:grid;grid-template-columns:1fr 48px;gap:8px;position:sticky;bottom:calc(140px + env(safe-area-inset-bottom,0px));background:var(--bg);padding:8px 0}
.ask button{border-radius:12px;border:0;background:var(--hot);color:#fff;display:grid;place-items:center}
.opts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.opts button{min-height:32px;padding:0 11px;border-radius:999px;border:1px solid var(--edge);background:var(--card-2);color:var(--txt);font-size:12.5px;font-weight:700}
.agentcta{margin:12px 0 4px}
.lock{display:grid;gap:10px;justify-items:center;text-align:center;padding:30px 18px;border:1.5px solid var(--hot);border-radius:18px;background:var(--card)}

/* ---------- soccer look: pitch header band on every page ---------- */
:root{--pitchsvg:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20300%20190%22%20preserveAspectRatio%3D%22none%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22rgba%28255%2C255%2C255%2C.38%29%22%20stroke-width%3D%221.6%22%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%22288%22%20height%3D%22178%22%20rx%3D%222%22/%3E%3Cline%20x1%3D%22150%22%20y1%3D%226%22%20x2%3D%22150%22%20y2%3D%22184%22/%3E%3Ccircle%20cx%3D%22150%22%20cy%3D%2295%22%20r%3D%2226%22/%3E%3Ccircle%20cx%3D%22150%22%20cy%3D%2295%22%20r%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C.5%29%22/%3E%3Crect%20x%3D%226%22%20y%3D%2250%22%20width%3D%2240%22%20height%3D%2290%22/%3E%3Crect%20x%3D%226%22%20y%3D%2274%22%20width%3D%2214%22%20height%3D%2242%22/%3E%3Crect%20x%3D%22254%22%20y%3D%2250%22%20width%3D%2240%22%20height%3D%2290%22/%3E%3Crect%20x%3D%22280%22%20y%3D%2274%22%20width%3D%2214%22%20height%3D%2242%22/%3E%3Cpath%20d%3D%22M46%2080a18%2018%200%200%201%200%2030M254%2080a18%2018%200%200%200%200%2030%22/%3E%3Cpath%20d%3D%22M6%2014a8%208%200%200%200%208-8M286%206a8%208%200%200%200%208%208M6%20176a8%208%200%200%201%208%208M286%20184a8%208%200%200%201%208-8%22/%3E%3C/g%3E%3C/svg%3E")}
.pband{position:relative;overflow:hidden;border-radius:16px;padding:14px 16px 12px;margin:6px 0 14px;border:1px solid #36704C;isolation:isolate;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2080%2080%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2234%22%20fill%3D%22none%22%20stroke%3D%22rgba%28255%2C255%2C255%2C.38%29%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%222.6%22%20fill%3D%22rgba%28255%2C255%2C255%2C.5%29%22/%3E%3C/svg%3E") center/72px 72px no-repeat,repeating-linear-gradient(90deg,#2C6A45 0 12.5%,#276140 12.5% 25%)}
.pband:before{content:"";position:absolute;inset:6px;border:1.6px solid rgba(255,255,255,.38);border-radius:10px;z-index:-1;pointer-events:none}
.pband:after{content:"";position:absolute;top:6px;bottom:6px;left:50%;border-left:1.6px solid rgba(255,255,255,.38);z-index:-1;pointer-events:none}
.pband .mtitle{margin:0;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.35)}
.pband .lead{margin:6px 0 0;color:#DDEFE4}
.pband .mtitle small{background:rgba(0,0,0,.3);color:#fff;border-color:rgba(255,255,255,.5)}

/* ---------- player card (registration) ---------- */
.rcard{position:relative;overflow:hidden;border-radius:22px;padding:14px 16px 12px;margin-bottom:16px;border:2px solid #3E8A5C;
  background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.14),transparent 55%),repeating-linear-gradient(90deg,#2F7A4B 0 12.5%,#29703F 12.5% 25%);
  box-shadow:0 12px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.2)}
.rcard.l{border-color:var(--left);box-shadow:0 12px 30px rgba(255,68,34,.25),inset 0 1px 0 rgba(255,255,255,.2)}
.rcard.r{border-color:var(--right);box-shadow:0 12px 30px rgba(0,174,239,.25),inset 0 1px 0 rgba(255,255,255,.2)}
.rlines{position:absolute;inset:0;background:var(--pitchsvg) center/100% 100% no-repeat;pointer-events:none}
.rtop,.rmid,.rbot{position:relative}
.rtop{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;font-weight:900;letter-spacing:2px;color:#E7F5EC}
.rtop img{width:30px;height:30px}
.rmid{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:center;margin:12px 0 10px}
.rph{width:104px;height:104px;border-radius:50%;border:3px solid #fff;background:rgba(0,0,0,.28) center/cover no-repeat;color:#fff;display:grid;place-items:center;align-content:center;gap:2px;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.rph svg.i{width:30px;height:30px}.rph small{font-size:11px;font-weight:800}
.rnm{font-size:clamp(22px,6.6vw,28px);font-weight:900;text-transform:uppercase;line-height:1;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.4);word-break:break-word}
.rmeta{margin-top:6px;font-weight:800;font-size:13.5px;color:#fff}
.rclub{font-size:12.5px;color:#D5EADC;margin-top:2px}
.rfoot{display:inline-block;margin-top:8px;font-size:11px;font-weight:900;letter-spacing:.8px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.32);color:#fff}
.rfoot.l{background:var(--left)}.rfoot.r{background:var(--right)}
.rbot{display:flex;align-items:center;justify-content:center;gap:6px;font-size:10px;font-weight:900;letter-spacing:2.4px;color:#fff;border-top:1px solid rgba(255,255,255,.25);padding-top:8px}
.rbot span{font-weight:500}.rbot img{width:16px;height:16px}
.rq{text-align:center;font-size:clamp(19px,5.6vw,23px);font-weight:900;text-transform:uppercase;margin:6px 0 10px;line-height:1.15}
.rq .lc{color:var(--left)}.rq .rc{color:var(--right)}
.footcards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.footcards button{border-radius:16px;border:2px solid var(--edge);background:var(--card);color:var(--txt);padding:14px 10px;display:grid;justify-items:center;gap:6px;text-align:center}
.footcards button i{width:60px;height:60px;display:block;background:currentColor;-webkit-mask:url(../assets/badge-player-white.png) center/contain no-repeat;mask:url(../assets/badge-player-white.png) center/contain no-repeat}
.footcards button.l i{transform:scaleX(-1)}
.footcards button b{font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.5px}
.footcards button span{font-size:11.5px;color:var(--sub);line-height:1.3}
.footcards .l{color:var(--left)}.footcards .r{color:var(--right)}
.footcards .l b,.footcards .r b{color:inherit}
.footcards .l[aria-pressed=true]{border-color:var(--left);background:rgba(255,68,34,.12);box-shadow:0 0 0 3px rgba(255,68,34,.18)}
.footcards .r[aria-pressed=true]{border-color:var(--right);background:rgba(0,174,239,.12);box-shadow:0 0 0 3px rgba(0,174,239,.18)}
.box>.k .kh{display:inline-flex;align-items:center;gap:8px;color:var(--txt)}
.box>.k .kh svg.i{width:18px;height:18px;color:var(--hot)}
.box>.k em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:600;color:var(--dim)}
.box{border-left:3px solid #2C6A45}
nav.tabs .navbrand{display:flex;align-items:center;justify-content:center;gap:5px}
nav.tabs .navbrand img{width:13px;height:13px}

/* keep the Touch Counter pitch markings clean (the .box name is shared with form cards) */
.pitch .box{background:none;padding:0;margin:0;border-radius:0}

/* ================= LIGHT LOOK ("sideline mode") =================
   White and black with TOUCHES orange highlights. Green pitches stay green. Switch in Settings: Dark / Light / Auto. */
html[data-theme=light]{--bg:#FFFFFF;--card:#F4F5F3;--card-2:#E9EBE7;--edge:#D8DBD5;--txt:#0B0C0E;--sub:#4E535C;--dim:#7A7F88;--gold:#B07D00;color-scheme:light}
html[data-theme=light] :root,html[data-theme=light]{color-scheme:light}
html[data-theme=light] .top{background:rgba(255,255,255,.95);border-bottom:1px solid var(--edge)}
html[data-theme=light] nav.tabs{background:rgba(255,255,255,.97);box-shadow:0 -4px 14px rgba(0,0,0,.06)}
html[data-theme=light] .top .logo img,html[data-theme=light] .brandline img,html[data-theme=light] nav.tabs .navbrand img{filter:invert(1)}
html[data-theme=light] .sh.sub,html[data-theme=light] .sc .lb,html[data-theme=light] .sc.red .lb,html[data-theme=light] .fl>span{color:#3E434B}
html[data-theme=light] .gr,html[data-theme=light] .plist div{border-bottom-color:#E3E5E1}
html[data-theme=light] .coachc{border-color:#F3C7B8}
html[data-theme=light] .coachc .ic,html[data-theme=light] .slotrow b,html[data-theme=light] .count div,html[data-theme=light] .agenthead{background:#FDEBE4;border-color:#F3C7B8}
html[data-theme=light] .drill p,html[data-theme=light] .drill ul{color:#2C3036}
html[data-theme=light] .pn div{background:#E3F6EB;border-color:#9BD8B7;color:#0B3A22}
html[data-theme=light] .pn div.neg{background:#FCE7E7;border-color:#F2B1B3;color:#5A1416}
html[data-theme=light] .tile{box-shadow:0 1px 2px rgba(0,0,0,.05)}
html[data-theme=light] .tile.hit{background:#DDE0DA}
html[data-theme=light] .tile.undo{background:#FBD9DA}
html[data-theme=light] .slider input{background:linear-gradient(90deg,var(--hot) var(--p,0%),#D8DBD5 var(--p,0%))}
html[data-theme=light] .card svg.ch text{fill:#6B707A}
html[data-theme=light] .tag.t{background:#D9EEF8;color:#0B5F86}
html[data-theme=light] .tag.w{background:#FFF1C9;color:#7A5600}
html[data-theme=light] .banner{background:#FFF6DA;border-color:#EBCB6B;color:#6A4E00}
html[data-theme=light] .box,html[data-theme=light] .sc,html[data-theme=light] .tool,html[data-theme=light] .panel{box-shadow:0 1px 3px rgba(0,0,0,.05)}
html[data-theme=light] .msg.a{background:#F4F5F3}
html[data-theme=light] .gr .g4 button,html[data-theme=light] .att button,html[data-theme=light] .rgrade button{background:#FFFFFF;color:#6B707A}
html[data-theme=light] .footcards button{background:#FFFFFF}
html[data-theme=light] .checks label.on{color:#0B5A36;background:#E3F6EB}
html[data-theme=light] .rrow .num{background:#FFFFFF}
html[data-theme=light] .toast{background:#0B0C0E;color:#fff}

/* theme switch in Settings */
.themesel{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:4px 0 12px}
.themesel button{height:38px;border-radius:10px;border:1px solid var(--edge);background:var(--bg);color:var(--sub);font-weight:800;font-size:13px}
.themesel button[aria-pressed=true]{background:var(--hot);border-color:var(--hot);color:#fff}

/* Light look: keep text WHITE on every green or dark panel so it stays easy to read */
html[data-theme=light] .hero,html[data-theme=light] .pcard,html[data-theme=light] .pick,html[data-theme=light] .ctr,
html[data-theme=light] .pband,html[data-theme=light] .rcard,html[data-theme=light] .ppc,html[data-theme=light] .lpitch{color:#fff}
html[data-theme=light] .hero h2,html[data-theme=light] .pcard h2,html[data-theme=light] .pick h3,html[data-theme=light] .ctr b,
html[data-theme=light] .hero .trio b,html[data-theme=light] .pcard .trio b{color:#fff}
html[data-theme=light] .pcard .trio span,html[data-theme=light] .hero .trio span{color:#BFE9D0}
/* "Want more than the counter?" box: light card in the Light look */
html[data-theme=light] .upsell{background:#FFF4EF;border-color:var(--hot)}
html[data-theme=light] .upsell b{color:#0B0C0E}
html[data-theme=light] .upsell span{color:#4E535C}

/* iPhone: date and time boxes must stay inside the screen */
input[type=date].in,input[type=time].in{-webkit-appearance:none;appearance:none;display:block;width:100%;max-width:100%;min-width:0;text-align:left;box-sizing:border-box}
input[type=date].in::-webkit-date-and-time-value,input[type=time].in::-webkit-date-and-time-value{text-align:left}
.fl{min-width:0;overflow:hidden}

/* Light look: all secondary (grey) text is solid black for easy reading in sunlight */
html[data-theme=light]{--sub:#000000;--dim:#000000}
html[data-theme=light] .sh.sub,html[data-theme=light] .sc .lb,html[data-theme=light] .sc.red .lb,html[data-theme=light] .fl>span,
html[data-theme=light] .drill p,html[data-theme=light] .drill ul,html[data-theme=light] .upsell span,html[data-theme=light] .card svg.ch text,
html[data-theme=light] .gr .g4 button,html[data-theme=light] .att button,html[data-theme=light] .rgrade button,html[data-theme=light] .lead,
html[data-theme=light] .note,html[data-theme=light] .emptyline,html[data-theme=light] .mq,html[data-theme=light] .box>.k,html[data-theme=light] .kk,
html[data-theme=light] .footcards button span,html[data-theme=light] .box>.k em,html[data-theme=light] nav.tabs button{color:#000}
html[data-theme=light] .card svg.ch text{fill:#000}
html[data-theme=light] nav.tabs .in2 button[aria-current=page]{color:var(--hot)!important}
/* hint text inside empty boxes stays dark grey so it isn't mistaken for typed text */
html[data-theme=light] .in::placeholder,html[data-theme=light] textarea::placeholder{color:#4A4A4A;opacity:1}
/* page-title band text stays white on green */
html[data-theme=light] .pband .lead{color:#F2FBF5}

/* ---------- unlock / PayPal ---------- */
[data-nav].paylock{position:relative}
.tool.paylock b::after{content:"";display:inline-block;width:11px;height:11px;margin-left:6px;vertical-align:-1px;background:currentColor;opacity:.7;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 10V7a6 6 0 0 1 12 0v3h1v12H5V10zm2 0h8V7a4 4 0 0 0-8 0z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 10V7a6 6 0 0 1 12 0v3h1v12H5V10zm2 0h8V7a4 4 0 0 0-8 0z'/%3E%3C/svg%3E") center/contain no-repeat}
nav.tabs [data-nav].paylock::after{content:"";position:absolute;top:3px;right:calc(50% - 16px);width:8px;height:8px;border-radius:50%;background:var(--hot)}
.paycard{background:var(--card);border:1.5px solid var(--hot);border-radius:18px;padding:18px 16px;margin-bottom:12px;text-align:center}
.payprice{font-size:44px;font-weight:900;letter-spacing:-.02em;line-height:1;color:var(--txt)}
.paysub{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--sub);margin-top:6px}
.paylead{font-weight:800;margin:16px 0 8px;color:var(--txt)}
.payperks{list-style:none;padding:0;margin:0 0 10px;display:grid;grid-template-columns:1fr 1fr;gap:6px;text-align:left}
.payperks li{background:rgba(240,78,35,.1);border-radius:10px;padding:8px 10px;font-size:13px;font-weight:700;color:var(--txt)}
.payperks li::before{content:"✓ ";color:var(--hot);font-weight:900}
.payfree{font-size:12px;color:var(--sub);margin:4px 0 14px}
.ppbox{min-height:110px;margin:6px 0 4px;background:#fff;border-radius:14px;padding:10px 10px 2px}
.paywait{color:#4E535C;font-size:13px;padding:30px 0;margin:0}
.paymsg{font-size:13px;font-weight:700;min-height:18px;margin:8px 0 0;color:var(--txt)}
.paymsg.bad{color:var(--no)}
.paynote{font-size:12px;color:var(--sub);line-height:1.45;margin:10px 0 6px}
.paylink{background:none;border:0;color:var(--hot);font-weight:800;font-size:13px;text-decoration:underline;padding:6px;cursor:pointer}
.paytest{background:#FFC107;color:#000;font-weight:900;text-align:center;font-size:12px;letter-spacing:.06em;border-radius:10px;padding:8px;margin:0 0 10px}
.payrest h3{margin:0 0 6px;font-size:16px}.payrest p{font-size:13px;color:var(--sub);margin:0 0 10px}
.payrow{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.payrow .in{flex:1 1 180px;text-transform:uppercase}
.payrow button{border:1.5px solid var(--edge);border-radius:12px;padding:11px 16px;font-weight:800;background:var(--card);color:var(--txt)}
.payrow button.hot{background:var(--hot);border-color:var(--hot);color:#fff}
.payok{font-size:22px;font-weight:900;color:var(--ok)}
.paytxn{font:800 20px/1.2 ui-monospace,Menlo,monospace;letter-spacing:.06em;background:var(--bg);border:1.5px dashed var(--hot);border-radius:12px;padding:12px;margin:6px 0;user-select:all;color:var(--txt);word-break:break-all}