:root{
  --navy:#17275c;--navy2:#203773;--yellow:#f2c526;--bg:#f3f5f9;--card:#fff;
  --text:#192033;--muted:#737c92;--line:#e5e8f0;--green:#26945b;--red:#cf4a4a;
  --shadow:0 7px 24px rgba(23,39,92,.08);--radius:18px
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif}
body{padding-bottom:92px}
button,input,select{font:inherit}
button{cursor:pointer}
.app-header{background:linear-gradient(135deg,var(--navy),var(--navy2));color:white;padding:calc(12px + env(safe-area-inset-top)) 16px 14px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:11px;min-width:0}.brand img{width:46px;height:46px;border-radius:50%;background:white;padding:2px}.brand h1{font-size:18px;margin:1px 0 0;letter-spacing:.2px}.brand-kicker{font-size:9px;opacity:.75;letter-spacing:1.3px}.header-date{font-size:12px;opacity:.86;text-align:right}
.app-main{max-width:760px;margin:0 auto;padding:14px 14px 24px}
.tab-page{display:none}.tab-page.active{display:block}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:3px 2px 12px}.page-head h2{margin:1px 0;font-size:25px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.1px;color:var(--muted)}
.icon-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:white;font-size:19px}
.segmented{display:grid;grid-template-columns:repeat(3,1fr);background:#e7eaf2;padding:4px;border-radius:13px;margin-bottom:12px}
.segmented button{border:0;background:transparent;padding:10px 8px;border-radius:10px;color:var(--muted);font-weight:700}
.segmented button.active{background:white;color:var(--navy);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.hero-card,.card,.timer-panel{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:12px;border:1px solid rgba(23,39,92,.04)}
.hero-card{background:linear-gradient(160deg,#fff 50%,#f6f8fd)}
.hero-top,.card-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.opponent{font-size:18px;font-weight:800;margin-top:3px}.status-chip{font-size:11px;font-weight:800;padding:7px 9px;border-radius:999px;background:#eef1f7;color:var(--navy)}
.score-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:18px 0 8px}
.score-display{display:flex;align-items:center;gap:10px;font-size:38px;font-weight:900;letter-spacing:-1px;min-width:115px;justify-content:center}.score-display b{font-size:24px;color:var(--muted)}
.goal-btn{border:0;border-radius:13px;padding:13px 8px;font-weight:800}.goal-btn.us{background:var(--yellow);color:#382e00}.goal-btn.them{background:#eef1f6;color:#44506a}
.score-tools{display:flex;justify-content:center;gap:14px}.text-btn{border:0;background:transparent;color:var(--navy);font-weight:700;padding:6px}
.timer-panel{background:var(--navy);color:white}.timer-main{display:flex;justify-content:space-between;align-items:center}.timer-panel .eyebrow{color:#b7c3e7}.timer{font-size:46px;font-weight:900;letter-spacing:1px;font-variant-numeric:tabular-nums}.period-box{text-align:right}.period-box span{display:block;font-size:11px;color:#b7c3e7}.period-box strong{font-size:18px}
.progress{height:9px;background:#405080;border-radius:10px;margin:14px 0 12px;position:relative;overflow:visible}.progress>div{height:100%;width:0;background:var(--yellow);border-radius:10px}.progress i{position:absolute;top:-3px;width:2px;height:15px;background:#9aa7ce}.progress .m5{left:33.333%}.progress .m10{left:66.666%}
.timer-actions{display:grid;grid-template-columns:2fr 1fr;gap:9px}.primary,.secondary,.danger,.ghost,.injury-btn,.pending-sub{border:0;border-radius:12px;min-height:44px;padding:10px 14px;font-weight:800}.primary{background:var(--yellow);color:#3e3200}.secondary{background:#edf0f5;color:var(--navy)}.danger{background:#ffe7e7;color:#a32626}.ghost{background:transparent;color:var(--muted)}.full{width:100%;margin-top:8px}.small{min-height:36px;padding:8px 11px;font-size:13px}
.pending-sub{width:100%;margin-top:9px;background:#fff4bf;color:#5b4700}.hidden{display:none!important}
.card-title{margin-bottom:12px}.card-title>div{display:flex;align-items:center;gap:7px}.card-title span{font-size:12px;color:var(--muted)}
.mini-dot{width:9px;height:9px;border-radius:50%;display:inline-block}.mini-dot.field{background:var(--green)}.mini-dot.bench{background:#a6adbd}
.shirt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.shirt{background:#f3f6fc;border-radius:14px;padding:12px 5px 9px;text-align:center;font-size:12px;font-weight:800;color:var(--navy)}.shirt .jersey{font-size:28px;line-height:1;margin-bottom:5px}
.bench-line{display:grid;grid-template-columns:auto auto 1fr;gap:7px;align-items:start;border-top:1px solid var(--line);padding-top:13px;margin-top:13px;font-size:13px}.bench-line div{text-align:right;color:var(--muted)}
.injury-btn{width:100%;margin-top:13px;background:#fff7d8;color:#725800;border:1px solid #f0da83}
.sub-columns{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch}.sub-box{border-radius:13px;padding:11px;background:#f7f8fb}.sub-box span{font-size:10px;font-weight:900;letter-spacing:1px}.sub-box strong{display:block;margin-top:4px;font-size:13px}.sub-box.out{border-left:4px solid var(--red)}.sub-box.in{border-left:4px solid var(--green)}.swap-arrow{align-self:center;color:var(--muted);font-size:20px}
.compact{padding:13px}.quick-stat-row{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}.quick-stat-row div+div{border-left:1px solid var(--line)}.quick-stat-row span{display:block;font-size:10px;color:var(--muted)}.quick-stat-row strong{display:block;margin-top:4px}
.mode-controls{display:flex;gap:10px;align-items:end;margin-top:10px}.mode-controls label{flex:1}.mode-controls button{margin-bottom:1px}
label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:10px}input,select{width:100%;margin-top:5px;border:1px solid #dfe3ec;border-radius:11px;background:white;padding:12px;color:var(--text);font-size:16px;min-height:44px}
.availability{display:grid;gap:7px}.av-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f0f2f6}.switch{width:50px;height:29px;border-radius:30px;border:0;background:#cbd0db;position:relative}.switch:after{content:"";position:absolute;top:3px;left:3px;width:23px;height:23px;background:white;border-radius:50%;transition:.18s}.switch.on{background:var(--green)}.switch.on:after{left:24px}
.manual-period{padding:10px 0;border-top:1px solid var(--line)}.manual-period h4{margin:0 0 8px}.manual-selects{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.manual-selects select{margin:0}
.rotation-preview{display:grid;gap:8px}.rotation-row{display:grid;grid-template-columns:58px 1fr;gap:10px;align-items:center;padding:10px;border-radius:12px;background:#f6f8fc}.rotation-row strong{font-size:12px}.rotation-row span{font-size:12px;color:var(--muted)}
.history-list{display:grid;gap:11px}.history-card{background:white;border:1px solid var(--line);border-radius:17px;padding:15px;box-shadow:var(--shadow)}.history-head{display:flex;justify-content:space-between;gap:8px;align-items:start}.history-date{font-size:18px;font-weight:900}.history-summary{font-size:12px;color:var(--muted);margin-top:3px}.match-result-row{display:grid;grid-template-columns:48px 1fr auto;gap:8px;padding:10px 0;border-top:1px solid var(--line);align-items:center}.match-result-row:first-of-type{margin-top:10px}.score-pill{background:#eef1f6;padding:6px 9px;border-radius:9px;font-weight:900}
.history-actions{display:flex;gap:8px;margin-top:8px}.history-actions button{flex:1}
.stats-tabs button{font-size:12px}.stats-list{display:grid;gap:9px}.player-stat{background:white;border-radius:16px;padding:13px 14px;box-shadow:var(--shadow);display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center}.player-stat .name{font-weight:900}.player-stat .label{font-size:10px;color:var(--muted)}.player-stat .value{font-weight:900;text-align:right}
.help{font-size:12px;line-height:1.45;color:var(--muted);margin:4px 0 12px}.center{text-align:center}.stack-actions{display:grid;gap:8px}.backup-info{margin-top:10px;font-size:11px;color:var(--muted);word-break:break-word}.danger-card{border-color:#f2cccc}.player-setting-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end;border-top:1px solid var(--line);padding:8px 0}.player-setting-row:first-child{border-top:0}.player-setting-row label{margin:0}.player-setting-row button{min-width:72px}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-top:1px solid #dfe3eb;display:grid;grid-template-columns:repeat(5,1fr);padding:7px 6px calc(7px + env(safe-area-inset-bottom));z-index:30}.bottom-nav button{border:0;background:transparent;color:#848b9d;font-size:10px;font-weight:700;padding:5px 2px}.bottom-nav button span{display:block;font-size:19px;margin-bottom:2px}.bottom-nav button.active{color:var(--navy)}
dialog{border:0;border-radius:20px;padding:0;width:min(92vw,430px);box-shadow:0 24px 80px rgba(0,0,0,.28)}dialog::backdrop{background:rgba(18,24,42,.45)}.dialog-card{padding:18px}.dialog-card h3{margin:0 0 12px;font-size:20px}.dialog-icon{text-align:center;font-size:34px}.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.dialog-list{display:grid;gap:7px;margin:10px 0}.dialog-list button{border:0;border-radius:11px;background:#f0f3f8;padding:12px;font-weight:800;color:var(--navy)}.confirm-time{background:#f3f5f9;border-radius:12px;text-align:center;padding:10px;margin:12px 0}.confirm-time strong{display:block;font-size:24px;font-variant-numeric:tabular-nums}.final-score-inputs{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:end}.final-score-inputs b{padding-bottom:15px}
@media(max-width:380px){.score-row{grid-template-columns:1fr auto 1fr}.goal-btn{font-size:12px;padding:11px 5px}.score-display{font-size:32px;min-width:98px}.shirt-grid{grid-template-columns:repeat(2,1fr)}.quick-stat-row{font-size:12px}.brand h1{font-size:16px}}

/* v4.1 enhancements */
.saturday-overview{padding-bottom:13px}
.overview-matches{display:grid;gap:8px}
.overview-match{display:grid;grid-template-columns:58px 1fr auto;gap:8px;align-items:center;padding:10px;border-radius:12px;background:#f6f8fc;border:1px solid #edf0f6}
.overview-match.active{border-color:#e8c22e;background:#fff9dc}
.overview-match .mno{font-size:11px;font-weight:900;color:var(--navy)}
.overview-match .opp{font-size:13px;font-weight:800}
.overview-match .score{font-weight:900}
.overview-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.overview-summary div{background:#f7f8fb;border-radius:12px;padding:10px}
.overview-summary span{display:block;font-size:10px;color:var(--muted)}
.overview-summary strong{display:block;margin-top:3px}
.sub-source-toggle{margin:0 0 10px}
.sub-time-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.sub-time-switch button{border:1px solid var(--line);background:#f8f9fc;color:var(--muted);border-radius:10px;padding:8px;font-weight:800}
.sub-time-switch button.active{background:var(--navy);color:white;border-color:var(--navy)}
.sub-help{margin:10px 0 0}
.timeline-mini,.timeline-list{display:grid;gap:8px}
.timeline-event{display:grid;grid-template-columns:44px 24px 1fr;gap:8px;align-items:start;padding:8px 0;border-top:1px solid #eef0f4}
.timeline-event:first-child{border-top:0}
.timeline-event .time{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.timeline-event .icon{font-size:15px;text-align:center}
.timeline-event .desc{font-size:12px}
.timeline-event .desc strong{display:block;font-size:12px}
.smart-card{border:1px solid #e8d986;background:linear-gradient(180deg,#fff,#fffdf2)}
.report-btn{margin:0 0 12px}
.player-stat{cursor:pointer}
.player-stat:active{transform:scale(.995)}
.player-breakdown{display:grid;gap:7px;margin-top:10px}
.player-break-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:10px;border-radius:11px;background:#f6f8fc;font-size:12px}
.player-detail-total{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.player-detail-total div{background:#f6f8fc;border-radius:12px;padding:10px;text-align:center}
.player-detail-total span{display:block;font-size:10px;color:var(--muted)}
.player-detail-total strong{display:block;margin-top:4px}
.report-card{border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#eaf4ff,#fff6d9 70%,#17275c);padding:16px;color:var(--navy)}
.report-card .report-head{display:flex;align-items:center;gap:10px}
.report-card .report-head img{width:52px;height:52px;border-radius:50%;background:white;padding:2px}
.report-card .report-title{font-weight:900;font-size:18px}
.report-card .report-sub{font-size:11px;opacity:.8}
.report-card .report-summary{font-size:17px;font-weight:900;text-align:center;margin:12px 0}
.report-card .report-match{display:grid;grid-template-columns:52px 1fr auto;gap:8px;background:rgba(255,255,255,.78);padding:8px;border-radius:10px;margin:6px 0;font-size:12px}
.report-card .report-scorers{background:rgba(255,255,255,.82);padding:9px;border-radius:10px;margin-top:8px;font-size:11px}
.report-card .report-footer{color:white;text-align:center;font-size:10px;margin-top:14px;padding-top:12px}
@media(max-width:380px){.overview-match{grid-template-columns:50px 1fr auto}.report-card{padding:12px}}

/* v4.2 — AS'80 kit styling and squad numbers */
.shirt-grid{gap:10px}
.kit-player{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-width:0}
.kit-shirt{
  position:relative;width:66px;height:67px;margin:4px auto 7px;
  background:linear-gradient(145deg,#101725,#17243a 70%,#0e1626);
  clip-path:polygon(18% 8%,33% 0,67% 0,82% 8%,100% 28%,85% 42%,77% 31%,77% 100%,23% 100%,23% 31%,15% 42%,0 28%);
  filter:drop-shadow(0 5px 5px rgba(16,27,52,.18));
  overflow:hidden;
}
.kit-shirt:after{
  content:"";position:absolute;left:20%;right:20%;bottom:0;height:5px;
  background:#f1c928;
}
.kit-collar{
  position:absolute;left:50%;top:-2px;transform:translateX(-50%);
  width:26px;height:14px;border-radius:0 0 12px 12px;
  border:4px solid #f1c928;border-top:0;background:#101725;z-index:3
}
.kit-stripes{
  position:absolute;width:24px;height:4px;background:#f1c928;top:24px;opacity:.95;
  box-shadow:0 7px 0 #f1c928;
}
.kit-stripes.left{left:-3px;transform:rotate(-18deg)}
.kit-stripes.right{right:-3px;transform:rotate(18deg)}
.kit-number{
  position:absolute;left:50%;top:26px;transform:translateX(-50%);
  color:#fff;font-weight:1000;font-size:24px;line-height:1;
  text-shadow:0 2px 2px rgba(0,0,0,.45);z-index:4
}
.kit-badge{
  position:absolute;left:50%;top:12px;transform:translateX(-50%);
  font-size:5px;line-height:1;color:#f3cb2d;font-weight:900;letter-spacing:.1px;z-index:4
}
.kit-name{font-size:12px;font-weight:850;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:82px}
.kit-player.field .kit-shirt{width:64px;height:65px}
.number-badge{display:inline-block;margin-right:7px;padding:3px 6px;border-radius:7px;background:#f6cf2e;color:#302700;font-size:11px;font-weight:900;vertical-align:1px}
.bench-player{white-space:nowrap}
.bench-player b{color:var(--navy);background:#fff1a8;padding:2px 5px;border-radius:6px}
.av-row strong{display:flex;align-items:center}
.player-stat .name{display:flex;align-items:center}
@media(max-width:420px){
  .kit-shirt{width:60px;height:61px}
  .kit-player.field .kit-shirt{width:58px;height:59px}
  .kit-number{font-size:22px;top:25px}
  .kit-name{font-size:11px;max-width:70px}
}


/* =========================================================
   v5 VISUAL REDESIGN — MOCKUP INSPIRED
   ========================================================= */
:root{
  --navy:#0f2e67;
  --navy2:#164c88;
  --blue:#0867df;
  --yellow:#ffd41c;
  --bg:#f5f7fb;
  --card:#ffffff;
  --text:#10245a;
  --muted:#6e7d9b;
  --green:#1fa968;
  --red:#f24444;
  --line:#e2e7f0;
  --shadow:0 8px 22px rgba(15,46,103,.08);
  --radius:18px;
}
html,body{background:var(--bg);color:var(--text)}
body{padding-bottom:86px}
.app-header{
  background:
    linear-gradient(180deg,rgba(11,43,95,.94),rgba(15,46,103,.96)),
    radial-gradient(circle at 80% -30%,#2b77b5 0,transparent 45%);
  padding:calc(11px + env(safe-area-inset-top)) 16px 12px;
  min-height:82px;
  box-shadow:0 4px 18px rgba(7,35,80,.18)
}
.brand img{width:51px;height:51px;border:3px solid rgba(255,255,255,.75);box-shadow:0 3px 9px rgba(0,0,0,.2)}
.brand h1{font-size:21px;font-weight:900;letter-spacing:.2px}
.brand-kicker{font-size:11px;color:#fff2a2;opacity:1;letter-spacing:0;margin-top:3px}
.header-date{font-size:11px;color:#dfeaff;max-width:120px}

.app-main{max-width:520px;padding:11px 11px 28px}
.page-head{margin:2px 4px 10px}
.page-head .eyebrow{display:none}
.page-head h2{font-size:20px;color:var(--navy);font-weight:900;margin:4px 0}
.icon-btn{width:38px;height:38px;background:#eef4fc;color:var(--navy);border:0}

.card,.hero-card,.timer-panel,.live-match-card{
  border:1px solid #e5eaf3;
  box-shadow:0 4px 12px rgba(17,47,100,.055);
  border-radius:15px;
  background:#fff
}
.card{padding:13px}
.card-title{margin-bottom:10px}
.card-title strong{font-size:14px;color:#10245a}
.card-title span{font-size:11px}

.segmented{background:#eef2f8;border-radius:10px;padding:3px;margin-bottom:10px}
.segmented button{font-size:12px;padding:8px 5px;border-radius:8px;color:#10245a}
.segmented button.active{background:#fff;box-shadow:0 1px 6px rgba(15,46,103,.09)}
#matchTabs{margin-bottom:10px}
#matchTabs button.active,#lineupMatchTabs button.active{background:var(--yellow);color:#10245a;box-shadow:none}

.saturday-overview{padding:13px}
.saturday-overview .card-title strong{font-size:17px}
.overview-match{
  grid-template-columns:64px 1fr auto;
  border:1px solid #e1e7f1;
  background:#fff;
  border-radius:10px;
  padding:8px 9px
}
.overview-match.active{border-color:#bfd4ef;background:#f4f8fd}
.overview-match .mno{font-size:11px;color:#10245a}
.overview-match .opp{font-size:12px;color:#10245a}
.overview-match .score{font-size:17px}
.overview-summary{grid-template-columns:2fr 1fr}
.overview-summary div{padding:8px 10px;background:#f4f7fb}
.overview-summary span{font-size:10px}
.overview-summary strong{font-size:16px}

.live-match-card{padding:12px 12px 13px;margin-bottom:11px}
.live-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}
.live-eyebrow{display:block!important;color:#6c7a99}
.opponent{font-size:16px;color:#10245a}
.status-chip{background:#e8f6ee;color:#14834d;padding:5px 8px;font-size:10px}
.live-score-timer{
  display:grid;grid-template-columns:1fr 118px 1fr;align-items:center;gap:7px;
  margin:8px 0 12px
}
.team-score-box{
  height:92px;border:1px solid #e3e8f2;border-radius:13px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff
}
.team-score-box span{font-size:11px;color:#536583;font-weight:800}
.team-score-box strong{font-size:34px;margin-top:3px;color:#10245a}
.timer-ring{
  --timer-deg:0deg;
  width:112px;height:112px;border-radius:50%;
  background:conic-gradient(#27a85f 0 var(--timer-deg),#e5e9f1 var(--timer-deg) 360deg);
  padding:7px;display:grid;place-items:center;margin:auto
}
.timer-ring-inner{
  width:100%;height:100%;border-radius:50%;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px #eef1f6
}
.timer{font-size:30px;letter-spacing:-1px;color:#10245a;font-weight:900}
.period-under{font-size:11px;color:#566987;font-weight:800;margin-top:2px}
.live-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.live-action{
  border:0;border-radius:10px;min-height:42px;font-weight:850;font-size:13px
}
.live-action.pause{background:var(--blue);color:#fff}
.live-action.reset{background:#edf1f6;color:#10245a}
.live-action.goal-us,.live-action.goal-them{background:#f5f7fa;color:#10245a;border:1px solid #e4e8ef}
.score-tools{margin-top:5px}
.score-tools .text-btn{font-size:11px;padding:5px 9px}
.progress.slim{height:6px;background:#e8ecf3;margin:8px 0 0}
.progress.slim>div{background:#2aab64}
.progress.slim i{height:11px;top:-2px;background:#b8c1d0}

.shirt-grid{grid-template-columns:repeat(4,1fr);gap:4px}
.kit-player.field .kit-shirt{width:58px;height:59px}
.kit-name{font-size:11px;color:#10245a;font-weight:700}
.kit-number{font-size:23px}
.bench-line{border-top:1px solid #e8edf4;padding-top:10px;margin-top:9px}
.bench-line strong{font-size:13px}
#benchNow{font-size:11px;line-height:1.9}
.bench-player b{background:#eef2f7;color:#10245a}
.injury-btn{background:#fff;color:#0f5ec9;border:1px solid #cedcf1;font-size:12px;margin-top:10px}

#nextSubCard{padding:13px}
.sub-source-toggle button.active{background:var(--yellow);color:#10245a;box-shadow:none}
.sub-time-switch{margin-bottom:9px}
.sub-time-switch button{padding:7px;background:#f1f4f8}
.sub-time-switch button.active{background:#102f68;border-color:#102f68}
.sub-box{padding:9px 8px;border-radius:9px}
.sub-box.out{background:#fff0f0;border-left:3px solid #ef4747}
.sub-box.in{background:#edfbf2;border-left:3px solid #2aaa65}
.sub-box strong{font-size:11px}
.sub-all-btn{
  width:100%;border:0;background:transparent;color:#0867df;font-weight:800;font-size:12px;
  padding:8px 4px 2px
}

.timeline-event{grid-template-columns:42px 21px 1fr;padding:7px 0}
.timeline-event .desc strong{font-size:11px}
.timeline-event .desc span{font-size:10px;color:#637491}
.timeline-event .time{color:#55709a}

.quick-stat-row span{font-size:9px}
.quick-stat-row strong{font-size:13px}

/* lineup */
.smart-card{background:#fff;border-color:#d9e5f5}
.smart-card .card-title strong{font-size:17px}
.rotation-row{grid-template-columns:55px 1fr;padding:9px;background:#f5f8fc}
.rotation-row strong{font-size:11px}
.rotation-row span{font-size:11px}
.primary{background:var(--blue);color:#fff}
.secondary{background:#edf1f6;color:#10245a}
.mode-controls{align-items:center}
.av-row{padding:8px 0}

/* history */
.history-card{padding:12px;border-radius:13px;box-shadow:none}
.history-date{font-size:14px}
.history-summary{font-size:10px}
.match-result-row{grid-template-columns:40px 1fr auto;padding:8px 0;font-size:11px}
.score-pill{font-size:12px;padding:5px 8px}

/* stats */
.stats-tabs button.active{border-bottom:2px solid var(--yellow)}
.player-stat{
  grid-template-columns:1.5fr .65fr .45fr;
  border-radius:0;padding:10px 6px;box-shadow:none;border-bottom:1px solid #e8edf4
}
.player-stat .name{font-size:13px}
.number-badge{background:#10245a;color:#ffd927;border:1px solid #ffd927}
.player-stat .label{font-size:9px}
.player-stat .value{font-size:12px}

/* settings */
.player-setting-row{padding:7px 0}
.stack-actions{gap:6px}
.backup-info{font-size:10px}

/* bottom nav to look like mockup tab strip */
.bottom-nav{
  background:#fff;border-top:1px solid #dce4ef;
  box-shadow:0 -4px 14px rgba(15,46,103,.06);
  padding-top:5px
}
.bottom-nav button{font-size:9px;color:#10245a}
.bottom-nav button span{font-size:17px}
.bottom-nav button.active{color:#10245a;background:linear-gradient(to top,rgba(255,212,28,.22),transparent);border-radius:9px}
.bottom-nav button.active span{filter:saturate(1.3)}

/* dialogs like mockup */
dialog{border-radius:18px;width:min(94vw,410px)}
.dialog-card{padding:15px}
.dialog-card h3{text-align:center;color:#10245a;font-size:19px}
.dialog-icon{font-size:32px}
.confirm-time{background:#f1f6fd}
.confirm-time strong{color:#0867df}
#plannedSubDialog .primary{background:#0867df}
#plannedSubDialog .sub-source-toggle button.active{background:var(--yellow)}
.all-subs-list{display:grid;gap:9px;margin:8px 0}
.all-sub-row{
  display:grid;grid-template-columns:45px 1fr 18px 1fr;gap:6px;align-items:center;
  border:1px solid #e3e8f1;border-radius:12px;padding:9px
}
.all-sub-time{font-weight:900;color:#10245a;font-size:12px}
.all-sub-side{padding:7px;border-radius:9px}
.all-sub-side span{display:block;font-size:9px;font-weight:900}
.all-sub-side strong{display:block;font-size:10px;margin-top:3px}
.all-sub-side.out{background:#fff0f0;color:#9e3030}
.all-sub-side.in{background:#edf9f1;color:#1a7849}
.all-sub-arrow{text-align:center;font-weight:900}

/* report preview */
.report-card{
  background:linear-gradient(180deg,#dff0ff 0,#fff2bb 72%,#1f4637 100%);
  border:1px solid #d7dfeb;color:#10245a
}
.report-card .report-head img{width:58px;height:58px}
.report-card .report-title{font-size:19px}
.report-card .report-summary{font-size:16px}
.report-card .report-match{font-size:11px}
.report-card .report-footer{font-weight:800}
.share-blue{border:0;border-radius:12px;min-height:44px;padding:10px 14px;font-weight:850;background:#0867df;color:#fff}

/* Player detail */
.player-detail-total div{background:#f5f8fc}
.player-break-row{font-size:11px}

/* mobile sizing */
@media(max-width:390px){
  .app-main{padding-left:9px;padding-right:9px}
  .live-score-timer{grid-template-columns:1fr 102px 1fr}
  .timer-ring{width:98px;height:98px}
  .timer{font-size:27px}
  .team-score-box{height:84px}
  .kit-player.field .kit-shirt{width:53px;height:55px}
}

/* v5.1 score correction controls */
.score-correction-tools{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:7px;
  margin-top:9px
}
.score-correct{
  min-height:38px;
  padding:7px 5px;
  border-radius:9px;
  font-size:11px;
  font-weight:850;
  border:1px solid #dfe5ef;
  background:#f7f9fc;
  color:#10245a
}
.score-correct.undo-us{color:#0b5fc7;background:#eef6ff;border-color:#d2e4fa}
.score-correct.final-score{background:#102f68;color:#fff;border-color:#102f68}
.score-correct.undo-them{color:#b23b3b;background:#fff3f3;border-color:#f2dada}
@media(max-width:360px){
  .score-correct{font-size:10px;padding-left:3px;padding-right:3px}
}

/* v5.2 stronger substitution alert */
.sub-alert-banner{
  position:fixed;
  left:10px;
  right:10px;
  top:calc(8px + env(safe-area-inset-top));
  z-index:9999;
  display:grid;
  grid-template-columns:40px 1fr auto;
  gap:10px;
  align-items:center;
  min-height:64px;
  padding:10px 12px;
  border-radius:14px;
  background:#ffd41c;
  color:#10245a;
  border:2px solid #10245a;
  box-shadow:0 12px 34px rgba(9,33,82,.28)
}
.sub-alert-banner.hidden{display:none!important}
.sub-alert-icon{
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:#10245a;color:#ffd41c;
  font-size:20px
}
.sub-alert-copy{min-width:0}
.sub-alert-copy strong{
  display:block;
  font-size:13px;
  letter-spacing:.6px;
  font-weight:950
}
.sub-alert-copy span{
  display:block;
  margin-top:2px;
  font-size:11px;
  font-weight:750;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.sub-alert-banner button{
  border:0;
  border-radius:9px;
  background:#10245a;
  color:#fff;
  min-height:38px;
  padding:0 12px;
  font-size:11px;
  font-weight:900
}
.sub-alert-banner.pulse-restart{
  animation:subFlash .75s ease-in-out 0s 6 alternate
}
@keyframes subFlash{
  0%{transform:scale(1);background:#ffd41c;box-shadow:0 10px 30px rgba(9,33,82,.25)}
  100%{transform:scale(1.018);background:#fff07a;box-shadow:0 14px 42px rgba(255,212,28,.55)}
}
@media(max-width:370px){
  .sub-alert-banner{left:6px;right:6px;grid-template-columns:34px 1fr auto;padding:8px}
  .sub-alert-icon{width:32px;height:32px;font-size:17px}
  .sub-alert-copy strong{font-size:11px}
  .sub-alert-copy span{font-size:10px}
  .sub-alert-banner button{padding:0 8px;font-size:10px}
}
.cloud-control-bar{position:sticky;top:0;z-index:80;display:flex;justify-content:space-between;align-items:center;padding:7px 12px;border-bottom:1px solid #dfe5ee}.cloud-state{display:flex;align-items:center;gap:7px}.cloud-state>div{display:flex;flex-direction:column}.cloud-state strong{font-size:11px}.cloud-state span{font-size:9px}.cloud-dot{width:9px;height:9px;border-radius:50%;background:#95a0b0}.cloud-online{background:#effaf4}.cloud-online .cloud-dot{background:#20a464}.cloud-locked{background:#fff8d9}.cloud-locked .cloud-dot{background:#e6ad00}.cloud-syncing{background:#eef6ff}.cloud-syncing .cloud-dot{background:#287bd2}.cloud-offline{background:#f4f5f7}.cloud-control-btn,.cloud-release-btn{border:0;border-radius:8px;padding:8px 10px;font-size:10px;font-weight:900}.cloud-control-btn{background:#102f68;color:#fff}.cloud-release-btn{background:#e7ebf1}.cloud-locked-control{opacity:.42!important}.cloud-account-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #edf1f5;font-size:11px}.cloud-login-dialog::backdrop{background:#06152dbb}.cloud-login-dialog label{display:flex;flex-direction:column;gap:4px;margin-bottom:9px;font-size:11px}.cloud-login-dialog input,.cloud-login-dialog select{padding:10px;border:1px solid #d7dfeb;border-radius:8px;font-size:16px;background:#fff}.cloud-login-error{color:#b33b3b;font-size:11px;min-height:16px}.center{text-align:center}
/* v6.3 access & PIN management */
#accessPinsCard label{display:flex;flex-direction:column;gap:5px;margin:10px 0 6px;font-size:11px;font-weight:800;color:#33445f}
#accessPinsCard input[type=password]{padding:11px 12px;border:1px solid #d7dfeb;border-radius:10px;font-size:17px;letter-spacing:2px;background:#fff}
#accessPinsCard .pin-option{flex-direction:row;align-items:center;gap:8px;margin-top:14px;font-weight:700}
#accessPinsCard .pin-option input{width:18px;height:18px;margin:0}
.pin-change-btn{margin-bottom:7px}
.pin-change-status{min-height:20px;margin-top:8px;font-size:11px;font-weight:800}
.pin-change-status.ok{color:#137a49}.pin-change-status.err{color:#b33b3b}