:root {
  --bg: #f4f7f2;
  --surface: #ffffff;
  --surface-soft: #f8faf6;
  --ink: #14201b;
  --muted: #66736d;
  --line: #dfe7dd;
  --nav: #121a24;
  --nav-soft: #1d2a36;
  --primary: #116149;
  --primary-strong: #0a4735;
  --accent: #d8a027;
  --danger: #bd3b45;
  --info: #245da8;
  --shadow: 0 18px 45px rgba(23, 35, 31, .10);
  --radius: 8px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(244,247,242,.92)),
    radial-gradient(circle at top left, rgba(216,160,39,.18), transparent 34%),
    #f4f7f2;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 18px 14px;
  color: #eef7f2;
  background: linear-gradient(180deg, var(--nav), #0b1118);
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 64px;
  padding: 8px 8px 18px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.brand img {
  width: 50px;
  height: 38px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
}

.brand strong,
.brand span {
  display: block;
}

.brand strong {
  font-size: 17px;
}

.brand span {
  color: #aab8b2;
  font-size: 12px;
}

.nav {
  display: grid;
  gap: 5px;
  margin-top: 16px;
}

.nav button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #cfd9d5;
  background: transparent;
  text-align: left;
  font-weight: 800;
}

.nav button:hover,
.nav button.active {
  color: #fff;
  border-color: rgba(255,255,255,.10);
  background: var(--nav-soft);
}

.workspace {
  min-width: 0;
  padding: 22px;
}

.hero,
.screen {
  max-width: 1220px;
  margin-inline: auto;
}

.hero {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  margin-bottom: 16px;
}

.hero > img,
.club-card,
.panel,
.item-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
}

.hero > img {
  width: 100%;
  height: 130px;
  padding: 16px;
  object-fit: contain;
}

.club-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 20px 22px;
}

.club-card span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.club-card h1 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 8px;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.05;
  letter-spacing: 0;
}

.club-card h1 img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex: 0 0 auto;
}

.club-card p {
  margin: 0;
  color: var(--muted);
}

.grid {
  display: grid;
  gap: 14px;
}

.grid.two {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.panel {
  padding: 17px;
}

.panel h2,
.panel h3 {
  margin: 0 0 12px;
  letter-spacing: 0;
}

.panel h2 {
  font-size: 22px;
}

.panel h3 {
  font-size: 17px;
}

.muted {
  color: var(--muted);
}

.career-start-panel {
  display: grid;
  gap: 16px;
  border-color: rgba(17, 97, 73, .28);
}

.career-heading {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.career-heading img {
  width: 86px;
  height: 68px;
  object-fit: contain;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.career-heading span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.career-heading h2,
.career-heading p {
  margin: 4px 0 0;
}

.career-league-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.career-league-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 76px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  text-align: left;
}

.career-league-card:hover,
.career-league-card.selected {
  border-color: var(--primary);
  background: #eef8f3;
}

.career-league-card img {
  grid-row: span 2;
  width: 58px;
  height: 48px;
  object-fit: contain;
}

.career-league-card span,
.career-league-card small {
  min-width: 0;
}

.career-league-card span {
  font-weight: 900;
}

.career-league-card small {
  color: var(--muted);
  font-weight: 800;
}

.sponsor-field {
  grid-column: 1 / -1;
}

.sponsor-field select {
  min-height: 48px;
  padding: 11px 42px 11px 13px;
  border-color: rgba(17, 97, 73, .28);
  color: var(--primary-strong);
  font-weight: 900;
  background:
    linear-gradient(45deg, transparent 50%, var(--primary) 50%) right 18px center / 7px 7px no-repeat,
    linear-gradient(135deg, #ffffff, #f2faf6);
  box-shadow: 0 8px 18px rgba(17, 97, 73, .08);
  appearance: none;
}

.sponsor-field select:focus {
  outline: 2px solid rgba(17, 97, 73, .18);
  outline-offset: 2px;
  border-color: var(--primary);
}

.career-step {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid #d1e4da;
  border-radius: 8px;
  background: #f2faf6;
}

.career-step strong {
  color: var(--primary-strong);
}

.career-step span,
.start-summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.start-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid #ead7a2;
  border-radius: 8px;
  background: #fff7df;
}

.start-summary strong {
  overflow-wrap: anywhere;
}

.start-career {
  width: 100%;
  min-height: 48px;
  font-size: 16px;
}

.saved-careers-panel {
  align-self: start;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  margin-top: 14px;
}

.tool-button,
.primary,
.secondary,
.danger {
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-weight: 900;
}

.primary {
  color: #fff;
  background: var(--primary);
}

.primary:hover {
  background: var(--primary-strong);
}

.secondary {
  color: var(--primary-strong);
  border-color: #bed3c9;
  background: #edf6f1;
}

.danger {
  color: #fff;
  background: var(--danger);
}

.primary:disabled,
.secondary:disabled,
.danger:disabled {
  cursor: not-allowed;
  opacity: .52;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
}

.stat {
  min-height: 78px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.stat span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.stat strong {
  display: block;
  margin-top: 5px;
  font-size: 22px;
  line-height: 1;
}

.season-review {
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid #ead7a2;
  border-radius: 8px;
  color: #59400b;
  background: #fff7df;
  font-weight: 700;
}

.season-history-list {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

.season-history-row {
  display: grid;
  grid-template-columns: 84px repeat(6, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid rgba(216, 160, 39, .35);
  border-radius: 7px;
  background: rgba(255, 255, 255, .56);
  color: #4c3a13;
  font-size: 13px;
}

.season-history-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.instruction-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.instruction-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.instruction-card h3 {
  margin: 0 0 8px;
}

.instruction-card ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.instruction-card li {
  line-height: 1.42;
}

/* ── Improved instructions v2 ── */
.instr-panel {
  display: grid;
  gap: 18px;
}

.instr-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.instr-header h2 {
  margin: 0 0 4px;
}

.instr-header p {
  margin: 0;
}

.instr-search-wrap {
  flex-shrink: 0;
}

.instr-search {
  width: 240px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.instr-search:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(17,97,73,.12);
}

.instr-tips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
}

.instr-tip {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 13px;
  background: rgba(17,97,73,.06);
  border: 1px solid rgba(17,97,73,.15);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
}

.instr-tip-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.instruction-card-v2 {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  transition: box-shadow .18s;
}

.instruction-card-v2:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,.10);
}

.instr-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  background: var(--card-color, #116149);
  color: #fff;
}

.instr-icon {
  font-size: 20px;
  line-height: 1;
}

.instr-card-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .01em;
}

.instr-items {
  padding: 0 14px 8px;
}

.instr-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.instr-item:last-child {
  border-bottom: none;
}

.instr-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 3px;
}

.instr-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.instr-no-results {
  text-align: center;
  padding: 24px;
  font-size: 14px;
}

.list {
  display: grid;
  gap: 9px;
}

.item-card {
  display: grid;
  gap: 9px;
  padding: 13px;
}

.item-row,
.lineup-row,
.match-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.result-row {
  grid-template-columns: auto minmax(0, 1fr);
}

.item-row strong,
.lineup-row strong,
.match-row strong {
  overflow-wrap: anywhere;
}

.match-teams {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
  width: auto;
  max-width: 100%;
}

.match-side {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
  max-width: min(36vw, 360px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.match-side.away {
  justify-content: flex-start;
  text-align: left;
}

.match-side img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex: 0 0 auto;
}

.match-score {
  min-width: auto;
  padding: 0 4px;
  text-align: center;
  font-weight: 900;
}

.lineup-table {
  display: grid;
  gap: 5px;
  margin-top: 12px;
}

.lineup-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 12px 0 10px;
}

.line-count,
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.line-count {
  color: #7a4e0b;
  border: 1px solid #efd28c;
  background: #fff6de;
}

.line-count.ok,
.pill.good {
  color: #0c5a3f;
  background: #e2f6ed;
}

.compact-action {
  min-height: 30px;
  padding: 4px 9px;
}

.lineup-head,
.lineup-compact-row {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) 92px 54px 56px 74px 112px;
  gap: 10px;
  align-items: center;
}

.lineup-head {
  min-height: 30px;
  padding: 0 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.lineup-compact-row {
  min-height: 42px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.lineup-compact-row.selected {
  border-color: #b8decf;
  background: #f3fbf7;
}

.lineup-compact-row strong,
.lineup-compact-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lineup-toggle {
  justify-content: center;
  width: 100%;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid #bfd3c9;
  border-radius: 999px;
  color: var(--primary-strong);
  background: #edf6f1;
  font-size: 12px;
  font-weight: 900;
}

.lineup-toggle.selected {
  color: #0c5a3f;
  background: #dff5eb;
}

.lineup-toggle.injured,
.lineup-toggle:disabled,
.pill.bad {
  color: #8b1723;
  background: #ffe7ea;
}

.pill {
  color: var(--info);
  background: #e8f0fb;
}

.pill.warn {
  color: #74440b;
  background: #fff0d6;
}

table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 8px;
}

th,
td {
  padding: 10px 9px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

th {
  color: var(--muted);
  background: #f7faf6;
  font-size: 12px;
  text-transform: uppercase;
}

tr.highlight {
  background: #eef8f3;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.club-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.club-picker button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 48px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  background: #fff;
  text-align: left;
}

.club-picker button.selected {
  border-color: var(--primary);
  background: #edf8f2;
}

.club-picker small {
  color: var(--muted);
  font-weight: 900;
}

.team-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  vertical-align: middle;
}

.team-badge img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex: 0 0 auto;
}

.team-badge.compact img {
  width: 22px;
  height: 22px;
}

.save-card .item-row {
  align-items: start;
}

.save-career-main {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.save-career-crest {
  width: 46px;
  height: 46px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
}

.save-actions {
  justify-content: flex-end;
  margin-top: 0;
}

.field {
  display: grid;
  gap: 6px;
}

.field span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.field input,
.field select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  background: #fff;
}

.range-line {
  display: grid;
  grid-template-columns: 150px minmax(180px, 1fr) 56px;
  gap: 14px;
  align-items: center;
  margin: 12px 0;
}

input[type="range"] {
  --range-value: 50%;
  width: 100%;
  height: 26px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background: transparent;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--primary) 0 var(--range-value), #d8e1d9 var(--range-value) 100%);
  box-shadow: inset 0 1px 2px rgba(20, 32, 27, .12);
  transition: background .18s ease, box-shadow .18s ease;
}

input[type="range"]::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -6px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 6px 18px rgba(17, 97, 73, .32);
  appearance: none;
  -webkit-appearance: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:focus-visible::-webkit-slider-thumb {
  transform: scale(1.12);
  background: var(--primary-strong);
  box-shadow: 0 8px 22px rgba(17, 97, 73, .42);
}

input[type="range"]:focus-visible::-webkit-slider-runnable-track {
  box-shadow: 0 0 0 4px rgba(17, 97, 73, .14), inset 0 1px 2px rgba(20, 32, 27, .12);
}

input[type="range"]::-moz-range-track {
  height: 10px;
  border: 0;
  border-radius: 999px;
  background: #d8e1d9;
  box-shadow: inset 0 1px 2px rgba(20, 32, 27, .12);
}

input[type="range"]::-moz-range-progress {
  height: 10px;
  border-radius: 999px;
  background: var(--primary);
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 6px 18px rgba(17, 97, 73, .32);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:focus-visible::-moz-range-thumb {
  transform: scale(1.12);
  background: var(--primary-strong);
  box-shadow: 0 8px 22px rgba(17, 97, 73, .42);
}

.range-line > span {
  display: inline-flex;
  justify-content: center;
  min-width: 44px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--primary-strong);
  background: #edf6f1;
  font-weight: 900;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.range-line:focus-within > span,
.range-line:hover > span {
  color: #fff;
  border-color: var(--primary);
  background: var(--primary);
}

.match-live {
  display: grid;
  gap: 9px;
  overflow: visible;
}

.event {
  padding: 10px 11px;
  border-left: 4px solid var(--primary);
  border-radius: 7px;
  background: #f7faf6;
}

.match-control-panel {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}

.match-report-panel {
  margin-top: 0;
}

.match-center-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .85fr);
  gap: 16px;
  align-items: start;
}

.round-results-panel {
  align-self: start;
}

.round-results-panel .list {
  gap: 8px;
}

.round-results-panel .match-row {
  grid-template-columns: minmax(0, 1fr);
}

.round-results-panel .match-side {
  max-width: 148px;
}

.match-control-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.next-match-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 15px 16px;
  border: 1px solid rgba(17, 97, 73, .18);
  border-radius: 8px;
  background: linear-gradient(135deg, #f7fbf8, #eef6f1);
}

.next-match-card > strong {
  display: flex;
  justify-content: flex-start;
  min-width: 0;
}

.score-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.score-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.score-team {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.score-team.away {
  justify-content: flex-end;
  text-align: right;
}

.score-team img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex: 0 0 auto;
}

.score-team strong,
.goal-main strong {
  display: block;
  font-size: 18px;
}

.score-team span,
.score-center span,
.goal-main span,
.match-event-row span {
  color: var(--muted);
}

.score-center {
  display: grid;
  justify-items: center;
  min-width: 120px;
  padding: 0 18px;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.score-center strong {
  font-size: 44px;
  line-height: 1;
}

.score-section h4 {
  margin: 0;
  padding: 14px 16px;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0;
  border-bottom: 1px solid var(--line);
}

.goal-row,
.match-event-row {
  display: grid;
  grid-template-columns: 58px 34px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}

.goal-row img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.minute {
  font-size: 18px;
}

.goal-main {
  min-width: 0;
}

.goal-main em {
  display: block;
  margin-top: 3px;
  color: #2c3a35;
  font-style: normal;
}

.goal-score {
  color: var(--primary);
  font-size: 18px;
  white-space: nowrap;
}

.match-event-row {
  grid-template-columns: 58px 34px minmax(0, 1fr);
}

.match-event-row div {
  display: grid;
  gap: 2px;
}

.event-icon {
  font-size: 22px;
}

.match-event-row.red {
  background: #fff5f5;
}

.match-event-row.yellow {
  background: #fffaf0;
}

.match-event-row.chance,
.match-event-row.penalty {
  background: #f7fbff;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  max-width: min(420px, calc(100vw - 36px));
  padding: 12px 14px;
  border-radius: 8px;
  color: #fff;
  background: #14201b;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: .2s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    z-index: 3;
    height: auto;
    padding: 10px;
  }

  .brand {
    min-height: 52px;
    padding-bottom: 10px;
  }

  .nav {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .nav button {
    width: auto;
    white-space: nowrap;
  }

  .workspace {
    padding: 14px;
  }

  .hero,
  .grid.two,
  .grid.three,
  .form-grid,
  .club-picker,
  .career-league-grid,
  .career-heading,
  .start-summary,
  .instruction-grid,
  .stats {
    grid-template-columns: 1fr;
  }

  .career-heading img {
    width: 72px;
    height: 58px;
  }

  .match-score {
    min-width: 0;
    text-align: center;
  }

  .match-side {
    max-width: 42vw;
  }

  .match-control-head,
  .next-match-card {
    align-items: stretch;
    flex-direction: column;
  }

  .match-center-grid {
    grid-template-columns: 1fr;
  }

  .next-match-card > strong {
    justify-content: flex-start;
  }

  .score-head {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .score-center {
    order: -1;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 0 0 12px;
  }

  .score-team.away {
    justify-content: flex-start;
    text-align: left;
  }

  .score-team.away div {
    order: 2;
  }

  .score-team.away img {
    order: 1;
  }

  .goal-row,
  .match-event-row {
    grid-template-columns: 44px 28px minmax(0, 1fr);
  }

  .goal-score {
    grid-column: 3;
  }

  .hero > img {
    display: none;
  }

  .lineup-head {
    display: none;
  }

  .lineup-compact-row {
    grid-template-columns: minmax(0, 1fr) 84px 42px 48px;
  }

  .lineup-compact-row > span:nth-of-type(3) {
    display: none;
  }

  .season-history-row {
    grid-template-columns: 1fr 1fr;
  }

  .lineup-toggle {
    grid-column: 1 / -1;
    justify-self: start;
    width: auto;
  }

  .range-line {
    grid-template-columns: 1fr;
  }

  .instr-tips {
    grid-template-columns: 1fr;
  }

  .instr-header {
    flex-direction: column;
    gap: 10px;
  }

  .instr-search {
    width: 100%;
  }

  .instr-search-wrap {
    width: 100%;
  }
}

/* ===== DASHBOARD IMPROVEMENTS ===== */
.stat small.stat-prev {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}
.stat .stat-good { color: var(--primary); }
.stat .stat-bad { color: var(--danger); }
.good-text { color: var(--primary); }
.bad-text { color: var(--danger); }

.dashboard-alerts {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
}
.alert-item {
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
}
.alert-item.bad { background: #fff0f1; color: #8b1723; border: 1px solid #ffd0d4; }
.alert-item.warn { background: #fff8e8; color: #7a4e0b; border: 1px solid #f5d98a; }
.alert-item.info { background: #e8f2ff; color: #1a4980; border: 1px solid #b8d4f5; }

.next-match-preview {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(17,97,73,.2);
  border-radius: 8px;
  background: linear-gradient(135deg, #f5fbf8, #ebf5f0);
}
.nmp-label {
  font-size: 11px;
  font-weight: 900;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.nmp-body {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.nmp-venue {
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
}
.nmp-teams {
  flex: 1;
}

.btn-play { font-size: 15px; }
.btn-new-career {
  color: var(--muted);
  border-color: var(--line);
  background: #f5f7f5;
}
.btn-new-career:hover { color: var(--danger); border-color: var(--danger); background: #fff0f1; }

/* ===== SEASON HISTORY IMPROVEMENTS ===== */
.season-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.season-toggle {
  font-size: 12px;
  min-height: 28px;
  padding: 4px 10px;
}
.season-history-extra { display: none; }
.season-review.expanded .season-history-extra { display: grid; }
.hist-good { color: var(--primary); font-weight: 900; }
.hist-bad { color: var(--danger); font-weight: 900; }

/* ===== TEAM PAGE IMPROVEMENTS ===== */
.group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.player-card { padding: 12px 13px; }
.player-info { min-width: 0; }
.player-badges { flex-shrink: 0; }
.player-energy-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}
.energy-bar {
  flex: 1;
  height: 6px;
  border-radius: 99px;
  background: var(--line);
  overflow: hidden;
  max-width: 140px;
}
.energy-fill { height: 100%; border-radius: 99px; transition: width .3s; }
.energy-label { font-size: 12px; color: var(--muted); font-weight: 700; }
.player-finance { font-size: 12px; margin-top: 4px; }
.player-injured { border-color: #ffd0d4 !important; background: #fff8f8 !important; }
.item-row { align-items: flex-start; }

/* ===== LINEUP PITCH VISUALIZATION ===== */
.pitch-viz {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 10px;
  background: linear-gradient(180deg, #2d6a4f, #40916c);
  margin: 12px 0;
  border: 2px solid rgba(255,255,255,.15);
}
.pitch-line {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pitch-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 60px;
}
.pitch-player.empty .pitch-avatar {
  background: rgba(255,255,255,.15);
  border: 2px dashed rgba(255,255,255,.4);
  color: rgba(255,255,255,.5);
}
.pitch-player.low-energy .pitch-avatar {
  border-color: var(--accent);
}
.pitch-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--primary-strong);
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255,255,255,.7);
}
.pitch-name {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pitch-pos {
  color: rgba(255,255,255,.7);
  font-size: 10px;
  font-weight: 700;
}

.injured-row { background: #fff8f8 !important; border-color: #ffd0d4 !important; }
.energy-low { color: var(--danger); font-weight: 900; }
.energy-mid { color: var(--accent); font-weight: 900; }
.energy-ok { color: var(--primary); font-weight: 700; }

/* ===== TRAINING IMPROVEMENTS ===== */
.training-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0;
}
.training-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  display: grid;
  gap: 10px;
}
.training-icon { font-size: 32px; }
.training-card h3 { margin: 0; }
.training-stats {
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
}
.training-stats span { display: flex; gap: 6px; align-items: center; }
.training-tip { margin-top: 8px; font-size: 13px; }

/* ===== TACTICS IMPROVEMENTS ===== */
.field-hint {
  font-size: 12px;
  color: var(--primary);
  font-weight: 700;
  margin-top: 2px;
}
.range-hint {
  font-size: 13px;
  color: var(--muted);
  margin: -4px 0 12px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--surface-soft);
}

/* ===== TRANSFERS IMPROVEMENTS ===== */
.transfers-header { margin-bottom: 12px; }
.transfer-actions {
  padding: 0 2px 4px;
}
.transfer-actions .primary,
.transfer-actions .danger {
  width: 100%;
}

/* ===== STADIUM IMPROVEMENTS ===== */
.stadium-preview {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}
.stadium-bar-wrap {
  height: 14px;
  border-radius: 99px;
  background: var(--line);
  overflow: hidden;
  margin-bottom: 10px;
}
.stadium-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #52b788);
  border-radius: 99px;
  transition: width .4s;
}
.stadium-info {
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
}

/* ===== FINANCE IMPROVEMENTS ===== */
.finance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0;
}
.finance-block {
  padding: 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.finance-block.income { background: #f3fbf7; border-color: #b2ddc7; }
.finance-block.expense { background: #fff8f8; border-color: #ffd0d4; }
.finance-block h3 { margin: 0 0 12px; font-size: 15px; }
.finance-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
  font-size: 13px;
  align-items: center;
}
.finance-row:last-child { border-bottom: none; }
.red-text { color: var(--danger); font-weight: 900; }
.finance-history { margin-top: 14px; }
.finance-history h3 { margin: 0 0 14px; font-size: 15px; }
.bank-chart {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  min-height: 120px;
}
.bank-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.bank-bar {
  width: 100%;
  background: linear-gradient(180deg, #52b788, var(--primary));
  border-radius: 4px 4px 0 0;
  min-height: 8px;
  transition: height .4s;
}
.bank-bar-val { font-size: 10px; font-weight: 900; color: var(--muted); }
.bank-bar-label { font-size: 11px; color: var(--muted); font-weight: 700; }

@media (max-width: 900px) {
  .training-options,
  .finance-grid { grid-template-columns: 1fr; }
  .pitch-viz { padding: 10px; }
  .pitch-avatar { width: 34px; height: 34px; font-size: 11px; }
  .pitch-name { font-size: 10px; }
  .nmp-body { flex-direction: column; align-items: flex-start; gap: 6px; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ===== FULL RESPONSIVE PASS ===== */
@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .workspace {
    padding: 18px;
  }

  .hero {
    grid-template-columns: 148px minmax(0, 1fr);
  }

  .hero > img {
    height: 118px;
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .match-center-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    height: auto;
    padding: 10px 12px;
  }

  .brand {
    min-height: 48px;
    padding: 4px 4px 10px;
  }

  .brand img {
    width: 42px;
    height: 34px;
  }

  .nav {
    display: flex;
    gap: 7px;
    margin-top: 8px;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: thin;
  }

  .nav button {
    flex: 0 0 auto;
    width: auto;
    min-height: 42px;
    white-space: nowrap;
  }

  .workspace {
    padding: 14px;
  }

  .hero,
  .grid.two,
  .grid.three,
  .career-heading,
  .start-summary,
  .instruction-grid,
  .training-options,
  .finance-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    gap: 10px;
  }

  .hero > img {
    display: none;
  }

  .club-card {
    padding: 16px;
  }

  .panel {
    padding: 14px;
  }

  .save-card .item-row,
  .item-row,
  .match-row {
    grid-template-columns: 1fr;
  }

  .save-actions,
  .toolbar {
    width: 100%;
  }

  .save-actions .secondary,
  .save-actions .danger,
  .toolbar .primary,
  .toolbar .secondary,
  .toolbar .danger {
    flex: 1 1 160px;
  }

  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table thead,
  table tbody {
    display: table;
    min-width: 640px;
    width: 100%;
  }

  th,
  td {
    white-space: nowrap;
  }

  .lineup-head {
    display: none;
  }

  .lineup-compact-row {
    grid-template-columns: minmax(0, 1fr) 88px 54px 64px;
    gap: 8px;
  }

  .lineup-compact-row > span:nth-of-type(3) {
    display: none;
  }

  .lineup-toggle {
    grid-column: 1 / -1;
    min-height: 40px;
  }

  .match-control-head {
    flex-direction: column;
  }

  .next-match-card {
    align-items: flex-start;
  }

  .score-head {
    grid-template-columns: 1fr;
  }

  .score-center {
    order: -1;
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 12px;
  }
}

@media (max-width: 680px) {
  body {
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }

  .sidebar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 50;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 -14px 36px rgba(10, 17, 24, .22);
  }

  .brand {
    display: none;
  }

  .nav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(74px, 1fr);
    gap: 6px;
    margin: 0;
    overflow-x: auto;
    padding: 0 2px;
    scroll-snap-type: x proximity;
  }

  .nav button {
    justify-content: center;
    min-height: 56px;
    padding: 7px 8px;
    border-radius: 8px;
    font-size: 11px;
    line-height: 1.12;
    text-align: center;
    white-space: normal;
    scroll-snap-align: start;
  }

  .workspace {
    padding: 10px;
  }

  .hero {
    margin-bottom: 10px;
  }

  .club-card,
  .panel,
  .item-card {
    border-radius: 8px;
  }

  .club-card h1 {
    align-items: flex-start;
    font-size: 24px;
    line-height: 1.12;
  }

  .club-card h1 img {
    width: 34px;
    height: 34px;
  }

  .panel h2 {
    font-size: 20px;
  }

  .panel h3 {
    font-size: 16px;
  }

  .stats,
  .club-picker,
  .career-league-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .stat {
    min-height: 68px;
    padding: 11px;
  }

  .stat strong {
    font-size: 20px;
  }

  .career-heading {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
  }

  .career-heading img {
    width: 64px;
    height: 52px;
  }

  .career-league-card {
    grid-template-columns: 52px minmax(0, 1fr);
    min-height: 70px;
  }

  .career-league-card img {
    width: 52px;
    height: 44px;
  }

  .save-career-main {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .save-career-crest {
    width: 42px;
    height: 42px;
  }

  .toolbar,
  .save-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .tool-button,
  .primary,
  .secondary,
  .danger,
  .lineup-toggle {
    min-height: 44px;
  }

  .next-match-preview,
  .season-review,
  .stadium-preview,
  .finance-block,
  .training-card {
    padding: 12px;
  }

  .result-row,
  .round-results-panel .match-row {
    grid-template-columns: 1fr;
  }

  .match-teams {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .match-side {
    max-width: none;
    justify-content: flex-start;
  }

  .match-side.away {
    justify-content: flex-start;
  }

  .match-side.away img {
    order: -1;
  }

  .match-score {
    justify-self: start;
    padding: 2px 0;
  }

  .nmp-teams .match-teams {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    max-width: 100%;
  }

  .nmp-teams .match-side {
    flex: 1 1 0;
    min-width: 0;
  }

  .nmp-teams .match-side img {
    flex: 0 0 auto;
  }

  .nmp-teams .match-score {
    flex: 0 0 auto;
    justify-self: auto;
    padding: 0 2px;
  }

  .score-team,
  .score-team.away {
    justify-content: flex-start;
    text-align: left;
  }

  .score-team.away div {
    order: 2;
  }

  .score-team.away img {
    order: 1;
  }

  .goal-row,
  .match-event-row {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 8px;
  }

  .goal-row img,
  .event-icon {
    grid-column: 1;
  }

  .goal-main,
  .match-event-row div {
    grid-column: 2;
  }

  .goal-score {
    grid-column: 2;
    justify-self: start;
  }

  .lineup-summary {
    display: grid;
    grid-template-columns: 1fr;
  }

  .line-count,
  .pill {
    width: fit-content;
    max-width: 100%;
  }

  .lineup-compact-row {
    grid-template-columns: minmax(0, 1fr) 58px;
    padding: 10px;
  }

  .lineup-compact-row > span:nth-of-type(1),
  .lineup-compact-row > span:nth-of-type(2) {
    display: none;
  }

  .pitch-viz {
    gap: 10px;
    padding: 10px 6px;
  }

  .pitch-line {
    gap: 6px;
  }

  .pitch-player {
    min-width: 48px;
  }

  .pitch-name {
    max-width: 54px;
  }

  .range-line {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .instr-header {
    flex-direction: column;
  }

  .instr-search-wrap,
  .instr-search {
    width: 100%;
  }

  .instr-tips {
    grid-template-columns: 1fr;
  }

  .season-review-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .season-history-row {
    grid-template-columns: 1fr;
  }

  .finance-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .bank-chart {
    gap: 8px;
    overflow-x: auto;
  }

  .bank-bar-col {
    min-width: 42px;
  }

  .toast {
    right: 10px;
    bottom: calc(88px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 20px);
  }
}

@media (max-width: 420px) {
  .workspace {
    padding: 8px;
  }

  .club-card,
  .panel {
    padding: 12px;
  }

  .club-card h1 {
    font-size: 21px;
  }

  .nav {
    grid-auto-columns: 68px;
  }

  .nav button {
    min-height: 54px;
    padding-inline: 5px;
    font-size: 10px;
  }

  .team-badge {
    gap: 6px;
  }

  .team-badge img,
  .team-badge.compact img,
  .match-side img,
  .score-team img {
    width: 24px;
    height: 24px;
  }

  th,
  td {
    padding: 9px 7px;
  }
}