:root {
  --green-dark: #0d3b25;
  --green: #148c50;
  --green-light: #e6f4ec;
  --text: #1c2b23;
  --border: #e0e5e2;
}
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); background:#f6f8f7; }
.app { display:flex; min-height:100vh; }
.sidebar { width:220px; background: var(--green-dark); color:#fff; display:flex; flex-direction:column; padding:1rem 0; flex-shrink:0; }
.sidebar .brand { font-weight:700; font-size:1.1rem; padding: 0 1.25rem 1.25rem; display:flex; gap:.5rem; align-items:center; }
.sidebar nav { display:flex; flex-direction:column; }
.sidebar nav a { color:#cfe8db; text-decoration:none; padding:.65rem 1.25rem; font-size:.95rem; }
.sidebar nav a:hover { background: rgba(255,255,255,0.06); color:#fff; }
.sidebar nav a.active { background: var(--green); color:#fff; font-weight:600; }
.content { flex:1; min-width:0; }
.topbar { padding:1.25rem 1.75rem; border-bottom:1px solid var(--border); background:#fff; }
.topbar h1 { margin:0; font-size:1.3rem; }
.page { padding:1.5rem 1.75rem 3rem; max-width:1100px; }
h2 { font-size:1.05rem; margin-top:2rem; }
h3 { font-size:.95rem; color:#2b4438; }
.hint { color:#5c6b62; font-size:.85rem; }
.btn { display:inline-block; padding:.55rem 1rem; background:#fff; border:1px solid var(--border); border-radius:8px; text-decoration:none; color:var(--text); cursor:pointer; font-size:.9rem; }
.btn-primary { background: var(--green); color:#fff; border-color: var(--green); }
.btn-danger { background:#fff; color:#c0392b; border-color:#f0c4bd; }
.btn-small { padding:.35rem .7rem; font-size:.8rem; }
.grid-cards { display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:1rem; margin-top:1rem; }
.card { background:#fff; border:1px solid var(--border); border-radius:10px; padding:1rem 1.25rem; }
.big-number { font-size:2rem; font-weight:700; margin:.25rem 0 0; color: var(--green); }
.table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-top:.5rem; }
.table th, .table td { text-align:left; padding:.55rem .75rem; border-bottom:1px solid var(--border); font-size:.88rem; }
.table th { background:#fafbfa; font-weight:600; color:#3a4b41; }
.table .v { color: var(--green); font-weight:600; }
.table .e { color:#8a7300; }
.table .d { color:#c0392b; }
.form { background:#fff; border:1px solid var(--border); border-radius:10px; padding:1rem 1.25rem; margin-top:.5rem; }
.form-row { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:.75rem; }
.form-row label { display:flex; flex-direction:column; font-size:.8rem; color:#3a4b41; gap:.25rem; }
.form-row input, .form-row select { padding:.4rem .5rem; border:1px solid var(--border); border-radius:6px; font-size:.9rem; }
.stars-row label { width:110px; }
.checkbox { flex-direction:row !important; align-items:center; gap:.4rem !important; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:1rem; }
.presence-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:.4rem; background:#fff; border:1px solid var(--border); padding:1rem; border-radius:10px; }
.presence-item { display:flex; align-items:center; gap:.4rem; font-size:.85rem; }
.match-card { background:#fff; border:1px solid var(--border); border-radius:10px; padding:1rem 1.25rem; margin-top:.85rem; }
.match-head { display:flex; align-items:center; gap:1rem; margin-bottom:.5rem; }
.match-head .score { font-weight:700; }
.status { font-size:.75rem; padding:.15rem .5rem; border-radius:20px; background:#eef3f0; }
.status-finalizada { background: var(--green-light); color: var(--green); }
.match-teams { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.match-teams ul { margin:.25rem 0 0; padding-left:1.1rem; font-size:.85rem; }
.match-goals { margin-top:.5rem; display:flex; gap:.4rem; flex-wrap:wrap; }
.chip { background:var(--green-light); color:var(--green); padding:.2rem .55rem; border-radius:20px; font-size:.78rem; }
.inline-form { display:flex; gap:.4rem; align-items:center; margin-top:.6rem; flex-wrap:wrap; }
.inline-form select, .inline-form input { padding:.3rem .4rem; border:1px solid var(--border); border-radius:6px; }
.presence-list { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; }
.presence-badge { background:#fff; border:1px solid var(--border); border-radius:20px; padding:.3rem .7rem; font-size:.82rem; display:flex; gap:.4rem; align-items:center; }
.badge { border-radius:20px; padding:.05rem .5rem; font-size:.72rem; }
.badge-green { background: var(--green-light); color: var(--green); }
.search-box { padding:.5rem .75rem; width:100%; max-width:320px; border:1px solid var(--border); border-radius:8px; margin-bottom:.5rem; }
.flash { padding:.6rem .9rem; border-radius:8px; margin-bottom:1rem; font-size:.88rem; }
.flash-info { background:#eef3f0; color:#2b4438; }
.flash-error { background:#fdecea; color:#c0392b; }
tr.owing td { color:#c0392b; }
tr.paid td { color:#2b4438; }

/* ---- avatar e bloco do jogador logado na sidebar ---- */
.avatar { width:34px; height:34px; border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--green); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; }
.avatar-lg { width:84px; height:84px; font-size:1.7rem; }
.side-user { display:flex; gap:.6rem; align-items:center; padding:.75rem 1.25rem; margin-bottom:.5rem; border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); }
.side-user-info { display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.side-user-info b { font-size:.88rem; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-user-info small { font-size:.72rem; color:#a9cfbc; }
.side-foot { margin-top:auto; padding-top:.75rem; border-top:1px solid rgba(255,255,255,.12); display:flex; flex-direction:column; }
.side-foot a { color:#cfe8db; text-decoration:none; padding:.65rem 1.25rem; font-size:.95rem; }
.side-foot a:hover { background:rgba(255,255,255,.06); color:#fff; }
.side-foot form { margin:0; }
.side-logout { display:block; width:100%; text-align:left; background:none; border:0; color:#cfe8db; padding:.65rem 1.25rem; font-size:.95rem; font-family:inherit; cursor:pointer; }
.side-logout:hover { background:rgba(255,255,255,.06); color:#fff; }

/* ---- telas públicas de autenticação (login e convite) ---- */
/* Mobile-first: coluna única, campos e botões com alvo de toque grande. */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.25rem; background:var(--green-dark); }
.auth-card { background:#fff; width:100%; max-width:420px; border-radius:14px; padding:1.5rem 1.25rem 2rem; box-shadow:0 12px 30px rgba(0,0,0,.18); }
.auth-brand { display:flex; gap:.5rem; align-items:center; font-weight:700; font-size:1.15rem; color:var(--green-dark); margin-bottom:1rem; }
.auth-card h1 { font-size:1.1rem; margin:0 0 1.1rem; }
.auth-card h2 { font-size:.95rem; margin:1.4rem 0 .6rem; }
.auth-field { display:flex; flex-direction:column; gap:.3rem; margin-bottom:.9rem; font-size:.85rem; color:#3a4b41; }
.auth-field input, .auth-field select { padding:.8rem .7rem; font-size:1rem; border:1px solid var(--border); border-radius:8px; width:100%; }
.auth-field.checkbox { flex-direction:row; align-items:center; gap:.5rem; }
.auth-field.checkbox input { width:auto; min-width:22px; min-height:22px; }
.auth-card .btn { width:100%; text-align:center; padding:.85rem 1rem; font-size:1rem; margin-top:.4rem; }
.auth-error { background:#fdecea; color:#c0392b; padding:.65rem .9rem; border-radius:8px; font-size:.88rem; margin-bottom:1rem; }
.auth-hint { color:#5c6b62; font-size:.82rem; margin-top:1.1rem; }

@media (max-width: 480px) {
  .auth-wrap { padding:0; align-items:stretch; background:#fff; }
  .auth-card { max-width:none; min-height:100vh; border-radius:0; box-shadow:none; padding:2.5rem 1.25rem 2rem; }
}
@media (min-width: 768px) {
  .auth-card { padding:2rem 2rem 2.25rem; }
  .auth-card h1 { font-size:1.25rem; }
}

/* ---------- caixa de copiar (convite) ---------- */
.copy-label { display:block; font-size:.78rem; color:#3a4b41; margin-top:.8rem; }
.copy-box { display:flex; align-items:center; background:var(--green-light); border:1px solid #cfe6da; border-radius:8px; padding:.55rem .7rem; margin:.3rem 0 .4rem; }
.copy-box code { font-size:.85rem; word-break:break-all; }

@media (max-width: 600px) {
  .copy-box code { font-size:.78rem; }
}

/* ---------- minha conta ---------- */
.profile-grid { display:grid; grid-template-columns:140px 1fr; gap:1.5rem; align-items:start; margin-top:1rem; }
.profile-photo { text-align:center; }
.profile-photo .hint { margin-top:.5rem; word-break:break-all; }
.profile-grid .form { margin-top:0; }
.profile-grid input[type=file] { font-size:.82rem; }

@media (max-width: 700px) {
  .profile-grid { grid-template-columns:1fr; gap:1rem; }
  .profile-photo { text-align:left; }
}

/* ---------- responsividade geral ---------- */
@media (max-width: 900px) {
  .two-col { grid-template-columns:1fr; gap:1.25rem; }
  .page { padding:1.25rem 1rem 3rem; }
  .table { display:block; overflow-x:auto; white-space:nowrap; }
}

@media (max-width: 600px) {
  .app { flex-direction:column; min-height:100vh; }
  .sidebar { width:100%; flex-direction:row; flex-wrap:wrap; align-items:center; padding:.6rem .8rem; gap:.4rem; }
  .sidebar .brand { padding:0 .6rem 0 0; font-size:1rem; }
  .sidebar nav { flex-direction:row; flex-wrap:wrap; gap:.2rem; flex:1; }
  .sidebar nav a { padding:.35rem .6rem; font-size:.82rem; border-radius:6px; }
  .side-user { margin-top:0; padding:0; border-top:none; flex-direction:row; align-items:center; gap:.6rem; width:100%; justify-content:space-between; border-top:1px solid rgba(255,255,255,.12); padding-top:.5rem; }
  .side-foot { margin-top:0; width:100%; flex-direction:row; align-items:center; justify-content:space-between; border-top:1px solid rgba(255,255,255,.12); padding-top:.4rem; }
  .side-foot a, .side-logout { padding:.4rem .6rem; }
  .topbar { padding:.9rem 1rem; }
  .topbar h1 { font-size:1.1rem; }
  .match-teams { grid-template-columns:1fr; }
  .form-row { flex-direction:column; gap:.6rem; }
  .form-row label { width:100%; }
  .stars-row label { width:100%; }
  .presence-grid { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); }
  .btn { padding:.6rem 1rem; }
}