:root {
    --bg: #ffffff; --bg2: #f5f5f4; --bg3: #efefed;
    --text: #1a1a18; --text2: #6b6b67;
    --border: rgba(0,0,0,0.12); --border2: rgba(0,0,0,0.22);
    --green: #1D9E75; --green-bg: #E1F5EE; --green-text: #0F6E56;
    --red-bg: #FCEBEB; --red-text: #A32D2D; --red-border: #E24B4A;
    --amber-bg: #FAEEDA; --amber-text: #854F0B;
    --radius: 8px; --radius-lg: 12px;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg:#272725; --bg2:#323230; --bg3:#3a3a38;
      --text:#f0ede8; --text2:#9a9994;
      --border:rgba(255,255,255,0.12); --border2:rgba(255,255,255,0.3);
      --green-bg:#0d4a34; --green-text:#5DCAA5;
      --red-bg:#4a1515; --red-text:#f09595; --red-border:#A32D2D;
      --amber-bg:#4a3310; --amber-text:#FAC775;
    }
  }
  * { box-sizing:border-box; margin:0; padding:0; }
  body { background:var(--bg3); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; display:flex; justify-content:center; align-items:flex-start; height:100vh; overflow:hidden; padding:20px 0; }
  .app { width:100%; max-width:440px; background:var(--bg3); display:flex; flex-direction:column; height:calc(100vh - 40px); border-radius:var(--radius-lg); overflow:hidden; position:relative; box-shadow:0 4px 24px rgba(0,0,0,0.1); }
  @media(max-width:460px){ body{padding:0;height:100dvh;overflow:hidden} .app{border-radius:0;height:100dvh} }
  .screen { display:none; flex:1; flex-direction:column; overflow:hidden; }
  .screen.active { display:flex; }
  .top-bar { padding:14px 16px; border-bottom:0.5px solid var(--border); display:flex; align-items:center; justify-content:space-between; background:var(--bg); flex-shrink:0; gap:8px; }
  .top-bar .title { font-size:17px; font-weight:600; color:var(--text); }
  .content { padding:16px; flex:1; overflow-y:auto; }
  .btn-primary { background:var(--green); color:#fff; border:none; border-radius:var(--radius); padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer; }
  .btn-ghost { background:none; border:0.5px solid var(--border2); border-radius:var(--radius); padding:7px 12px; font-size:13px; cursor:pointer; color:var(--text); }
  .btn-ghost.active { background:var(--green-bg); border-color:var(--green); color:var(--green-text); font-weight:600; }
  .game-card { background:var(--bg); border:0.5px solid var(--border); border-radius:var(--radius-lg); padding:14px; margin-bottom:10px; cursor:pointer; }
  .game-card:hover { border-color:var(--border2); }
  .tabs { display:flex; border-bottom:0.5px solid var(--border); background:var(--bg); flex-shrink:0; }
  .tab { flex:1; padding:12px; background:none; border:none; border-bottom:2px solid transparent; font-size:14px; color:var(--text2); cursor:pointer; }
  .tab.active { color:var(--green); border-bottom-color:var(--green); font-weight:600; }
  .player-row { display:flex; align-items:center; padding:11px 0; border-bottom:0.5px solid var(--border); gap:8px; }
  .avatar { width:34px; height:34px; border-radius:50%; background:var(--green-bg); color:var(--green-text); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; flex-shrink:0; }
  .att-btn { padding:6px 10px; border-radius:var(--radius); font-size:12px; cursor:pointer; border:0.5px solid var(--border2); background:none; color:var(--text2); white-space:nowrap; }
  .att-btn.yes { background:var(--green-bg); border-color:var(--green); color:var(--green-text); font-weight:600; }
  .att-btn.no  { background:var(--red-bg); border-color:var(--red-border); color:var(--red-text); font-weight:600; }
  .att-btn:disabled { opacity:0.35; cursor:not-allowed; }
  .badge { font-size:11px; padding:2px 8px; border-radius:999px; font-weight:600; }
  .badge-green { background:var(--green-bg); color:var(--green-text); }
  .badge-amber { background:var(--amber-bg); color:var(--amber-text); }
  .badge-gray  { background:var(--bg2); color:var(--text2); }
  .badge-red   { background:var(--red-bg); color:var(--red-text); }
  .bottom-nav { display:flex; border-top:0.5px solid var(--border); background:var(--bg); flex-shrink:0; }
  .nav-btn { flex:1; padding:10px 0 8px; background:none; border:none; font-size:11px; color:var(--text2); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; }
  .nav-btn.active { color:var(--green); }
  .nav-icon { width:20px; height:20px; }
  .section-label { font-size:11px; font-weight:600; color:var(--text2); text-transform:uppercase; letter-spacing:.05em; margin:14px 0 6px; }
  .section-label:first-child { margin-top:0; }
  .counter-row { display:flex; align-items:center; padding:12px 0; border-bottom:0.5px solid var(--border); gap:10px; }
  .cnt-btn { width:28px; height:28px; border-radius:50%; border:0.5px solid var(--border2); background:none; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; color:var(--text); }
  .cnt-val { font-weight:600; font-size:16px; min-width:18px; text-align:center; color:var(--text); }
  .cnt-label { font-size:10px; color:var(--text2); text-align:center; }
  .empty-state { text-align:center; padding:48px 20px; color:var(--text2); font-size:14px; line-height:1.7; }
  .metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:20px; }
  .metric-card { background:var(--bg); border-radius:var(--radius); padding:12px; text-align:center; border:0.5px solid var(--border); }
  .metric-card .val { font-size:24px; font-weight:700; color:var(--text); }
  .metric-card .lbl { font-size:11px; color:var(--text2); margin-top:2px; }
  .stat-row { display:flex; align-items:center; padding:10px 0; border-bottom:0.5px solid var(--border); gap:10px; font-size:14px; color:var(--text); }
  .overlay { position:absolute; inset:0; background:rgba(0,0,0,0.45); z-index:20; display:none; align-items:flex-end; }
  .overlay.open { display:flex; }
  .sheet { background:var(--bg); border-radius:14px 14px 0 0; padding:20px; width:100%; max-height:85%; overflow-y:auto; }
  .sheet h3 { font-size:16px; font-weight:600; margin-bottom:14px; color:var(--text); }
  .form-group { margin-bottom:12px; }
  .form-group label { display:block; font-size:12px; color:var(--text2); margin-bottom:4px; }
  .form-group input, .form-group select { width:100%; padding:9px 10px; border:0.5px solid var(--border2); border-radius:var(--radius); font-size:14px; background:var(--bg2); color:var(--text); }
  .sheet-actions { display:flex; gap:8px; margin-top:14px; }
  .sheet-actions button { flex:1; padding:10px; font-size:14px; }
  .sub-info { font-size:11px; color:var(--text2); margin-top:2px; }
  .loading { text-align:center; padding:32px; color:var(--text2); font-size:14px; }
  .notice { background:var(--amber-bg); border:0.5px solid var(--amber-text); border-radius:var(--radius); padding:10px 14px; margin-bottom:14px; font-size:13px; color:var(--amber-text); }

  /* Posição */
  .pos-select { font-size:11px; font-weight:700; padding:2px 4px; border-radius:4px; border:0.5px solid var(--amber-text); background:var(--amber-bg); color:var(--amber-text); cursor:pointer; min-width:44px; max-width:72px; flex-shrink:0; }
  .pos-badge  { font-size:11px; font-weight:700; padding:2px 6px; border-radius:4px; background:var(--bg2); color:var(--text2); white-space:nowrap; flex-shrink:0; }
  .pos-btn    { font-size:11px; font-weight:700; padding:3px 7px; border-radius:4px; border:0.5px solid var(--border2); background:var(--bg2); color:var(--text2); cursor:pointer; white-space:nowrap; flex-shrink:0; min-width:32px; text-align:center; }
  .pos-btn.set { background:var(--amber-bg); border-color:var(--amber-text); color:var(--amber-text); }
  .pos-picker { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:4px; }
  .pos-picker-btn { padding:10px 4px; border-radius:var(--radius); border:0.5px solid var(--border2); background:var(--bg2); cursor:pointer; text-align:center; }
  .pos-picker-btn:hover { border-color:var(--green); }
  .pos-picker-btn.active { background:var(--green-bg); border-color:var(--green); }
  .pos-picker-btn .abbr { font-size:13px; font-weight:700; color:var(--text); display:block; }
  .pos-picker-btn .full { font-size:10px; color:var(--text2); display:block; margin-top:2px; line-height:1.2; }
  .pos-picker-btn.active .abbr, .pos-picker-btn.active .full { color:var(--green-text); }

  /* Equipas */
  .equipa-card { border-radius:var(--radius-lg); border:0.5px solid var(--border); margin-bottom:12px; overflow:hidden; }
  .equipa-header { padding:10px 14px; font-weight:600; font-size:14px; display:flex; align-items:center; justify-content:space-between; }
  .equipa-players { padding:8px 14px 12px; }
  .equipa-chip { display:inline-block; font-size:12px; padding:3px 10px; border-radius:999px; margin:3px 3px 0 0; border:0.5px solid var(--border); background:var(--bg2); color:var(--text2); cursor:pointer; }
  .equipa-chip.active { font-weight:600; }
  .cor-dot { width:11px; height:11px; border-radius:50%; display:inline-block; margin-right:6px; flex-shrink:0; outline:1.5px solid rgba(128,128,128,0.55); outline-offset:1px; }

  /* Resultado */
  .resultado { display:flex; align-items:center; justify-content:center; gap:16px; padding:16px; background:var(--bg); border-radius:var(--radius-lg); border:0.5px solid var(--border); margin-bottom:16px; }
  .resultado .eq-nome { font-size:13px; color:var(--text2); text-align:center; }
  .resultado .eq-golos { font-size:32px; font-weight:700; color:var(--text); }
  .resultado .sep { font-size:20px; color:var(--text2); }

  /* Login */
  #login-screen { position:fixed; inset:0; background:var(--bg3); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; }
  .login-card { background:var(--bg); border-radius:var(--radius-lg); padding:32px 24px; width:100%; max-width:340px; box-shadow:0 4px 24px rgba(0,0,0,0.12); }
  .login-card input { font-size:16px; padding:12px; text-align:center; }