: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: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; }
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: 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); }
.brand h1 { margin: 0; font-size: var(--text-lg); }
.brand p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.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: 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); }
.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: 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); }
.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: 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; }
.player-checkboxes label { display: flex; align-items: center; gap: .35rem; font-weight: 400; font-size: var(--text-sm); cursor: pointer; white-space: nowrap; }
.player-checkboxes input[type="checkbox"] { width: auto; padding: 0; border: none; background: none; accent-color: var(--color-primary); }
.auth-card { max-width: 720px; margin: 4vh auto; }
.auth-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.auth-status { min-height: 24px; }
@media (max-width: 1100px){ .layout { grid-template-columns: 1fr; } .kpis { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 700px){ .grid-two,.score-grid,.kpis { grid-template-columns: 1fr; } }