:root, [data-theme="light"] {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem;
  --color-bg: #f7f6f2; --color-surface: #f9f8f5; --color-surface-2: #fbfbf9; --color-border: #d4d1ca; --color-divider: #dcd9d5;
  --color-text: #28251d; --color-text-muted: #6f6c65; --color-text-inverse: #f9f8f4;
  --color-primary: #01696f; --color-primary-hover: #0c4e54;
  --color-success: #437a22; --color-warning: #964219; --color-error: #a12c7b;
  --radius-md: .8rem; --radius-lg: 1rem; --radius-xl: 1.25rem; --radius-full: 999px;
  --shadow-sm: 0 2px 8px rgba(40,37,29,.06);
  --font-body: 'Cairo', system-ui, sans-serif;
}

[data-theme="dark"] {
  --color-bg: #171614; --color-surface: #1c1b19; --color-surface-2: #201f1d; --color-border: #393836; --color-divider: #2a2927;
  --color-text: #e3e1dc; --color-text-muted: #a8a6a1; --color-text-inverse: #171614;
  --color-primary: #4f98a3; --color-primary-hover: #63aeb8;
  --color-success: #7cbc57; --color-warning: #d98d57; --color-error: #de73b0;
  --shadow-sm: 0 2px 10px rgba(0,0,0,.25);
}

* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 35%), radial-gradient(circle at left center, color-mix(in srgb, var(--color-warning) 10%, transparent), transparent 30%), var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
}
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none;
  background-image: linear-gradient(135deg, rgba(255,255,255,.03) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.03) 50%, rgba(255,255,255,.03) 75%, transparent 75%, transparent);
  background-size: 24px 24px; opacity: .16;
}
body::after {
  content: attr(data-game-identity); position: fixed; inset: auto 1.25rem 1rem auto; pointer-events: none; z-index: 0;
  font-weight: 800; font-size: clamp(2rem, 5vw, 5rem); letter-spacing: .08em;
  color: color-mix(in srgb, var(--color-primary) 16%, transparent); opacity: .18; transform: rotate(-8deg); white-space: nowrap;
  text-shadow: 0 10px 30px rgba(0,0,0,.08);
}
button, input, select { font: inherit; color: inherit; }
input, select { width: 100%; border: 1px solid var(--color-border); background: var(--color-surface-2); border-radius: var(--radius-md); padding: .75rem .9rem; }
.app { max-width: 1320px; margin: auto; padding: var(--space-4); display: grid; gap: var(--space-4); }
.topbar {
  display: flex; justify-content: space-between; gap: var(--space-4); align-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 92%, var(--color-primary) 8%), var(--color-surface));
  border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm); backdrop-filter: blur(8px);
}
.brand h1 { margin: 0; font-size: var(--text-lg); }
.brand p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.brand-mark { display: inline-flex; align-items: center; margin-top: .45rem; padding: .28rem .7rem; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); color: var(--color-primary); font-weight: 800; font-size: var(--text-xs); letter-spacing: .08em; }
.role-area { display: grid; gap: .35rem; justify-items: center; text-align: center; }
.top-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.layout { display: grid; grid-template-columns: 360px 1fr; gap: var(--space-4); }
.panel {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 96%, var(--color-primary) 4%), var(--color-surface));
  border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden;
}
.panel-head { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-divider); display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.panel-head h2 { margin: 0; font-size: var(--text-lg); }
.panel-body { padding: var(--space-4); display: grid; gap: var(--space-4); }
.grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.form-row { display: grid; gap: .4rem; }
.form-row label { font-weight: 700; font-size: var(--text-sm); }
.btn { min-height: 42px; border: none; border-radius: var(--radius-md); padding: .7rem 1rem; font-size: var(--text-sm); font-weight: 700; cursor: pointer; }
.btn-primary { background: var(--color-primary); color: var(--color-text-inverse); }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-secondary { background: var(--color-surface-2); border: 1px solid var(--color-border); }
.btn-danger { background: color-mix(in srgb, var(--color-error) 12%, var(--color-surface)); color: var(--color-error); border: 1px solid color-mix(in srgb, var(--color-error) 28%, var(--color-border)); }
.badge { padding: .25rem .6rem; border-radius: var(--radius-full); font-size: .78rem; font-weight: 700; background: var(--color-surface-2); }
.badge.success { color: var(--color-success); }
.role-badge.admin { background: color-mix(in srgb, var(--color-primary) 18%, var(--color-surface)); color: var(--color-primary); }
.role-badge.user { background: color-mix(in srgb, var(--color-warning) 14%, var(--color-surface)); color: var(--color-warning); }
.role-note { color: var(--color-text-muted); font-size: var(--text-xs); max-width: 260px; }
.toolbar { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.score-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-2); align-items: end; }
.vs { font-weight: 800; color: var(--color-text-muted); padding-bottom: .6rem; }
.kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-3); }
.kpi { background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface-2) 90%, var(--color-primary) 10%), var(--color-surface-2)); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); }
.kpi span { display: block; color: var(--color-text-muted); font-size: var(--text-xs); }
.kpi strong { font-size: var(--text-lg); }
.table-wrap { overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .75rem .6rem; border-bottom: 1px solid var(--color-divider); text-align: right; font-size: var(--text-sm); }
th { background: var(--color-surface-2); color: var(--color-text-muted); font-size: var(--text-xs); }
.pill-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pill-tabs button.active { background: var(--color-primary); color: var(--color-text-inverse); }
.hidden { display: none !important; }
.subtle { color: var(--color-text-muted); font-size: var(--text-sm); }
.note { background: #d9ecea66; border-radius: var(--radius-lg); padding: var(--space-4); font-size: var(--text-sm); }
.app-status { margin: var(--space-4); }
.badge.closed { color: var(--color-warning); }
.duplicate-row { color: var(--color-error); font-weight: 700; }
.match-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface-2) 88%, var(--color-primary) 12%), var(--color-surface-2)); display: grid; gap: var(--space-3); }
.match-top { display: flex; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.match-title { font-weight: 800; }
.match-meta { color: var(--color-text-muted); font-size: var(--text-xs); }
.footer { text-align: center; color: var(--color-text-muted); font-size: var(--text-xs); }
.editable-name,.editable-score { display: inline-block; min-width: 90px; padding: .15rem .45rem; border-radius: .45rem; outline: none; }
.editable-score { min-width: 50px; }
.editable-name[contenteditable="true"], .editable-score[contenteditable="true"] { background: color-mix(in srgb, var(--color-primary) 8%, transparent); border: 1px dashed color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); }
.player-checkboxes { display: flex; flex-wrap: wrap; gap: .5rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: .6rem .75rem; background: var(--color-surface-2); min-height: 48px; }
.my-name-pill { display: inline-flex; align-items: center; min-height: 36px; padding: .35rem .75rem; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); color: var(--color-primary); font-weight: 700; }
.auth-card { max-width: 720px; margin: 4vh auto; }
.auth-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.auth-status { min-height: 24px; }
.panel, .topbar, .kpi, .match-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.panel:hover, .topbar:hover, .kpi:hover, .match-card:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(0,0,0,.08); }
.app, .panel, .topbar { position: relative; z-index: 1; }

/* Tunisia League Tab */
.league-panel-head { margin: 0 0 var(--space-4); padding: 0 0 var(--space-4); background: transparent; border-bottom: 1px solid var(--color-divider); }
.league-panel-head h2 { margin: 0; }
.league-panel-head p { margin: .25rem 0 0; }
.league-toolbar { display: grid; grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr); gap: var(--space-3); width: 100%; margin-bottom: var(--space-4); }
.league-toolbar .form-row { min-width: 0; }
.league-toolbar input, .league-toolbar select { width: 100%; }
.tunisia-team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); width: 100%; }
.tunisia-team-card { display: flex; align-items: center; gap: var(--space-3); min-width: 0; min-height: 82px; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 9%, var(--color-surface-2)), var(--color-surface-2)); }
.tunisia-team-card > div { min-width: 0; }
.tunisia-team-card strong, .tunisia-team-card .subtle { display: block; overflow-wrap: anywhere; }
#tunisiaLeagueTable { width: 100%; }
#tunisiaLeagueTable table { min-width: 760px; }
.tunisia-fixtures-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); width: 100%; margin-top: var(--space-4); }
code { padding: .1rem .35rem; border-radius: .35rem; background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface-2)); }

@media (max-width: 1100px){ .layout { grid-template-columns: 1fr; } .kpis { grid-template-columns: repeat(2,1fr); } .tunisia-team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px){ .topbar { flex-direction: column; align-items: stretch; } .role-area { justify-items: start; text-align: start; } .top-actions { justify-content: flex-start; } }
@media (max-width: 800px){ .tunisia-team-grid, .tunisia-fixtures-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .league-toolbar { grid-template-columns: 1fr; } }
@media (max-width: 700px){ .grid-two,.score-grid,.kpis { grid-template-columns: 1fr; } }
@media (max-width: 500px){ .tunisia-team-grid, .tunisia-fixtures-list { grid-template-columns: 1fr; } }